@tailng-ui/primitives 0.1.0

package/src/lib/form/listbox/option.directive.js

@@ -0,0 +1,109 @@
+import { __decorate } from "tslib";
+// option.directive.ts
+import { Directive, ElementRef, HostBinding, HostListener, effect, inject, input, signal, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+import { TNG_LISTBOX } from './tokens';
+const createId = createTngIdFactory('tng-option');
+let TngOptionDirective = class TngOptionDirective {
+    tngValue = input();
+    disabled = input(false);
+    el = inject((ElementRef));
+    listbox = inject(TNG_LISTBOX);
+    id = createId();
+    // gate to ensure we only push updates after initial registration
+    registered = signal(false);
+    // ✅ effect is created in injection context (field initializer)
+    _syncDisabled = effect(() => {
+        if (!this.registered())
+            return;
+        this.listbox.updateOptionDisabled(this.id, this.disabled());
+    });
+    role = 'option';
+    get hostId() {
+        return this.id;
+    }
+    get ariaSelected() {
+        return this.isSelected() ? 'true' : 'false';
+    }
+    get ariaDisabled() {
+        return this.disabled() ? 'true' : null;
+    }
+    // ✅ Tailwind-friendly state attributes (presence based)
+    get dataActive() {
+        return this.listbox.isActive(this.id) ? '' : null;
+    }
+    get dataSelected() {
+        return this.isSelected() ? '' : null;
+    }
+    get dataDisabled() {
+        return this.disabled() ? '' : null;
+    }
+    ngAfterViewInit() {
+        const value = this.tngValue();
+        if (value === undefined)
+            return;
+        const text = this.el.nativeElement.textContent?.trim() ?? '';
+        // pass text for typeahead
+        this.listbox.registerOption(this.id, value, this.disabled(), text, this.el.nativeElement);
+        this.registered.set(true);
+    }
+    ngOnDestroy() {
+        this.listbox.unregisterOption(this.id);
+        this.registered.set(false);
+        // Angular will destroy directive + tear down effect automatically
+    }
+    onPointerDown(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (event.button !== 0)
+            return;
+        // Prevent focus from moving / text selection, keep listbox behavior stable.
+        event.preventDefault();
+        this.listbox.handleOptionClick(this.id, event.shiftKey);
+    }
+    isSelected() {
+        if (this.listbox.isSelected(this.id))
+            return true;
+        if (this.disabled())
+            return false;
+        const value = this.tngValue();
+        if (value === undefined)
+            return false;
+        return this.listbox.isValueSelected(value);
+    }
+};
+__decorate([
+    HostBinding('attr.role')
+], TngOptionDirective.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngOptionDirective.prototype, "hostId", null);
+__decorate([
+    HostBinding('attr.aria-selected')
+], TngOptionDirective.prototype, "ariaSelected", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngOptionDirective.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.data-active')
+], TngOptionDirective.prototype, "dataActive", null);
+__decorate([
+    HostBinding('attr.data-selected')
+], TngOptionDirective.prototype, "dataSelected", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngOptionDirective.prototype, "dataDisabled", null);
+__decorate([
+    HostListener('pointerdown', ['$event'])
+], TngOptionDirective.prototype, "onPointerDown", null);
+TngOptionDirective = __decorate([
+    Directive({
+        selector: '[tngOption]',
+        standalone: true,
+    })
+], TngOptionDirective);
+export { TngOptionDirective };
+//# sourceMappingURL=option.directive.js.map

