@tailng-ui/primitives 0.14.0 → 0.16.0

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

@@ -0,0 +1,275 @@
+import { DestroyRef, Directive, ElementRef, HostBinding, effect, inject, input, signal, } from '@angular/core';
+import { computeOverlayPosition, } from '@tailng-ui/cdk';
+import * as i0 from "@angular/core";
+const OVERLAY_VIEWPORT_MARGIN = 12;
+const OVERLAY_OFFSET = 9;
+function rectFromClientRect(rect) {
+    return {
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+    };
+}
+function viewportRect(windowRef) {
+    return {
+        height: windowRef.innerHeight || 768,
+        left: 0,
+        top: 0,
+        width: windowRef.innerWidth || 1024,
+    };
+}
+function resolveAnchorElement(anchor) {
+    if (anchor instanceof ElementRef) {
+        return anchor.nativeElement;
+    }
+    return anchor instanceof HTMLElement ? anchor : null;
+}
+export class TngDatepickerOverlay {
+    elRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    ownerDocument = this.elRef.nativeElement.ownerDocument ?? null;
+    ownerWindow = this.ownerDocument?.defaultView ?? null;
+    renderVersion = signal(0, ...(ngDevMode ? [{ debugName: "renderVersion" }] : []));
+    resolvedPlacement = signal('bottom', ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : []));
+    overlayPlaceholder = null;
+    overlayOriginalParent = null;
+    overlayLayoutFrame = null;
+    removeResizeListener = null;
+    removeScrollListener = null;
+    resizeObserver = null;
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerOverlay' });
+    anchor = input(undefined, { ...(ngDevMode ? { debugName: "anchor" } : {}), alias: 'tngDatepickerOverlayAnchor' });
+    placement = input(undefined, { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'tngDatepickerOverlayPlacement' });
+    offset = input(undefined, { ...(ngDevMode ? { debugName: "offset" } : {}), alias: 'tngDatepickerOverlayOffset' });
+    collision = input(undefined, { ...(ngDevMode ? { debugName: "collision" } : {}), alias: 'tngDatepickerOverlayCollision' });
+    get hidden() {
+        this.renderVersion();
+        return this.controller().getOutputs().open ? null : '';
+    }
+    get display() {
+        this.renderVersion();
+        return this.controller().getOutputs().open ? null : 'none';
+    }
+    get dataPlacement() {
+        this.renderVersion();
+        return this.resolvedPlacement();
+    }
+    constructor() {
+        this.initializeOverlayPortal();
+        effect((onCleanup) => {
+            const controller = this.controller();
+            controller.registerOverlay(this.elRef.nativeElement);
+            const unsubscribe = controller.subscribe(() => {
+                this.renderVersion.update((value) => value + 1);
+            });
+            onCleanup(() => {
+                unsubscribe();
+                controller.registerOverlay(null);
+            });
+        });
+        effect(() => {
+            const open = this.controller().getOutputs().open;
+            this.renderVersion();
+            this.placement();
+            this.offset();
+            this.collision();
+            this.anchor();
+            if (open) {
+                this.mountToBodyAndPosition();
+                return;
+            }
+            this.restoreToPlaceholder();
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.overlayLayoutFrame !== null && this.ownerWindow !== null) {
+                this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);
+                this.overlayLayoutFrame = null;
+            }
+            this.teardownRepositionListeners();
+            this.restoreToPlaceholder(true);
+        });
+    }
+    initializeOverlayPortal() {
+        if (this.overlayPlaceholder !== null) {
+            return;
+        }
+        const placeholderDocument = this.ownerDocument ?? document;
+        const overlay = this.elRef.nativeElement;
+        this.overlayPlaceholder = placeholderDocument.createComment('tng-datepicker-overlay-anchor');
+        this.overlayOriginalParent = overlay.parentNode;
+        const placeholder = this.overlayPlaceholder;
+        if (this.overlayOriginalParent !== null && placeholder !== null) {
+            this.overlayOriginalParent.insertBefore(placeholder, overlay);
+        }
+    }
+    findAnchorEl() {
+        const explicitAnchor = resolveAnchorElement(this.anchor());
+        if (explicitAnchor !== null) {
+            return explicitAnchor;
+        }
+        const scope = this.overlayPlaceholder?.parentNode instanceof HTMLElement
+            ? this.overlayPlaceholder.parentNode
+            : this.overlayOriginalParent instanceof HTMLElement
+                ? this.overlayOriginalParent
+                : null;
+        return (scope?.querySelector('[data-slot="datepicker-input-shell"]') ??
+            scope?.querySelector('[data-slot="datepicker-trigger"]'));
+    }
+    scheduleReposition() {
+        if (!this.controller().getOutputs().open || this.ownerWindow === null) {
+            return;
+        }
+        if (this.overlayLayoutFrame !== null) {
+            this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);
+        }
+        this.overlayLayoutFrame = this.ownerWindow.requestAnimationFrame(() => {
+            this.overlayLayoutFrame = null;
+            this.positionOverlay();
+        });
+    }
+    positionOverlay() {
+        const overlay = this.elRef.nativeElement;
+        const anchor = this.findAnchorEl();
+        if (anchor === null || this.ownerWindow === null) {
+            return;
+        }
+        const anchorRect = rectFromClientRect(anchor.getBoundingClientRect());
+        const viewport = viewportRect(this.ownerWindow);
+        const width = Math.max(0, Math.min(anchorRect.width, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2));
+        overlay.style.width = `${width}px`;
+        overlay.style.maxWidth = `${Math.max(0, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2)}px`;
+        overlay.style.maxHeight = '';
+        const overlayRect = rectFromClientRect(overlay.getBoundingClientRect());
+        const result = computeOverlayPosition({
+            anchorRect,
+            collision: this.resolveCollision(),
+            direction: this.resolveDirection(),
+            offset: this.resolveOffset(),
+            overlayRect,
+            placement: this.resolvePlacement(),
+            viewportRect: viewport,
+        });
+        overlay.style.left = `${result.x}px`;
+        overlay.style.top = `${result.y}px`;
+        const anchorBottom = anchorRect.top + anchorRect.height;
+        const availableHeight = result.side === 'top'
+            ? Math.max(0, Math.floor(anchorRect.top - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET))
+            : Math.max(0, Math.floor(viewport.height - anchorBottom - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET));
+        if (availableHeight > 0) {
+            overlay.style.maxHeight = `${availableHeight}px`;
+        }
+        this.resolvedPlacement.set(result.side === 'top' ? 'top' : 'bottom');
+        overlay.style.visibility = '';
+    }
+    setupRepositionListeners() {
+        if (this.ownerWindow === null || this.removeResizeListener !== null || this.removeScrollListener !== null) {
+            return;
+        }
+        const schedule = () => {
+            this.scheduleReposition();
+        };
+        this.ownerWindow.addEventListener('resize', schedule);
+        this.ownerWindow.addEventListener('scroll', schedule, true);
+        this.removeResizeListener = () => this.ownerWindow?.removeEventListener('resize', schedule);
+        this.removeScrollListener = () => this.ownerWindow?.removeEventListener('scroll', schedule, true);
+        if ('ResizeObserver' in this.ownerWindow) {
+            const ResizeObserverCtor = this.ownerWindow.ResizeObserver;
+            this.resizeObserver = new ResizeObserverCtor(() => {
+                this.scheduleReposition();
+            });
+            const anchor = this.findAnchorEl();
+            if (anchor !== null && this.resizeObserver !== null) {
+                this.resizeObserver.observe(anchor);
+            }
+            this.resizeObserver?.observe(this.elRef.nativeElement);
+        }
+    }
+    teardownRepositionListeners() {
+        this.removeResizeListener?.();
+        this.removeScrollListener?.();
+        this.removeResizeListener = null;
+        this.removeScrollListener = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    mountToBodyAndPosition() {
+        const overlay = this.elRef.nativeElement;
+        if (this.ownerDocument === null) {
+            return;
+        }
+        this.setupRepositionListeners();
+        if (overlay.parentNode !== this.ownerDocument.body) {
+            this.ownerDocument.body.appendChild(overlay);
+        }
+        overlay.style.position = 'fixed';
+        overlay.style.left = '0px';
+        overlay.style.top = '0px';
+        overlay.style.visibility = 'hidden';
+        overlay.style.zIndex = '1000';
+        queueMicrotask(() => {
+            if (!this.controller().getOutputs().open) {
+                return;
+            }
+            this.positionOverlay();
+        });
+    }
+    restoreToPlaceholder(force = false) {
+        const overlay = this.elRef.nativeElement;
+        if (!force && overlay.parentNode !== this.ownerDocument?.body) {
+            return;
+        }
+        const placeholder = this.overlayPlaceholder;
+        if (placeholder?.parentNode !== null && placeholder !== null) {
+            placeholder.parentNode.insertBefore(overlay, placeholder);
+        }
+        else if (this.overlayOriginalParent !== null) {
+            this.overlayOriginalParent.appendChild(overlay);
+        }
+        this.teardownRepositionListeners();
+        this.resolvedPlacement.set(this.resolvePlacement().side === 'top' ? 'top' : 'bottom');
+        overlay.style.left = '';
+        overlay.style.maxHeight = '';
+        overlay.style.maxWidth = '';
+        overlay.style.position = '';
+        overlay.style.top = '';
+        overlay.style.visibility = '';
+        overlay.style.width = '';
+        overlay.style.zIndex = '';
+    }
+    resolvePlacement() {
+        return this.placement() ?? { align: 'start', side: 'bottom' };
+    }
+    resolveOffset() {
+        return this.offset() ?? { side: OVERLAY_OFFSET };
+    }
+    resolveCollision() {
+        return this.collision() ?? {
+            flip: true,
+            padding: OVERLAY_VIEWPORT_MARGIN,
+            shift: true,
+        };
+    }
+    resolveDirection() {
+        return this.controller().getOutputs().getHostAttributes()['dir'] === 'rtl' ? 'rtl' : 'ltr';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerOverlay, isStandalone: true, selector: "[tngDatepickerOverlay]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerOverlay", isSignal: true, isRequired: true, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "tngDatepickerOverlayAnchor", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "tngDatepickerOverlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "tngDatepickerOverlayOffset", isSignal: true, isRequired: false, transformFunction: null }, collision: { classPropertyName: "collision", publicName: "tngDatepickerOverlayCollision", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hidden": "this.hidden", "style.display": "this.display", "attr.data-placement": "this.dataPlacement" } }, exportAs: ["tngDatepickerOverlay"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerOverlay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDatepickerOverlay]',
+                    exportAs: 'tngDatepickerOverlay',
+                }]
+        }], ctorParameters: () => [], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerOverlay", required: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerOverlayAnchor", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerOverlayPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerOverlayOffset", required: false }] }], collision: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerOverlayCollision", required: false }] }], hidden: [{
+                type: HostBinding,
+                args: ['attr.hidden']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], dataPlacement: [{
+                type: HostBinding,
+                args: ['attr.data-placement']
+            }] } });
+//# sourceMappingURL=tng-datepicker.overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-datepicker.overlay.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/datepicker/tng-datepicker.overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  HostBinding,\n  effect,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport {\n  computeOverlayPosition,\n  type TngOverlayCollisionOptions,\n  type TngOverlayOffset,\n  type TngOverlayPlacement,\n} from '@tailng-ui/cdk';\nimport type {\n  TngDatepickerAttributeMap,\n} from './datepicker.types';\n\ntype TngDatepickerOverlayController = Readonly<{\n  getOutputs: () => Readonly<{\n    getHostAttributes: () => TngDatepickerAttributeMap;\n    open: boolean;\n  }>;\n  registerOverlay: (element: HTMLElement | null) => void;\n  subscribe: (listener: (event: unknown) => void) => () => void;\n}>;\n\ntype MaybeRect = Readonly<{\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n}>;\n\ntype OverlayAnchorInput =\n  | ElementRef<HTMLElement>\n  | HTMLElement\n  | null\n  | undefined;\n\nconst OVERLAY_VIEWPORT_MARGIN = 12;\nconst OVERLAY_OFFSET = 9;\n\nfunction rectFromClientRect(rect: DOMRect | ClientRect): MaybeRect {\n  return {\n    height: rect.height,\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n  };\n}\n\nfunction viewportRect(windowRef: Window): MaybeRect {\n  return {\n    height: windowRef.innerHeight || 768,\n    left: 0,\n    top: 0,\n    width: windowRef.innerWidth || 1024,\n  };\n}\n\nfunction resolveAnchorElement(anchor: OverlayAnchorInput): HTMLElement | null {\n  if (anchor instanceof ElementRef) {\n    return anchor.nativeElement;\n  }\n\n  return anchor instanceof HTMLElement ? anchor : null;\n}\n\n@Directive({\n  selector: '[tngDatepickerOverlay]',\n  exportAs: 'tngDatepickerOverlay',\n})\nexport class TngDatepickerOverlay {\n  private readonly elRef = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private readonly ownerDocument = this.elRef.nativeElement.ownerDocument ?? null;\n  private readonly ownerWindow = this.ownerDocument?.defaultView ?? null;\n  private readonly renderVersion = signal(0);\n  private readonly resolvedPlacement = signal<'bottom' | 'top'>('bottom');\n\n  private overlayPlaceholder: Comment | null = null;\n  private overlayOriginalParent: Node | null = null;\n  private overlayLayoutFrame: number | null = null;\n  private removeResizeListener: (() => void) | null = null;\n  private removeScrollListener: (() => void) | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n\n  public readonly controller = input.required<TngDatepickerOverlayController>({\n    alias: 'tngDatepickerOverlay',\n  });\n  public readonly anchor = input<OverlayAnchorInput>(undefined, {\n    alias: 'tngDatepickerOverlayAnchor',\n  });\n  public readonly placement = input<TngOverlayPlacement | undefined>(undefined, {\n    alias: 'tngDatepickerOverlayPlacement',\n  });\n  public readonly offset = input<TngOverlayOffset | undefined>(undefined, {\n    alias: 'tngDatepickerOverlayOffset',\n  });\n  public readonly collision = input<TngOverlayCollisionOptions | undefined>(undefined, {\n    alias: 'tngDatepickerOverlayCollision',\n  });\n\n  @HostBinding('attr.hidden')\n  protected get hidden(): '' | null {\n    this.renderVersion();\n    return this.controller().getOutputs().open ? null : '';\n  }\n\n  @HostBinding('style.display')\n  protected get display(): string | null {\n    this.renderVersion();\n    return this.controller().getOutputs().open ? null : 'none';\n  }\n\n  @HostBinding('attr.data-placement')\n  protected get dataPlacement(): 'bottom' | 'top' {\n    this.renderVersion();\n    return this.resolvedPlacement();\n  }\n\n  public constructor() {\n    this.initializeOverlayPortal();\n\n    effect((onCleanup) => {\n      const controller = this.controller();\n      controller.registerOverlay(this.elRef.nativeElement);\n      const unsubscribe = controller.subscribe(() => {\n        this.renderVersion.update((value) => value + 1);\n      });\n\n      onCleanup(() => {\n        unsubscribe();\n        controller.registerOverlay(null);\n      });\n    });\n\n    effect(() => {\n      const open = this.controller().getOutputs().open;\n      this.renderVersion();\n      this.placement();\n      this.offset();\n      this.collision();\n      this.anchor();\n\n      if (open) {\n        this.mountToBodyAndPosition();\n        return;\n      }\n\n      this.restoreToPlaceholder();\n    });\n\n    this.destroyRef.onDestroy(() => {\n      if (this.overlayLayoutFrame !== null && this.ownerWindow !== null) {\n        this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);\n        this.overlayLayoutFrame = null;\n      }\n\n      this.teardownRepositionListeners();\n      this.restoreToPlaceholder(true);\n    });\n  }\n\n  private initializeOverlayPortal(): void {\n    if (this.overlayPlaceholder !== null) {\n      return;\n    }\n\n    const placeholderDocument = this.ownerDocument ?? document;\n    const overlay = this.elRef.nativeElement;\n    this.overlayPlaceholder = placeholderDocument.createComment('tng-datepicker-overlay-anchor');\n    this.overlayOriginalParent = overlay.parentNode;\n    const placeholder = this.overlayPlaceholder;\n    if (this.overlayOriginalParent !== null && placeholder !== null) {\n      this.overlayOriginalParent.insertBefore(placeholder, overlay);\n    }\n  }\n\n  private findAnchorEl(): HTMLElement | null {\n    const explicitAnchor = resolveAnchorElement(this.anchor());\n    if (explicitAnchor !== null) {\n      return explicitAnchor;\n    }\n\n    const scope =\n      this.overlayPlaceholder?.parentNode instanceof HTMLElement\n        ? this.overlayPlaceholder.parentNode\n        : this.overlayOriginalParent instanceof HTMLElement\n          ? this.overlayOriginalParent\n          : null;\n\n    return (\n      scope?.querySelector('[data-slot=\"datepicker-input-shell\"]') ??\n      scope?.querySelector('[data-slot=\"datepicker-trigger\"]')\n    ) as HTMLElement | null;\n  }\n\n  private scheduleReposition(): void {\n    if (!this.controller().getOutputs().open || this.ownerWindow === null) {\n      return;\n    }\n\n    if (this.overlayLayoutFrame !== null) {\n      this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);\n    }\n\n    this.overlayLayoutFrame = this.ownerWindow.requestAnimationFrame(() => {\n      this.overlayLayoutFrame = null;\n      this.positionOverlay();\n    });\n  }\n\n  private positionOverlay(): void {\n    const overlay = this.elRef.nativeElement;\n    const anchor = this.findAnchorEl();\n    if (anchor === null || this.ownerWindow === null) {\n      return;\n    }\n\n    const anchorRect = rectFromClientRect(anchor.getBoundingClientRect());\n    const viewport = viewportRect(this.ownerWindow);\n    const width = Math.max(\n      0,\n      Math.min(anchorRect.width, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2),\n    );\n\n    overlay.style.width = `${width}px`;\n    overlay.style.maxWidth = `${Math.max(0, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2)}px`;\n    overlay.style.maxHeight = '';\n\n    const overlayRect = rectFromClientRect(overlay.getBoundingClientRect());\n    const result = computeOverlayPosition({\n      anchorRect,\n      collision: this.resolveCollision(),\n      direction: this.resolveDirection(),\n      offset: this.resolveOffset(),\n      overlayRect,\n      placement: this.resolvePlacement(),\n      viewportRect: viewport,\n    });\n\n    overlay.style.left = `${result.x}px`;\n    overlay.style.top = `${result.y}px`;\n\n    const anchorBottom = anchorRect.top + anchorRect.height;\n    const availableHeight =\n      result.side === 'top'\n        ? Math.max(0, Math.floor(anchorRect.top - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET))\n        : Math.max(\n            0,\n            Math.floor(viewport.height - anchorBottom - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET),\n          );\n\n    if (availableHeight > 0) {\n      overlay.style.maxHeight = `${availableHeight}px`;\n    }\n\n    this.resolvedPlacement.set(result.side === 'top' ? 'top' : 'bottom');\n    overlay.style.visibility = '';\n  }\n\n  private setupRepositionListeners(): void {\n    if (this.ownerWindow === null || this.removeResizeListener !== null || this.removeScrollListener !== null) {\n      return;\n    }\n\n    const schedule = (): void => {\n      this.scheduleReposition();\n    };\n\n    this.ownerWindow.addEventListener('resize', schedule);\n    this.ownerWindow.addEventListener('scroll', schedule, true);\n    this.removeResizeListener = () => this.ownerWindow?.removeEventListener('resize', schedule);\n    this.removeScrollListener = () => this.ownerWindow?.removeEventListener('scroll', schedule, true);\n\n    if ('ResizeObserver' in this.ownerWindow) {\n      const ResizeObserverCtor = this.ownerWindow.ResizeObserver;\n      this.resizeObserver = new ResizeObserverCtor(() => {\n        this.scheduleReposition();\n      });\n\n      const anchor = this.findAnchorEl();\n      if (anchor !== null && this.resizeObserver !== null) {\n        this.resizeObserver.observe(anchor);\n      }\n\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 mountToBodyAndPosition(): void {\n    const overlay = this.elRef.nativeElement;\n    if (this.ownerDocument === null) {\n      return;\n    }\n\n    this.setupRepositionListeners();\n\n    if (overlay.parentNode !== this.ownerDocument.body) {\n      this.ownerDocument.body.appendChild(overlay);\n    }\n\n    overlay.style.position = 'fixed';\n    overlay.style.left = '0px';\n    overlay.style.top = '0px';\n    overlay.style.visibility = 'hidden';\n    overlay.style.zIndex = '1000';\n\n    queueMicrotask(() => {\n      if (!this.controller().getOutputs().open) {\n        return;\n      }\n\n      this.positionOverlay();\n    });\n  }\n\n  private restoreToPlaceholder(force = false): void {\n    const overlay = this.elRef.nativeElement;\n    if (!force && overlay.parentNode !== this.ownerDocument?.body) {\n      return;\n    }\n\n    const placeholder = this.overlayPlaceholder;\n    if (placeholder?.parentNode !== null && placeholder !== null) {\n      placeholder.parentNode.insertBefore(overlay, placeholder);\n    } else if (this.overlayOriginalParent !== null) {\n      this.overlayOriginalParent.appendChild(overlay);\n    }\n\n    this.teardownRepositionListeners();\n    this.resolvedPlacement.set(this.resolvePlacement().side === 'top' ? 'top' : 'bottom');\n    overlay.style.left = '';\n    overlay.style.maxHeight = '';\n    overlay.style.maxWidth = '';\n    overlay.style.position = '';\n    overlay.style.top = '';\n    overlay.style.visibility = '';\n    overlay.style.width = '';\n    overlay.style.zIndex = '';\n  }\n\n  private resolvePlacement(): TngOverlayPlacement {\n    return this.placement() ?? { align: 'start', side: 'bottom' };\n  }\n\n  private resolveOffset(): TngOverlayOffset {\n    return this.offset() ?? { side: OVERLAY_OFFSET };\n  }\n\n  private resolveCollision(): TngOverlayCollisionOptions {\n    return this.collision() ?? {\n      flip: true,\n      padding: OVERLAY_VIEWPORT_MARGIN,\n      shift: true,\n    };\n  }\n\n  private resolveDirection(): 'ltr' | 'rtl' {\n    return this.controller().getOutputs().getHostAttributes()['dir'] === 'rtl' ? 'rtl' : 'ltr';\n  }\n}\n"]}

