import { MXInteractiveComponent, MXColorLookComponent, AXComponent, MXColorComponent } from '@acorex/cdk/common';
import { AXButtonComponent } from '@acorex/components/button';
import * as i0 from '@angular/core';
import { input, effect, EventEmitter, contentChildren, output, HostListener, HostBinding, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, NgModule } from '@angular/core';
import { classes } from 'polytype';

/**
 * A component that groups multiple buttons together, allowing for consistent styling and behavior.
 *
 * @category Components
 */
class AXButtonGroupComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
    constructor() {
        super(...arguments);
        this.fitParent = input(false, ...(ngDevMode ? [{ debugName: "fitParent" }] : []));
        this.#effect = effect(() => {
            if (this._contentButtons().length) {
                this._bindEvents();
                this._bindProps();
            }
        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
        /**
         * Fires when any button in the group is clicked.
         *
         * @event
         */
        this.onClick = new EventEmitter();
        /**
         *  @ignore
         */
        this._contentButtons = contentChildren(AXButtonGroupItemComponent, ...(ngDevMode ? [{ debugName: "_contentButtons", descendants: true }] : [{ descendants: true }]));
        /**
         * Emitted when the selection mode changes.
         *
         * @event
         */
        this.selectionChange = new EventEmitter();
        /**
         * Emits the button item component instance when the selected button changes.
         *
         * @event
         */
        this.selectedButtonChange = output();
    }
    #effect;
    /**
     * Defines the selection mode for the component.
     */
    get selection() {
        return this._selection;
    }
    /**
     * Sets the selection mode for the component.
     *
     * @param value - The selection mode to be set. Possible values include 'single', 'multiple', or 'none'.
     */
    set selection(value) {
        this.setOption({
            name: 'selection',
            value: value,
            afterCallback: (o, n) => {
                if (value == 'none') {
                    this.clearSelection();
                }
            },
        });
    }
    /**
     *  @ignore
     */
    _bindEvents() {
        this._contentButtons()?.forEach((b) => {
            if (!b.onClick.length)
                b.onClick.subscribe((c) => {
                    this._handleClickEvent(c, b);
                });
        });
    }
    /**
     *  @ignore
     */
    _bindProps() {
        this._contentButtons()?.forEach((b) => {
            if (b['originDisabled'] == null) {
                b['originDisabled'] = b.disabled;
            }
            if (b['originColor'] == null) {
                b['originColor'] = b.color;
            }
            if (this.look)
                b.look = this.look;
            // Apply group color only if the item has not explicitly provided a color
            if (this.color) {
                const itemHasExplicitColor = b['originColor'] != null && b['originColor'] !== 'default';
                b.color = itemHasExplicitColor ? b['originColor'] : this.color;
            }
            b.disabled = b['originDisabled'] || this.disabled;
            b.toggleable = false;
        });
    }
    /**
     *  @ignore
     * Updates component properties based on internal option changes.
     */
    internalOptionChanged() {
        this._bindProps();
    }
    /**
     *  @ignore
     */
    _handleClickEvent(e, button) {
        this.selectedButtonChange.emit(button);
        if (this.selection == 'multiple') {
            button.selected = !button.selected;
        }
        else if (this.selection == 'single') {
            this.clearSelection();
            button.selected = true;
        }
        else {
            button.selected = false;
        }
    }
    /**
     *  @ignore
     */
    clearSelection() {
        this._contentButtons()?.forEach((c) => {
            c.selected = false;
        });
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        const cssClasses = {
            'ax-state-disabled': this.disabled,
            'ax-parent-fit': this.fitParent(),
        };
        cssClasses[`ax-${this.color || 'primary'}`] = true;
        cssClasses[`ax-${this.look || 'default'}`] = true;
        return cssClasses;
    }
    /**
     *  @ignore
     */
    get role() {
        return 'group';
    }
    /**
     *  @ignore
     */
    __hostClick(e) {
        if (!this.disabled) {
            this.onClick.emit({
                component: this,
                htmlElement: this.getHostElement(),
                nativeEvent: e,
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXButtonGroupComponent, isStandalone: true, selector: "ax-button-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", onClick: "onClick", selectionChange: "selectionChange", selectedButtonChange: "selectedButtonChange" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass", "attr.role": "this.role" } }, providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonGroupItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group{display:flex;flex-wrap:wrap}ax-button-group ax-button-group-item{min-width:0}ax-button-group ax-button-group-item ax-button{--ax-sys-transition-duration: 0}ax-button-group ax-button-group-item ax-button>button .ax-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{--ax-comp-button-border-radius: 0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:0}ax-button-group ax-button-group-item:first-child ax-button,ax-button-group ax-button-group-item.ax-row-start ax-button{--ax-comp-button-border-radius: 0;border-start-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group ax-button-group-item:last-child ax-button,ax-button-group ax-button-group-item.ax-row-end ax-button{--ax-comp-button-border-radius: 0;border-start-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group.ax-parent-fit{flex-wrap:nowrap}ax-button-group.ax-parent-fit ax-button-group-item{width:100%}ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'], providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group{display:flex;flex-wrap:wrap}ax-button-group ax-button-group-item{min-width:0}ax-button-group ax-button-group-item ax-button{--ax-sys-transition-duration: 0}ax-button-group ax-button-group-item ax-button>button .ax-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{--ax-comp-button-border-radius: 0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:0}ax-button-group ax-button-group-item:first-child ax-button,ax-button-group ax-button-group-item.ax-row-start ax-button{--ax-comp-button-border-radius: 0;border-start-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group ax-button-group-item:last-child ax-button,ax-button-group ax-button-group-item.ax-row-end ax-button{--ax-comp-button-border-radius: 0;border-start-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group.ax-parent-fit{flex-wrap:nowrap}ax-button-group.ax-parent-fit ax-button-group-item{width:100%}ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}\n"] }]
        }], propDecorators: { fitParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitParent", required: false }] }], onClick: [{
                type: Output
            }], _contentButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXButtonGroupItemComponent), { ...{ descendants: true }, isSignal: true }] }], selectionChange: [{
                type: Output
            }], selectedButtonChange: [{ type: i0.Output, args: ["selectedButtonChange"] }], selection: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], __hostClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

