import * as i0 from '@angular/core';
import { inject, ElementRef, input, booleanAttribute, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { Ripple } from '@ngstarter-ui/components/core';

class Button {
    elementRef = inject(ElementRef);
    _ripple = inject(Ripple, { optional: true });
    ngsButton = input('text', ...(ngDevMode ? [{ debugName: "ngsButton" }] : /* istanbul ignore next */ []));
    ngsIconButton = input(undefined, { ...(ngDevMode ? { debugName: "ngsIconButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabledInteractive = input(false, { ...(ngDevMode ? { debugName: "disabledInteractive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    reverse = input(false, { ...(ngDevMode ? { debugName: "reverse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    hideTextOnMobile = input(false, { ...(ngDevMode ? { debugName: "hideTextOnMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    constructor() {
        effect(() => {
            if (this._ripple) {
                this._ripple.disabled.set(this.disabled() || this.loading() || this.disableRipple());
                this._ripple.trigger.set(this.elementRef.nativeElement);
                this._ripple.centered.set(this.isIconButton);
            }
        });
    }
    /** Whether the button is an icon button. */
    get isIconButton() {
        return this.ngsIconButton() !== undefined;
    }
    _haltDisabledEvents(event) {
        if (this.disabled() || this.loading()) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Button, isStandalone: true, selector: "\n    button[ngsButton], button[ngsIconButton],\n    a[ngsButton], a[ngsIconButton]\n  ", inputs: { ngsButton: { classPropertyName: "ngsButton", publicName: "ngsButton", isSignal: true, isRequired: false, transformFunction: null }, ngsIconButton: { classPropertyName: "ngsIconButton", publicName: "ngsIconButton", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, hideTextOnMobile: { classPropertyName: "hideTextOnMobile", publicName: "hideTextOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_haltDisabledEvents($event)" }, properties: { "attr.disabled": "((disabled() || loading()) && !disabledInteractive()) || null", "class.ngs-button-disabled": "disabled() || loading()", "class.ngs-button-loading": "loading()", "class.ngs-button-primary": "ngsButton() === \"filled\"", "class.ngs-button-outlined": "ngsButton() === \"outlined\"", "class.ngs-button-text": "(ngsButton() === \"text\" || ngsButton() === \"\") && ngsIconButton() !== undefined", "class.ngs-button-tonal": "ngsButton() === \"tonal\"", "class.ngs-icon-button": "ngsIconButton() !== undefined", "class.is-reverse": "reverse()", "class.hide-text-on-mobile": "hideTextOnMobile()", "class.is-full-width": "fullWidth()", "attr.aria-disabled": "(disabled() || loading()).toString()", "attr.tabindex": "(disabled() || loading()) && disabledInteractive() ? 0 : null" }, classAttribute: "ngs-button" }, exportAs: ["ngsButton"], ngImport: i0, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n  <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n  <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n  </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-3px}:host.ngs-icon-button .icon{position:static;left:auto;right:auto}:host .content{line-height:0}:host .content:empty{display:none}:host .ngs-button-loading-spinner{display:none;width:18px;height:18px;margin-left:8px;animation:rotate 2s linear infinite}:host .ngs-button-loading-spinner .path{stroke:currentColor;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}:host.ngs-button-loading .ngs-button-loading-spinner{display:block}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:host:hover{background:var(--ngs-button-hover-bg)}:host:focus-visible{box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host.is-reverse .icon{left:auto;right:-5px}:host.is-reverse{flex-direction:row-reverse}:host.ngs-button-primary{--ngs-button-bg: var(--ngs-button-filled-bg, var(--ngs-color-primary));--ngs-button-color: var(--ngs-button-filled-color, var(--ngs-color-on-primary))}:host.ngs-button-tonal{--ngs-button-bg: var(--ngs-button-tonal-bg, var(--ngs-color-secondary-container));--ngs-button-color: var(--ngs-button-tonal-color, var(--ngs-color-on-secondary-container))}:host.ngs-button-outlined{border:1px solid var(--ngs-button-outlined-border, var(--ngs-color-emphasis));--ngs-button-color: var(--ngs-button-outlined-color, var(--ngs-color-primary))}:host.ngs-icon-button{--ngs-button-padding: 0;--ngs-button-border-radius: 50%;min-width:var(--ngs-button-height);width:var(--ngs-button-height)}:host.ngs-icon-button.ngs-button-loading .icon{display:none}:host.ngs-color-primary{--ngs-button-color: var(--ngs-color-primary)}:host.ngs-color-primary.ngs-button-primary{--ngs-button-bg: var(--ngs-color-primary);--ngs-button-color: var(--ngs-color-on-primary)}:host.ngs-color-primary.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-primary-container);--ngs-button-color: var(--ngs-color-on-primary-container)}:host.ngs-color-accent{--ngs-button-color: var(--ngs-color-secondary)}:host.ngs-color-accent.ngs-button-primary{--ngs-button-bg: var(--ngs-color-secondary);--ngs-button-color: var(--ngs-color-on-secondary)}:host.ngs-color-accent.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-secondary-container);--ngs-button-color: var(--ngs-color-on-secondary-container)}:host.ngs-color-warn{--ngs-button-color: var(--ngs-color-danger)}:host.ngs-color-warn.ngs-button-primary{--ngs-button-bg: var(--ngs-color-danger);--ngs-button-color: var(--ngs-color-on-danger)}:host.ngs-color-warn.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-danger-container);--ngs-button-color: var(--ngs-color-on-danger-container)}:host.ngs-button-disabled{cursor:default;--ngs-button-bg: var(--ngs-state-disabled-bg) !important;--ngs-button-color: var(--ngs-state-disabled-color) !important;--ngs-button-hover-bg: var(--ngs-state-disabled-bg) !important}:host.ngs-button-disabled.ngs-button-text,:host.ngs-button-disabled.ngs-button-outlined{--ngs-button-bg: transparent !important;--ngs-button-hover-bg: transparent !important;--ngs-button-color: var(--ngs-state-disabled-color) !important}:host.ngs-button-disabled.ngs-button-outlined{border-color:var(--ngs-state-disabled-border)!important}:host.ngs-button-disabled:hover{background:var(--ngs-button-hover-bg)}:host.ngs-button-disabled[disabled]{pointer-events:none}:host:not([disabled]).ngs-button-disabled{pointer-events:auto;cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Button, decorators: [{
            type: Component,
            args: [{ selector: `
    button[ngsButton], button[ngsIconButton],
    a[ngsButton], a[ngsIconButton]
  `, standalone: true, imports: [
                        Ripple
                    ], host: {
                        'class': 'ngs-button',
                        '[attr.disabled]': '((disabled() || loading()) && !disabledInteractive()) || null',
                        '[class.ngs-button-disabled]': 'disabled() || loading()',
                        '[class.ngs-button-loading]': 'loading()',
                        '[class.ngs-button-primary]': 'ngsButton() === "filled"',
                        '[class.ngs-button-outlined]': 'ngsButton() === "outlined"',
                        '[class.ngs-button-text]': '(ngsButton() === "text" || ngsButton() === "") && ngsIconButton() !== undefined',
                        '[class.ngs-button-tonal]': 'ngsButton() === "tonal"',
                        '[class.ngs-icon-button]': 'ngsIconButton() !== undefined',
                        '[class.is-reverse]': 'reverse()',
                        '[class.hide-text-on-mobile]': 'hideTextOnMobile()',
                        '[class.is-full-width]': 'fullWidth()',
                        '[attr.aria-disabled]': '(disabled() || loading()).toString()',
                        '(click)': '_haltDisabledEvents($event)',
                        '[attr.tabindex]': '(disabled() || loading()) && disabledInteractive() ? 0 : null',
                    }, exportAs: 'ngsButton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n  <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n  <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n  </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-3px}:host.ngs-icon-button .icon{position:static;left:auto;right:auto}:host .content{line-height:0}:host .content:empty{display:none}:host .ngs-button-loading-spinner{display:none;width:18px;height:18px;margin-left:8px;animation:rotate 2s linear infinite}:host .ngs-button-loading-spinner .path{stroke:currentColor;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}:host.ngs-button-loading .ngs-button-loading-spinner{display:block}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:host:hover{background:var(--ngs-button-hover-bg)}:host:focus-visible{box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host.is-reverse .icon{left:auto;right:-5px}:host.is-reverse{flex-direction:row-reverse}:host.ngs-button-primary{--ngs-button-bg: var(--ngs-button-filled-bg, var(--ngs-color-primary));--ngs-button-color: var(--ngs-button-filled-color, var(--ngs-color-on-primary))}:host.ngs-button-tonal{--ngs-button-bg: var(--ngs-button-tonal-bg, var(--ngs-color-secondary-container));--ngs-button-color: var(--ngs-button-tonal-color, var(--ngs-color-on-secondary-container))}:host.ngs-button-outlined{border:1px solid var(--ngs-button-outlined-border, var(--ngs-color-emphasis));--ngs-button-color: var(--ngs-button-outlined-color, var(--ngs-color-primary))}:host.ngs-icon-button{--ngs-button-padding: 0;--ngs-button-border-radius: 50%;min-width:var(--ngs-button-height);width:var(--ngs-button-height)}:host.ngs-icon-button.ngs-button-loading .icon{display:none}:host.ngs-color-primary{--ngs-button-color: var(--ngs-color-primary)}:host.ngs-color-primary.ngs-button-primary{--ngs-button-bg: var(--ngs-color-primary);--ngs-button-color: var(--ngs-color-on-primary)}:host.ngs-color-primary.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-primary-container);--ngs-button-color: var(--ngs-color-on-primary-container)}:host.ngs-color-accent{--ngs-button-color: var(--ngs-color-secondary)}:host.ngs-color-accent.ngs-button-primary{--ngs-button-bg: var(--ngs-color-secondary);--ngs-button-color: var(--ngs-color-on-secondary)}:host.ngs-color-accent.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-secondary-container);--ngs-button-color: var(--ngs-color-on-secondary-container)}:host.ngs-color-warn{--ngs-button-color: var(--ngs-color-danger)}:host.ngs-color-warn.ngs-button-primary{--ngs-button-bg: var(--ngs-color-danger);--ngs-button-color: var(--ngs-color-on-danger)}:host.ngs-color-warn.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-danger-container);--ngs-button-color: var(--ngs-color-on-danger-container)}:host.ngs-button-disabled{cursor:default;--ngs-button-bg: var(--ngs-state-disabled-bg) !important;--ngs-button-color: var(--ngs-state-disabled-color) !important;--ngs-button-hover-bg: var(--ngs-state-disabled-bg) !important}:host.ngs-button-disabled.ngs-button-text,:host.ngs-button-disabled.ngs-button-outlined{--ngs-button-bg: transparent !important;--ngs-button-hover-bg: transparent !important;--ngs-button-color: var(--ngs-state-disabled-color) !important}:host.ngs-button-disabled.ngs-button-outlined{border-color:var(--ngs-state-disabled-border)!important}:host.ngs-button-disabled:hover{background:var(--ngs-button-hover-bg)}:host.ngs-button-disabled[disabled]{pointer-events:none}:host:not([disabled]).ngs-button-disabled{pointer-events:auto;cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { ngsButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsButton", required: false }] }], ngsIconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsIconButton", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], hideTextOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTextOnMobile", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { Button };
//# sourceMappingURL=ngstarter-ui-components-button.mjs.map