package/src/lib/form/listbox/option.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/option.directive.ts"],"names":[],"mappings":";AAAA,sBAAsB;AACtB,OAAO,EAEL,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EAEZ,MAAM,EACN,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAM3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAkB;IAC7B,QAAQ,GAAG,KAAK,EAAiB,CAAC;IAClC,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;IAEzB,EAAE,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IACrC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAC9B,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExB,iEAAiE;IACzD,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,+DAA+D;IAC9C,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAGH,IAAI,GAAG,QAAQ,CAAC;IAGhB,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC;IAGD,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9C,CAAC;IAGD,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACzC,CAAC;IAED,wDAAwD;IAExD,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACpD,CAAC;IAGD,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACvC,CAAC;IAGD,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrC,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAEhC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC7D,0BAA0B;QAC1B,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;QAE1F,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC3B,kEAAkE;IACpE,CAAC;IAGD,aAAa,CAAC,KAAmB;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/B,4EAA4E;QAC5E,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO,IAAI,CAAC;QAClD,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO,KAAK,CAAC;QAElC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,KAAK,CAAC;QAEtC,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;CACF,CAAA;AA1EC;IADC,WAAW,CAAC,WAAW,CAAC;gDACT;AAGhB;IADC,WAAW,CAAC,SAAS,CAAC;gDAGtB;AAGD;IADC,WAAW,CAAC,oBAAoB,CAAC;sDAGjC;AAGD;IADC,WAAW,CAAC,oBAAoB,CAAC;sDAGjC;AAID;IADC,WAAW,CAAC,kBAAkB,CAAC;oDAG/B;AAGD;IADC,WAAW,CAAC,oBAAoB,CAAC;sDAGjC;AAGD;IADC,WAAW,CAAC,oBAAoB,CAAC;sDAGjC;AAoBD;IADC,YAAY,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC;uDAavC;AAjFU,kBAAkB;IAJ9B,SAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,UAAU,EAAE,IAAI;KACjB,CAAC;GACW,kBAAkB,CA4F9B","sourcesContent":["// option.directive.ts\nimport {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  OnDestroy,\n  effect,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { createTngIdFactory } from '@tailng-ui/cdk';\nimport { TNG_LISTBOX } from './tokens';\n\nconst createId = createTngIdFactory('tng-option');\n\n@Directive({\n  selector: '[tngOption]',\n  standalone: true,\n})\nexport class TngOptionDirective<T = unknown> implements AfterViewInit, OnDestroy {\n  tngValue = input<T | undefined>();\n  disabled = input<boolean>(false);\n\n  private el = inject(ElementRef<HTMLElement>);\n  private listbox = inject(TNG_LISTBOX);\n  private id = createId();\n\n  // gate to ensure we only push updates after initial registration\n  private registered = signal(false);\n\n  // ✅ effect is created in injection context (field initializer)\n  private readonly _syncDisabled = effect(() => {\n    if (!this.registered()) return;\n    this.listbox.updateOptionDisabled(this.id, this.disabled());\n  });\n\n  @HostBinding('attr.role')\n  role = 'option';\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id;\n  }\n\n  @HostBinding('attr.aria-selected')\n  get ariaSelected(): 'true' | 'false' {\n    return this.isSelected() ? 'true' : 'false';\n  }\n\n  @HostBinding('attr.aria-disabled')\n  get ariaDisabled(): 'true' | null {\n    return this.disabled() ? 'true' : null;\n  }\n\n  // ✅ Tailwind-friendly state attributes (presence based)\n  @HostBinding('attr.data-active')\n  get dataActive(): '' | null {\n    return this.listbox.isActive(this.id) ? '' : null;\n  }\n\n  @HostBinding('attr.data-selected')\n  get dataSelected(): '' | null {\n    return this.isSelected() ? '' : null;\n  }\n\n  @HostBinding('attr.data-disabled')\n  get dataDisabled(): '' | null {\n    return this.disabled() ? '' : null;\n  }\n\n  ngAfterViewInit() {\n    const value = this.tngValue();\n    if (value === undefined) return;\n\n    const text = this.el.nativeElement.textContent?.trim() ?? '';\n    // pass text for typeahead\n    this.listbox.registerOption(this.id, value, this.disabled(), text, this.el.nativeElement);\n\n    this.registered.set(true);\n  }\n\n  ngOnDestroy() {\n    this.listbox.unregisterOption(this.id);\n    this.registered.set(false);\n    // Angular will destroy directive + tear down effect automatically\n  }\n\n  @HostListener('pointerdown', ['$event'])\n  onPointerDown(event: PointerEvent) {\n    if (this.disabled()) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    if (event.button !== 0) return;\n\n    // Prevent focus from moving / text selection, keep listbox behavior stable.\n    event.preventDefault();\n\n    this.listbox.handleOptionClick(this.id, event.shiftKey);\n  }\n\n  private isSelected(): boolean {\n    if (this.listbox.isSelected(this.id)) return true;\n    if (this.disabled()) return false;\n\n    const value = this.tngValue();\n    if (value === undefined) return false;\n\n    return this.listbox.isValueSelected(value);\n  }\n}\n"]}

package/src/lib/form/listbox/tokens.d.ts

@@ -0,0 +1,14 @@
+import { InjectionToken } from '@angular/core';
+import type { TngListboxDirective } from './listbox.directive';
+export declare const TNG_LISTBOX: InjectionToken<TngListboxDirective<any>>;
+/** Optional override for listbox typeahead behavior. If provided, wins over the input(). */
+export declare const TNG_LISTBOX_FORCE_TYPEAHEAD: InjectionToken<boolean>;
+/** Optional override for listbox multiple behavior. If provided, wins over the input(). */
+export declare const TNG_LISTBOX_FORCE_MULTIPLE: InjectionToken<boolean>;
+/**
+ * When true, unregistering options should not mutate the external listbox value.
+ * This is useful for filterable composites where options can temporarily unmount
+ * while the controlled value should remain authoritative.
+ */
+export declare const TNG_LISTBOX_PRESERVE_VALUE_ON_UNREGISTER: InjectionToken<boolean>;
+//# sourceMappingURL=tokens.d.ts.map

package/src/lib/form/listbox/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,eAAO,MAAM,WAAW,0CACqC,CAAC;AAE9D,4FAA4F;AAC5F,eAAO,MAAM,2BAA2B,yBACoB,CAAC;AAE7D,2FAA2F;AAC3F,eAAO,MAAM,0BAA0B,yBACoB,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,wCAAwC,yBACoB,CAAC"}

package/src/lib/form/listbox/tokens.js

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+export const TNG_LISTBOX = new InjectionToken('TNG_LISTBOX');
+/** Optional override for listbox typeahead behavior. If provided, wins over the input(). */
+export const TNG_LISTBOX_FORCE_TYPEAHEAD = new InjectionToken('TNG_LISTBOX_FORCE_TYPEAHEAD');
+/** Optional override for listbox multiple behavior. If provided, wins over the input(). */
+export const TNG_LISTBOX_FORCE_MULTIPLE = new InjectionToken('TNG_LISTBOX_FORCE_MULTIPLE');
+/**
+ * When true, unregistering options should not mutate the external listbox value.
+ * This is useful for filterable composites where options can temporarily unmount
+ * while the controlled value should remain authoritative.
+ */
+export const TNG_LISTBOX_PRESERVE_VALUE_ON_UNREGISTER = new InjectionToken('TNG_LISTBOX_PRESERVE_VALUE_ON_UNREGISTER');
+//# sourceMappingURL=tokens.js.map

