@ojiepermana/angular 22.1.14 → 22.2.1

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

@@ -1,523 +1,804 @@
-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';
-
-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.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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.6", 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.6", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", 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.6", 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.
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, InjectionToken, TemplateRef, ViewContainerRef, computed, effect, forwardRef, inject, input, output, signal } 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 { ComponentPortal, TemplatePortal } 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";
+const TOOLTIP_DEFAULTS = new InjectionToken("TOOLTIP_DEFAULTS");
+var TooltipComponent = class TooltipComponent {
+	side = input("top", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(4, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	openDelay = input(150, ...ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []);
+	closeDelay = input(150, ...ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TooltipComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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.2.2",
+	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
+			}]
+		}]
+	}
+});
+var TooltipContentDirective = class TooltipContentDirective {
+	componentScale = inject(ComponentScaleDirective);
+	radius = this.componentScale.radius;
+	density = this.componentScale.density;
+	template = inject(TemplateRef);
+	radiusBase = this.componentScale.radiusBase;
+	densityBase = this.componentScale.densityBase;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TooltipContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		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.2.2",
+	ngImport: i0,
+	type: TooltipContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[TooltipContent]",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}],
+			exportAs: "TooltipContent",
+			host: {}
+		}]
+	}]
+});
 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',
+	"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.6", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", 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.6", 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"] }] } });
-
+var TooltipTriggerDirective = 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(...ngDevMode ? [{ debugName: "TooltipTrigger" }] : /* istanbul ignore next */ []);
+	side = input(void 0, ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input(void 0, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(void 0, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	openDelay = input(void 0, ...ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []);
+	closeDelay = input(void 0, ...ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	openedChange = output();
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	contentId = signal(null, ...ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []);
+	overlayRef = null;
+	openTimeoutId = null;
+	closeTimeoutId = null;
+	isPointerInsideTrigger = false;
+	isPointerInsidePanel = false;
+	isTriggerFocused = false;
+	isDestroying = false;
+	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");
+		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.2.2",
+		ngImport: i0,
+		type: TooltipTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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.2.2",
+	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',
+	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',
+	"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.6", ngImport: i0, type: TooltipTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TooltipTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `{{ text() }}`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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.6", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", 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.6", 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 };
+var TooltipTextComponent = class TooltipTextComponent {
+	text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TooltipTextComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: TooltipTextComponent,
+		isStandalone: true,
+		selector: "ng-component",
+		ngImport: i0,
+		template: `{{ text() }}`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TooltipTextComponent,
+	decorators: [{
+		type: Component,
+		args: [{ template: `{{ text() }}` }]
+	}]
+});
+var TooltipDirective = class TooltipDirective {
+	overlay = inject(Overlay);
+	el = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	idGenerator = inject(UI_ID_GENERATOR);
+	Tooltip = input("", ...ngDevMode ? [{ debugName: "Tooltip" }] : /* istanbul ignore next */ []);
+	TooltipPosition = input("above", ...ngDevMode ? [{ debugName: "TooltipPosition" }] : /* istanbul ignore next */ []);
+	TooltipDisabled = input(false, ...ngDevMode ? [{ debugName: "TooltipDisabled" }] : /* istanbul ignore next */ []);
+	TooltipShowDelay = input(150, ...ngDevMode ? [{ debugName: "TooltipShowDelay" }] : /* istanbul ignore next */ []);
+	TooltipHideDelay = input(150, ...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()], ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.destroyRef.onDestroy(() => {
+			this.clearTimers();
+			this.hide();
+		});
+		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;
+			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.2.2",
+		ngImport: i0,
+		type: TooltipDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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.2.2",
+	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
+			}]
+		}]
+	}
+});
+export { TOOLTIP_DEFAULTS, TooltipComponent, TooltipContentDirective, TooltipDirective, TooltipTriggerDirective };