@tailng-ui/components 0.1.0

package/src/lib/overlay/dialog/tng-dialog.component.js

@@ -0,0 +1,286 @@
+import { __decorate } from "tslib";
+import { afterNextRender, booleanAttribute, Component, effect, inject, Injector, input, output, viewChild, } from '@angular/core';
+import { createOverlayScrollLockManager, createTngIdFactory, } from '@tailng-ui/cdk';
+import { tngOverlayRuntime } from '../tng-overlay-runtime';
+const createDialogId = createTngIdFactory('tng-dialog');
+const focusableSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function readKeyboardEvent(event) {
+    return event instanceof KeyboardEvent ? event : null;
+}
+function resolveActiveElement(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    const activeElement = documentRef.activeElement;
+    return activeElement instanceof HTMLElement ? activeElement : null;
+}
+function resolveFocusableElements(container) {
+    if (!(container instanceof HTMLElement)) {
+        return [];
+    }
+    const candidates = Array.from(container.querySelectorAll(focusableSelector));
+    const focusableElements = [];
+    for (const candidate of candidates) {
+        if (!candidate.hasAttribute('disabled')) {
+            focusableElements.push(candidate);
+        }
+    }
+    return focusableElements;
+}
+function resolveFirstFocusableWithin(container) {
+    return resolveFocusableElements(container)[0] ?? null;
+}
+function resolveMarkedInitialElement(container) {
+    if (!(container instanceof HTMLElement)) {
+        return null;
+    }
+    const markedInitial = container.querySelector('[data-tng-dialog-initial-focus]');
+    if (markedInitial === null) {
+        return null;
+    }
+    if (resolveFocusableElements(container).includes(markedInitial)) {
+        return markedInitial;
+    }
+    return resolveFirstFocusableWithin(markedInitial);
+}
+function toScrollLockDocument(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    return documentRef;
+}
+function toDialogCloseReason(reason) {
+    if (reason === 'escape-key') {
+        return 'escape';
+    }
+    if (reason === 'outside-pointer') {
+        return 'backdrop';
+    }
+    return null;
+}
+let TngDialogComponent = class TngDialogComponent {
+    closeOnBackdrop = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnEscape = input(true, {
+        transform: booleanAttribute,
+    });
+    description = input(null);
+    open = input(false, {
+        transform: booleanAttribute,
+    });
+    size = input('md');
+    title = input('Dialog');
+    closed = output();
+    openChange = output();
+    descriptionId;
+    panelId;
+    titleId;
+    documentRef = typeof document === 'undefined' ? null : document;
+    injector = inject(Injector);
+    panelRef = viewChild('panelRef');
+    scrollLock = createOverlayScrollLockManager({
+        documentRef: toScrollLockDocument(this.documentRef),
+    });
+    instanceId = createDialogId();
+    isActive = false;
+    isLayerRegistered = false;
+    restoreFocusElement = null;
+    openStateEffect = effect(() => {
+        if (this.open()) {
+            this.activateDialog();
+            return;
+        }
+        this.deactivateDialog();
+    });
+    constructor() {
+        this.descriptionId = `${this.instanceId}-description`;
+        this.panelId = `${this.instanceId}-panel`;
+        this.titleId = `${this.instanceId}-title`;
+    }
+    close() {
+        this.requestClose('programmatic');
+    }
+    ngOnDestroy() {
+        this.openStateEffect.destroy();
+        this.deactivateDialog();
+    }
+    onCloseButtonClick() {
+        this.requestClose('close-button');
+    }
+    onPanelKeydown(event) {
+        const keyboardEvent = readKeyboardEvent(event);
+        if (keyboardEvent === null) {
+            return;
+        }
+        if (keyboardEvent.key === 'Tab') {
+            this.trapTabNavigation(event);
+        }
+    }
+    activateDialog() {
+        if (this.isActive) {
+            return;
+        }
+        this.isActive = true;
+        this.registerOverlayLayer();
+        this.restoreFocusElement = resolveActiveElement(this.documentRef);
+        this.scrollLock.acquire(this.instanceId);
+        afterNextRender(() => {
+            this.focusInitialElement();
+        }, { injector: this.injector });
+    }
+    deactivateDialog() {
+        if (!this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        this.unregisterOverlayLayer();
+        this.scrollLock.release(this.instanceId);
+        this.restoreFocusElement?.focus();
+        this.restoreFocusElement = null;
+    }
+    handleOverlayDismiss(reason) {
+        const closeReason = toDialogCloseReason(reason);
+        if (closeReason === null) {
+            return;
+        }
+        this.requestClose(closeReason);
+    }
+    registerOverlayLayer() {
+        if (this.isLayerRegistered) {
+            return;
+        }
+        this.isLayerRegistered = true;
+        tngOverlayRuntime.registerLayer({
+            containsTarget: (target, path) => {
+                const panel = this.panelRef()?.nativeElement;
+                if (panel === undefined) {
+                    return false;
+                }
+                if (path.includes(panel)) {
+                    return true;
+                }
+                return target instanceof Node ? panel.contains(target) : false;
+            },
+            dismissOnEscape: this.closeOnEscape(),
+            dismissOnOutsidePointer: this.closeOnBackdrop(),
+            id: this.instanceId,
+            modal: true,
+            onDismiss: (reason) => {
+                this.handleOverlayDismiss(reason);
+            },
+            priority: 100,
+        });
+    }
+    unregisterOverlayLayer() {
+        if (!this.isLayerRegistered) {
+            return;
+        }
+        this.isLayerRegistered = false;
+        tngOverlayRuntime.unregisterLayer(this.instanceId);
+    }
+    focusInitialElement() {
+        const panel = this.panelRef()?.nativeElement;
+        if (panel === undefined) {
+            return;
+        }
+        const markedInitial = resolveMarkedInitialElement(panel);
+        if (markedInitial !== null) {
+            markedInitial.focus();
+            return;
+        }
+        const firstFocusable = resolveFirstFocusableWithin(panel);
+        if (firstFocusable !== null) {
+            firstFocusable.focus();
+            return;
+        }
+        panel.focus();
+    }
+    preventAndFocus(event, target) {
+        const keyboardEvent = readKeyboardEvent(event);
+        if (keyboardEvent === null || !(target instanceof HTMLElement)) {
+            return;
+        }
+        keyboardEvent.preventDefault();
+        target.focus();
+    }
+    requestClose(reason) {
+        this.closed.emit(reason);
+        this.openChange.emit(false);
+    }
+    resolveFocusTrapState(panel) {
+        if (!(panel instanceof HTMLElement)) {
+            return null;
+        }
+        const focusableElements = resolveFocusableElements(panel);
+        const first = focusableElements[0];
+        if (first === undefined) {
+            return null;
+        }
+        return {
+            activeElement: resolveActiveElement(this.documentRef),
+            first,
+            last: focusableElements[focusableElements.length - 1] ?? first,
+            panel,
+        };
+    }
+    focusEdgeWhenOutsidePanel(event, focusState) {
+        const state = focusState;
+        const activeElement = state.activeElement;
+        if (activeElement !== null && state.panel.contains(activeElement)) {
+            return false;
+        }
+        const keyboardEvent = readKeyboardEvent(event);
+        if (keyboardEvent === null) {
+            return true;
+        }
+        const edge = keyboardEvent.shiftKey ? state.last : state.first;
+        this.preventAndFocus(keyboardEvent, edge);
+        return true;
+    }
+    wrapTabAtEdges(event, focusState) {
+        const state = focusState;
+        const keyboardEvent = readKeyboardEvent(event);
+        if (keyboardEvent === null) {
+            return;
+        }
+        if (keyboardEvent.shiftKey && state.activeElement === state.first) {
+            this.preventAndFocus(keyboardEvent, state.last);
+            return;
+        }
+        if (!keyboardEvent.shiftKey && state.activeElement === state.last) {
+            this.preventAndFocus(keyboardEvent, state.first);
+        }
+    }
+    trapTabNavigation(event) {
+        const panel = this.panelRef()?.nativeElement;
+        if (panel === undefined) {
+            return;
+        }
+        const focusState = this.resolveFocusTrapState(panel);
+        if (focusState === null) {
+            this.preventAndFocus(event, panel);
+            return;
+        }
+        if (this.focusEdgeWhenOutsidePanel(event, focusState)) {
+            return;
+        }
+        this.wrapTabAtEdges(event, focusState);
+    }
+};
+TngDialogComponent = __decorate([
+    Component({
+        selector: 'tng-dialog',
+        templateUrl: './tng-dialog.component.html',
+        styleUrl: './tng-dialog.component.css',
+    })
+], TngDialogComponent);
+export { TngDialogComponent };
+//# sourceMappingURL=tng-dialog.component.js.map

package/src/lib/overlay/dialog/tng-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-dialog.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/overlay/dialog/tng-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  afterNextRender,\n  booleanAttribute,\n  Component,\n  effect,\n  inject,\n  Injector,\n  input,\n  output,\n  viewChild,\n} from '@angular/core';\nimport type { ElementRef, OnDestroy } from '@angular/core';\nimport {\n  createOverlayScrollLockManager,\n  createTngIdFactory,\n  type TngOverlayDismissReason,\n} from '@tailng-ui/cdk';\nimport type { TngScrollLockDocument } from '@tailng-ui/cdk/overlay';\nimport { tngOverlayRuntime } from '../tng-overlay-runtime';\n\nconst createDialogId = createTngIdFactory('tng-dialog');\n\nconst focusableSelector = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\ntype TngFocusTrapState = Readonly<{\n  activeElement: HTMLElement | null;\n  first: HTMLElement;\n  last: HTMLElement;\n  panel: HTMLElement;\n}>;\n\nexport type TngDialogCloseReason = 'backdrop' | 'close-button' | 'escape' | 'programmatic';\nexport type TngDialogSize = 'lg' | 'md' | 'sm';\n\nfunction readKeyboardEvent(event: unknown): KeyboardEvent | null {\n  return event instanceof KeyboardEvent ? event : null;\n}\n\nfunction resolveActiveElement(documentRef: unknown): HTMLElement | null {\n  if (!(documentRef instanceof Document)) {\n    return null;\n  }\n\n  const activeElement = documentRef.activeElement;\n  return activeElement instanceof HTMLElement ? activeElement : null;\n}\n\nfunction resolveFocusableElements(container: unknown): readonly HTMLElement[] {\n  if (!(container instanceof HTMLElement)) {\n    return [];\n  }\n\n  const candidates = Array.from(container.querySelectorAll<HTMLElement>(focusableSelector));\n  const focusableElements: HTMLElement[] = [];\n  for (const candidate of candidates) {\n    if (!candidate.hasAttribute('disabled')) {\n      focusableElements.push(candidate);\n    }\n  }\n\n  return focusableElements;\n}\n\nfunction resolveFirstFocusableWithin(container: unknown): HTMLElement | null {\n  return resolveFocusableElements(container)[0] ?? null;\n}\n\nfunction resolveMarkedInitialElement(container: unknown): HTMLElement | null {\n  if (!(container instanceof HTMLElement)) {\n    return null;\n  }\n\n  const markedInitial = container.querySelector<HTMLElement>('[data-tng-dialog-initial-focus]');\n  if (markedInitial === null) {\n    return null;\n  }\n\n  if (resolveFocusableElements(container).includes(markedInitial)) {\n    return markedInitial;\n  }\n\n  return resolveFirstFocusableWithin(markedInitial);\n}\n\nfunction toScrollLockDocument(documentRef: unknown): TngScrollLockDocument | null {\n  if (!(documentRef instanceof Document)) {\n    return null;\n  }\n\n  return documentRef as unknown as TngScrollLockDocument;\n}\n\nfunction toDialogCloseReason(reason: TngOverlayDismissReason): TngDialogCloseReason | null {\n  if (reason === 'escape-key') {\n    return 'escape';\n  }\n\n  if (reason === 'outside-pointer') {\n    return 'backdrop';\n  }\n\n  return null;\n}\n\n@Component({\n  selector: 'tng-dialog',\n  templateUrl: './tng-dialog.component.html',\n  styleUrl: './tng-dialog.component.css',\n})\nexport class TngDialogComponent implements OnDestroy {\n  public readonly closeOnBackdrop = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n  public readonly closeOnEscape = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n  public readonly description = input<string | null>(null);\n  public readonly open = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly size = input<TngDialogSize>('md');\n  public readonly title = input<string>('Dialog');\n\n  public readonly closed = output<TngDialogCloseReason>();\n  public readonly openChange = output<boolean>();\n\n  protected readonly descriptionId: string;\n  protected readonly panelId: string;\n  protected readonly titleId: string;\n\n  private readonly documentRef = typeof document === 'undefined' ? null : document;\n  private readonly injector = inject(Injector);\n  private readonly panelRef = viewChild<ElementRef<HTMLElement>>('panelRef');\n  private readonly scrollLock = createOverlayScrollLockManager({\n    documentRef: toScrollLockDocument(this.documentRef),\n  });\n  private readonly instanceId = createDialogId();\n  private isActive = false;\n  private isLayerRegistered = false;\n  private restoreFocusElement: HTMLElement | null = null;\n\n  private readonly openStateEffect = effect((): void => {\n    if (this.open()) {\n      this.activateDialog();\n      return;\n    }\n\n    this.deactivateDialog();\n  });\n\n  public constructor() {\n    this.descriptionId = `${this.instanceId}-description`;\n    this.panelId = `${this.instanceId}-panel`;\n    this.titleId = `${this.instanceId}-title`;\n  }\n\n  public close(): void {\n    this.requestClose('programmatic');\n  }\n\n  public ngOnDestroy(): void {\n    this.openStateEffect.destroy();\n    this.deactivateDialog();\n  }\n\n  public onCloseButtonClick(): void {\n    this.requestClose('close-button');\n  }\n\n  public onPanelKeydown(event: unknown): void {\n    const keyboardEvent = readKeyboardEvent(event);\n    if (keyboardEvent === null) {\n      return;\n    }\n\n    if (keyboardEvent.key === 'Tab') {\n      this.trapTabNavigation(event);\n    }\n  }\n\n  private activateDialog(): void {\n    if (this.isActive) {\n      return;\n    }\n\n    this.isActive = true;\n    this.registerOverlayLayer();\n    this.restoreFocusElement = resolveActiveElement(this.documentRef);\n    this.scrollLock.acquire(this.instanceId);\n    afterNextRender(\n      (): void => {\n        this.focusInitialElement();\n      },\n      { injector: this.injector },\n    );\n  }\n\n  private deactivateDialog(): void {\n    if (!this.isActive) {\n      return;\n    }\n\n    this.isActive = false;\n    this.unregisterOverlayLayer();\n    this.scrollLock.release(this.instanceId);\n    this.restoreFocusElement?.focus();\n    this.restoreFocusElement = null;\n  }\n\n  private handleOverlayDismiss(reason: TngOverlayDismissReason): void {\n    const closeReason = toDialogCloseReason(reason);\n    if (closeReason === null) {\n      return;\n    }\n\n    this.requestClose(closeReason);\n  }\n\n  private registerOverlayLayer(): void {\n    if (this.isLayerRegistered) {\n      return;\n    }\n\n    this.isLayerRegistered = true;\n    tngOverlayRuntime.registerLayer({\n      containsTarget: (target: unknown, path: readonly unknown[]): boolean => {\n        const panel = this.panelRef()?.nativeElement;\n        if (panel === undefined) {\n          return false;\n        }\n\n        if (path.includes(panel)) {\n          return true;\n        }\n\n        return target instanceof Node ? panel.contains(target) : false;\n      },\n      dismissOnEscape: this.closeOnEscape(),\n      dismissOnOutsidePointer: this.closeOnBackdrop(),\n      id: this.instanceId,\n      modal: true,\n      onDismiss: (reason: TngOverlayDismissReason): void => {\n        this.handleOverlayDismiss(reason);\n      },\n      priority: 100,\n    });\n  }\n\n  private unregisterOverlayLayer(): void {\n    if (!this.isLayerRegistered) {\n      return;\n    }\n\n    this.isLayerRegistered = false;\n    tngOverlayRuntime.unregisterLayer(this.instanceId);\n  }\n\n  private focusInitialElement(): void {\n    const panel = this.panelRef()?.nativeElement;\n    if (panel === undefined) {\n      return;\n    }\n\n    const markedInitial = resolveMarkedInitialElement(panel);\n    if (markedInitial !== null) {\n      markedInitial.focus();\n      return;\n    }\n\n    const firstFocusable = resolveFirstFocusableWithin(panel);\n    if (firstFocusable !== null) {\n      firstFocusable.focus();\n      return;\n    }\n\n    panel.focus();\n  }\n\n  private preventAndFocus(event: unknown, target: unknown): void {\n    const keyboardEvent = readKeyboardEvent(event);\n    if (keyboardEvent === null || !(target instanceof HTMLElement)) {\n      return;\n    }\n\n    keyboardEvent.preventDefault();\n    target.focus();\n  }\n\n  private requestClose(reason: TngDialogCloseReason): void {\n    this.closed.emit(reason);\n    this.openChange.emit(false);\n  }\n\n  private resolveFocusTrapState(panel: unknown): TngFocusTrapState | null {\n    if (!(panel instanceof HTMLElement)) {\n      return null;\n    }\n\n    const focusableElements = resolveFocusableElements(panel);\n    const first = focusableElements[0];\n    if (first === undefined) {\n      return null;\n    }\n\n    return {\n      activeElement: resolveActiveElement(this.documentRef),\n      first,\n      last: focusableElements[focusableElements.length - 1] ?? first,\n      panel,\n    };\n  }\n\n  private focusEdgeWhenOutsidePanel(event: unknown, focusState: unknown): boolean {\n    const state = focusState as TngFocusTrapState;\n    const activeElement = state.activeElement;\n    if (activeElement !== null && state.panel.contains(activeElement)) {\n      return false;\n    }\n\n    const keyboardEvent = readKeyboardEvent(event);\n    if (keyboardEvent === null) {\n      return true;\n    }\n\n    const edge = keyboardEvent.shiftKey ? state.last : state.first;\n    this.preventAndFocus(keyboardEvent, edge);\n    return true;\n  }\n\n  private wrapTabAtEdges(event: unknown, focusState: unknown): void {\n    const state = focusState as TngFocusTrapState;\n    const keyboardEvent = readKeyboardEvent(event);\n    if (keyboardEvent === null) {\n      return;\n    }\n\n    if (keyboardEvent.shiftKey && state.activeElement === state.first) {\n      this.preventAndFocus(keyboardEvent, state.last);\n      return;\n    }\n\n    if (!keyboardEvent.shiftKey && state.activeElement === state.last) {\n      this.preventAndFocus(keyboardEvent, state.first);\n    }\n  }\n\n  private trapTabNavigation(event: unknown): void {\n    const panel = this.panelRef()?.nativeElement;\n    if (panel === undefined) {\n      return;\n    }\n\n    const focusState = this.resolveFocusTrapState(panel);\n    if (focusState === null) {\n      this.preventAndFocus(event, panel);\n      return;\n    }\n\n    if (this.focusEdgeWhenOutsidePanel(event, focusState)) {\n      return;\n    }\n\n    this.wrapTabAtEdges(event, focusState);\n  }\n}\n"]}