package/src/lib/form/listbox/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,MAAM,CAAC,MAAM,WAAW,GACtB,IAAI,cAAc,CAA2B,aAAa,CAAC,CAAC;AAE9D,4FAA4F;AAC5F,MAAM,CAAC,MAAM,2BAA2B,GACtC,IAAI,cAAc,CAAU,6BAA6B,CAAC,CAAC;AAE7D,2FAA2F;AAC3F,MAAM,CAAC,MAAM,0BAA0B,GACrC,IAAI,cAAc,CAAU,4BAA4B,CAAC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,CAAC,MAAM,wCAAwC,GACnD,IAAI,cAAc,CAAU,0CAA0C,CAAC,CAAC","sourcesContent":["import { InjectionToken } from '@angular/core';\nimport type { TngListboxDirective } from './listbox.directive';\n\nexport const TNG_LISTBOX =\n  new InjectionToken<TngListboxDirective<any>>('TNG_LISTBOX');\n\n/** Optional override for listbox typeahead behavior. If provided, wins over the input(). */\nexport const TNG_LISTBOX_FORCE_TYPEAHEAD =\n  new InjectionToken<boolean>('TNG_LISTBOX_FORCE_TYPEAHEAD');\n\n/** Optional override for listbox multiple behavior. If provided, wins over the input(). */\nexport const TNG_LISTBOX_FORCE_MULTIPLE =\n  new InjectionToken<boolean>('TNG_LISTBOX_FORCE_MULTIPLE');\n\n/**\n * When true, unregistering options should not mutate the external listbox value.\n * This is useful for filterable composites where options can temporarily unmount\n * while the controlled value should remain authoritative.\n */\nexport const TNG_LISTBOX_PRESERVE_VALUE_ON_UNREGISTER =\n  new InjectionToken<boolean>('TNG_LISTBOX_PRESERVE_VALUE_ON_UNREGISTER');\n"]}

package/src/lib/form/multi-autocomplete/index.d.ts

@@ -0,0 +1,10 @@
+export * from './tng-multi-autocomplete';
+export * from './tng-multi-autocomplete.trigger';
+export * from './tng-multi-autocomplete.tokens';
+export * from './tng-multi-autocomplete.listbox';
+export * from './tng-multi-autocomplete.listbox.tokens';
+export * from './tng-multi-autocomplete.listbox.types';
+export * from './tng-multi-autocomplete.chip';
+export * from './tng-multi-autocomplete.content';
+export * from './tng-multi-autocomplete.overlay';
+//# sourceMappingURL=index.d.ts.map

package/src/lib/form/multi-autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC"}

package/src/lib/form/multi-autocomplete/index.js

@@ -0,0 +1,10 @@
+export * from './tng-multi-autocomplete';
+export * from './tng-multi-autocomplete.trigger';
+export * from './tng-multi-autocomplete.tokens';
+export * from './tng-multi-autocomplete.listbox';
+export * from './tng-multi-autocomplete.listbox.tokens';
+export * from './tng-multi-autocomplete.listbox.types';
+export * from './tng-multi-autocomplete.chip';
+export * from './tng-multi-autocomplete.content';
+export * from './tng-multi-autocomplete.overlay';
+//# sourceMappingURL=index.js.map

package/src/lib/form/multi-autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './tng-multi-autocomplete';\nexport * from './tng-multi-autocomplete.trigger';\nexport * from './tng-multi-autocomplete.tokens';\n\nexport * from './tng-multi-autocomplete.listbox';\nexport * from './tng-multi-autocomplete.listbox.tokens';\nexport * from './tng-multi-autocomplete.listbox.types';\n\nexport * from './tng-multi-autocomplete.chip';\nexport * from './tng-multi-autocomplete.content';\nexport * from './tng-multi-autocomplete.overlay';"]}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.d.ts

