@tailng-ui/primitives 0.14.0 → 0.15.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/layout/grid/__tests__/tng-grid.test-harness.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentFixture } from '@angular/core/testing';
+import type { DebugElement } from '@angular/core';
+import { type TngGridActivateEvent, type TngGridCellValue, type TngGridFocusChangeEvent } from '../tng-grid';
+import * as i0 from "@angular/core";
+export declare class GridHarnessComponent {
+    ariaLabel: string;
+    ariaColcount: number | null;
+    ariaRowcount: number | null;
+    dir: 'ltr' | 'rtl';
+    focusRow: number | null | undefined;
+    focusCol: number | null | undefined;
+    selectionMode: 'none' | 'single';
+    value: TngGridCellValue | null | undefined;
+    defaultValue: TngGridCellValue | null | undefined;
+    wrap: boolean;
+    disableCell01: boolean;
+    readonly focusRowChanges: Array<number | null>;
+    readonly focusColChanges: Array<number | null>;
+    readonly focusEvents: TngGridFocusChangeEvent[];
+    readonly valueChanges: Array<TngGridCellValue | null>;
+    readonly activateEvents: TngGridActivateEvent[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridHarnessComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridHarnessComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+export declare function createGridHarnessFixture(overrides?: Partial<GridHarnessComponent>): Promise<ComponentFixture<GridHarnessComponent>>;
+export declare function dispatchGridKeydown(element: HTMLElement, key: string, init?: KeyboardEventInit): KeyboardEvent;
+export declare function getGrid(fixture: ComponentFixture<GridHarnessComponent>): HTMLElement;
+export declare function getOutsideButton(fixture: ComponentFixture<GridHarnessComponent>): HTMLButtonElement;
+export declare function getCell(fixture: ComponentFixture<GridHarnessComponent>, row: number, col: number): HTMLButtonElement;
+export declare function getRow(fixture: ComponentFixture<GridHarnessComponent>, row: number): HTMLElement;
+export declare function getCellDebugElement(fixture: ComponentFixture<GridHarnessComponent>, row: number, col: number): DebugElement;
+//# sourceMappingURL=tng-grid.test-harness.d.ts.map

package/src/lib/layout/grid/__tests__/tng-grid.test-harness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-grid.test-harness.d.ts","sourceRoot":"","sources":["../../../../../../../../../libs/tailng-ui/primitives/src/lib/layout/grid/__tests__/tng-grid.test-harness.ts"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAE7B,MAAM,aAAa,CAAC;;AAErB,qBAyHa,oBAAoB;IACxB,SAAS,SAAkB;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,GAAG,EAAE,KAAK,GAAG,KAAK,CAAS;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAa;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAa;IAChD,aAAa,EAAE,MAAM,GAAG,QAAQ,CAAU;IAC1C,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAa;IACvD,YAAY,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAa;IAC9D,IAAI,UAAS;IACb,aAAa,UAAQ;IAE5B,SAAgB,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAM;IAC3D,SAAgB,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAM;IAC3D,SAAgB,WAAW,EAAE,uBAAuB,EAAE,CAAM;IAC5D,SAAgB,YAAY,EAAE,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAM;IAClE,SAAgB,cAAc,EAAE,oBAAoB,EAAE,CAAM;yCAjBjD,oBAAoB;2CAApB,oBAAoB;CAkBhC;AAED,wBAAsB,wBAAwB,CAC5C,SAAS,GAAE,OAAO,CAAC,oBAAoB,CAAM,GAC5C,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CASjD;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,MAAM,EACX,IAAI,GAAE,iBAAsB,GAC3B,aAAa,CASf;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,WAAW,CAEpF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,iBAAiB,CAEnG;AAED,wBAAgB,OAAO,CACrB,OAAO,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,EAC/C,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,iBAAiB,CAEnB;AAED,wBAAgB,MAAM,CACpB,OAAO,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,EAC/C,GAAG,EAAE,MAAM,GACV,WAAW,CAEb;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,EAC/C,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,YAAY,CAOd"}

package/src/lib/layout/grid/__tests__/tng-grid.test-harness.js

@@ -0,0 +1,312 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TngGrid, TngGridCell, TngGridRow, } from '../tng-grid';
+import * as i0 from "@angular/core";
+export class GridHarnessComponent {
+    ariaLabel = 'Harness grid';
+    ariaColcount = null;
+    ariaRowcount = null;
+    dir = 'ltr';
+    focusRow = undefined;
+    focusCol = undefined;
+    selectionMode = 'none';
+    value = undefined;
+    defaultValue = undefined;
+    wrap = false;
+    disableCell01 = true;
+    focusRowChanges = [];
+    focusColChanges = [];
+    focusEvents = [];
+    valueChanges = [];
+    activateEvents = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: GridHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <div
+      tngGrid
+      [ariaLabel]="ariaLabel"
+      [ariaColcount]="ariaColcount"
+      [ariaRowcount]="ariaRowcount"
+      [dir]="dir"
+      [focusRow]="focusRow"
+      [focusCol]="focusCol"
+      [selectionMode]="selectionMode"
+      [value]="value"
+      [defaultValue]="defaultValue"
+      [wrap]="wrap"
+      (focusRowChange)="focusRowChanges.push($event)"
+      (focusColChange)="focusColChanges.push($event)"
+      (focusChange)="focusEvents.push($event)"
+      (valueChange)="valueChanges.push($event)"
+      (cellActivate)="activateEvents.push($event)"
+      data-testid="grid"
+    >
+      <div tngGridRow data-testid="row-0">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-0"
+          cellRole="columnheader"
+          [rowIndex]="0"
+          [colIndex]="0"
+        >
+          Header
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-1"
+          [disabled]="disableCell01"
+          [rowIndex]="0"
+          [colIndex]="1"
+        >
+          Alpha
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-2"
+          [rowIndex]="0"
+          [colIndex]="2"
+        >
+          Beta
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-1">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-0"
+          [rowIndex]="1"
+          [colIndex]="0"
+        >
+          Gamma
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-1"
+          [rowIndex]="1"
+          [colIndex]="1"
+          [rowSpan]="2"
+          [colSpan]="2"
+        >
+          Delta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-2"
+          [rowIndex]="1"
+          [colIndex]="2"
+        >
+          Epsilon
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-2">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-0"
+          [rowIndex]="2"
+          [colIndex]="0"
+        >
+          Zeta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-1"
+          [rowIndex]="2"
+          [colIndex]="1"
+        >
+          Eta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-2"
+          [rowIndex]="2"
+          [colIndex]="2"
+        >
+          Theta
+        </button>
+      </div>
+    </div>
+
+    <button type="button" data-testid="outside-button">Outside</button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngGrid, selector: "[tngGrid]", inputs: ["dir", "focusCol", "focusRow", "selectionMode", "value", "defaultValue", "wrap", "ariaLabel", "ariaColcount", "ariaRowcount"], outputs: ["focusRowChange", "focusColChange", "focusChange", "valueChange", "cellActivate"], exportAs: ["tngGrid"] }, { kind: "directive", type: TngGridRow, selector: "[tngGridRow]", exportAs: ["tngGridRow"] }, { kind: "directive", type: TngGridCell, selector: "[tngGridCell]", inputs: ["rowIndex", "colIndex", "rowSpan", "colSpan", "disabled", "selected", "cellRole"], exportAs: ["tngGridCell"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [TngGrid, TngGridRow, TngGridCell],
+                    template: `
+    <div
+      tngGrid
+      [ariaLabel]="ariaLabel"
+      [ariaColcount]="ariaColcount"
+      [ariaRowcount]="ariaRowcount"
+      [dir]="dir"
+      [focusRow]="focusRow"
+      [focusCol]="focusCol"
+      [selectionMode]="selectionMode"
+      [value]="value"
+      [defaultValue]="defaultValue"
+      [wrap]="wrap"
+      (focusRowChange)="focusRowChanges.push($event)"
+      (focusColChange)="focusColChanges.push($event)"
+      (focusChange)="focusEvents.push($event)"
+      (valueChange)="valueChanges.push($event)"
+      (cellActivate)="activateEvents.push($event)"
+      data-testid="grid"
+    >
+      <div tngGridRow data-testid="row-0">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-0"
+          cellRole="columnheader"
+          [rowIndex]="0"
+          [colIndex]="0"
+        >
+          Header
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-1"
+          [disabled]="disableCell01"
+          [rowIndex]="0"
+          [colIndex]="1"
+        >
+          Alpha
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-2"
+          [rowIndex]="0"
+          [colIndex]="2"
+        >
+          Beta
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-1">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-0"
+          [rowIndex]="1"
+          [colIndex]="0"
+        >
+          Gamma
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-1"
+          [rowIndex]="1"
+          [colIndex]="1"
+          [rowSpan]="2"
+          [colSpan]="2"
+        >
+          Delta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-2"
+          [rowIndex]="1"
+          [colIndex]="2"
+        >
+          Epsilon
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-2">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-0"
+          [rowIndex]="2"
+          [colIndex]="0"
+        >
+          Zeta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-1"
+          [rowIndex]="2"
+          [colIndex]="1"
+        >
+          Eta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-2"
+          [rowIndex]="2"
+          [colIndex]="2"
+        >
+          Theta
+        </button>
+      </div>
+    </div>
+
+    <button type="button" data-testid="outside-button">Outside</button>
+  `,
+                }]
+        }] });
+export async function createGridHarnessFixture(overrides = {}) {
+    await TestBed.configureTestingModule({
+        imports: [GridHarnessComponent],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(GridHarnessComponent);
+    Object.assign(fixture.componentInstance, overrides);
+    fixture.detectChanges();
+    return fixture;
+}
+export function dispatchGridKeydown(element, key, init = {}) {
+    const event = new KeyboardEvent('keydown', {
+        bubbles: true,
+        cancelable: true,
+        key,
+        ...init,
+    });
+    element.dispatchEvent(event);
+    return event;
+}
+export function getGrid(fixture) {
+    return queryByTestId(fixture, 'grid');
+}
+export function getOutsideButton(fixture) {
+    return queryByTestId(fixture, 'outside-button');
+}
+export function getCell(fixture, row, col) {
+    return queryByTestId(fixture, `cell-${row}-${col}`);
+}
+export function getRow(fixture, row) {
+    return queryByTestId(fixture, `row-${row}`);
+}
+export function getCellDebugElement(fixture, row, col) {
+    const de = fixture.debugElement.query(By.css(`[data-testid="cell-${row}-${col}"]`));
+    if (de === null) {
+        throw new Error(`Missing cell ${row}:${col}`);
+    }
+    return de;
+}
+function queryByTestId(fixture, testId) {
+    const hostElement = fixture.nativeElement;
+    const element = hostElement.querySelector(`[data-testid="${testId}"]`);
+    if (element === null) {
+        throw new Error(`Missing element with data-testid="${testId}"`);
+    }
+    return element;
+}
+//# sourceMappingURL=tng-grid.test-harness.js.map