package/src/lib/overlay/index.d.ts

@@ -0,0 +1,7 @@
+export * from './dialog/tng-dialog.component';
+export { TngDialogComponent as TngDialog } from './dialog/tng-dialog.component';
+export * from './popover/tng-popover.component';
+export { TngPopoverComponent as TngPopover } from './popover/tng-popover.component';
+export * from './tooltip/tng-tooltip.component';
+export { TngTooltipComponent as TngTooltip } from './tooltip/tng-tooltip.component';
+//# sourceMappingURL=index.d.ts.map

package/src/lib/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/overlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACpF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC"}

package/src/lib/overlay/index.js

@@ -0,0 +1,7 @@
+export * from './dialog/tng-dialog.component';
+export { TngDialogComponent as TngDialog } from './dialog/tng-dialog.component';
+export * from './popover/tng-popover.component';
+export { TngPopoverComponent as TngPopover } from './popover/tng-popover.component';
+export * from './tooltip/tng-tooltip.component';
+export { TngTooltipComponent as TngTooltip } from './tooltip/tng-tooltip.component';
+//# sourceMappingURL=index.js.map

package/src/lib/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/overlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACpF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export * from './dialog/tng-dialog.component';\nexport { TngDialogComponent as TngDialog } from './dialog/tng-dialog.component';\nexport * from './popover/tng-popover.component';\nexport { TngPopoverComponent as TngPopover } from './popover/tng-popover.component';\nexport * from './tooltip/tng-tooltip.component';\nexport { TngTooltipComponent as TngTooltip } from './tooltip/tng-tooltip.component';\n"]}