/**
 * Represents a button item with optional content like icons, text, and dropdowns.
 *
 * @category Components
 */
class AXButtonGroupItemComponent extends classes(MXInteractiveComponent, MXColorComponent) {
    constructor() {
        super(...arguments);
        this.btnGroup = inject(AXButtonGroupComponent);
        /**
         * Whether the item is visually separated from other items.
         *  @defaultValue false
         */
        this.divided = false;
        /**
         * Emitted when the button item is clicked.
         * @event
         * The emitted value is an `AXClickEvent` object containing event details.
         */
        this.onClick = new EventEmitter();
        /**
         *  @ignore
         */
        this.tabindex = '0';
    }
    /**
     * Indicates whether the button item is selected.
     *
     * @param v - A boolean indicating the selected state.
     * Updates the view when the value changes.
     */
    get selected() {
        return this._selected;
    }
    set selected(v) {
        this._selected = v;
        this.cdr.markForCheck();
    }
    /**
     *  @ignore
     */
    __hostClick(e) {
        if (!this.disabled) {
            this.onClick.emit({
                component: this,
                htmlElement: this.getHostElement(),
                nativeEvent: e,
            });
        }
    }
    /**
     *  @ignore
     */
    __hostFocus(e) {
        this.emitOnFocusEvent(e);
    }
    /**
     *  @ignore
     */
    __hostBlur(e) {
        this.emitOnBlurEvent(e);
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        const cssClasses = {
            'ax-button-icon': !this.text,
            'ax-state-disabled': this.disabled,
            'ax-state-selected': this.selected,
            'ax-divided': this.divided,
        };
        cssClasses[`ax-${this.color || 'primary'}-default`] = true;
        return Object.entries(cssClasses)
            .filter((c) => c[1])
            .map((c) => c[0])
            .join(' ');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXButtonGroupItemComponent, isStandalone: true, selector: "ax-button-group-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, providers: [{ provide: AXComponent, useExisting: AXButtonGroupItemComponent }], usesInheritance: true, ngImport: i0, template: `
    <ax-button
      [color]="color && color !== 'default' ? color : btnGroup.color"
      [text]="text"
      [look]="btnGroup.look"
      [disabled]="disabled"
      [selected]="selected"
    >
      <ng-content></ng-content>
    </ax-button>
  `, isInline: true, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupItemComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ax-button-group-item',
                    template: `
    <ax-button
      [color]="color && color !== 'default' ? color : btnGroup.color"
      [text]="text"
      [look]="btnGroup.look"
      [disabled]="disabled"
      [selected]="selected"
    >
      <ng-content></ng-content>
    </ax-button>
  `,
                    encapsulation: ViewEncapsulation.None,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    inputs: ['color', 'disabled'],
                    outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'],
                    imports: [AXButtonComponent],
                    providers: [{ provide: AXComponent, useExisting: AXButtonGroupItemComponent }],
                }]
        }], propDecorators: { text: [{
                type: Input
            }], selected: [{
                type: Input
            }], divided: [{
                type: Input
            }], data: [{
                type: Input
            }], name: [{
                type: Input
            }], onClick: [{
                type: Output
            }], __hostClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], __hostFocus: [{
                type: HostListener,
                args: ['focus', ['$event']]
            }], __hostBlur: [{
                type: HostListener,
                args: ['blur', ['$event']]
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }] } });

class AXButtonGroupModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupModule, imports: [AXButtonGroupComponent, AXButtonGroupItemComponent], exports: [AXButtonGroupComponent, AXButtonGroupItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupModule, imports: [AXButtonGroupItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXButtonGroupModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXButtonGroupComponent, AXButtonGroupItemComponent],
                    exports: [AXButtonGroupComponent, AXButtonGroupItemComponent],
                }]
        }] });

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

export { AXButtonGroupComponent, AXButtonGroupItemComponent, AXButtonGroupModule };
//# sourceMappingURL=acorex-components-button-group.mjs.map
