import { MXButtonBaseComponent, AXClosableComponent, AXComponent, AXCommonModule, AXRippleDirective } from '@acorex/cdk/common';
import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
import { NgTemplateOutlet, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, HostBinding, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { AXLoadingModule } from '@acorex/components/loading';

// import { AXButtonType } from './button-item.class';
/**
 * The Button is a component which detects user interaction and triggers a corresponding event
 *
 * @category Components
 */
class AXDropdownButtonComponent extends MXButtonBaseComponent {
    constructor() {
        super(...arguments);
        /**
         *  Fires each time the user clicks the button.
         *  @event
         */
        this.onClick = new EventEmitter();
        /**
         * Defines the type of the button element.
         *
         *  @defaultValue 'button'
         */
        this.type = 'button';
        /**
         * Specifies the mode of the button.
         * Can be either 'split' or 'dropdown'.
         *
         *  @defaultValue 'split'
         */
        this.mode = 'split';
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        this.getHostElement().removeAttribute('tabindex');
    }
    /**
     *  @ignore
     */
    getButton() {
        return this.getHostElement().firstElementChild;
    }
    /**
     *  @ignore
     */
    _handleClick(e) {
        if (this.disabled) {
            e.preventDefault();
            return;
        }
        this.onClick.emit({
            component: this,
            htmlElement: this.getHostElement(),
            nativeEvent: e,
        });
        // TODO: check keyboard event
        setTimeout(() => {
            this.blur();
        });
    }
    /**
     * Simulates a click event on the button element.
     *
     * @returns void - No return value. The button click is simulated.
     */
    click() {
        this.getButton()?.click();
    }
    /**
     * Sets focus to the button and adds a focus state class.
     *
     * @returns void - No return value. The button receives focus.
     */
    focus() {
        this.getButton()?.focus();
        this.getButton().classList.add('ax-state-focus');
    }
    /**
     * Removes the focus state class from the button.
     *
     * @returns void - No return value. The button loses focus.
     */
    blur() {
        this.getButton().classList.remove('ax-state-focus');
    }
    /**
     * Closes the dropdown panel.
     *
     * @returns void - No return value. The dropdown panel is closed.
     */
    close() {
        this.dropdownPanel.close();
    }
    get __hostClass() {
        return this.disabled ? 'ax-state-disabled ' : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXDropdownButtonComponent, isStandalone: true, selector: "ax-dropdown-button", inputs: { disabled: "disabled", size: "size", color: "color", look: "look", text: "text", type: "type", mode: "mode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: AXClosableComponent,
                useExisting: AXDropdownButtonComponent,
            },
            { provide: AXComponent, useExisting: AXDropdownButtonComponent },
        ], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #dropdown>\n  <ax-dropdown-panel placement=\"bottom-end\" #panel>\n    <ng-content select=\"ax-button-item-list\"></ng-content>\n  </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n  <ax-button\n    [look]=\"look\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (click)=\"_handleClick($event)\"\n    [text]=\"text\"\n  >\n    <ax-prefix> <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container></ax-prefix>\n\n    <ax-suffix>\n      <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n    </ax-suffix>\n\n    <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n  </ax-button>\n} @else {\n  <ax-button\n    class=\"ax-dropdown-split-button\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (click)=\"_handleClick($event)\"\n    [text]=\"text\"\n  >\n    <ax-prefix> <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container></ax-prefix>\n  </ax-button>\n\n  <ax-divider class=\"ax-{{ color }} ax-{{ look }} ax-dropdown-split-button-divider\"></ax-divider>\n\n  <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n    <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n    <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n  </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-light-surface)}ax-dropdown-button ax-divider.ax-primary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-primary-surface)}ax-dropdown-button ax-divider.ax-primary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-primary-lighter-surface)}ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-light-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-secondary-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-secondary-lighter-surface)}ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-light-surface)}ax-dropdown-button ax-divider.ax-success.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-success-surface)}ax-dropdown-button ax-divider.ax-success.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-success-lighter-surface)}ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-light-surface)}ax-dropdown-button ax-divider.ax-warning.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-warning-surface)}ax-dropdown-button ax-divider.ax-warning.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-warning-lighter-surface)}ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-light-surface)}ax-dropdown-button ax-divider.ax-danger.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-danger-surface)}ax-dropdown-button ax-divider.ax-danger.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-danger-lighter-surface)}ax-dropdown-button ax-divider.ax-accent1{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent1-light-surface)}ax-dropdown-button ax-divider.ax-accent1.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent1-surface)}ax-dropdown-button ax-divider.ax-accent1.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent1-lighter-surface)}ax-dropdown-button ax-divider.ax-accent2{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent2-light-surface)}ax-dropdown-button ax-divider.ax-accent2.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent2-surface)}ax-dropdown-button ax-divider.ax-accent2.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent2-lighter-surface)}ax-dropdown-button ax-divider.ax-accent3{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent3-light-surface)}ax-dropdown-button ax-divider.ax-accent3.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent3-surface)}ax-dropdown-button ax-divider.ax-accent3.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent3-lighter-surface)}ax-dropdown-button ax-divider.ax-accent4{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent4-light-surface)}ax-dropdown-button ax-divider.ax-accent4.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent4-surface)}ax-dropdown-button ax-divider.ax-accent4.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent4-lighter-surface)}ax-dropdown-button ax-divider.ax-accent5{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent5-light-surface)}ax-dropdown-button ax-divider.ax-accent5.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent5-surface)}ax-dropdown-button ax-divider.ax-accent5.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent5-lighter-surface)}ax-dropdown-button ax-divider.ax-accent6{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent6-light-surface)}ax-dropdown-button ax-divider.ax-accent6.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent6-surface)}ax-dropdown-button ax-divider.ax-accent6.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent6-lighter-surface)}ax-dropdown-button ax-divider.ax-accent7{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent7-light-surface)}ax-dropdown-button ax-divider.ax-accent7.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent7-surface)}ax-dropdown-button ax-divider.ax-accent7.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent7-lighter-surface)}ax-dropdown-button ax-divider.ax-default{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-light-surface)}ax-dropdown-button ax-divider.ax-default.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-light-surface)}ax-dropdown-button ax-divider.ax-default.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-light-surface)}.ax-dark ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent1{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent1-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent2{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent2-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent3{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent3-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent4{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent4-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent5{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent5-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent6{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent6-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent7{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent7-dark-surface)}ax-dropdown-button{display:inline-flex;align-items:center;justify-content:center;--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));height:var(--ax-comp-button-height);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-dropdown-button.ax-state-disabled ax-divider{opacity:.5}ax-dropdown-button ax-button{width:100%}ax-dropdown-button.ax-xs .ax-dropdown-split-button-arrow ax-icon{font-size:.7rem}ax-dropdown-button.ax-sm .ax-dropdown-split-button-arrow ax-icon{font-size:.8rem}ax-dropdown-button.ax-md .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}ax-dropdown-button.ax-lg .ax-dropdown-split-button-arrow ax-icon{font-size:1.2rem}ax-dropdown-button.ax-xl .ax-dropdown-split-button-arrow ax-icon{font-size:1.4rem}ax-dropdown-button .ax-dropdown-split-button-divider{width:1px;height:100%;background-color:rgba(var(--ax-comp-dropdown-button-divider-color-solid))}ax-dropdown-button .ax-dropdown-split-button-divider.ax-outline{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-outline))}ax-dropdown-button .ax-dropdown-split-button-divider.ax-blank,ax-dropdown-button .ax-dropdown-split-button-divider.ax-link{background-color:transparent}ax-dropdown-button .ax-dropdown-split-button-divider.ax-twotone{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-twotone))}ax-dropdown-button .ax-dropdown-split-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}ax-dropdown-button .ax-dropdown-split-button-arrow{border-end-start-radius:0;border-start-start-radius:0;border-inline-start:0}ax-dropdown-button .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}.ax-xs ax-dropdown-button,ax-dropdown-button.ax-xs{--ax-comp-button-size-ratio: .75}.ax-sm ax-dropdown-button,ax-dropdown-button.ax-sm{--ax-comp-button-size-ratio: .875}.ax-md ax-dropdown-button,ax-dropdown-button{--ax-comp-button-size-ratio: 1}.ax-lg ax-dropdown-button,ax-dropdown-button.ax-lg{--ax-comp-button-size-ratio: 1.125}.ax-xl ax-dropdown-button,ax-dropdown-button.ax-xl{--ax-comp-button-size-ratio: 1.125}\n"], dependencies: [{ kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-dropdown-button', inputs: ['disabled', 'size', 'color', 'look', 'text'], outputs: ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'lookChange', 'colorChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: AXClosableComponent,
                            useExisting: AXDropdownButtonComponent,
                        },
                        { provide: AXComponent, useExisting: AXDropdownButtonComponent },
                    ], imports: [
                        AXDropdownPanelComponent,
                        AXButtonComponent,
                        NgTemplateOutlet,
                        AXDecoratorGenericComponent,
                        AXDecoratorIconComponent,
                    ], template: "<ng-template #dropdown>\n  <ax-dropdown-panel placement=\"bottom-end\" #panel>\n    <ng-content select=\"ax-button-item-list\"></ng-content>\n  </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n  <ax-button\n    [look]=\"look\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (click)=\"_handleClick($event)\"\n    [text]=\"text\"\n  >\n    <ax-prefix> <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container></ax-prefix>\n\n    <ax-suffix>\n      <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n    </ax-suffix>\n\n    <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n  </ax-button>\n} @else {\n  <ax-button\n    class=\"ax-dropdown-split-button\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (click)=\"_handleClick($event)\"\n    [text]=\"text\"\n  >\n    <ax-prefix> <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container></ax-prefix>\n  </ax-button>\n\n  <ax-divider class=\"ax-{{ color }} ax-{{ look }} ax-dropdown-split-button-divider\"></ax-divider>\n\n  <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n    <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n    <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n  </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-light-surface)}ax-dropdown-button ax-divider.ax-primary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-primary-surface)}ax-dropdown-button ax-divider.ax-primary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-primary-lighter-surface)}ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-light-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-secondary-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-secondary-lighter-surface)}ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-light-surface)}ax-dropdown-button ax-divider.ax-success.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-success-surface)}ax-dropdown-button ax-divider.ax-success.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-success-lighter-surface)}ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-light-surface)}ax-dropdown-button ax-divider.ax-warning.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-warning-surface)}ax-dropdown-button ax-divider.ax-warning.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-warning-lighter-surface)}ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-light-surface)}ax-dropdown-button ax-divider.ax-danger.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-danger-surface)}ax-dropdown-button ax-divider.ax-danger.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-danger-lighter-surface)}ax-dropdown-button ax-divider.ax-accent1{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent1-light-surface)}ax-dropdown-button ax-divider.ax-accent1.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent1-surface)}ax-dropdown-button ax-divider.ax-accent1.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent1-lighter-surface)}ax-dropdown-button ax-divider.ax-accent2{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent2-light-surface)}ax-dropdown-button ax-divider.ax-accent2.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent2-surface)}ax-dropdown-button ax-divider.ax-accent2.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent2-lighter-surface)}ax-dropdown-button ax-divider.ax-accent3{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent3-light-surface)}ax-dropdown-button ax-divider.ax-accent3.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent3-surface)}ax-dropdown-button ax-divider.ax-accent3.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent3-lighter-surface)}ax-dropdown-button ax-divider.ax-accent4{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent4-light-surface)}ax-dropdown-button ax-divider.ax-accent4.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent4-surface)}ax-dropdown-button ax-divider.ax-accent4.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent4-lighter-surface)}ax-dropdown-button ax-divider.ax-accent5{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent5-light-surface)}ax-dropdown-button ax-divider.ax-accent5.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent5-surface)}ax-dropdown-button ax-divider.ax-accent5.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent5-lighter-surface)}ax-dropdown-button ax-divider.ax-accent6{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent6-light-surface)}ax-dropdown-button ax-divider.ax-accent6.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent6-surface)}ax-dropdown-button ax-divider.ax-accent6.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent6-lighter-surface)}ax-dropdown-button ax-divider.ax-accent7{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent7-light-surface)}ax-dropdown-button ax-divider.ax-accent7.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-accent7-surface)}ax-dropdown-button ax-divider.ax-accent7.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-accent7-lighter-surface)}ax-dropdown-button ax-divider.ax-default{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-light-surface)}ax-dropdown-button ax-divider.ax-default.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-light-surface)}ax-dropdown-button ax-divider.ax-default.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-light-surface)}.ax-dark ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent1{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent1-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent2{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent2-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent3{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent3-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent4{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent4-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent5{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent5-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent6{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent6-dark-surface)}.ax-dark ax-dropdown-button ax-divider.ax-accent7{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-accent7-dark-surface)}ax-dropdown-button{display:inline-flex;align-items:center;justify-content:center;--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));height:var(--ax-comp-button-height);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-dropdown-button.ax-state-disabled ax-divider{opacity:.5}ax-dropdown-button ax-button{width:100%}ax-dropdown-button.ax-xs .ax-dropdown-split-button-arrow ax-icon{font-size:.7rem}ax-dropdown-button.ax-sm .ax-dropdown-split-button-arrow ax-icon{font-size:.8rem}ax-dropdown-button.ax-md .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}ax-dropdown-button.ax-lg .ax-dropdown-split-button-arrow ax-icon{font-size:1.2rem}ax-dropdown-button.ax-xl .ax-dropdown-split-button-arrow ax-icon{font-size:1.4rem}ax-dropdown-button .ax-dropdown-split-button-divider{width:1px;height:100%;background-color:rgba(var(--ax-comp-dropdown-button-divider-color-solid))}ax-dropdown-button .ax-dropdown-split-button-divider.ax-outline{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-outline))}ax-dropdown-button .ax-dropdown-split-button-divider.ax-blank,ax-dropdown-button .ax-dropdown-split-button-divider.ax-link{background-color:transparent}ax-dropdown-button .ax-dropdown-split-button-divider.ax-twotone{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-twotone))}ax-dropdown-button .ax-dropdown-split-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}ax-dropdown-button .ax-dropdown-split-button-arrow{border-end-start-radius:0;border-start-start-radius:0;border-inline-start:0}ax-dropdown-button .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}.ax-xs ax-dropdown-button,ax-dropdown-button.ax-xs{--ax-comp-button-size-ratio: .75}.ax-sm ax-dropdown-button,ax-dropdown-button.ax-sm{--ax-comp-button-size-ratio: .875}.ax-md ax-dropdown-button,ax-dropdown-button{--ax-comp-button-size-ratio: 1}.ax-lg ax-dropdown-button,ax-dropdown-button.ax-lg{--ax-comp-button-size-ratio: 1.125}.ax-xl ax-dropdown-button,ax-dropdown-button.ax-xl{--ax-comp-button-size-ratio: 1.125}\n"] }]
        }], propDecorators: { dropdownPanel: [{
                type: ViewChild,
                args: ['panel']
            }], type: [{
                type: Input
            }], mode: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

const COMPONENT = [AXDropdownButtonComponent];
const MODULES = [
    CommonModule,
    AXCommonModule,
    AXDecoratorModule,
    AXLoadingModule,
    AXRippleDirective,
    AXDropdownModule,
    AXButtonModule,
];
class AXDropdownButtonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonModule, imports: [CommonModule,
            AXCommonModule,
            AXDecoratorModule,
            AXLoadingModule,
            AXRippleDirective,
            AXDropdownModule,
            AXButtonModule, AXDropdownButtonComponent], exports: [AXDropdownButtonComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonModule, imports: [CommonModule,
            AXCommonModule,
            AXDecoratorModule,
            AXLoadingModule,
            AXDropdownModule,
            AXButtonModule, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropdownButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXDropdownButtonComponent, AXDropdownButtonModule };
//# sourceMappingURL=acorex-components-dropdown-button.mjs.map