@@ -0,0 +1,11 @@
+export declare class TngMultiAutocompleteChip<T = unknown> {
+    private readonly multi;
+    private readonly el;
+    /** The value represented by this chip (needed for Delete/Backspace remove). */
+    readonly tngValue: import("@angular/core").InputSignal<T | null>;
+    protected readonly dataSlot: "multi-autocomplete-chip";
+    protected readonly tabIndex = -1;
+    focus(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+}
+//# sourceMappingURL=tng-multi-autocomplete.chip.d.ts.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.chip.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.ts"],"names":[],"mappings":"AAYA,qBAKa,wBAAwB,CAAC,CAAC,GAAG,OAAO;IAC/C,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA2D;IACjF,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IAEtD,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,gDAAyB;IAG1C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,yBAAyB,CAAU;IAGjE,SAAS,CAAC,QAAQ,CAAC,QAAQ,MAAM;IAEjC,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CAqFhD"}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.js

@@ -0,0 +1,98 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, inject, input, } from '@angular/core';
+import { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';
+let TngMultiAutocompleteChip = class TngMultiAutocompleteChip {
+    multi = inject(TNG_MULTI_AUTOCOMPLETE);
+    el = inject((ElementRef));
+    /** The value represented by this chip (needed for Delete/Backspace remove). */
+    tngValue = input(null);
+    dataSlot = 'multi-autocomplete-chip';
+    tabIndex = -1;
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    onKeydown(event) {
+        const host = this.multi.hostElement;
+        const chips = Array.from(host.querySelectorAll('[data-slot="multi-autocomplete-chip"]'));
+        const currentIndex = chips.indexOf(this.el.nativeElement);
+        if (currentIndex < 0)
+            return;
+        // ArrowLeft → previous chip (if any)
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            const prev = chips[currentIndex - 1];
+            prev?.focus();
+            return;
+        }
+        // ArrowRight → next chip else input trigger
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const next = chips[currentIndex + 1];
+            if (next) {
+                next.focus();
+                return;
+            }
+            const input = host.querySelector('[data-slot="multi-autocomplete-trigger"]');
+            input?.focus();
+            return;
+        }
+        // Delete / Backspace → remove this chip value
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (this.multi.disabled())
+                return;
+            const v = this.tngValue();
+            if (v == null)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            // Choose next focus target *before* removing
+            const prev = chips[currentIndex - 1] ?? null;
+            const next = chips[currentIndex + 1] ?? null;
+            const input = host.querySelector('[data-slot="multi-autocomplete-trigger"]');
+            // remove selected value
+            this.multi.remove(v);
+            // focus after DOM updates
+            queueMicrotask(() => {
+                (prev ?? next ?? input)?.focus?.();
+            });
+            return;
+        }
+        // Home → first chip
+        if (event.key === 'Home') {
+            event.preventDefault();
+            event.stopPropagation();
+            const first = chips[0] ?? null;
+            first?.focus();
+            return;
+        }
+        // End → last chip (if any) else input trigger
+        // End → input trigger (jump out of chips)
+        if (event.key === 'End') {
+            event.preventDefault();
+            event.stopPropagation();
+            const input = host.querySelector('[data-slot="multi-autocomplete-trigger"]');
+            input?.focus();
+            return;
+        }
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMultiAutocompleteChip.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngMultiAutocompleteChip.prototype, "tabIndex", void 0);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngMultiAutocompleteChip.prototype, "onKeydown", null);
+TngMultiAutocompleteChip = __decorate([
+    Directive({
+        selector: '[tngMultiAutocompleteChip]',
+        exportAs: 'tngMultiAutocompleteChip',
+        standalone: true,
+    })
+], TngMultiAutocompleteChip);
+export { TngMultiAutocompleteChip };
+//# sourceMappingURL=tng-multi-autocomplete.chip.js.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.chip.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.chip.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  inject,\n  input,\n} from '@angular/core';\n\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocomplete } from './tng-multi-autocomplete';\n\n@Directive({\n  selector: '[tngMultiAutocompleteChip]',\n  exportAs: 'tngMultiAutocompleteChip',\n  standalone: true,\n})\nexport class TngMultiAutocompleteChip<T = unknown> {\n  private readonly multi = inject<TngMultiAutocomplete<T>>(TNG_MULTI_AUTOCOMPLETE);\n  private readonly el = inject(ElementRef<HTMLElement>);\n\n  /** The value represented by this chip (needed for Delete/Backspace remove). */\n  readonly tngValue = input<T | null>(null);\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'multi-autocomplete-chip' as const;\n\n  @HostBinding('attr.tabindex')\n  protected readonly tabIndex = -1;\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    const host = this.multi.hostElement;\n\n    const chips = Array.from(\n      host.querySelectorAll('[data-slot=\"multi-autocomplete-chip\"]'),\n    ) as HTMLElement[];\n\n    const currentIndex = chips.indexOf(this.el.nativeElement);\n    if (currentIndex < 0) return;\n\n    // ArrowLeft → previous chip (if any)\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      event.stopPropagation();\n      const prev = chips[currentIndex - 1];\n      prev?.focus();\n      return;\n    }\n\n    // ArrowRight → next chip else input trigger\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const next = chips[currentIndex + 1];\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      const input = host.querySelector('[data-slot=\"multi-autocomplete-trigger\"]') as HTMLElement | null;\n      input?.focus();\n      return;\n    }\n\n    // Delete / Backspace → remove this chip value\n    if (event.key === 'Delete' || event.key === 'Backspace') {\n      if (this.multi.disabled()) return;\n\n      const v = this.tngValue();\n      if (v == null) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Choose next focus target *before* removing\n      const prev = chips[currentIndex - 1] ?? null;\n      const next = chips[currentIndex + 1] ?? null;\n      const input = host.querySelector('[data-slot=\"multi-autocomplete-trigger\"]') as HTMLElement | null;\n\n      // remove selected value\n      this.multi.remove(v);\n\n      // focus after DOM updates\n      queueMicrotask(() => {\n        (prev ?? next ?? input)?.focus?.();\n      });\n\n      return;\n    }\n\n    // Home → first chip\n    if (event.key === 'Home') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const first = chips[0] ?? null;\n      first?.focus();\n      return;\n    }\n\n    // End → last chip (if any) else input trigger\n        // End → input trigger (jump out of chips)\n    if (event.key === 'End') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const input = host.querySelector(\n        '[data-slot=\"multi-autocomplete-trigger\"]',\n      ) as HTMLElement | null;\n\n      input?.focus();\n      return;\n    }\n  }\n}"]}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.d.ts