package/src/lib/form/input/tng-input.d.ts

@@ -46,18 +46,19 @@ export declare class TngInput {
     static ɵfac: i0.ɵɵFactoryDeclaration<TngInput, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TngInput, "input[tngInput], textarea[tngInput]", ["tngInput"], { "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; "isSignal": true; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-export declare class TngInputLeading {
+export declare class TngPrefix {
     readonly hostElement: any;
     protected readonly dataSlot: "input-leading";
-    static ɵfac: i0.ɵɵFactoryDeclaration<TngInputLeading, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TngInputLeading, "[tngInputLeading]", ["tngInputLeading"], {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TngPrefix, "[tngPrefix], [tngInputLeading]", ["tngPrefix"], {}, {}, never, never, true, never>;
 }
-export declare class TngInputTrailing {
+export declare class TngSuffix {
     readonly hostElement: any;
     protected readonly dataSlot: "input-trailing";
-    static ɵfac: i0.ɵɵFactoryDeclaration<TngInputTrailing, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TngInputTrailing, "[tngInputTrailing]", ["tngInputTrailing"], {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TngSuffix, "[tngSuffix], [tngInputTrailing]", ["tngSuffix"], {}, {}, never, never, true, never>;
 }
+export { TngPrefix as TngInputLeading, TngSuffix as TngInputTrailing };
 export declare class TngInputGroup implements AfterContentInit, OnDestroy {
     readonly hasLeading: import("@angular/core").InputSignal<boolean | null>;
     readonly hasTrailing: import("@angular/core").InputSignal<boolean | null>;
@@ -66,8 +67,8 @@ export declare class TngInputGroup implements AfterContentInit, OnDestroy {
     readonly readonly: import("@angular/core").InputSignal<boolean | null>;
     readonly controlCount: import("@angular/core").InputSignal<number | null>;
     protected controls: QueryList<TngInput>;
-    protected leadingSlots: QueryList<TngInputLeading>;
-    protected trailingSlots: QueryList<TngInputTrailing>;
+    protected prefixSlots: QueryList<TngPrefix>;
+    protected suffixSlots: QueryList<TngSuffix>;
     private readonly hostElement;
     private focused;
     private readonly destroyed$;
@@ -90,7 +91,6 @@ export declare class TngInputGroup implements AfterContentInit, OnDestroy {
     protected primaryControl(): TngInput | null;
     protected primaryControlElement(): HTMLInputElement | HTMLTextAreaElement | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<TngInputGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TngInputGroup, "tng-input-group, [tngInputGroup]", ["tngInputGroup"], { "hasLeading": { "alias": "hasLeading"; "required": false; "isSignal": true; }; "hasTrailing": { "alias": "hasTrailing"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "controlCount": { "alias": "controlCount"; "required": false; "isSignal": true; }; }, {}, ["controls", "leadingSlots", "trailingSlots"], ["[tngInputLeading], [data-tng-input-leading-proxy]", "input[tngInput], textarea[tngInput], [data-tng-input-control-proxy]", "[tngInputTrailing], [data-tng-input-trailing-proxy]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TngInputGroup, "tng-input-group, [tngInputGroup]", ["tngInputGroup"], { "hasLeading": { "alias": "hasLeading"; "required": false; "isSignal": true; }; "hasTrailing": { "alias": "hasTrailing"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "controlCount": { "alias": "controlCount"; "required": false; "isSignal": true; }; }, {}, ["controls", "prefixSlots", "suffixSlots"], ["[tngPrefix], [tngInputLeading], [data-tng-input-prefix-proxy]", "input[tngInput], textarea[tngInput], [data-tng-input-control-proxy]", "[tngSuffix], [tngInputTrailing], [data-tng-input-suffix-proxy]"], true, never>;
 }
-export {};
 //# sourceMappingURL=tng-input.d.ts.map

package/src/lib/form/input/tng-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tng-input.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/input/tng-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tng-input.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/input/tng-input.ts"],"names":[],"mappings":"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"}

package/src/lib/form/input/tng-input.js

@@ -165,38 +165,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: HostBinding,
                 args: ['attr.required']
             }] } });
-export class TngInputLeading {
+export class TngPrefix {
     hostElement = inject((ElementRef)).nativeElement;
     dataSlot = 'input-leading';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputLeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngInputLeading, isStandalone: true, selector: "[tngInputLeading]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngInputLeading"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngPrefix, isStandalone: true, selector: "[tngPrefix], [tngInputLeading]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngPrefix"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputLeading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngPrefix, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tngInputLeading]',
-                    exportAs: 'tngInputLeading',
+                    selector: '[tngPrefix], [tngInputLeading]',
+                    exportAs: 'tngPrefix',
                 }]
         }], propDecorators: { dataSlot: [{
                 type: HostBinding,
                 args: ['attr.data-slot']
             }] } });
