@shival99/z-ui 0.0.1 → 1.0.2

package/fesm2022/shival99-z-ui-components-z-tooltip.mjs

@@ -0,0 +1,660 @@
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, input, output, inject, ElementRef, Renderer2, DestroyRef, PLATFORM_ID, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
+import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
+import { cva } from 'class-variance-authority';
+import { ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+
+const zTooltipVariants = cva(['z-tooltip relative z-[9999] rounded-[5px] shadow-md', 'z-animate-in z-fade-in z-duration-150'], {
+    variants: {
+        zType: {
+            default: 'bg-foreground text-background border border-foreground',
+            dark: 'bg-slate-900 text-white border border-slate-700',
+            light: 'bg-white text-slate-900 border border-slate-200',
+            primary: 'bg-primary text-primary-foreground border border-primary',
+            success: 'bg-green-600 text-white border border-green-600',
+            warning: 'bg-amber-500 text-white border border-amber-500',
+            error: 'bg-red-600 text-white border border-red-600',
+            info: 'bg-blue-600 text-white border border-blue-600',
+        },
+        zSize: {
+            sm: 'text-[10px]',
+            default: 'text-xs',
+            lg: 'text-sm',
+        },
+        zPosition: {
+            top: 'z-slide-in-from-bottom-2',
+            'top-left': 'z-slide-in-from-bottom-2',
+            'top-right': 'z-slide-in-from-bottom-2',
+            bottom: 'z-slide-in-from-top-2',
+            'bottom-left': 'z-slide-in-from-top-2',
+            'bottom-right': 'z-slide-in-from-top-2',
+            left: 'z-slide-in-from-right-2',
+            'left-top': 'z-slide-in-from-right-2',
+            'left-bottom': 'z-slide-in-from-right-2',
+            right: 'z-slide-in-from-left-2',
+            'right-top': 'z-slide-in-from-left-2',
+            'right-bottom': 'z-slide-in-from-left-2',
+        },
+    },
+    defaultVariants: {
+        zType: 'default',
+        zSize: 'default',
+        zPosition: 'top',
+    },
+});
+const zTooltipContentVariants = cva('relative z-10 rounded-[4px] font-medium p-1.5 break-words leading-[1.7]', {
+    variants: {
+        zType: {
+            default: 'bg-foreground',
+            dark: 'bg-slate-900',
+            light: 'bg-white',
+            primary: 'bg-primary',
+            success: 'bg-green-600',
+            warning: 'bg-amber-500',
+            error: 'bg-red-600',
+            info: 'bg-blue-600',
+        },
+    },
+    defaultVariants: {
+        zType: 'default',
+    },
+});
+const zTooltipArrowVariants = cva('absolute z-0 size-2.5 rotate-45 rounded-[2px]', {
+    variants: {
+        position: {
+            top: '-bottom-1 left-1/2 -translate-x-1/2 border-r border-b',
+            'top-left': '-bottom-1 left-3 border-r border-b',
+            'top-right': '-bottom-1 right-3 border-r border-b',
+            bottom: '-top-1 left-1/2 -translate-x-1/2 border-l border-t',
+            'bottom-left': '-top-1 left-3 border-l border-t',
+            'bottom-right': '-top-1 right-3 border-l border-t',
+            left: 'top-1/2 -translate-y-1/2 -right-1 border-t border-r',
+            'left-top': 'top-2 -right-1 border-t border-r',
+            'left-bottom': 'bottom-2 -right-1 border-t border-r',
+            right: 'top-1/2 -translate-y-1/2 -left-1 border-b border-l',
+            'right-top': 'top-2 -left-1 border-b border-l',
+            'right-bottom': 'bottom-2 -left-1 border-b border-l',
+        },
+        zType: {
+            default: 'bg-foreground border-foreground',
+            dark: 'bg-slate-900 border-slate-700',
+            light: 'bg-white border-slate-200',
+            primary: 'bg-primary border-primary',
+            success: 'bg-green-600 border-green-600',
+            warning: 'bg-amber-500 border-amber-500',
+            error: 'bg-red-600 border-red-600',
+            info: 'bg-blue-600 border-blue-600',
+        },
+    },
+    defaultVariants: {
+        position: 'top',
+        zType: 'default',
+    },
+});
+const zTooltipExitVariants = cva('z-animate-out z-fade-out', {
+    variants: {
+        zPosition: {
+            top: 'z-slide-out-to-bottom-2',
+            'top-left': 'z-slide-out-to-bottom-2',
+            'top-right': 'z-slide-out-to-bottom-2',
+            bottom: 'z-slide-out-to-top-2',
+            'bottom-left': 'z-slide-out-to-top-2',
+            'bottom-right': 'z-slide-out-to-top-2',
+            left: 'z-slide-out-to-right-2',
+            'left-top': 'z-slide-out-to-right-2',
+            'left-bottom': 'z-slide-out-to-right-2',
+            right: 'z-slide-out-to-left-2',
+            'right-top': 'z-slide-out-to-left-2',
+            'right-bottom': 'z-slide-out-to-left-2',
+        },
+    },
+    defaultVariants: {
+        zPosition: 'top',
+    },
+});
+
+class ZTooltipContentComponent {
+    content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    position = signal('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    tooltipType = signal('default', ...(ngDevMode ? [{ debugName: "tooltipType" }] : []));
+    tooltipSize = signal('default', ...(ngDevMode ? [{ debugName: "tooltipSize" }] : []));
+    tooltipClass = signal('', ...(ngDevMode ? [{ debugName: "tooltipClass" }] : []));
+    showArrow = signal(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+    maxWidth = signal('250px', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    state = signal('open', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    arrowOffset = signal(0, ...(ngDevMode ? [{ debugName: "arrowOffset" }] : []));
+    classes = computed(() => {
+        const baseClasses = zTooltipVariants({
+            zType: this.tooltipType(),
+            zSize: this.tooltipSize(),
+            zPosition: this.position(),
+        });
+        const exitClasses = this.state() === 'closed' ? this._getExitAnimationClasses() : '';
+        return zMergeClasses(baseClasses, exitClasses, this.tooltipClass());
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    _getExitAnimationClasses() {
+        return zTooltipExitVariants({ zPosition: this.position() });
+    }
+    contentClasses = computed(() => zMergeClasses(zTooltipContentVariants({ zType: this.tooltipType() })), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    arrowClasses = computed(() => zMergeClasses(zTooltipArrowVariants({
+        position: this.position(),
+        zType: this.tooltipType(),
+    })), ...(ngDevMode ? [{ debugName: "arrowClasses" }] : []));
+    arrowStyle = computed(() => {
+        const pos = this.position();
+        const offset = this.arrowOffset();
+        const isCornerPosition = pos.includes('-');
+        if (isCornerPosition) {
+            return {};
+        }
+        if (offset === 0) {
+            return {};
+        }
+        if (pos === 'top' || pos === 'bottom') {
+            return {
+                left: `calc(50% + ${offset}px)`,
+            };
+        }
+        if (pos === 'left' || pos === 'right') {
+            return {
+                top: `calc(50% + ${offset}px)`,
+            };
+        }
+        return {};
+    }, ...(ngDevMode ? [{ debugName: "arrowStyle" }] : []));
+    isTemplateContent = computed(() => {
+        const c = this.content();
+        return c && typeof c !== 'string';
+    }, ...(ngDevMode ? [{ debugName: "isTemplateContent" }] : []));
+    isHtmlContent = computed(() => {
+        const c = this.content();
+        return typeof c === 'string' && c.includes('<');
+    }, ...(ngDevMode ? [{ debugName: "isHtmlContent" }] : []));
+    setProps(config) {
+        this.content.set(config.content);
+        this.position.set(config.position);
+        if (config.type) {
+            this.tooltipType.set(config.type);
+        }
+        if (config.size) {
+            this.tooltipSize.set(config.size);
+        }
+        if (config.customClass) {
+            this.tooltipClass.set(config.customClass);
+        }
+        if (config.arrow !== undefined) {
+            this.showArrow.set(config.arrow);
+        }
+        if (config.maxWidth) {
+            this.maxWidth.set(config.maxWidth);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTooltipContentComponent, isStandalone: true, selector: "z-tooltip-content", host: { attributes: { "role": "tooltip" }, properties: { "class": "classes()", "style.maxWidth": "maxWidth()", "attr.data-state": "state()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    <!-- Arrow layer - rotated square, partial border -->
+    @if (showArrow()) {
+      <div [class]="arrowClasses()" [style]="arrowStyle()"></div>
+    }
+
+    <!-- Content layer - covers arrow base -->
+    <div [class]="contentClasses()">
+      @if (isTemplateContent()) {
+        <ng-container [ngTemplateOutlet]="$any(content())" />
+      } @else if (isHtmlContent()) {
+        <span [innerHTML]="$any(content()) | zSafeHtml"></span>
+      } @else {
+        {{ content() }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTooltipContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-tooltip-content',
+                    imports: [NgTemplateOutlet, ZSafeHtmlPipe],
+                    standalone: true,
+                    template: `
+    <!-- Arrow layer - rotated square, partial border -->
+    @if (showArrow()) {
+      <div [class]="arrowClasses()" [style]="arrowStyle()"></div>
+    }
+
+    <!-- Content layer - covers arrow base -->
+    <div [class]="contentClasses()">
+      @if (isTemplateContent()) {
+        <ng-container [ngTemplateOutlet]="$any(content())" />
+      } @else if (isHtmlContent()) {
+        <span [innerHTML]="$any(content()) | zSafeHtml"></span>
+      } @else {
+        {{ content() }}
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.maxWidth]': 'maxWidth()',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-position]': 'position()',
+                        role: 'tooltip',
+                    },
+                }]
+        }] });
+
+function createTooltipPosition(position, offset) {
+    const positions = {
+        top: {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        'top-left': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        'top-right': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        bottom: {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        'bottom-left': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        'bottom-right': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        left: {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -offset,
+        },
+        'left-top': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetX: -offset,
+        },
+        'left-bottom': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetX: -offset,
+        },
+        right: {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: offset,
+        },
+        'right-top': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: offset,
+        },
+        'right-bottom': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetX: offset,
+        },
+    };
+    return positions[position];
+}
+function getTooltipFallbackPositions(position, offset) {
+    const fallbackOrder = {
+        top: ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        'top-left': ['top-left', 'bottom-left', 'top', 'bottom', 'top-right', 'bottom-right'],
+        'top-right': ['top-right', 'bottom-right', 'top', 'bottom', 'top-left', 'bottom-left'],
+        bottom: ['bottom', 'top', 'bottom-left', 'bottom-right', 'top-left', 'top-right'],
+        'bottom-left': ['bottom-left', 'top-left', 'bottom', 'top', 'bottom-right', 'top-right'],
+        'bottom-right': ['bottom-right', 'top-right', 'bottom', 'top', 'bottom-left', 'top-left'],
+        left: ['left', 'right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'],
+        'left-top': ['left-top', 'right-top', 'left', 'right', 'left-bottom', 'right-bottom'],
+        'left-bottom': ['left-bottom', 'right-bottom', 'left', 'right', 'left-top', 'right-top'],
+        right: ['right', 'left', 'right-top', 'right-bottom', 'left-top', 'left-bottom'],
+        'right-top': ['right-top', 'left-top', 'right', 'left', 'right-bottom', 'left-bottom'],
+        'right-bottom': ['right-bottom', 'left-bottom', 'right', 'left', 'right-top', 'left-top'],
+    };
+    const orderedPositions = fallbackOrder[position] ?? [position];
+    return orderedPositions.map(pos => createTooltipPosition(pos, offset));
+}
+function getActualPosition(change) {
+    const { originX, originY, overlayX, overlayY } = change.connectionPair;
+    if (overlayY === 'bottom' && originY === 'top') {
+        if (originX === 'start' && overlayX === 'start') {
+            return 'top-left';
+        }
+        if (originX === 'end' && overlayX === 'end') {
+            return 'top-right';
+        }
+        return 'top';
+    }
+    if (overlayY === 'top' && originY === 'bottom') {
+        if (originX === 'start' && overlayX === 'start') {
+            return 'bottom-left';
+        }
+        if (originX === 'end' && overlayX === 'end') {
+            return 'bottom-right';
+        }
+        return 'bottom';
+    }
+    if (overlayX === 'end' && originX === 'start') {
+        if (originY === 'top' && overlayY === 'top') {
+            return 'left-top';
+        }
+        if (originY === 'bottom' && overlayY === 'bottom') {
+            return 'left-bottom';
+        }
+        return 'left';
+    }
+    if (overlayX === 'start' && originX === 'end') {
+        if (originY === 'top' && overlayY === 'top') {
+            return 'right-top';
+        }
+        if (originY === 'bottom' && overlayY === 'bottom') {
+            return 'right-bottom';
+        }
+        return 'right';
+    }
+    return 'top';
+}
+
+const Z_TOOLTIP_ANIMATION_DURATION = 150;
+
+class ZTooltipDirective {
+    zContent = input('', ...(ngDevMode ? [{ debugName: "zContent" }] : []));
+    zPosition = input('top', ...(ngDevMode ? [{ debugName: "zPosition" }] : []));
+    zTrigger = input('hover', ...(ngDevMode ? [{ debugName: "zTrigger" }] : []));
+    zType = input('default', { ...(ngDevMode ? { debugName: "zType" } : {}), alias: 'zTooltipType' });
+    zSize = input('default', { ...(ngDevMode ? { debugName: "zSize" } : {}), alias: 'zTooltipSize' });
+    zClass = input('', ...(ngDevMode ? [{ debugName: "zClass" }] : []));
+    zShowDelay = input(100, ...(ngDevMode ? [{ debugName: "zShowDelay" }] : []));
+    zHideDelay = input(0, ...(ngDevMode ? [{ debugName: "zHideDelay" }] : []));
+    zArrow = input(true, { ...(ngDevMode ? { debugName: "zArrow" } : {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zOffset = input(8, ...(ngDevMode ? [{ debugName: "zOffset" }] : []));
+    zAutoDetect = input(true, { ...(ngDevMode ? { debugName: "zAutoDetect" } : {}), transform: zTransform });
+    zTriggerElement = input(null, ...(ngDevMode ? [{ debugName: "zTriggerElement" }] : []));
+    zAlwaysShow = input(false, { ...(ngDevMode ? { debugName: "zAlwaysShow" } : {}), transform: zTransform });
+    zMaxWidth = input('250px', ...(ngDevMode ? [{ debugName: "zMaxWidth" }] : []));
+    zShow = output();
+    zHide = output();
+    _overlay = inject(Overlay);
+    _overlayPositionBuilder = inject(OverlayPositionBuilder);
+    _elementRef = inject((ElementRef));
+    _renderer = inject(Renderer2);
+    _destroyRef = inject(DestroyRef);
+    _platformId = inject(PLATFORM_ID);
+    _document = inject(DOCUMENT);
+    _overlayRef = null;
+    _componentRef = null;
+    _delaySubject = new Subject();
+    _listenerCleanups = [];
+    _positionSubscription = null;
+    _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+    ngOnInit() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        this._setupDelayMechanism();
+        this._setupTriggers();
+    }
+    ngOnDestroy() {
+        this._delaySubject.complete();
+        this._cleanupListeners();
+        this._disposeOverlay();
+    }
+    show() {
+        if (this.zDisabled() || !this.zContent()) {
+            return;
+        }
+        if (!this.zAlwaysShow() && this.zAutoDetect() && !this._isTextTruncated()) {
+            return;
+        }
+        if (this._isVisible()) {
+            this._delay(true, 0);
+            return;
+        }
+        this._delay(true, this.zShowDelay());
+    }
+    _isTextTruncated() {
+        const el = this._elementRef.nativeElement;
+        if (el.scrollWidth > el.clientWidth) {
+            return true;
+        }
+        if (el.scrollHeight > el.clientHeight) {
+            return true;
+        }
+        const styles = getComputedStyle(el);
+        const lineClamp = styles.getPropertyValue('-webkit-line-clamp');
+        if (lineClamp && lineClamp !== 'none') {
+            const range = this._document.createRange();
+            range.selectNodeContents(el);
+            const rangeHeight = range.getBoundingClientRect().height;
+            const elHeight = el.getBoundingClientRect().height;
+            const paddingTop = parseFloat(styles.paddingTop) || 0;
+            const paddingBottom = parseFloat(styles.paddingBottom) || 0;
+            const contentHeight = elHeight - paddingTop - paddingBottom;
+            if (rangeHeight > contentHeight + 1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hide() {
+        this._delay(false, this.zHideDelay());
+    }
+    toggle() {
+        if (this._isVisible()) {
+            this.hide();
+            return;
+        }
+        this.show();
+    }
+    _createOverlay() {
+        const anchorElement = this.zTriggerElement() || this._elementRef;
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(anchorElement)
+            .withPositions(getTooltipFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        return this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+        });
+    }
+    _disposeOverlay() {
+        this._positionSubscription?.unsubscribe();
+        this._positionSubscription = null;
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
+        this._componentRef = null;
+    }
+    _setupDelayMechanism() {
+        this._delaySubject
+            .pipe(switchMap(config => (config.delay <= 0 ? of(config) : timer(config.delay).pipe(map(() => config)))), takeUntilDestroyed(this._destroyRef))
+            .subscribe(config => {
+            if (config.show) {
+                this._showTooltip();
+                return;
+            }
+            this._hideTooltip();
+        });
+    }
+    _setupTriggers() {
+        this._cleanupListeners();
+        const trigger = this.zTrigger();
+        const triggerEl = this.zTriggerElement() || this._elementRef.nativeElement;
+        if (trigger === 'hover') {
+            this._listenerCleanups.push(this._renderer.listen(triggerEl, 'mouseenter', () => this.show()), this._renderer.listen(triggerEl, 'mouseleave', () => this.hide()), this._renderer.listen(triggerEl, 'focus', () => this.show()), this._renderer.listen(triggerEl, 'blur', () => this.hide()));
+            return;
+        }
+        if (trigger === 'click') {
+            this._listenerCleanups.push(this._renderer.listen(triggerEl, 'click', () => {
+                if (this._isVisible()) {
+                    this._delay(false, 0);
+                    return;
+                }
+                this._delay(true, this.zShowDelay());
+            }));
+        }
+        this._listenerCleanups.push(this._renderer.listen(this._document.defaultView, 'scroll', () => this._delay(false, 0), {
+            passive: true,
+            capture: true,
+        }));
+    }
+    _setupOutsideClick() {
+        if (!this._overlayRef) {
+            return;
+        }
+        this._overlayRef
+            .outsidePointerEvents()
+            .pipe(filter(() => this.zTrigger() === 'click'), filter(event => !this._elementRef.nativeElement.contains(event.target)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._delay(false, 0));
+    }
+    _delay(show, delay) {
+        this._delaySubject.next({ show, delay });
+    }
+    _showTooltip() {
+        const content = this.zContent();
+        if (!content || this._componentRef) {
+            return;
+        }
+        if (!this._overlayRef) {
+            this._overlayRef = this._createOverlay();
+            this._setupOutsideClick();
+        }
+        const anchorElement = this.zTriggerElement() || this._elementRef;
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(anchorElement)
+            .withPositions(getTooltipFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        const portal = new ComponentPortal(ZTooltipContentComponent);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.setProps({
+            content,
+            position: this.zPosition(),
+            type: this.zType(),
+            size: this.zSize(),
+            customClass: this.zClass(),
+            arrow: this.zArrow(),
+            maxWidth: this.zMaxWidth(),
+        });
+        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
+            const actualPosition = getActualPosition(change);
+            this._componentRef?.instance.position.set(actualPosition);
+            this._calculateArrowOffset(actualPosition);
+        });
+        if (this.zTrigger() === 'hover') {
+            this._setupTooltipHover();
+        }
+        this._isVisible.set(true);
+        this.zShow.emit();
+    }
+    _setupTooltipHover() {
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        this._listenerCleanups.push(this._renderer.listen(overlayElement, 'mouseenter', () => {
+            this._delay(true, 0);
+        }), this._renderer.listen(overlayElement, 'mouseleave', () => {
+            this._delay(false, this.zHideDelay());
+        }));
+    }
+    _hideTooltip() {
+        if (!this._componentRef) {
+            return;
+        }
+        this._componentRef.instance.state.set('closed');
+        setTimeout(() => {
+            this._disposeOverlay();
+            this._isVisible.set(false);
+            this.zHide.emit();
+        }, Z_TOOLTIP_ANIMATION_DURATION);
+    }
+    _cleanupListeners() {
+        this._listenerCleanups.forEach(cleanup => cleanup());
+        this._listenerCleanups = [];
+    }
+    _calculateArrowOffset(position) {
+        if (!this._overlayRef || !this._componentRef) {
+            return;
+        }
+        const triggerRect = this._elementRef.nativeElement.getBoundingClientRect();
+        const tooltipRect = this._overlayRef.overlayElement.getBoundingClientRect();
+        let offset = 0;
+        if (position === 'top' || position === 'bottom') {
+            const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+            const tooltipCenterX = tooltipRect.left + tooltipRect.width / 2;
+            offset = triggerCenterX - tooltipCenterX;
+        }
+        if (position === 'left' || position === 'right') {
+            const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+            const tooltipCenterY = tooltipRect.top + tooltipRect.height / 2;
+            offset = triggerCenterY - tooltipCenterY;
+        }
+        const maxOffset = position === 'top' || position === 'bottom' ? tooltipRect.width / 2 - 12 : tooltipRect.height / 2 - 12;
+        offset = Math.max(-maxOffset, Math.min(maxOffset, offset));
+        if (Math.abs(offset) > 1) {
+            this._componentRef.instance.arrowOffset.set(offset);
+            return;
+        }
+        this._componentRef.instance.arrowOffset.set(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZTooltipDirective, isStandalone: true, selector: "[z-tooltip], [zTooltip]", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zTooltipType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zArrow: { classPropertyName: "zArrow", publicName: "zArrow", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zAutoDetect: { classPropertyName: "zAutoDetect", publicName: "zAutoDetect", isSignal: true, isRequired: false, transformFunction: null }, zTriggerElement: { classPropertyName: "zTriggerElement", publicName: "zTriggerElement", isSignal: true, isRequired: false, transformFunction: null }, zAlwaysShow: { classPropertyName: "zAlwaysShow", publicName: "zAlwaysShow", isSignal: true, isRequired: false, transformFunction: null }, zMaxWidth: { classPropertyName: "zMaxWidth", publicName: "zMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide" }, exportAs: ["zTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-tooltip], [zTooltip]',
+                    standalone: true,
+                    exportAs: 'zTooltip',
+                }]
+        }], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTooltipType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTooltipSize", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDelay", required: false }] }], zHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideDelay", required: false }] }], zArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zArrow", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zAutoDetect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoDetect", required: false }] }], zTriggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTriggerElement", required: false }] }], zAlwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlwaysShow", required: false }] }], zMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxWidth", required: false }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZTooltipDirective, zTooltipVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-tooltip.mjs.map