@@ -0,0 +1,10 @@
+export declare class TngMultiAutocompleteContent {
+    private readonly multi;
+    private readonly destroyRef;
+    readonly id: string;
+    protected readonly dataSlot: "multi-autocomplete-content";
+    protected get hidden(): '' | null;
+    protected get ariaBusy(): 'true' | null;
+    constructor();
+}
+//# sourceMappingURL=tng-multi-autocomplete.content.d.ts.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.content.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.ts"],"names":[],"mappings":"AAOA,qBAKa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAwD;IAC9E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAGjD,QAAQ,CAAC,EAAE,SAAqB;IAGhC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,4BAA4B,CAAU;IAGpE,SAAS,KAAK,MAAM,IAAI,EAAE,GAAG,IAAI,CAEhC;IAGD,SAAS,KAAK,QAAQ,IAAI,MAAM,GAAG,IAAI,CAEtC;;CAQF"}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { DestroyRef, Directive, HostBinding, inject } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+import { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';
+const createContentId = createTngIdFactory('tng-multi-autocomplete-content');
+let TngMultiAutocompleteContent = class TngMultiAutocompleteContent {
+    multi = inject(TNG_MULTI_AUTOCOMPLETE);
+    destroyRef = inject(DestroyRef);
+    id = createContentId();
+    dataSlot = 'multi-autocomplete-content';
+    get hidden() {
+        return this.multi.open() ? null : '';
+    }
+    get ariaBusy() {
+        return this.multi.loading() ? 'true' : null;
+    }
+    constructor() {
+        this.multi.setContentId(this.id);
+        this.destroyRef.onDestroy(() => {
+            if (this.multi.getContentId() === this.id)
+                this.multi.setContentId(null);
+        });
+    }
+};
+__decorate([
+    HostBinding('attr.id')
+], TngMultiAutocompleteContent.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMultiAutocompleteContent.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.hidden')
+], TngMultiAutocompleteContent.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.aria-busy')
+], TngMultiAutocompleteContent.prototype, "ariaBusy", null);
+TngMultiAutocompleteContent = __decorate([
+    Directive({
+        selector: '[tngMultiAutocompleteContent]',
+        exportAs: 'tngMultiAutocompleteContent',
+        standalone: true,
+    })
+], TngMultiAutocompleteContent);
+export { TngMultiAutocompleteContent };
+//# sourceMappingURL=tng-multi-autocomplete.content.js.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.content.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAGzE,MAAM,eAAe,GAAG,kBAAkB,CAAC,gCAAgC,CAAC,CAAC;AAOtE,IAAM,2BAA2B,GAAjC,MAAM,2BAA2B;IACrB,KAAK,GAAG,MAAM,CAAuB,sBAAsB,CAAC,CAAC;IAC7D,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAGxC,EAAE,GAAG,eAAe,EAAE,CAAC;IAGb,QAAQ,GAAG,4BAAqC,CAAC;IAGpE,IAAc,MAAM;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9C,CAAC;IAED;QACE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACjC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,EAAE;gBAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AArBU;IADR,WAAW,CAAC,SAAS,CAAC;uDACS;AAGb;IADlB,WAAW,CAAC,gBAAgB,CAAC;6DACsC;AAGpE;IADC,WAAW,CAAC,aAAa,CAAC;yDAG1B;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;2DAG7B;AAlBU,2BAA2B;IALvC,SAAS,CAAC;QACT,QAAQ,EAAE,+BAA+B;QACzC,QAAQ,EAAE,6BAA6B;QACvC,UAAU,EAAE,IAAI;KACjB,CAAC;GACW,2BAA2B,CA0BvC","sourcesContent":["import { DestroyRef, Directive, HostBinding, inject } from '@angular/core';\nimport { createTngIdFactory } from '@tailng-ui/cdk';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocomplete } from './tng-multi-autocomplete';\n\nconst createContentId = createTngIdFactory('tng-multi-autocomplete-content');\n\n@Directive({\n  selector: '[tngMultiAutocompleteContent]',\n  exportAs: 'tngMultiAutocompleteContent',\n  standalone: true,\n})\nexport class TngMultiAutocompleteContent {\n  private readonly multi = inject<TngMultiAutocomplete>(TNG_MULTI_AUTOCOMPLETE);\n  private readonly destroyRef = inject(DestroyRef);\n\n  @HostBinding('attr.id')\n  readonly id = createContentId();\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'multi-autocomplete-content' as const;\n\n  @HostBinding('attr.hidden')\n  protected get hidden(): '' | null {\n    return this.multi.open() ? null : '';\n  }\n\n  @HostBinding('attr.aria-busy')\n  protected get ariaBusy(): 'true' | null {\n    return this.multi.loading() ? 'true' : null;\n  }\n\n  constructor() {\n    this.multi.setContentId(this.id);\n    this.destroyRef.onDestroy(() => {\n      if (this.multi.getContentId() === this.id) this.multi.setContentId(null);\n    });\n  }\n}"]}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.d.ts

