import * as i0 from '@angular/core';
import { contentChildren, forwardRef, input, booleanAttribute, model, output, effect, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Icon } from '@ngstarter-ui/components/icon';

let nextId = 0;
class ButtonToggleGroup {
    _buttonToggles = contentChildren(forwardRef(() => ButtonToggle), { ...(ngDevMode ? { debugName: "_buttonToggles" } : /* istanbul ignore next */ {}), descendants: true });
    appearance = input('standard', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    hideSelectionIndicator = input(false, { ...(ngDevMode ? { debugName: "hideSelectionIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    change = output();
    _onChange = () => { };
    _onTouched = () => { };
    constructor() {
        effect(() => {
            this.value();
            this._buttonToggles();
            this._updateSelectedButtonsFromValue();
        });
    }
    ngAfterContentInit() {
        this._updateSelectedButtonsFromValue();
    }
    writeValue(value) {
        this.value.set(value);
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        // Note: If we want to support setDisabledState with input signals,
        // we might need a separate internal signal or just accept that it won't work well with reactive inputs
        // but typically CVA's setDisabledState is for the form control to disable the component.
        // For now, let's use a private signal if we need to combine them.
    }
    _emitChangeEvent(value) {
        this._onChange(value);
        this.change.emit({ source: this, value });
    }
    _updateSelectedButtonsFromValue() {
        const _buttonToggles = this._buttonToggles();
        if (_buttonToggles) {
            _buttonToggles.forEach(toggle => {
                toggle._setChecked(this._isSelected(toggle.value()));
            });
        }
    }
    _isSelected(val) {
        if (this.multiple()) {
            return Array.isArray(this.value()) && this.value().includes(val);
        }
        return this.value() === val;
    }
    _onButtonClick(toggle) {
        if (this.disabled() || toggle.disabled()) {
            return;
        }
        if (this.multiple()) {
            const currentValue = Array.isArray(this.value()) ? [...this.value()] : [];
            const index = currentValue.indexOf(toggle.value());
            if (index !== -1) {
                currentValue.splice(index, 1);
            }
            else {
                currentValue.push(toggle.value());
            }
            this._updateValue(currentValue);
        }
        else {
            this._updateValue(toggle.value());
        }
    }
    _updateValue(newValue) {
        this.value.set(newValue);
        this._emitChangeEvent(newValue);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ButtonToggleGroup, isStandalone: true, selector: "ngs-button-toggle-group", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideSelectionIndicator: { classPropertyName: "hideSelectionIndicator", publicName: "hideSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "class.ngs-button-toggle-group-vertical": "vertical()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-button-toggle-group" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => ButtonToggleGroup),
                multi: true
            }
        ], queries: [{ propertyName: "_buttonToggles", predicate: i0.forwardRef(() => ButtonToggle), descendants: true, isSignal: true }], exportAs: ["ngsButtonToggleGroup"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggleGroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-button-toggle-group', exportAs: 'ngsButtonToggleGroup', standalone: true, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ButtonToggleGroup),
                            multi: true
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-button-toggle-group',
                        '[class.ngs-button-toggle-group-vertical]': 'vertical()',
                        '[attr.role]': 'multiple() ? "group" : "radiogroup"',
                        '[attr.aria-disabled]': 'disabled()',
                    }, template: "<ng-content />\n", styles: [":host{--ngs-button-toggle-group-border-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-group-bg: var(--ngs-color-surface-container);display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:var(--ngs-button-toggle-group-border-radius, var(--ngs-button-radius));background:var(--ngs-button-toggle-group-bg);height:var(--ngs-button-height)}:host.ngs-button-toggle-group-vertical{flex-direction:column}:host.ngs-button-toggle-group-vertical ::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-top:1px solid var(--ngs-button-toggle-group-border-color);border-left:none}::ng-deep .ngs-button-toggle+.ngs-button-toggle{border-left:1px solid var(--ngs-button-toggle-group-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { _buttonToggles: [{ type: i0.ContentChildren, args: [forwardRef(() => ButtonToggle), { ...{ descendants: true }, isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideSelectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectionIndicator", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
class ButtonToggle {
    _id = `ngs-button-toggle-${nextId++}`;
    id = input(`ngs-button-toggle-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    _internalChecked = false;
    get isChecked() {
        return this.checked() || this._internalChecked;
    }
    _setChecked(value) {
        this._internalChecked = value;
        this._changeDetectorRef.markForCheck();
    }
    change = output();
    buttonToggleGroup = inject(forwardRef(() => ButtonToggleGroup), { optional: true });
    _changeDetectorRef = inject(ChangeDetectorRef);
    get isDisabled() {
        return this.disabled() || (this.buttonToggleGroup && this.buttonToggleGroup.disabled());
    }
    get _shouldShowSelectionIndicator() {
        if (!this.isChecked) {
            return false;
        }
        if (!this.buttonToggleGroup) {
            return false;
        }
        return !this.buttonToggleGroup.hideSelectionIndicator();
    }
    ngOnInit() {
        if (this.buttonToggleGroup && this.buttonToggleGroup.value() === this.value()) {
            this._setChecked(true);
        }
    }
    _onButtonClick() {
        if (this.buttonToggleGroup) {
            this.buttonToggleGroup._onButtonClick(this);
        }
        else {
            this._setChecked(!this.isChecked);
            this.change.emit({ source: this, value: this.value() });
        }
    }
    _markForCheck() {
        this._changeDetectorRef.markForCheck();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonToggle, isStandalone: true, selector: "ngs-button-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ngs-button-toggle-checked": "isChecked", "class.ngs-button-toggle-disabled": "isDisabled", "attr.id": "id()" }, classAttribute: "ngs-button-toggle" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:0 16px;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;font-size:.875rem;line-height:1.25rem;font-weight:500;border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:1}@keyframes ngs-button-toggle-indicator-fade-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonToggle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-button-toggle', host: {
                        '[class.ngs-button-toggle-checked]': 'isChecked',
                        '[class.ngs-button-toggle-disabled]': 'isDisabled',
                        '[attr.id]': 'id()',
                        'class': 'ngs-button-toggle',
                    }, standalone: true, imports: [
                        Icon
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\"\n        class=\"ngs-button-toggle-button\"\n        [attr.id]=\"id() + '-button'\"\n        [disabled]=\"isDisabled\"\n        [attr.name]=\"name()\"\n        [attr.aria-pressed]=\"isChecked\"\n        (click)=\"_onButtonClick()\">\n  @if (_shouldShowSelectionIndicator) {\n    <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ngs-button-toggle-selection-indicator size-5\"/>\n  }\n  <span class=\"ngs-button-toggle-label-content\">\n    <ng-content />\n  </span>\n</button>\n", styles: [":host{--ngs-button-toggle-text-color: var(--ngs-color-on-surface-variant);--ngs-button-toggle-hover-bg-color: var(--ngs-color-surface-container-high);--ngs-button-toggle-checked-bg-color: var(--ngs-color-surface-container-highest);--ngs-button-toggle-checked-text-color: var(--ngs-color-on-surface);--ngs-button-toggle-selection-indicator-color: var(--ngs-color-primary);display:inline-block;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host .ngs-button-toggle-button{display:flex;align-items:center;justify-content:center;padding:0 16px;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;font-size:.875rem;line-height:1.25rem;font-weight:500;border:none;background:none;color:var(--ngs-button-toggle-text-color);width:100%;height:100%;outline:none}:host .ngs-button-toggle-button:hover:not(:disabled){background:var(--ngs-button-toggle-hover-bg-color)}:host .ngs-button-toggle-button:disabled{cursor:not-allowed;color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host .ngs-button-toggle-button:disabled .ngs-button-toggle-selection-indicator{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-button .ngs-button-toggle-selection-indicator{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ngs-button-toggle-selection-indicator-color);margin-right:8px;animation:ngs-button-toggle-indicator-fade-in .2s cubic-bezier(0,0,.2,1)}:host.ngs-button-toggle-checked .ngs-button-toggle-button{background:var(--ngs-button-toggle-checked-bg-color);color:var(--ngs-button-toggle-checked-text-color)}:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:var(--ngs-color-on-surface);color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 88%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-button-toggle-checked .ngs-button-toggle-button:disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-button-toggle-label-content{line-height:1}@keyframes ngs-button-toggle-indicator-fade-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });

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

export { ButtonToggle, ButtonToggleGroup };
//# sourceMappingURL=ngstarter-ui-components-button-toggle.mjs.map
