import * as i1 from '@agorapulse/ui-components/directives';
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
import { SymbolRegistry, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { inject, viewChild, input, booleanAttribute, output, computed, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';

const defaultButtonConfig = {
    style: 'primary',
    color: 'orange',
};
class ButtonComponent {
    baseButtonDirective = inject(BaseButtonDirective, { self: true });
    buttonElement = viewChild.required('button');
    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
    config = input(defaultButtonConfig, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), transform: (value) => value ?? defaultButtonConfig });
    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    menuTrigger = input(null, ...(ngDevMode ? [{ debugName: "menuTrigger" }] : /* istanbul ignore next */ []));
    symbolPosition = input('right', ...(ngDevMode ? [{ debugName: "symbolPosition" }] : /* istanbul ignore next */ []));
    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
    menuOpened = output();
    menuClosed = output();
    // eslint-disable-next-line @angular-eslint/no-output-native
    click = output();
    // eslint-disable-next-line @angular-eslint/no-output-native
    focus = output();
    // eslint-disable-next-line @angular-eslint/no-output-native
    blur = output();
    buttonClasses = computed(() => {
        const cfg = this.config();
        const isLocked = this.locked();
        return {
            inverse: this.symbolPosition() === 'left',
            ...(isLocked
                ? { locked: true }
                : {
                    // Style
                    [cfg.style]: true,
                    transparent: cfg.style === 'stroked-transparent',
                    stroked: cfg.style === 'stroked' || cfg.style === 'stroked-transparent',
                    // Color
                    ...(cfg.color ? { [cfg.color]: true } : {}),
                    // Loading state
                    loading: this.loading(),
                }),
        };
    }, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
    focused = false;
    symbolRegistry = inject(SymbolRegistry);
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    onClickHandle($event) {
        if (this.disabled() || this.loading()) {
            return;
        }
        $event.stopImmediatePropagation();
        this.click.emit($event);
        this.buttonElement().nativeElement.blur();
        this.blur.emit($event);
    }
    onBlurHandle($event) {
        this.focused = false;
        this.blur.emit($event);
    }
    onFocusHandle($event) {
        this.focused = true;
        this.focus.emit($event);
    }
    onSpaceKeyUp(event) {
        if (this.focused && !this.disabled() && !this.loading()) {
            event.preventDefault();
            this.buttonElement().nativeElement.click();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading() || disabled() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
                        '[attr.disabled]': 'loading() || disabled() || null',
                    }, template: "<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], menuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTrigger", required: false }] }], symbolPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolPosition", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], click: [{ type: i0.Output, args: ["click"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], onSpaceKeyUp: [{
                type: HostListener,
                args: ['window:keyup.space', ['$event']]
            }] } });

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

export { ButtonComponent, defaultButtonConfig };
//# sourceMappingURL=agorapulse-ui-components-button.mjs.map