package/src/lib/overlay/popover/tng-popover.component.d.ts

@@ -0,0 +1,28 @@
+import type { OnDestroy } from '@angular/core';
+export type TngPopoverCloseReason = 'escape' | 'outside-pointer' | 'programmatic' | 'trigger-toggle';
+export declare class TngPopoverComponent implements OnDestroy {
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly closeOnOutsidePointer: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly open: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly triggerLabel: import("@angular/core").InputSignal<string>;
+    readonly closed: import("@angular/core").OutputEmitterRef<TngPopoverCloseReason>;
+    readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+    protected readonly panelId: string;
+    private readonly hostRef;
+    private readonly injector;
+    private readonly panelRef;
+    private readonly instanceId;
+    private isLayerRegistered;
+    private readonly openStateEffect;
+    constructor();
+    close(): void;
+    ngOnDestroy(): void;
+    onTriggerClick(): void;
+    private handleOverlayDismiss;
+    private registerOverlayLayer;
+    private unregisterOverlayLayer;
+    private focusInitialElement;
+    private requestClose;
+}
+//# sourceMappingURL=tng-popover.component.d.ts.map

package/src/lib/overlay/popover/tng-popover.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-popover.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/overlay/popover/tng-popover.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAe/C,MAAM,MAAM,qBAAqB,GAC7B,QAAQ,GACR,iBAAiB,GACjB,cAAc,GACd,gBAAgB,CAAC;AAsBrB,qBAKa,mBAAoB,YAAW,SAAS;IACnD,SAAgB,SAAS,8CAA4B;IACrD,SAAgB,aAAa,8EAE1B;IACH,SAAgB,qBAAqB,8EAElC;IACH,SAAgB,IAAI,8EAEjB;IACH,SAAgB,YAAY,8CAAmC;IAE/D,SAAgB,MAAM,kEAAmC;IACzD,SAAgB,UAAU,oDAAqB;IAE/C,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAEnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+C;IACvE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAkD;IAC3E,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAChD,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAQ7B;;IAMI,KAAK,IAAI,IAAI;IAIb,WAAW,IAAI,IAAI;IAKnB,cAAc,IAAI,IAAI;IAS7B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,YAAY;CAIrB"}

