@m1z23r/ngx-ui 1.1.46 → 1.1.48

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -3946,6 +3946,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-slider', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-slider-wrapper\" [class]=\"sliderClasses()\" [class.ui-slider-wrapper--disabled]=\"disabled()\">\n  @if (label()) {\n    <label class=\"ui-slider__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n    </label>\n  }\n  <div class=\"ui-slider__container\" [style.--fill]=\"fillPercent()\">\n    <input\n      class=\"ui-slider\"\n      type=\"range\"\n      [id]=\"inputId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"value\"\n      (change)=\"valueCommit.emit(value())\"\n    />\n  </div>\n  @if (showValue()) {\n    <span class=\"ui-slider__value\">{{ value() }}</span>\n  }\n</div>\n", styles: [":host{display:block}.ui-slider-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-slider__value{font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-slider__container{display:flex;align-items:center}.ui-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;margin:0;padding:0}.ui-slider::-webkit-slider-runnable-track{width:100%;border-radius:var(--ui-radius-xl);background:linear-gradient(to right,var(--ui-primary) 0%,var(--ui-primary) var(--fill, 0%),var(--ui-bg-tertiary) var(--fill, 0%),var(--ui-bg-tertiary) 100%);border:none}.ui-slider::-moz-range-track{width:100%;border-radius:var(--ui-radius-xl);background:var(--ui-bg-tertiary);border:none}.ui-slider::-moz-range-progress{border-radius:var(--ui-radius-xl);background:var(--ui-primary)}.ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-slider::-moz-range-thumb{border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-slider:focus{outline:none}.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:not(:disabled):hover::-webkit-slider-thumb{transform:scale(1.1)}.ui-slider:not(:disabled):hover::-moz-range-thumb{transform:scale(1.1)}.ui-slider:not(:disabled):active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:not(:disabled):active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider--sm .ui-slider{height:20px}.ui-slider--sm .ui-slider::-webkit-slider-runnable-track{height:4px}.ui-slider--sm .ui-slider::-moz-range-track{height:4px}.ui-slider--sm .ui-slider::-moz-range-progress{height:4px}.ui-slider--sm .ui-slider::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}.ui-slider--sm .ui-slider::-moz-range-thumb{width:14px;height:14px}.ui-slider--md .ui-slider{height:24px}.ui-slider--md .ui-slider::-webkit-slider-runnable-track{height:6px}.ui-slider--md .ui-slider::-moz-range-track{height:6px}.ui-slider--md .ui-slider::-moz-range-progress{height:6px}.ui-slider--md .ui-slider::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px}.ui-slider--md .ui-slider::-moz-range-thumb{width:18px;height:18px}.ui-slider--lg .ui-slider{height:32px}.ui-slider--lg .ui-slider::-webkit-slider-runnable-track{height:8px}.ui-slider--lg .ui-slider::-moz-range-track{height:8px}.ui-slider--lg .ui-slider::-moz-range-progress{height:8px}.ui-slider--lg .ui-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px}.ui-slider--lg .ui-slider::-moz-range-thumb{width:24px;height:24px}.ui-slider-wrapper--disabled{opacity:.5}.ui-slider-wrapper--disabled .ui-slider{cursor:not-allowed}\n"] }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }] } });
 
