@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs

@@ -0,0 +1,692 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, Component, inject, ElementRef, signal, effect, forwardRef, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+
+class TalosChipComponent {
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    removable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    avatarUrl = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
+    removeAriaLabel = input('Remove', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []));
+    removed = output();
+    chipClick = output();
+    hasAvatar = computed(() => !!this.avatarUrl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
+    onChipClick(event) {
+        if (this.disabled())
+            return;
+        this.chipClick.emit(this.value() ?? this.label());
+    }
+    onRemove(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled())
+            return;
+        this.removed.emit(this.value() ?? this.label());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosChipComponent, isStandalone: true, selector: "talos-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", chipClick: "chipClick" }, host: { listeners: { "click": "onChipClick($event)" }, properties: { "class.talos-chip-sm": "size() === \"sm\"", "class.talos-chip-md": "size() === \"md\"", "class.talos-chip-lg": "size() === \"lg\"", "class.talos-chip-filled": "variant() === \"filled\"", "class.talos-chip-outline": "variant() === \"outline\"", "class.talos-chip-subtle": "variant() === \"subtle\"", "class.talos-chip-primary": "color() === \"primary\"", "class.talos-chip-neutral": "color() === \"neutral\"", "class.talos-chip-success": "color() === \"success\"", "class.talos-chip-warning": "color() === \"warning\"", "class.talos-chip-error": "color() === \"error\"", "class.talos-chip-indigo": "color() === \"indigo\"", "class.talos-chip-purple": "color() === \"purple\"", "class.talos-chip-cyan": "color() === \"cyan\"", "class.is-disabled": "disabled()", "class.is-removable": "removable() && !disabled()", "attr.aria-disabled": "disabled() ? \"true\" : null" }, classAttribute: "talos-chip" }, ngImport: i0, template: "@if (avatarUrl()) {\n  <span class=\"talos-chip-avatar\">\n    <img [src]=\"avatarUrl()\" alt=\"\" aria-hidden=\"true\" />\n  </span>\n}\n\n<span class=\"talos-chip-content\">\n  <ng-content>{{ label() }}</ng-content>\n</span>\n\n@if (removable() && !disabled()) {\n  <button\n    type=\"button\"\n    class=\"talos-chip-remove-btn\"\n    [attr.aria-label]=\"removeAriaLabel() + (label() ? ' ' + label() : '')\"\n    (click)=\"onRemove($event)\"\n  >\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.375rem;font-family:inherit;font-weight:500;border-radius:var(--talos-chip-radius, 9999px);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;max-width:100%;line-height:1;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;outline:none}:host.talos-chip-sm{height:1.5rem;padding:0 .5rem;font-size:.75rem}:host.talos-chip-sm.is-removable{padding-right:.25rem}:host.talos-chip-sm .talos-chip-avatar{width:1rem;height:1rem;margin-left:-.25rem}:host.talos-chip-sm .talos-chip-remove-btn{width:1rem;height:1rem}:host.talos-chip-sm .talos-chip-remove-btn svg{width:.625rem;height:.625rem}:host.talos-chip-md{height:1.875rem;padding:0 .625rem;font-size:.8125rem}:host.talos-chip-md.is-removable{padding-right:.375rem}:host.talos-chip-md .talos-chip-avatar{width:1.25rem;height:1.25rem;margin-left:-.375rem}:host.talos-chip-md .talos-chip-remove-btn{width:1.125rem;height:1.125rem}:host.talos-chip-md .talos-chip-remove-btn svg{width:.75rem;height:.75rem}:host.talos-chip-lg{height:2.25rem;padding:0 .75rem;font-size:.875rem}:host.talos-chip-lg.is-removable{padding-right:.5rem}:host.talos-chip-lg .talos-chip-avatar{width:1.5rem;height:1.5rem;margin-left:-.5rem}:host.talos-chip-lg .talos-chip-remove-btn{width:1.25rem;height:1.25rem}:host.talos-chip-lg .talos-chip-remove-btn svg{width:.875rem;height:.875rem}:host.talos-chip-primary.talos-chip-subtle{background-color:var(--talos-primary-50, rgba(37, 99, 235, .08));color:var(--talos-primary-700, #1d4ed8);border:1px solid var(--talos-primary-200, rgba(37, 99, 235, .2))}:host.talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn{color:var(--talos-primary-600, #2563eb)}:host.talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .18));color:var(--talos-primary-800, #1e40af)}:host.talos-chip-primary.talos-chip-filled{background-color:var(--talos-primary-600, #2563eb);color:#fff;border:1px solid transparent}:host.talos-chip-primary.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-primary.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3;color:#fff}:host.talos-chip-primary.talos-chip-outline{background-color:transparent;color:var(--talos-primary-600, #2563eb);border:1px solid var(--talos-primary-400, #60a5fa)}:host.talos-chip-primary.talos-chip-outline .talos-chip-remove-btn{color:var(--talos-primary-600, #2563eb)}:host.talos-chip-primary.talos-chip-outline .talos-chip-remove-btn:hover{background-color:var(--talos-primary-50, rgba(37, 99, 235, .1))}:host.talos-chip-neutral.talos-chip-subtle{background-color:var(--talos-gray-100, #f1f5f9);color:var(--talos-gray-800, #1e293b);border:1px solid var(--talos-gray-200, #e2e8f0)}:host.talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn{color:var(--talos-gray-500, #64748b)}:host.talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:var(--talos-gray-200, #e2e8f0);color:var(--talos-gray-800, #1e293b)}:host.talos-chip-neutral.talos-chip-filled{background-color:var(--talos-gray-700, #334155);color:#fff;border:1px solid transparent}:host.talos-chip-neutral.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-neutral.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3;color:#fff}:host.talos-chip-neutral.talos-chip-outline{background-color:transparent;color:var(--talos-gray-700, #334155);border:1px solid var(--talos-gray-300, #cbd5e1)}:host.talos-chip-neutral.talos-chip-outline .talos-chip-remove-btn{color:var(--talos-gray-500, #64748b)}:host.talos-chip-neutral.talos-chip-outline .talos-chip-remove-btn:hover{background-color:var(--talos-gray-100, #f1f5f9)}:host.talos-chip-success.talos-chip-subtle{background-color:#10b9811a;color:#065f46;border:1px solid rgba(16,185,129,.25)}:host.talos-chip-success.talos-chip-subtle .talos-chip-remove-btn{color:#059669}:host.talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#10b98133;color:#064e3b}:host.talos-chip-success.talos-chip-filled{background-color:#10b981;color:#fff;border:1px solid transparent}:host.talos-chip-success.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-success.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-success.talos-chip-outline{background-color:transparent;color:#10b981;border:1px solid #34d399}:host.talos-chip-success.talos-chip-outline .talos-chip-remove-btn{color:#10b981}:host.talos-chip-success.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#10b9811a}:host.talos-chip-warning.talos-chip-subtle{background-color:#f59e0b1a;color:#92400e;border:1px solid rgba(245,158,11,.25)}:host.talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn{color:#d97706}:host.talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#f59e0b33;color:#78350f}:host.talos-chip-warning.talos-chip-filled{background-color:#f59e0b;color:#fff;border:1px solid transparent}:host.talos-chip-warning.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-warning.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-warning.talos-chip-outline{background-color:transparent;color:#d97706;border:1px solid #fbbf24}:host.talos-chip-warning.talos-chip-outline .talos-chip-remove-btn{color:#d97706}:host.talos-chip-warning.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#f59e0b1a}:host.talos-chip-error.talos-chip-subtle{background-color:#ef44441a;color:#991b1b;border:1px solid rgba(239,68,68,.25)}:host.talos-chip-error.talos-chip-subtle .talos-chip-remove-btn{color:#ef4444}:host.talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ef444433;color:#7f1d1d}:host.talos-chip-error.talos-chip-filled{background-color:#ef4444;color:#fff;border:1px solid transparent}:host.talos-chip-error.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-error.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-error.talos-chip-outline{background-color:transparent;color:#ef4444;border:1px solid #f87171}:host.talos-chip-error.talos-chip-outline .talos-chip-remove-btn{color:#ef4444}:host.talos-chip-error.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#ef44441a}:host.talos-chip-indigo.talos-chip-subtle{background-color:#6366f11a;color:#3730a3;border:1px solid rgba(99,102,241,.25)}:host.talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn{color:#6366f1}:host.talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#6366f133;color:#312e81}:host.talos-chip-indigo.talos-chip-filled{background-color:#6366f1;color:#fff;border:1px solid transparent}:host.talos-chip-indigo.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-indigo.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-indigo.talos-chip-outline{background-color:transparent;color:#6366f1;border:1px solid #818cf8}:host.talos-chip-indigo.talos-chip-outline .talos-chip-remove-btn{color:#6366f1}:host.talos-chip-indigo.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#6366f11a}:host.talos-chip-purple.talos-chip-subtle{background-color:#a855f71a;color:#6b21a8;border:1px solid rgba(168,85,247,.25)}:host.talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn{color:#a855f7}:host.talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#a855f733;color:#581c87}:host.talos-chip-purple.talos-chip-filled{background-color:#a855f7;color:#fff;border:1px solid transparent}:host.talos-chip-purple.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-purple.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-purple.talos-chip-outline{background-color:transparent;color:#a855f7;border:1px solid #c084fc}:host.talos-chip-purple.talos-chip-outline .talos-chip-remove-btn{color:#a855f7}:host.talos-chip-purple.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#a855f71a}:host.talos-chip-cyan.talos-chip-subtle{background-color:#06b6d41a;color:#155e75;border:1px solid rgba(6,182,212,.25)}:host.talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn{color:#0891b2}:host.talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#06b6d433;color:#164e63}:host.talos-chip-cyan.talos-chip-filled{background-color:#06b6d4;color:#fff;border:1px solid transparent}:host.talos-chip-cyan.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-cyan.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-cyan.talos-chip-outline{background-color:transparent;color:#0891b2;border:1px solid #22d3ee}:host.talos-chip-cyan.talos-chip-outline .talos-chip-remove-btn{color:#0891b2}:host.talos-chip-cyan.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#06b6d41a}:host.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-chip-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;flex-shrink:0}.talos-chip-avatar img{width:100%;height:100%;object-fit:cover}.talos-chip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-chip-remove-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .12s ease;flex-shrink:0;outline:none}.talos-chip-remove-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary-400, #60a5fa)}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle,:host-context(.dark).talos-chip-neutral.talos-chip-subtle{background-color:#ffffff14;color:#e2e8f0;border-color:#ffffff1f}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn{color:#94a3b8}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ffffff26;color:#fff}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle,:host-context(.dark).talos-chip-primary.talos-chip-subtle{background-color:#3b82f626;color:#93c5fd;border-color:#3b82f64d}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn{color:#93c5fd}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#3b82f640;color:#fff}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle,:host-context(.dark).talos-chip-success.talos-chip-subtle{background-color:#10b98126;color:#6ee7b7;border-color:#10b9814d}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn{color:#6ee7b7}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#10b98140;color:#fff}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle,:host-context(.dark).talos-chip-warning.talos-chip-subtle{background-color:#f59e0b26;color:#fcd34d;border-color:#f59e0b4d}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn{color:#fcd34d}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#f59e0b40;color:#fff}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle,:host-context(.dark).talos-chip-error.talos-chip-subtle{background-color:#ef444426;color:#fca5a5;border-color:#ef44444d}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn{color:#fca5a5}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ef444440;color:#fff}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle,:host-context(.dark).talos-chip-indigo.talos-chip-subtle{background-color:#6366f126;color:#a5b4fc;border-color:#6366f14d}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn{color:#a5b4fc}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#6366f140;color:#fff}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle,:host-context(.dark).talos-chip-purple.talos-chip-subtle{background-color:#a855f726;color:#d8b4fe;border-color:#a855f74d}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn{color:#d8b4fe}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#a855f740;color:#fff}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle,:host-context(.dark).talos-chip-cyan.talos-chip-subtle{background-color:#06b6d426;color:#67e8f9;border-color:#06b6d44d}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn{color:#67e8f9}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#06b6d440;color:#fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-chip', host: {
+                        'class': 'talos-chip',
+                        '[class.talos-chip-sm]': 'size() === "sm"',
+                        '[class.talos-chip-md]': 'size() === "md"',
+                        '[class.talos-chip-lg]': 'size() === "lg"',
+                        '[class.talos-chip-filled]': 'variant() === "filled"',
+                        '[class.talos-chip-outline]': 'variant() === "outline"',
+                        '[class.talos-chip-subtle]': 'variant() === "subtle"',
+                        '[class.talos-chip-primary]': 'color() === "primary"',
+                        '[class.talos-chip-neutral]': 'color() === "neutral"',
+                        '[class.talos-chip-success]': 'color() === "success"',
+                        '[class.talos-chip-warning]': 'color() === "warning"',
+                        '[class.talos-chip-error]': 'color() === "error"',
+                        '[class.talos-chip-indigo]': 'color() === "indigo"',
+                        '[class.talos-chip-purple]': 'color() === "purple"',
+                        '[class.talos-chip-cyan]': 'color() === "cyan"',
+                        '[class.is-disabled]': 'disabled()',
+                        '[class.is-removable]': 'removable() && !disabled()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'onChipClick($event)'
+                    }, template: "@if (avatarUrl()) {\n  <span class=\"talos-chip-avatar\">\n    <img [src]=\"avatarUrl()\" alt=\"\" aria-hidden=\"true\" />\n  </span>\n}\n\n<span class=\"talos-chip-content\">\n  <ng-content>{{ label() }}</ng-content>\n</span>\n\n@if (removable() && !disabled()) {\n  <button\n    type=\"button\"\n    class=\"talos-chip-remove-btn\"\n    [attr.aria-label]=\"removeAriaLabel() + (label() ? ' ' + label() : '')\"\n    (click)=\"onRemove($event)\"\n  >\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.375rem;font-family:inherit;font-weight:500;border-radius:var(--talos-chip-radius, 9999px);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;max-width:100%;line-height:1;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;outline:none}:host.talos-chip-sm{height:1.5rem;padding:0 .5rem;font-size:.75rem}:host.talos-chip-sm.is-removable{padding-right:.25rem}:host.talos-chip-sm .talos-chip-avatar{width:1rem;height:1rem;margin-left:-.25rem}:host.talos-chip-sm .talos-chip-remove-btn{width:1rem;height:1rem}:host.talos-chip-sm .talos-chip-remove-btn svg{width:.625rem;height:.625rem}:host.talos-chip-md{height:1.875rem;padding:0 .625rem;font-size:.8125rem}:host.talos-chip-md.is-removable{padding-right:.375rem}:host.talos-chip-md .talos-chip-avatar{width:1.25rem;height:1.25rem;margin-left:-.375rem}:host.talos-chip-md .talos-chip-remove-btn{width:1.125rem;height:1.125rem}:host.talos-chip-md .talos-chip-remove-btn svg{width:.75rem;height:.75rem}:host.talos-chip-lg{height:2.25rem;padding:0 .75rem;font-size:.875rem}:host.talos-chip-lg.is-removable{padding-right:.5rem}:host.talos-chip-lg .talos-chip-avatar{width:1.5rem;height:1.5rem;margin-left:-.5rem}:host.talos-chip-lg .talos-chip-remove-btn{width:1.25rem;height:1.25rem}:host.talos-chip-lg .talos-chip-remove-btn svg{width:.875rem;height:.875rem}:host.talos-chip-primary.talos-chip-subtle{background-color:var(--talos-primary-50, rgba(37, 99, 235, .08));color:var(--talos-primary-700, #1d4ed8);border:1px solid var(--talos-primary-200, rgba(37, 99, 235, .2))}:host.talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn{color:var(--talos-primary-600, #2563eb)}:host.talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .18));color:var(--talos-primary-800, #1e40af)}:host.talos-chip-primary.talos-chip-filled{background-color:var(--talos-primary-600, #2563eb);color:#fff;border:1px solid transparent}:host.talos-chip-primary.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-primary.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3;color:#fff}:host.talos-chip-primary.talos-chip-outline{background-color:transparent;color:var(--talos-primary-600, #2563eb);border:1px solid var(--talos-primary-400, #60a5fa)}:host.talos-chip-primary.talos-chip-outline .talos-chip-remove-btn{color:var(--talos-primary-600, #2563eb)}:host.talos-chip-primary.talos-chip-outline .talos-chip-remove-btn:hover{background-color:var(--talos-primary-50, rgba(37, 99, 235, .1))}:host.talos-chip-neutral.talos-chip-subtle{background-color:var(--talos-gray-100, #f1f5f9);color:var(--talos-gray-800, #1e293b);border:1px solid var(--talos-gray-200, #e2e8f0)}:host.talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn{color:var(--talos-gray-500, #64748b)}:host.talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:var(--talos-gray-200, #e2e8f0);color:var(--talos-gray-800, #1e293b)}:host.talos-chip-neutral.talos-chip-filled{background-color:var(--talos-gray-700, #334155);color:#fff;border:1px solid transparent}:host.talos-chip-neutral.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-neutral.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3;color:#fff}:host.talos-chip-neutral.talos-chip-outline{background-color:transparent;color:var(--talos-gray-700, #334155);border:1px solid var(--talos-gray-300, #cbd5e1)}:host.talos-chip-neutral.talos-chip-outline .talos-chip-remove-btn{color:var(--talos-gray-500, #64748b)}:host.talos-chip-neutral.talos-chip-outline .talos-chip-remove-btn:hover{background-color:var(--talos-gray-100, #f1f5f9)}:host.talos-chip-success.talos-chip-subtle{background-color:#10b9811a;color:#065f46;border:1px solid rgba(16,185,129,.25)}:host.talos-chip-success.talos-chip-subtle .talos-chip-remove-btn{color:#059669}:host.talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#10b98133;color:#064e3b}:host.talos-chip-success.talos-chip-filled{background-color:#10b981;color:#fff;border:1px solid transparent}:host.talos-chip-success.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-success.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-success.talos-chip-outline{background-color:transparent;color:#10b981;border:1px solid #34d399}:host.talos-chip-success.talos-chip-outline .talos-chip-remove-btn{color:#10b981}:host.talos-chip-success.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#10b9811a}:host.talos-chip-warning.talos-chip-subtle{background-color:#f59e0b1a;color:#92400e;border:1px solid rgba(245,158,11,.25)}:host.talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn{color:#d97706}:host.talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#f59e0b33;color:#78350f}:host.talos-chip-warning.talos-chip-filled{background-color:#f59e0b;color:#fff;border:1px solid transparent}:host.talos-chip-warning.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-warning.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-warning.talos-chip-outline{background-color:transparent;color:#d97706;border:1px solid #fbbf24}:host.talos-chip-warning.talos-chip-outline .talos-chip-remove-btn{color:#d97706}:host.talos-chip-warning.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#f59e0b1a}:host.talos-chip-error.talos-chip-subtle{background-color:#ef44441a;color:#991b1b;border:1px solid rgba(239,68,68,.25)}:host.talos-chip-error.talos-chip-subtle .talos-chip-remove-btn{color:#ef4444}:host.talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ef444433;color:#7f1d1d}:host.talos-chip-error.talos-chip-filled{background-color:#ef4444;color:#fff;border:1px solid transparent}:host.talos-chip-error.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-error.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-error.talos-chip-outline{background-color:transparent;color:#ef4444;border:1px solid #f87171}:host.talos-chip-error.talos-chip-outline .talos-chip-remove-btn{color:#ef4444}:host.talos-chip-error.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#ef44441a}:host.talos-chip-indigo.talos-chip-subtle{background-color:#6366f11a;color:#3730a3;border:1px solid rgba(99,102,241,.25)}:host.talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn{color:#6366f1}:host.talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#6366f133;color:#312e81}:host.talos-chip-indigo.talos-chip-filled{background-color:#6366f1;color:#fff;border:1px solid transparent}:host.talos-chip-indigo.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-indigo.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-indigo.talos-chip-outline{background-color:transparent;color:#6366f1;border:1px solid #818cf8}:host.talos-chip-indigo.talos-chip-outline .talos-chip-remove-btn{color:#6366f1}:host.talos-chip-indigo.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#6366f11a}:host.talos-chip-purple.talos-chip-subtle{background-color:#a855f71a;color:#6b21a8;border:1px solid rgba(168,85,247,.25)}:host.talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn{color:#a855f7}:host.talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#a855f733;color:#581c87}:host.talos-chip-purple.talos-chip-filled{background-color:#a855f7;color:#fff;border:1px solid transparent}:host.talos-chip-purple.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-purple.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-purple.talos-chip-outline{background-color:transparent;color:#a855f7;border:1px solid #c084fc}:host.talos-chip-purple.talos-chip-outline .talos-chip-remove-btn{color:#a855f7}:host.talos-chip-purple.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#a855f71a}:host.talos-chip-cyan.talos-chip-subtle{background-color:#06b6d41a;color:#155e75;border:1px solid rgba(6,182,212,.25)}:host.talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn{color:#0891b2}:host.talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#06b6d433;color:#164e63}:host.talos-chip-cyan.talos-chip-filled{background-color:#06b6d4;color:#fff;border:1px solid transparent}:host.talos-chip-cyan.talos-chip-filled .talos-chip-remove-btn{color:#ffffffd9}:host.talos-chip-cyan.talos-chip-filled .talos-chip-remove-btn:hover{background-color:#fff3}:host.talos-chip-cyan.talos-chip-outline{background-color:transparent;color:#0891b2;border:1px solid #22d3ee}:host.talos-chip-cyan.talos-chip-outline .talos-chip-remove-btn{color:#0891b2}:host.talos-chip-cyan.talos-chip-outline .talos-chip-remove-btn:hover{background-color:#06b6d41a}:host.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-chip-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;flex-shrink:0}.talos-chip-avatar img{width:100%;height:100%;object-fit:cover}.talos-chip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-chip-remove-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .12s ease;flex-shrink:0;outline:none}.talos-chip-remove-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary-400, #60a5fa)}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle,:host-context(.dark).talos-chip-neutral.talos-chip-subtle{background-color:#ffffff14;color:#e2e8f0;border-color:#ffffff1f}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn{color:#94a3b8}:host-context([data-theme=dark]).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-neutral.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ffffff26;color:#fff}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle,:host-context(.dark).talos-chip-primary.talos-chip-subtle{background-color:#3b82f626;color:#93c5fd;border-color:#3b82f64d}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn{color:#93c5fd}:host-context([data-theme=dark]).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-primary.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#3b82f640;color:#fff}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle,:host-context(.dark).talos-chip-success.talos-chip-subtle{background-color:#10b98126;color:#6ee7b7;border-color:#10b9814d}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn{color:#6ee7b7}:host-context([data-theme=dark]).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-success.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#10b98140;color:#fff}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle,:host-context(.dark).talos-chip-warning.talos-chip-subtle{background-color:#f59e0b26;color:#fcd34d;border-color:#f59e0b4d}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn{color:#fcd34d}:host-context([data-theme=dark]).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-warning.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#f59e0b40;color:#fff}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle,:host-context(.dark).talos-chip-error.talos-chip-subtle{background-color:#ef444426;color:#fca5a5;border-color:#ef44444d}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn{color:#fca5a5}:host-context([data-theme=dark]).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-error.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#ef444440;color:#fff}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle,:host-context(.dark).talos-chip-indigo.talos-chip-subtle{background-color:#6366f126;color:#a5b4fc;border-color:#6366f14d}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn{color:#a5b4fc}:host-context([data-theme=dark]).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-indigo.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#6366f140;color:#fff}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle,:host-context(.dark).talos-chip-purple.talos-chip-subtle{background-color:#a855f726;color:#d8b4fe;border-color:#a855f74d}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn{color:#d8b4fe}:host-context([data-theme=dark]).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-purple.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#a855f740;color:#fff}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle,:host-context(.dark).talos-chip-cyan.talos-chip-subtle{background-color:#06b6d426;color:#67e8f9;border-color:#06b6d44d}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn,:host-context(.dark).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn{color:#67e8f9}:host-context([data-theme=dark]).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover,:host-context(.dark).talos-chip-cyan.talos-chip-subtle .talos-chip-remove-btn:hover{background-color:#06b6d440;color:#fff}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }] } });
+
+let uniqueChipsIdCounter = 0;
+class TalosChipsComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    floating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    searching = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    placeholder = input('Type or select...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    clearable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    removable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    maxChips = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxChips" }] : /* istanbul ignore next */ []));
+    allowCustom = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowCustom" }] : /* istanbul ignore next */ []));
+    separatorKeys = input(['Enter', ','], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorKeys" }] : /* istanbul ignore next */ []));
+    displayWith = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
+    valueWith = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueWith" }] : /* istanbul ignore next */ []));
+    filterFn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    highlightMatch = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightMatch" }] : /* istanbul ignore next */ []));
+    noResultsText = input('No matching options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    searchingText = input('Searching...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchingText" }] : /* istanbul ignore next */ []));
+    chipVariant = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipVariant" }] : /* istanbul ignore next */ []));
+    chipColor = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipColor" }] : /* istanbul ignore next */ []));
+    itemTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    openOnFocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    search = output();
+    searchChange = output();
+    selectionChange = output();
+    chipAdd = output();
+    chipRemove = output();
+    opened = output();
+    closed = output();
+    cleared = output();
+    // View Children
+    inputEl;
+    dropdownEl;
+    // Component IDs for ARIA attributes
+    autoId = `talos-chips-${uniqueChipsIdCounter++}`;
+    componentId = computed(() => this.id() || this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    inputId = computed(() => `${this.componentId()}-input`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    listboxId = computed(() => `${this.componentId()}-listbox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    // Internal Reactive State
+    inputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    isInputFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInputFocused" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    // Computed State
+    effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveSearching = computed(() => this.searching() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSearching" }] : /* istanbul ignore next */ []));
+    isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
+    isFloated = computed(() => {
+        if (!this.isFloatingMode())
+            return false;
+        return (this.isOpen() ||
+            this.isInputFocused() ||
+            this.selectedValues().length > 0 ||
+            !!this.inputValue().trim());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    isMaxReached = computed(() => {
+        const max = this.maxChips();
+        if (max === null || max === undefined)
+            return false;
+        return this.selectedValues().length >= max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMaxReached" }] : /* istanbul ignore next */ []));
+    effectivePlaceholder = computed(() => {
+        if (this.isFloatingMode() && !this.isFloated()) {
+            return '';
+        }
+        if (this.isMaxReached()) {
+            return 'Maximum selections reached';
+        }
+        return this.placeholder();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    activeOptionId = computed(() => {
+        const idx = this.activeIndex();
+        if (idx < 0)
+            return null;
+        return `${this.componentId()}-option-${idx}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    // Selected representations as Chips
+    selectedChips = computed(() => {
+        const values = this.selectedValues();
+        const rawOpts = this.options();
+        return values.map((val) => {
+            // Find matching item in options if any
+            const matched = rawOpts.find((opt) => this.getItemValue(opt) === val || opt === val);
+            if (matched !== undefined) {
+                return {
+                    display: this.getItemDisplay(matched),
+                    value: this.getItemValue(matched),
+                    originalItem: matched
+                };
+            }
+            // Handle raw object with display/value or primitive
+            if (val && typeof val === 'object') {
+                return {
+                    display: this.getItemDisplay(val),
+                    value: this.getItemValue(val),
+                    originalItem: val
+                };
+            }
+            return {
+                display: String(val ?? ''),
+                value: val,
+                originalItem: val
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedChips" }] : /* istanbul ignore next */ []));
+    // Filtered dropdown options
+    filteredOptions = computed(() => {
+        const rawOptions = this.options();
+        const search = this.inputValue().trim();
+        const customFilter = this.filterFn();
+        const selectedVals = this.selectedValues();
+        const result = [];
+        for (const item of rawOptions) {
+            const display = this.getItemDisplay(item);
+            const value = this.getItemValue(item);
+            const isSelected = selectedVals.some((v) => v === value || v === item || (typeof v === 'object' && typeof value === 'object' && JSON.stringify(v) === JSON.stringify(value)));
+            // Check if matches filter
+            let matches = true;
+            if (search) {
+                if (customFilter === null) {
+                    // Explicit null filterFn indicates external/server-side filtering
+                    matches = true;
+                }
+                else if (typeof customFilter === 'function') {
+                    matches = customFilter(item, search);
+                }
+                else {
+                    matches = display.toLowerCase().includes(search.toLowerCase());
+                }
+            }
+            if (matches) {
+                const parts = this.highlightMatch()
+                    ? this.computeHighlightParts(display, search)
+                    : [{ text: display, matched: false }];
+                result.push({
+                    item,
+                    display,
+                    value,
+                    disabled: false,
+                    selected: isSelected,
+                    parts
+                });
+            }
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Reset activeIndex whenever filtered options change or search changes
+        effect(() => {
+            this.filteredOptions();
+            this.activeIndex.set(-1);
+        });
+    }
+    // --- ControlValueAccessor Implementation ---
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.selectedValues.set([]);
+        }
+        else if (Array.isArray(value)) {
+            this.selectedValues.set([...value]);
+        }
+        else {
+            this.selectedValues.set([value]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled && this.isOpen()) {
+            this.closeDropdown();
+        }
+    }
+    // --- Helpers for Display & Value Extraction ---
+    getItemDisplay(item) {
+        if (item === null || item === undefined)
+            return '';
+        const displayFn = this.displayWith();
+        if (typeof displayFn === 'function') {
+            return displayFn(item);
+        }
+        if (typeof displayFn === 'string' && typeof item === 'object') {
+            return String(item[displayFn] ?? '');
+        }
+        if (typeof item === 'object') {
+            const obj = item;
+            if ('label' in obj)
+                return String(obj['label']);
+            if ('name' in obj)
+                return String(obj['name']);
+            if ('title' in obj)
+                return String(obj['title']);
+            if ('value' in obj)
+                return String(obj['value']);
+        }
+        return String(item);
+    }
+    getItemValue(item) {
+        if (item === null || item === undefined)
+            return item;
+        const valueFn = this.valueWith();
+        if (typeof valueFn === 'function') {
+            return valueFn(item);
+        }
+        if (typeof valueFn === 'string' && typeof item === 'object') {
+            return item[valueFn];
+        }
+        if (typeof item === 'object') {
+            const obj = item;
+            if ('value' in obj)
+                return obj['value'];
+            if ('id' in obj)
+                return obj['id'];
+        }
+        return item;
+    }
+    computeHighlightParts(text, search) {
+        if (!search || !text) {
+            return [{ text, matched: false }];
+        }
+        const regex = new RegExp(`(${this.escapeRegex(search)})`, 'gi');
+        const segments = text.split(regex);
+        return segments
+            .filter((seg) => seg.length > 0)
+            .map((seg) => ({
+            text: seg,
+            matched: seg.toLowerCase() === search.toLowerCase()
+        }));
+    }
+    escapeRegex(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    // --- Interaction Handlers ---
+    onContainerClick(event) {
+        if (this.effectiveDisabled())
+            return;
+        // Focus search input
+        if (this.inputEl && !this.isMaxReached()) {
+            this.inputEl.nativeElement.focus();
+        }
+        if (!this.isOpen() && this.options().length > 0) {
+            this.openDropdown();
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        const value = target.value;
+        // Check if ends with separator (like comma)
+        const separators = this.separatorKeys();
+        for (const sep of separators) {
+            if (sep !== 'Enter' && value.includes(sep)) {
+                const parts = value.split(sep);
+                for (const part of parts) {
+                    const trimmed = part.trim();
+                    if (trimmed) {
+                        this.addCustomChip(trimmed);
+                    }
+                }
+                this.inputValue.set('');
+                target.value = '';
+                this.emitSearch('');
+                return;
+            }
+        }
+        this.inputValue.set(value);
+        this.emitSearch(value);
+        if (!this.isOpen() && this.options().length > 0) {
+            this.openDropdown();
+        }
+    }
+    onFocus() {
+        this.isInputFocused.set(true);
+        if (this.openOnFocus() && !this.effectiveDisabled() && this.options().length > 0) {
+            this.openDropdown();
+        }
+    }
+    onBlur() {
+        this.isInputFocused.set(false);
+        this.markAsTouched();
+        // If allowCustom is enabled and user left some text in the input, commit it as a chip
+        if (this.allowCustom()) {
+            const text = this.inputValue().trim();
+            if (text) {
+                this.addCustomChip(text);
+                this.inputValue.set('');
+                if (this.inputEl) {
+                    this.inputEl.nativeElement.value = '';
+                }
+            }
+        }
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled())
+            return;
+        const opts = this.filteredOptions();
+        const currentIdx = this.activeIndex();
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                }
+                else if (opts.length > 0) {
+                    const nextIdx = currentIdx < opts.length - 1 ? currentIdx + 1 : 0;
+                    this.activeIndex.set(nextIdx);
+                    this.scrollActiveOptionIntoView(nextIdx);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                }
+                else if (opts.length > 0) {
+                    const prevIdx = currentIdx > 0 ? currentIdx - 1 : opts.length - 1;
+                    this.activeIndex.set(prevIdx);
+                    this.scrollActiveOptionIntoView(prevIdx);
+                }
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (this.isOpen() && currentIdx >= 0 && currentIdx < opts.length) {
+                    const activeOpt = opts[currentIdx];
+                    this.toggleOption(activeOpt);
+                }
+                else if (this.allowCustom()) {
+                    const text = this.inputValue().trim();
+                    if (text) {
+                        this.addCustomChip(text);
+                        this.inputValue.set('');
+                        if (this.inputEl) {
+                            this.inputEl.nativeElement.value = '';
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Backspace': {
+                if (!this.inputValue() && this.selectedValues().length > 0 && this.removable()) {
+                    // Remove the last selected chip
+                    const current = [...this.selectedValues()];
+                    const removed = current.pop();
+                    this.selectedValues.set(current);
+                    this.emitSelection(current);
+                    this.chipRemove.emit(removed);
+                }
+                break;
+            }
+            case 'Escape': {
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.closeDropdown();
+                }
+                break;
+            }
+            case 'Tab': {
+                if (this.isOpen()) {
+                    this.closeDropdown();
+                }
+                break;
+            }
+        }
+    }
+    toggleOption(option) {
+        if (this.effectiveDisabled() || option.disabled)
+            return;
+        const valToToggle = option.value;
+        const currentValues = [...this.selectedValues()];
+        const index = currentValues.findIndex((v) => v === valToToggle || v === option.item);
+        if (index >= 0) {
+            // Deselect
+            currentValues.splice(index, 1);
+            this.selectedValues.set(currentValues);
+            this.emitSelection(currentValues);
+            this.chipRemove.emit(valToToggle);
+        }
+        else {
+            // Select (if not max reached)
+            if (this.isMaxReached())
+                return;
+            currentValues.push(valToToggle);
+            this.selectedValues.set(currentValues);
+            this.emitSelection(currentValues);
+            this.chipAdd.emit(valToToggle);
+            // Clear search input on selection
+            this.inputValue.set('');
+            if (this.inputEl) {
+                this.inputEl.nativeElement.value = '';
+            }
+            this.emitSearch('');
+        }
+        // Keep focus in input
+        if (this.inputEl && !this.isMaxReached()) {
+            this.inputEl.nativeElement.focus();
+        }
+    }
+    addCustomChip(text) {
+        if (!text || this.effectiveDisabled() || this.isMaxReached())
+            return;
+        const currentValues = [...this.selectedValues()];
+        // Prevent exact duplicates
+        if (!currentValues.includes(text)) {
+            currentValues.push(text);
+            this.selectedValues.set(currentValues);
+            this.emitSelection(currentValues);
+            this.chipAdd.emit(text);
+        }
+    }
+    removeChip(chipData) {
+        if (this.effectiveDisabled() || !this.removable())
+            return;
+        const currentValues = this.selectedValues().filter((v) => v !== chipData.value && v !== chipData.originalItem && v !== chipData.display);
+        this.selectedValues.set(currentValues);
+        this.emitSelection(currentValues);
+        this.chipRemove.emit(chipData.value);
+        // Refocus input if available
+        if (this.inputEl && !this.isMaxReached()) {
+            this.inputEl.nativeElement.focus();
+        }
+    }
+    clearAll(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (this.effectiveDisabled())
+            return;
+        this.selectedValues.set([]);
+        this.inputValue.set('');
+        if (this.inputEl) {
+            this.inputEl.nativeElement.value = '';
+        }
+        this.emitSelection([]);
+        this.cleared.emit();
+        this.emitSearch('');
+        if (this.inputEl) {
+            this.inputEl.nativeElement.focus();
+        }
+    }
+    toggleDropdown(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (this.effectiveDisabled())
+            return;
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+            if (this.inputEl && !this.isMaxReached()) {
+                this.inputEl.nativeElement.focus();
+            }
+        }
+    }
+    openDropdown() {
+        if (this.isOpen() || this.effectiveDisabled())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+        this.closed.emit();
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.closeDropdown();
+            this.markAsTouched();
+        }
+    }
+    emitSearch(val) {
+        this.search.emit(val);
+        this.searchChange.emit(val);
+    }
+    emitSelection(values) {
+        this.onChange(values);
+        this.selectionChange.emit(values);
+        this.markAsTouched();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    scrollActiveOptionIntoView(index) {
+        if (!this.dropdownEl)
+            return;
+        const optionEl = this.dropdownEl.nativeElement.querySelector(`#${this.componentId()}-option-${index}`);
+        if (optionEl) {
+            optionEl.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosChipsComponent, isStandalone: true, selector: "talos-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, highlightMatch: { classPropertyName: "highlightMatch", publicName: "highlightMatch", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, searchingText: { classPropertyName: "searchingText", publicName: "searchingText", isSignal: true, isRequired: false, transformFunction: null }, chipVariant: { classPropertyName: "chipVariant", publicName: "chipVariant", isSignal: true, isRequired: false, transformFunction: null }, chipColor: { classPropertyName: "chipColor", publicName: "chipColor", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", searchChange: "searchChange", selectionChange: "selectionChange", chipAdd: "chipAdd", chipRemove: "chipRemove", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.is-searching": "effectiveSearching()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.chips-sm": "size() === \"sm\"", "class.chips-md": "size() === \"md\"", "class.chips-lg": "size() === \"lg\"" }, classAttribute: "talos-chips-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TalosChipsComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "dropdownEl", first: true, predicate: ["dropdownEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" [attr.for]=\"inputId()\" (click)=\"onContainerClick($event)\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"chips-wrapper\" [class.has-floating-label]=\"isFloatingMode()\">\n  <!-- Main Interactive Input Box -->\n  <div\n    class=\"chips-control\"\n    [class.is-focused]=\"isInputFocused() || isOpen()\"\n    [class.is-empty]=\"selectedChips().length === 0 && !inputValue()\"\n    (click)=\"onContainerClick($event)\"\n  >\n    <!-- Selected Chips Pills Container -->\n    <div class=\"chips-pills-container\">\n      @for (chip of selectedChips(); track chip.value) {\n        <talos-chip\n          [label]=\"chip.display\"\n          [value]=\"chip.value\"\n          [size]=\"size()\"\n          [variant]=\"chipVariant()\"\n          [color]=\"chipColor()\"\n          [removable]=\"removable() && !effectiveDisabled()\"\n          [disabled]=\"effectiveDisabled()\"\n          (removed)=\"removeChip(chip)\"\n        />\n      }\n\n      <!-- Inline Search / Input Field -->\n      @if (!isMaxReached()) {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"chips-input\"\n          [id]=\"inputId()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputValue()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'listbox'\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-activedescendant]=\"activeOptionId()\"\n          [attr.aria-disabled]=\"effectiveDisabled()\"\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n        />\n      }\n    </div>\n\n    @if (label() && isFloatingMode()) {\n      <label\n        class=\"talos-floating-label\"\n        [class.is-floated]=\"isFloated()\"\n        [attr.for]=\"inputId()\"\n        (click)=\"onContainerClick($event)\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <!-- Trailing Action Icons -->\n    <div class=\"chips-actions\" (click)=\"$event.stopPropagation()\">\n      <!-- Searching / Loading Spinner -->\n      @if (effectiveSearching()) {\n        <span class=\"chips-spinner\" aria-label=\"Searching...\" title=\"Searching...\">\n          <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </span>\n      }\n\n      <!-- Clear All Chips Button -->\n      @if (clearable() && (selectedChips().length > 0 || inputValue()) && !effectiveDisabled() && !effectiveSearching()) {\n        <button\n          type=\"button\"\n          class=\"chips-clear-btn\"\n          aria-label=\"Clear all selections\"\n          title=\"Clear all\"\n          (click)=\"clearAll($event)\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n\n      <!-- Dropdown Toggle Arrow -->\n      @if (options().length > 0) {\n        <button\n          type=\"button\"\n          class=\"chips-arrow-btn\"\n          [class.is-open]=\"isOpen()\"\n          [disabled]=\"effectiveDisabled()\"\n          aria-label=\"Toggle options menu\"\n          tabindex=\"-1\"\n          (click)=\"toggleDropdown($event)\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polyline points=\"6 9 12 15 18 9\"></polyline>\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Dropdown Menu / Listbox -->\n  @if (isOpen() && !effectiveDisabled()) {\n    <div\n      #dropdownEl\n      class=\"chips-dropdown\"\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"label() || 'Options'\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      @if (effectiveSearching()) {\n        <div class=\"chips-status-message\">\n          <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n          <span>{{ searchingText() }}</span>\n        </div>\n      } @else if (filteredOptions().length > 0) {\n        <ul class=\"chips-options-list\" role=\"presentation\">\n          @for (option of filteredOptions(); track option.value; let idx = $index) {\n            <li\n              class=\"chips-option-item\"\n              [id]=\"componentId() + '-option-' + idx\"\n              role=\"option\"\n              [attr.aria-selected]=\"option.selected\"\n              [attr.aria-disabled]=\"option.disabled\"\n              [class.is-selected]=\"option.selected\"\n              [class.is-active]=\"activeIndex() === idx\"\n              [class.is-disabled]=\"option.disabled\"\n              (click)=\"toggleOption(option)\"\n              (mouseenter)=\"activeIndex.set(idx)\"\n            >\n              <!-- Option Checkbox Indicator -->\n              <span class=\"option-checkbox\" [class.is-checked]=\"option.selected\" aria-hidden=\"true\">\n                @if (option.selected) {\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                }\n              </span>\n\n              <!-- Content / Template Outlet -->\n              @if (itemTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"itemTemplate()!\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: option.item,\n                    display: option.display,\n                    selected: option.selected,\n                    disabled: option.disabled\n                  }\"\n                />\n              } @else {\n                <span class=\"option-label\">\n                  @for (part of option.parts; track $index) {\n                    @if (part.matched) {\n                      <strong class=\"highlight-match\">{{ part.text }}</strong>\n                    } @else {\n                      <span>{{ part.text }}</span>\n                    }\n                  }\n                </span>\n              }\n            </li>\n          }\n        </ul>\n      } @else {\n        <!-- Empty / No Results -->\n        <div class=\"chips-empty-message\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"></line>\n          </svg>\n          <span>{{ noResultsText() }}</span>\n        </div>\n\n        @if (allowCustom() && inputValue().trim()) {\n          <div class=\"chips-create-tag-action\" (click)=\"addCustomChip(inputValue().trim()); inputValue.set('')\">\n            <span>Add \"<strong>{{ inputValue().trim() }}</strong>\"</span>\n            <kbd>\u21B5 Enter</kbd>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:inherit;box-sizing:border-box}:host.is-disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;-webkit-user-select:none;user-select:none;cursor:pointer}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.125rem}.chips-wrapper{position:relative;width:100%}.chips-control{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;background-color:var(--talos-input-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-control-radius, .5rem);cursor:text;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;min-height:2.25rem;padding:.25rem .5rem;gap:.375rem}.chips-control:hover:not(.is-disabled){border-color:var(--talos-border-hover-color, #94a3b8)}.chips-control.is-focused{border-color:var(--talos-primary-500, #3b82f6);box-shadow:0 0 0 3px var(--talos-primary-100, rgba(59, 130, 246, .2))}:host(.chips-sm) .chips-control{min-height:2rem;padding:.1875rem .375rem;font-size:.75rem}:host(.chips-md) .chips-control{min-height:2.375rem;padding:.25rem .5rem;font-size:.8125rem}:host(.chips-lg) .chips-control{min-height:2.75rem;padding:.375rem .625rem;font-size:.875rem}.chips-pills-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;flex:1;min-width:0}.chips-input{flex:1 1 5rem;min-width:3.5rem;border:none;background:transparent;outline:none;font-family:inherit;font-size:inherit;color:var(--talos-text-color, #0f172a);padding:.125rem .25rem;box-sizing:border-box}.chips-input::placeholder{color:var(--talos-input-placeholder-color, #94a3b8);opacity:1}.chips-input:disabled{cursor:not-allowed}.talos-floating-label{position:absolute;left:.625rem;top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:500;color:var(--talos-input-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.125rem}.talos-floating-label.is-floated{top:0!important;transform:translateY(-50%) scale(.85)!important;font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,.chips-control.is-focused .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.chips-actions{display:inline-flex;align-items:center;gap:.25rem;flex-shrink:0;margin-left:auto}.chips-clear-btn{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;border-radius:50%;color:var(--talos-text-muted, #94a3b8);cursor:pointer;outline:none;transition:color .15s ease,background-color .15s ease}.chips-clear-btn svg{width:.75rem;height:.75rem}.chips-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.chips-clear-btn:focus-visible{color:var(--talos-error-color, #ef4444);box-shadow:0 0 0 2px #ef444433}.chips-arrow-btn{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #64748b);cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease}.chips-arrow-btn svg{width:.875rem;height:.875rem}.chips-arrow-btn.is-open{transform:rotate(180deg);color:var(--talos-primary-600, #2563eb)}.chips-spinner{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-primary-500, #3b82f6)}.chips-spinner .spinner-svg{width:.875rem;height:.875rem;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chips-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:16rem;overflow-y:auto;background-color:var(--talos-dropdown-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-control-radius, .5rem);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;padding:.25rem;box-sizing:border-box;animation:dropdownFadeIn .15s cubic-bezier(.16,1,.3,1)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chips-options-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}.chips-option-item{display:flex;align-items:center;gap:.5rem;padding:.4375rem .625rem;border-radius:.375rem;font-size:.8125rem;color:var(--talos-text-color, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease}.chips-option-item.is-active,.chips-option-item:hover{background-color:var(--talos-item-hover-bg, #f1f5f9)}.chips-option-item.is-selected{background-color:var(--talos-primary-50, rgba(37, 99, 235, .08));color:var(--talos-primary-700, #1d4ed8);font-weight:500}.chips-option-item.is-selected.is-active,.chips-option-item.is-selected:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .15))}.chips-option-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.option-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--talos-gray-300, #cbd5e1);background-color:var(--talos-input-bg, #ffffff);flex-shrink:0;transition:all .12s ease}.option-checkbox.is-checked{background-color:var(--talos-primary-600, #2563eb);border-color:var(--talos-primary-600, #2563eb);color:#fff}.option-checkbox.is-checked svg{width:.75rem;height:.75rem}.option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-label .highlight-match{color:var(--talos-primary-600, #2563eb);background-color:#2563eb1f;border-radius:.125rem;padding:0 .125rem;font-weight:700}.chips-status-message,.chips-empty-message{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;font-size:.8125rem;color:var(--talos-gray-500, #64748b);text-align:center}.chips-status-message svg,.chips-empty-message svg{width:1.125rem;height:1.125rem}.chips-create-tag-action{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;margin-top:.25rem;border-top:1px dashed var(--talos-border-color, #cbd5e1);border-radius:.25rem;font-size:.8125rem;color:var(--talos-primary-600, #2563eb);cursor:pointer;background-color:var(--talos-primary-50, rgba(37, 99, 235, .05));transition:background-color .12s ease}.chips-create-tag-action:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .15))}.chips-create-tag-action kbd{font-size:.6875rem;padding:.125rem .375rem;border-radius:.25rem;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);color:var(--talos-gray-600, #475569)}:host-context([data-theme=dark]) .talos-field-label,:host-context(.dark) .talos-field-label{color:#f1f5f9}:host-context([data-theme=dark]) .chips-control,:host-context(.dark) .chips-control{background-color:var(--talos-input-bg, #0f172a);border-color:var(--talos-border-color, #334155)}:host-context([data-theme=dark]) .chips-control:hover:not(.is-disabled),:host-context(.dark) .chips-control:hover:not(.is-disabled){border-color:#475569}:host-context([data-theme=dark]) .chips-control.is-focused,:host-context(.dark) .chips-control.is-focused{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa33}:host-context([data-theme=dark]) .chips-input,:host-context(.dark) .chips-input{color:#f1f5f9}:host-context([data-theme=dark]) .chips-input::placeholder,:host-context(.dark) .chips-input::placeholder{color:#64748b}:host-context([data-theme=dark]) .talos-floating-label,:host-context(.dark) .talos-floating-label{background-color:var(--talos-input-bg, #0f172a);color:#64748b}:host-context([data-theme=dark]) .talos-floating-label.is-floated,:host-context(.dark) .talos-floating-label.is-floated{color:#94a3b8}:host-context([data-theme=dark]):host(.is-open) .talos-floating-label.is-floated,:host-context([data-theme=dark]) .chips-control.is-focused .talos-floating-label.is-floated,:host-context(.dark):host(.is-open) .talos-floating-label.is-floated,:host-context(.dark) .chips-control.is-focused .talos-floating-label.is-floated{color:#60a5fa}:host-context([data-theme=dark]) .chips-dropdown,:host-context(.dark) .chips-dropdown{background-color:var(--talos-dropdown-bg, #1e293b);border-color:#334155;box-shadow:0 10px 15px -3px #00000080}:host-context([data-theme=dark]) .chips-option-item,:host-context(.dark) .chips-option-item{color:#e2e8f0}:host-context([data-theme=dark]) .chips-option-item.is-active,:host-context([data-theme=dark]) .chips-option-item:hover,:host-context(.dark) .chips-option-item.is-active,:host-context(.dark) .chips-option-item:hover{background-color:#ffffff0f}:host-context([data-theme=dark]) .chips-option-item.is-selected,:host-context(.dark) .chips-option-item.is-selected{background-color:#3b82f62e;color:#93c5fd}:host-context([data-theme=dark]) .chips-option-item.is-selected.is-active,:host-context([data-theme=dark]) .chips-option-item.is-selected:hover,:host-context(.dark) .chips-option-item.is-selected.is-active,:host-context(.dark) .chips-option-item.is-selected:hover{background-color:#3b82f647}:host-context([data-theme=dark]) .option-checkbox,:host-context(.dark) .option-checkbox{background-color:#0f172a;border-color:#475569}:host-context([data-theme=dark]) .option-checkbox.is-checked,:host-context(.dark) .option-checkbox.is-checked{background-color:#3b82f6;border-color:#3b82f6}:host-context([data-theme=dark]) .option-label .highlight-match,:host-context(.dark) .option-label .highlight-match{color:#93c5fd;background-color:#3b82f64d}:host-context([data-theme=dark]) .chips-create-tag-action,:host-context(.dark) .chips-create-tag-action{border-top-color:#334155;color:#60a5fa;background-color:#3b82f61f}:host-context([data-theme=dark]) .chips-create-tag-action:hover,:host-context(.dark) .chips-create-tag-action:hover{background-color:#3b82f638}:host-context([data-theme=dark]) .chips-create-tag-action kbd,:host-context(.dark) .chips-create-tag-action kbd{background-color:#0f172a;border-color:#334155;color:#94a3b8}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TalosChipComponent, selector: "talos-chip", inputs: ["label", "value", "size", "variant", "color", "removable", "disabled", "avatarUrl", "removeAriaLabel"], outputs: ["removed", "chipClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-chips', imports: [NgTemplateOutlet, TalosChipComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TalosChipsComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'talos-chips-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.is-searching]': 'effectiveSearching()',
+                        '[class.has-label]': '!!label()',
+                        '[class.is-floating]': 'isFloatingMode()',
+                        '[class.is-floated]': 'isFloated()',
+                        '[class.chips-sm]': 'size() === "sm"',
+                        '[class.chips-md]': 'size() === "md"',
+                        '[class.chips-lg]': 'size() === "lg"',
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" [attr.for]=\"inputId()\" (click)=\"onContainerClick($event)\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"chips-wrapper\" [class.has-floating-label]=\"isFloatingMode()\">\n  <!-- Main Interactive Input Box -->\n  <div\n    class=\"chips-control\"\n    [class.is-focused]=\"isInputFocused() || isOpen()\"\n    [class.is-empty]=\"selectedChips().length === 0 && !inputValue()\"\n    (click)=\"onContainerClick($event)\"\n  >\n    <!-- Selected Chips Pills Container -->\n    <div class=\"chips-pills-container\">\n      @for (chip of selectedChips(); track chip.value) {\n        <talos-chip\n          [label]=\"chip.display\"\n          [value]=\"chip.value\"\n          [size]=\"size()\"\n          [variant]=\"chipVariant()\"\n          [color]=\"chipColor()\"\n          [removable]=\"removable() && !effectiveDisabled()\"\n          [disabled]=\"effectiveDisabled()\"\n          (removed)=\"removeChip(chip)\"\n        />\n      }\n\n      <!-- Inline Search / Input Field -->\n      @if (!isMaxReached()) {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"chips-input\"\n          [id]=\"inputId()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputValue()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keydown)=\"onKeyDown($event)\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'listbox'\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-activedescendant]=\"activeOptionId()\"\n          [attr.aria-disabled]=\"effectiveDisabled()\"\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n        />\n      }\n    </div>\n\n    @if (label() && isFloatingMode()) {\n      <label\n        class=\"talos-floating-label\"\n        [class.is-floated]=\"isFloated()\"\n        [attr.for]=\"inputId()\"\n        (click)=\"onContainerClick($event)\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <!-- Trailing Action Icons -->\n    <div class=\"chips-actions\" (click)=\"$event.stopPropagation()\">\n      <!-- Searching / Loading Spinner -->\n      @if (effectiveSearching()) {\n        <span class=\"chips-spinner\" aria-label=\"Searching...\" title=\"Searching...\">\n          <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </span>\n      }\n\n      <!-- Clear All Chips Button -->\n      @if (clearable() && (selectedChips().length > 0 || inputValue()) && !effectiveDisabled() && !effectiveSearching()) {\n        <button\n          type=\"button\"\n          class=\"chips-clear-btn\"\n          aria-label=\"Clear all selections\"\n          title=\"Clear all\"\n          (click)=\"clearAll($event)\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n\n      <!-- Dropdown Toggle Arrow -->\n      @if (options().length > 0) {\n        <button\n          type=\"button\"\n          class=\"chips-arrow-btn\"\n          [class.is-open]=\"isOpen()\"\n          [disabled]=\"effectiveDisabled()\"\n          aria-label=\"Toggle options menu\"\n          tabindex=\"-1\"\n          (click)=\"toggleDropdown($event)\"\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polyline points=\"6 9 12 15 18 9\"></polyline>\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Dropdown Menu / Listbox -->\n  @if (isOpen() && !effectiveDisabled()) {\n    <div\n      #dropdownEl\n      class=\"chips-dropdown\"\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"label() || 'Options'\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      @if (effectiveSearching()) {\n        <div class=\"chips-status-message\">\n          <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n          <span>{{ searchingText() }}</span>\n        </div>\n      } @else if (filteredOptions().length > 0) {\n        <ul class=\"chips-options-list\" role=\"presentation\">\n          @for (option of filteredOptions(); track option.value; let idx = $index) {\n            <li\n              class=\"chips-option-item\"\n              [id]=\"componentId() + '-option-' + idx\"\n              role=\"option\"\n              [attr.aria-selected]=\"option.selected\"\n              [attr.aria-disabled]=\"option.disabled\"\n              [class.is-selected]=\"option.selected\"\n              [class.is-active]=\"activeIndex() === idx\"\n              [class.is-disabled]=\"option.disabled\"\n              (click)=\"toggleOption(option)\"\n              (mouseenter)=\"activeIndex.set(idx)\"\n            >\n              <!-- Option Checkbox Indicator -->\n              <span class=\"option-checkbox\" [class.is-checked]=\"option.selected\" aria-hidden=\"true\">\n                @if (option.selected) {\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                }\n              </span>\n\n              <!-- Content / Template Outlet -->\n              @if (itemTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"itemTemplate()!\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: option.item,\n                    display: option.display,\n                    selected: option.selected,\n                    disabled: option.disabled\n                  }\"\n                />\n              } @else {\n                <span class=\"option-label\">\n                  @for (part of option.parts; track $index) {\n                    @if (part.matched) {\n                      <strong class=\"highlight-match\">{{ part.text }}</strong>\n                    } @else {\n                      <span>{{ part.text }}</span>\n                    }\n                  }\n                </span>\n              }\n            </li>\n          }\n        </ul>\n      } @else {\n        <!-- Empty / No Results -->\n        <div class=\"chips-empty-message\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"></line>\n          </svg>\n          <span>{{ noResultsText() }}</span>\n        </div>\n\n        @if (allowCustom() && inputValue().trim()) {\n          <div class=\"chips-create-tag-action\" (click)=\"addCustomChip(inputValue().trim()); inputValue.set('')\">\n            <span>Add \"<strong>{{ inputValue().trim() }}</strong>\"</span>\n            <kbd>\u21B5 Enter</kbd>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:inherit;box-sizing:border-box}:host.is-disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;-webkit-user-select:none;user-select:none;cursor:pointer}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.125rem}.chips-wrapper{position:relative;width:100%}.chips-control{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;background-color:var(--talos-input-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-control-radius, .5rem);cursor:text;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;min-height:2.25rem;padding:.25rem .5rem;gap:.375rem}.chips-control:hover:not(.is-disabled){border-color:var(--talos-border-hover-color, #94a3b8)}.chips-control.is-focused{border-color:var(--talos-primary-500, #3b82f6);box-shadow:0 0 0 3px var(--talos-primary-100, rgba(59, 130, 246, .2))}:host(.chips-sm) .chips-control{min-height:2rem;padding:.1875rem .375rem;font-size:.75rem}:host(.chips-md) .chips-control{min-height:2.375rem;padding:.25rem .5rem;font-size:.8125rem}:host(.chips-lg) .chips-control{min-height:2.75rem;padding:.375rem .625rem;font-size:.875rem}.chips-pills-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;flex:1;min-width:0}.chips-input{flex:1 1 5rem;min-width:3.5rem;border:none;background:transparent;outline:none;font-family:inherit;font-size:inherit;color:var(--talos-text-color, #0f172a);padding:.125rem .25rem;box-sizing:border-box}.chips-input::placeholder{color:var(--talos-input-placeholder-color, #94a3b8);opacity:1}.chips-input:disabled{cursor:not-allowed}.talos-floating-label{position:absolute;left:.625rem;top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:500;color:var(--talos-input-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.125rem}.talos-floating-label.is-floated{top:0!important;transform:translateY(-50%) scale(.85)!important;font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,.chips-control.is-focused .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.chips-actions{display:inline-flex;align-items:center;gap:.25rem;flex-shrink:0;margin-left:auto}.chips-clear-btn{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;border-radius:50%;color:var(--talos-text-muted, #94a3b8);cursor:pointer;outline:none;transition:color .15s ease,background-color .15s ease}.chips-clear-btn svg{width:.75rem;height:.75rem}.chips-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.chips-clear-btn:focus-visible{color:var(--talos-error-color, #ef4444);box-shadow:0 0 0 2px #ef444433}.chips-arrow-btn{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #64748b);cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease}.chips-arrow-btn svg{width:.875rem;height:.875rem}.chips-arrow-btn.is-open{transform:rotate(180deg);color:var(--talos-primary-600, #2563eb)}.chips-spinner{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-primary-500, #3b82f6)}.chips-spinner .spinner-svg{width:.875rem;height:.875rem;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chips-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:16rem;overflow-y:auto;background-color:var(--talos-dropdown-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-control-radius, .5rem);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;padding:.25rem;box-sizing:border-box;animation:dropdownFadeIn .15s cubic-bezier(.16,1,.3,1)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chips-options-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}.chips-option-item{display:flex;align-items:center;gap:.5rem;padding:.4375rem .625rem;border-radius:.375rem;font-size:.8125rem;color:var(--talos-text-color, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease}.chips-option-item.is-active,.chips-option-item:hover{background-color:var(--talos-item-hover-bg, #f1f5f9)}.chips-option-item.is-selected{background-color:var(--talos-primary-50, rgba(37, 99, 235, .08));color:var(--talos-primary-700, #1d4ed8);font-weight:500}.chips-option-item.is-selected.is-active,.chips-option-item.is-selected:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .15))}.chips-option-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.option-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--talos-gray-300, #cbd5e1);background-color:var(--talos-input-bg, #ffffff);flex-shrink:0;transition:all .12s ease}.option-checkbox.is-checked{background-color:var(--talos-primary-600, #2563eb);border-color:var(--talos-primary-600, #2563eb);color:#fff}.option-checkbox.is-checked svg{width:.75rem;height:.75rem}.option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-label .highlight-match{color:var(--talos-primary-600, #2563eb);background-color:#2563eb1f;border-radius:.125rem;padding:0 .125rem;font-weight:700}.chips-status-message,.chips-empty-message{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;font-size:.8125rem;color:var(--talos-gray-500, #64748b);text-align:center}.chips-status-message svg,.chips-empty-message svg{width:1.125rem;height:1.125rem}.chips-create-tag-action{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;margin-top:.25rem;border-top:1px dashed var(--talos-border-color, #cbd5e1);border-radius:.25rem;font-size:.8125rem;color:var(--talos-primary-600, #2563eb);cursor:pointer;background-color:var(--talos-primary-50, rgba(37, 99, 235, .05));transition:background-color .12s ease}.chips-create-tag-action:hover{background-color:var(--talos-primary-100, rgba(37, 99, 235, .15))}.chips-create-tag-action kbd{font-size:.6875rem;padding:.125rem .375rem;border-radius:.25rem;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);color:var(--talos-gray-600, #475569)}:host-context([data-theme=dark]) .talos-field-label,:host-context(.dark) .talos-field-label{color:#f1f5f9}:host-context([data-theme=dark]) .chips-control,:host-context(.dark) .chips-control{background-color:var(--talos-input-bg, #0f172a);border-color:var(--talos-border-color, #334155)}:host-context([data-theme=dark]) .chips-control:hover:not(.is-disabled),:host-context(.dark) .chips-control:hover:not(.is-disabled){border-color:#475569}:host-context([data-theme=dark]) .chips-control.is-focused,:host-context(.dark) .chips-control.is-focused{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa33}:host-context([data-theme=dark]) .chips-input,:host-context(.dark) .chips-input{color:#f1f5f9}:host-context([data-theme=dark]) .chips-input::placeholder,:host-context(.dark) .chips-input::placeholder{color:#64748b}:host-context([data-theme=dark]) .talos-floating-label,:host-context(.dark) .talos-floating-label{background-color:var(--talos-input-bg, #0f172a);color:#64748b}:host-context([data-theme=dark]) .talos-floating-label.is-floated,:host-context(.dark) .talos-floating-label.is-floated{color:#94a3b8}:host-context([data-theme=dark]):host(.is-open) .talos-floating-label.is-floated,:host-context([data-theme=dark]) .chips-control.is-focused .talos-floating-label.is-floated,:host-context(.dark):host(.is-open) .talos-floating-label.is-floated,:host-context(.dark) .chips-control.is-focused .talos-floating-label.is-floated{color:#60a5fa}:host-context([data-theme=dark]) .chips-dropdown,:host-context(.dark) .chips-dropdown{background-color:var(--talos-dropdown-bg, #1e293b);border-color:#334155;box-shadow:0 10px 15px -3px #00000080}:host-context([data-theme=dark]) .chips-option-item,:host-context(.dark) .chips-option-item{color:#e2e8f0}:host-context([data-theme=dark]) .chips-option-item.is-active,:host-context([data-theme=dark]) .chips-option-item:hover,:host-context(.dark) .chips-option-item.is-active,:host-context(.dark) .chips-option-item:hover{background-color:#ffffff0f}:host-context([data-theme=dark]) .chips-option-item.is-selected,:host-context(.dark) .chips-option-item.is-selected{background-color:#3b82f62e;color:#93c5fd}:host-context([data-theme=dark]) .chips-option-item.is-selected.is-active,:host-context([data-theme=dark]) .chips-option-item.is-selected:hover,:host-context(.dark) .chips-option-item.is-selected.is-active,:host-context(.dark) .chips-option-item.is-selected:hover{background-color:#3b82f647}:host-context([data-theme=dark]) .option-checkbox,:host-context(.dark) .option-checkbox{background-color:#0f172a;border-color:#475569}:host-context([data-theme=dark]) .option-checkbox.is-checked,:host-context(.dark) .option-checkbox.is-checked{background-color:#3b82f6;border-color:#3b82f6}:host-context([data-theme=dark]) .option-label .highlight-match,:host-context(.dark) .option-label .highlight-match{color:#93c5fd;background-color:#3b82f64d}:host-context([data-theme=dark]) .chips-create-tag-action,:host-context(.dark) .chips-create-tag-action{border-top-color:#334155;color:#60a5fa;background-color:#3b82f61f}:host-context([data-theme=dark]) .chips-create-tag-action:hover,:host-context(.dark) .chips-create-tag-action:hover{background-color:#3b82f638}:host-context([data-theme=dark]) .chips-create-tag-action kbd,:host-context(.dark) .chips-create-tag-action kbd{background-color:#0f172a;border-color:#334155;color:#94a3b8}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], searching: [{ type: i0.Input, args: [{ isSignal: true, alias: "searching", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], valueWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueWith", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], highlightMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightMatch", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], chipVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipVariant", required: false }] }], chipColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipColor", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], chipAdd: [{ type: i0.Output, args: ["chipAdd"] }], chipRemove: [{ type: i0.Output, args: ["chipRemove"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], dropdownEl: [{
+                type: ViewChild,
+                args: ['dropdownEl']
+            }] } });
+
+class TalosChipsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsModule, imports: [TalosChipsComponent, TalosChipComponent], exports: [TalosChipsComponent, TalosChipComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosChipsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosChipsComponent, TalosChipComponent],
+                    exports: [TalosChipsComponent, TalosChipComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosChipComponent, TalosChipsComponent, TalosChipsModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-chips.mjs.map