package/src/lib/overlay/popover/tng-popover.component.js

@@ -0,0 +1,133 @@
+import { __decorate } from "tslib";
+import { afterNextRender, booleanAttribute, Component, ElementRef, effect, inject, Injector, input, output, viewChild, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+import { tngOverlayRuntime } from '../tng-overlay-runtime';
+const createPopoverId = createTngIdFactory('tng-popover');
+const focusableSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function resolveFocusableElements(container) {
+    if (!(container instanceof HTMLElement)) {
+        return [];
+    }
+    return Array.from(container.querySelectorAll(focusableSelector));
+}
+function toPopoverCloseReason(reason) {
+    if (reason === 'escape-key') {
+        return 'escape';
+    }
+    if (reason === 'outside-pointer') {
+        return 'outside-pointer';
+    }
+    return null;
+}
+let TngPopoverComponent = class TngPopoverComponent {
+    ariaLabel = input('Popover');
+    closeOnEscape = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnOutsidePointer = input(true, {
+        transform: booleanAttribute,
+    });
+    open = input(false, {
+        transform: booleanAttribute,
+    });
+    triggerLabel = input('Toggle Popover');
+    closed = output();
+    openChange = output();
+    panelId;
+    hostRef = inject(ElementRef);
+    injector = inject(Injector);
+    panelRef = viewChild('panelRef');
+    instanceId = createPopoverId();
+    isLayerRegistered = false;
+    openStateEffect = effect(() => {
+        if (this.open()) {
+            this.registerOverlayLayer();
+            this.focusInitialElement();
+            return;
+        }
+        this.unregisterOverlayLayer();
+    });
+    constructor() {
+        this.panelId = `${this.instanceId}-panel`;
+    }
+    close() {
+        this.requestClose('programmatic');
+    }
+    ngOnDestroy() {
+        this.openStateEffect.destroy();
+        this.unregisterOverlayLayer();
+    }
+    onTriggerClick() {
+        if (this.open()) {
+            this.requestClose('trigger-toggle');
+            return;
+        }
+        this.openChange.emit(true);
+    }
+    handleOverlayDismiss(reason) {
+        const closeReason = toPopoverCloseReason(reason);
+        if (closeReason === null) {
+            return;
+        }
+        this.requestClose(closeReason);
+    }
+    registerOverlayLayer() {
+        if (this.isLayerRegistered) {
+            return;
+        }
+        this.isLayerRegistered = true;
+        tngOverlayRuntime.registerLayer({
+            containsTarget: (target) => {
+                return target instanceof Node ? this.hostRef.nativeElement.contains(target) : false;
+            },
+            dismissOnEscape: this.closeOnEscape(),
+            dismissOnOutsidePointer: this.closeOnOutsidePointer(),
+            id: this.instanceId,
+            onDismiss: (reason) => {
+                this.handleOverlayDismiss(reason);
+            },
+            priority: 110,
+        });
+    }
+    unregisterOverlayLayer() {
+        if (!this.isLayerRegistered) {
+            return;
+        }
+        this.isLayerRegistered = false;
+        tngOverlayRuntime.unregisterLayer(this.instanceId);
+    }
+    focusInitialElement() {
+        afterNextRender(() => {
+            const panel = this.panelRef()?.nativeElement;
+            if (panel === undefined) {
+                return;
+            }
+            const firstFocusable = resolveFocusableElements(panel)[0];
+            if (firstFocusable !== undefined) {
+                firstFocusable.focus();
+                return;
+            }
+            panel.focus();
+        }, { injector: this.injector });
+    }
+    requestClose(reason) {
+        this.closed.emit(reason);
+        this.openChange.emit(false);
+    }
+};
+TngPopoverComponent = __decorate([
+    Component({
+        selector: 'tng-popover',
+        templateUrl: './tng-popover.component.html',
+        styleUrl: './tng-popover.component.css',
+    })
+], TngPopoverComponent);
+export { TngPopoverComponent };
+//# sourceMappingURL=tng-popover.component.js.map

package/src/lib/overlay/popover/tng-popover.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-popover.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/overlay/popover/tng-popover.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  afterNextRender,\n  booleanAttribute,\n  Component,\n  ElementRef,\n  effect,\n  inject,\n  Injector,\n  input,\n  output,\n  viewChild,\n} from '@angular/core';\nimport type { OnDestroy } from '@angular/core';\nimport { createTngIdFactory, type TngOverlayDismissReason } from '@tailng-ui/cdk';\nimport { tngOverlayRuntime } from '../tng-overlay-runtime';\n\nconst createPopoverId = createTngIdFactory('tng-popover');\n\nconst focusableSelector = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nexport type TngPopoverCloseReason =\n  | 'escape'\n  | 'outside-pointer'\n  | 'programmatic'\n  | 'trigger-toggle';\n\nfunction resolveFocusableElements(container: unknown): readonly HTMLElement[] {\n  if (!(container instanceof HTMLElement)) {\n    return [];\n  }\n\n  return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector));\n}\n\nfunction toPopoverCloseReason(reason: TngOverlayDismissReason): TngPopoverCloseReason | null {\n  if (reason === 'escape-key') {\n    return 'escape';\n  }\n\n  if (reason === 'outside-pointer') {\n    return 'outside-pointer';\n  }\n\n  return null;\n}\n\n@Component({\n  selector: 'tng-popover',\n  templateUrl: './tng-popover.component.html',\n  styleUrl: './tng-popover.component.css',\n})\nexport class TngPopoverComponent implements OnDestroy {\n  public readonly ariaLabel = input<string>('Popover');\n  public readonly closeOnEscape = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n  public readonly closeOnOutsidePointer = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n  public readonly open = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly triggerLabel = input<string>('Toggle Popover');\n\n  public readonly closed = output<TngPopoverCloseReason>();\n  public readonly openChange = output<boolean>();\n\n  protected readonly panelId: string;\n\n  private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly injector = inject(Injector);\n  private readonly panelRef = viewChild<ElementRef<HTMLElement>>('panelRef');\n  private readonly instanceId = createPopoverId();\n  private isLayerRegistered = false;\n  private readonly openStateEffect = effect((): void => {\n    if (this.open()) {\n      this.registerOverlayLayer();\n      this.focusInitialElement();\n      return;\n    }\n\n    this.unregisterOverlayLayer();\n  });\n\n  public constructor() {\n    this.panelId = `${this.instanceId}-panel`;\n  }\n\n  public close(): void {\n    this.requestClose('programmatic');\n  }\n\n  public ngOnDestroy(): void {\n    this.openStateEffect.destroy();\n    this.unregisterOverlayLayer();\n  }\n\n  public onTriggerClick(): void {\n    if (this.open()) {\n      this.requestClose('trigger-toggle');\n      return;\n    }\n\n    this.openChange.emit(true);\n  }\n\n  private handleOverlayDismiss(reason: TngOverlayDismissReason): void {\n    const closeReason = toPopoverCloseReason(reason);\n    if (closeReason === null) {\n      return;\n    }\n\n    this.requestClose(closeReason);\n  }\n\n  private registerOverlayLayer(): void {\n    if (this.isLayerRegistered) {\n      return;\n    }\n\n    this.isLayerRegistered = true;\n    tngOverlayRuntime.registerLayer({\n      containsTarget: (target: unknown): boolean => {\n        return target instanceof Node ? this.hostRef.nativeElement.contains(target) : false;\n      },\n      dismissOnEscape: this.closeOnEscape(),\n      dismissOnOutsidePointer: this.closeOnOutsidePointer(),\n      id: this.instanceId,\n      onDismiss: (reason: TngOverlayDismissReason): void => {\n        this.handleOverlayDismiss(reason);\n      },\n      priority: 110,\n    });\n  }\n\n  private unregisterOverlayLayer(): void {\n    if (!this.isLayerRegistered) {\n      return;\n    }\n\n    this.isLayerRegistered = false;\n    tngOverlayRuntime.unregisterLayer(this.instanceId);\n  }\n\n  private focusInitialElement(): void {\n    afterNextRender(\n      (): void => {\n        const panel = this.panelRef()?.nativeElement;\n        if (panel === undefined) {\n          return;\n        }\n\n        const firstFocusable = resolveFocusableElements(panel)[0];\n        if (firstFocusable !== undefined) {\n          firstFocusable.focus();\n          return;\n        }\n\n        panel.focus();\n      },\n      { injector: this.injector },\n    );\n  }\n\n  private requestClose(reason: TngPopoverCloseReason): void {\n    this.closed.emit(reason);\n    this.openChange.emit(false);\n  }\n}\n"]}

