@libs-ui/components-popover 0.1.1-1

package/fesm2022/libs-ui-components-popover.mjs

@@ -0,0 +1,653 @@
+import * as i0 from '@angular/core';
+import { signal, viewChild, inject, ElementRef, ChangeDetectionStrategy, Component, input, output, effect, untracked } from '@angular/core';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
+import { UtilsUrlSearchParams, get, cloneIBoundingClientRect, cloneDeep, getViewport, getEventNameHandleClick, checkMouseOverInContainer, set, isNil } from '@libs-ui/utils';
+import { Subject, interval, take, takeUntil, Subscription, fromEvent } from 'rxjs';
+import { debounceTime, tap, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { NgStyle, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+const KEY_QUERY_POPOVER_TIMER_DESTROY = 'popover-timer-destroy';
+const timerDestroy = parseInt(new UtilsUrlSearchParams(location.href).get(KEY_QUERY_POPOVER_TIMER_DESTROY) || '0');
+const getPopoverTimerDestroyInQueryUrl = () => {
+    return timerDestroy;
+};
+const getListDirections = (direction) => {
+    return get({
+        bottom: ['bottom', 'top', 'right', 'left'],
+        right: ['right', 'left', 'bottom', 'top'],
+        left: ['left', 'right', 'bottom', 'top'],
+        top: ['top', 'bottom', 'right', 'left'],
+    }, direction);
+};
+
+class LibsUiComponentsPopoverOverlayComponent {
+    /* PROPERTIES */
+    currentDirection = signal('bottom');
+    arrowClass = signal('');
+    top = signal(0);
+    left = signal(0);
+    arrowLeft = signal(0);
+    arrowTop = signal(0);
+    config = signal({});
+    timeout = signal(0);
+    onDestroy = new Subject();
+    // #region OUTPUT
+    outEvent = new Subject();
+    /* VIEW CHILD */
+    container = viewChild.required('container');
+    // #region INJECT
+    elementRef = inject(ElementRef);
+    // #region FUNCTIONS
+    get ElementRef() {
+        return this.elementRef;
+    }
+    get ContainerElement() {
+        return this.container().nativeElement;
+    }
+    setConfig(rectOrigin, config, isAddContentToParentDocument) {
+        isAddContentToParentDocument = isAddContentToParentDocument || config.isAddContentToParentDocument;
+        rectOrigin = cloneIBoundingClientRect(rectOrigin);
+        this.config.set(cloneDeep(config));
+        this.container().nativeElement.style.opacity = 0;
+        if (this.config().widthByParent) {
+            this.config.update((config) => ({ ...config, width: rectOrigin.width - (config?.parentBorderWidth || 0) * 2 }));
+        }
+        let viewPort = getViewport();
+        let rectFrame = undefined;
+        if (isAddContentToParentDocument) {
+            viewPort = getViewport(window.parent);
+            const url = new UtilsUrlSearchParams(location.href);
+            const iframeId = url.get('iframeId');
+            rectFrame = window.parent.document.getElementById(`iframe-${iframeId}`)?.getBoundingClientRect();
+            if (rectFrame) {
+                rectOrigin.top += rectFrame.top;
+                rectOrigin.left += rectFrame.left;
+            }
+        }
+        if (this.config().maxHeight === null) {
+            this.config.update((config) => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - 44 }));
+        }
+        clearTimeout(this.timeout());
+        this.setVariableCss();
+        this.setDirections(rectOrigin, viewPort, rectFrame);
+        let rectContent = cloneIBoundingClientRect(this.container().nativeElement.getBoundingClientRect());
+        if (rectFrame) {
+            rectContent.top += rectFrame.top;
+            rectContent.left += rectFrame.left;
+        }
+        interval(250)
+            .pipe(take(4), takeUntil(this.onDestroy))
+            .subscribe(() => {
+            const rect = cloneIBoundingClientRect(this.container().nativeElement.getBoundingClientRect());
+            if (rectFrame) {
+                rect.top += rectFrame.top;
+                rect.left += rectFrame.left;
+            }
+            if (rect.width !== rectContent.width || rect.height !== rectContent.height || rect.top !== rectContent.top || rect.left !== rectContent.left) {
+                clearTimeout(this.timeout());
+                this.setDirections(rectOrigin, viewPort, rectFrame);
+                rectContent = rect;
+            }
+        });
+    }
+    setDirections(rectOrigin, viewPort, rectFrame) {
+        const directions = getListDirections(this.config().direction || 'bottom');
+        const positionLast = directions.length - 1;
+        this.timeout.set(setTimeout(async () => {
+            const rectContent = cloneIBoundingClientRect(this.container().nativeElement.getBoundingClientRect());
+            if (rectFrame) {
+                rectContent.top += rectFrame.top;
+                rectContent.left += rectFrame.left;
+            }
+            for (const index in directions) {
+                if (await this.loopDirection(rectOrigin, rectContent, directions[index], positionLast === +index, viewPort)) {
+                    return;
+                }
+            }
+            const directionByHeight = viewPort.height - rectOrigin.top - rectOrigin.height > rectOrigin.top - 4 ? 'bottom' : 'top';
+            this.loopDirection(rectOrigin, rectContent, directionByHeight, true, viewPort);
+        }, 50));
+    }
+    loopDirection(rectOrigin, rectContent, direction, isLast, viewPort) {
+        return new Promise((resolve) => {
+            const positionMode = this.config().position?.mode || 'start';
+            const { position } = this.config();
+            let result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
+            if (!result) {
+                if (position) {
+                    position.mode = positionMode === 'center' || positionMode === 'start' ? 'end' : 'start';
+                    if (!this.config().ignoreArrow && position.autoUpdatePosition) {
+                        position.distance = position.mode === 'end' ? position.autoUpdatePosition.endDistance : position.autoUpdatePosition.startDistance;
+                    }
+                    this.config.update((config) => ({ ...config }));
+                }
+                result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
+            }
+            if (!result && positionMode === 'center') {
+                if (position) {
+                    position.mode = position.mode === 'start' ? 'end' : 'start';
+                    this.config.update((config) => ({ ...config }));
+                }
+                result = this.setPosition(direction, rectOrigin, rectContent, viewPort, isLast);
+            }
+            if (!result) {
+                if (position) {
+                    position.mode = positionMode;
+                    this.config.update((config) => ({ ...config }));
+                }
+                return resolve(false);
+            }
+            this.currentDirection.set(direction);
+            this.setVariableCss();
+            this.setClassArrow(direction);
+            this.container().nativeElement.style.opacity = 1;
+            this.outEvent.next(direction);
+            return resolve(true);
+        });
+    }
+    setPosition(direction, rectOrigin, rectContent, viewPort, isLast) {
+        const halfSquare = 6;
+        const distanceArrow = 4;
+        let bottomPositionRectContent = 0;
+        let positionTop = 0;
+        let positionLeft = 0;
+        let top = 0;
+        let left = 0;
+        const configValue = this.config();
+        switch (direction) {
+            case 'bottom':
+                positionTop = rectOrigin.top + rectOrigin.height + distanceArrow;
+                positionLeft = rectOrigin.left + rectOrigin.width / 2 - halfSquare;
+                top = positionTop + halfSquare;
+                left = positionLeft - rectContent.width / 2 + halfSquare;
+                if (configValue.ignoreArrow) {
+                    top = top - halfSquare - distanceArrow;
+                }
+                top += configValue.directionDistance || 0;
+                if (configValue.position?.mode === 'start') {
+                    left = rectOrigin.left + (configValue.position.distance || 0);
+                }
+                if (configValue.position?.mode === 'end') {
+                    left = rectOrigin.left + rectOrigin.width - rectContent.width + (configValue.position.distance || 0);
+                }
+                left += configValue.parentBorderWidth || 0;
+                this.arrowLeft.set(positionLeft - left);
+                this.arrowTop.set(-6);
+                this.top.set(top);
+                this.left.set(left);
+                if (top + rectContent.height < viewPort.height && left >= 0 && left + rectContent.width < viewPort.width) {
+                    return true;
+                }
+                if (isLast) {
+                    if (this.config) {
+                        this.config.update((config) => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - rectOrigin.height }));
+                    }
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
+                }
+                return false;
+            case 'right':
+                positionTop = rectOrigin.top + rectOrigin.height / 2 - halfSquare;
+                positionLeft = rectOrigin.left + rectOrigin.width + distanceArrow;
+                top = positionTop - rectContent.height / 2 + halfSquare;
+                left = positionLeft + halfSquare;
+                if (configValue.ignoreArrow) {
+                    left = positionLeft - distanceArrow;
+                }
+                left += configValue.directionDistance || 0;
+                if (configValue.position?.mode === 'start') {
+                    top = rectOrigin.top + (configValue.position?.distance || 0);
+                }
+                if (configValue.position?.mode === 'end') {
+                    top = rectOrigin.top + rectOrigin.height - rectContent.height + (configValue.position.distance || 0);
+                }
+                bottomPositionRectContent = top + rectContent.height;
+                if (bottomPositionRectContent > viewPort.height) {
+                    top = top - (bottomPositionRectContent - viewPort.height);
+                }
+                this.arrowTop.set(positionTop - top + 2);
+                this.arrowLeft.set(-9);
+                this.top.set(top);
+                this.left.set(left);
+                if (top > 0 && left + rectContent.width < viewPort.width) {
+                    return true;
+                }
+                if (isLast) {
+                    if (this.config) {
+                        this.config.update((config) => ({ ...config, maxHeight: viewPort.height }));
+                    }
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
+                }
+                return false;
+            case 'left':
+                positionTop = rectOrigin.top + rectOrigin.height / 2 - halfSquare;
+                positionLeft = rectOrigin.left - halfSquare * 2 - distanceArrow;
+                top = positionTop - rectContent.height / 2 + halfSquare;
+                left = positionLeft - rectContent.width + halfSquare;
+                if (configValue.ignoreArrow) {
+                    left = left + halfSquare + distanceArrow;
+                }
+                left -= configValue?.directionDistance || 0;
+                if (configValue.position?.mode === 'start') {
+                    top = rectOrigin.top + (configValue.position.distance || 0);
+                }
+                if (configValue.position?.mode === 'end') {
+                    top = rectOrigin.top + rectOrigin.height - rectContent.height + (configValue.position.distance || 0);
+                }
+                bottomPositionRectContent = top + rectContent.height;
+                if (bottomPositionRectContent > viewPort.height) {
+                    top = top - (bottomPositionRectContent - viewPort.height);
+                }
+                this.arrowTop.set(positionTop - top + 2);
+                this.arrowLeft.set(rectContent.width - 3);
+                this.top.set(top);
+                this.left.set(left);
+                if (left > 0 && top > 0) {
+                    return true;
+                }
+                if (isLast) {
+                    if (this.config) {
+                        this.config.update((config) => ({ ...config, maxHeight: viewPort.height }));
+                    }
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
+                }
+                return false;
+            case 'top':
+                positionTop = rectOrigin.top - halfSquare * 2 - distanceArrow;
+                positionLeft = rectOrigin.left + rectOrigin.width / 2 - halfSquare;
+                top = positionTop - rectContent.height + halfSquare;
+                left = positionLeft - rectContent.width / 2 + halfSquare;
+                if (configValue.ignoreArrow) {
+                    top = top + halfSquare + distanceArrow;
+                }
+                top -= configValue.directionDistance || 0;
+                if (configValue.position && configValue.position?.mode === 'start') {
+                    left = rectOrigin.left + (configValue.position.distance || 0);
+                }
+                if (configValue.position && configValue.position?.mode === 'end') {
+                    left = rectOrigin.left + rectOrigin.width - rectContent.width + (configValue.position.distance || 0);
+                }
+                left += configValue.parentBorderWidth || 0;
+                this.arrowLeft.set(positionLeft - left);
+                this.arrowTop.set(rectContent.height);
+                this.top.set(top);
+                this.left.set(left);
+                if (top > 0 && left >= 0 && left + rectContent.width < viewPort.width) {
+                    return true;
+                }
+                if (isLast) {
+                    this.config.update((config) => ({ ...config, maxHeight: rectOrigin.top - 4 }));
+                    top = 0;
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
+                }
+                return false;
+        }
+    }
+    setClassArrow(direction) {
+        if (direction === 'right') {
+            return this.arrowClass.set('libs-ui-popover-overlay-arrow-right');
+        }
+        if (direction === 'left') {
+            return this.arrowClass.set('libs-ui-popover-overlay-arrow-left');
+        }
+        if (direction === 'top') {
+            return this.arrowClass.set('libs-ui-popover-overlay-arrow-down');
+        }
+        return this.arrowClass.set('libs-ui-popover-overlay-arrow-up');
+    }
+    setVariableCss() {
+        const configValue = this.config();
+        this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-time', `${configValue.animationConfig?.time || 0.4}s`);
+        this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-distance', `${this.currentDirection() === 'top' ? '-' : ''}${configValue.animationConfig?.distance || 12}px`);
+    }
+    getLeftPositionIsLast(isLast, currentLeft, viewPort, rectOrigin, rectContent, halfSquare) {
+        if (viewPort.width - (rectOrigin.left + rectOrigin.width + rectContent.width + halfSquare) > 0) {
+            return rectOrigin.left + rectOrigin.width + halfSquare;
+        }
+        return currentLeft;
+    }
+    ngOnDestroy() {
+        clearTimeout(this.timeout());
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPopoverOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPopoverOverlayComponent, isStandalone: true, selector: "libs_ui-components-popover-overlay", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #container\n  class=\"libs-ui-popover-overlay {{ config().classInclude || '' }}\"\n  [class.libs-ui-popover-overlay-white-theme]=\"config().whiteTheme\"\n  [class.libs-ui-popover-overlay-animation-move]=\"config().animationConfig\"\n  [ngStyle]=\"config().ngStyles || {}\"\n  [style.width]=\"config().width ? config().width + 'px' : 'auto'\"\n  [style.maxWidth.px]=\"config().maxWidth\"\n  [style.maxHeight.px]=\"config().maxHeight\"\n  [style.top.px]=\"top()\"\n  [style.left.px]=\"left()\"\n  [style.zIndex]=\"config().zIndex || 10\">\n  @if (config()) {\n    @if (!config().ignoreArrow) {\n      <div class=\"relative\">\n        <svg\n          [class]=\"'libs-ui-popover-overlay-arrow ' + arrowClass() + (config().whiteTheme ? ' libs-ui-popover-overlay-white-theme ' : '')\"\n          [style.top.px]=\"arrowTop()\"\n          [style.left.px]=\"arrowLeft()\"\n          [attr.direction]=\"outEvent | async\">\n          <polygon points=\"0,0 6,6 12,0\" />\n          Sorry, your browser does not support inline SVG.\n        </svg>\n      </div>\n    }\n    @if (config().template; as templateConfig) {\n      <div\n        LibsUiComponentsScrollOverlayDirective\n        class=\"libs-ui-popover-overlay-body {{ config().classIncludeOverlayBody || '' }}\"\n        [attr.isTemplate]=\"true\"\n        [style.max-height]=\"config().maxHeight + 'px'\">\n        <ng-container *ngTemplateOutlet=\"templateConfig; context: { itemContext: config().itemContext }\" />\n      </div>\n    } @else {\n      @let constHtmlContent = config().content || ' ';\n      <div\n        class=\"libs-ui-popover-overlay-body libs-ui-font-h7r {{ config().classIncludeOverlayBody || '' }}\"\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"config().scrollOverlayOptions\"\n        [style.maxHeight.px]=\"config().maxHeight\"\n        [style.paddingTop.px]=\"config().paddingTop ?? 8\"\n        [style.paddingRight.px]=\"config().paddingRight ?? 8\"\n        [style.paddingLeft.px]=\"config().paddingLeft ?? 8\"\n        [style.paddingBottom.px]=\"config().paddingBottom ?? 8\"\n        [innerHtml]=\"constHtmlContent | translate\"></div>\n    }\n  }\n</div>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}.libs-ui-popover-overlay{position:fixed;background-color:#071631;border-radius:8px;z-index:1000;top:-10000px;left:-10000px}.libs-ui-popover-overlay-animation-move{animation:animation-move ease var(--libs-ui-popover-overlay-time-animation-time)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow{position:absolute;width:12px;height:6px;fill:#071631}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=bottom]{transform:rotate(180deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=left]{transform:rotate(270deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=right]{transform:rotate(90deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-white-theme{fill:#fff}.libs-ui-popover-overlay .libs-ui-popover-overlay-body{color:#fff;word-break:break-word}.libs-ui-popover-overlay .libs-ui-popover-overlay-body[isTemplate=true]{font-size:inherit}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme{background-color:#fff;box-shadow:0 1px 1px #00143305,0 4px 16px #0014331a}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme .libs-ui-popover-overlay-body{color:#071631}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPopoverOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-popover-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, NgStyle, AsyncPipe, LibsUiComponentsScrollOverlayDirective, NgTemplateOutlet], template: "<div\n  #container\n  class=\"libs-ui-popover-overlay {{ config().classInclude || '' }}\"\n  [class.libs-ui-popover-overlay-white-theme]=\"config().whiteTheme\"\n  [class.libs-ui-popover-overlay-animation-move]=\"config().animationConfig\"\n  [ngStyle]=\"config().ngStyles || {}\"\n  [style.width]=\"config().width ? config().width + 'px' : 'auto'\"\n  [style.maxWidth.px]=\"config().maxWidth\"\n  [style.maxHeight.px]=\"config().maxHeight\"\n  [style.top.px]=\"top()\"\n  [style.left.px]=\"left()\"\n  [style.zIndex]=\"config().zIndex || 10\">\n  @if (config()) {\n    @if (!config().ignoreArrow) {\n      <div class=\"relative\">\n        <svg\n          [class]=\"'libs-ui-popover-overlay-arrow ' + arrowClass() + (config().whiteTheme ? ' libs-ui-popover-overlay-white-theme ' : '')\"\n          [style.top.px]=\"arrowTop()\"\n          [style.left.px]=\"arrowLeft()\"\n          [attr.direction]=\"outEvent | async\">\n          <polygon points=\"0,0 6,6 12,0\" />\n          Sorry, your browser does not support inline SVG.\n        </svg>\n      </div>\n    }\n    @if (config().template; as templateConfig) {\n      <div\n        LibsUiComponentsScrollOverlayDirective\n        class=\"libs-ui-popover-overlay-body {{ config().classIncludeOverlayBody || '' }}\"\n        [attr.isTemplate]=\"true\"\n        [style.max-height]=\"config().maxHeight + 'px'\">\n        <ng-container *ngTemplateOutlet=\"templateConfig; context: { itemContext: config().itemContext }\" />\n      </div>\n    } @else {\n      @let constHtmlContent = config().content || ' ';\n      <div\n        class=\"libs-ui-popover-overlay-body libs-ui-font-h7r {{ config().classIncludeOverlayBody || '' }}\"\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"config().scrollOverlayOptions\"\n        [style.maxHeight.px]=\"config().maxHeight\"\n        [style.paddingTop.px]=\"config().paddingTop ?? 8\"\n        [style.paddingRight.px]=\"config().paddingRight ?? 8\"\n        [style.paddingLeft.px]=\"config().paddingLeft ?? 8\"\n        [style.paddingBottom.px]=\"config().paddingBottom ?? 8\"\n        [innerHtml]=\"constHtmlContent | translate\"></div>\n    }\n  }\n</div>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(var(--libs-ui-popover-overlay-time-animation-distance))}to{transform:translateY(0)}}.libs-ui-popover-overlay{position:fixed;background-color:#071631;border-radius:8px;z-index:1000;top:-10000px;left:-10000px}.libs-ui-popover-overlay-animation-move{animation:animation-move ease var(--libs-ui-popover-overlay-time-animation-time)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow{position:absolute;width:12px;height:6px;fill:#071631}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=bottom]{transform:rotate(180deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=left]{transform:rotate(270deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-arrow[direction=right]{transform:rotate(90deg)}.libs-ui-popover-overlay .libs-ui-popover-overlay-white-theme{fill:#fff}.libs-ui-popover-overlay .libs-ui-popover-overlay-body{color:#fff;word-break:break-word}.libs-ui-popover-overlay .libs-ui-popover-overlay-body[isTemplate=true]{font-size:inherit}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme{background-color:#fff;box-shadow:0 1px 1px #00143305,0 4px 16px #0014331a}.libs-ui-popover-overlay.libs-ui-popover-overlay-white-theme .libs-ui-popover-overlay-body{color:#071631}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsPopoverComponent {
+    // #region PROPERTY
+    mouseEnter;
+    mouseWheel;
+    mouseClick;
+    windowResize;
+    windowWheel;
+    windowMouseDown;
+    windowClick;
+    windowMouseUp;
+    windowMousemove;
+    popoverOverlayComponent;
+    subsEventPopup = new Subscription();
+    onDestroy = new Subject();
+    functionsControl;
+    firstClick = signal(false);
+    contentInnerHtml = signal('');
+    timer = signal(undefined);
+    directionPopover = signal(undefined);
+    frameId = signal('');
+    // #region INPUT
+    debugId = input();
+    flagMouse = input({ isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }, {
+        transform: (value) => (value ? value : { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }),
+    });
+    type = input('other');
+    mode = input('hover');
+    config = input({}, { transform: (value) => (value ? value : {}) });
+    ignoreShowPopover = input();
+    elementRefCustom = input();
+    initEventInElementRefCustom = input(false);
+    classInclude = input('', { transform: (value) => value ?? '' });
+    ignoreHiddenPopoverContentWhenMouseLeave = input();
+    ignoreStopPropagationEvent = input();
+    ignoreCursorPointerModeLikeClick = input();
+    isAddContentToParentDocument = input();
+    ignoreClickOutside = input();
+    // #region OUTPUT
+    outEvent = output();
+    outChangStageFlagMouse = output();
+    outEventPopoverContent = output();
+    outFunctionsControl = output();
+    // #region INJECT
+    elementRef = inject(ElementRef);
+    dynamicService = inject(LibsUiDynamicComponentService);
+    constructor() {
+        let classDefault = undefined;
+        effect(() => {
+            if (classDefault === undefined) {
+                classDefault = this.Element.className;
+            }
+            if (this.elementRefCustom() !== this.Element) {
+                this.Element.className = classDefault || '';
+            }
+            if (this.type() === 'text') {
+                this.Element.classList.add('popover-text-ellipsis');
+            }
+            if (this.mode().includes('click') && !this.ignoreCursorPointerModeLikeClick()) {
+                this.Element.classList.add('cursor-pointer');
+            }
+            if (this.classInclude()) {
+                this.classInclude()
+                    ?.split(' ')
+                    .forEach((className) => {
+                    if (!className) {
+                        return;
+                    }
+                    this.Element.classList.add(className);
+                });
+            }
+        });
+        let first = true;
+        effect(() => {
+            this.config();
+            untracked(() => {
+                if (this.popoverOverlayComponent?.instance && !first) {
+                    this.updatePopoverOverlayPosition();
+                }
+                first = false;
+            });
+        });
+    }
+    ngOnInit() {
+        this.outEventPopoverContent.subscribe((direction) => this.directionPopover.set(direction));
+        this.functionsControl = {
+            removePopoverOverlay: this.removePopoverOverlay.bind(this),
+            updatePopoverOverlayPosition: this.updatePopoverOverlayPosition.bind(this),
+            getRectContainer: async () => (this.elementRefCustom() || this.Element).getBoundingClientRect(),
+            getRectContent: async () => this.popoverOverlayComponent?.instance?.ContainerElement?.getBoundingClientRect(),
+            showPopover: this.addPopoverContent.bind(this),
+            updatePopoverOverlay: this.updatePopoverOverlay.bind(this),
+        };
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    ngAfterContentInit() {
+        const nativeEl = this.Element;
+        this.mouseEnter = this.initObservable(nativeEl, 'mouseenter');
+        this.initObservable(nativeEl, 'click').subscribe();
+        this.mouseClick = this.initObservable(nativeEl, getEventNameHandleClick);
+        this.mouseWheel = this.initObservable(window, 'wheel');
+        this.windowResize = this.initObservable(window, 'resize');
+        this.windowWheel = this.initObservable(window, 'wheel');
+        this.windowMouseDown = this.initObservable(window, 'mousedown');
+        this.windowClick = this.initObservable(window, getEventNameHandleClick);
+        this.windowMouseUp = this.initObservable(window, 'mouseup');
+        this.windowMousemove = this.initObservable(window, 'mousemove');
+        this.mouseEnter.subscribe(() => {
+            if (!this.mode().includes('hover')) {
+                return;
+            }
+            if (this.type() === 'text' && nativeEl?.clientWidth >= nativeEl.scrollWidth && !this.popoverOverlayComponent) {
+                return;
+            }
+            this.addPopoverContent();
+        });
+        this.mouseClick.subscribe(() => {
+            this.firstClick.update((val) => (this.ignoreShowPopover() ? false : !val));
+            this.outEvent.emit('click');
+            if (!this.mode().startsWith('click')) {
+                return;
+            }
+            if (this.mode() === 'click-toggle' && !this.firstClick()) {
+                this.removePopoverOverlay();
+                return;
+            }
+            this.addPopoverContent();
+        });
+        this.windowResize.pipe(debounceTime(500)).subscribe(this.updatePopoverOverlayPosition.bind(this));
+    }
+    // #region FUNCTIONS
+    get FunctionsControl() {
+        return this.functionsControl;
+    }
+    async updatePopoverOverlay() {
+        const timer = setTimeout(() => {
+            clearTimeout(timer);
+            if (!this.popoverOverlayComponent || !this.popoverOverlayComponent.instance || !this.config()) {
+                return;
+            }
+            const instance = this.popoverOverlayComponent.instance;
+            const nativeEl = this.elementRefCustom() || this.Element;
+            instance.setConfig(nativeEl.getBoundingClientRect(), { ...(this.config() || {}), ...this.getDefaultConfigs() }, this.isAddContentToParentDocument());
+        });
+    }
+    async updatePopoverOverlayPosition() {
+        clearTimeout(this.timer());
+        this.timer.set(setTimeout(async () => {
+            if (!this.popoverOverlayComponent || !this.popoverOverlayComponent.instance || !this.config() || !this.functionsControl) {
+                return;
+            }
+            const viewPort = getViewport();
+            const rectListView = await this.functionsControl.getRectContent();
+            if (!rectListView) {
+                return;
+            }
+            const rectContainer = await this.functionsControl.getRectContainer();
+            const distanceListViewAndContainer = this.config()?.ignoreArrow === false ? 14 : 4;
+            switch (this.directionPopover()) {
+                case 'right':
+                case 'left':
+                case 'bottom':
+                    if (rectListView.top + rectListView.height > viewPort.height ||
+                        rectListView.top < rectContainer.top + rectContainer.height ||
+                        rectListView.top - (rectContainer.top + rectContainer.height) > distanceListViewAndContainer ||
+                        rectListView.left + rectListView.width > viewPort.width) {
+                        this.updatePopoverOverlay();
+                    }
+                    break;
+                case 'top':
+                    if (rectContainer.top - (rectListView.top + rectListView.height) > distanceListViewAndContainer ||
+                        rectListView.top + rectListView.height + distanceListViewAndContainer > rectContainer.top + 2 ||
+                        rectListView.left + rectListView.width > viewPort.width) {
+                        this.updatePopoverOverlay();
+                    }
+                    break;
+            }
+        }, 250));
+    }
+    get Element() {
+        if (this.initEventInElementRefCustom() && this.elementRefCustom()) {
+            return this.elementRefCustom();
+        }
+        return this.elementRef.nativeElement.firstElementChild || this.elementRef.nativeElement;
+    }
+    initObservable(el, eventName) {
+        return fromEvent(el, eventName).pipe(tap((e) => !this.ignoreStopPropagationEvent() && e.stopPropagation()), takeUntil$1(this.onDestroy));
+    }
+    async addPopoverContent(nativeEl) {
+        if (this.popoverOverlayComponent || this.ignoreShowPopover() || !this.config()) {
+            return;
+        }
+        this.popoverOverlayComponent = this.dynamicService.resolveComponentFactory(LibsUiComponentsPopoverOverlayComponent);
+        this.frameId.set(this.dynamicService.addToBody(this.popoverOverlayComponent, this.isAddContentToParentDocument() || this.config().isAddContentToParentDocument));
+        this.outEvent.emit('show');
+        const instance = this.popoverOverlayComponent.instance;
+        nativeEl = nativeEl || this.elementRefCustom() || this.Element;
+        instance.setConfig(nativeEl.getBoundingClientRect(), { ...(this.config() || {}), ...this.getDefaultConfigs() }, this.isAddContentToParentDocument());
+        const flagsMouses = {
+            isMouseEnter: true,
+            isMouseEnterContent: false,
+            isContainerHasScroll: nativeEl.offsetHeight < nativeEl.scrollHeight,
+        };
+        const nativeElContainer = instance.ElementRef.nativeElement;
+        const mouseEnterContent = this.initObservable(nativeElContainer, 'mouseenter');
+        const mouseLeaveContent = this.initObservable(nativeElContainer, 'mouseleave');
+        this.subsEventPopup.add(instance.outEvent.subscribe((direction) => {
+            this.outEventPopoverContent.emit(direction);
+        }));
+        this.subsEventPopup.add(mouseEnterContent.subscribe(() => {
+            this.outEvent.emit('mouseenter-content');
+            flagsMouses.isMouseEnterContent = true;
+            this.outChangStageFlagMouse.emit(flagsMouses);
+        }));
+        this.subsEventPopup.add(this.mouseEnter.subscribe(() => {
+            this.outEvent.emit('mouseenter-element');
+            this.outChangStageFlagMouse.emit(flagsMouses);
+        }));
+        this.subsEventPopup.add(this.mouseWheel.subscribe(() => {
+            flagsMouses.isContainerHasScroll = false;
+            if (nativeEl.offsetHeight < nativeEl.scrollHeight) {
+                flagsMouses.isContainerHasScroll = true;
+            }
+            if ((flagsMouses.isMouseEnter && flagsMouses.isContainerHasScroll) || flagsMouses.isMouseEnterContent || this.flagMouse().isMouseEnter || this.flagMouse().isMouseEnterContent) {
+                return;
+            }
+            this.removePopoverOverlay();
+        }));
+        this.handlerMouseLeaveRemovePopoverOverlay(this.windowMousemove, flagsMouses, 'isMouseEnter', 'isMouseEnterContent', 'mouseleave-element');
+        this.handlerMouseLeaveRemovePopoverOverlay(mouseLeaveContent, flagsMouses, 'isMouseEnterContent', 'isMouseEnter', 'mouseleave-content');
+        if (this.mode() === 'click_open_and_click_panel_content_hidden') {
+            this.subsEventPopup.add(this.initObservable(nativeElContainer, 'click').subscribe(() => {
+                this.removePopoverOverlay();
+            }));
+        }
+        this.handlerWindowEventRemovePopoverOverlay(this.windowClick, flagsMouses);
+        this.handlerWindowEventRemovePopoverOverlay(this.windowMouseDown, flagsMouses);
+        this.handlerWindowEventRemovePopoverOverlay(this.windowMouseUp, flagsMouses);
+        this.handlerWindowEventRemovePopoverOverlay(this.windowWheel, flagsMouses);
+    }
+    handlerWindowEventRemovePopoverOverlay(obs, flagsMouses) {
+        this.subsEventPopup.add(obs.pipe(debounceTime(10)).subscribe(() => {
+            if (flagsMouses.isMouseEnter || flagsMouses.isMouseEnterContent || this.ignoreClickOutside()) {
+                return;
+            }
+            if (this.flagMouse() && (this.flagMouse().isMouseEnter || this.flagMouse().isMouseEnterContent)) {
+                return;
+            }
+            this.firstClick.set(false);
+            this.removePopoverOverlay();
+        }));
+    }
+    handlerMouseLeaveRemovePopoverOverlay(obs, flagsMouses, flagKeyChangeValue, flagKeyCheck, outEvent) {
+        this.subsEventPopup.add(obs
+            .pipe(tap(() => this.outEvent.emit(outEvent)), debounceTime(getPopoverTimerDestroyInQueryUrl() || this.config()?.timerDestroy || 0))
+            .subscribe((e) => {
+            if (outEvent === 'mouseleave-element' &&
+                (checkMouseOverInContainer(e, this.Element) || checkMouseOverInContainer({ clientX: e.clientX + 2, clientY: e.clientY + 2 }, this.Element) || checkMouseOverInContainer({ clientX: e.clientX - 2, clientY: e.clientY - 2 }, this.Element))) {
+                return;
+            }
+            set(flagsMouses, flagKeyChangeValue, false);
+            this.outChangStageFlagMouse.emit(flagsMouses);
+            if (this.flagMouse() && (this.flagMouse().isMouseEnter || this.flagMouse().isMouseEnterContent)) {
+                return;
+            }
+            if (get(flagsMouses, flagKeyCheck) || this.ignoreHiddenPopoverContentWhenMouseLeave()) {
+                return;
+            }
+            this.removePopoverOverlay();
+        }));
+    }
+    getDefaultConfigs() {
+        const configValue = this.config() || {};
+        if (isNil(configValue.content) || (configValue.content === this.contentInnerHtml() && this.contentInnerHtml() !== this.Element.innerHTML)) {
+            configValue.content = this.Element.innerHTML;
+        }
+        this.contentInnerHtml.set(this.Element.innerHTML);
+        if (!configValue.maxWidth) {
+            configValue.maxWidth = 250;
+        }
+        if (configValue.maxHeight === undefined || configValue.maxHeight === 0) {
+            configValue.maxHeight = 140;
+        }
+        if (!configValue.direction) {
+            configValue.direction = 'bottom';
+        }
+        if (!configValue.position) {
+            configValue.position = {
+                mode: 'center',
+                distance: 0,
+            };
+        }
+        return configValue;
+    }
+    async removePopoverOverlay() {
+        if (this.popoverOverlayComponent) {
+            this.outEvent.emit('remove');
+            this.subsEventPopup.unsubscribe();
+            this.subsEventPopup = new Subscription();
+        }
+        this.dynamicService.remove(this.popoverOverlayComponent, this.frameId());
+        this.frameId.set('');
+        this.popoverOverlayComponent = undefined;
+        this.firstClick.set(false);
+    }
+    ngOnDestroy() {
+        clearTimeout(this.timer());
+        this.removePopoverOverlay();
+        this.onDestroy.next();
+        this.onDestroy.complete();
+        this.subsEventPopup.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsPopoverComponent, isStandalone: true, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: { debugId: { classPropertyName: "debugId", publicName: "debugId", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopover: { classPropertyName: "ignoreShowPopover", publicName: "ignoreShowPopover", isSignal: true, isRequired: false, transformFunction: null }, elementRefCustom: { classPropertyName: "elementRefCustom", publicName: "elementRefCustom", isSignal: true, isRequired: false, transformFunction: null }, initEventInElementRefCustom: { classPropertyName: "initEventInElementRefCustom", publicName: "initEventInElementRefCustom", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreHiddenPopoverContentWhenMouseLeave: { classPropertyName: "ignoreHiddenPopoverContentWhenMouseLeave", publicName: "ignoreHiddenPopoverContentWhenMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, ignoreCursorPointerModeLikeClick: { classPropertyName: "ignoreCursorPointerModeLikeClick", publicName: "ignoreCursorPointerModeLikeClick", isSignal: true, isRequired: false, transformFunction: null }, isAddContentToParentDocument: { classPropertyName: "isAddContentToParentDocument", publicName: "isAddContentToParentDocument", isSignal: true, isRequired: false, transformFunction: null }, ignoreClickOutside: { classPropertyName: "ignoreClickOutside", publicName: "ignoreClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outEvent: "outEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outEventPopoverContent: "outEventPopoverContent", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<ng-content />\n", styles: ["::ng-deep .popover-text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .cursor-pointer{cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-popover,[LibsUiComponentsPopoverDirective]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: ["::ng-deep .popover-text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .cursor-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KEY_QUERY_POPOVER_TIMER_DESTROY, LibsUiComponentsPopoverComponent, getListDirections, getPopoverTimerDestroyInQueryUrl };
+//# sourceMappingURL=libs-ui-components-popover.mjs.map