import * as i0 from '@angular/core';
import { InjectionToken, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, forwardRef, Component } from '@angular/core';
import { Checkbox } from '@ngstarter-ui/components/checkbox';
import { Icon } from '@ngstarter-ui/components/icon';

class _Option {
}
class _OptionParent {
}
const OPTION_PARENT = new InjectionToken('OPTION_PARENT');
const OPTION = new InjectionToken('OPTION');

class Option {
    elementRef;
    _parent = inject(OPTION_PARENT, { optional: true });
    _cdr = inject(ChangeDetectorRef);
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    disabledSignal = input(false, { ...(ngDevMode ? { debugName: "disabledSignal" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
    selectedInput = input(false, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected', transform: booleanAttribute });
    get disabled() {
        return this.disabledSignal();
    }
    onSelectionChange = output();
    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
    _mutationObserver;
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    ngAfterViewInit() {
        this._parent?._optionsContentChanges?.update(v => v + 1);
        if (typeof MutationObserver !== 'undefined') {
            this._mutationObserver = new MutationObserver(() => {
                this._parent?._optionsContentChanges?.update(v => v + 1);
            });
            this._mutationObserver.observe(this.elementRef.nativeElement, {
                childList: true,
                characterData: true,
                subtree: true
            });
        }
    }
    ngOnDestroy() {
        this._mutationObserver?.disconnect();
    }
    get selected() {
        return this.selectedInput() || this._selected();
    }
    get multiple() {
        return this._parent?.multiple() ?? false;
    }
    get hideCheckIcon() {
        return this._parent?.hideCheckIcon?.() ?? false;
    }
    get active() {
        return this._active();
    }
    select() {
        if (!this._selected()) {
            this._selected.set(true);
            this._cdr.markForCheck();
        }
    }
    deselect() {
        if (this._selected()) {
            this._selected.set(false);
            this._cdr.markForCheck();
        }
    }
    setActiveStyles() {
        this._active.set(true);
        this._cdr.markForCheck();
    }
    setInactiveStyles() {
        this._active.set(false);
        this._cdr.markForCheck();
    }
    _onClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        this.onSelectionChange.emit(this);
    }
    get viewValue() {
        const element = this.elementRef.nativeElement;
        const textElement = element.querySelector('.ngs-option-text');
        if (textElement) {
            return (textElement.textContent || '').trim();
        }
        return (element.textContent || '').trim();
    }
    getLabel() {
        return this.viewValue;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Option, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Option, isStandalone: true, selector: "ngs-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledSignal: { classPropertyName: "disabledSignal", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_onClick($event)" }, properties: { "attr.tabindex": "-1", "class.ngs-option-selected": "selected", "class.ngs-option-disabled": "disabled", "class.ngs-option-multiple": "multiple", "class.ngs-option-active": "active", "attr.aria-selected": "selected", "attr.aria-disabled": "disabled" } }, providers: [
            {
                provide: OPTION,
                useExisting: forwardRef(() => Option)
            }
        ], exportAs: ["ngsOption"], ngImport: i0, template: "@if (multiple) {\n  <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n  <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding, 0 calc(var(--spacing, .25rem) * 3)));border-radius:var(--ngs-option-radius, var(--ngs-dropdown-item-radius, var(--ngs-control-radius)));font-size:var(--ngs-option-font-size, var(--ngs-dropdown-item-font-size, var(--ngs-font-size-sm)));color:var(--ngs-option-color, var(--ngs-dropdown-item-color, var(--ngs-color-on-surface)));cursor:pointer;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-option-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-active:not(.ngs-option-disabled){background:var(--ngs-option-active-background, var(--ngs-dropdown-item-active-bg, var(--ngs-color-surface-container-highest)))}:host.ngs-option-selected:not(.ngs-option-multiple){background:var(--ngs-option-selected-background, var(--ngs-dropdown-item-selected-bg, var(--ngs-color-primary-container)));color:var(--ngs-option-selected-color, var(--ngs-dropdown-item-selected-color, var(--ngs-color-on-primary-container)))}:host.ngs-option-multiple.ngs-option-selected{background:transparent}:host.ngs-option-multiple.ngs-option-selected:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-disabled{color:var(--ngs-option-disabled-color, var(--ngs-dropdown-item-disabled-color, var(--ngs-color-on-surface-variant)));cursor:default;pointer-events:none}.ngs-optgroup :host{padding-inline-start:var(--ngs-option-group-padding-start, var(--ngs-dropdown-item-nested-padding-start, calc(var(--ngs-dropdown-item-padding-x, calc(var(--spacing, .25rem) * 3)) + calc(var(--spacing, .25rem) * 4))))}.ngs-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Option, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-option', exportAs: 'ngsOption', standalone: true, imports: [
                        Checkbox,
                        Icon
                    ], providers: [
                        {
                            provide: OPTION,
                            useExisting: forwardRef(() => Option)
                        }
                    ], host: {
                        'role': 'option',
                        '[attr.tabindex]': '-1',
                        '[class.ngs-option-selected]': 'selected',
                        '[class.ngs-option-disabled]': 'disabled',
                        '[class.ngs-option-multiple]': 'multiple',
                        '[class.ngs-option-active]': 'active',
                        '[attr.aria-selected]': 'selected',
                        '[attr.aria-disabled]': 'disabled',
                        '(click)': '_onClick($event)'
                    }, template: "@if (multiple) {\n  <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n  <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding, 0 calc(var(--spacing, .25rem) * 3)));border-radius:var(--ngs-option-radius, var(--ngs-dropdown-item-radius, var(--ngs-control-radius)));font-size:var(--ngs-option-font-size, var(--ngs-dropdown-item-font-size, var(--ngs-font-size-sm)));color:var(--ngs-option-color, var(--ngs-dropdown-item-color, var(--ngs-color-on-surface)));cursor:pointer;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-option-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-active:not(.ngs-option-disabled){background:var(--ngs-option-active-background, var(--ngs-dropdown-item-active-bg, var(--ngs-color-surface-container-highest)))}:host.ngs-option-selected:not(.ngs-option-multiple){background:var(--ngs-option-selected-background, var(--ngs-dropdown-item-selected-bg, var(--ngs-color-primary-container)));color:var(--ngs-option-selected-color, var(--ngs-dropdown-item-selected-color, var(--ngs-color-on-primary-container)))}:host.ngs-option-multiple.ngs-option-selected{background:transparent}:host.ngs-option-multiple.ngs-option-selected:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-disabled{color:var(--ngs-option-disabled-color, var(--ngs-dropdown-item-disabled-color, var(--ngs-color-on-surface-variant)));cursor:default;pointer-events:none}.ngs-optgroup :host{padding-inline-start:var(--ngs-option-group-padding-start, var(--ngs-dropdown-item-nested-padding-start, calc(var(--ngs-dropdown-item-padding-x, calc(var(--spacing, .25rem) * 3)) + calc(var(--spacing, .25rem) * 4))))}.ngs-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });

class Optgroup {
    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    id = `ngs-optgroup-${Math.random().toString(36).substr(2, 9)}`;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Optgroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Optgroup, isStandalone: true, selector: "ngs-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-optgroup-disabled": "disabled()", "attr.role": "\"group\"", "attr.aria-disabled": "disabled().toString()", "attr.aria-labelledby": "id" }, classAttribute: "ngs-optgroup" }, exportAs: ["ngsOptgroup"], ngImport: i0, template: `
    <span class="ngs-optgroup-label">{{ label() }}</span>
    <ng-content select="ngs-option" />
  `, isInline: true, styles: [":host{display:block;--ngs-optgroup-label-padding: var(--ngs-dropdown-item-padding, 0 .75rem);--ngs-optgroup-label-height: var(--ngs-dropdown-height, var(--option-height, 48px));--ngs-optgroup-label-font-size: var(--ngs-font-size-xs, .75rem);--ngs-optgroup-label-font-weight: 600;--ngs-optgroup-label-color: var(--ngs-color-on-surface-variant, rgba(0, 0, 0, .54))}.ngs-optgroup-label{display:flex;align-items:center;padding:var(--ngs-optgroup-label-padding);height:var(--ngs-optgroup-label-height);font-size:var(--ngs-optgroup-label-font-size);font-weight:var(--ngs-optgroup-label-font-weight);color:var(--ngs-optgroup-label-color);text-transform:uppercase}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Optgroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-optgroup', exportAs: 'ngsOptgroup', standalone: true, template: `
    <span class="ngs-optgroup-label">{{ label() }}</span>
    <ng-content select="ngs-option" />
  `, host: {
                        'class': 'ngs-optgroup',
                        '[class.ngs-optgroup-disabled]': 'disabled()',
                        '[attr.role]': '"group"',
                        '[attr.aria-disabled]': 'disabled().toString()',
                        '[attr.aria-labelledby]': 'id',
                    }, styles: [":host{display:block;--ngs-optgroup-label-padding: var(--ngs-dropdown-item-padding, 0 .75rem);--ngs-optgroup-label-height: var(--ngs-dropdown-height, var(--option-height, 48px));--ngs-optgroup-label-font-size: var(--ngs-font-size-xs, .75rem);--ngs-optgroup-label-font-weight: 600;--ngs-optgroup-label-color: var(--ngs-color-on-surface-variant, rgba(0, 0, 0, .54))}.ngs-optgroup-label{display:flex;align-items:center;padding:var(--ngs-optgroup-label-padding);height:var(--ngs-optgroup-label-height);font-size:var(--ngs-optgroup-label-font-size);font-weight:var(--ngs-optgroup-label-font-weight);color:var(--ngs-optgroup-label-color);text-transform:uppercase}\n"] }]
        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });

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

export { OPTION, OPTION_PARENT, Optgroup, Option, _Option, _OptionParent };
//# sourceMappingURL=ngstarter-ui-components-option.mjs.map