package/src/lib/overlay/tng-overlay-runtime.d.ts

@@ -0,0 +1,11 @@
+export declare const tngOverlayRuntime: Readonly<{
+    clearLayers: () => void;
+    dispatchKeydown: (event: import("@tailng-ui/cdk").TngOverlayKeyboardEvent) => void;
+    dispatchPointerDown: (event: import("@tailng-ui/cdk").TngOverlayPointerEvent) => void;
+    dismissById: (id: string, reason: import("@tailng-ui/cdk").TngOverlayDismissReason) => void;
+    getLayerIds: () => readonly string[];
+    isTopLayer: (id: string) => boolean;
+    registerLayer: (layer: import("@tailng-ui/cdk").TngOverlayLayer) => void;
+    unregisterLayer: (id: string) => void;
+}>;
+//# sourceMappingURL=tng-overlay-runtime.d.ts.map

package/src/lib/overlay/tng-overlay-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-overlay-runtime.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/overlay/tng-overlay-runtime.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,iBAAiB;;;;;;;;;EAE5B,CAAC"}

package/src/lib/overlay/tng-overlay-runtime.js

@@ -0,0 +1,11 @@
+import { createOverlayRuntime } from '@tailng-ui/cdk';
+function resolveGlobalDocument() {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    return document;
+}
+export const tngOverlayRuntime = createOverlayRuntime({
+    documentRef: resolveGlobalDocument(),
+});
+//# sourceMappingURL=tng-overlay-runtime.js.map

