import * as i0 from '@angular/core';
import { InjectionToken, inject, input, booleanAttribute, Component, ElementRef, Renderer2, ChangeDetectorRef, DestroyRef, contentChildren, forwardRef, output, effect, Directive } from '@angular/core';
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i1 from '@ngstarter-ui/components/core';
import { Ripple } from '@ngstarter-ui/components/core';

const SEGMENTED = new InjectionToken('SEGMENTED');

class SegmentedButton {
    _segmented = inject(SEGMENTED, { skipSelf: true });
    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    get _isSelected() {
        return this._segmented.api.isSelected(this.value());
    }
    get api() {
        return {
            isSelected: () => this._isSelected
        };
    }
    _handleClick() {
        this._segmented.api.select(this.value());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SegmentedButton, isStandalone: true, selector: "ngs-segmented-button,[ngs-segmented-button]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleClick()" }, properties: { "class.icon-only": "iconOnly()", "class.is-selected": "_isSelected", "class.is-disabled": "disabled() || null" }, classAttribute: "ngs-segmented-button" }, exportAs: ["ngsSegmentedButton"], hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsSegmentedIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;align-items:center;cursor:pointer;justify-content:center;color:var(--ngs-segmented-button-color);font-size:var(--ngs-segmented-button-font-size);min-width:var(--ngs-segmented-button-min-width);border-radius:var(--ngs-segmented-button-radius);gap:var(--ngs-segmented-button-gap);flex:none;padding:var(--ngs-segmented-button-padding);height:var(--ngs-segmented-button-height);position:relative;z-index:1}:host.icon-only{--ngs-segmented-button-min-width: 0;--ngs-segmented-button-icon-offset-margin: 0;width:var(--ngs-segmented-button-height);gap:0;padding:0}:host.icon-only .content{display:none}:host .icon{line-height:0;display:flex;align-items:center;justify-content:center;margin-inline-start:var(--ngs-segmented-button-icon-offset-margin)}:host .icon:empty{display:none}:host:hover{background:var(--ngs-segmented-button-hover-bg);color:var(--ngs-segmented-button-hover-color);text-decoration-line:none}:host.is-selected{pointer-events:none;color:var(--ngs-segmented-button-selected-color)}:host:disabled,:host.is-disabled{pointer-events:none;opacity:65%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedButton, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-segmented-button,[ngs-segmented-button]', exportAs: 'ngsSegmentedButton', hostDirectives: [
                        Ripple
                    ], host: {
                        'class': 'ngs-segmented-button',
                        '[class.icon-only]': 'iconOnly()',
                        '[class.is-selected]': '_isSelected',
                        '[class.is-disabled]': 'disabled() || null',
                        '(click)': '_handleClick()',
                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsSegmentedIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;align-items:center;cursor:pointer;justify-content:center;color:var(--ngs-segmented-button-color);font-size:var(--ngs-segmented-button-font-size);min-width:var(--ngs-segmented-button-min-width);border-radius:var(--ngs-segmented-button-radius);gap:var(--ngs-segmented-button-gap);flex:none;padding:var(--ngs-segmented-button-padding);height:var(--ngs-segmented-button-height);position:relative;z-index:1}:host.icon-only{--ngs-segmented-button-min-width: 0;--ngs-segmented-button-icon-offset-margin: 0;width:var(--ngs-segmented-button-height);gap:0;padding:0}:host.icon-only .content{display:none}:host .icon{line-height:0;display:flex;align-items:center;justify-content:center;margin-inline-start:var(--ngs-segmented-button-icon-offset-margin)}:host .icon:empty{display:none}:host:hover{background:var(--ngs-segmented-button-hover-bg);color:var(--ngs-segmented-button-hover-color);text-decoration-line:none}:host.is-selected{pointer-events:none;color:var(--ngs-segmented-button-selected-color)}:host:disabled,:host.is-disabled{pointer-events:none;opacity:65%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });

