@ng-nest/ui 17.0.12 → 18.0.0

package/fesm2022/ng-nest-ui-tooltip.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Renderer2, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, ViewChild, ElementRef, ViewContainerRef, NgModule } from '@angular/core';
+import { input, model, Directive, output, signal, viewChild, ElementRef, computed, inject, Renderer2, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, ViewContainerRef, effect, NgModule } from '@angular/core';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
-import { Subject, BehaviorSubject } from 'rxjs';
-import { __decorate } from 'tslib';
-import { XWithConfig, XInputBoolean, XFadeAnimation, XIsChange } from '@ng-nest/ui/core';
-import { takeUntil } from 'rxjs/operators';
+import { XPropertyFunction, XToBoolean, XToNumber, XIsEmpty, XFadeAnimation } from '@ng-nest/ui/core';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { NgClass } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { Overlay } from '@angular/cdk/overlay';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 /**
  * Tooltip
@@ -15,69 +15,76 @@ import { Overlay } from '@angular/cdk/overlay';
  * @decorator directive
  */
 const XTooltipPrefix = 'x-tooltip';
-const X_CONFIG_NAME = 'tooltip';
+const X_TOOLTIP_CONFIG_NAME = 'tooltip';
 /**
  * Tooltip Property
  */
-class XTooltipProperty {
+class XTooltipProperty extends XPropertyFunction(X_TOOLTIP_CONFIG_NAME) {
     constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 内容
+         * @en_US Content
+         */
+        this.content = input();
+        /**
+         * @zh_CN 显示位置
+         * @en_US Display position
+         */
+        this.placement = input(this.config?.placement ?? 'top');
+        /**
+         * @zh_CN 显示/隐藏
+         * @en_US Show/hide
+         */
+        this.visible = model(false);
+        /**
+         * @zh_CN 内部样式
+         * @en_US panel class
+         */
+        this.panelClass = input();
+        /**
+         * @zh_CN 指定参考对象
+         * @en_US specify reference object
+         */
+        this.connectTo = input();
+        /**
+         * @zh_CN 背景颜色
+         * @en_US Background color
+         */
+        this.backgroundColor = input();
+        /**
+         * @zh_CN 文字颜色
+         * @en_US Text color
+         */
+        this.color = input();
+        /**
+         * @zh_CN 手动处理关闭事件
+         * @en_US Manually handle the shutdown event
+         */
+        this.manual = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 鼠标移入后延时多少才显示
          * @en_US How much is the mouse transfer after transfer
          */
-        this.mouseEnterDelay = 150;
+        this.mouseEnterDelay = input(150, { transform: XToNumber });
         /**
          * @zh_CN 鼠标移出后延时多少才隐藏
          * @en_US How much hidden is hidden after the mouse is removed
          */
-        this.mouseLeaveDelay = 100;
+        this.mouseLeaveDelay = input(100, { transform: XToNumber });
         /**
          * @zh_CN 禁用显示
          * @en_US Disable display
          */
-        this.disabled = false;
+        this.disabled = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipProperty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: XTooltipProperty, selector: "[x-tooltip], x-tooltip", inputs: { content: "content", placement: "placement", visible: "visible", panelClass: "panelClass", connectTo: "connectTo", backgroundColor: "backgroundColor", color: "color", manual: "manual", mouseEnterDelay: "mouseEnterDelay", mouseLeaveDelay: "mouseLeaveDelay", disabled: "disabled" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: XTooltipProperty, selector: "[x-tooltip], x-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, connectTo: { classPropertyName: "connectTo", publicName: "connectTo", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, mouseEnterDelay: { classPropertyName: "mouseEnterDelay", publicName: "mouseEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, mouseLeaveDelay: { classPropertyName: "mouseLeaveDelay", publicName: "mouseLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'bottom')
-], XTooltipProperty.prototype, "placement", void 0);
-__decorate([
-    XInputBoolean()
-], XTooltipProperty.prototype, "visible", void 0);
-__decorate([
-    XInputBoolean()
-], XTooltipProperty.prototype, "manual", void 0);
-__decorate([
-    XInputBoolean()
-], XTooltipProperty.prototype, "disabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipProperty, decorators: [{
             type: Directive,
             args: [{ selector: `[${XTooltipPrefix}], ${XTooltipPrefix}` }]
-        }], propDecorators: { content: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], panelClass: [{
-                type: Input
-            }], connectTo: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], manual: [{
-                type: Input
-            }], mouseEnterDelay: [{
-                type: Input
-            }], mouseLeaveDelay: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Tooltip Portal
  * @selector x-tooltip-portal
