@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-button.mjs

@@ -0,0 +1,227 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, DestroyRef, computed, Directive } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { tv } from 'tailwind-variants';
+
+const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors duration-normal motion-reduce:transition-none cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    variants: {
+        variant: {
+            solid: '',
+            outline: 'border',
+            ghost: '',
+            soft: '',
+            link: 'underline-offset-4 hover:underline',
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            accent: '',
+            neutral: '',
+            info: '',
+            success: '',
+            warning: '',
+            error: '',
+        },
+        size: {
+            xs: 'px-2 py-1 text-xs',
+            sm: 'px-3 py-1.5 text-sm',
+            md: 'px-4 py-2 text-sm',
+            lg: 'px-5 py-2.5 text-base',
+            xl: 'px-6 py-3 text-base',
+        },
+        disabled: {
+            true: 'opacity-50 pointer-events-none',
+            false: '',
+        },
+        loading: {
+            true: 'pointer-events-none',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // ===== Primary =====
+        { variant: 'solid', color: 'primary', class: 'bg-primary-600 text-on-primary hover:bg-primary-700' },
+        { variant: 'outline', color: 'primary', class: 'border-primary-300 text-primary-700 hover:bg-primary-50' },
+        { variant: 'ghost', color: 'primary', class: 'text-primary-700 hover:bg-primary-50' },
+        { variant: 'soft', color: 'primary', class: 'bg-primary-50 text-primary-800 hover:bg-primary-100' },
+        { variant: 'link', color: 'primary', class: 'text-primary-700' },
+        // ===== Secondary =====
+        { variant: 'solid', color: 'secondary', class: 'bg-secondary-600 text-on-secondary hover:bg-secondary-700' },
+        { variant: 'outline', color: 'secondary', class: 'border-secondary-300 text-secondary-700 hover:bg-secondary-50' },
+        { variant: 'ghost', color: 'secondary', class: 'text-secondary-700 hover:bg-secondary-50' },
+        { variant: 'soft', color: 'secondary', class: 'bg-secondary-50 text-secondary-800 hover:bg-secondary-100' },
+        { variant: 'link', color: 'secondary', class: 'text-secondary-700' },
+        // ===== Accent =====
+        { variant: 'solid', color: 'accent', class: 'bg-accent-600 text-on-accent hover:bg-accent-700' },
+        { variant: 'outline', color: 'accent', class: 'border-accent-300 text-accent-700 hover:bg-accent-50' },
+        { variant: 'ghost', color: 'accent', class: 'text-accent-700 hover:bg-accent-50' },
+        { variant: 'soft', color: 'accent', class: 'bg-accent-50 text-accent-800 hover:bg-accent-100' },
+        { variant: 'link', color: 'accent', class: 'text-accent-700' },
+        // ===== Neutral ===== (subdued solid pairs surface-muted with text-fg; on-neutral is white and would be unreadable here)
+        { variant: 'solid', color: 'neutral', class: 'bg-surface-muted text-fg hover:bg-surface-sunken' },
+        { variant: 'outline', color: 'neutral', class: 'border-border text-fg hover:bg-surface-muted' },
+        { variant: 'ghost', color: 'neutral', class: 'text-fg-muted hover:bg-surface-muted' },
+        { variant: 'soft', color: 'neutral', class: 'bg-surface-muted text-fg hover:bg-surface-sunken' },
+        { variant: 'link', color: 'neutral', class: 'text-fg-muted' },
+        // ===== Info =====
+        { variant: 'solid', color: 'info', class: 'bg-info-600 text-on-info hover:bg-info-700' },
+        { variant: 'outline', color: 'info', class: 'border-info-300 text-info-700 hover:bg-info-50' },
+        { variant: 'ghost', color: 'info', class: 'text-info-700 hover:bg-info-50' },
+        { variant: 'soft', color: 'info', class: 'bg-info-50 text-info-800 hover:bg-info-100' },
+        { variant: 'link', color: 'info', class: 'text-info-700' },
+        // ===== Success =====
+        { variant: 'solid', color: 'success', class: 'bg-success-600 text-on-success hover:bg-success-700' },
+        { variant: 'outline', color: 'success', class: 'border-success-300 text-success-700 hover:bg-success-50' },
+        { variant: 'ghost', color: 'success', class: 'text-success-700 hover:bg-success-50' },
+        { variant: 'soft', color: 'success', class: 'bg-success-50 text-success-800 hover:bg-success-100' },
+        { variant: 'link', color: 'success', class: 'text-success-700' },
+        // ===== Warning =====
+        { variant: 'solid', color: 'warning', class: 'bg-warning-500 text-on-warning hover:bg-warning-600' },
+        { variant: 'outline', color: 'warning', class: 'border-warning-300 text-warning-700 hover:bg-warning-50' },
+        { variant: 'ghost', color: 'warning', class: 'text-warning-700 hover:bg-warning-50' },
+        { variant: 'soft', color: 'warning', class: 'bg-warning-50 text-warning-800 hover:bg-warning-100' },
+        { variant: 'link', color: 'warning', class: 'text-warning-700' },
+        // ===== Error =====
+        { variant: 'solid', color: 'error', class: 'bg-error-600 text-on-error hover:bg-error-700' },
+        { variant: 'outline', color: 'error', class: 'border-error-300 text-error-700 hover:bg-error-50' },
+        { variant: 'ghost', color: 'error', class: 'text-error-700 hover:bg-error-50' },
+        { variant: 'soft', color: 'error', class: 'bg-error-50 text-error-800 hover:bg-error-100' },
+        { variant: 'link', color: 'error', class: 'text-error-700' },
+        // ===== Link variant: strip padding =====
+        { variant: 'link', size: 'xs', class: 'px-0 py-0' },
+        { variant: 'link', size: 'sm', class: 'px-0 py-0' },
+        { variant: 'link', size: 'md', class: 'px-0 py-0' },
+        { variant: 'link', size: 'lg', class: 'px-0 py-0' },
+        { variant: 'link', size: 'xl', class: 'px-0 py-0' },
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'primary',
+        size: 'md',
+        disabled: false,
+        loading: false,
+    },
+}, {
+    twMerge: true,
+});
+/**
+ * Enhances a native `<button>` or `<a>` element with library styling, semantic
+ * color/size variants, and disabled/loading states. The directive does not
+ * expose a `clicked` output — bind `(click)` directly on the host element. When
+ * `disabled` or `loading` is true, the directive intercepts clicks with
+ * `preventDefault()` + `stopImmediatePropagation()` so the host handler does
+ * not run.
+ *
+ * The directive owns no template, so visual loading affordances (spinner,
+ * status text) are composed by the consumer — see the `loading` input.
+ */
+class ButtonDirective {
+    /** Controls the visual style. Defaults to `'solid'`. */
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Sets the semantic color palette. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Controls the size (padding, font size, icon size). Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, blocks clicks and sets `aria-busy="true"`. Defaults to `false`.
+     * The directive does not render a spinner or status text — compose them in
+     * the projected content:
+     *
+     * ```html
+     * <button twButton [loading]="saving()">
+     *   @if (saving()) {
+     *     <tw-spinner twButtonIcon size="sm" />
+     *     <span class="sr-only">Saving…</span>
+     *   }
+     *   Save
+     * </button>
+     * ```
+     *
+     * The `sr-only` text gives assistive tech an explicit status announcement
+     * to pair with the `aria-busy` attribute.
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    elementRef = inject((ElementRef));
+    focusMonitor = inject(FocusMonitor);
+    destroyRef = inject(DestroyRef);
+    isNativeButton = computed(() => this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "isNativeButton" }] : /* istanbul ignore next */ []));
+    classes = computed(() => buttonVariants({
+        variant: this.variant(),
+        color: this.color(),
+        size: this.size(),
+        disabled: this.disabled() || this.loading(),
+        loading: this.loading(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.focusMonitor.monitor(this.elementRef);
+        this.destroyRef.onDestroy(() => {
+            this.focusMonitor.stopMonitoring(this.elementRef);
+        });
+    }
+    handleClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ButtonDirective, isStandalone: true, selector: "[twButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "classes()", "attr.aria-disabled": "disabled() || loading() || null", "attr.aria-busy": "loading() || null", "attr.disabled": "isNativeButton() && (disabled() || loading()) ? true : null", "attr.tabindex": "!isNativeButton() && (disabled() || loading()) ? -1 : null" } }, exportAs: ["twButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twButton]',
+                    exportAs: 'twButton',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-disabled]': 'disabled() || loading() || null',
+                        '[attr.aria-busy]': 'loading() || null',
+                        '[attr.disabled]': 'isNativeButton() && (disabled() || loading()) ? true : null',
+                        '[attr.tabindex]': '!isNativeButton() && (disabled() || loading()) ? -1 : null',
+                        '(click)': 'handleClick($event)',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+class ButtonIconDirective {
+    /**
+     * Position of the icon relative to the button label. Defaults to `'leading'`.
+     *
+     * The empty-string member of the union is load-bearing: Angular binds `''` to
+     * the input when the selector is used as a bare attribute (`<svg twButtonIcon>`),
+     * which is the canonical "leading" usage. Templates that omit a value still
+     * have the directive attached and resolve to leading placement at runtime via
+     * the `=== 'trailing'` check below.
+     */
+    twButtonIcon = input('leading', ...(ngDevMode ? [{ debugName: "twButtonIcon" }] : /* istanbul ignore next */ []));
+    button = inject(ButtonDirective);
+    classes = computed(() => {
+        const size = this.button.size();
+        const iconSize = size === 'xs' || size === 'sm' ? 'size-4' : 'size-5';
+        // `order-last` only takes effect when the button host is a flex container —
+        // `ButtonDirective`'s base class includes `inline-flex`, which is the
+        // contract this directive relies on for trailing-icon placement.
+        const order = this.twButtonIcon() === 'trailing' ? 'order-last' : '';
+        return [iconSize, 'shrink-0', order].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ButtonIconDirective, isStandalone: true, selector: "[twButtonIcon]", inputs: { twButtonIcon: { classPropertyName: "twButtonIcon", publicName: "twButtonIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twButtonIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { twButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "twButtonIcon", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonDirective, ButtonIconDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-button.mjs.map

package/fesm2022/cdevhub-ngx-tw-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-button.mjs","sources":["../../../projects/ngx-tw/button/button.ts","../../../projects/ngx-tw/button/cdevhub-ngx-tw-button.ts"],"sourcesContent":["import {\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  type OnInit,\n} from '@angular/core';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor, TwSize } from '@cdevhub/ngx-tw/core';\n\n/** Visual style of the button. */\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link';\n\nconst buttonVariants = tv({\n  base: 'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors duration-normal motion-reduce:transition-none cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',\n  variants: {\n    variant: {\n      solid: '',\n      outline: 'border',\n      ghost: '',\n      soft: '',\n      link: 'underline-offset-4 hover:underline',\n    },\n    color: {\n      primary: '',\n      secondary: '',\n      accent: '',\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      error: '',\n    },\n    size: {\n      xs: 'px-2 py-1 text-xs',\n      sm: 'px-3 py-1.5 text-sm',\n      md: 'px-4 py-2 text-sm',\n      lg: 'px-5 py-2.5 text-base',\n      xl: 'px-6 py-3 text-base',\n    },\n    disabled: {\n      true: 'opacity-50 pointer-events-none',\n      false: '',\n    },\n    loading: {\n      true: 'pointer-events-none',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // ===== Primary =====\n    { variant: 'solid', color: 'primary', class: 'bg-primary-600 text-on-primary hover:bg-primary-700' },\n    { variant: 'outline', color: 'primary', class: 'border-primary-300 text-primary-700 hover:bg-primary-50' },\n    { variant: 'ghost', color: 'primary', class: 'text-primary-700 hover:bg-primary-50' },\n    { variant: 'soft', color: 'primary', class: 'bg-primary-50 text-primary-800 hover:bg-primary-100' },\n    { variant: 'link', color: 'primary', class: 'text-primary-700' },\n\n    // ===== Secondary =====\n    { variant: 'solid', color: 'secondary', class: 'bg-secondary-600 text-on-secondary hover:bg-secondary-700' },\n    { variant: 'outline', color: 'secondary', class: 'border-secondary-300 text-secondary-700 hover:bg-secondary-50' },\n    { variant: 'ghost', color: 'secondary', class: 'text-secondary-700 hover:bg-secondary-50' },\n    { variant: 'soft', color: 'secondary', class: 'bg-secondary-50 text-secondary-800 hover:bg-secondary-100' },\n    { variant: 'link', color: 'secondary', class: 'text-secondary-700' },\n\n    // ===== Accent =====\n    { variant: 'solid', color: 'accent', class: 'bg-accent-600 text-on-accent hover:bg-accent-700' },\n    { variant: 'outline', color: 'accent', class: 'border-accent-300 text-accent-700 hover:bg-accent-50' },\n    { variant: 'ghost', color: 'accent', class: 'text-accent-700 hover:bg-accent-50' },\n    { variant: 'soft', color: 'accent', class: 'bg-accent-50 text-accent-800 hover:bg-accent-100' },\n    { variant: 'link', color: 'accent', class: 'text-accent-700' },\n\n    // ===== Neutral ===== (subdued solid pairs surface-muted with text-fg; on-neutral is white and would be unreadable here)\n    { variant: 'solid', color: 'neutral', class: 'bg-surface-muted text-fg hover:bg-surface-sunken' },\n    { variant: 'outline', color: 'neutral', class: 'border-border text-fg hover:bg-surface-muted' },\n    { variant: 'ghost', color: 'neutral', class: 'text-fg-muted hover:bg-surface-muted' },\n    { variant: 'soft', color: 'neutral', class: 'bg-surface-muted text-fg hover:bg-surface-sunken' },\n    { variant: 'link', color: 'neutral', class: 'text-fg-muted' },\n\n    // ===== Info =====\n    { variant: 'solid', color: 'info', class: 'bg-info-600 text-on-info hover:bg-info-700' },\n    { variant: 'outline', color: 'info', class: 'border-info-300 text-info-700 hover:bg-info-50' },\n    { variant: 'ghost', color: 'info', class: 'text-info-700 hover:bg-info-50' },\n    { variant: 'soft', color: 'info', class: 'bg-info-50 text-info-800 hover:bg-info-100' },\n    { variant: 'link', color: 'info', class: 'text-info-700' },\n\n    // ===== Success =====\n    { variant: 'solid', color: 'success', class: 'bg-success-600 text-on-success hover:bg-success-700' },\n    { variant: 'outline', color: 'success', class: 'border-success-300 text-success-700 hover:bg-success-50' },\n    { variant: 'ghost', color: 'success', class: 'text-success-700 hover:bg-success-50' },\n    { variant: 'soft', color: 'success', class: 'bg-success-50 text-success-800 hover:bg-success-100' },\n    { variant: 'link', color: 'success', class: 'text-success-700' },\n\n    // ===== Warning =====\n    { variant: 'solid', color: 'warning', class: 'bg-warning-500 text-on-warning hover:bg-warning-600' },\n    { variant: 'outline', color: 'warning', class: 'border-warning-300 text-warning-700 hover:bg-warning-50' },\n    { variant: 'ghost', color: 'warning', class: 'text-warning-700 hover:bg-warning-50' },\n    { variant: 'soft', color: 'warning', class: 'bg-warning-50 text-warning-800 hover:bg-warning-100' },\n    { variant: 'link', color: 'warning', class: 'text-warning-700' },\n\n    // ===== Error =====\n    { variant: 'solid', color: 'error', class: 'bg-error-600 text-on-error hover:bg-error-700' },\n    { variant: 'outline', color: 'error', class: 'border-error-300 text-error-700 hover:bg-error-50' },\n    { variant: 'ghost', color: 'error', class: 'text-error-700 hover:bg-error-50' },\n    { variant: 'soft', color: 'error', class: 'bg-error-50 text-error-800 hover:bg-error-100' },\n    { variant: 'link', color: 'error', class: 'text-error-700' },\n\n    // ===== Link variant: strip padding =====\n    { variant: 'link', size: 'xs', class: 'px-0 py-0' },\n    { variant: 'link', size: 'sm', class: 'px-0 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0 py-0' },\n    { variant: 'link', size: 'xl', class: 'px-0 py-0' },\n  ],\n  defaultVariants: {\n    variant: 'solid',\n    color: 'primary',\n    size: 'md',\n    disabled: false,\n    loading: false,\n  },\n}, {\n  twMerge: true,\n});\n\n/**\n * Enhances a native `<button>` or `<a>` element with library styling, semantic\n * color/size variants, and disabled/loading states. The directive does not\n * expose a `clicked` output — bind `(click)` directly on the host element. When\n * `disabled` or `loading` is true, the directive intercepts clicks with\n * `preventDefault()` + `stopImmediatePropagation()` so the host handler does\n * not run.\n *\n * The directive owns no template, so visual loading affordances (spinner,\n * status text) are composed by the consumer — see the `loading` input.\n */\n@Directive({\n  selector: '[twButton]',\n  exportAs: 'twButton',\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-disabled]': 'disabled() || loading() || null',\n    '[attr.aria-busy]': 'loading() || null',\n    '[attr.disabled]': 'isNativeButton() && (disabled() || loading()) ? true : null',\n    '[attr.tabindex]': '!isNativeButton() && (disabled() || loading()) ? -1 : null',\n    '(click)': 'handleClick($event)',\n  },\n})\nexport class ButtonDirective implements OnInit {\n  /** Controls the visual style. Defaults to `'solid'`. */\n  readonly variant = input<ButtonVariant>('solid');\n\n  /** Sets the semantic color palette. Defaults to `'primary'`. */\n  readonly color = input<TwColor>('primary');\n\n  /** Controls the size (padding, font size, icon size). Defaults to `'md'`. */\n  readonly size = input<TwSize>('md');\n\n  /** When true, prevents interaction and applies muted styling. Defaults to `false`. */\n  readonly disabled = input(false);\n\n  /**\n   * When true, blocks clicks and sets `aria-busy=\"true\"`. Defaults to `false`.\n   * The directive does not render a spinner or status text — compose them in\n   * the projected content:\n   *\n   * ```html\n   * <button twButton [loading]=\"saving()\">\n   *   @if (saving()) {\n   *     <tw-spinner twButtonIcon size=\"sm\" />\n   *     <span class=\"sr-only\">Saving…</span>\n   *   }\n   *   Save\n   * </button>\n   * ```\n   *\n   * The `sr-only` text gives assistive tech an explicit status announcement\n   * to pair with the `aria-busy` attribute.\n   */\n  readonly loading = input(false);\n\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly isNativeButton = computed(\n    () => this.elementRef.nativeElement.tagName === 'BUTTON',\n  );\n\n  readonly classes = computed(() =>\n    buttonVariants({\n      variant: this.variant(),\n      color: this.color(),\n      size: this.size(),\n      disabled: this.disabled() || this.loading(),\n      loading: this.loading(),\n    }),\n  );\n\n  ngOnInit(): void {\n    this.focusMonitor.monitor(this.elementRef);\n    this.destroyRef.onDestroy(() => {\n      this.focusMonitor.stopMonitoring(this.elementRef);\n    });\n  }\n\n  handleClick(event: MouseEvent): void {\n    if (this.disabled() || this.loading()) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n\n@Directive({\n  selector: '[twButtonIcon]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class ButtonIconDirective {\n  /**\n   * Position of the icon relative to the button label. Defaults to `'leading'`.\n   *\n   * The empty-string member of the union is load-bearing: Angular binds `''` to\n   * the input when the selector is used as a bare attribute (`<svg twButtonIcon>`),\n   * which is the canonical \"leading\" usage. Templates that omit a value still\n   * have the directive attached and resolve to leading placement at runtime via\n   * the `=== 'trailing'` check below.\n   */\n  readonly twButtonIcon = input<'' | 'leading' | 'trailing'>('leading');\n\n  private readonly button = inject(ButtonDirective);\n\n  readonly classes = computed(() => {\n    const size = this.button.size();\n    const iconSize = size === 'xs' || size === 'sm' ? 'size-4' : 'size-5';\n    // `order-last` only takes effect when the button host is a flex container —\n    // `ButtonDirective`'s base class includes `inline-flex`, which is the\n    // contract this directive relies on for trailing-icon placement.\n    const order = this.twButtonIcon() === 'trailing' ? 'order-last' : '';\n    return [iconSize, 'shrink-0', order].filter(Boolean).join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}