@libs-ui/components-popover 0.2.29 → 0.2.30-6.1

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, viewChild, inject, ElementRef, Component, ChangeDetectionStrategy, input, output, effect, untracked } 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, cloneIBoundingClientRect, cloneDeep, getViewport, isNil } from '@libs-ui/utils';
-import { Subject, interval, take, takeUntil, Subscription, fromEvent, timer } from 'rxjs';
+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';
@@ -14,6 +14,14 @@ const timerDestroy = parseInt(new UtilsUrlSearchParams(location.href).get(KEY_QU
 const getPopoverTimerDestroyInQueryUrl = () => {
     return timerDestroy;
 };
+const getListdirections = (drirection) => {
+    return get({
+        bottom: ['bottom', 'top', 'right', 'left'],
+        right: ['right', 'left', 'bottom', 'top'],
+        left: ['left', 'right', 'bottom', 'top'],
+        top: ['top', 'bottom', 'right', 'left'],
+    }, drirection);
+};
 
 class LibsUiComponentsPopoverOverlayComponent {
     /* PROPERTIES */
@@ -24,22 +32,15 @@ class LibsUiComponentsPopoverOverlayComponent {
     arrowLeft = signal(0);
     arrowTop = signal(0);
     config = signal({});
-    directions = signal(new Map());
     timeout = signal(0);
     onDestroy = new Subject();
-    /* OUTPUT */
+    // #region OUTPUT
     outEvent = new Subject();
     /* VIEW CHILD */
     container = viewChild.required('container');
-    /* INJECT */
+    // #region INJECT
     elementRef = inject(ElementRef);
-    constructor() {
-        this.directions().set('bottom', ['bottom', 'top', 'right', 'left']);
-        this.directions().set('right', ['right', 'left', 'bottom', 'top']);
-        this.directions().set('left', ['left', 'right', 'bottom', 'top']);
-        this.directions().set('top', ['top', 'bottom', 'right', 'left']);
-    }
-    /* FUNCTIONS*/
+    // #region FUNCTIONS
     get ElementRef() {
         return this.elementRef;
     }
@@ -91,7 +92,7 @@ class LibsUiComponentsPopoverOverlayComponent {
         });
     }
     setDirections(rectOrigin, viewPort, rectFrame) {
-        const directions = this.directions().get(this.config().direction || 'bottom') || ['bottom', 'right', 'left', 'top'];
+        const directions = getListdirections(this.config().direction || 'bottom');
         const positionLast = directions.length - 1;
         this.timeout.set(setTimeout(async () => {
             const rectContent = cloneIBoundingClientRect(this.container().nativeElement.getBoundingClientRect());
@@ -180,8 +181,8 @@ class LibsUiComponentsPopoverOverlayComponent {
                     if (this.config) {
                         this.config.update(config => ({ ...config, maxHeight: viewPort.height - rectOrigin.top - rectOrigin.height }));
                     }
-                    left = left >= 0 ? left : 0;
-                    this.left.set(left);
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
                 }
                 return false;
             case 'right':
@@ -210,6 +211,13 @@ class LibsUiComponentsPopoverOverlayComponent {
                 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;
@@ -237,6 +245,13 @@ class LibsUiComponentsPopoverOverlayComponent {
                 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;
@@ -264,8 +279,8 @@ class LibsUiComponentsPopoverOverlayComponent {
                 if (isLast) {
                     this.config.update(config => ({ ...config, maxHeight: viewPort.height - (viewPort.height - rectOrigin.top) }));
                     top = 0;
-                    left = left >= 0 ? left : 0;
-                    this.left.set(left);
+                    this.left.set(this.getLeftPositionIsLast(isLast, left >= 0 ? left : 0, viewPort, rectOrigin, rectContent, halfSquare));
+                    return true;
                 }
                 return false;
         }
@@ -287,24 +302,29 @@ class LibsUiComponentsPopoverOverlayComponent {
         this.ContainerElement.style.setProperty('--libs-ui-popover-overlay-time-animation-time', `${configValue.animationConfig?.time || .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.13", ngImport: i0, type: LibsUiComponentsPopoverOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 #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 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      <div 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]=\"(config().content || ' ') | translate\">\n      </div>\n    }\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: ["classContainer", "options"], outputs: ["outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 #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 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      <div 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]=\"(config().content || ' ') | translate\">\n      </div>\n    }\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.13", 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 #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 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      <div 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]=\"(config().content || ' ') | translate\">\n      </div>\n    }\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"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsPopoverComponent {
-    /* PROPERTY */
+    // #region PROPERTY
     mouseEnter;
-    mouseLeave;
     mouseWheel;
     mouseClick;
     windowResize;
@@ -312,57 +332,60 @@ class LibsUiComponentsPopoverComponent {
     windowMouseDown;
     windowClick;
     windowMouseUp;
-    windowTouch;
+    windowMousemove;
     popoverOverlayComponent;
     subsEventPopup = new Subscription();
-    firstClick;
-    contentInnerHtml;
-    timer;
-    directionPopover;
-    functionsControl;
-    frameId;
     onDestroy = new Subject();
-    /* INPUT */
+    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 }
+        transform: (value) => (value ? value : { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false }),
     });
     type = input('other');
     mode = input('hover');
-    config = input({}, {
-        transform: (value) => value ? value : {}
-    });
+    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();
-    /* OUTPUT */
+    // #region OUTPUT
     outEvent = output();
     outChangStageFlagMouse = output();
     outEventPopoverContent = output();
     outFunctionsControl = output();
-    /* INJECT */
+    // #region INJECT
     elementRef = inject(ElementRef);
     dynamicService = inject(LibsUiDynamicComponentService);
     constructor() {
-        this.firstClick = false;
         let classDefault = undefined;
         effect(() => {
             if (classDefault === undefined) {
                 classDefault = this.Element.className;
             }
-            this.Element.className = classDefault || '';
+            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) {
+            if (this.mode().includes('click') && !this.ignoreCursorPointerModeLikeClick()) {
                 this.Element.classList.add('cursor-pointer');
             }
             if (this.classInclude()) {
-                this.classInclude()?.split(' ').forEach(className => {
+                this.classInclude()
+                    ?.split(' ')
+                    .forEach((className) => {
                     if (!className) {
                         return;
                     }
@@ -382,12 +405,12 @@ class LibsUiComponentsPopoverComponent {
         });
     }
     ngOnInit() {
-        this.outEventPopoverContent.subscribe(direction => this.directionPopover = direction);
+        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(),
+            getRectContent: async () => this.popoverOverlayComponent?.instance?.ContainerElement?.getBoundingClientRect(),
             showPopover: this.addPopoverContent.bind(this),
             updatePopoverOverlay: this.updatePopoverOverlay.bind(this),
         };
@@ -396,15 +419,15 @@ class LibsUiComponentsPopoverComponent {
     ngAfterContentInit() {
         const nativeEl = this.Element;
         this.mouseEnter = this.initObservable(nativeEl, 'mouseenter');
-        this.mouseLeave = this.initObservable(nativeEl, 'mouseleave');
-        this.mouseClick = this.initObservable(nativeEl, 'click');
+        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, 'click');
+        this.windowClick = this.initObservable(window, getEventNameHandleClick);
         this.windowMouseUp = this.initObservable(window, 'mouseup');
-        this.windowTouch = this.initObservable(window, 'touchstart');
+        this.windowMousemove = this.initObservable(window, 'mousemove');
         this.mouseEnter.subscribe(() => {
             if (!this.mode().includes('hover')) {
                 return;
@@ -412,43 +435,37 @@ class LibsUiComponentsPopoverComponent {
             if (this.type() === 'text' && nativeEl?.clientWidth >= nativeEl.scrollWidth && !this.popoverOverlayComponent) {
                 return;
             }
-            this.addPopoverContent(nativeEl);
+            this.addPopoverContent();
         });
         this.mouseClick.subscribe(() => {
-            this.firstClick = !this.firstClick;
+            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) {
+            if (this.mode() === 'click-toggle' && !this.firstClick()) {
                 this.removePopoverOverlay();
                 return;
             }
-            this.addPopoverContent(nativeEl);
-        });
-        this.windowResize.pipe(debounceTime(500)).subscribe(() => {
-            if (!this.popoverOverlayComponent) {
-                return;
-            }
-            this.removePopoverOverlay();
-            this.addPopoverContent(nativeEl);
+            this.addPopoverContent();
         });
+        this.windowResize.pipe(debounceTime(500)).subscribe(this.updatePopoverOverlayPosition.bind(this));
     }
-    /* FUNCTIONS*/
+    // #region FUNCTIONS
     async updatePopoverOverlay() {
         const timer = setTimeout(() => {
             clearTimeout(timer);
-            if (!this.popoverOverlayComponent?.instance || !this.config()) {
+            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());
+            instance.setConfig(nativeEl.getBoundingClientRect(), { ...(this.config() || {}), ...this.getDefaultConfigs() }, this.isAddContentToParentDocument());
         });
     }
     async updatePopoverOverlayPosition() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(async () => {
+        clearTimeout(this.timer());
+        this.timer.set(setTimeout(async () => {
             if (!this.popoverOverlayComponent || !this.popoverOverlayComponent.instance || !this.config() || !this.functionsControl) {
                 return;
             }
@@ -459,48 +476,54 @@ class LibsUiComponentsPopoverComponent {
             }
             const rectContainer = await this.functionsControl.getRectContainer();
             const distanceListViewAndContainer = this.config()?.ignoreArrow === false ? 14 : 4;
-            if (this.directionPopover === 'bottom' && ((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))) {
-                const instance = this.popoverOverlayComponent.instance;
-                const nativeEl = this.elementRefCustom() || this.Element;
-                instance.setConfig(nativeEl.getBoundingClientRect(), { ...(this.config() || {}), ...this.getDefaultConfigs() }, this.isAddContentToParentDocument());
-                return;
-            }
-            if (this.directionPopover !== 'top') {
-                return;
-            }
-            if ((rectContainer.top - (rectListView.top + rectListView.height) > distanceListViewAndContainer) || (rectListView.top + rectListView.height + distanceListViewAndContainer > rectContainer.top + 2) || ((rectListView.left + rectListView.width > viewPort.width))) {
-                const instance = this.popoverOverlayComponent.instance;
-                const nativeEl = this.elementRefCustom() || this.Element;
-                instance.setConfig(nativeEl.getBoundingClientRect(), { ...(this.config() || {}), ...this.getDefaultConfigs() }, this.isAddContentToParentDocument());
-                return;
+            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);
+        }, 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));
+        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 = this.dynamicService.addToBody(this.popoverOverlayComponent, this.isAddContentToParentDocument() || this.config().isAddContentToParentDocument);
+        this.frameId.set(this.dynamicService.addToBody(this.popoverOverlayComponent, this.isAddContentToParentDocument() || this.config().isAddContentToParentDocument));
         this.outEvent.emit('show');
         const instance = this.popoverOverlayComponent.instance;
-        nativeEl = this.elementRefCustom() || nativeEl;
+        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
+            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(this.initObservable(nativeElContainer, 'touchstart').subscribe());
         this.subsEventPopup.add(instance.outEvent.subscribe((direction) => {
             this.outEventPopoverContent.emit(direction);
         }));
@@ -523,10 +546,8 @@ class LibsUiComponentsPopoverComponent {
             }
             this.removePopoverOverlay();
         }));
-        this.subsEventPopup.add(timer(0).subscribe(() => {
-            this.handlerMouseLeaveRemovePopoverOverlay(mouseLeaveContent, flagsMouses, 'isMouseEnterContent', 'isMouseEnter', 'mouseleave-content');
-            this.handlerMouseLeaveRemovePopoverOverlay(this.mouseLeave, flagsMouses, 'isMouseEnter', 'isMouseEnterContent', 'mouseleave-element');
-        }));
+        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();
@@ -536,30 +557,33 @@ class LibsUiComponentsPopoverComponent {
         this.handlerWindowEventRemovePopoverOverlay(this.windowMouseDown, flagsMouses);
         this.handlerWindowEventRemovePopoverOverlay(this.windowMouseUp, flagsMouses);
         this.handlerWindowEventRemovePopoverOverlay(this.windowWheel, flagsMouses);
-        this.subsEventPopup.add(this.windowTouch.subscribe(() => {
-            this.removePopoverOverlay();
-        }));
     }
     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)) {
+            if (this.flagMouse() && (this.flagMouse().isMouseEnter || this.flagMouse().isMouseEnterContent)) {
                 return;
             }
-            this.firstClick = false;
+            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(() => {
-            flagsMouses[flagKeyChangeValue] = false;
+        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)) {
+            if (this.flagMouse() && (this.flagMouse().isMouseEnter || this.flagMouse().isMouseEnterContent)) {
                 return;
             }
-            if (flagsMouses[flagKeyCheck] || this.ignoreHiddenPopoverContentWhenMouseLeave()) {
+            if (get(flagsMouses, flagKeyCheck) || this.ignoreHiddenPopoverContentWhenMouseLeave()) {
                 return;
             }
             this.removePopoverOverlay();
@@ -567,10 +591,10 @@ class LibsUiComponentsPopoverComponent {
     }
     getDefaultConfigs() {
         const configValue = this.config() || {};
-        if ((isNil(configValue.content)) || (configValue.content === this.contentInnerHtml && this.contentInnerHtml !== this.elementRef.nativeElement.innerHTML)) {
-            configValue.content = this.elementRef.nativeElement.innerHTML;
+        if (isNil(configValue.content) || (configValue.content === this.contentInnerHtml() && this.contentInnerHtml() !== this.Element.innerHTML)) {
+            configValue.content = this.Element.innerHTML;
         }
-        this.contentInnerHtml = this.elementRef.nativeElement.innerHTML;
+        this.contentInnerHtml.set(this.Element.innerHTML);
         if (!configValue.maxWidth) {
             configValue.maxWidth = 250;
         }
@@ -583,7 +607,7 @@ class LibsUiComponentsPopoverComponent {
         if (!configValue.position) {
             configValue.position = {
                 mode: 'center',
-                distance: 0
+                distance: 0,
             };
         }
         return configValue;
@@ -591,23 +615,23 @@ class LibsUiComponentsPopoverComponent {
     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 = undefined;
+        this.dynamicService.remove(this.popoverOverlayComponent, this.frameId());
+        this.frameId.set('');
         this.popoverOverlayComponent = undefined;
-        this.subsEventPopup.unsubscribe();
-        this.subsEventPopup = new Subscription();
-        this.firstClick = false;
+        this.firstClick.set(false);
     }
     ngOnDestroy() {
-        clearTimeout(this.timer);
+        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.13", ngImport: i0, type: LibsUiComponentsPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsPopoverComponent, isStandalone: true, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: { 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 }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", 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.13", ngImport: i0, type: LibsUiComponentsPopoverComponent, decorators: [{
             type: Component,
@@ -618,5 +642,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsPopoverComponent };
+export { KEY_QUERY_POPOVER_TIMER_DESTROY, LibsUiComponentsPopoverComponent, getListdirections, getPopoverTimerDestroyInQueryUrl };
 //# sourceMappingURL=libs-ui-components-popover.mjs.map