@@ -87,82 +94,76 @@ const XTooltipPortalPrefix = 'x-tooltip-portal';
 
 class XTooltipPortalComponent {
     constructor() {
-        this.classMap = {};
-        this.positionChange = new Subject();
-        this._unSubject = new Subject();
+        this.placement = input();
+        this.content = input();
+        this.box = input();
+        this.color = input();
+        this.backgroundColor = input();
+        this.hoverChanged = output();
+        this.arrowHidden = signal(true);
+        this.animation = true;
+        this.tooltipPortal = viewChild.required('tooltipPortal', { read: (ElementRef) });
+        this.tooltipArrow = viewChild.required('tooltipArrow', { read: (ElementRef) });
+        this.tooltipArrowAfter = viewChild.required('tooltipArrowAfter', { read: (ElementRef) });
+        this.classMap = computed(() => ({
+            [`${XTooltipPortalPrefix}-${this.placement()}`]: !XIsEmpty(this.placement())
+        }));
+        this.portalBox = computed(() => this.tooltipPortal().nativeElement.getBoundingClientRect());
+        this.arrowBox = computed(() => this.tooltipArrow().nativeElement.getBoundingClientRect());
         this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
     }
     mouseenter() {
-        this.portalHover(true);
+        this.hoverChanged.emit(true);
     }
     mouseleave() {
-        this.portalHover(false);
-    }
-    ngOnInit() {
-        this.contentChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.content = x;
-            this.cdr.detectChanges();
-        });
-        this.positionChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.placement = x;
-            this.setClassMap();
-            setTimeout(() => this.setArrow());
-            this.cdr.detectChanges();
-        });
-        this.setClassMap();
+        this.hoverChanged.emit(false);
     }
