button

1import {
2  afterNextRender,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  type OnDestroy,
7  ElementRef,
8  inject,
9  input,
10  signal,
11  ViewEncapsulation,
12  booleanAttribute,
13} from '@angular/core';
14 
15import { NgIcon, provideIcons } from '@ng-icons/core';
16import { lucideLoaderCircle } from '@ng-icons/lucide';
17import type { ClassValue } from 'clsx';
18 
19import { mergeClasses } from '@/shared/utils/merge-classes';
20 
21import {
22  buttonVariants,
23  type ZardButtonShapeVariants,
24  type ZardButtonSizeVariants,
25  type ZardButtonTypeVariants,
26} from './button.variants';
27 
28@Component({
29  selector: 'z-button, button[z-button], a[z-button]',
30  imports: [NgIcon],
31  template: `
32    @if (zLoading()) {
33      <ng-icon name="lucideLoaderCircle" class="animate-spin duration-2000" />
34    }
35    <ng-content />
36  `,
37  changeDetection: ChangeDetectionStrategy.OnPush,
38  encapsulation: ViewEncapsulation.None,
39  viewProviders: [provideIcons({ lucideLoaderCircle })],
40  host: {
41    'data-slot': 'button',
42    '[class]': 'classes()',
43    '[attr.data-disabled]': 'isNotInsideOfButtonOrLink() && zDisabled() || null',
44    '[attr.data-icon-only]': 'iconOnly() || null',
45    '[attr.data-size]': 'zSize()',
46    '[attr.data-variant]': 'zType()',
47    '[attr.aria-disabled]': 'isNotInsideOfButtonOrLink() && zDisabled() || null',
48    '[attr.disabled]': 'isNotInsideOfButtonOrLink() && zDisabled() ? "" : null',
49    '[attr.role]': 'isNotInsideOfButtonOrLink() ? "button" : null',
50    '[attr.tabindex]': 'isNotInsideOfButtonOrLink() ? "0" : null',
51  },
52  exportAs: 'zButton',
53})
54export class ZardButtonComponent implements OnDestroy {
55  private readonly elementRef = inject(ElementRef<HTMLElement>);
56 
57  readonly zType = input<ZardButtonTypeVariants>('default');
58  readonly zSize = input<ZardButtonSizeVariants>('default');
59  readonly zShape = input<ZardButtonShapeVariants>('default');
60  readonly class = input<ClassValue>('');
61  readonly zLoading = input(false, { transform: booleanAttribute });
62  readonly zDisabled = input(false, { transform: booleanAttribute });
63 
64  private readonly iconOnlyState = signal(false);
65  readonly iconOnly = this.iconOnlyState.asReadonly();
66 
67  private _mutationObserver: MutationObserver | null = null;
68 
69  constructor() {
70    afterNextRender(() => {
71      if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') {
72        return;
73      }
74 
75      const check = () => {
76        const el = this.elementRef.nativeElement;
77// … truncated