@shival99/z-ui 1.0.1 → 1.0.2

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

@@ -0,0 +1,917 @@
+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, viewChild, inject, Renderer2, DestroyRef, PLATFORM_ID, ElementRef, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
+import { cva } from 'class-variance-authority';
+import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
+
+const zPopoverVariants = cva([
+    'z-popover relative z-[9999] rounded-[6px] shadow-md',
+    'bg-popover text-popover-foreground border border-border',
+    'z-animate-in z-fade-in z-duration-200',
+], {
+    variants: {
+        zPosition: {
+            top: 'z-slide-in-from-bottom-4',
+            'top-left': 'z-slide-in-from-bottom-4',
+            'top-right': 'z-slide-in-from-bottom-4',
+            bottom: 'z-slide-in-from-top-4',
+            'bottom-left': 'z-slide-in-from-top-4',
+            'bottom-right': 'z-slide-in-from-top-4',
+            left: 'z-slide-in-from-right-4',
+            'left-top': 'z-slide-in-from-right-4',
+            'left-bottom': 'z-slide-in-from-right-4',
+            right: 'z-slide-in-from-left-4',
+            'right-top': 'z-slide-in-from-left-4',
+            'right-bottom': 'z-slide-in-from-left-4',
+        },
+    },
+    defaultVariants: {
+        zPosition: 'bottom',
+    },
+});
+const zPopoverExitVariants = cva('z-animate-out z-fade-out z-duration-200', {
+    variants: {
+        zPosition: {
+            top: 'z-slide-out-to-bottom-4',
+            'top-left': 'z-slide-out-to-bottom-4',
+            'top-right': 'z-slide-out-to-bottom-4',
+            bottom: 'z-slide-out-to-top-4',
+            'bottom-left': 'z-slide-out-to-top-4',
+            'bottom-right': 'z-slide-out-to-top-4',
+            left: 'z-slide-out-to-right-4',
+            'left-top': 'z-slide-out-to-right-4',
+            'left-bottom': 'z-slide-out-to-right-4',
+            right: 'z-slide-out-to-left-4',
+            'right-top': 'z-slide-out-to-left-4',
+            'right-bottom': 'z-slide-out-to-left-4',
+        },
+    },
+    defaultVariants: {
+        zPosition: 'bottom',
+    },
+});
+const zPopoverContentVariants = cva('relative z-10 rounded-[6px] bg-popover', {
+    variants: {},
+    defaultVariants: {},
+});
+const zPopoverArrowVariants = cva('absolute z-0 size-2.5 rotate-45 rounded-[2px] bg-popover', {
+    variants: {
+        position: {
+            top: '-bottom-1 left-1/2 -translate-x-1/2 border-r border-b border-border',
+            'top-left': '-bottom-1 left-3 border-r border-b border-border',
+            'top-right': '-bottom-1 right-3 border-r border-b border-border',
+            bottom: '-top-1 left-1/2 -translate-x-1/2 border-l border-t border-border',
+            'bottom-left': '-top-1 left-3 border-l border-t border-border',
+            'bottom-right': '-top-1 right-3 border-l border-t border-border',
+            left: 'top-1/2 -translate-y-1/2 -right-1 border-t border-r border-border',
+            'left-top': 'top-2 -right-1 border-t border-r border-border',
+            'left-bottom': 'bottom-2 -right-1 border-t border-r border-border',
+            right: 'top-1/2 -translate-y-1/2 -left-1 border-b border-l border-border',
+            'right-top': 'top-2 -left-1 border-b border-l border-border',
+            'right-bottom': 'bottom-2 -left-1 border-b border-l border-border',
+        },
+    },
+    defaultVariants: {
+        position: 'bottom',
+    },
+});
+
+class ZPopoverContentComponent {
+    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    position = signal('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    popoverClass = signal('', ...(ngDevMode ? [{ debugName: "popoverClass" }] : []));
+    state = signal('open', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    closeHandler = signal(() => { }, ...(ngDevMode ? [{ debugName: "closeHandler" }] : []));
+    showArrow = signal(false, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+    arrowOffset = signal(0, ...(ngDevMode ? [{ debugName: "arrowOffset" }] : []));
+    context = computed(() => ({
+        close: this.closeHandler(),
+    }), ...(ngDevMode ? [{ debugName: "context" }] : []));
+    classes = computed(() => {
+        const baseClasses = zPopoverVariants({
+            zPosition: this.position(),
+        });
+        const exitClasses = this.state() === 'closed' ? zPopoverExitVariants({ zPosition: this.position() }) : '';
+        return zMergeClasses(baseClasses, exitClasses, this.popoverClass());
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    contentClasses = computed(() => zMergeClasses(zPopoverContentVariants({})), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    arrowClasses = computed(() => zMergeClasses(zPopoverArrowVariants({
+        position: this.position(),
+    })), ...(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" }] : []));
+    setProps(config) {
+        this.content.set(config.content);
+        this.position.set(config.position);
+        if (config.customClass) {
+            this.popoverClass.set(config.customClass);
+        }
+        if (config.onClose) {
+            this.closeHandler.set(config.onClose);
+        }
+        if (config.showArrow !== undefined) {
+            this.showArrow.set(config.showArrow);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZPopoverContentComponent, isStandalone: true, selector: "z-popover-content", host: { properties: { "class": "classes()", "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 -->
+    <div [class]="contentClasses()">
+      <ng-container
+        [ngTemplateOutlet]="content()"
+        [ngTemplateOutletContext]="{ $implicit: context(), close: context().close }"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-popover-content',
+                    imports: [NgTemplateOutlet],
+                    standalone: true,
+                    template: `
+    <!-- Arrow layer - rotated square, partial border -->
+    @if (showArrow()) {
+      <div [class]="arrowClasses()" [style]="arrowStyle()"></div>
+    }
+
+    <!-- Content -->
+    <div [class]="contentClasses()">
+      <ng-container
+        [ngTemplateOutlet]="content()"
+        [ngTemplateOutletContext]="{ $implicit: context(), close: context().close }"
+      />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-position]': 'position()',
+                    },
+                }]
+        }] });
+
+function createPopoverPosition(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 getPopoverFallbackPositions(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 => createPopoverPosition(pos, offset));
+}
+function getActualPopoverPosition(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_POPOVER_ANIMATION_DURATION = 200;
+
+class ZPopoverComponent {
+    zContent = input(null, ...(ngDevMode ? [{ debugName: "zContent" }] : []));
+    zPosition = input('bottom', ...(ngDevMode ? [{ debugName: "zPosition" }] : []));
+    zTrigger = input('click', ...(ngDevMode ? [{ debugName: "zTrigger" }] : []));
+    zClass = input('', ...(ngDevMode ? [{ debugName: "zClass" }] : []));
+    zShowDelay = input(0, ...(ngDevMode ? [{ debugName: "zShowDelay" }] : []));
+    zHideDelay = input(0, ...(ngDevMode ? [{ debugName: "zHideDelay" }] : []));
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zOffset = input(8, ...(ngDevMode ? [{ debugName: "zOffset" }] : []));
+    zManualClose = input(false, { ...(ngDevMode ? { debugName: "zManualClose" } : {}), transform: zTransform });
+    zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
+    zShowArrow = input(false, { ...(ngDevMode ? { debugName: "zShowArrow" } : {}), transform: zTransform });
+    zShow = output();
+    zHide = output();
+    zControl = output();
+    _trigger = viewChild.required('trigger');
+    _overlay = inject(Overlay);
+    _overlayPositionBuilder = inject(OverlayPositionBuilder);
+    _renderer = inject(Renderer2);
+    _destroyRef = inject(DestroyRef);
+    _platformId = inject(PLATFORM_ID);
+    _document = inject(DOCUMENT);
+    _overlayRef = null;
+    _componentRef = null;
+    _delaySubject = new Subject();
+    _listenerCleanups = [];
+    _positionSubscription = null;
+    _scrollSubscription = null;
+    _resizeObserver = null;
+    _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+    ngOnInit() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        this._setupDelayMechanism();
+        this._setupTriggers();
+        this._emitControl();
+    }
+    _emitControl() {
+        this.zControl.emit({
+            close: () => this.hide(),
+            closeImmediate: () => this.hideImmediate(),
+            show: () => this.show(),
+            toggle: () => this.toggle(),
+            isVisible: () => this._isVisible(),
+        });
+    }
+    ngOnDestroy() {
+        this._delaySubject.complete();
+        this._cleanupListeners();
+        this._disposeOverlay();
+    }
+    show() {
+        if (this.zDisabled() || !this.zContent()) {
+            return;
+        }
+        if (this._isVisible()) {
+            this._delay(true, 0);
+            return;
+        }
+        this._delay(true, this.zShowDelay());
+    }
+    hide() {
+        this._delay(false, this.zHideDelay());
+    }
+    hideImmediate() {
+        this._disposeOverlay();
+        this._isVisible.set(false);
+        this.zHide.emit();
+    }
+    toggle() {
+        if (this._isVisible()) {
+            this.hide();
+            return;
+        }
+        this.show();
+    }
+    isOpen() {
+        return this._isVisible();
+    }
+    _createOverlay() {
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(this._trigger())
+            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(this.zScrollClose())
+            .withViewportMargin(8);
+        const scrollStrategy = this.zScrollClose()
+            ? this._overlay.scrollStrategies.close()
+            : this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
+        return this._overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: false,
+        });
+    }
+    _disposeOverlay() {
+        this._positionSubscription?.unsubscribe();
+        this._positionSubscription = null;
+        this._scrollSubscription?.unsubscribe();
+        this._scrollSubscription = null;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = 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._showPopover();
+                return;
+            }
+            this._hidePopover();
+        });
+    }
+    _setupTriggers() {
+        this._cleanupListeners();
+        const trigger = this.zTrigger();
+        const triggerEl = this._trigger().nativeElement;
+        if (trigger === 'hover') {
+            this._listenerCleanups.push(this._renderer.listen(triggerEl, 'mouseenter', () => this.show()), this._renderer.listen(triggerEl, 'focus', () => this.show()));
+            if (!this.zManualClose()) {
+                this._listenerCleanups.push(this._renderer.listen(triggerEl, 'mouseleave', () => this.hide()), this._renderer.listen(triggerEl, 'blur', () => this.hide()));
+            }
+            return;
+        }
+        if (trigger === 'click') {
+            this._listenerCleanups.push(this._renderer.listen(triggerEl, 'click', (event) => {
+                event.stopPropagation();
+                this.toggle();
+            }));
+        }
+    }
+    _setupOutsideClick() {
+        if (!this._overlayRef) {
+            return;
+        }
+        this._overlayRef
+            .outsidePointerEvents()
+            .pipe(filter(() => !this.zManualClose()), takeUntilDestroyed(this._destroyRef))
+            .subscribe(event => {
+            const triggerEl = this._trigger().nativeElement;
+            if (!triggerEl.contains(event.target)) {
+                this._delay(false, 0);
+            }
+        });
+    }
+    _delay(show, delay) {
+        this._delaySubject.next({ show, delay });
+    }
+    _setupScrollClose() {
+        if (this.zManualClose()) {
+            return;
+        }
+        this._scrollSubscription?.unsubscribe();
+        let ticking = false;
+        const onScroll = (event) => {
+            if (!this._isVisible() || !this._overlayRef) {
+                return;
+            }
+            const { target } = event;
+            const { overlayElement } = this._overlayRef;
+            if (overlayElement && overlayElement.contains(target)) {
+                return;
+            }
+            if (this.zScrollClose()) {
+                this.hideImmediate();
+                return;
+            }
+            if (ticking) {
+                return;
+            }
+            ticking = true;
+            requestAnimationFrame(() => {
+                this._overlayRef?.updatePosition();
+                ticking = false;
+            });
+        };
+        this._document.addEventListener('scroll', onScroll, true);
+        this._scrollSubscription = {
+            unsubscribe: () => {
+                this._document.removeEventListener('scroll', onScroll, true);
+            },
+        };
+    }
+    _showPopover() {
+        const content = this.zContent();
+        if (!content || this._componentRef) {
+            return;
+        }
+        if (!this._overlayRef) {
+            this._overlayRef = this._createOverlay();
+            this._setupOutsideClick();
+        }
+        this._setupScrollClose();
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(this._trigger())
+            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(this.zScrollClose())
+            .withViewportMargin(8);
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        const portal = new ComponentPortal(ZPopoverContentComponent);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.setProps({
+            content,
+            position: this.zPosition(),
+            customClass: this.zClass(),
+            onClose: () => this.hide(),
+            showArrow: this.zShowArrow(),
+        });
+        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
+            const actualPosition = getActualPopoverPosition(change);
+            this._componentRef?.instance.position.set(actualPosition);
+        });
+        if (this.zTrigger() === 'hover') {
+            this._setupPopoverHover();
+        }
+        this._setupResizeObserver();
+        this._isVisible.set(true);
+        this.zShow.emit();
+    }
+    _setupResizeObserver() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = new ResizeObserver(() => {
+            if (this._overlayRef && this._isVisible()) {
+                this._overlayRef.updatePosition();
+            }
+        });
+        this._resizeObserver.observe(this._trigger().nativeElement);
+    }
+    _setupPopoverHover() {
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        this._listenerCleanups.push(this._renderer.listen(overlayElement, 'mouseenter', () => {
+            this._delay(true, 0);
+        }));
+        if (!this.zManualClose()) {
+            this._listenerCleanups.push(this._renderer.listen(overlayElement, 'mouseleave', () => {
+                this._delay(false, this.zHideDelay());
+            }));
+        }
+    }
+    _hidePopover() {
+        if (!this._componentRef) {
+            return;
+        }
+        this._componentRef.instance.state.set('closed');
+        setTimeout(() => {
+            this._disposeOverlay();
+            this._isVisible.set(false);
+            this.zHide.emit();
+        }, Z_POPOVER_ANIMATION_DURATION);
+    }
+    _cleanupListeners() {
+        this._listenerCleanups.forEach(cleanup => cleanup());
+        this._listenerCleanups = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: ZPopoverComponent, isStandalone: true, selector: "z-popover", 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 }, 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 }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zControl: "zControl" }, host: { classAttribute: "inline-block" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #trigger class="z-popover-trigger inline-block">
+      <ng-content />
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-popover',
+                    standalone: true,
+                    template: `
+    <span #trigger class="z-popover-trigger inline-block">
+      <ng-content />
+    </span>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-block',
+                    },
+                }]
+        }], 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 }] }], 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 }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], _trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+class ZPopoverDirective {
+    zContent = input(null, { ...(ngDevMode ? { debugName: "zContent" } : {}), alias: 'zPopoverContent' });
+    zPosition = input('bottom', ...(ngDevMode ? [{ debugName: "zPosition" }] : []));
+    zTrigger = input('click', ...(ngDevMode ? [{ debugName: "zTrigger" }] : []));
+    zClass = input('', ...(ngDevMode ? [{ debugName: "zClass" }] : []));
+    zShowDelay = input(0, ...(ngDevMode ? [{ debugName: "zShowDelay" }] : []));
+    zHideDelay = input(0, ...(ngDevMode ? [{ debugName: "zHideDelay" }] : []));
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zOffset = input(8, ...(ngDevMode ? [{ debugName: "zOffset" }] : []));
+    zPopoverWidth = input('auto', ...(ngDevMode ? [{ debugName: "zPopoverWidth" }] : []));
+    zManualClose = input(false, { ...(ngDevMode ? { debugName: "zManualClose" } : {}), transform: zTransform });
+    zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
+    zShowArrow = input(false, { ...(ngDevMode ? { debugName: "zShowArrow" } : {}), transform: zTransform });
+    zShow = output();
+    zHide = output();
+    zHideStart = output();
+    zControl = 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;
+    _scrollSubscription = null;
+    _resizeObserver = null;
+    _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+    ngOnInit() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        this._setupDelayMechanism();
+        this._setupTriggers();
+        this._emitControl();
+    }
+    _emitControl() {
+        this.zControl.emit({
+            close: () => this.hide(),
+            closeImmediate: () => this.hideImmediate(),
+            show: () => this.show(),
+            toggle: () => this.toggle(),
+            isVisible: () => this._isVisible(),
+        });
+    }
+    ngOnDestroy() {
+        this._delaySubject.complete();
+        this._cleanupListeners();
+        this._disposeOverlay();
+    }
+    show() {
+        if (this.zDisabled() || !this.zContent()) {
+            return;
+        }
+        if (this._isVisible()) {
+            this._delay(true, 0);
+            return;
+        }
+        this._delay(true, this.zShowDelay());
+    }
+    hide() {
+        this._delay(false, this.zHideDelay());
+    }
+    hideImmediate() {
+        this._disposeOverlay();
+        this._isVisible.set(false);
+        this.zHide.emit();
+    }
+    toggle() {
+        if (this._isVisible()) {
+            this.hide();
+            return;
+        }
+        this.show();
+    }
+    isOpen() {
+        return this._isVisible();
+    }
+    _createOverlay() {
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(this._elementRef)
+            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(this.zScrollClose())
+            .withViewportMargin(8);
+        const widthConfig = this._getWidthConfig();
+        const scrollStrategy = this.zScrollClose()
+            ? this._overlay.scrollStrategies.close()
+            : this._overlay.scrollStrategies.reposition();
+        return this._overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: false,
+            ...widthConfig,
+        });
+    }
+    _getWidthConfig() {
+        const width = this.zPopoverWidth();
+        if (width === 'auto') {
+            return {};
+        }
+        if (width === 'trigger') {
+            const triggerWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
+            return { width: `${triggerWidth}px`, minWidth: `${triggerWidth}px` };
+        }
+        return { width, minWidth: width };
+    }
+    _disposeOverlay() {
+        this._positionSubscription?.unsubscribe();
+        this._positionSubscription = null;
+        this._scrollSubscription?.unsubscribe();
+        this._scrollSubscription = null;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = 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._showPopover();
+                return;
+            }
+            this._hidePopover();
+        });
+    }
+    _setupTriggers() {
+        this._cleanupListeners();
+        const trigger = this.zTrigger();
+        if (trigger === 'hover') {
+            this._listenerCleanups.push(this._renderer.listen(this._elementRef.nativeElement, 'mouseenter', () => this.show()), this._renderer.listen(this._elementRef.nativeElement, 'focus', () => this.show()));
+            if (!this.zManualClose()) {
+                this._listenerCleanups.push(this._renderer.listen(this._elementRef.nativeElement, 'mouseleave', () => this.hide()), this._renderer.listen(this._elementRef.nativeElement, 'blur', () => this.hide()));
+            }
+            return;
+        }
+        if (trigger === 'click') {
+            this._listenerCleanups.push(this._renderer.listen(this._elementRef.nativeElement, 'click', (event) => {
+                event.stopPropagation();
+                this.toggle();
+            }));
+        }
+    }
+    _setupOutsideClick() {
+        if (!this._overlayRef) {
+            return;
+        }
+        this._overlayRef
+            .outsidePointerEvents()
+            .pipe(filter(() => !this.zManualClose()), filter(() => this.zTrigger() === 'click'), filter(event => !this._elementRef.nativeElement.contains(event.target)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._delay(false, 0));
+    }
+    _setupScrollClose() {
+        this._scrollSubscription?.unsubscribe();
+        let ticking = false;
+        const onScroll = (event) => {
+            if (!this._isVisible() || !this._overlayRef) {
+                return;
+            }
+            const { target } = event;
+            const { overlayElement } = this._overlayRef;
+            if (overlayElement && overlayElement.contains(target)) {
+                return;
+            }
+            if (this.zScrollClose() && !this.zManualClose()) {
+                this.hideImmediate();
+                return;
+            }
+            if (ticking) {
+                return;
+            }
+            ticking = true;
+            requestAnimationFrame(() => {
+                this._overlayRef?.updatePosition();
+                ticking = false;
+            });
+        };
+        this._document.addEventListener('scroll', onScroll, true);
+        this._scrollSubscription = {
+            unsubscribe: () => {
+                this._document.removeEventListener('scroll', onScroll, true);
+            },
+        };
+    }
+    _delay(show, delay) {
+        this._delaySubject.next({ show, delay });
+    }
+    _showPopover() {
+        const content = this.zContent();
+        if (!content || this._componentRef) {
+            return;
+        }
+        if (!this._overlayRef) {
+            this._overlayRef = this._createOverlay();
+            this._setupOutsideClick();
+        }
+        this._setupScrollClose();
+        const positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(this._elementRef)
+            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(this.zScrollClose())
+            .withViewportMargin(8);
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        const widthConfig = this._getWidthConfig();
+        if (widthConfig.width) {
+            this._overlayRef.updateSize({ width: widthConfig.width, minWidth: widthConfig.minWidth });
+        }
+        const portal = new ComponentPortal(ZPopoverContentComponent);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.setProps({
+            content,
+            position: this.zPosition(),
+            customClass: this.zClass(),
+            onClose: () => this.hide(),
+            showArrow: this.zShowArrow(),
+        });
+        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
+            const actualPosition = getActualPopoverPosition(change);
+            this._componentRef?.instance.position.set(actualPosition);
+        });
+        if (this.zTrigger() === 'hover') {
+            this._setupPopoverHover();
+        }
+        this._setupResizeObserver();
+        this._isVisible.set(true);
+        this.zShow.emit();
+    }
+    _setupResizeObserver() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = new ResizeObserver(() => {
+            if (this._overlayRef && this._isVisible()) {
+                this._overlayRef.updatePosition();
+                const widthConfig = this._getWidthConfig();
+                if (widthConfig.width) {
+                    this._overlayRef.updateSize({ width: widthConfig.width, minWidth: widthConfig.minWidth });
+                }
+            }
+        });
+        this._resizeObserver.observe(this._elementRef.nativeElement);
+    }
+    _setupPopoverHover() {
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        this._listenerCleanups.push(this._renderer.listen(overlayElement, 'mouseenter', () => {
+            this._delay(true, 0);
+        }));
+        if (!this.zManualClose()) {
+            this._listenerCleanups.push(this._renderer.listen(overlayElement, 'mouseleave', () => {
+                this._delay(false, this.zHideDelay());
+            }));
+        }
+    }
+    _hidePopover() {
+        if (!this._componentRef) {
+            return;
+        }
+        this._isVisible.set(false);
+        this.zHideStart.emit();
+        this._componentRef.instance.state.set('closed');
+        setTimeout(() => {
+            this._disposeOverlay();
+            this.zHide.emit();
+        }, Z_POPOVER_ANIMATION_DURATION);
+    }
+    _cleanupListeners() {
+        this._listenerCleanups.forEach(cleanup => cleanup());
+        this._listenerCleanups = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZPopoverDirective, isStandalone: true, selector: "[z-popover]", inputs: { zContent: { classPropertyName: "zContent", publicName: "zPopoverContent", 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 }, 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 }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zPopoverWidth: { classPropertyName: "zPopoverWidth", publicName: "zPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zHideStart: "zHideStart", zControl: "zControl" }, exportAs: ["zPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-popover]',
+                    standalone: true,
+                    exportAs: 'zPopover',
+                }]
+        }], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", 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 }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverWidth", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zHideStart: [{ type: i0.Output, args: ["zHideStart"] }], zControl: [{ type: i0.Output, args: ["zControl"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZPopoverComponent, ZPopoverDirective, zPopoverVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-popover.mjs.map