@tailng-ui/primitives 0.1.0

package/src/lib/form/autocomplete/tng-autocomplete.listbox.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=tng-autocomplete.listbox.types.js.map

package/src/lib/form/autocomplete/tng-autocomplete.listbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-autocomplete.listbox.types.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/autocomplete/tng-autocomplete.listbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComboboxListboxApi } from '../../internal/combobox';\n\n/** Autocomplete listbox does not support typeahead (input owns typing/filtering). */\nexport type TngAutocompleteListboxApi = Omit<ComboboxListboxApi, 'typeahead'>;"]}

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

@@ -0,0 +1,40 @@
+export declare class TngAutocompleteOverlay {
+    private readonly autocomplete;
+    private readonly elRef;
+    private readonly destroyRef;
+    private lastFocusedBeforeOpen;
+    private removeResizeListener;
+    private removeScrollListener;
+    private resizeObserver;
+    private removeDocPointerListener;
+    readonly placement: import("@angular/core").InputSignal<Readonly<{
+        align?: import("@tailng-ui/cdk").TngOverlayAlign;
+        side?: import("@tailng-ui/cdk").TngOverlaySide;
+    }> | undefined>;
+    readonly offset: import("@angular/core").InputSignal<Readonly<{
+        align?: number;
+        side?: number;
+    }> | undefined>;
+    readonly collision: import("@angular/core").InputSignal<Readonly<{
+        flip?: boolean;
+        padding?: number;
+        shift?: boolean;
+    }> | undefined>;
+    private placeholder;
+    private originalParent;
+    protected readonly dataSlot: "autocomplete-overlay";
+    protected get hidden(): '' | null;
+    constructor();
+    /** Anchor for overlay: container (trigger+icon) if present, else the input trigger. */
+    private findAnchorEl;
+    private findTriggerEl;
+    private reposition;
+    private setupRepositionListeners;
+    private teardownRepositionListeners;
+    private setupOutsidePointer;
+    private teardownOutsidePointer;
+    private mountToBodyAndPosition;
+    private restoreToPlaceholder;
+    private restoreFocusOnClose;
+}
+//# sourceMappingURL=tng-autocomplete.overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-autocomplete.overlay.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/autocomplete/tng-autocomplete.overlay.ts"],"names":[],"mappings":"AAgCA,qBAKa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAC1E,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmC;IACzD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAEjD,OAAO,CAAC,qBAAqB,CAA4B;IACzD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,wBAAwB,CAA6B;IAE7D,QAAQ,CAAC,SAAS;;;oBAAqD;IACvE,QAAQ,CAAC,MAAM;;;oBAAkD;IACjE,QAAQ,CAAC,SAAS;;;;oBAA4D;IAE9E,OAAO,CAAC,WAAW,CAAwB;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAG3C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,sBAAsB,CAAU;IAG9D,SAAS,KAAK,MAAM,IAAI,EAAE,GAAG,IAAI,CAEhC;;IAsBD,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,wBAAwB;IAuBhC,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,sBAAsB;IAmC9B,OAAO,CAAC,oBAAoB;IAkC5B,OAAO,CAAC,mBAAmB;CAkB5B"}

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