@@ -0,0 +1,43 @@
+import type { TngMultiAutocompleteListboxApi } from './tng-multi-autocomplete.listbox.types';
+export declare class TngMultiAutocomplete<T = unknown> {
+    readonly hostElement: any;
+    /** Whether overlay is open. */
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    /** Disabled state. */
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    /** Selected values (always array). */
+    readonly value: import("@angular/core").ModelSignal<readonly T[]>;
+    /** Current input query (used for filtering). */
+    readonly query: import("@angular/core").ModelSignal<string>;
+    /** Emits whenever query changes (focus-open emit, typing, selection-clear, etc.) */
+    readonly queryChange: import("@angular/core").OutputEmitterRef<string>;
+    /** Optional states (styling/aria). */
+    readonly loading: import("@angular/core").InputSignal<boolean>;
+    readonly invalid: import("@angular/core").InputSignal<boolean>;
+    private _contentId;
+    private _listboxId;
+    private _activeId;
+    private _listboxApi;
+    protected readonly dataSlot: "multi-autocomplete";
+    protected get dataState(): 'open' | 'closed';
+    protected get dataDisabled(): '' | null;
+    protected get dataLoading(): '' | null;
+    protected get dataInvalid(): '' | null;
+    openSelect(): void;
+    close(): void;
+    toggleOpen(): void;
+    add(value: T): void;
+    remove(value: T): void;
+    toggle(value: T): void;
+    clear(): void;
+    removeLast(): void;
+    setContentId(id: string | null): void;
+    getContentId(): string | null;
+    setListboxId(id: string | null): void;
+    getListboxId(): string | null;
+    setActiveDescendantId(id: string | null): void;
+    getActiveDescendantId(): string | null;
+    setListboxApi(api: TngMultiAutocompleteListboxApi | null): void;
+    getListboxApi(): TngMultiAutocompleteListboxApi | null;
+}
+//# sourceMappingURL=tng-multi-autocomplete.d.ts.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAE7F,qBAMa,oBAAoB,CAAC,CAAC,GAAG,OAAO;IAC3C,QAAQ,CAAC,WAAW,MAAiD;IAErE,+BAA+B;IAC/B,QAAQ,CAAC,IAAI,+CAAyB;IAEtC,sBAAsB;IACtB,QAAQ,CAAC,QAAQ,+CAAyB;IAE1C,sCAAsC;IACtC,QAAQ,CAAC,KAAK,oDAA2B;IAEzC,gDAAgD;IAChD,QAAQ,CAAC,KAAK,8CAAqB;IAEnC,oFAAoF;IACpF,QAAQ,CAAC,WAAW,mDAAoB;IAExC,sCAAsC;IACtC,QAAQ,CAAC,OAAO,+CAAyB;IACzC,QAAQ,CAAC,OAAO,+CAAyB;IAGzC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,WAAW,CAA+C;IAKlE,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,oBAAoB,CAAU;IAG5D,SAAS,KAAK,SAAS,IAAI,MAAM,GAAG,QAAQ,CAE3C;IAGD,SAAS,KAAK,YAAY,IAAI,EAAE,GAAG,IAAI,CAEtC;IAGD,SAAS,KAAK,WAAW,IAAI,EAAE,GAAG,IAAI,CAErC;IAGD,SAAS,KAAK,WAAW,IAAI,EAAE,GAAG,IAAI,CAErC;IAID,UAAU,IAAI,IAAI;IAKlB,KAAK,IAAI,IAAI;IAIb,UAAU,IAAI,IAAI;IASlB,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAUnB,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAWtB,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAatB,KAAK,IAAI,IAAI;IAKb,UAAU,IAAI,IAAI;IAalB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAGrC,YAAY,IAAI,MAAM,GAAG,IAAI;IAI7B,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAGrC,YAAY,IAAI,MAAM,GAAG,IAAI;IAI7B,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAG9C,qBAAqB,IAAI,MAAM,GAAG,IAAI;IAItC,aAAa,CAAC,GAAG,EAAE,8BAA8B,GAAG,IAAI,GAAG,IAAI;IAG/D,aAAa,IAAI,8BAA8B,GAAG,IAAI;CAGvD"}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.js