-export class TngInputTrailing {
+export class TngSuffix {
     hostElement = inject((ElementRef)).nativeElement;
     dataSlot = 'input-trailing';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputTrailing, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngInputTrailing, isStandalone: true, selector: "[tngInputTrailing]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngInputTrailing"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngSuffix, isStandalone: true, selector: "[tngSuffix], [tngInputTrailing]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngSuffix"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputTrailing, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngSuffix, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tngInputTrailing]',
-                    exportAs: 'tngInputTrailing',
+                    selector: '[tngSuffix], [tngInputTrailing]',
+                    exportAs: 'tngSuffix',
                 }]
         }], propDecorators: { dataSlot: [{
                 type: HostBinding,
                 args: ['attr.data-slot']
             }] } });
+export { TngPrefix as TngInputLeading, TngSuffix as TngInputTrailing };
 export class TngInputGroup {
     hasLeading = input(null, ...(ngDevMode ? [{ debugName: "hasLeading" }] : []));
     hasTrailing = input(null, ...(ngDevMode ? [{ debugName: "hasTrailing" }] : []));
@@ -205,8 +206,8 @@ export class TngInputGroup {
     readonly = input(null, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     controlCount = input(null, ...(ngDevMode ? [{ debugName: "controlCount" }] : []));
     controls;
-    leadingSlots;
-    trailingSlots;
+    prefixSlots;
+    suffixSlots;
     hostElement = inject((ElementRef)).nativeElement;
     focused = false;
     destroyed$ = new Subject();
@@ -290,17 +291,17 @@ export class TngInputGroup {
         this.focused = false;
     }
     hasLeadingSlot() {
-        const proxy = this.hostElement.querySelector('[data-tng-input-leading-proxy]');
+        const proxy = this.hostElement.querySelector('[data-tng-input-prefix-proxy]');
         if (proxy instanceof HTMLElement)
             return hasProjectedContent(proxy);
-        const slots = this.leadingSlots?.toArray() ?? [];
+        const slots = this.prefixSlots?.toArray() ?? [];
         return slots.some((slot) => hasProjectedContent(slot.hostElement));
     }
     hasTrailingSlot() {
-        const proxy = this.hostElement.querySelector('[data-tng-input-trailing-proxy]');
+        const proxy = this.hostElement.querySelector('[data-tng-input-suffix-proxy]');
         if (proxy instanceof HTMLElement)
             return hasProjectedContent(proxy);
-        const slots = this.trailingSlots?.toArray() ?? [];
+        const slots = this.suffixSlots?.toArray() ?? [];
         return slots.some((slot) => hasProjectedContent(slot.hostElement));
     }
     effectiveHasLeading() {
@@ -328,10 +329,10 @@ export class TngInputGroup {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TngInputGroup, isStandalone: true, selector: "tng-input-group, [tngInputGroup]", inputs: { hasLeading: { classPropertyName: "hasLeading", publicName: "hasLeading", isSignal: true, isRequired: false, transformFunction: null }, hasTrailing: { classPropertyName: "hasTrailing", publicName: "hasTrailing", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, controlCount: { classPropertyName: "controlCount", publicName: "controlCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-has-leading": "this.dataHasLeading", "attr.data-has-trailing": "this.dataHasTrailing", "attr.data-disabled": "this.dataDisabled", "attr.data-invalid": "this.dataInvalid", "attr.data-readonly": "this.dataReadonly", "attr.data-focused": "this.dataFocused" } }, queries: [{ propertyName: "controls", predicate: TngInput, descendants: true }, { propertyName: "leadingSlots", predicate: TngInputLeading, descendants: true }, { propertyName: "trailingSlots", predicate: TngInputTrailing, descendants: true }], exportAs: ["tngInputGroup"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TngInputGroup, isStandalone: true, selector: "tng-input-group, [tngInputGroup]", inputs: { hasLeading: { classPropertyName: "hasLeading", publicName: "hasLeading", isSignal: true, isRequired: false, transformFunction: null }, hasTrailing: { classPropertyName: "hasTrailing", publicName: "hasTrailing", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, controlCount: { classPropertyName: "controlCount", publicName: "controlCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-has-leading": "this.dataHasLeading", "attr.data-has-trailing": "this.dataHasTrailing", "attr.data-disabled": "this.dataDisabled", "attr.data-invalid": "this.dataInvalid", "attr.data-readonly": "this.dataReadonly", "attr.data-focused": "this.dataFocused" } }, queries: [{ propertyName: "controls", predicate: TngInput, descendants: true }, { propertyName: "prefixSlots", predicate: TngPrefix, descendants: true }, { propertyName: "suffixSlots", predicate: TngSuffix, descendants: true }], exportAs: ["tngInputGroup"], ngImport: i0, template: `
     @if (hasLeadingSlot()) {
       <span class="tng-input-group-leading" data-slot="input-group-leading">
-        <ng-content select="[tngInputLeading], [data-tng-input-leading-proxy]"></ng-content>
+        <ng-content select="[tngPrefix], [tngInputLeading], [data-tng-input-prefix-proxy]"></ng-content>
       </span>
     }
 
@@ -341,7 +342,7 @@ export class TngInputGroup {
 
     @if (hasTrailingSlot()) {
       <span class="tng-input-group-trailing" data-slot="input-group-trailing">
-        <ng-content select="[tngInputTrailing], [data-tng-input-trailing-proxy]"></ng-content>
+        <ng-content select="[tngSuffix], [tngInputTrailing], [data-tng-input-suffix-proxy]"></ng-content>
       </span>
     }
   `, isInline: true });
@@ -354,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     template: `
     @if (hasLeadingSlot()) {
       <span class="tng-input-group-leading" data-slot="input-group-leading">
-        <ng-content select="[tngInputLeading], [data-tng-input-leading-proxy]"></ng-content>
+        <ng-content select="[tngPrefix], [tngInputLeading], [data-tng-input-prefix-proxy]"></ng-content>
       </span>
     }
 
@@ -364,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
     @if (hasTrailingSlot()) {
       <span class="tng-input-group-trailing" data-slot="input-group-trailing">
-        <ng-content select="[tngInputTrailing], [data-tng-input-trailing-proxy]"></ng-content>
+        <ng-content select="[tngSuffix], [tngInputTrailing], [data-tng-input-suffix-proxy]"></ng-content>
       </span>
     }
   `,
@@ -372,12 +373,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }], propDecorators: { hasLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLeading", required: false }] }], hasTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTrailing", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], controlCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlCount", required: false }] }], controls: [{
                 type: ContentChildren,
                 args: [TngInput, { descendants: true }]
-            }], leadingSlots: [{
+            }], prefixSlots: [{
                 type: ContentChildren,
-                args: [TngInputLeading, { descendants: true }]
-            }], trailingSlots: [{
+                args: [TngPrefix, { descendants: true }]
+            }], suffixSlots: [{
                 type: ContentChildren,
-                args: [TngInputTrailing, { descendants: true }]
+                args: [TngSuffix, { descendants: true }]
             }], dataSlot: [{
                 type: HostBinding,
                 args: ['attr.data-slot']