-    ngAfterViewInit() {
-        this.viewInit();
-        this.portalBox = this.tooltipPortal.nativeElement.getBoundingClientRect();
-        this.arrowBox = this.tooltipArrow.nativeElement.getBoundingClientRect();
-        this.setArrow();
-        this.cdr.detectChanges();
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    setClassMap() {
-        this.classMap[`${XTooltipPortalPrefix}-${this.previousPlacement}`] = false;
-        this.classMap[`${XTooltipPortalPrefix}-${this.placement}`] = true;
-        this.previousPlacement = `${this.placement}`;
+    done(event) {
+        if (event.toState === true) {
+            this.setArrow();
+            this.arrowHidden.set(false);
+        }
     }
     setArrow() {
-        let offset = this.arrowBox.height / 2;
-        if (this.portalBox.height > this.box.height && (this.includes('right-') || this.includes('left-'))) {
+        const arrowBox = this.arrowBox();
+        const portalBox = this.portalBox();
+        const tooltipArrow = this.tooltipArrow().nativeElement;
+        const tooltipArrowAfter = this.tooltipArrowAfter().nativeElement;
+        const box = this.box();
+        let offset = arrowBox.height / 2;
+        if (portalBox.height > box.height && (this.includes('right-') || this.includes('left-'))) {
             if (this.includes('-start')) {
-                this.renderer.setStyle(this.tooltipArrow.nativeElement, 'top', `${this.box.height / 2 - offset}px`);
+                this.renderer.setStyle(tooltipArrow, 'top', `${box.height / 2 - offset}px`);
             }
             else if (this.includes('-end')) {
-                this.renderer.setStyle(this.tooltipArrow.nativeElement, 'bottom', `${this.box.height / 2 - offset}px`);
+                this.renderer.setStyle(tooltipArrow, 'bottom', `${box.height / 2 - offset}px`);
             }
         }
-        else if (this.portalBox.width > this.box.width && (this.includes('top-') || this.includes('bottom-'))) {
+        else if (portalBox.width > box.width && (this.includes('top-') || this.includes('bottom-'))) {
             if (this.includes('-start')) {
-                this.renderer.setStyle(this.tooltipArrow.nativeElement, 'left', `${this.box.width / 2 - offset}px`);
+                this.renderer.setStyle(tooltipArrow, 'left', `${box.width / 2 - offset}px`);
             }
             else if (this.includes('-end')) {
-                this.renderer.setStyle(this.tooltipArrow.nativeElement, 'right', `${this.box.width / 2 - offset}px`);
+                this.renderer.setStyle(tooltipArrow, 'right', `${box.width / 2 - offset}px`);
             }
         }
-        if (!this.backgroundColor)
+        if (!this.backgroundColor())
             return;
-        const ptSplit = this.placement.split('-');
-        if (ptSplit.length > 0) {
-            this.renderer.setStyle(this.tooltipArrow.nativeElement, `border-${ptSplit[0]}-color`, this.backgroundColor);
-            this.renderer.setStyle(this.tooltipArrowAfter.nativeElement, `border-${ptSplit[0]}-color`, this.backgroundColor);
+        const ptSplit = this.placement()?.split('-');
+        if (ptSplit && ptSplit.length > 0) {
+            this.renderer.setStyle(tooltipArrow, `border-${ptSplit[0]}-color`, this.backgroundColor());
+            this.renderer.setStyle(tooltipArrowAfter, `border-${ptSplit[0]}-color`, this.backgroundColor());
         }
     }
     includes(arrow) {
-        return this.placement.indexOf(arrow) >= 0;
+        return this.placement().indexOf(arrow) >= 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XTooltipPortalComponent, isStandalone: true, selector: "x-tooltip-portal", host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "@x-fade-animation": "this.animation" } }, viewQueries: [{ propertyName: "tooltipPortal", first: true, predicate: ["tooltipPortal"], descendants: true, static: true }, { propertyName: "tooltipArrow", first: true, predicate: ["tooltipArrow"], descendants: true }, { propertyName: "tooltipArrowAfter", first: true, predicate: ["tooltipArrowAfter"], descendants: true }], ngImport: i0, template: "<div #tooltipPortal class=\"x-tooltip-portal\" [ngClass]=\"classMap\">\r\n  <div\r\n    class=\"x-tooltip-portal-inner\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    [style.color]=\"color\"\r\n  >\r\n    <ng-container *xOutlet=\"content\"><div [innerHTML]=\"content\"></div></ng-container>\r\n  </div>\r\n  <div #tooltipArrow class=\"x-tooltip-portal-arrow\">\r\n    <div #tooltipArrowAfter class=\"x-tooltip-portal-arrow-after\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tooltip-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-tooltip-portal>.x-tooltip-portal-inner{font-size:var(--x-font-size);background-color:var(--x-text);color:var(--x-text-700);padding:.325rem .5rem;max-width:10rem;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tooltip-portal .x-tooltip-portal-arrow,.x-tooltip-portal .x-tooltip-portal-arrow-after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-tooltip-portal .x-tooltip-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-tooltip-portal .x-tooltip-portal-arrow-after{border-width:.375rem}.x-tooltip-portal-top,.x-tooltip-portal-top-start,.x-tooltip-portal-top-end{padding-bottom:.525rem}.x-tooltip-portal-top>.x-tooltip-portal-arrow,.x-tooltip-portal-top-start>.x-tooltip-portal-arrow,.x-tooltip-portal-top-end>.x-tooltip-portal-arrow{bottom:.2rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-top .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-end .x-tooltip-portal-arrow-after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-left,.x-tooltip-portal-left-start,.x-tooltip-portal-left-end{padding-right:.525rem}.x-tooltip-portal-left>.x-tooltip-portal-arrow,.x-tooltip-portal-left-start>.x-tooltip-portal-arrow,.x-tooltip-portal-left-end>.x-tooltip-portal-arrow{right:.2rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-left .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-end .x-tooltip-portal-arrow-after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-right,.x-tooltip-portal-right-start,.x-tooltip-portal-right-end{padding-left:.525rem}.x-tooltip-portal-right>.x-tooltip-portal-arrow,.x-tooltip-portal-right-start>.x-tooltip-portal-arrow,.x-tooltip-portal-right-end>.x-tooltip-portal-arrow{left:.2rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-right .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-end .x-tooltip-portal-arrow-after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-bottom,.x-tooltip-portal-bottom-start,.x-tooltip-portal-bottom-end{padding-top:.525rem}.x-tooltip-portal-bottom .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow{top:.2rem;border-top-width:0;border-bottom-color:var(--x-text)}.x-tooltip-portal-bottom .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow-after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-text)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XFadeAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XTooltipPortalComponent, isStandalone: true, selector: "x-tooltip-portal", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, box: { classPropertyName: "box", publicName: "box", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hoverChanged: "hoverChanged" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "@x-fade-animation.done": "done($event)" }, properties: { "@x-fade-animation": "this.animation" } }, viewQueries: [{ propertyName: "tooltipPortal", first: true, predicate: ["tooltipPortal"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "tooltipArrow", first: true, predicate: ["tooltipArrow"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "tooltipArrowAfter", first: true, predicate: ["tooltipArrowAfter"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #tooltipPortal class=\"x-tooltip-portal\" [ngClass]=\"classMap()\">\r\n  <div class=\"x-tooltip-portal-inner\" [style.backgroundColor]=\"backgroundColor()\" [style.color]=\"color()\">\r\n    <ng-container *xOutlet=\"content()\"><div [innerHTML]=\"content()\"></div></ng-container>\r\n  </div>\r\n  <div #tooltipArrow class=\"x-tooltip-portal-arrow\" [class.x-tooltip-portal-arrow-hidden]=\"arrowHidden()\">\r\n    <div #tooltipArrowAfter class=\"x-tooltip-portal-arrow-after\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tooltip-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-tooltip-portal .x-tooltip-portal-arrow-hidden{visibility:hidden}.x-tooltip-portal>.x-tooltip-portal-inner{font-size:var(--x-font-size);background-color:var(--x-text);color:var(--x-text-700);padding:.325rem .5rem;max-width:10rem;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-tooltip-portal .x-tooltip-portal-arrow,.x-tooltip-portal .x-tooltip-portal-arrow-after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-tooltip-portal .x-tooltip-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-tooltip-portal .x-tooltip-portal-arrow-after{border-width:.375rem}.x-tooltip-portal-top,.x-tooltip-portal-top-start,.x-tooltip-portal-top-end{padding-bottom:.525rem}.x-tooltip-portal-top>.x-tooltip-portal-arrow,.x-tooltip-portal-top-start>.x-tooltip-portal-arrow,.x-tooltip-portal-top-end>.x-tooltip-portal-arrow{bottom:.3rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-top .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-end .x-tooltip-portal-arrow-after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-left,.x-tooltip-portal-left-start,.x-tooltip-portal-left-end{padding-right:.525rem}.x-tooltip-portal-left>.x-tooltip-portal-arrow,.x-tooltip-portal-left-start>.x-tooltip-portal-arrow,.x-tooltip-portal-left-end>.x-tooltip-portal-arrow{right:.3rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-left .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-end .x-tooltip-portal-arrow-after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-right,.x-tooltip-portal-right-start,.x-tooltip-portal-right-end{padding-left:.525rem}.x-tooltip-portal-right>.x-tooltip-portal-arrow,.x-tooltip-portal-right-start>.x-tooltip-portal-arrow,.x-tooltip-portal-right-end>.x-tooltip-portal-arrow{left:.3rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-right .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-end .x-tooltip-portal-arrow-after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-bottom,.x-tooltip-portal-bottom-start,.x-tooltip-portal-bottom-end{padding-top:.525rem}.x-tooltip-portal-bottom .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow{top:.3rem;border-top-width:0;border-bottom-color:var(--x-text)}.x-tooltip-portal-bottom .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow-after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-text)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XFadeAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTooltipPortalPrefix}`, standalone: true, imports: [NgClass, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XFadeAnimation], template: "<div #tooltipPortal class=\"x-tooltip-portal\" [ngClass]=\"classMap\">\r\n  <div\r\n    class=\"x-tooltip-portal-inner\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    [style.color]=\"color\"\r\n  >\r\n    <ng-container *xOutlet=\"content\"><div [innerHTML]=\"content\"></div></ng-container>\r\n  </div>\r\n  <div #tooltipArrow class=\"x-tooltip-portal-arrow\">\r\n    <div #tooltipArrowAfter class=\"x-tooltip-portal-arrow-after\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tooltip-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-tooltip-portal>.x-tooltip-portal-inner{font-size:var(--x-font-size);background-color:var(--x-text);color:var(--x-text-700);padding:.325rem .5rem;max-width:10rem;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-tooltip-portal .x-tooltip-portal-arrow,.x-tooltip-portal .x-tooltip-portal-arrow-after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-tooltip-portal .x-tooltip-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-tooltip-portal .x-tooltip-portal-arrow-after{border-width:.375rem}.x-tooltip-portal-top,.x-tooltip-portal-top-start,.x-tooltip-portal-top-end{padding-bottom:.525rem}.x-tooltip-portal-top>.x-tooltip-portal-arrow,.x-tooltip-portal-top-start>.x-tooltip-portal-arrow,.x-tooltip-portal-top-end>.x-tooltip-portal-arrow{bottom:.2rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-top .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-end .x-tooltip-portal-arrow-after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-left,.x-tooltip-portal-left-start,.x-tooltip-portal-left-end{padding-right:.525rem}.x-tooltip-portal-left>.x-tooltip-portal-arrow,.x-tooltip-portal-left-start>.x-tooltip-portal-arrow,.x-tooltip-portal-left-end>.x-tooltip-portal-arrow{right:.2rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-left .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-end .x-tooltip-portal-arrow-after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-right,.x-tooltip-portal-right-start,.x-tooltip-portal-right-end{padding-left:.525rem}.x-tooltip-portal-right>.x-tooltip-portal-arrow,.x-tooltip-portal-right-start>.x-tooltip-portal-arrow,.x-tooltip-portal-right-end>.x-tooltip-portal-arrow{left:.2rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-right .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-end .x-tooltip-portal-arrow-after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-bottom,.x-tooltip-portal-bottom-start,.x-tooltip-portal-bottom-end{padding-top:.525rem}.x-tooltip-portal-bottom .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow{top:.2rem;border-top-width:0;border-bottom-color:var(--x-text)}.x-tooltip-portal-bottom .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow-after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-text)}\n"] }]
+            args: [{ selector: `${XTooltipPortalPrefix}`, standalone: true, imports: [NgClass, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XFadeAnimation], template: "<div #tooltipPortal class=\"x-tooltip-portal\" [ngClass]=\"classMap()\">\r\n  <div class=\"x-tooltip-portal-inner\" [style.backgroundColor]=\"backgroundColor()\" [style.color]=\"color()\">\r\n    <ng-container *xOutlet=\"content()\"><div [innerHTML]=\"content()\"></div></ng-container>\r\n  </div>\r\n  <div #tooltipArrow class=\"x-tooltip-portal-arrow\" [class.x-tooltip-portal-arrow-hidden]=\"arrowHidden()\">\r\n    <div #tooltipArrowAfter class=\"x-tooltip-portal-arrow-after\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tooltip-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-tooltip-portal .x-tooltip-portal-arrow-hidden{visibility:hidden}.x-tooltip-portal>.x-tooltip-portal-inner{font-size:var(--x-font-size);background-color:var(--x-text);color:var(--x-text-700);padding:.325rem .5rem;max-width:10rem;border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-tooltip-portal .x-tooltip-portal-arrow,.x-tooltip-portal .x-tooltip-portal-arrow-after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-tooltip-portal .x-tooltip-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-tooltip-portal .x-tooltip-portal-arrow-after{border-width:.375rem}.x-tooltip-portal-top,.x-tooltip-portal-top-start,.x-tooltip-portal-top-end{padding-bottom:.525rem}.x-tooltip-portal-top>.x-tooltip-portal-arrow,.x-tooltip-portal-top-start>.x-tooltip-portal-arrow,.x-tooltip-portal-top-end>.x-tooltip-portal-arrow{bottom:.3rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-top .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-top-end .x-tooltip-portal-arrow-after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-text)}.x-tooltip-portal-left,.x-tooltip-portal-left-start,.x-tooltip-portal-left-end{padding-right:.525rem}.x-tooltip-portal-left>.x-tooltip-portal-arrow,.x-tooltip-portal-left-start>.x-tooltip-portal-arrow,.x-tooltip-portal-left-end>.x-tooltip-portal-arrow{right:.3rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-left .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-left-end .x-tooltip-portal-arrow-after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-text)}.x-tooltip-portal-right,.x-tooltip-portal-right-start,.x-tooltip-portal-right-end{padding-left:.525rem}.x-tooltip-portal-right>.x-tooltip-portal-arrow,.x-tooltip-portal-right-start>.x-tooltip-portal-arrow,.x-tooltip-portal-right-end>.x-tooltip-portal-arrow{left:.3rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-right .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-right-end .x-tooltip-portal-arrow-after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-text)}.x-tooltip-portal-bottom,.x-tooltip-portal-bottom-start,.x-tooltip-portal-bottom-end{padding-top:.525rem}.x-tooltip-portal-bottom .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow{top:.3rem;border-top-width:0;border-bottom-color:var(--x-text)}.x-tooltip-portal-bottom .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-start .x-tooltip-portal-arrow-after,.x-tooltip-portal-bottom-end .x-tooltip-portal-arrow-after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-text)}\n"] }]
         }], propDecorators: { mouseenter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -172,60 +173,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }], animation: [{
                 type: HostBinding,
                 args: ['@x-fade-animation']
-            }], tooltipPortal: [{
-                type: ViewChild,
-                args: ['tooltipPortal', { static: true }]
-            }], tooltipArrow: [{
-                type: ViewChild,
-                args: ['tooltipArrow']
-            }], tooltipArrowAfter: [{
-                type: ViewChild,
-                args: ['tooltipArrowAfter']
+            }], done: [{
+                type: HostListener,
+                args: ['@x-fade-animation.done', ['$event']]
             }] } });
 
 class XTooltipDirective extends XTooltipProperty {
-    constructor() {
-        super(...arguments);
-        this.contentChange = new BehaviorSubject(null);
-        this.positionChange = new Subject();
-        this._unSubject = new Subject();
-        this.elementRef = inject(ElementRef);
-        this.portalService = inject(XPortalService);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.overlay = inject(Overlay);
-    }
     get _show() {
-        return this.visible;
+        return this.visible();
     }
     mouseenter() {
-        !this.disabled && !this.manual && this.show();
+        this.mouseover.set(true);
+        !this.disabled() && !this.manual() && this.show();
     }
     mouseleave() {
-        !this.disabled && !this.manual && this.hide();
+        this.mouseover.set(false);
+        !this.disabled() && !this.manual() && this.hide();
     }
-    ngOnChanges(changes) {
-        const { content, visible } = changes;
-        XIsChange(content) && this.contentChange.next(this.content);
-        if (XIsChange(visible)) {
-            if (this.visible)
+    constructor() {
+        super();
+        this.box = signal(null);
+        this.mouseover = signal(false);
+        this.unSubject = new Subject();
+        this.realPlacement = signal(null);
+        this.elementRef = inject(ElementRef);
+        this.portalService = inject(XPortalService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.overlay = inject(Overlay);
+        this.portalComponent = signal(null);
+        this.visibleChanged = toObservable(this.visible);
+        effect(() => this.portalComponent()?.setInput('content', this.content()));
+        effect(() => this.portalComponent()?.setInput('box', this.box()));
+        effect(() => this.portalComponent()?.setInput('color', this.color()));
+        effect(() => this.portalComponent()?.setInput('backgroundColor', this.backgroundColor()));
+        effect(() => this.portalComponent()?.setInput('placement', this.realPlacement()));
+        this.visibleChanged.subscribe((x) => {
+            if (x)
                 this.show();
             else
                 this.hide();
-        }
+        });
     }
     ngOnDestroy() {
-        this.contentChange.unsubscribe();
+        this.unSubject.next();
+        this.unSubject.unsubscribe();
     }
     show() {
         if (this.timeoutHide)
             clearTimeout(this.timeoutHide);
         if (this.timeoutShow)
             clearTimeout(this.timeoutShow);
-        if (!this.portal || (this.portal && !this.portal.overlayRef?.hasAttached())) {
+        if ((!this.portal || (this.portal && !this.portal.overlayRef?.hasAttached())) && this.mouseover()) {
             this.timeoutShow = setTimeout(() => {
-                this.visible = true;
                 this.createPortal();
-            }, this.mouseEnterDelay);
+                this.visible.set(true);
+            }, this.mouseEnterDelay());
         }
     }
     hide() {
@@ -233,24 +235,25 @@ class XTooltipDirective extends XTooltipProperty {
             clearTimeout(this.timeoutHide);
         if (this.timeoutShow)
             clearTimeout(this.timeoutShow);
-        if (this.portal?.overlayRef?.hasAttached()) {
+        if (this.portal?.overlayRef?.hasAttached() && !this.mouseover()) {
             this.timeoutHide = setTimeout(() => {
-                this.visible = false;
                 this.portal.overlayRef?.dispose();
-            }, this.mouseLeaveDelay);
+                this.visible.set(false);
+            }, this.mouseLeaveDelay());
         }
     }
     createPortal() {
+        const connectTo = this.connectTo();
         const config = {
-            panelClass: this.panelClass,
+            panelClass: this.panelClass(),
             backdropClass: '',
             positionStrategy: this.portalService.setPlacement({
-                elementRef: this.connectTo
-                    ? this.connectTo instanceof ElementRef
-                        ? this.connectTo
-                        : new ElementRef(this.connectTo)
+                elementRef: connectTo
+                    ? connectTo instanceof ElementRef
+                        ? connectTo
+                        : new ElementRef(connectTo)
                     : this.elementRef,
-                placement: [this.placement, 'bottom', 'top', 'left', 'right']
+                placement: [this.placement(), 'top', 'bottom', 'left', 'right']
             }),
             scrollStrategy: this.overlay.scrollStrategies.reposition()
         };
@@ -264,46 +267,41 @@ class XTooltipDirective extends XTooltipProperty {
     }
     setPosition(config) {
         let position = config.positionStrategy;
-        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+        position.positionChanges.pipe(takeUntil(this.unSubject)).subscribe((pos) => {
             const place = XPortalConnectedPosition.get(pos.connectionPair);
-            place !== this.placement && this.positionChange.next(place);
+            if (place !== this.realPlacement()) {
+                this.realPlacement.set(place);
+                this.portal.overlayRef?.updatePosition();
+            }
         });
     }
     setInstance() {
         let componentRef = this.portal?.componentRef;
         if (!componentRef)
             return;
-        this.box = this.elementRef.nativeElement.getBoundingClientRect();
-        Object.assign(componentRef.instance, {
-            box: this.box,
-            content: this.content,
-            contentChange: this.contentChange,
-            color: this.color,
-            backgroundColor: this.backgroundColor,
-            placement: this.placement,
-            positionChange: this.positionChange,
-            portalHover: (hover) => {
-                if (this.timeoutHide && hover) {
-                    clearTimeout(this.timeoutHide);
-                }
-                else {
-                    this.hide();
-                }
-            },
-            viewInit: () => this.updatePortal()
+        this.portalComponent.set(componentRef);
+        this.realPlacement.set(this.placement());
+        this.box.set(this.elementRef.nativeElement.getBoundingClientRect());
+        const { hoverChanged } = componentRef.instance;
+        hoverChanged.subscribe((hover) => {
+            if (this.timeoutHide && hover) {
+                clearTimeout(this.timeoutHide);
+            }
+            else {
+                this.hide();
+            }
         });
-        componentRef.changeDetectorRef.detectChanges();
     }
     updatePortal() {
-        this.portal?.overlayRef?.updatePosition();
+        this.portal.overlayRef?.updatePosition();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: XTooltipDirective, isStandalone: true, selector: "[x-tooltip], x-tooltip", host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.x-tooltip-show": "this._show" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: XTooltipDirective, isStandalone: true, selector: "[x-tooltip], x-tooltip", host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.x-tooltip-show": "this._show" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: `[${XTooltipPrefix}], ${XTooltipPrefix}`, standalone: true }]
-        }], propDecorators: { _show: [{
+        }], ctorParameters: () => [], propDecorators: { _show: [{
                 type: HostBinding,
                 args: ['class.x-tooltip-show']
             }], mouseenter: [{
@@ -315,11 +313,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class XTooltipModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XTooltipModule, imports: [XTooltipDirective], exports: [XTooltipDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XTooltipModule, imports: [XTooltipDirective], exports: [XTooltipDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTooltipDirective],