import { AXButtonComponent } from '@acorex/components/button';
import * as i1$1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, model, viewChild, signal, effect, output, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, computed } from '@angular/core';
import * as i1 from '@acorex/components/popover';
import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';

class AXFabComponent {
    constructor() {
        this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
        this.popupStyle = input('bubble', ...(ngDevMode ? [{ debugName: "popupStyle" }] : []));
        this.popupPlacement = model(null, ...(ngDevMode ? [{ debugName: "popupPlacement" }] : []));
        this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
        this.popoverRef = viewChild(AXPopoverComponent, ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
        this.offsetPopover = signal(null, ...(ngDevMode ? [{ debugName: "offsetPopover" }] : []));
        this.#eff = effect(() => {
            if (this.popupStyle() === 'box') {
                this.popupPlacement.set('top-end');
                this.offsetPopover.set(-10);
            }
            else {
                this.popupPlacement.set('top');
                this.offsetPopover.set(-2);
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
        /**
         *  Fires each time the user clicks the button.
         *  @event
         */
        this.onClick = output();
        /**
         * Emits when the popover is opened.
         * @event
         */
        this.onOpened = output();
        /**
         * Emits when the popover is closed.
         * @event
         */
        this.onClosed = output();
    }
    #eff;
    addStyleClass() {
        const fabItemContainer = document.querySelector('.ax-fab-item-container');
        if (!fabItemContainer)
            return;
        if (this.popupStyle() === 'box') {
            fabItemContainer.classList.add('ax-fab-box-style');
        }
        else {
            fabItemContainer.classList.add('ax-fab-bubble-style');
        }
    }
    openPopover() {
        this.addStyleClass();
        this.onOpened.emit({ component: this });
    }
    closePopover() {
        this.onClosed.emit({ component: this });
    }
    close() {
        this.popoverRef().close();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXFabComponent, isStandalone: true, selector: "ax-fab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, popupStyle: { classPropertyName: "popupStyle", publicName: "popupStyle", isSignal: true, isRequired: false, transformFunction: null }, popupPlacement: { classPropertyName: "popupPlacement", publicName: "popupPlacement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popupPlacement: "popupPlacementChange", onClick: "onClick", onOpened: "onOpened", onClosed: "onClosed" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n  (onOpened)=\"openPopover()\"\n  (onClosed)=\"closePopover()\"\n  [disablePanelClass]=\"true\"\n  [offsetY]=\"offsetPopover()\"\n  [placement]=\"popupPlacement()\"\n  [target]=\"btn\"\n>\n  <div class=\"ax-fab-item-container\">\n    <ng-content select=\"ax-fab-item\"> </ng-content>\n  </div>\n</ax-popover>\n", styles: ["ax-fab ax-button{border-radius:1000vmax}.ax-fab-item-container{display:flex;flex-direction:column;gap:.25rem;padding-block:.5rem}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}.ax-fab-item-container ax-text{font-weight:500;font-size:.875rem;line-height:1.25rem}.ax-fab-item-container .ax-fab-box{padding:.25rem .875rem;display:flex;align-items:center;gap:.5rem;min-width:10rem}.ax-fab-item-container .ax-fab-box:hover{background-color:rgba(var(--ax-sys-color-surface));cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFabComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonComponent, AXPopoverModule, AXDecoratorModule], template: "<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n  (onOpened)=\"openPopover()\"\n  (onClosed)=\"closePopover()\"\n  [disablePanelClass]=\"true\"\n  [offsetY]=\"offsetPopover()\"\n  [placement]=\"popupPlacement()\"\n  [target]=\"btn\"\n>\n  <div class=\"ax-fab-item-container\">\n    <ng-content select=\"ax-fab-item\"> </ng-content>\n  </div>\n</ax-popover>\n", styles: ["ax-fab ax-button{border-radius:1000vmax}.ax-fab-item-container{display:flex;flex-direction:column;gap:.25rem;padding-block:.5rem}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}.ax-fab-item-container ax-text{font-weight:500;font-size:.875rem;line-height:1.25rem}.ax-fab-item-container .ax-fab-box{padding:.25rem .875rem;display:flex;align-items:center;gap:.5rem;min-width:10rem}.ax-fab-item-container .ax-fab-box:hover{background-color:rgba(var(--ax-sys-color-surface));cursor:pointer}\n"] }]
        }] });

class AXFabItemComponent {
    constructor() {
        this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
        this.parent = inject(AXFabComponent);
        this.buttonSize = computed(() => {
            switch (this.parent.size()) {
                case 'xl':
                    return 'lg';
                case 'lg':
                    return 'md';
                case 'md':
                    return 'sm';
                case 'sm':
                    return 'xs';
                case 'xs':
                    return 'xs';
            }
        }, ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
        /**
         *  Fires each time the user clicks the button.
         *  @event
         */
        this.onClick = output();
    }
    clickHandler() {
        this.onClick.emit({ component: this });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFabItemComponent, isStandalone: true, selector: "ax-fab-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ng-template #iconTpl>\n  <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n  <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ax-button>\n} @else {\n  <button (click)=\"clickHandler()\" class=\"ax-fab-box\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    <ax-text> {{ label() }}</ax-text>\n  </button>\n}\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFabItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-fab-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonComponent, AXDecoratorModule, NgTemplateOutlet], template: "<ng-template #iconTpl>\n  <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n  <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ax-button>\n} @else {\n  <button (click)=\"clickHandler()\" class=\"ax-fab-box\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    <ax-text> {{ label() }}</ax-text>\n  </button>\n}\n" }]
        }] });

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

export { AXFabComponent, AXFabItemComponent };
//# sourceMappingURL=acorex-components-fab.mjs.map