@@ -0,0 +1,236 @@
+import { __decorate } from "tslib";
+import { DestroyRef, Directive, ElementRef, HostBinding, inject, input, effect, } from '@angular/core';
+import { computeOverlayPosition } from '@tailng-ui/cdk';
+import { TNG_AUTOCOMPLETE } from './tng-autocomplete.tokens';
+function rectFromClientRect(r) {
+    return { left: r.left, top: r.top, width: r.width, height: r.height };
+}
+function viewportRect() {
+    return { left: 0, top: 0, width: window.innerWidth || 1024, height: window.innerHeight || 768 };
+}
+function isInside(target, container) {
+    return !!target && target instanceof Node && container.contains(target);
+}
+let TngAutocompleteOverlay = class TngAutocompleteOverlay {
+    autocomplete = inject(TNG_AUTOCOMPLETE);
+    elRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    lastFocusedBeforeOpen = null;
+    removeResizeListener = null;
+    removeScrollListener = null;
+    resizeObserver = null;
+    removeDocPointerListener = null;
+    placement = input(undefined);
+    offset = input(undefined);
+    collision = input(undefined);
+    placeholder = null;
+    originalParent = null;
+    dataSlot = 'autocomplete-overlay';
+    get hidden() {
+        return this.autocomplete.open() ? null : '';
+    }
+    constructor() {
+        this.placeholder = document.createComment('tng-autocomplete-overlay-anchor');
+        const hostEl = this.elRef.nativeElement;
+        this.originalParent = hostEl.parentNode;
+        this.originalParent?.insertBefore(this.placeholder, hostEl);
+        effect(() => {
+            const open = this.autocomplete.open();
+            if (open)
+                this.mountToBodyAndPosition();
+            else
+                this.restoreToPlaceholder();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.teardownOutsidePointer();
+            this.restoreToPlaceholder(true);
+            this.placeholder = null;
+            this.originalParent = null;
+        });
+    }
+    /** Anchor for overlay: container (trigger+icon) if present, else the input trigger. */
+    findAnchorEl() {
+        const root = this.autocomplete.hostElement;
+        const container = root.querySelector('[data-slot="autocomplete-trigger-container"]');
+        if (container)
+            return container;
+        return root.querySelector('[data-slot="autocomplete-trigger"]');
+    }
+    findTriggerEl() {
+        const root = this.autocomplete.hostElement;
+        return root.querySelector('[data-slot="autocomplete-trigger"]');
+    }
+    reposition() {
+        if (!this.autocomplete.open())
+            return;
+        const panel = this.elRef.nativeElement;
+        const anchorEl = this.findAnchorEl();
+        if (!anchorEl)
+            return;
+        const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());
+        const overlay = rectFromClientRect(panel.getBoundingClientRect());
+        const viewport = viewportRect();
+        const result = computeOverlayPosition({
+            anchorRect: anchor,
+            overlayRect: overlay,
+            viewportRect: viewport,
+            placement: this.placement(),
+            offset: this.offset(),
+            collision: this.collision(),
+        });
+        panel.style.left = `${result.x}px`;
+        panel.style.top = `${result.y}px`;
+    }
+    setupRepositionListeners() {
+        let rafId = null;
+        const schedule = () => {
+            if (rafId !== null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                this.reposition();
+            });
+        };
+        const onResize = () => schedule();
+        const onScroll = () => schedule();
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onScroll, true);
+        this.removeResizeListener = () => window.removeEventListener('resize', onResize);
+        this.removeScrollListener = () => window.removeEventListener('scroll', onScroll, true);
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => schedule());
+            const anchorEl = this.findAnchorEl();
+            if (anchorEl)
+                this.resizeObserver.observe(anchorEl);
+            this.resizeObserver.observe(this.elRef.nativeElement);
+        }
+    }
+    teardownRepositionListeners() {
+        this.removeResizeListener?.();
+        this.removeScrollListener?.();
+        this.removeResizeListener = null;
+        this.removeScrollListener = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    setupOutsidePointer() {
+        if (this.removeDocPointerListener)
+            return;
+        const onPointerDown = (ev) => {
+            if (!this.autocomplete.open())
+                return;
+            const panel = this.elRef.nativeElement;
+            const anchorEl = this.findAnchorEl();
+            if (isInside(ev.target, panel))
+                return;
+            if (anchorEl && isInside(ev.target, anchorEl))
+                return;
+            if (ev.target && ev.target.closest?.('[data-slot="autocomplete-option"]'))
+                return;
+            this.autocomplete.close();
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        this.removeDocPointerListener = () => document.removeEventListener('pointerdown', onPointerDown, true);
+    }
+    teardownOutsidePointer() {
+        this.removeDocPointerListener?.();
+        this.removeDocPointerListener = null;
+    }
+    mountToBodyAndPosition() {
+        this.lastFocusedBeforeOpen = document.activeElement;
+        this.setupRepositionListeners();
+        const panel = this.elRef.nativeElement;
+        if (panel.parentNode !== document.body) {
+            document.body.appendChild(panel);
+        }
+        panel.style.position = 'fixed';
+        panel.style.left = '0px';
+        panel.style.top = '0px';
+        panel.style.zIndex = '1000';
+        queueMicrotask(() => {
+            if (!this.autocomplete.open())
+                return;
+            const anchorEl = this.findAnchorEl();
+            if (!anchorEl)
+                return;
+            const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());
+            panel.style.minWidth = `${anchor.width}px`;
+            const overlay = rectFromClientRect(panel.getBoundingClientRect());
+            const viewport = viewportRect();
+            const result = computeOverlayPosition({
+                anchorRect: anchor,
+                overlayRect: overlay,
+                viewportRect: viewport,
+                placement: this.placement(),
+                offset: this.offset(),
+                collision: this.collision(),
+            });
+            panel.style.left = `${result.x}px`;
+            panel.style.top = `${result.y}px`;
+        });
+        this.setupOutsidePointer();
+    }
+    restoreToPlaceholder(force = false) {
+        const panel = this.elRef.nativeElement;
+        if (!force && panel.parentNode !== document.body) {
+            this.teardownOutsidePointer();
+            return;
+        }
+        if (this.placeholder?.parentNode) {
+            this.placeholder.parentNode.insertBefore(panel, this.placeholder);
+        }
+        else if (this.originalParent) {
+            this.originalParent.appendChild(panel);
+        }
+        this.teardownRepositionListeners();
+        if (this.lastFocusedBeforeOpen &&
+            document.contains(this.lastFocusedBeforeOpen)) {
+            const active = document.activeElement;
+            if (!active || panel.contains(active)) {
+                this.autocomplete._restoringFocus = true;
+                this.lastFocusedBeforeOpen.focus();
+                queueMicrotask(() => { this.autocomplete._restoringFocus = false; });
+            }
+        }
+        this.restoreFocusOnClose();
+        panel.style.position = '';
+        panel.style.left = '';
+        panel.style.top = '';
+        panel.style.zIndex = '';
+        panel.style.minWidth = '';
+        this.teardownOutsidePointer();
+    }
+    restoreFocusOnClose() {
+        const panel = this.elRef.nativeElement;
+        const active = document.activeElement;
+        const trigger = this.findTriggerEl();
+        if (!trigger)
+            return;
+        if (active && panel.contains(active)) {
+            this.autocomplete._restoringFocus = true;
+            trigger.focus();
+            queueMicrotask(() => { this.autocomplete._restoringFocus = false; });
+            return;
+        }
+        if (document.activeElement === document.body) {
+            this.autocomplete._restoringFocus = true;
+            trigger.focus();
+            queueMicrotask(() => { this.autocomplete._restoringFocus = false; });
+        }
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAutocompleteOverlay.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.hidden')
+], TngAutocompleteOverlay.prototype, "hidden", null);
+TngAutocompleteOverlay = __decorate([
+    Directive({
+        selector: '[tngAutocompleteOverlay]',
+        exportAs: 'tngAutocompleteOverlay',
+        standalone: true,
+    })
+], TngAutocompleteOverlay);
+export { TngAutocompleteOverlay };
+//# sourceMappingURL=tng-autocomplete.overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-autocomplete.overlay.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/autocomplete/tng-autocomplete.overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  effect,\n} from '@angular/core';\nimport type {\n  TngOverlayCollisionOptions,\n  TngOverlayOffset,\n  TngOverlayPlacement,\n} from '@tailng-ui/cdk';\nimport { computeOverlayPosition } from '@tailng-ui/cdk';\nimport { TNG_AUTOCOMPLETE } from './tng-autocomplete.tokens';\nimport type { TngAutocomplete } from './tng-autocomplete';\n\ntype MaybeRect = Readonly<{ left: number; top: number; width: number; height: number }>;\n\nfunction rectFromClientRect(r: DOMRect | ClientRect): MaybeRect {\n  return { left: r.left, top: r.top, width: r.width, height: r.height };\n}\n\nfunction viewportRect(): MaybeRect {\n  return { left: 0, top: 0, width: window.innerWidth || 1024, height: window.innerHeight || 768 };\n}\n\nfunction isInside(target: EventTarget | null, container: HTMLElement): boolean {\n  return !!target && target instanceof Node && container.contains(target);\n}\n\n@Directive({\n  selector: '[tngAutocompleteOverlay]',\n  exportAs: 'tngAutocompleteOverlay',\n  standalone: true,\n})\nexport class TngAutocompleteOverlay {\n  private readonly autocomplete = inject<TngAutocomplete>(TNG_AUTOCOMPLETE);\n  private readonly elRef = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private lastFocusedBeforeOpen: HTMLElement | null = null;\n  private removeResizeListener: (() => void) | null = null;\n  private removeScrollListener: (() => void) | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private removeDocPointerListener: (() => void) | null = null;\n\n  readonly placement = input<TngOverlayPlacement | undefined>(undefined);\n  readonly offset = input<TngOverlayOffset | undefined>(undefined);\n  readonly collision = input<TngOverlayCollisionOptions | undefined>(undefined);\n\n  private placeholder: Comment | null = null;\n  private originalParent: Node | null = null;\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'autocomplete-overlay' as const;\n\n  @HostBinding('attr.hidden')\n  protected get hidden(): '' | null {\n    return this.autocomplete.open() ? null : '';\n  }\n\n  constructor() {\n    this.placeholder = document.createComment('tng-autocomplete-overlay-anchor');\n    const hostEl = this.elRef.nativeElement;\n    this.originalParent = hostEl.parentNode;\n    this.originalParent?.insertBefore(this.placeholder, hostEl);\n\n    effect(() => {\n      const open = this.autocomplete.open();\n      if (open) this.mountToBodyAndPosition();\n      else this.restoreToPlaceholder();\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.teardownOutsidePointer();\n      this.restoreToPlaceholder(true);\n      this.placeholder = null;\n      this.originalParent = null;\n    });\n  }\n\n  /** Anchor for overlay: container (trigger+icon) if present, else the input trigger. */\n  private findAnchorEl(): HTMLElement | null {\n    const root = this.autocomplete.hostElement;\n    const container = root.querySelector('[data-slot=\"autocomplete-trigger-container\"]') as HTMLElement | null;\n    if (container) return container;\n    return root.querySelector('[data-slot=\"autocomplete-trigger\"]') as HTMLElement | null;\n  }\n\n  private findTriggerEl(): HTMLElement | null {\n    const root = this.autocomplete.hostElement;\n    return root.querySelector('[data-slot=\"autocomplete-trigger\"]') as HTMLElement | null;\n  }\n\n  private reposition(): void {\n    if (!this.autocomplete.open()) return;\n    const panel = this.elRef.nativeElement;\n    const anchorEl = this.findAnchorEl();\n    if (!anchorEl) return;\n    const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());\n    const overlay = rectFromClientRect(panel.getBoundingClientRect());\n    const viewport = viewportRect();\n    const result = computeOverlayPosition({\n      anchorRect: anchor,\n      overlayRect: overlay,\n      viewportRect: viewport,\n      placement: this.placement(),\n      offset: this.offset(),\n      collision: this.collision(),\n    });\n    panel.style.left = `${result.x}px`;\n    panel.style.top = `${result.y}px`;\n  }\n\n  private setupRepositionListeners(): void {\n    let rafId: number | null = null;\n    const schedule = () => {\n      if (rafId !== null) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = null;\n        this.reposition();\n      });\n    };\n    const onResize = () => schedule();\n    const onScroll = () => schedule();\n    window.addEventListener('resize', onResize);\n    window.addEventListener('scroll', onScroll, true);\n    this.removeResizeListener = () => window.removeEventListener('resize', onResize);\n    this.removeScrollListener = () => window.removeEventListener('scroll', onScroll, true);\n    if ('ResizeObserver' in window) {\n      this.resizeObserver = new ResizeObserver(() => schedule());\n      const anchorEl = this.findAnchorEl();\n      if (anchorEl) this.resizeObserver.observe(anchorEl);\n      this.resizeObserver.observe(this.elRef.nativeElement);\n    }\n  }\n\n  private teardownRepositionListeners(): void {\n    this.removeResizeListener?.();\n    this.removeScrollListener?.();\n    this.removeResizeListener = null;\n    this.removeScrollListener = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  private setupOutsidePointer(): void {\n    if (this.removeDocPointerListener) return;\n    const onPointerDown = (ev: PointerEvent) => {\n      if (!this.autocomplete.open()) return;\n      const panel = this.elRef.nativeElement;\n      const anchorEl = this.findAnchorEl();\n      if (isInside(ev.target, panel)) return;\n      if (anchorEl && isInside(ev.target, anchorEl)) return;\n      if (ev.target && (ev.target as Element).closest?.('[data-slot=\"autocomplete-option\"]')) return;\n      this.autocomplete.close();\n    };\n    document.addEventListener('pointerdown', onPointerDown, true);\n    this.removeDocPointerListener = () =>\n      document.removeEventListener('pointerdown', onPointerDown, true);\n  }\n\n  private teardownOutsidePointer(): void {\n    this.removeDocPointerListener?.();\n    this.removeDocPointerListener = null;\n  }\n\n  private mountToBodyAndPosition(): void {\n    this.lastFocusedBeforeOpen = document.activeElement as HTMLElement | null;\n    this.setupRepositionListeners();\n    const panel = this.elRef.nativeElement;\n    if (panel.parentNode !== document.body) {\n      document.body.appendChild(panel);\n    }\n    panel.style.position = 'fixed';\n    panel.style.left = '0px';\n    panel.style.top = '0px';\n    panel.style.zIndex = '1000';\n\n    queueMicrotask(() => {\n      if (!this.autocomplete.open()) return;\n      const anchorEl = this.findAnchorEl();\n      if (!anchorEl) return;\n      const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());\n      panel.style.minWidth = `${anchor.width}px`;\n      const overlay = rectFromClientRect(panel.getBoundingClientRect());\n      const viewport = viewportRect();\n      const result = computeOverlayPosition({\n        anchorRect: anchor,\n        overlayRect: overlay,\n        viewportRect: viewport,\n        placement: this.placement(),\n        offset: this.offset(),\n        collision: this.collision(),\n      });\n      panel.style.left = `${result.x}px`;\n      panel.style.top = `${result.y}px`;\n    });\n\n    this.setupOutsidePointer();\n  }\n\n  private restoreToPlaceholder(force = false): void {\n    const panel = this.elRef.nativeElement;\n    if (!force && panel.parentNode !== document.body) {\n      this.teardownOutsidePointer();\n      return;\n    }\n    if (this.placeholder?.parentNode) {\n      this.placeholder.parentNode.insertBefore(panel, this.placeholder);\n    } else if (this.originalParent) {\n      this.originalParent.appendChild(panel);\n    }\n    this.teardownRepositionListeners();\n\n    if (\n      this.lastFocusedBeforeOpen &&\n      document.contains(this.lastFocusedBeforeOpen)\n    ) {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || panel.contains(active)) {\n        this.autocomplete._restoringFocus = true;\n        this.lastFocusedBeforeOpen.focus();\n        queueMicrotask(() => { this.autocomplete._restoringFocus = false; });\n      }\n    }\n    this.restoreFocusOnClose();\n\n    panel.style.position = '';\n    panel.style.left = '';\n    panel.style.top = '';\n    panel.style.zIndex = '';\n    panel.style.minWidth = '';\n    this.teardownOutsidePointer();\n  }\n\n  private restoreFocusOnClose(): void {\n    const panel = this.elRef.nativeElement;\n    const active = document.activeElement as HTMLElement | null;\n    const trigger = this.findTriggerEl();\n    if (!trigger) return;\n\n    if (active && panel.contains(active)) {\n      this.autocomplete._restoringFocus = true;\n      trigger.focus();\n      queueMicrotask(() => { this.autocomplete._restoringFocus = false; });\n      return;\n    }\n    if (document.activeElement === document.body) {\n      this.autocomplete._restoringFocus = true;\n      trigger.focus();\n      queueMicrotask(() => { this.autocomplete._restoringFocus = false; });\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,38 @@
+export declare class TngAutocompleteTrigger {
+    private readonly autocomplete;
+    private readonly el;
+    private get listbox();
+    protected readonly dataSlot: "autocomplete-trigger";
+    protected readonly role: "combobox";
+    protected readonly haspopup: "listbox";
+    protected get ariaExpanded(): 'true' | 'false';
+    protected get ariaDisabled(): 'true' | null;
+    protected get ariaControls(): string | null;
+    protected get ariaActiveDescendant(): string | null;
+    protected get ariaInvalid(): 'true' | null;
+    protected get ariaLabelledby(): string | null;
+    protected get ariaDescribedby(): string | null;
+    protected onFocus(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onInput(event: Event): void;
+}
+/** Wrapper for trigger + optional icon. When present, overlay uses this for width/position (full control width). */
+export declare class TngAutocompleteTriggerContainer {
+    protected readonly dataSlot: "autocomplete-trigger-container";
+}
+/** Slot for an icon (e.g. chevron) beside the trigger. Consumer provides markup. Matches Select's tngSelectIcon. */
+export declare class TngAutocompleteIcon {
+    private readonly autocomplete;
+    protected readonly dataSlot: "autocomplete-icon";
+    protected onClick(): void;
+}
+export declare class TngAutocompleteContent {
+    private readonly autocomplete;
+    private readonly destroyRef;
+    readonly id: string;
+    protected readonly dataSlot: "autocomplete-content";
+    protected get hidden(): '' | null;
+    protected get ariaBusy(): 'true' | null;
+    constructor();
+}
+//# sourceMappingURL=tng-autocomplete.parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-autocomplete.parts.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/autocomplete/tng-autocomplete.parts.ts"],"names":[],"mappings":"AAUA,qBAKa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAC1E,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IAEtD,OAAO,KAAK,OAAO,GAElB;IAGD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,sBAAsB,CAAU;IAG9D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAG,UAAU,CAAU;IAG9C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,SAAS,CAAU;IAGjD,SAAS,KAAK,YAAY,IAAI,MAAM,GAAG,OAAO,CAE7C;IAGD,SAAS,KAAK,YAAY,IAAI,MAAM,GAAG,IAAI,CAE1C;IAGD,SAAS,KAAK,YAAY,IAAI,MAAM,GAAG,IAAI,CAG1C;IAGD,SAAS,KAAK,oBAAoB,IAAI,MAAM,GAAG,IAAI,CAIlD;IAGD,SAAS,KAAK,WAAW,IAAI,MAAM,GAAG,IAAI,CAEzC;IAGD,SAAS,KAAK,cAAc,IAAI,MAAM,GAAG,IAAI,CAI5C;IAGD,SAAS,KAAK,eAAe,IAAI,MAAM,GAAG,IAAI,CAS7C;IAGD,SAAS,CAAC,OAAO,IAAI,IAAI;IAmBzB,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAsD/C,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;CAKtC;AAED,oHAAoH;AACpH,qBAKa,+BAA+B;IAE1C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,gCAAgC,CAAU;CACzE;AAED,oHAAoH;AACpH,qBAKa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAG1E,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,mBAAmB,CAAU;IAG3D,SAAS,CAAC,OAAO,IAAI,IAAI;CAO1B;AAID,qBAKa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAC1E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAGjD,QAAQ,CAAC,EAAE,SAAqB;IAGhC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,sBAAsB,CAAU;IAG9D,SAAS,KAAK,MAAM,IAAI,EAAE,GAAG,IAAI,CAEhC;IAGD,SAAS,KAAK,QAAQ,IAAI,MAAM,GAAG,IAAI,CAEtC;;CAUF"}

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

@@ -0,0 +1,252 @@
+import { __decorate } from "tslib";
+import { DestroyRef, Directive, ElementRef, HostBinding, HostListener, inject } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+import { ensureActiveAndSync, handleComboboxKeydown } from '../../internal/combobox';
+import { TNG_AUTOCOMPLETE } from './tng-autocomplete.tokens';
+/** Keys that open autocomplete when closed. ArrowDown/Up + Backspace/Delete (user editing clears selection). */
+const AUTOCOMPLETE_KEYS_TO_OPEN = ['ArrowDown', 'ArrowUp', 'Backspace', 'Delete'];
+let TngAutocompleteTrigger = class TngAutocompleteTrigger {
+    autocomplete = inject(TNG_AUTOCOMPLETE);
+    el = inject((ElementRef));
+    get listbox() {
+        return this.autocomplete.getListboxApi();
+    }
+    dataSlot = 'autocomplete-trigger';
+    role = 'combobox';
+    haspopup = 'listbox';
+    get ariaExpanded() {
+        return this.autocomplete.open() ? 'true' : 'false';
+    }
+    get ariaDisabled() {
+        return this.autocomplete.disabled() ? 'true' : null;
+    }
+    get ariaControls() {
+        if (!this.autocomplete.open())
+            return null;
+        return this.autocomplete.getContentId() ?? this.autocomplete.getListboxId();
+    }
+    get ariaActiveDescendant() {
+        if (!this.autocomplete.open())
+            return null;
+        if (this.listbox)
+            return this.listbox.getActiveId();
+        return this.autocomplete.getActiveDescendantId();
+    }
+    get ariaInvalid() {
+        return this.autocomplete.invalid() ? 'true' : null;
+    }
+    get ariaLabelledby() {
+        const node = this.el.nativeElement;
+        if (node.hasAttribute('aria-label'))
+            return null;
+        return this.autocomplete.labelId();
+    }
+    get ariaDescribedby() {
+        const ids = [];
+        const desc = this.autocomplete.descriptionId();
+        if (desc)
+            ids.push(desc);
+        if (this.autocomplete.invalid()) {
+            const err = this.autocomplete.errorId();
+            if (err)
+                ids.push(err);
+        }
+        return ids.length ? ids.join(' ') : null;
+    }
+    onFocus() {
+        if (this.autocomplete.disabled())
+            return;
+        if (this.autocomplete._restoringFocus)
+            return;
+        if (!this.autocomplete.open()) {
+            this.autocomplete.openSelect();
+            // ✅ Emit empty query (or current query) on open-on-focus.
+            // This is the behavior your test expects.
+            const input = this.el.nativeElement;
+            const value = input?.value ?? '';
+            this.autocomplete.query.set(value);
+            this.autocomplete.queryChange.emit(value);
+            ensureActiveAndSync(this.listbox, (id) => this.autocomplete.setActiveDescendantId(id));
+        }
+    }
+    onKeydown(event) {
+        // Free-form create: Enter (only) with no active option → emit create, close.
+        // Space is NOT used here so it can insert into input for typing (e.g. "United St").
+        if (event.key === 'Enter' &&
+            this.autocomplete.open() &&
+            !this.autocomplete.disabled() &&
+            this.autocomplete.allowCreate() &&
+            !this.autocomplete.strict()) {
+            const hasActive = this.listbox?.getActiveId() != null;
+            if (!hasActive) {
+                event.preventDefault();
+                event.stopPropagation();
+                const query = this.el.nativeElement?.value ?? '';
+                this.autocomplete._createJustEmitted = true;
+                this.autocomplete.create.emit({ query });
+                queueMicrotask(() => this.autocomplete.close());
+                return;
+            }
+        }
+        // When closed, typeable keys (a-z, 0-9, etc.) open overlay without preventDefault so input receives the char
+        if (!this.autocomplete.open() &&
+            !this.autocomplete.disabled() &&
+            event.key.length === 1 &&
+            event.key !== ' ' &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey &&
+            !['Tab', 'Escape', 'Enter'].includes(event.key)) {
+            this.autocomplete.openSelect();
+            ensureActiveAndSync(this.listbox, (id) => this.autocomplete.setActiveDescendantId(id));
+            return;
+        }
+        handleComboboxKeydown(event, {
+            disabled: this.autocomplete.disabled(),
+            open: this.autocomplete.open(),
+            openSelect: () => this.autocomplete.openSelect(),
+            close: () => this.autocomplete.close(),
+            listbox: this.listbox,
+            setActiveDescendantId: (id) => this.autocomplete.setActiveDescendantId(id),
+        }, {
+            enableTypeahead: false,
+            keysToOpen: AUTOCOMPLETE_KEYS_TO_OPEN,
+            keysToOpenNoPreventDefault: ['Backspace', 'Delete'],
+            spaceCommits: false, // Space inserts into input for typing (e.g. "United St" for filtering)
+        });
+    }
+    onInput(event) {
+        const value = event.target?.value ?? '';
+        this.autocomplete.query.set(value);
+        this.autocomplete.queryChange.emit(value);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAutocompleteTrigger.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngAutocompleteTrigger.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.aria-haspopup')
+], TngAutocompleteTrigger.prototype, "haspopup", void 0);
+__decorate([
+    HostBinding('attr.aria-expanded')
+], TngAutocompleteTrigger.prototype, "ariaExpanded", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngAutocompleteTrigger.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngAutocompleteTrigger.prototype, "ariaControls", null);
+__decorate([
+    HostBinding('attr.aria-activedescendant')
+], TngAutocompleteTrigger.prototype, "ariaActiveDescendant", null);
+__decorate([
+    HostBinding('attr.aria-invalid')
+], TngAutocompleteTrigger.prototype, "ariaInvalid", null);
+__decorate([
+    HostBinding('attr.aria-labelledby')
+], TngAutocompleteTrigger.prototype, "ariaLabelledby", null);
+__decorate([
+    HostBinding('attr.aria-describedby')
+], TngAutocompleteTrigger.prototype, "ariaDescribedby", null);
+__decorate([
+    HostListener('focus')
+], TngAutocompleteTrigger.prototype, "onFocus", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngAutocompleteTrigger.prototype, "onKeydown", null);
+__decorate([
+    HostListener('input', ['$event'])
+], TngAutocompleteTrigger.prototype, "onInput", null);
+TngAutocompleteTrigger = __decorate([
+    Directive({
+        selector: '[tngAutocompleteTrigger]',
+        exportAs: 'tngAutocompleteTrigger',
+        standalone: true,
+    })
+], TngAutocompleteTrigger);
+export { TngAutocompleteTrigger };
+/** Wrapper for trigger + optional icon. When present, overlay uses this for width/position (full control width). */
+let TngAutocompleteTriggerContainer = class TngAutocompleteTriggerContainer {
+    dataSlot = 'autocomplete-trigger-container';
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAutocompleteTriggerContainer.prototype, "dataSlot", void 0);
+TngAutocompleteTriggerContainer = __decorate([
+    Directive({
+        selector: '[tngAutocompleteTriggerContainer]',
+        exportAs: 'tngAutocompleteTriggerContainer',
+        standalone: true,
+    })
+], TngAutocompleteTriggerContainer);
+export { TngAutocompleteTriggerContainer };
+/** Slot for an icon (e.g. chevron) beside the trigger. Consumer provides markup. Matches Select's tngSelectIcon. */
+let TngAutocompleteIcon = class TngAutocompleteIcon {
+    autocomplete = inject(TNG_AUTOCOMPLETE);
+    dataSlot = 'autocomplete-icon';
+    onClick() {
+        if (this.autocomplete.disabled())
+            return;
+        const trigger = this.autocomplete.hostElement.querySelector('[data-slot="autocomplete-trigger"]');
+        trigger?.focus();
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAutocompleteIcon.prototype, "dataSlot", void 0);
+__decorate([
+    HostListener('click')
+], TngAutocompleteIcon.prototype, "onClick", null);
+TngAutocompleteIcon = __decorate([
+    Directive({
+        selector: '[tngAutocompleteIcon]',
+        exportAs: 'tngAutocompleteIcon',
+        standalone: true,
+    })
+], TngAutocompleteIcon);
+export { TngAutocompleteIcon };
+const createContentId = createTngIdFactory('tng-autocomplete-content');
+let TngAutocompleteContent = class TngAutocompleteContent {
+    autocomplete = inject(TNG_AUTOCOMPLETE);
+    destroyRef = inject(DestroyRef);
+    id = createContentId();
+    dataSlot = 'autocomplete-content';
+    get hidden() {
+        return this.autocomplete.open() ? null : '';
+    }
+    get ariaBusy() {
+        return this.autocomplete.loading() ? 'true' : null;
+    }
+    constructor() {
+        this.autocomplete.setContentId(this.id);
+        this.destroyRef.onDestroy(() => {
+            if (this.autocomplete.getContentId() === this.id) {
+                this.autocomplete.setContentId(null);
+            }
+        });
+    }
+};
+__decorate([
+    HostBinding('attr.id')
+], TngAutocompleteContent.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAutocompleteContent.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.hidden')
+], TngAutocompleteContent.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.aria-busy')
+], TngAutocompleteContent.prototype, "ariaBusy", null);
+TngAutocompleteContent = __decorate([
+    Directive({
+        selector: '[tngAutocompleteContent]',
+        exportAs: 'tngAutocompleteContent',
+        standalone: true,
+    })
+], TngAutocompleteContent);
+export { TngAutocompleteContent };
+//# sourceMappingURL=tng-autocomplete.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-autocomplete.parts.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/autocomplete/tng-autocomplete.parts.ts"],"names":[],"mappings":"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","sourcesContent":["import { DestroyRef, Directive, ElementRef, HostBinding, HostListener, inject } from '@angular/core';\nimport { createTngIdFactory } from '@tailng-ui/cdk';\nimport { ensureActiveAndSync, handleComboboxKeydown } from '../../internal/combobox';\nimport type { TngAutocomplete } from './tng-autocomplete';\nimport { TNG_AUTOCOMPLETE } from './tng-autocomplete.tokens';\nimport type { TngAutocompleteListboxApi } from './tng-autocomplete.listbox.types';\n\n/** Keys that open autocomplete when closed. ArrowDown/Up + Backspace/Delete (user editing clears selection). */\nconst AUTOCOMPLETE_KEYS_TO_OPEN = ['ArrowDown', 'ArrowUp', 'Backspace', 'Delete'] as const;\n\n@Directive({\n  selector: '[tngAutocompleteTrigger]',\n  exportAs: 'tngAutocompleteTrigger',\n  standalone: true,\n})\nexport class TngAutocompleteTrigger {\n  private readonly autocomplete = inject<TngAutocomplete>(TNG_AUTOCOMPLETE);\n  private readonly el = inject(ElementRef<HTMLElement>);\n\n  private get listbox(): TngAutocompleteListboxApi | null {\n    return this.autocomplete.getListboxApi();\n  }\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'autocomplete-trigger' as const;\n\n  @HostBinding('attr.role')\n  protected readonly role = 'combobox' as const;\n\n  @HostBinding('attr.aria-haspopup')\n  protected readonly haspopup = 'listbox' as const;\n\n  @HostBinding('attr.aria-expanded')\n  protected get ariaExpanded(): 'true' | 'false' {\n    return this.autocomplete.open() ? 'true' : 'false';\n  }\n\n  @HostBinding('attr.aria-disabled')\n  protected get ariaDisabled(): 'true' | null {\n    return this.autocomplete.disabled() ? 'true' : null;\n  }\n\n  @HostBinding('attr.aria-controls')\n  protected get ariaControls(): string | null {\n    if (!this.autocomplete.open()) return null;\n    return this.autocomplete.getContentId() ?? this.autocomplete.getListboxId();\n  }\n\n  @HostBinding('attr.aria-activedescendant')\n  protected get ariaActiveDescendant(): string | null {\n    if (!this.autocomplete.open()) return null;\n    if (this.listbox) return this.listbox.getActiveId();\n    return this.autocomplete.getActiveDescendantId();\n  }\n\n  @HostBinding('attr.aria-invalid')\n  protected get ariaInvalid(): 'true' | null {\n    return this.autocomplete.invalid() ? 'true' : null;\n  }\n\n  @HostBinding('attr.aria-labelledby')\n  protected get ariaLabelledby(): string | null {\n    const node = this.el.nativeElement;\n    if (node.hasAttribute('aria-label')) return null;\n    return this.autocomplete.labelId();\n  }\n\n  @HostBinding('attr.aria-describedby')\n  protected get ariaDescribedby(): string | null {\n    const ids: string[] = [];\n    const desc = this.autocomplete.descriptionId();\n    if (desc) ids.push(desc);\n    if (this.autocomplete.invalid()) {\n      const err = this.autocomplete.errorId();\n      if (err) ids.push(err);\n    }\n    return ids.length ? ids.join(' ') : null;\n  }\n\n  @HostListener('focus')\n  protected onFocus(): void {\n    if (this.autocomplete.disabled()) return;\n    if (this.autocomplete._restoringFocus) return;\n    if (!this.autocomplete.open()) {\n      this.autocomplete.openSelect();\n\n      // ✅ Emit empty query (or current query) on open-on-focus.\n      // This is the behavior your test expects.\n      const input = this.el.nativeElement as HTMLInputElement;\n      const value = input?.value ?? '';\n\n      this.autocomplete.query.set(value);\n      this.autocomplete.queryChange.emit(value);\n      \n      ensureActiveAndSync(this.listbox, (id) => this.autocomplete.setActiveDescendantId(id));\n    }\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    // Free-form create: Enter (only) with no active option → emit create, close.\n    // Space is NOT used here so it can insert into input for typing (e.g. \"United St\").\n    if (\n      event.key === 'Enter' &&\n      this.autocomplete.open() &&\n      !this.autocomplete.disabled() &&\n      this.autocomplete.allowCreate() &&\n      !this.autocomplete.strict()\n    ) {\n      const hasActive = this.listbox?.getActiveId() != null;\n      if (!hasActive) {\n        event.preventDefault();\n        event.stopPropagation();\n        const query = (this.el.nativeElement as HTMLInputElement)?.value ?? '';\n        this.autocomplete._createJustEmitted = true;\n        this.autocomplete.create.emit({ query });\n        queueMicrotask(() => this.autocomplete.close());\n        return;\n      }\n    }\n\n    // When closed, typeable keys (a-z, 0-9, etc.) open overlay without preventDefault so input receives the char\n    if (\n      !this.autocomplete.open() &&\n      !this.autocomplete.disabled() &&\n      event.key.length === 1 &&\n      event.key !== ' ' &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey &&\n      !['Tab', 'Escape', 'Enter'].includes(event.key)\n    ) {\n      this.autocomplete.openSelect();\n      ensureActiveAndSync(this.listbox, (id) => this.autocomplete.setActiveDescendantId(id));\n      return;\n    }\n\n    handleComboboxKeydown(event, {\n      disabled: this.autocomplete.disabled(),\n      open: this.autocomplete.open(),\n      openSelect: () => this.autocomplete.openSelect(),\n      close: () => this.autocomplete.close(),\n      listbox: this.listbox,\n      setActiveDescendantId: (id) => this.autocomplete.setActiveDescendantId(id),\n    }, {\n      enableTypeahead: false,\n      keysToOpen: AUTOCOMPLETE_KEYS_TO_OPEN,\n      keysToOpenNoPreventDefault: ['Backspace', 'Delete'],\n      spaceCommits: false, // Space inserts into input for typing (e.g. \"United St\" for filtering)\n    });\n  }\n\n  @HostListener('input', ['$event'])\n  protected onInput(event: Event): void {\n    const value = (event.target as HTMLInputElement)?.value ?? '';\n    this.autocomplete.query.set(value);\n    this.autocomplete.queryChange.emit(value);\n  }\n}\n\n/** Wrapper for trigger + optional icon. When present, overlay uses this for width/position (full control width). */\n@Directive({\n  selector: '[tngAutocompleteTriggerContainer]',\n  exportAs: 'tngAutocompleteTriggerContainer',\n  standalone: true,\n})\nexport class TngAutocompleteTriggerContainer {\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'autocomplete-trigger-container' as const;\n}\n\n/** Slot for an icon (e.g. chevron) beside the trigger. Consumer provides markup. Matches Select's tngSelectIcon. */\n@Directive({\n  selector: '[tngAutocompleteIcon]',\n  exportAs: 'tngAutocompleteIcon',\n  standalone: true,\n})\nexport class TngAutocompleteIcon {\n  private readonly autocomplete = inject<TngAutocomplete>(TNG_AUTOCOMPLETE);\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'autocomplete-icon' as const;\n\n  @HostListener('click')\n  protected onClick(): void {\n    if (this.autocomplete.disabled()) return;\n    const trigger = this.autocomplete.hostElement.querySelector(\n      '[data-slot=\"autocomplete-trigger\"]'\n    ) as HTMLElement | null;\n    trigger?.focus();\n  }\n}\n\nconst createContentId = createTngIdFactory('tng-autocomplete-content');\n\n@Directive({\n  selector: '[tngAutocompleteContent]',\n  exportAs: 'tngAutocompleteContent',\n  standalone: true,\n})\nexport class TngAutocompleteContent {\n  private readonly autocomplete = inject<TngAutocomplete>(TNG_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 = 'autocomplete-content' as const;\n\n  @HostBinding('attr.hidden')\n  protected get hidden(): '' | null {\n    return this.autocomplete.open() ? null : '';\n  }\n\n  @HostBinding('attr.aria-busy')\n  protected get ariaBusy(): 'true' | null {\n    return this.autocomplete.loading() ? 'true' : null;\n  }\n\n  constructor() {\n    this.autocomplete.setContentId(this.id);\n    this.destroyRef.onDestroy(() => {\n      if (this.autocomplete.getContentId() === this.id) {\n        this.autocomplete.setContentId(null);\n      }\n    });\n  }\n}\n"]}