+const MS_PER_MINUTE = 60_000;
+const MS_PER_DAY = 86_400_000;
+const DEFAULT_STEP = {
+    time: 15 * MS_PER_MINUTE,
+    date: MS_PER_DAY,
+    datetime: 30 * MS_PER_MINUTE,
+};
+class RangeSliderComponent {
+    min = input.required(...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input.required(...(ngDevMode ? [{ debugName: "max" }] : []));
+    mode = input('datetime', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    bubbles = input('always', ...(ngDevMode ? [{ debugName: "bubbles" }] : []));
+    showRange = input(false, ...(ngDevMode ? [{ debugName: "showRange" }] : []));
+    format = input(null, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueCommit = output();
+    trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
+    startMs = signal(0, ...(ngDevMode ? [{ debugName: "startMs" }] : []));
+    endMs = signal(0, ...(ngDevMode ? [{ debugName: "endMs" }] : []));
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
+    hoveredThumb = signal(null, ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : []));
+    lastEmitted = null;
+    minMs = computed(() => this.min().getTime(), ...(ngDevMode ? [{ debugName: "minMs" }] : []));
+    maxMs = computed(() => this.max().getTime(), ...(ngDevMode ? [{ debugName: "maxMs" }] : []));
+    range = computed(() => Math.max(0, this.maxMs() - this.minMs()), ...(ngDevMode ? [{ debugName: "range" }] : []));
+    effectiveStep = computed(() => {
+        const explicit = this.step();
+        return explicit && explicit > 0 ? explicit : DEFAULT_STEP[this.mode()];
+    }, ...(ngDevMode ? [{ debugName: "effectiveStep" }] : []));
+    startPercent = computed(() => this.toPercent(this.startMs()), ...(ngDevMode ? [{ debugName: "startPercent" }] : []));
+    endPercent = computed(() => this.toPercent(this.endMs()), ...(ngDevMode ? [{ debugName: "endPercent" }] : []));
+    fillStyle = computed(() => {
+        const start = this.startPercent();
+        const end = this.endPercent();
+        return { left: `${start}%`, width: `${Math.max(0, end - start)}%` };
+    }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
+    startLabel = computed(() => this.formatMs(this.startMs()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
+    endLabel = computed(() => this.formatMs(this.endMs()), ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
+    bubbleVisible = computed(() => {
+        const mode = this.bubbles();
+        if (mode === 'never')
+            return { start: false, end: false };
+        if (mode === 'always')
+            return { start: true, end: true };
+        // 'active' — visible when dragged, hovered, or focused
+        const active = (t) => this.dragging() === t || this.focusedThumb() === t || this.hoveredThumb() === t;
+        return { start: active('start'), end: active('end') };
+    }, ...(ngDevMode ? [{ debugName: "bubbleVisible" }] : []));
+    rootClasses = computed(() => {
+        const classes = ['ui-range-slider', `ui-range-slider--${this.size()}`];
+        if (this.disabled())
+            classes.push('ui-range-slider--disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : []));
+    constructor() {
+        // Sync external value → internal thumb positions. Falls back to [min, max] when null.
+        effect(() => {
+            const min = this.minMs();
+            const max = this.maxMs();
+            const v = this.value();
+            if (v) {
+                this.startMs.set(this.snap(this.clamp(v.start.getTime())));
+                this.endMs.set(this.snap(this.clamp(v.end.getTime())));
+                this.lastEmitted = v;
+            }
+            else {
+                this.startMs.set(min);
+                this.endMs.set(max);
+                this.lastEmitted = null;
+            }
+        });
+    }
+    /** Push current thumb state into the value model (live, during interaction). */
+    writeValue() {
+        const next = {
+            start: this.materialize(this.startMs()),
+            end: this.materialize(this.endMs()),
+        };
+        const prev = this.lastEmitted;
+        if (prev &&
+            prev.start.getTime() === next.start.getTime() &&
+            prev.end.getTime() === next.end.getTime()) {
+            return;
+        }
+        this.lastEmitted = next;
+        this.value.set(next);
+    }
+    // -- Pointer handling -------------------------------------------------
+    onThumbPointerDown(event, thumb) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        const target = event.target;
+        target.setPointerCapture(event.pointerId);
+        this.dragging.set(thumb);
+        this.focusedThumb.set(thumb);
+        target.focus();
+    }
+    onThumbPointerMove(event, thumb) {
+        if (this.dragging() !== thumb)
+            return;
+        event.preventDefault();
+        const ms = this.pixelToMs(event.clientX);
+        this.setThumb(thumb, ms);
+    }
+    onThumbPointerUp(event, thumb) {
+        if (this.dragging() !== thumb)
+            return;
+        const target = event.target;
+        if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+        }
+        this.dragging.set(null);
+        this.commit();
+    }
+    onTrackPointerDown(event) {
+        if (this.disabled())
+            return;
+        if (event.target.dataset['thumb'])
+            return; // ignore thumb hits
+        const ms = this.pixelToMs(event.clientX);
+        const thumb = Math.abs(ms - this.startMs()) <= Math.abs(ms - this.endMs()) ? 'start' : 'end';
+        this.setThumb(thumb, ms);
+        this.commit();
+    }
+    // -- Keyboard ---------------------------------------------------------
+    onThumbKeyDown(event, thumb) {
+        if (this.disabled())
+            return;
+        const step = this.effectiveStep();
+        const big = step * 10;
+        let delta = 0;
+        let target = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                delta = event.shiftKey ? -big : -step;
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                delta = event.shiftKey ? big : step;
+                break;
+            case 'Home':
+                target = thumb === 'start' ? this.minMs() : this.startMs();
+                break;
+            case 'End':
+                target = thumb === 'end' ? this.maxMs() : this.endMs();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target !== null) {
+            this.setThumb(thumb, target);
+        }
+        else {
+            const current = thumb === 'start' ? this.startMs() : this.endMs();
+            this.setThumb(thumb, current + delta);
+        }
+    }
+    onThumbKeyUp(event) {
+        const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+        if (keys.includes(event.key)) {
+            this.commit();
+        }
+    }
+    onThumbFocus(thumb) {
+        this.focusedThumb.set(thumb);
+    }
+    onThumbBlur() {
+        this.focusedThumb.set(null);
+    }
+    onThumbEnter(thumb) {
+        this.hoveredThumb.set(thumb);
+    }
+    onThumbLeave() {
+        this.hoveredThumb.set(null);
+    }
+    // -- Internal helpers -------------------------------------------------
+    setThumb(thumb, msRaw) {
+        const snapped = this.snap(this.clamp(msRaw));
+        let changed = false;
+        if (thumb === 'start') {
+            const next = Math.min(snapped, this.endMs());
+            if (next !== this.startMs()) {
+                this.startMs.set(next);
+                changed = true;
+            }
+        }
+        else {
+            const next = Math.max(snapped, this.startMs());
+            if (next !== this.endMs()) {
+                this.endMs.set(next);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.writeValue();
+    }
+    commit() {
+        if (this.lastEmitted) {
+            this.valueCommit.emit(this.lastEmitted);
+        }
+    }
+    clamp(ms) {
+        return Math.min(this.maxMs(), Math.max(this.minMs(), ms));
+    }
+    snap(ms) {
+        const min = this.minMs();
+        const max = this.maxMs();
+        const step = this.effectiveStep();
+        if (step <= 0 || min >= max)
+            return ms;
+        const offset = ms - min;
+        const snapped = min + Math.round(offset / step) * step;
+        if (snapped > max)
+            return max;
+        if (snapped < min)
+            return min;
+        return snapped;
+    }
+    toPercent(ms) {
+        const range = this.range();
+        if (range <= 0)
+            return 0;
+        return ((ms - this.minMs()) / range) * 100;
+    }
+    pixelToMs(clientX) {
+        const el = this.trackEl()?.nativeElement;
+        if (!el)
+            return this.minMs();
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this.minMs();
+        const ratio = (clientX - rect.left) / rect.width;
+        const clamped = Math.min(1, Math.max(0, ratio));
+        return this.minMs() + clamped * this.range();
+    }
+    /**
+     * Convert internal ms to a Date appropriate for the current mode.
+     * date mode normalizes time-of-day to that of `min`.
+     */
+    materialize(ms) {
+        if (this.mode() === 'date') {
+            const minDate = this.min();
+            const d = new Date(ms);
+            d.setHours(minDate.getHours(), minDate.getMinutes(), minDate.getSeconds(), minDate.getMilliseconds());
+            return d;
+        }
+        return new Date(ms);
+    }
+    // -- Formatting -------------------------------------------------------
+    formatMs(ms) {
+        const date = new Date(ms);
+        const override = this.format();
+        if (override)
+            return this.applyFormat(date, override);
+        switch (this.mode()) {
+            case 'time':
+                return this.effectiveStep() < MS_PER_MINUTE
+                    ? `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+                    : `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+            case 'date':
+                return new Intl.DateTimeFormat(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                }).format(date);
+            case 'datetime':
+                return `${new Intl.DateTimeFormat(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                }).format(date)}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+        }
+    }
+    /** Tiny formatter for common tokens: yyyy MM dd HH mm ss MMM d. */
+    applyFormat(date, fmt) {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return fmt
+            .replace(/yyyy/g, String(date.getFullYear()))
+            .replace(/MMM/g, months[date.getMonth()])
+            .replace(/MM/g, pad(date.getMonth() + 1))
+            .replace(/dd/g, pad(date.getDate()))
+            .replace(/d/g, String(date.getDate()))
+            .replace(/HH/g, pad(date.getHours()))
+            .replace(/mm/g, pad(date.getMinutes()))
+            .replace(/ss/g, pad(date.getSeconds()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RangeSliderComponent, isStandalone: true, selector: "ui-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n  @if (label()) {\n    <label class=\"ui-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"minMs()\"\n      [attr.aria-valuemax]=\"endMs()\"\n      [attr.aria-valuenow]=\"startMs()\"\n      [attr.aria-valuetext]=\"startLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"Start\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"startPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n      (pointermove)=\"onThumbPointerMove($event, 'start')\"\n      (pointerup)=\"onThumbPointerUp($event, 'start')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n      (pointerenter)=\"onThumbEnter('start')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'start')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('start')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.start) {\n        <span class=\"ui-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startMs()\"\n      [attr.aria-valuemax]=\"maxMs()\"\n      [attr.aria-valuenow]=\"endMs()\"\n      [attr.aria-valuetext]=\"endLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"End\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"endPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n      (pointermove)=\"onThumbPointerMove($event, 'end')\"\n      (pointerup)=\"onThumbPointerUp($event, 'end')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n      (pointerenter)=\"onThumbEnter('end')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'end')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('end')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.end) {\n        <span class=\"ui-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-range-slider__thumb{transform:translate(-50%,-50%)}.ui-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-range-slider-bubble-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n  @if (label()) {\n    <label class=\"ui-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"minMs()\"\n      [attr.aria-valuemax]=\"endMs()\"\n      [attr.aria-valuenow]=\"startMs()\"\n      [attr.aria-valuetext]=\"startLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"Start\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"startPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n      (pointermove)=\"onThumbPointerMove($event, 'start')\"\n      (pointerup)=\"onThumbPointerUp($event, 'start')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n      (pointerenter)=\"onThumbEnter('start')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'start')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('start')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.start) {\n        <span class=\"ui-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startMs()\"\n      [attr.aria-valuemax]=\"maxMs()\"\n      [attr.aria-valuenow]=\"endMs()\"\n      [attr.aria-valuetext]=\"endLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"End\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"endPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n      (pointermove)=\"onThumbPointerMove($event, 'end')\"\n      (pointerup)=\"onThumbPointerUp($event, 'end')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n      (pointerenter)=\"onThumbEnter('end')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'end')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('end')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.end) {\n        <span class=\"ui-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-range-slider__thumb{transform:translate(-50%,-50%)}.ui-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-range-slider-bubble-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+function pad(n) {
+    return n < 10 ? `0${n}` : String(n);
+}
+
 /** Directive to mark a custom chip template */
 class ChipTemplateDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -3969,6 +4274,11 @@ class ChipInputComponent {
     allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : []));
     /** When false, only emits the `added` event without adding to the array (useful for custom object chips) */
     autoAdd = input(true, ...(ngDevMode ? [{ debugName: "autoAdd" }] : []));
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
+    strict = input(false, ...(ngDevMode ? [{ debugName: "strict" }] : []));
+    minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
     /** The array of chip values */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Emitted when a chip is added */
@@ -3977,9 +4287,24 @@ class ChipInputComponent {
     removed = output();
     /** Custom chip template */
     chipTemplate = contentChild(ChipTemplateDirective, { ...(ngDevMode ? { debugName: "chipTemplate" } : {}), read: TemplateRef });
+    optionTemplate = contentChild(OptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
     inputRef;
+    triggerRef;
+    dropdownRef;
     inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : []));
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : []));
+    asyncError = signal(null, ...(ngDevMode ? [{ debugName: "asyncError" }] : []));
+    labelCache = new Map();
+    elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
+    asyncSearchAbortController = null;
+    debounceTimer = null;
+    blurCloseTimer = null;
+    positionCleanup = null;
     containerClasses = computed(() => {
         const classes = [
             `ui-chip-input--${this.variant()}`,
@@ -3993,27 +4318,115 @@ class ChipInputComponent {
             classes.push('ui-chip-input--error');
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    isAsyncMode = computed(() => this.asyncSearch() !== null, ...(ngDevMode ? [{ debugName: "isAsyncMode" }] : []));
+    normalizedSuggestions = computed(() => {
+        return this.suggestions().map((s) => typeof s === 'string' ? { label: s, value: s } : s);
+    }, ...(ngDevMode ? [{ debugName: "normalizedSuggestions" }] : []));
+    visibleSuggestions = computed(() => {
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        const selected = this.value();
+        const query = this.inputValue().toLowerCase().trim();
+        const notPicked = source.filter((opt) => !selected.includes(opt.value));
+        if (this.isAsyncMode())
+            return notPicked;
+        if (!query)
+            return notPicked;
+        return notPicked.filter((opt) => opt.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : []));
+    exactMatchExists = computed(() => {
+        const query = this.inputValue().toLowerCase().trim();
+        if (!query)
+            return true;
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        return source.some((opt) => opt.label.toLowerCase() === query);
+    }, ...(ngDevMode ? [{ debugName: "exactMatchExists" }] : []));
+    showCreateRow = computed(() => {
+        return (!this.strict() &&
+            this.inputValue().trim().length > 0 &&
+            !this.exactMatchExists());
+    }, ...(ngDevMode ? [{ debugName: "showCreateRow" }] : []));
+    ngOnDestroy() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
+        }
+        this.removePositionListeners();
+        this.cancelAsyncSearch();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
     onContainerClick() {
         if (!this.disabled()) {
             this.inputRef?.nativeElement?.focus();
         }
     }
     onInputKeydown(event) {
-        const value = this.inputValue().trim();
+        const trimmed = this.inputValue().trim();
         switch (event.key) {
-            case 'Enter':
+            case 'Enter': {
                 event.preventDefault();
-                if (value) {
-                    this.addChip(value);
+                const focused = this.focusedIndex();
+                const visible = this.visibleSuggestions();
+                if (focused >= 0 && focused < visible.length) {
+                    this.addSuggestion(visible[focused]);
+                }
+                else if (!this.strict() && trimmed) {
+                    this.addChip(trimmed);
+                    setTimeout(() => this.updateDropdownPosition());
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                if (!this.isOpen()) {
+                    this.open();
+                    return;
                 }
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let next = this.focusedIndex() + 1;
+                while (next < visible.length && visible[next].disabled)
+                    next++;
+                if (next < visible.length)
+                    this.focusedIndex.set(next);
+                break;
+            }
+            case 'ArrowUp': {
+                if (!this.isOpen())
+                    return;
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let prev = this.focusedIndex() - 1;
+                while (prev >= 0 && visible[prev].disabled)
+                    prev--;
+                if (prev >= 0)
+                    this.focusedIndex.set(prev);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
                 break;
             case 'Backspace':
-                if (!value && this.value().length > 0) {
+                if (!trimmed && this.value().length > 0) {
                     this.removeChip(this.value()[this.value().length - 1]);
                 }
                 break;
         }
     }
+    onInputChange(value) {
+        this.inputValue.set(value);
+        this.focusedIndex.set(-1);
+        if (!this.isOpen())
+            this.open();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(value);
+        }
+        else {
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
     addChip(chipValue) {
         const current = this.value();
         // For string chips, check duplicates
@@ -4026,8 +4439,29 @@ class ChipInputComponent {
         this.inputValue.set('');
         this.added.emit(chipValue);
     }
+    addSuggestion(option) {
+        if (option.disabled)
+            return;
+        const current = this.value();
+        if (!this.allowDuplicates() && current.includes(option.value))
+            return;
+        if (option.label !== String(option.value)) {
+            this.labelCache.set(option.value, option.label);
+        }
+        if (this.autoAdd()) {
+            this.value.set([...current, option.value]);
+        }
+        this.inputValue.set('');
+        this.added.emit(option.label);
+        this.focusedIndex.set(-1);
+        setTimeout(() => {
+            this.updateDropdownPosition();
+            this.inputRef?.nativeElement?.focus();
+        });
+    }
     removeChip(chipValue) {
         this.value.set(this.value().filter((v) => v !== chipValue));
+        this.labelCache.delete(chipValue);
         this.removed.emit(chipValue);
         // Refocus input after removal
         setTimeout(() => this.inputRef?.nativeElement?.focus());
@@ -4041,23 +4475,202 @@ class ChipInputComponent {
     }
     /** Get display text for a chip (for default template) */
     getChipDisplay(chip) {
-        return String(chip);
+        return this.labelCache.get(chip) ?? String(chip);
     }
     onFocus() {
         this.isFocused.set(true);
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+        this.open();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.blurCloseTimer = setTimeout(() => {
+            this.close();
+            this.blurCloseTimer = null;
+        }, 150);
+    }
+    onDropdownMousedown(event) {
+        event.preventDefault();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.focusedIndex.set(-1);
+        this.portalDropdown();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(this.inputValue());
+        }
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.unportalDropdown();
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.cancelAsyncSearch();
+        this.asyncLoading.set(false);
+        this.asyncError.set(null);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target) &&
+            !this.dropdownRef?.nativeElement?.contains(target)) {
+            this.close();
+        }
+    }
+    portalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        dropdown.style.display = 'block';
+        this.document.body.appendChild(dropdown);
+        this.updateDropdownPosition();
+        this.addPositionListeners();
+    }
+    unportalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        if (dropdown.parentElement === this.document.body) {
+            const wrapper = this.elementRef.nativeElement.querySelector('.ui-chip-input-wrapper');
+            if (wrapper)
+                wrapper.appendChild(dropdown);
+        }
+        dropdown.style.display = '';
+        dropdown.style.position = '';
+        dropdown.style.top = '';
+        dropdown.style.left = '';
+        dropdown.style.bottom = '';
+        dropdown.style.width = '';
+        dropdown.style.zIndex = '';
+        dropdown.style.margin = '';
+        this.removePositionListeners();
+    }
+    updateDropdownPosition() {
+        const trigger = this.triggerRef?.nativeElement;
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!trigger || !dropdown)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const dropdownHeight = dropdown.scrollHeight;
+        const gap = 4;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const openAbove = spaceBelow < dropdownHeight + gap && spaceAbove > spaceBelow;
+        dropdown.style.position = 'fixed';
+        dropdown.style.width = `${triggerRect.width}px`;
+        dropdown.style.left = `${triggerRect.left}px`;
+        dropdown.style.zIndex = '99999';
+        dropdown.style.margin = '0';
+        if (openAbove) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - triggerRect.top + gap}px`;
+        }
+        else {
+            dropdown.style.top = `${triggerRect.bottom + gap}px`;
+            dropdown.style.bottom = 'auto';
+        }
+    }
+    addPositionListeners() {
+        const update = () => {
+            if (this.isOpen())
+                this.updateDropdownPosition();
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        this.positionCleanup = () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }
+    removePositionListeners() {
+        this.positionCleanup?.();
+        this.positionCleanup = null;
+    }
+    triggerAsyncSearch(query) {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
+        const trimmed = query.trim();
+        if (trimmed.length < this.minSearchLength()) {
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            return;
+        }
+        this.asyncLoading.set(true);
+        this.asyncError.set(null);
+        this.debounceTimer = setTimeout(() => {
+            this.executeAsyncSearch(trimmed);
+        }, this.debounceTime());
+    }
+    async executeAsyncSearch(query) {
+        const searchFn = this.asyncSearch();
+        if (!searchFn)
+            return;
+        this.asyncSearchAbortController = new AbortController();
+        const signal = this.asyncSearchAbortController.signal;
+        try {
+            const results = await searchFn(query);
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set(results);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            setTimeout(() => this.updateDropdownPosition());
+        }
+        catch (error) {
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(error instanceof Error ? error.message : 'Search failed');
+            this.focusedIndex.set(-1);
+        }
+    }
+    cancelAsyncSearch() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n            <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n          </svg>\n          <span>Searching...</span>\n        </div>\n      } @else if (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__error-message\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>{{ asyncError() }}</span>\n        </div>\n      } @else {\n        @for (option of visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n        </svg>\n        Create \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputRef: [{
+            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n            <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n          </svg>\n          <span>Searching...</span>\n        </div>\n      } @else if (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__error-message\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>{{ asyncError() }}</span>\n        </div>\n      } @else {\n        @for (option of visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n        </svg>\n        Create \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:.875rem}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], strict: [{ type: i0.Input, args: [{ isSignal: true, alias: "strict", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerRef', { static: true }]
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdownRef', { static: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class DatepickerComponent {
@@ -6677,5 +7290,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map