@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-chips.mjs

@@ -0,0 +1,589 @@
+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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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  <ng-content select=\"[ngsChipTrailingAction]\"/>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--color-surface-container-high);--ngs-chip-color: var(--color-on-surface);--ngs-chip-radius: .75rem;--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: .75rem;--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(--color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--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;--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(--color-error)}.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(--color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Chip, ChipAvatar, ChipEdit, ChipGrid, ChipInput, ChipListbox, ChipOption, ChipRemove, ChipRow, ChipSet };
+//# sourceMappingURL=ngstarter-ui-components-chips.mjs.map