package/src/lib/overlay/tng-overlay-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-overlay-runtime.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/overlay/tng-overlay-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,SAAS,qBAAqB;IAC5B,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;IACpD,WAAW,EAAE,qBAAqB,EAAE;CACrC,CAAC,CAAC","sourcesContent":["import { createOverlayRuntime } from '@tailng-ui/cdk';\n\nfunction resolveGlobalDocument(): Document | null {\n  if (typeof document === 'undefined') {\n    return null;\n  }\n\n  return document;\n}\n\nexport const tngOverlayRuntime = createOverlayRuntime({\n  documentRef: resolveGlobalDocument(),\n});\n"]}

package/src/lib/overlay/tooltip/tng-tooltip.component.d.ts

@@ -0,0 +1,31 @@
+import type { OnDestroy } from '@angular/core';
+import { type TngTooltipSide } from '@tailng-ui/primitives';
+type TngTooltipKeyboardEvent = Readonly<Pick<KeyboardEvent, 'key'>> & Readonly<{
+    preventDefault: () => void;
+}>;
+export declare function normalizeTngTooltipDelay(value: number): number;
+export declare function shouldCloseTngTooltipForKey(key: string): boolean;
+export declare class TngTooltipComponent implements OnDestroy {
+    private closeTimerId;
+    private openTimerId;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+    readonly closeDelay: import("@angular/core").InputSignal<number>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly openDelay: import("@angular/core").InputSignal<number>;
+    readonly side: import("@angular/core").InputSignal<TngTooltipSide>;
+    readonly text: import("@angular/core").InputSignal<string>;
+    readonly triggerLabel: import("@angular/core").InputSignal<string>;
+    readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+    protected readonly open: import("@angular/core").WritableSignal<boolean>;
+    protected readonly tooltipId: string;
+    private readonly syncDisabledState;
+    ngOnDestroy(): void;
+    protected onCloseIntent(): void;
+    protected onOpenIntent(): void;
+    protected onTriggerKeydown(event: TngTooltipKeyboardEvent): void;
+    private clearCloseTimer;
+    private clearOpenTimer;
+    private setOpen;
+}
+export {};
+//# sourceMappingURL=tng-tooltip.component.d.ts.map

package/src/lib/overlay/tooltip/tng-tooltip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-tooltip.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/overlay/tooltip/tng-tooltip.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GACjE,QAAQ,CAAC;IAAE,cAAc,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAI3C,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM9D;AAED,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEhE;AAED,qBAMa,mBAAoB,YAAW,SAAS;IACnD,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA8C;IAEjE,SAAgB,SAAS,qDAA8B;IACvD,SAAgB,UAAU,8CAAqB;IAC/C,SAAgB,QAAQ,8EAErB;IACH,SAAgB,SAAS,8CAAsB;IAC/C,SAAgB,IAAI,sDAAgC;IACpD,SAAgB,IAAI,8CAAqC;IACzD,SAAgB,YAAY,8CAAyB;IAErD,SAAgB,UAAU,oDAAqB;IAC/C,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IACxC,SAAS,CAAC,QAAQ,CAAC,SAAS,SAAsB;IAElD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAI/B;IAEI,WAAW,IAAI,IAAI;IAM1B,SAAS,CAAC,aAAa,IAAI,IAAI;IAkB/B,SAAS,CAAC,YAAY,IAAI,IAAI;IAkB9B,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,GAAG,IAAI;IAehE,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,OAAO;CAQhB"}