@@ -0,0 +1,150 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, inject, input, model, output, } from '@angular/core';
+import { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';
+let TngMultiAutocomplete = class TngMultiAutocomplete {
+    hostElement = inject((ElementRef)).nativeElement;
+    /** Whether overlay is open. */
+    open = model(false);
+    /** Disabled state. */
+    disabled = input(false);
+    /** Selected values (always array). */
+    value = model([]);
+    /** Current input query (used for filtering). */
+    query = model('');
+    /** Emits whenever query changes (focus-open emit, typing, selection-clear, etc.) */
+    queryChange = output();
+    /** Optional states (styling/aria). */
+    loading = input(false);
+    invalid = input(false);
+    // ---- internal bridge state ----
+    _contentId = null;
+    _listboxId = null;
+    _activeId = null;
+    _listboxApi = null;
+    // ---- host styling hooks ----
+    dataSlot = 'multi-autocomplete';
+    get dataState() {
+        return this.open() ? 'open' : 'closed';
+    }
+    get dataDisabled() {
+        return this.disabled() ? '' : null;
+    }
+    get dataLoading() {
+        return this.loading() ? '' : null;
+    }
+    get dataInvalid() {
+        return this.invalid() ? '' : null;
+    }
+    // ---- overlay control ----
+    openSelect() {
+        if (this.disabled())
+            return;
+        this.open.set(true);
+    }
+    close() {
+        this.open.set(false);
+    }
+    toggleOpen() {
+        if (this.disabled())
+            return;
+        this.open.set(!this.open());
+    }
+    // =========================================================
+    // Selection API
+    // =========================================================
+    add(value) {
+        if (this.disabled())
+            return;
+        const current = this.value();
+        const exists = current.some((v) => Object.is(v, value));
+        if (exists)
+            return;
+        this.value.set([...current, value]);
+    }
+    remove(value) {
+        if (this.disabled())
+            return;
+        const current = this.value();
+        const next = current.filter((v) => !Object.is(v, value));
+        if (next.length !== current.length) {
+            this.value.set(next);
+        }
+    }
+    toggle(value) {
+        if (this.disabled())
+            return;
+        const current = this.value();
+        const exists = current.some((v) => Object.is(v, value));
+        if (exists) {
+            this.value.set(current.filter((v) => !Object.is(v, value)));
+        }
+        else {
+            this.value.set([...current, value]);
+        }
+    }
+    clear() {
+        if (this.disabled())
+            return;
+        this.value.set([]);
+    }
+    removeLast() {
+        if (this.disabled())
+            return;
+        const current = this.value();
+        if (current.length === 0)
+            return;
+        this.value.set(current.slice(0, -1));
+    }
+    // =========================================================
+    // Listbox bridge
+    // =========================================================
+    setContentId(id) {
+        this._contentId = id;
+    }
+    getContentId() {
+        return this._contentId;
+    }
+    setListboxId(id) {
+        this._listboxId = id;
+    }
+    getListboxId() {
+        return this._listboxId;
+    }
+    setActiveDescendantId(id) {
+        this._activeId = id;
+    }
+    getActiveDescendantId() {
+        return this._activeId;
+    }
+    setListboxApi(api) {
+        this._listboxApi = api;
+    }
+    getListboxApi() {
+        return this._listboxApi;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMultiAutocomplete.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-state')
+], TngMultiAutocomplete.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngMultiAutocomplete.prototype, "dataDisabled", null);
+__decorate([
+    HostBinding('attr.data-loading')
+], TngMultiAutocomplete.prototype, "dataLoading", null);
+__decorate([
+    HostBinding('attr.data-invalid')
+], TngMultiAutocomplete.prototype, "dataInvalid", null);
+TngMultiAutocomplete = __decorate([
+    Directive({
+        selector: '[tngMultiAutocomplete]',
+        exportAs: 'tngMultiAutocomplete',
+        standalone: true,
+        providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }],
+    })
+], TngMultiAutocomplete);
+export { TngMultiAutocomplete };
+//# sourceMappingURL=tng-multi-autocomplete.js.map

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AASlE,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IACtB,WAAW,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC,aAAa,CAAC;IAErE,+BAA+B;IACtB,IAAI,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;IAEtC,sBAAsB;IACb,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;IAE1C,sCAAsC;IAC7B,KAAK,GAAG,KAAK,CAAe,EAAE,CAAC,CAAC;IAEzC,gDAAgD;IACvC,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC,CAAC;IAEnC,oFAAoF;IAC3E,WAAW,GAAG,MAAM,EAAU,CAAC;IAExC,sCAAsC;IAC7B,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;IAChC,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;IAEzC,kCAAkC;IAC1B,UAAU,GAAkB,IAAI,CAAC;IACjC,UAAU,GAAkB,IAAI,CAAC;IACjC,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAA0C,IAAI,CAAC;IAElE,+BAA+B;IAGZ,QAAQ,GAAG,oBAA6B,CAAC;IAG5D,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzC,CAAC;IAGD,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrC,CAAC;IAGD,IAAc,WAAW;QACvB,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACpC,CAAC;IAGD,IAAc,WAAW;QACvB,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACpC,CAAC;IAED,4BAA4B;IAE5B,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,4DAA4D;IAC5D,gBAAgB;IAChB,4DAA4D;IAE5D,GAAG,CAAC,KAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QACxD,IAAI,MAAM;YAAE,OAAO;QAEnB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACtC,CAAC;IAED,MAAM,CAAC,KAAQ;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAEzD,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAQ;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAExD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEjC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,4DAA4D;IAC5D,iBAAiB;IACjB,4DAA4D;IAE5D,YAAY,CAAC,EAAiB;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IACD,YAAY;QACV,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,YAAY,CAAC,EAAiB;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IACD,YAAY;QACV,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,qBAAqB,CAAC,EAAiB;QACrC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IACD,qBAAqB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,aAAa,CAAC,GAA0C;QACtD,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;IACzB,CAAC;IACD,aAAa;QACX,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;CACF,CAAA;AAzHoB;IADlB,WAAW,CAAC,gBAAgB,CAAC;sDAC8B;AAG5D;IADC,WAAW,CAAC,iBAAiB,CAAC;qDAG9B;AAGD;IADC,WAAW,CAAC,oBAAoB,CAAC;wDAGjC;AAGD;IADC,WAAW,CAAC,mBAAmB,CAAC;uDAGhC;AAGD;IADC,WAAW,CAAC,mBAAmB,CAAC;uDAGhC;AAnDU,oBAAoB;IANhC,SAAS,CAAC;QACT,QAAQ,EAAE,wBAAwB;QAClC,QAAQ,EAAE,sBAAsB;QAChC,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,oBAAoB,EAAE,CAAC;KACpF,CAAC;GACW,oBAAoB,CAwJhC","sourcesContent":["import {\n  Directive,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocompleteListboxApi } from './tng-multi-autocomplete.listbox.types';\n\n@Directive({\n  selector: '[tngMultiAutocomplete]',\n  exportAs: 'tngMultiAutocomplete',\n  standalone: true,\n  providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }],\n})\nexport class TngMultiAutocomplete<T = unknown> {\n  readonly hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n\n  /** Whether overlay is open. */\n  readonly open = model<boolean>(false);\n\n  /** Disabled state. */\n  readonly disabled = input<boolean>(false);\n\n  /** Selected values (always array). */\n  readonly value = model<readonly T[]>([]);\n\n  /** Current input query (used for filtering). */\n  readonly query = model<string>('');\n\n  /** Emits whenever query changes (focus-open emit, typing, selection-clear, etc.) */\n  readonly queryChange = output<string>();\n\n  /** Optional states (styling/aria). */\n  readonly loading = input<boolean>(false);\n  readonly invalid = input<boolean>(false);\n\n  // ---- internal bridge state ----\n  private _contentId: string | null = null;\n  private _listboxId: string | null = null;\n  private _activeId: string | null = null;\n  private _listboxApi: TngMultiAutocompleteListboxApi | null = null;\n\n  // ---- host styling hooks ----\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'multi-autocomplete' as const;\n\n  @HostBinding('attr.data-state')\n  protected get dataState(): 'open' | 'closed' {\n    return this.open() ? 'open' : 'closed';\n  }\n\n  @HostBinding('attr.data-disabled')\n  protected get dataDisabled(): '' | null {\n    return this.disabled() ? '' : null;\n  }\n\n  @HostBinding('attr.data-loading')\n  protected get dataLoading(): '' | null {\n    return this.loading() ? '' : null;\n  }\n\n  @HostBinding('attr.data-invalid')\n  protected get dataInvalid(): '' | null {\n    return this.invalid() ? '' : null;\n  }\n\n  // ---- overlay control ----\n\n  openSelect(): void {\n    if (this.disabled()) return;\n    this.open.set(true);\n  }\n\n  close(): void {\n    this.open.set(false);\n  }\n\n  toggleOpen(): void {\n    if (this.disabled()) return;\n    this.open.set(!this.open());\n  }\n\n  // =========================================================\n  // Selection API\n  // =========================================================\n\n  add(value: T): void {\n    if (this.disabled()) return;\n\n    const current = this.value();\n    const exists = current.some((v) => Object.is(v, value));\n    if (exists) return;\n\n    this.value.set([...current, value]);\n  }\n\n  remove(value: T): void {\n    if (this.disabled()) return;\n\n    const current = this.value();\n    const next = current.filter((v) => !Object.is(v, value));\n\n    if (next.length !== current.length) {\n      this.value.set(next);\n    }\n  }\n\n  toggle(value: T): void {\n    if (this.disabled()) return;\n\n    const current = this.value();\n    const exists = current.some((v) => Object.is(v, value));\n\n    if (exists) {\n      this.value.set(current.filter((v) => !Object.is(v, value)));\n    } else {\n      this.value.set([...current, value]);\n    }\n  }\n\n  clear(): void {\n    if (this.disabled()) return;\n    this.value.set([]);\n  }\n\n  removeLast(): void {\n    if (this.disabled()) return;\n\n    const current = this.value();\n    if (current.length === 0) return;\n\n    this.value.set(current.slice(0, -1));\n  }\n\n  // =========================================================\n  // Listbox bridge\n  // =========================================================\n\n  setContentId(id: string | null): void {\n    this._contentId = id;\n  }\n  getContentId(): string | null {\n    return this._contentId;\n  }\n\n  setListboxId(id: string | null): void {\n    this._listboxId = id;\n  }\n  getListboxId(): string | null {\n    return this._listboxId;\n  }\n\n  setActiveDescendantId(id: string | null): void {\n    this._activeId = id;\n  }\n  getActiveDescendantId(): string | null {\n    return this._activeId;\n  }\n\n  setListboxApi(api: TngMultiAutocompleteListboxApi | null): void {\n    this._listboxApi = api;\n  }\n  getListboxApi(): TngMultiAutocompleteListboxApi | null {\n    return this._listboxApi;\n  }\n}\n"]}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.listbox.d.ts

@@ -0,0 +1,20 @@
+import type { TngMultiAutocompleteListboxApi } from './tng-multi-autocomplete.listbox.types';
+export declare class TngMultiAutocompleteListbox<T = unknown> implements TngMultiAutocompleteListboxApi<T> {
+    private readonly multi;
+    private readonly destroyRef;
+    private readonly listbox;
+    protected readonly dataSlot: "multi-autocomplete-listbox";
+    protected readonly id: string;
+    constructor();
+    getHostId(): string | null;
+    getActiveId(): string | null;
+    ensureActive(pref?: 'first' | 'last'): void;
+    handleKey(key: string, shiftKey?: boolean): boolean;
+    commitActive(): void;
+    protected onListboxValueChange(value: T | readonly T[] | null): void;
+    getValue?(): readonly T[];
+}
+export declare class TngMultiAutocompleteOption<T = unknown> {
+    protected readonly dataSlot: "multi-autocomplete-option";
+}
+//# sourceMappingURL=tng-multi-autocomplete.listbox.d.ts.map