class Segmented {
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    _cdr = inject(ChangeDetectorRef);
    _destroyRef = inject(DestroyRef);
    _isDestroyed = false;
    _disabled = false;
    _buttons = contentChildren(forwardRef(() => SegmentedButton), { ...(ngDevMode ? { debugName: "_buttons" } : /* istanbul ignore next */ {}), descendants: true });
    _buttonElements = contentChildren(forwardRef(() => SegmentedButton), { ...(ngDevMode ? { debugName: "_buttonElements" } : /* istanbul ignore next */ {}), read: ElementRef, descendants: true });
    _thumbWidth = 0;
    _thumbLeft = 0;
    _thumbOpacity = 0;
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
    valueChange = output();
    _selectedValue = new SelectionModel(false, []);
    _onChange = () => { };
    _onTouched = () => { };
    get api() {
        return {
            isSelected: (value) => this._selectedValue.isSelected(value),
            select: (value) => this._select(value)
        };
    }
    constructor() {
        this._destroyRef.onDestroy(() => {
            this._isDestroyed = true;
        });
        effect(() => {
            const value = this.value();
            if (value !== undefined) {
                if (value !== null) {
                    this._selectedValue.setSelection(value);
                }
                else {
                    this._selectedValue.clear();
                }
                this._updateThumb();
            }
        });
        toObservable(this._buttons).pipe(takeUntilDestroyed()).subscribe(() => {
            this._updateThumb();
        });
    }
    ngOnInit() {
        this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());
    }
    ngAfterContentInit() {
        this._updateThumb();
    }
    ngOnChanges(changes) {
        if (changes['size']) {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-segmented-size', this.size());
            this._updateThumb();
        }
        if (changes['value'] && changes['value'].currentValue !== undefined) {
            const value = changes['value'].currentValue;
            if (value !== null) {
                this._selectedValue.setSelection(value);
            }
            else {
                this._selectedValue.clear();
            }
            this._updateThumb();
        }
    }
    _onResize() {
        this._updateThumb();
    }
    _updateThumb() {
        setTimeout(() => {
            const buttons = this._buttons();
            if (!buttons) {
                return;
            }
            const index = buttons.findIndex(btn => btn._isSelected);
            const element = this._buttonElements()[index]?.nativeElement;
            if (element) {
                this._thumbWidth = element.offsetWidth;
                this._thumbLeft = element.offsetLeft;
                this._thumbOpacity = 1;
            }
            else {
                this._thumbWidth = 0;
                this._thumbOpacity = 0;
            }
            if (this._isDestroyed) {
                return;
            }
            this._cdr.detectChanges();
        });
    }
    writeValue(value) {
        if (value !== undefined && value !== null) {
            this._selectedValue.setSelection(value);
        }
        else {
            this._selectedValue.clear();
        }
        this._updateThumb();
        this._cdr.markForCheck();
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled = coerceBooleanProperty(isDisabled);
    }
    _select(value) {
        this._selectedValue.setSelection(value);
        this.valueChange.emit(value);
        this._onChange(value);
        this._onTouched(value);
        this._updateThumb();
    }
    isSelected(value) {
        return this._selectedValue.isSelected(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Segmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Segmented, isStandalone: true, selector: "ngs-segmented", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "window:resize": "_onResize()" }, properties: { "class.is-disabled": "disabled() || _disabled || null" }, classAttribute: "ngs-segmented" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => Segmented),
                multi: true
            },
            {
                provide: SEGMENTED,
                useExisting: forwardRef(() => Segmented)
            }
        ], queries: [{ propertyName: "_buttons", predicate: i0.forwardRef(() => SegmentedButton), descendants: true, isSignal: true }, { propertyName: "_buttonElements", predicate: i0.forwardRef(() => SegmentedButton), descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsSegmented"], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngs-segmented-thumb\"\n     [style.width.px]=\"_thumbWidth\"\n     [style.opacity]=\"_thumbOpacity\"\n     [style.transform]=\"'translateX(' + _thumbLeft + 'px)'\"></div>\n<ng-content select=\"ngs-segmented-button,[ngs-segmented-button]\"/>\n", styles: [":host{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 8);--ngs-segmented-bg: var(--ngs-color-surface-container);--ngs-segmented-button-hover-bg: var(--ngs-color-surface-container-highest);--ngs-segmented-button-color: var(--ngs-color-on-surface-variant);--ngs-segmented-button-hover-color: var(--ngs-color-on-surface);--ngs-segmented-button-selected-color: var(--ngs-color-primary);--ngs-segmented-button-selected-bg: var(--ngs-color-surface);--ngs-segmented-button-selected-shadow: var(--ngs-shadow-sm);--ngs-segmented-padding: calc(var(--spacing, .25rem) * 1);--ngs-segmented-radius: var(--ngs-button-radius);--ngs-segmented-button-radius: calc(var(--ngs-button-radius) - calc(var(--spacing, .25rem) * .5));--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-segmented-button-min-width: calc(var(--spacing, .25rem) * 12);--ngs-segmented-button-font-size: var(--ngs-font-size-sm);--ngs-segmented-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-icon-offset-margin: -6px;--ngs-icon-size: calc(var(--spacing, .25rem) * 6)}:host[ngs-segmented-size=sm]{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 6);--ngs-segmented-button-font-size: var(--ngs-font-size-xs);--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * .5);--ngs-icon-size: calc(var(--spacing, .25rem) * 5)}:host{display:flex;align-items:center;-webkit-user-select:none;user-select:none;width:max-content;background:var(--ngs-segmented-bg);padding:var(--ngs-segmented-padding);border-radius:var(--ngs-segmented-radius);gap:var(--ngs-segmented-gap);position:relative}:host .ngs-segmented-thumb{position:absolute;top:var(--ngs-segmented-padding);bottom:var(--ngs-segmented-padding);left:0;background:var(--ngs-segmented-button-selected-bg);border-radius:var(--ngs-segmented-button-radius);box-shadow:var(--ngs-segmented-button-selected-shadow);transition:transform .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1),opacity .2s;pointer-events:none;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Segmented, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-segmented', exportAs: 'ngsSegmented', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => Segmented),
                            multi: true
                        },
                        {
                            provide: SEGMENTED,
                            useExisting: forwardRef(() => Segmented)
                        }
                    ], host: {
                        'class': 'ngs-segmented',
                        '[class.is-disabled]': 'disabled() || _disabled || null',
                        '(window:resize)': '_onResize()',
                    }, template: "<div class=\"ngs-segmented-thumb\"\n     [style.width.px]=\"_thumbWidth\"\n     [style.opacity]=\"_thumbOpacity\"\n     [style.transform]=\"'translateX(' + _thumbLeft + 'px)'\"></div>\n<ng-content select=\"ngs-segmented-button,[ngs-segmented-button]\"/>\n", styles: [":host{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 8);--ngs-segmented-bg: var(--ngs-color-surface-container);--ngs-segmented-button-hover-bg: var(--ngs-color-surface-container-highest);--ngs-segmented-button-color: var(--ngs-color-on-surface-variant);--ngs-segmented-button-hover-color: var(--ngs-color-on-surface);--ngs-segmented-button-selected-color: var(--ngs-color-primary);--ngs-segmented-button-selected-bg: var(--ngs-color-surface);--ngs-segmented-button-selected-shadow: var(--ngs-shadow-sm);--ngs-segmented-padding: calc(var(--spacing, .25rem) * 1);--ngs-segmented-radius: var(--ngs-button-radius);--ngs-segmented-button-radius: calc(var(--ngs-button-radius) - calc(var(--spacing, .25rem) * .5));--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-segmented-button-min-width: calc(var(--spacing, .25rem) * 12);--ngs-segmented-button-font-size: var(--ngs-font-size-sm);--ngs-segmented-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * 1);--ngs-segmented-button-icon-offset-margin: -6px;--ngs-icon-size: calc(var(--spacing, .25rem) * 6)}:host[ngs-segmented-size=sm]{--ngs-segmented-button-height: calc(var(--spacing, .25rem) * 6);--ngs-segmented-button-font-size: var(--ngs-font-size-xs);--ngs-segmented-button-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-segmented-button-gap: calc(var(--spacing, .25rem) * .5);--ngs-icon-size: calc(var(--spacing, .25rem) * 5)}:host{display:flex;align-items:center;-webkit-user-select:none;user-select:none;width:max-content;background:var(--ngs-segmented-bg);padding:var(--ngs-segmented-padding);border-radius:var(--ngs-segmented-radius);gap:var(--ngs-segmented-gap);position:relative}:host .ngs-segmented-thumb{position:absolute;top:var(--ngs-segmented-padding);bottom:var(--ngs-segmented-padding);left:0;background:var(--ngs-segmented-button-selected-bg);border-radius:var(--ngs-segmented-button-radius);box-shadow:var(--ngs-segmented-button-selected-shadow);transition:transform .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1),opacity .2s;pointer-events:none;z-index:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { _buttons: [{ type: i0.ContentChildren, args: [forwardRef(() => SegmentedButton), { ...{ descendants: true }, isSignal: true }] }], _buttonElements: [{ type: i0.ContentChildren, args: [forwardRef(() => SegmentedButton), { ...{ read: ElementRef, descendants: true }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });

class SegmentedIconDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SegmentedIconDirective, isStandalone: true, selector: "[ngsSegmentedIcon]", host: { classAttribute: "ngs-segmented-icon" }, exportAs: ["ngsSegmentedIcon"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SegmentedIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsSegmentedIcon]',
                    exportAs: 'ngsSegmentedIcon',
                    host: {
                        'class': 'ngs-segmented-icon'
                    }
                }]
        }] });

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

export { Segmented, SegmentedButton, SegmentedIconDirective };
//# sourceMappingURL=ngstarter-ui-components-segmented.mjs.map
