@ng-nest/ui 17.0.11 → 18.0.0

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

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, inject, Renderer2, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, ViewChild, ElementRef, ViewContainerRef, NgModule } from '@angular/core';
+import { input, model, Directive, output, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, signal, inject, ElementRef, ViewContainerRef, effect, NgModule } from '@angular/core';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
-import { Subject, BehaviorSubject } from 'rxjs';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XInputBoolean, XFadeAnimation, XConfigService, XIsChange } from '@ng-nest/ui/core';
-import { takeUntil } from 'rxjs/operators';
+import { XPropertyFunction, XToCssPixelValue, XToBoolean, XToNumber, XIsEmpty, XFadeAnimation, XIsChange } from '@ng-nest/ui/core';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { NgClass } from '@angular/common';
+import { Subject } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
+import { takeUntil } from 'rxjs/operators';
 
 /**
  * Popover
@@ -15,77 +14,91 @@ import { Overlay } from '@angular/cdk/overlay';
  * @decorator directive
  */
 const XPopoverPrefix = 'x-popover';
-const X_CONFIG_NAME = 'popover';
+const X_POPOVER_CONFIG_NAME = 'popover';
 /**
  * Popover Property
  */
-class XPopoverProperty extends XProperty {
+class XPopoverProperty extends XPropertyFunction(X_POPOVER_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 标题，支持自定义模板
+         * @en_US Title, support custom template
+         */
+        this.title = input('');
+        /**
+         * @zh_CN 内容，支持自定义模板
+         * @en_US Content, support custom templates
+         */
+        this.content = input('');
+        /**
+         * @zh_CN 底部，支持自定义模板
+         * @en_US At the bottom, support custom templates
+         */
+        this.footer = input('');
+        /**
+         * @zh_CN 内部样式
+         * @en_US panel class
+         */
+        this.panelClass = input('');
+        /**
+         * @zh_CN 指定参考对象
+         * @en_US specify reference object
+         */
+        this.connectTo = input();
+        /**
+         * @zh_CN 弹出的位置
+         * @en_US Pop-up position
+         */
+        this.placement = input(this.config?.placement ?? 'top');
+        /**
+         * @zh_CN 激活方式
+         * @en_US Activation method
+         */
+        this.trigger = input(this.config?.trigger ?? 'hover');
+        /**
+         * @zh_CN 宽度
+         * @en_US width
+         */
+        this.width = input(this.config?.width ?? '', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 最大宽度
+         * @en_US Max width
+         */
+        this.maxWidth = input(this.config?.maxWidth ?? '10rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 最小宽度
+         * @en_US Min width
+         */
+        this.minWidth = input(this.config?.minWidth ?? '10rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 显示/隐藏控制
+         * @en_US Show/hide control
+         */
+        this.visible = model(false);
+        /**
+         * @zh_CN 条件触发
+         * @en_US condition trigger
+         */
+        this.condition = 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;
-        /**
-         * @zh_CN 显示/隐藏改变的事件
-         * @en_US Show/hide changed events
-         */
-        this.visibleChange = new EventEmitter();
+        this.mouseLeaveDelay = input(100, { transform: XToNumber });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XPopoverProperty, selector: "[x-popover], x-popover", inputs: { title: "title", content: "content", footer: "footer", panelClass: "panelClass", connectTo: "connectTo", placement: "placement", trigger: "trigger", width: "width", visible: "visible", condition: "condition", mouseEnterDelay: "mouseEnterDelay", mouseLeaveDelay: "mouseLeaveDelay" }, outputs: { visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: XPopoverProperty, selector: "[x-popover], x-popover", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", 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 }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", 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 } }, outputs: { visible: "visibleChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'bottom')
-], XPopoverProperty.prototype, "placement", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'hover')
-], XPopoverProperty.prototype, "trigger", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '10rem')
-], XPopoverProperty.prototype, "width", void 0);
-__decorate([
-    XInputBoolean()
-], XPopoverProperty.prototype, "visible", void 0);
-__decorate([
-    XInputBoolean()
-], XPopoverProperty.prototype, "condition", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverProperty, decorators: [{
             type: Directive,
             args: [{ selector: `[${XPopoverPrefix}], ${XPopoverPrefix}` }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], panelClass: [{
-                type: Input
-            }], connectTo: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], condition: [{
-                type: Input
-            }], mouseEnterDelay: [{
-                type: Input
-            }], mouseLeaveDelay: [{
-                type: Input
-            }], visibleChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Popover Portal
  * @selector x-popover-portal
@@ -95,82 +108,39 @@ const XPopoverPortalPrefix = 'x-popover-portal';
 
 class XPopoverPortalComponent {
     constructor() {
-        this.classMap = {};
-        this.positionChange = new Subject();
-        this._unSubject = new Subject();
-        this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
+        this.title = input();
+        this.content = input();
+        this.footer = input();
+        this.width = input();
+        this.minWidth = input();
+        this.maxWidth = input();
+        this.trigger = input();
+        this.placement = input();
+        this.portalHover = output();
+        this.animation = true;
+        this.classMap = computed(() => ({
+            [`${XPopoverPortalPrefix}-${this.placement()}`]: !XIsEmpty(this.placement())
+        }));
     }
     mouseenter() {
-        if (this.trigger === 'hover') {
-            this.portalHover(true);
+        if (this.trigger() === 'hover') {
+            this.portalHover.emit(true);
         }
     }
     mouseleave() {
-        if (this.trigger === 'hover') {
-            this.portalHover(false);
+        if (this.trigger() === 'hover') {
+            this.portalHover.emit(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();
-    }
     stopPropagation(event) {
         event.stopPropagation();
     }
-    ngAfterViewInit() {
-        this.viewInit();
-        this.portalBox = this.popoverPortal.nativeElement.getBoundingClientRect();
-        this.arrowBox = this.popoverArrow.nativeElement.getBoundingClientRect();
-        this.setArrow();
-        this.cdr.detectChanges();
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    setClassMap() {
-        this.classMap[`${XPopoverPortalPrefix}-${this.previousPlacement}`] = false;
-        this.classMap[`${XPopoverPortalPrefix}-${this.placement}`] = true;
-        this.previousPlacement = `${this.placement}`;
-    }
-    setArrow() {
-        let offset = this.arrowBox.height / 2;
-        if (this.portalBox.height > this.box.height && (this.includes('right-') || this.includes('left-'))) {
-            if (this.includes('-start')) {
-                this.renderer.setStyle(this.popoverArrow.nativeElement, 'top', `${this.box.height / 2 - offset}px`);
-            }
-            else if (this.includes('-end')) {
-                this.renderer.setStyle(this.popoverArrow.nativeElement, 'bottom', `${this.box.height / 2 - offset}px`);
-            }
-        }
-        else if (this.portalBox.width > this.box.width && (this.includes('top-') || this.includes('bottom-'))) {
-            if (this.includes('-start')) {
-                this.renderer.setStyle(this.popoverArrow.nativeElement, 'left', `${this.box.width / 2 - offset}px`);
-            }
-            else if (this.includes('-end')) {
-                this.renderer.setStyle(this.popoverArrow.nativeElement, 'right', `${this.box.width / 2 - offset}px`);
-            }
-        }
-    }
-    includes(arrow) {
-        return this.placement.indexOf(arrow) >= 0;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XPopoverPortalComponent, isStandalone: true, selector: "x-popover-portal", host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "@x-fade-animation": "this.animation" } }, viewQueries: [{ propertyName: "popoverPortal", first: true, predicate: ["popoverPortal"], descendants: true, static: true }, { propertyName: "popoverArrow", first: true, predicate: ["popoverArrow"], descendants: true, static: true }], ngImport: i0, template: "<div #popoverPortal class=\"x-popover-portal\" [ngClass]=\"classMap\" (click)=\"stopPropagation($event)\">\r\n  <div class=\"x-popover-portal-inner\" [style.width]=\"width\">\r\n    @if (title) {\r\n      <div class=\"x-popover-portal-title\">\r\n        <ng-container *xOutlet=\"title\">\r\n          {{ title }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (content) {\r\n      <div class=\"x-popover-portal-content\">\r\n        <ng-container *xOutlet=\"content\">\r\n          {{ content }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (footer) {\r\n      <div class=\"x-popover-portal-footer\">\r\n        <ng-container *xOutlet=\"footer\">\r\n          {{ footer }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div #popoverArrow class=\"x-popover-portal-arrow\"></div>\r\n</div>\r\n", styles: ["x-popover{display:inline-block}.x-popover-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-popover-portal>.x-popover-portal-inner{font-size:var(--x-font-size);background-color:var(--x-background);color:var(--x-text);padding:var(--x-font-size);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-popover-portal .x-popover-portal-title{margin-bottom:calc(var(--x-font-size) - .5rem);font-weight:600;display:flex;align-items:center}.x-popover-portal .x-popover-portal-footer{margin-top:calc(var(--x-font-size) - .5rem)}.x-popover-portal .x-popover-portal-arrow,.x-popover-portal .x-popover-portal-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-popover-portal .x-popover-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-popover-portal .x-popover-portal-arrow:after{content:\" \";border-width:.375rem}.x-popover-portal-top,.x-popover-portal-top-start,.x-popover-portal-top-end{padding-bottom:.525rem}.x-popover-portal-top>.x-popover-portal-arrow,.x-popover-portal-top-start>.x-popover-portal-arrow,.x-popover-portal-top-end>.x-popover-portal-arrow{bottom:.2rem;border-bottom-width:0;border-top-color:var(--x-border)}.x-popover-portal-top .x-popover-portal-arrow:after,.x-popover-portal-top-start .x-popover-portal-arrow:after,.x-popover-portal-top-end .x-popover-portal-arrow:after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-background)}.x-popover-portal-left,.x-popover-portal-left-start,.x-popover-portal-left-end{padding-right:.525rem}.x-popover-portal-left>.x-popover-portal-arrow,.x-popover-portal-left-start>.x-popover-portal-arrow,.x-popover-portal-left-end>.x-popover-portal-arrow{right:.2rem;border-right-width:0;border-left-color:var(--x-border)}.x-popover-portal-left .x-popover-portal-arrow:after,.x-popover-portal-left-start .x-popover-portal-arrow:after,.x-popover-portal-left-end .x-popover-portal-arrow:after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-background)}.x-popover-portal-right,.x-popover-portal-right-start,.x-popover-portal-right-end{padding-left:.525rem}.x-popover-portal-right>.x-popover-portal-arrow,.x-popover-portal-right-start>.x-popover-portal-arrow,.x-popover-portal-right-end>.x-popover-portal-arrow{left:.2rem;border-left-width:0;border-right-color:var(--x-border)}.x-popover-portal-right .x-popover-portal-arrow:after,.x-popover-portal-right-start .x-popover-portal-arrow:after,.x-popover-portal-right-end .x-popover-portal-arrow:after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-background)}.x-popover-portal-bottom,.x-popover-portal-bottom-start,.x-popover-portal-bottom-end{padding-top:.525rem}.x-popover-portal-bottom .x-popover-portal-arrow,.x-popover-portal-bottom-start .x-popover-portal-arrow,.x-popover-portal-bottom-end .x-popover-portal-arrow{top:.2rem;border-top-width:0;border-bottom-color:var(--x-border)}.x-popover-portal-bottom .x-popover-portal-arrow:after,.x-popover-portal-bottom-start .x-popover-portal-arrow:after,.x-popover-portal-bottom-end .x-popover-portal-arrow:after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-background)}\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: XPopoverPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XPopoverPortalComponent, isStandalone: true, selector: "x-popover-portal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { portalHover: "portalHover" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "@x-fade-animation": "this.animation" } }, ngImport: i0, template: "<div #popoverPortal class=\"x-popover-portal\" [ngClass]=\"classMap()\" (click)=\"stopPropagation($event)\">\r\n  <div\r\n    class=\"x-popover-portal-inner\"\r\n    [style.width]=\"width()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n  >\r\n    @if (title()) {\r\n      <div class=\"x-popover-portal-title\">\r\n        <ng-container *xOutlet=\"title()\">\r\n          {{ title() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (content()) {\r\n      <div class=\"x-popover-portal-content\">\r\n        <ng-container *xOutlet=\"content()\">\r\n          {{ content() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (footer()) {\r\n      <div class=\"x-popover-portal-footer\">\r\n        <ng-container *xOutlet=\"footer()\">\r\n          {{ footer() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div #popoverArrow class=\"x-popover-portal-arrow\"></div>\r\n</div>\r\n", styles: ["x-popover{display:inline-block}.x-popover-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-popover-portal>.x-popover-portal-inner{font-size:var(--x-font-size);background-color:var(--x-background-100);color:var(--x-text);padding:var(--x-font-size);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-popover-portal .x-popover-portal-title{margin-bottom:calc(var(--x-font-size) - .5rem);font-weight:600;display:flex;align-items:center}.x-popover-portal .x-popover-portal-footer{margin-top:calc(var(--x-font-size) - .5rem)}.x-popover-portal .x-popover-portal-arrow,.x-popover-portal .x-popover-portal-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-popover-portal-top,.x-popover-portal-top-start,.x-popover-portal-top-end{padding-bottom:.525rem}.x-popover-portal-top>.x-popover-portal-arrow,.x-popover-portal-top-start>.x-popover-portal-arrow,.x-popover-portal-top-end>.x-popover-portal-arrow{bottom:.1rem}.x-popover-portal-top .x-popover-portal-arrow:after,.x-popover-portal-top-start .x-popover-portal-arrow:after,.x-popover-portal-top-end .x-popover-portal-arrow:after{bottom:.1rem;margin-left:-.375rem}.x-popover-portal-left,.x-popover-portal-left-start,.x-popover-portal-left-end{padding-right:.525rem}.x-popover-portal-left>.x-popover-portal-arrow,.x-popover-portal-left-start>.x-popover-portal-arrow,.x-popover-portal-left-end>.x-popover-portal-arrow{right:.1rem}.x-popover-portal-left .x-popover-portal-arrow:after,.x-popover-portal-left-start .x-popover-portal-arrow:after,.x-popover-portal-left-end .x-popover-portal-arrow:after{right:.1rem;margin-top:-.375rem}.x-popover-portal-right,.x-popover-portal-right-start,.x-popover-portal-right-end{padding-left:.525rem}.x-popover-portal-right>.x-popover-portal-arrow,.x-popover-portal-right-start>.x-popover-portal-arrow,.x-popover-portal-right-end>.x-popover-portal-arrow{left:.1rem}.x-popover-portal-right .x-popover-portal-arrow:after,.x-popover-portal-right-start .x-popover-portal-arrow:after,.x-popover-portal-right-end .x-popover-portal-arrow:after{left:.1rem;margin-top:-.375rem}.x-popover-portal-bottom,.x-popover-portal-bottom-start,.x-popover-portal-bottom-end{padding-top:.525rem}.x-popover-portal-bottom .x-popover-portal-arrow,.x-popover-portal-bottom-start .x-popover-portal-arrow,.x-popover-portal-bottom-end .x-popover-portal-arrow{top:.1rem}.x-popover-portal-bottom .x-popover-portal-arrow:after,.x-popover-portal-bottom-start .x-popover-portal-arrow:after,.x-popover-portal-bottom-end .x-popover-portal-arrow:after{top:.1rem;margin-left:-.375rem}\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.0", ngImport: i0, type: XPopoverPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XPopoverPortalPrefix}`, standalone: true, imports: [NgClass, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XFadeAnimation], template: "<div #popoverPortal class=\"x-popover-portal\" [ngClass]=\"classMap\" (click)=\"stopPropagation($event)\">\r\n  <div class=\"x-popover-portal-inner\" [style.width]=\"width\">\r\n    @if (title) {\r\n      <div class=\"x-popover-portal-title\">\r\n        <ng-container *xOutlet=\"title\">\r\n          {{ title }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (content) {\r\n      <div class=\"x-popover-portal-content\">\r\n        <ng-container *xOutlet=\"content\">\r\n          {{ content }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (footer) {\r\n      <div class=\"x-popover-portal-footer\">\r\n        <ng-container *xOutlet=\"footer\">\r\n          {{ footer }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div #popoverArrow class=\"x-popover-portal-arrow\"></div>\r\n</div>\r\n", styles: ["x-popover{display:inline-block}.x-popover-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-popover-portal>.x-popover-portal-inner{font-size:var(--x-font-size);background-color:var(--x-background);color:var(--x-text);padding:var(--x-font-size);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-popover-portal .x-popover-portal-title{margin-bottom:calc(var(--x-font-size) - .5rem);font-weight:600;display:flex;align-items:center}.x-popover-portal .x-popover-portal-footer{margin-top:calc(var(--x-font-size) - .5rem)}.x-popover-portal .x-popover-portal-arrow,.x-popover-portal .x-popover-portal-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-popover-portal .x-popover-portal-arrow{border-width:.375rem;filter:drop-shadow(0 .125rem .75rem rgba(0,0,0,.03))}.x-popover-portal .x-popover-portal-arrow:after{content:\" \";border-width:.375rem}.x-popover-portal-top,.x-popover-portal-top-start,.x-popover-portal-top-end{padding-bottom:.525rem}.x-popover-portal-top>.x-popover-portal-arrow,.x-popover-portal-top-start>.x-popover-portal-arrow,.x-popover-portal-top-end>.x-popover-portal-arrow{bottom:.2rem;border-bottom-width:0;border-top-color:var(--x-border)}.x-popover-portal-top .x-popover-portal-arrow:after,.x-popover-portal-top-start .x-popover-portal-arrow:after,.x-popover-portal-top-end .x-popover-portal-arrow:after{bottom:.1rem;margin-left:-.375rem;border-bottom-width:0;border-top-color:var(--x-background)}.x-popover-portal-left,.x-popover-portal-left-start,.x-popover-portal-left-end{padding-right:.525rem}.x-popover-portal-left>.x-popover-portal-arrow,.x-popover-portal-left-start>.x-popover-portal-arrow,.x-popover-portal-left-end>.x-popover-portal-arrow{right:.2rem;border-right-width:0;border-left-color:var(--x-border)}.x-popover-portal-left .x-popover-portal-arrow:after,.x-popover-portal-left-start .x-popover-portal-arrow:after,.x-popover-portal-left-end .x-popover-portal-arrow:after{right:.1rem;margin-top:-.375rem;border-right-width:0;border-left-color:var(--x-background)}.x-popover-portal-right,.x-popover-portal-right-start,.x-popover-portal-right-end{padding-left:.525rem}.x-popover-portal-right>.x-popover-portal-arrow,.x-popover-portal-right-start>.x-popover-portal-arrow,.x-popover-portal-right-end>.x-popover-portal-arrow{left:.2rem;border-left-width:0;border-right-color:var(--x-border)}.x-popover-portal-right .x-popover-portal-arrow:after,.x-popover-portal-right-start .x-popover-portal-arrow:after,.x-popover-portal-right-end .x-popover-portal-arrow:after{left:.1rem;margin-top:-.375rem;border-left-width:0;border-right-color:var(--x-background)}.x-popover-portal-bottom,.x-popover-portal-bottom-start,.x-popover-portal-bottom-end{padding-top:.525rem}.x-popover-portal-bottom .x-popover-portal-arrow,.x-popover-portal-bottom-start .x-popover-portal-arrow,.x-popover-portal-bottom-end .x-popover-portal-arrow{top:.2rem;border-top-width:0;border-bottom-color:var(--x-border)}.x-popover-portal-bottom .x-popover-portal-arrow:after,.x-popover-portal-bottom-start .x-popover-portal-arrow:after,.x-popover-portal-bottom-end .x-popover-portal-arrow:after{top:.1rem;margin-left:-.375rem;border-top-width:0;border-bottom-color:var(--x-background)}\n"] }]
+            args: [{ selector: `${XPopoverPortalPrefix}`, standalone: true, imports: [NgClass, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XFadeAnimation], template: "<div #popoverPortal class=\"x-popover-portal\" [ngClass]=\"classMap()\" (click)=\"stopPropagation($event)\">\r\n  <div\r\n    class=\"x-popover-portal-inner\"\r\n    [style.width]=\"width()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n  >\r\n    @if (title()) {\r\n      <div class=\"x-popover-portal-title\">\r\n        <ng-container *xOutlet=\"title()\">\r\n          {{ title() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (content()) {\r\n      <div class=\"x-popover-portal-content\">\r\n        <ng-container *xOutlet=\"content()\">\r\n          {{ content() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n    @if (footer()) {\r\n      <div class=\"x-popover-portal-footer\">\r\n        <ng-container *xOutlet=\"footer()\">\r\n          {{ footer() }}\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div #popoverArrow class=\"x-popover-portal-arrow\"></div>\r\n</div>\r\n", styles: ["x-popover{display:inline-block}.x-popover-portal{margin:0;padding:0;display:inline-flex;position:relative;justify-content:center;align-items:center}.x-popover-portal>.x-popover-portal-inner{font-size:var(--x-font-size);background-color:var(--x-background-100);color:var(--x-text);padding:var(--x-font-size);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-popover-portal .x-popover-portal-title{margin-bottom:calc(var(--x-font-size) - .5rem);font-weight:600;display:flex;align-items:center}.x-popover-portal .x-popover-portal-footer{margin-top:calc(var(--x-font-size) - .5rem)}.x-popover-portal .x-popover-portal-arrow,.x-popover-portal .x-popover-portal-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.x-popover-portal-top,.x-popover-portal-top-start,.x-popover-portal-top-end{padding-bottom:.525rem}.x-popover-portal-top>.x-popover-portal-arrow,.x-popover-portal-top-start>.x-popover-portal-arrow,.x-popover-portal-top-end>.x-popover-portal-arrow{bottom:.1rem}.x-popover-portal-top .x-popover-portal-arrow:after,.x-popover-portal-top-start .x-popover-portal-arrow:after,.x-popover-portal-top-end .x-popover-portal-arrow:after{bottom:.1rem;margin-left:-.375rem}.x-popover-portal-left,.x-popover-portal-left-start,.x-popover-portal-left-end{padding-right:.525rem}.x-popover-portal-left>.x-popover-portal-arrow,.x-popover-portal-left-start>.x-popover-portal-arrow,.x-popover-portal-left-end>.x-popover-portal-arrow{right:.1rem}.x-popover-portal-left .x-popover-portal-arrow:after,.x-popover-portal-left-start .x-popover-portal-arrow:after,.x-popover-portal-left-end .x-popover-portal-arrow:after{right:.1rem;margin-top:-.375rem}.x-popover-portal-right,.x-popover-portal-right-start,.x-popover-portal-right-end{padding-left:.525rem}.x-popover-portal-right>.x-popover-portal-arrow,.x-popover-portal-right-start>.x-popover-portal-arrow,.x-popover-portal-right-end>.x-popover-portal-arrow{left:.1rem}.x-popover-portal-right .x-popover-portal-arrow:after,.x-popover-portal-right-start .x-popover-portal-arrow:after,.x-popover-portal-right-end .x-popover-portal-arrow:after{left:.1rem;margin-top:-.375rem}.x-popover-portal-bottom,.x-popover-portal-bottom-start,.x-popover-portal-bottom-end{padding-top:.525rem}.x-popover-portal-bottom .x-popover-portal-arrow,.x-popover-portal-bottom-start .x-popover-portal-arrow,.x-popover-portal-bottom-end .x-popover-portal-arrow{top:.1rem}.x-popover-portal-bottom .x-popover-portal-arrow:after,.x-popover-portal-bottom-start .x-popover-portal-arrow:after,.x-popover-portal-bottom-end .x-popover-portal-arrow:after{top:.1rem;margin-left:-.375rem}\n"] }]
         }], propDecorators: { mouseenter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -180,81 +150,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], animation: [{
                 type: HostBinding,
                 args: ['@x-fade-animation']
-            }], popoverPortal: [{
-                type: ViewChild,
-                args: ['popoverPortal', { static: true }]
-            }], popoverArrow: [{
-                type: ViewChild,
-                args: ['popoverArrow', { static: true }]
             }] } });
 
 class XPopoverDirective extends XPopoverProperty {
-    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);
-        this.configService = inject(XConfigService);
-    }
     get _show() {
-        return this.visible;
+        return this.visible();
     }
     click() {
-        if (this.condition)
+        if (this.condition())
             return;
-        if (this.trigger === 'click') {
-            this.visible = !this.visible;
-            if (this.visible)
+        if (this.trigger() === 'click') {
+            this.visible.update((x) => !x);
+            if (this.visible())
                 this.show();
             else
                 this.hide();
-            this.visibleChange.emit(this.visible);
         }
     }
     mouseenter() {
-        if (this.condition)
+        if (this.condition())
             return;
-        if (this.trigger === 'hover')
+        if (this.trigger() === 'hover')
             this.show();
     }
     mouseleave() {
-        if (this.condition)
+        if (this.condition())
             return;
-        if (this.trigger === 'hover')
+        if (this.trigger() === 'hover')
             this.hide();
     }
     focus() {
-        if (this.condition)
+        if (this.condition())
             return;
-        if (this.trigger === 'focus')
+        if (this.trigger() === 'focus')
             this.show();
     }
     blur() {
-        if (this.condition)
+        if (this.condition())
             return;
-        if (this.trigger === 'focus')
+        if (this.trigger() === 'focus')
             this.hide();
     }
+    constructor() {
+        super();
+        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);
+        effect(() => this.portalComponent()?.setInput('title', this.title()));
+        effect(() => this.portalComponent()?.setInput('content', this.content()));
+        effect(() => this.portalComponent()?.setInput('footer', this.footer()));
+        effect(() => this.portalComponent()?.setInput('width', this.width()));
+        effect(() => this.portalComponent()?.setInput('minWidth', this.minWidth()));
+        effect(() => this.portalComponent()?.setInput('maxWidth', this.maxWidth()));
+        effect(() => this.portalComponent()?.setInput('trigger', this.trigger()));
+        effect(() => this.portalComponent()?.setInput('placement', this.realPlacement()));
+    }
     ngOnChanges(changes) {
-        const { content, visible } = changes;
-        XIsChange(content) && this.contentChange.next(this.content);
-        if (XIsChange(visible) && !this.condition) {
-            if (this.visible)
+        const { visible } = changes;
+        if (XIsChange(visible) && !this.condition()) {
+            if (this.visible())
                 this.show();
             else
                 this.hide();
         }
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-        this.contentChange.unsubscribe();
+        this.unSubject.next();
+        this.unSubject.unsubscribe();
     }
-    ngAfterViewInit() { }
     show() {
         if (this.timeoutHide)
             clearTimeout(this.timeoutHide);
@@ -262,10 +229,9 @@ class XPopoverDirective extends XPopoverProperty {
             clearTimeout(this.timeoutShow);
         if (!this.portal || (this.portal && !this.portal.overlayRef?.hasAttached())) {
             this.timeoutShow = setTimeout(() => {
-                this.visible = true;
                 this.createPortal();
-                this.visibleChange.emit(this.visible);
-            }, this.mouseEnterDelay);
+                this.visible.set(true);
+            }, this.mouseEnterDelay());
         }
     }
     hide() {
@@ -275,23 +241,23 @@ class XPopoverDirective extends XPopoverProperty {
             clearTimeout(this.timeoutShow);
         if (this.portal?.overlayRef?.hasAttached()) {
             this.timeoutHide = setTimeout(() => {
-                this.visible = false;
                 this.portal.overlayRef?.dispose();
-                this.visibleChange.emit(this.visible);
-            }, 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()
         };
@@ -301,10 +267,10 @@ class XPopoverDirective extends XPopoverProperty {
             viewContainerRef: this.viewContainerRef,
             overlayConfig: config
         });
-        if (this.trigger === 'click') {
+        if (this.trigger() === 'click') {
             this.portal.overlayRef
                 ?.outsidePointerEvents()
-                .pipe(takeUntil(this._unSubject))
+                .pipe(takeUntil(this.unSubject))
                 .subscribe(() => {
                 this.hide();
             });
@@ -313,11 +279,10 @@ class XPopoverDirective extends XPopoverProperty {
     }
     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);
-            if (place !== this.realPlacement) {
-                this.realPlacement = place;
-                this.positionChange.next(place);
+            if (place !== this.realPlacement()) {
+                this.realPlacement.set(place);
                 this.portal.overlayRef?.updatePosition();
             }
         });
@@ -326,42 +291,25 @@ class XPopoverDirective extends XPopoverProperty {
         let componentRef = this.portal?.componentRef;
         if (!componentRef)
             return;
-        this.box = this.elementRef.nativeElement.getBoundingClientRect();
-        this.realPlacement = `${this.placement}`;
-        Object.assign(componentRef.instance, {
-            box: this.box,
-            title: this.title,
-            content: this.content,
-            footer: this.footer,
-            contentChange: this.contentChange,
-            positionChange: this.positionChange,
-            trigger: this.trigger,
-            placement: this.placement,
-            width: this.width,
-            portalHover: (hover) => {
-                if (this.timeoutHide && hover) {
-                    clearTimeout(this.timeoutHide);
-                }
-                else {
-                    this.hide();
-                }
-            },
-            closePortal: () => this.hide(),
-            viewInit: () => this.portal.overlayRef?.updatePosition()
+        this.portalComponent.set(componentRef);
+        this.realPlacement.set(this.placement());
+        const { portalHover } = componentRef.instance;
+        portalHover.subscribe((hover) => {
+            if (this.timeoutHide && hover) {
+                clearTimeout(this.timeoutHide);
+            }
+            else {
+                this.hide();
+            }
         });
-        componentRef.changeDetectorRef.detectChanges();
-    }
-    update() {
-        if (this.portal)
-            this.portal.overlayRef?.updatePosition();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XPopoverDirective, isStandalone: true, selector: "[x-popover], x-popover", host: { listeners: { "click": "click()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focus": "focus()", "blur": "blur()" }, properties: { "class.x-popover-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: XPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: XPopoverDirective, isStandalone: true, selector: "[x-popover], x-popover", host: { listeners: { "click": "click()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focus": "focus()", "blur": "blur()" }, properties: { "class.x-popover-show": "this._show" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverDirective, decorators: [{
             type: Directive,
             args: [{ selector: `[${XPopoverPrefix}], ${XPopoverPrefix}`, standalone: true }]
-        }], propDecorators: { _show: [{
+        }], ctorParameters: () => [], propDecorators: { _show: [{
                 type: HostBinding,
                 args: ['class.x-popover-show']
             }], click: [{
@@ -382,11 +330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class XPopoverModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XPopoverModule, imports: [XPopoverDirective], exports: [XPopoverDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XPopoverModule, imports: [XPopoverDirective], exports: [XPopoverDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XPopoverDirective],