@ojiepermana/angular 22.1.10 → 22.1.12

package/fesm2022/ojiepermana-angular-component-tooltip.mjs

@@ -1,7 +1,523 @@
-export * from '@ojiepermana/angular-component/tooltip';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, forwardRef, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, computed, effect } from '@angular/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { UI_ID_GENERATOR } from '@ojiepermana/angular/component/utils/core';
+import { connectedPositionFor, oppositeSide, overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const TOOLTIP_DEFAULTS = new InjectionToken('TOOLTIP_DEFAULTS');
+class TooltipComponent {
+    side = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * Delay before the tooltip hides after the pointer leaves.
+     *
+     * It matches `openDelay` rather than being zero so the pointer has time to
+     * cross the `sideOffset` gap and land on the panel. That is what makes the
+     * panel reachable, which WCAG 1.4.13 (hoverable) asks for. Set it to `0` for
+     * an instant hide, accepting that the panel then cannot be hovered.
+     */
+    closeDelay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: TooltipComponent, isStandalone: true, selector: "Tooltip", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Tooltip',
+                    providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+class TooltipContentDirective {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    template = inject(TemplateRef);
+    /**
+     * Resolved `--radius-base` / `--spacing-base` knob values (or `null` to
+     * inherit the global axis). Public so {@link TooltipTriggerDirective} can mirror
+     * them onto the CDK overlay panel — the element that actually paints the rounded
+     * background + padding — since this directive sits on an `<ng-template>` whose
+     * host bindings never reach the imperatively-created overlay subtree.
+     */
+    radiusBase = this.componentScale.radiusBase;
+    densityBase = this.componentScale.densityBase;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[TooltipContent]", exportAs: ["TooltipContent"], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[TooltipContent]',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    exportAs: 'TooltipContent',
+                    host: {},
+                }]
+        }] });
+
+// No `pointer-events-none`: the panel has to be reachable by the pointer for
+// WCAG 1.4.13 (hoverable). Hovering it holds the tooltip open, see
+// `isPointerInsidePanel` below.
+const TOOLTIP_PANEL_CLASSES = [
+    'tooltip-panel',
+    'z-50',
+    'max-w-xs',
+    'overflow-hidden',
+    'rounded-md',
+    'border',
+    'border-border',
+    'bg-primary',
+    'px-3',
+    'py-1.5',
+    'text-xs',
+    'font-medium',
+    'leading-none',
+    'text-primary-foreground',
+    'shadow-md',
+    'select-none',
+];
+class TooltipTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    defaults = inject(TOOLTIP_DEFAULTS, { optional: true });
+    idGenerator = inject(UI_ID_GENERATOR);
+    TooltipTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "TooltipTrigger" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    contentId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    openTimeoutId = null;
+    closeTimeoutId = null;
+    isPointerInsideTrigger = false;
+    isPointerInsidePanel = false;
+    isTriggerFocused = false;
+    isDestroying = false;
+    /**
+     * Holds the tooltip open while the pointer rests on the panel, so a user can
+     * move onto it to read or copy the content (WCAG 1.4.13, hoverable).
+     */
+    onPanelPointerEnter = () => {
+        this.isPointerInsidePanel = true;
+        this.clearCloseTimeout();
+    };
+    onPanelPointerLeave = (event) => {
+        if (this.overlayRef?.overlayElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isPointerInsidePanel = false;
+        this.scheduleClose();
+    };
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.isDestroying = true;
+            this.clearOpenTimeout();
+            this.clearCloseTimeout();
+            this.contentId.set(null);
+            this.isOpen.set(false);
+            this.releasePanel();
+            this.overlayRef?.dispose();
+            this.overlayRef = null;
+        });
+    }
+    handlePointerEnter() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isPointerInsideTrigger = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handlePointerLeave(event) {
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isPointerInsideTrigger = false;
+        this.scheduleClose();
+    }
+    handleFocusIn() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isTriggerFocused = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handleFocusOut(event) {
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isTriggerFocused = false;
+        this.scheduleClose();
+    }
+    open() {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        const side = this.side() ?? this.defaults?.side() ?? 'top';
+        const align = this.align() ?? this.defaults?.align() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset() ?? 4;
+        const primary = connectedPositionFor(side, align, sideOffset);
+        const fallback = connectedPositionFor(oppositeSide(side), align, sideOffset);
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([primary, fallback])
+            .withPush(true)
+            .withViewportMargin(8)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: [...TOOLTIP_PANEL_CLASSES],
+        });
+        const tooltipId = this.idGenerator.next('Tooltip');
+        this.overlayRef.overlayElement.id = tooltipId;
+        this.overlayRef.overlayElement.setAttribute('role', 'tooltip');
+        // The painted surface is this overlay panel (rounded-md / px-3 / py-1.5), not
+        // the content directive's <ng-template>. Mirror the content directive's
+        // radius/density override onto it so the per-component knob actually rescales
+        // the tooltip; `null` removes the property and keeps following the global axis.
+        this.applySurfaceVars(this.overlayRef.overlayElement, this.TooltipTrigger());
+        const panel = this.overlayRef.overlayElement;
+        panel.addEventListener('pointerenter', this.onPanelPointerEnter);
+        panel.addEventListener('pointerleave', this.onPanelPointerLeave);
+        const portal = new TemplatePortal(this.TooltipTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        this.bindOverlayLifecycle();
+        this.contentId.set(tooltipId);
+        this.isOpen.set(true);
+        if (!this.isDestroying) {
+            this.openedChange.emit(true);
+        }
+    }
+    close() {
+        this.clearOpenTimeout();
+        this.clearCloseTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.releasePanel();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.contentId.set(null);
+        this.isOpen.set(false);
+        if (!this.isDestroying) {
+            this.openedChange.emit(false);
+        }
+    }
+    applySurfaceVars(panel, content) {
+        const radiusBase = content.radiusBase();
+        const spacingBase = content.densityBase();
+        if (radiusBase === null) {
+            panel.style.removeProperty('--radius-base');
+        }
+        else {
+            panel.style.setProperty('--radius-base', radiusBase);
+        }
+        if (spacingBase === null) {
+            panel.style.removeProperty('--spacing-base');
+        }
+        else {
+            panel.style.setProperty('--spacing-base', spacingBase);
+        }
+    }
+    bindOverlayLifecycle() {
+        if (!this.overlayRef) {
+            return;
+        }
+        overlayDismissals(this.overlayRef, this.el.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    scheduleOpen() {
+        this.clearCloseTimeout();
+        if (this.isOpen()) {
+            return;
+        }
+        this.clearOpenTimeout();
+        this.openTimeoutId = window.setTimeout(() => {
+            this.openTimeoutId = null;
+            if (this.disabled() || (!this.isPointerInsideTrigger && !this.isTriggerFocused)) {
+                return;
+            }
+            this.open();
+        }, this.openDelay() ?? this.defaults?.openDelay() ?? 150);
+    }
+    scheduleClose() {
+        this.clearOpenTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.clearCloseTimeout();
+        this.closeTimeoutId = window.setTimeout(() => {
+            this.closeTimeoutId = null;
+            if (this.isPointerInsideTrigger || this.isPointerInsidePanel || this.isTriggerFocused) {
+                return;
+            }
+            this.close();
+        }, this.closeDelay() ?? this.defaults?.closeDelay() ?? 150);
+    }
+    releasePanel() {
+        const panel = this.overlayRef?.overlayElement;
+        panel?.removeEventListener('pointerenter', this.onPanelPointerEnter);
+        panel?.removeEventListener('pointerleave', this.onPanelPointerLeave);
+        this.isPointerInsidePanel = false;
+    }
+    clearOpenTimeout() {
+        if (this.openTimeoutId !== null) {
+            window.clearTimeout(this.openTimeoutId);
+            this.openTimeoutId = null;
+        }
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeoutId !== null) {
+            window.clearTimeout(this.closeTimeoutId);
+            this.closeTimeoutId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: TooltipTriggerDirective, isStandalone: true, selector: "[TooltipTrigger]", inputs: { TooltipTrigger: { classPropertyName: "TooltipTrigger", publicName: "TooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "pointerenter": "handlePointerEnter()", "pointerleave": "handlePointerLeave($event)", "focusin": "handleFocusIn()", "focusout": "handleFocusOut($event)", "keydown.escape": "close()" }, properties: { "attr.aria-describedby": "contentId()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["TooltipTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[TooltipTrigger]',
+                    exportAs: 'TooltipTrigger',
+                    host: {
+                        '[attr.aria-describedby]': 'contentId()',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '(pointerenter)': 'handlePointerEnter()',
+                        '(pointerleave)': 'handlePointerLeave($event)',
+                        '(focusin)': 'handleFocusIn()',
+                        '(focusout)': 'handleFocusOut($event)',
+                        '(keydown.escape)': 'close()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { TooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "TooltipTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
+const POSITION_TO_SIDE = {
+    above: 'top',
+    below: 'bottom',
+    left: 'left',
+    right: 'right',
+    before: 'left',
+    after: 'right',
+};
+// No `pointer-events-none`: the panel has to be reachable by the pointer for
+// WCAG 1.4.13 (hoverable). Hovering it holds the tooltip open.
+const PANEL_CLASSES = [
+    'tooltip-panel',
+    'z-50',
+    'max-w-xs',
+    'overflow-hidden',
+    'rounded-md',
+    'border',
+    'border-border',
+    'bg-primary',
+    'px-3',
+    'py-1.5',
+    'text-xs',
+    'font-medium',
+    'leading-none',
+    'text-primary-foreground',
+    'shadow-md',
+    'select-none',
+];
+class TooltipTextComponent {
+    text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: TooltipTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `{{ text() }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{ text() }}`,
+                }]
+        }] });
+/**
+ * Shadcn-styled text tooltip — CDK overlay, tanpa dependensi Material.
+ *
+ * @example
+ * <button Button [Tooltip]="'Save changes'" TooltipPosition="above">Save</button>
+ */
+class TooltipDirective {
+    overlay = inject(Overlay);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    idGenerator = inject(UI_ID_GENERATOR);
+    Tooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "Tooltip" }] : /* istanbul ignore next */ []));
+    TooltipPosition = input('above', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "TooltipPosition" }] : /* istanbul ignore next */ []));
+    TooltipDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "TooltipDisabled" }] : /* istanbul ignore next */ []));
+    TooltipShowDelay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "TooltipShowDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * Delay before hiding. It matches the show delay rather than being zero so the
+     * pointer can cross the offset gap and land on the panel, which is what makes
+     * the panel reachable (WCAG 1.4.13, hoverable). Set `0` for an instant hide,
+     * accepting that the panel then cannot be hovered.
+     */
+    TooltipHideDelay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "TooltipHideDelay" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    contentRef = null;
+    showTimeoutId = null;
+    hideTimeoutId = null;
+    isPointerInsidePanel = false;
+    onPanelPointerEnter = () => {
+        this.isPointerInsidePanel = true;
+        this.clearTimers();
+    };
+    onPanelPointerLeave = (event) => {
+        if (this.overlayRef?.overlayElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isPointerInsidePanel = false;
+        this.scheduleHide();
+    };
+    side = computed(() => POSITION_TO_SIDE[this.TooltipPosition()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.clearTimers();
+            this.hide();
+        });
+        // Update teks saat pesan berubah ketika tooltip sedang tampil.
+        effect(() => {
+            const message = this.Tooltip();
+            this.contentRef?.instance.text.set(message);
+        });
+    }
+    show() {
+        if (this.overlayRef || this.TooltipDisabled() || !this.Tooltip()) {
+            return;
+        }
+        const side = this.side();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([
+            connectedPositionFor(side, 'center', 4),
+            connectedPositionFor(oppositeSide(side), 'center', 4),
+        ])
+            .withPush(true)
+            .withViewportMargin(8)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: [...PANEL_CLASSES],
+        });
+        this.contentRef = this.overlayRef.attach(new ComponentPortal(TooltipTextComponent));
+        this.contentRef.instance.text.set(this.Tooltip());
+        const pane = this.overlayRef.overlayElement;
+        pane.id = this.idGenerator.next('Tooltip');
+        pane.setAttribute('role', 'tooltip');
+        pane.addEventListener('pointerenter', this.onPanelPointerEnter);
+        pane.addEventListener('pointerleave', this.onPanelPointerLeave);
+        this.el.nativeElement.setAttribute('aria-describedby', pane.id);
+    }
+    hide() {
+        this.clearTimers();
+        this.el.nativeElement.removeAttribute('aria-describedby');
+        this.contentRef = null;
+        const pane = this.overlayRef?.overlayElement;
+        pane?.removeEventListener('pointerenter', this.onPanelPointerEnter);
+        pane?.removeEventListener('pointerleave', this.onPanelPointerLeave);
+        this.isPointerInsidePanel = false;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    scheduleShow() {
+        this.clearTimers();
+        this.showTimeoutId = window.setTimeout(() => {
+            this.showTimeoutId = null;
+            this.show();
+        }, this.TooltipShowDelay());
+    }
+    scheduleHide() {
+        this.clearTimers();
+        this.hideTimeoutId = window.setTimeout(() => {
+            this.hideTimeoutId = null;
+            // The pointer may have moved onto the panel while this was pending.
+            if (this.isPointerInsidePanel) {
+                return;
+            }
+            this.hide();
+        }, this.TooltipHideDelay());
+    }
+    clearTimers() {
+        if (this.showTimeoutId !== null) {
+            window.clearTimeout(this.showTimeoutId);
+            this.showTimeoutId = null;
+        }
+        if (this.hideTimeoutId !== null) {
+            window.clearTimeout(this.hideTimeoutId);
+            this.hideTimeoutId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: TooltipDirective, isStandalone: true, selector: "[Tooltip]", inputs: { Tooltip: { classPropertyName: "Tooltip", publicName: "Tooltip", isSignal: true, isRequired: false, transformFunction: null }, TooltipPosition: { classPropertyName: "TooltipPosition", publicName: "TooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, TooltipDisabled: { classPropertyName: "TooltipDisabled", publicName: "TooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, TooltipShowDelay: { classPropertyName: "TooltipShowDelay", publicName: "TooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, TooltipHideDelay: { classPropertyName: "TooltipHideDelay", publicName: "TooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "scheduleShow()", "pointerleave": "scheduleHide()", "focusin": "scheduleShow()", "focusout": "scheduleHide()", "keydown.escape": "hide()" } }, exportAs: ["Tooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Tooltip]',
+                    exportAs: 'Tooltip',
+                    host: {
+                        '(pointerenter)': 'scheduleShow()',
+                        '(pointerleave)': 'scheduleHide()',
+                        '(focusin)': 'scheduleShow()',
+                        '(focusout)': 'scheduleHide()',
+                        '(keydown.escape)': 'hide()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { Tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "Tooltip", required: false }] }], TooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "TooltipPosition", required: false }] }], TooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "TooltipDisabled", required: false }] }], TooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "TooltipShowDelay", required: false }] }], TooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "TooltipHideDelay", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { TOOLTIP_DEFAULTS, TooltipComponent, TooltipContentDirective, TooltipDirective, TooltipTriggerDirective };