import * as i0 from '@angular/core';
import { inject, ElementRef, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, signal, forwardRef, computed, contentChildren, effect, Directive } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AutoFocusDirective } from '@ngstarter-ui/components/core';
import { FormFieldControl } from '@ngstarter-ui/components/form-field';

class Chip {
    _elementRef = inject(ElementRef);
    _editing = false;
    appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    destroyed = output();
    removed = output();
    remove() {
        if (!this.disabled()) {
            this.removed.emit({ chip: this });
        }
    }
    ngOnDestroy() {
        this.destroyed.emit({ chip: this });
    }
    _handleKeydown(event) {
    }
    _handleBlur() {
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Chip, isStandalone: true, selector: "ngs-chip", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { destroyed: "destroyed", removed: "removed" }, host: { properties: { "class.ngs-chip-disabled": "disabled()", "attr.appearance": "appearance()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip" }, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Chip, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip', host: {
                        'class': 'ngs-chip',
                        '[class.ngs-chip-disabled]': 'disabled()',
                        '[attr.appearance]': 'appearance()',
                        '[attr.aria-disabled]': 'disabled()',
                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        AutoFocusDirective
                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], destroyed: [{ type: i0.Output, args: ["destroyed"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });

class ChipRow extends Chip {
    _changeDetectorRef = inject(ChangeDetectorRef);
    _editInput = viewChild('editInput', ...(ngDevMode ? [{ debugName: "_editInput" }] : /* istanbul ignore next */ []));
    alreadyEdited = signal(false, ...(ngDevMode ? [{ debugName: "alreadyEdited" }] : /* istanbul ignore next */ []));
    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    edited = output();
    /**
     * Allows for use of the template-bound $event object
     */
    _handleKeydown(event) {
        if (this.editable() && !this.disabled()) {
            if (this._editing) {
                if (event.key === 'Enter') {
                    this._stopEditing();
                    event.preventDefault();
                }
                else if (event.key === 'Escape') {
                    this._editing = false;
                    this._changeDetectorRef.markForCheck();
                    event.preventDefault();
                }
            }
        }
    }
    _handleBlur() {
        if (this._editing) {
            this._stopEditing();
        }
    }
    _handleClick(event) {
        if (!this.disabled()) {
            if (this.editable() && !this._editing && this.alreadyEdited()) {
                this._startEditing();
            }
            event.preventDefault();
            event.stopPropagation();
        }
    }
    _startEditing() {
        if (this.editable() && !this.disabled() && !this._editing) {
            this.alreadyEdited.set(true);
            this._editing = true;
            this._changeDetectorRef.markForCheck();
        }
    }
    _stopEditing() {
        if (this._editing) {
            this._editing = false;
            const newValue = this._editInput().nativeElement.innerText.trim();
            this.edited.emit({ chip: this, value: newValue });
            this._changeDetectorRef.markForCheck();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipRow, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ChipRow, isStandalone: true, selector: "ngs-chip-row", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited" }, host: { attributes: { "role": "row" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "class.ngs-chip-disabled": "disabled()", "class.ngs-chip-editing": "_editing", "class.ngs-chip-editable": "editable()", "class.ngs-chip-filled": "appearance() === \"filled\"", "class.ngs-chip-outlined": "appearance() === \"outlined\"", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip ngs-chip-row" }, providers: [
            {
                provide: Chip,
                useExisting: forwardRef(() => ChipRow)
            }
        ], viewQueries: [{ propertyName: "_editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipRow, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip-row', host: {
                        'class': 'ngs-chip ngs-chip-row',
                        '[class.ngs-chip-disabled]': 'disabled()',
                        '[class.ngs-chip-editing]': '_editing',
                        '[class.ngs-chip-editable]': 'editable()',
                        '[class.ngs-chip-filled]': 'appearance() === "filled"',
                        '[class.ngs-chip-outlined]': 'appearance() === "outlined"',
                        '[attr.aria-disabled]': 'disabled()',
                        'role': 'row',
                        '(keydown)': '_handleKeydown($event)',
                        '(click)': '_handleClick($event)',
                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        AutoFocusDirective
                    ], providers: [
                        {
                            provide: Chip,
                            useExisting: forwardRef(() => ChipRow)
                        }
                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { _editInput: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }] } });

let nextId = 0;
class ChipGrid {
    ngControl = inject(NgControl, { optional: true, self: true });
    _elementRef = inject(ElementRef);
    _id = input(`ngs-chip-grid-${nextId++}`, { ...(ngDevMode ? { debugName: "_id" } : /* istanbul ignore next */ {}), alias: 'id' });
    get id() { return this._id(); }
    _placeholder = input(undefined, { ...(ngDevMode ? { debugName: "_placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
    get placeholder() { return this._placeholder(); }
    _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
    get required() { return this._required(); }
    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
    _disabledInput = input(false, { ...(ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
        alias: 'disabled' });
    isDisabled = computed(() => this._disabledInput() || this._disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
    get disabled() { return this.isDisabled(); }
    _chips = contentChildren(ChipRow, { ...(ngDevMode ? { debugName: "_chips" } : /* istanbul ignore next */ {}), descendants: true });
    _chips$ = toObservable(this._chips);
    valueChange = output();
    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
    stateChanges = signal(undefined, ...(ngDevMode ? [{ debugName: "stateChanges" }] : /* istanbul ignore next */ []));
    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
    get focused() { return this._focused(); }
    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
    get errorState() { return this._errorState(); }
    _chipsLength = signal(0, ...(ngDevMode ? [{ debugName: "_chipsLength" }] : /* istanbul ignore next */ []));
    get chipsLength() { return this._chipsLength(); }
    _empty = computed(() => {
        const value = this._value();
        return (!value || value.length === 0) &&
            this._chipsLength() === 0 &&
            !this._isInputFocused() &&
            this._isInputEmpty();
    }, ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
    get empty() { return this._empty(); }
    _shouldLabelFloat = computed(() => {
        return !this.empty || this.focused;
    }, ...(ngDevMode ? [{ debugName: "_shouldLabelFloat" }] : /* istanbul ignore next */ []));
    get shouldLabelFloat() { return this._shouldLabelFloat(); }
    _isInputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isInputFocused" }] : /* istanbul ignore next */ []));
    _isInputEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isInputEmpty" }] : /* istanbul ignore next */ []));
    _chipInput;
    onChange = () => { };
    onTouched = () => { };
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    get value() {
        return this._value();
    }
    set value(value) {
        this._value.set(value);
        this.onChange(value);
        this.stateChanges.set(undefined);
    }
    writeValue(value) {
        this._value.set(value || []);
        this.stateChanges.set(undefined);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled.set(isDisabled);
        this.stateChanges.set(undefined);
    }
    ngAfterContentInit() {
        this._chips$.subscribe(() => {
            this._chipsLength.set(this._chips().length);
            this.stateChanges.set(undefined);
        });
        this._chipsLength.set(this._chips().length);
    }
    _setFocused(focused) {
        if (focused !== this._focused()) {
            this._focused.set(focused);
            this.stateChanges.set(undefined);
        }
    }
    _setInputFocused(focused) {
        this._isInputFocused.set(focused);
        this._setFocused(focused);
    }
    _setInputEmpty(empty) {
        this._isInputEmpty.set(empty);
        this.stateChanges.set(undefined);
    }
    _registerInput(input) {
        this._chipInput = input;
    }
    focus() {
        if (this.isDisabled()) {
            return;
        }
        if (this._chipInput) {
            this._chipInput.focus();
        }
        else {
            this._elementRef.nativeElement.focus();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ChipGrid, isStandalone: true, selector: "ngs-chip-grid", inputs: { _id: { classPropertyName: "_id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _disabledInput: { classPropertyName: "_disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "grid" }, properties: { "attr.aria-disabled": "disabled", "id": "id" }, classAttribute: "ngs-chip-grid ngs-chip-set" }, providers: [
            {
                provide: FormFieldControl,
                useExisting: forwardRef(() => ChipGrid),
            },
        ], queries: [{ propertyName: "_chips", predicate: ChipRow, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\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: ChipGrid, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip-grid', host: {
                        'class': 'ngs-chip-grid ngs-chip-set',
                        'role': 'grid',
                        '[attr.aria-disabled]': 'disabled',
                        '[id]': 'id',
                    }, standalone: true, providers: [
                        {
                            provide: FormFieldControl,
                            useExisting: forwardRef(() => ChipGrid),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], _disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _chips: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChipRow), { ...{ descendants: true }, isSignal: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });

class ChipOption extends Chip {
    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    _internalSelected = false;
    constructor() {
        super();
        effect(() => {
            this._setSelected(this.selected());
        });
    }
    get isSelected() {
        return this._internalSelected;
    }
    _setSelected(value) {
        this._internalSelected = value;
    }
    selectionChange = output();
    toggleSelected() {
        if (!this.disabled()) {
            this._setSelected(!this.isSelected);
            this.selectionChange.emit({ source: this, selected: this.isSelected });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ChipOption, isStandalone: true, selector: "ngs-chip-option", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "click": "toggleSelected()" }, properties: { "class.ngs-chip-selected": "isSelected", "class.ngs-chip-disabled": "disabled()", "class.ngs-chip-filled": "appearance() === \"filled\"", "class.ngs-chip-outlined": "appearance() === \"outlined\"", "attr.aria-selected": "isSelected", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip ngs-chip-option" }, providers: [
            {
                provide: Chip,
                useExisting: forwardRef(() => ChipOption)
            }
        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipOption, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip-option', host: {
                        'class': 'ngs-chip ngs-chip-option',
                        '[class.ngs-chip-selected]': 'isSelected',
                        '[class.ngs-chip-disabled]': 'disabled()',
                        '[class.ngs-chip-filled]': 'appearance() === "filled"',
                        '[class.ngs-chip-outlined]': 'appearance() === "outlined"',
                        '[attr.aria-selected]': 'isSelected',
                        '[attr.aria-disabled]': 'disabled()',
                        '(click)': 'toggleSelected()',
                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        AutoFocusDirective
                    ], providers: [
                        {
                            provide: Chip,
                            useExisting: forwardRef(() => ChipOption)
                        }
                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });

class ChipListbox {
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    _chips = contentChildren(ChipOption, { ...(ngDevMode ? { debugName: "_chips" } : /* istanbul ignore next */ {}), descendants: true });
    _chips$ = toObservable(this._chips);
    _value;
    onChange = () => { };
    onTouched = () => { };
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        this._updateChips();
    }
    writeValue(value) {
        this._value = value;
        this._updateChips();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
    }
    ngAfterContentInit() {
        this._chips$.subscribe(() => {
            this._updateChips();
        });
        if (this._value === undefined) {
            const selectedChips = this._chips().filter(chip => chip.isSelected);
            if (this.multiple()) {
                this._value = selectedChips.map(chip => chip.value() !== undefined ? chip.value() : chip);
            }
            else {
                const lastSelected = selectedChips[selectedChips.length - 1];
                this._value = lastSelected ? (lastSelected.value() !== undefined ? lastSelected.value() : lastSelected) : undefined;
            }
        }
        Promise.resolve().then(() => {
            this._updateChips();
        });
        this._chips().forEach(chip => {
            chip.selectionChange.subscribe(() => {
                this._onSelectionChange(chip);
            });
        });
    }
    _onSelectionChange(chip) {
        const value = chip.value() !== undefined ? chip.value() : chip;
        if (this.multiple()) {
            if (!Array.isArray(this._value)) {
                this._value = [];
            }
            const index = this._value.indexOf(value);
            if (chip.isSelected) {
                if (index < 0) {
                    this._value.push(value);
                }
            }
            else {
                if (index >= 0) {
                    this._value.splice(index, 1);
                }
            }
            this._value = [...this._value];
        }
        else {
            this._chips().forEach(c => {
                if (c !== chip) {
                    c._setSelected(false);
                }
            });
            this._value = chip.isSelected ? value : null;
        }
        this.onChange(this._value);
        this.onTouched();
    }
    _updateChips() {
        const _chips = this._chips();
        if (!_chips || this._value === undefined) {
            return;
        }
        _chips.forEach(chip => {
            const value = chip.value() !== undefined ? chip.value() : chip;
            if (this.multiple()) {
                chip._setSelected(Array.isArray(this._value) && this._value.includes(value));
            }
            else {
                chip._setSelected(this._value === value);
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ChipListbox, isStandalone: true, selector: "ngs-chip-listbox", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "attr.aria-multiselectable": "multiple()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip-listbox ngs-chip-set" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => ChipListbox),
                multi: true,
            },
        ], queries: [{ propertyName: "_chips", predicate: ChipOption, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [".ngs-chip-listbox{display:flex;flex-wrap:wrap;outline:none;gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipListbox, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip-listbox', host: {
                        'class': 'ngs-chip-listbox ngs-chip-set',
                        'role': 'listbox',
                        '[attr.aria-multiselectable]': 'multiple()',
                        '[attr.aria-disabled]': 'disabled()',
                    }, standalone: true, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ChipListbox),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content />\n", styles: [".ngs-chip-listbox{display:flex;flex-wrap:wrap;outline:none;gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _chips: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChipOption), { ...{ descendants: true }, isSignal: true }] }] } });

class ChipSet {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipSet, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ChipSet, isStandalone: true, selector: "ngs-chip-set", host: { attributes: { "role": "presentation" }, classAttribute: "ngs-chip-set" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\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: ChipSet, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-chip-set', host: {
                        'class': 'ngs-chip-set',
                        'role': 'presentation',
                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

class ChipEdit {
    _parentChip = inject(ChipRow);
    _handleClick(event) {
        if (!this._parentChip.disabled() && this._parentChip.editable()) {
            this._parentChip._startEditing();
            event.stopPropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipEdit, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ChipEdit, isStandalone: true, selector: "ngs-chip-edit, [ngsChipEdit]", host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "ngs-chip-edit" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipEdit, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ngs-chip-edit, [ngsChipEdit]',
                    host: {
                        'class': 'ngs-chip-edit',
                        '(click)': '_handleClick($event)',
                    },
                    standalone: true,
                }]
        }] });

class ChipRemove {
    _parentChip = inject(Chip);
    _handleClick(event) {
        if (!this._parentChip.disabled()) {
            this._parentChip.remove();
            event.stopPropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ChipRemove, isStandalone: true, selector: "ngs-chip-remove, [ngsChipRemove]", host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "ngs-chip-remove" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipRemove, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ngs-chip-remove, [ngsChipRemove]',
                    host: {
                        'class': 'ngs-chip-remove',
                        '(click)': '_handleClick($event)',
                    },
                    standalone: true,
                }]
        }] });

class ChipInput {
    _elementRef = inject(ElementRef);
    set chipGrid(value) {
        this._chipGrid = value;
        this._chipGrid?._registerInput(this);
        this._chipGrid?._setInputEmpty(!this._elementRef.nativeElement.value);
    }
    get chipGrid() {
        return this._chipGrid;
    }
    _chipGrid;
    chipGridInput = input(undefined, { ...(ngDevMode ? { debugName: "chipGridInput" } : /* istanbul ignore next */ {}), alias: 'ngsChipInputFor' });
    chipInputSeparatorKeyCodes = input(undefined, { ...(ngDevMode ? { debugName: "chipInputSeparatorKeyCodes" } : /* istanbul ignore next */ {}), alias: 'ngsChipInputSeparatorKeyCodes' });
    chipInputAddOnBlur = input(false, { ...(ngDevMode ? { debugName: "chipInputAddOnBlur" } : /* istanbul ignore next */ {}), alias: 'ngsChipInputAddOnBlur', transform: booleanAttribute });
    chipInputTokenEnd = output();
    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
    constructor() { }
    ngDoCheck() {
        if (this.chipGridInput() && this.chipGridInput() !== this._chipGrid) {
            this.chipGrid = this.chipGridInput();
        }
        if (this._value() !== this._elementRef.nativeElement.value) {
            this._onInput();
        }
    }
    _onInput() {
        const value = this._elementRef.nativeElement.value;
        this._value.set(value);
        this.chipGrid?._setInputEmpty(!value);
    }
    _onKeydown(event) {
        if (event.defaultPrevented) {
            return;
        }
        if (this.chipInputSeparatorKeyCodes() && this.chipInputSeparatorKeyCodes().includes(event.keyCode)) {
            this.chipInputTokenEnd.emit({
                chipInput: this,
                value: this._elementRef.nativeElement.value,
                input: this._elementRef.nativeElement
            });
            event.preventDefault();
        }
    }
    _onBlur() {
        this._focused.set(false);
        if (this.chipInputAddOnBlur()) {
            this.chipInputTokenEnd.emit({
                chipInput: this,
                value: this._elementRef.nativeElement.value,
                input: this._elementRef.nativeElement
            });
        }
        this.chipGrid?._setInputFocused(false);
    }
    _onFocus() {
        this._focused.set(true);
        this.chipGrid?._setInputFocused(true);
    }
    clear() {
        this._elementRef.nativeElement.value = '';
        this._value.set('');
        this.chipGrid?._setInputEmpty(true);
    }
    focus() {
        this._elementRef.nativeElement.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ChipInput, isStandalone: true, selector: "input[ngsChipInputFor]", inputs: { chipGridInput: { classPropertyName: "chipGridInput", publicName: "ngsChipInputFor", isSignal: true, isRequired: false, transformFunction: null }, chipInputSeparatorKeyCodes: { classPropertyName: "chipInputSeparatorKeyCodes", publicName: "ngsChipInputSeparatorKeyCodes", isSignal: true, isRequired: false, transformFunction: null }, chipInputAddOnBlur: { classPropertyName: "chipInputAddOnBlur", publicName: "ngsChipInputAddOnBlur", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipInputTokenEnd: "chipInputTokenEnd" }, host: { listeners: { "input": "_onInput()", "keydown": "_onKeydown($event)", "blur": "_onBlur()", "focus": "_onFocus()" }, classAttribute: "ngs-chip-input" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipInput, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[ngsChipInputFor]',
                    standalone: true,
                    host: {
                        'class': 'ngs-chip-input',
                        '(input)': '_onInput()',
                        '(keydown)': '_onKeydown($event)',
                        '(blur)': '_onBlur()',
                        '(focus)': '_onFocus()',
                    }
                }]
        }], ctorParameters: () => [], propDecorators: { chipGridInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsChipInputFor", required: false }] }], chipInputSeparatorKeyCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsChipInputSeparatorKeyCodes", required: false }] }], chipInputAddOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsChipInputAddOnBlur", required: false }] }], chipInputTokenEnd: [{ type: i0.Output, args: ["chipInputTokenEnd"] }] } });

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

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

export { Chip, ChipAvatar, ChipControl, ChipEdit, ChipGrid, ChipInput, ChipListbox, ChipOption, ChipRemove, ChipRow, ChipSet };
//# sourceMappingURL=ngstarter-ui-components-chips.mjs.map
