@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-popover.mjs

@@ -1,312 +1,441 @@
-import { Overlay, ScrollStrategyOptions, OverlayConfig } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, ViewContainerRef, DestroyRef, signal, input, booleanAttribute, numberAttribute, output, Directive } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, switchMap, merge, map } from 'rxjs';
-import { carryThemeScope, materialPresetClassesOf } from '@rt-tools/ui-kit-v2/core';
-
+import { Overlay, OverlayConfig, ScrollStrategyOptions } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, ViewContainerRef, booleanAttribute, inject, input, numberAttribute, output, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Subject, map, merge, switchMap } from "rxjs";
+import { carryThemeScope, materialPresetClassesOf } from "@rt-tools/ui-kit-v2/core";
 const HOVER_CLOSE_DELAY_MS = 100;
-/**
- * Высота, ниже которой ужимать панель под вьюпорт бессмысленно: в такой полосе не
- * видно и одного пункта. Нужна только режиму `fitViewport` — по ней CDK решает,
- * что свободного места под триггером хватает.
- */
 const FIT_VIEWPORT_MIN_HEIGHT_PX = 120;
-/**
- * Переиспользуемый popover-примитив поверх CDK Overlay. Привязывает плавающую
- * панель (`<ng-template>`) к host-элементу. Движок — CDK Overlay
- * (`flexibleConnectedTo`): авто-flip у края viewport, reposition при скролле,
- * outside-click и Escape закрытие из коробки — без ручного `position: absolute`
- * в `:host` (тот резался `overflow: hidden` предками: таблицы, aside, карточки).
- *
- * Триггеры:
- * - `click` (default) — toggle по клику на host; outside-click закрывает.
- * - `hover` — открытие на `mouseenter`, закрытие с grace-периодом на `mouseleave`
- *   (наведение на панель удерживает её открытой).
- * - `manual` — авто-listener'ы не вешаются; host сам зовёт `open()/close()`.
- *   Используется form-control'ами с собственным жестом (autocomplete — открытие
- *   по набору текста).
- *
- * `open()/close()/toggle()/isOpen()` публичны во ВСЕХ режимах — `trigger` лишь
- * определяет авто-listener'ы. `width: 'trigger'` синхронизирует ширину панели с
- * host'ом (dropdown'ы), `'trigger-min'` не даёт панели стать уже host'а и дальше пускает
- * её по содержимому, `'auto'` — content-sized (тултипы).
- */
-class RtPopoverDirective {
-    #overlay;
-    #elementRef;
-    #viewContainerRef;
-    #scrollStrategies;
-    #destroyRef;
-    #overlayCreatedSource;
-    #overlayRef;
-    #hoverCloseTimer;
-    constructor() {
-        this.#overlay = inject(Overlay);
-        this.#elementRef = inject(ElementRef);
-        this.#viewContainerRef = inject(ViewContainerRef);
-        this.#scrollStrategies = inject(ScrollStrategyOptions);
-        this.#destroyRef = inject(DestroyRef);
-        this.#overlayCreatedSource = new Subject();
-        this.#overlayRef = null;
-        this.#hoverCloseTimer = null;
-        this.isOpenState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isOpenState" }] : /* istanbul ignore next */ []));
-        this.template = input(null, { ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), alias: 'rtPopover' });
-        this.trigger = input('click', { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), alias: 'rtPopoverTrigger' });
-        this.width = input('auto', { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), alias: 'rtPopoverWidth' });
-        /** `end` — панель прижата к правому краю host'а (триггеры у правого края viewport). */
-        this.align = input('start', { ...(ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {}), alias: 'rtPopoverAlign' });
-        /**
-         * Панель обязана уместиться во вьюпорт: не влезающая по ширине сдвигается от
-         * края экрана внутрь, не влезающая по высоте ужимается до свободного места под
-         * триггером, и содержимое в ней прокручивается.
-         *
-         * По умолчанию выключено: панель стоит ровно там, куда её ставит привязка к
-         * триггеру, даже если часть её ушла за экран. Включать там, где панель широкая
-         * или высокая настолько, что привязка сама по себе её не удерживает, — иначе
-         * пункты навигации остаются за краем экрана и недостижимы.
-         */
-        this.fitViewport = input(false, { ...(ngDevMode ? { debugName: "fitViewport" } : /* istanbul ignore next */ {}), alias: 'rtPopoverFitViewport',
-            transform: booleanAttribute });
-        this.context = input(null, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'rtPopoverContext' });
-        this.panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : /* istanbul ignore next */ {}), alias: 'rtPopoverPanelClass' });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'rtPopoverDisabled',
-            transform: booleanAttribute });
-        this.offsetY = input(4, { ...(ngDevMode ? { debugName: "offsetY" } : /* istanbul ignore next */ {}), alias: 'rtPopoverOffsetY',
-            transform: numberAttribute });
-        this.offsetX = input(0, { ...(ngDevMode ? { debugName: "offsetX" } : /* istanbul ignore next */ {}), alias: 'rtPopoverOffsetX',
-            transform: numberAttribute });
-        this.opened = output({ alias: 'rtPopoverOpened' });
-        this.closed = output({ alias: 'rtPopoverClosed' });
-        this.isOpen = this.isOpenState.asReadonly();
-        // Outside-click / ESC подписки на единожды создаваемый overlay живут в
-        // одном конструкторном стриме: #ensureOverlay эмитит OverlayRef после
-        // создания (ровно один раз за жизнь директивы), стрим живёт до destroy.
-        this.#overlayCreatedSource
-            .pipe(switchMap((overlayRef) => merge(overlayRef.outsidePointerEvents().pipe(map((event) => () => {
-            // Клик по host в режиме click обрабатывает onHostClick (toggle) —
-            // не закрываем здесь, иначе двойной toggle (close + open).
-            if (this.#elementRef.nativeElement.contains(event.target)) {
-                return;
-            }
-            // Клик по вложенной панели — не клик снаружи: закрытие
-            // разрушило бы её вместе с нашей до того, как выбор
-            // дойдёт до обработчика
-            if (this.#isNestedOverlay(event.target)) {
-                return;
-            }
-            this.close();
-        })), overlayRef.keydownEvents().pipe(map((event) => () => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.close();
-            }
-        })))), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((handleCloseIntent) => handleCloseIntent());
-    }
-    ngOnDestroy() {
-        this.#clearHoverTimer();
-        this.#disposeOverlay();
-    }
-    open() {
-        if (this.disabled() || this.isOpenState() || this.template() === null) {
-            return;
-        }
-        const overlayRef = this.#ensureOverlay();
-        const hostWidth = this.#elementRef.nativeElement.offsetWidth;
-        const sizeByWidth = {
-            trigger: { width: hostWidth },
-            'trigger-min': { minWidth: hostWidth },
-            auto: {},
-        };
-        overlayRef.updateSize(sizeByWidth[this.width()]);
-        // Тема куска `rtTheme` вокруг host'а едет на коробку панели: панель лежит в конце
-        // страницы, и без этого список из тёмной карточки рисовался темой страницы.
-        carryThemeScope(overlayRef.overlayElement, this.#elementRef.nativeElement);
-        const portal = new TemplatePortal(this.template(), this.#viewContainerRef, {
-            $implicit: this.context(),
-        });
-        overlayRef.attach(portal);
-        this.isOpenState.set(true);
-        this.opened.emit();
-    }
-    close() {
-        if (!this.isOpenState()) {
-            return;
-        }
-        this.#overlayRef?.detach();
-        this.isOpenState.set(false);
-        this.closed.emit();
-    }
-    toggle() {
-        if (this.isOpenState()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    // --- авто-triggers (HostListener'ы навешиваются на host безусловно, но
-    //     проверяют активный режим — это дешевле, чем условная подписка) ---
-    onHostClick() {
-        if (this.trigger() !== 'click' || this.disabled()) {
-            return;
-        }
-        this.toggle();
-    }
-    onHostMouseEnter() {
-        if (this.trigger() !== 'hover') {
-            return;
-        }
-        this.#clearHoverTimer();
-        this.open();
-    }
-    onHostMouseLeave(event) {
-        if (this.trigger() !== 'hover') {
-            return;
-        }
-        if (this.#isNestedOverlay(event.relatedTarget)) {
-            return;
-        }
-        this.#scheduleHoverClose();
-    }
-    #ensureOverlay() {
-        if (this.#overlayRef !== null) {
-            return this.#overlayRef;
-        }
-        const alignX = this.align();
-        const positions = [
-            {
-                originX: alignX,
-                originY: 'bottom',
-                overlayX: alignX,
-                overlayY: 'top',
-                offsetX: this.offsetX(),
-                offsetY: this.offsetY(),
-            },
-            {
-                originX: alignX,
-                originY: 'top',
-                overlayX: alignX,
-                overlayY: 'bottom',
-                offsetX: this.offsetX(),
-                offsetY: -this.offsetY(),
-            },
-        ];
-        // Сдвиг к краю экрана и ужатие по высоте включаются только по просьбе
-        // потребителя: панель, которая и так помещается, обязана стоять у своего
-        // триггера — меню строки таблицы, подтверждение, меню профиля.
-        const fitViewport = this.fitViewport();
-        const positionStrategy = this.#overlay
-            .position()
-            .flexibleConnectedTo(this.#elementRef)
-            .withPush(fitViewport)
-            .withFlexibleDimensions(fitViewport)
-            // Отступ от края экрана равен отступу от триггера: свободное место
-            // считается без него, и ужатая по высоте панель свисала бы за нижний
-            // край ровно на этот отступ — вместе со своей рамкой.
-            .withViewportMargin(fitViewport ? Math.abs(this.offsetY()) : 0)
-            .withPositions(positions);
-        const config = new OverlayConfig({
-            positionStrategy,
-            scrollStrategy: this.#scrollStrategies.reposition(),
-            hasBackdrop: false,
-            panelClass: this.#resolvePanelClasses(),
-            // Порог, ниже которого свободного места под триггером считается
-            // недостаточно и панель не ужимается, а сдвигается целиком.
-            minHeight: fitViewport ? FIT_VIEWPORT_MIN_HEIGHT_PX : undefined,
-        });
-        const overlayRef = this.#overlay.create(config);
-        // Hover-bridge: при переходе курсора с host'а на панель отложенный close
-        // (grace-период) гасится; уход с панели планирует его заново. Без этого
-        // hover-popover закрывался бы по таймеру, как только мышь покидает host.
-        // Listeners живут на overlay-элементе и умирают вместе с ним в dispose().
-        overlayRef.overlayElement.addEventListener('mouseenter', () => {
-            if (this.trigger() === 'hover') {
-                this.#clearHoverTimer();
-            }
-        });
-        overlayRef.overlayElement.addEventListener('mouseleave', (event) => {
-            if (this.trigger() === 'hover' && !this.#isNestedOverlay(event.relatedTarget)) {
-                this.#scheduleHoverClose();
-            }
-        });
-        // Outside-click / ESC подписки объявлены один раз в конструкторе —
-        // здесь только эмит созданного OverlayRef (см. #overlayCreatedSource-стрим).
-        this.#overlayCreatedSource.next(overlayRef);
-        this.#overlayRef = overlayRef;
-        return overlayRef;
-    }
-    /**
-     * Панель, открытая из нашей — список `rt-select`, календарь, вложенное меню.
-     *
-     * В DOM она лежит не внутри нашей панели, а рядом, отдельным оверлеем CDK.
-     * Поэтому и уход курсора на неё, и клик по ней выглядят как «ушёл наружу»:
-     * меню профиля закрывалось прямо под рукой, стоило потянуться к списку
-     * языков, а выбранное значение до обработчика не доходило — панель со
-     * `rt-select` разрушалась раньше.
-     *
-     * Вложенность определяется порядком в контейнере оверлеев: CDK добавляет их
-     * по мере открытия, поэтому панель, открытая из нашей, всегда следует за
-     * нашей. Соседний оверлей, открытый до нас, этой проверкой не удерживается —
-     * клик по нему закрывает попап, как и любой клик снаружи.
-     */
-    #isNestedOverlay(target) {
-        const panel = this.#overlayRef?.overlayElement;
-        if (!panel || !(target instanceof Element)) {
-            return false;
-        }
-        const nested = target.closest('.cdk-overlay-pane');
-        const container = panel.parentElement;
-        if (nested === null || nested === panel || container === null) {
-            return false;
-        }
-        // `querySelectorAll` отдаёт узлы в порядке документа — им и меряется,
-        // какая панель открыта позже
-        const panes = Array.from(container.querySelectorAll('.cdk-overlay-pane'));
-        return panes.indexOf(nested) > panes.indexOf(panel);
-    }
-    #resolvePanelClasses() {
-        const base = 'rt-popover-panel';
-        const extra = this.panelClass().trim();
-        const preset = materialPresetClassesOf(this.#elementRef.nativeElement);
-        return extra ? [base, ...extra.split(/\s+/), ...preset] : [base, ...preset];
-    }
-    #scheduleHoverClose() {
-        this.#clearHoverTimer();
-        this.#hoverCloseTimer = setTimeout(() => this.close(), HOVER_CLOSE_DELAY_MS);
-    }
-    #clearHoverTimer() {
-        if (this.#hoverCloseTimer !== null) {
-            clearTimeout(this.#hoverCloseTimer);
-            this.#hoverCloseTimer = null;
-        }
-    }
-    #disposeOverlay() {
-        this.#overlayRef?.dispose();
-        this.#overlayRef = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtPopoverDirective, isStandalone: true, selector: "[rtPopover]", inputs: { template: { classPropertyName: "template", publicName: "rtPopover", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "rtPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "rtPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "rtPopoverAlign", isSignal: true, isRequired: false, transformFunction: null }, fitViewport: { classPropertyName: "fitViewport", publicName: "rtPopoverFitViewport", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "rtPopoverContext", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "rtPopoverPanelClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "rtPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "rtPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "rtPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "rtPopoverOpened", closed: "rtPopoverClosed" }, host: { listeners: { "click": "onHostClick()", "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave($event)" } }, exportAs: ["rtPopover"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPopoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtPopover]',
-                    exportAs: 'rtPopover',
-                    host: {
-                        '(click)': 'onHostClick()',
-                        '(mouseenter)': 'onHostMouseEnter()',
-                        '(mouseleave)': 'onHostMouseLeave($event)',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopover", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverTrigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverWidth", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverAlign", required: false }] }], fitViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverFitViewport", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverContext", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverPanelClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverDisabled", required: false }] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverOffsetY", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtPopoverOffsetX", required: false }] }], opened: [{ type: i0.Output, args: ["rtPopoverOpened"] }], closed: [{ type: i0.Output, args: ["rtPopoverClosed"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtPopoverDirective = class RtPopoverDirective {
+	#overlay;
+	#elementRef;
+	#viewContainerRef;
+	#scrollStrategies;
+	#destroyRef;
+	#overlayCreatedSource;
+	#overlayRef;
+	#positionStrategy;
+	#hoverCloseTimer;
+	constructor() {
+		this.#overlay = inject(Overlay);
+		this.#elementRef = inject(ElementRef);
+		this.#viewContainerRef = inject(ViewContainerRef);
+		this.#scrollStrategies = inject(ScrollStrategyOptions);
+		this.#destroyRef = inject(DestroyRef);
+		this.#overlayCreatedSource = new Subject();
+		this.#overlayRef = null;
+		this.#positionStrategy = null;
+		this.#hoverCloseTimer = null;
+		this.isOpenState = signal(false, ...ngDevMode ? [{ debugName: "isOpenState" }] : /* istanbul ignore next */ []);
+		this.template = input(null, {
+			...ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {},
+			alias: "rtPopover"
+		});
+		this.trigger = input("click", {
+			...ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverTrigger"
+		});
+		this.width = input("auto", {
+			...ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverWidth"
+		});
+		this.align = input("start", {
+			...ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverAlign"
+		});
+		this.fitViewport = input(false, {
+			...ngDevMode ? { debugName: "fitViewport" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverFitViewport",
+			transform: booleanAttribute
+		});
+		this.context = input(null, {
+			...ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverContext"
+		});
+		this.panelClass = input("", {
+			...ngDevMode ? { debugName: "panelClass" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverPanelClass"
+		});
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverDisabled",
+			transform: booleanAttribute
+		});
+		this.offsetY = input(4, {
+			...ngDevMode ? { debugName: "offsetY" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverOffsetY",
+			transform: numberAttribute
+		});
+		this.offsetX = input(0, {
+			...ngDevMode ? { debugName: "offsetX" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverOffsetX",
+			transform: numberAttribute
+		});
+		this.positions = input(null, {
+			...ngDevMode ? { debugName: "positions" } : /* istanbul ignore next */ {},
+			alias: "rtPopoverPositions"
+		});
+		this.opened = output({ alias: "rtPopoverOpened" });
+		this.closed = output({ alias: "rtPopoverClosed" });
+		this.isOpen = this.isOpenState.asReadonly();
+		this.#overlayCreatedSource.pipe(switchMap((overlayRef) => merge(overlayRef.outsidePointerEvents().pipe(map((event) => () => {
+			if (this.#elementRef.nativeElement.contains(event.target)) return;
+			if (this.#isNestedOverlay(event.target)) return;
+			this.close();
+		})), overlayRef.keydownEvents().pipe(map((event) => () => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				this.close();
+			}
+		})))), takeUntilDestroyed(this.#destroyRef)).subscribe((handleCloseIntent) => handleCloseIntent());
+	}
+	ngOnDestroy() {
+		this.#clearHoverTimer();
+		this.#disposeOverlay();
+	}
+	open() {
+		if (this.disabled() || this.isOpenState() || this.template() === null) return;
+		const overlayRef = this.#ensureOverlay();
+		const positions = this.positions();
+		if (positions !== null) this.#positionStrategy?.withPositions([...positions]);
+		const hostWidth = this.#elementRef.nativeElement.offsetWidth;
+		const sizeByWidth = {
+			trigger: { width: hostWidth },
+			"trigger-min": { minWidth: hostWidth },
+			auto: {}
+		};
+		overlayRef.updateSize(sizeByWidth[this.width()]);
+		carryThemeScope(overlayRef.overlayElement, this.#elementRef.nativeElement);
+		const portal = new TemplatePortal(this.template(), this.#viewContainerRef, { $implicit: this.context() });
+		overlayRef.attach(portal);
+		this.isOpenState.set(true);
+		this.opened.emit();
+	}
+	close() {
+		if (!this.isOpenState()) return;
+		this.#overlayRef?.detach();
+		this.isOpenState.set(false);
+		this.closed.emit();
+	}
+	toggle() {
+		if (this.isOpenState()) this.close();
+		else this.open();
+	}
+	onHostClick() {
+		if (this.trigger() !== "click" || this.disabled()) return;
+		this.toggle();
+	}
+	onHostMouseEnter() {
+		if (this.trigger() !== "hover") return;
+		this.#clearHoverTimer();
+		this.open();
+	}
+	onHostMouseLeave(event) {
+		if (this.trigger() !== "hover") return;
+		if (this.#isNestedOverlay(event.relatedTarget)) return;
+		this.#scheduleHoverClose();
+	}
+	#ensureOverlay() {
+		if (this.#overlayRef !== null) return this.#overlayRef;
+		const alignX = this.align();
+		const positions = [{
+			originX: alignX,
+			originY: "bottom",
+			overlayX: alignX,
+			overlayY: "top",
+			offsetX: this.offsetX(),
+			offsetY: this.offsetY()
+		}, {
+			originX: alignX,
+			originY: "top",
+			overlayX: alignX,
+			overlayY: "bottom",
+			offsetX: this.offsetX(),
+			offsetY: -this.offsetY()
+		}];
+		const fitViewport = this.fitViewport();
+		const positionStrategy = this.#overlay.position().flexibleConnectedTo(this.#elementRef).withPush(fitViewport).withFlexibleDimensions(fitViewport).withViewportMargin(fitViewport ? Math.abs(this.offsetY()) : 0).withPositions(positions);
+		this.#positionStrategy = positionStrategy;
+		const config = new OverlayConfig({
+			positionStrategy,
+			scrollStrategy: this.#scrollStrategies.reposition(),
+			hasBackdrop: false,
+			panelClass: this.#resolvePanelClasses(),
+			minHeight: fitViewport ? FIT_VIEWPORT_MIN_HEIGHT_PX : void 0
+		});
+		const overlayRef = this.#overlay.create(config);
+		overlayRef.overlayElement.addEventListener("mouseenter", () => {
+			if (this.trigger() === "hover") this.#clearHoverTimer();
+		});
+		overlayRef.overlayElement.addEventListener("mouseleave", (event) => {
+			if (this.trigger() === "hover" && !this.#isNestedOverlay(event.relatedTarget)) this.#scheduleHoverClose();
+		});
+		this.#overlayCreatedSource.next(overlayRef);
+		this.#overlayRef = overlayRef;
+		return overlayRef;
+	}
+	#isNestedOverlay(target) {
+		const panel = this.#overlayRef?.overlayElement;
+		if (!panel || !(target instanceof Element)) return false;
+		const nested = target.closest(".cdk-overlay-pane");
+		const container = panel.parentElement;
+		if (nested === null || nested === panel || container === null) return false;
+		const panes = Array.from(container.querySelectorAll(".cdk-overlay-pane"));
+		return panes.indexOf(nested) > panes.indexOf(panel);
+	}
+	#resolvePanelClasses() {
+		const base = "rt-popover-panel";
+		const extra = this.panelClass().trim();
+		const preset = materialPresetClassesOf(this.#elementRef.nativeElement);
+		return extra ? [
+			base,
+			...extra.split(/\s+/),
+			...preset
+		] : [base, ...preset];
+	}
+	#scheduleHoverClose() {
+		this.#clearHoverTimer();
+		this.#hoverCloseTimer = setTimeout(() => this.close(), HOVER_CLOSE_DELAY_MS);
+	}
+	#clearHoverTimer() {
+		if (this.#hoverCloseTimer !== null) {
+			clearTimeout(this.#hoverCloseTimer);
+			this.#hoverCloseTimer = null;
+		}
+	}
+	#disposeOverlay() {
+		this.#overlayRef?.dispose();
+		this.#overlayRef = null;
+		this.#positionStrategy = null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPopoverDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtPopoverDirective,
+			isStandalone: true,
+			selector: "[rtPopover]",
+			inputs: {
+				template: {
+					classPropertyName: "template",
+					publicName: "rtPopover",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				trigger: {
+					classPropertyName: "trigger",
+					publicName: "rtPopoverTrigger",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "rtPopoverWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				align: {
+					classPropertyName: "align",
+					publicName: "rtPopoverAlign",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fitViewport: {
+					classPropertyName: "fitViewport",
+					publicName: "rtPopoverFitViewport",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				context: {
+					classPropertyName: "context",
+					publicName: "rtPopoverContext",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				panelClass: {
+					classPropertyName: "panelClass",
+					publicName: "rtPopoverPanelClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "rtPopoverDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				offsetY: {
+					classPropertyName: "offsetY",
+					publicName: "rtPopoverOffsetY",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				offsetX: {
+					classPropertyName: "offsetX",
+					publicName: "rtPopoverOffsetX",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				positions: {
+					classPropertyName: "positions",
+					publicName: "rtPopoverPositions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				opened: "rtPopoverOpened",
+				closed: "rtPopoverClosed"
+			},
+			host: { listeners: {
+				"click": "onHostClick()",
+				"mouseenter": "onHostMouseEnter()",
+				"mouseleave": "onHostMouseLeave($event)"
+			} },
+			exportAs: ["rtPopover"],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPopoverDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtPopover]",
+			exportAs: "rtPopover",
+			host: {
+				"(click)": "onHostClick()",
+				"(mouseenter)": "onHostMouseEnter()",
+				"(mouseleave)": "onHostMouseLeave($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		template: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopover",
+				required: false
+			}]
+		}],
+		trigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverTrigger",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverWidth",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverAlign",
+				required: false
+			}]
+		}],
+		fitViewport: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverFitViewport",
+				required: false
+			}]
+		}],
+		context: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverContext",
+				required: false
+			}]
+		}],
+		panelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverPanelClass",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverDisabled",
+				required: false
+			}]
+		}],
+		offsetY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverOffsetY",
+				required: false
+			}]
+		}],
+		offsetX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverOffsetX",
+				required: false
+			}]
+		}],
+		positions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtPopoverPositions",
+				required: false
+			}]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["rtPopoverOpened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["rtPopoverClosed"]
+		}]
+	}
+});
 export { RtPopoverDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-popover.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-popover.mjs.map