@ng-nest/ui 20.0.7 → 20.1.0

package/fesm2022/ng-nest-ui-pattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-pattern.mjs","sources":["../../../../lib/ng-nest/ui/pattern/pattern.property.ts","../../../../lib/ng-nest/ui/pattern/pattern.component.ts","../../../../lib/ng-nest/ui/pattern/pattern.component.html","../../../../lib/ng-nest/ui/pattern/pattern.module.ts","../../../../lib/ng-nest/ui/pattern/ng-nest-ui-pattern.ts"],"sourcesContent":["/**\r\n * Pattern\r\n * @selector x-pattern\r\n * @decorator component\r\n */\r\nexport const XPatternPrefix = 'x-pattern';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XPatternPrefix } from './pattern.property';\r\n\r\n@Component({\r\n  selector: XPatternPrefix,\r\n  templateUrl: './pattern.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XPatternComponent {\r\n  @HostBinding('class') className = XPatternPrefix;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XPatternComponent } from './pattern.component';\r\n\r\n@NgModule({\r\n  exports: [XPatternComponent],\r\n  imports: [XPatternComponent]\r\n})\r\nexport class XPatternModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;AAIG;AACI,MAAM,cAAc,GAAG;;MCKjB,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QAQwB,IAAS,CAAA,SAAA,GAAG,cAAc;AACjD;iIAFY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,0HCV9B,+BACA,EAAA,MAAA,EAAA,CAAA,mKAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,iBAGT,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,mKAAA,CAAA,EAAA;8BAGzB,SAAS,EAAA,CAAA;sBAA9B,WAAW;uBAAC,OAAO;;;MEJT,cAAc,CAAA;iIAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAd,cAAc,EAAA,OAAA,EAAA,CAFf,iBAAiB,CAAA,EAAA,OAAA,EAAA,CADjB,iBAAiB,CAAA,EAAA,CAAA,CAAA;kIAGhB,cAAc,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,iBAAiB;AAC5B,iBAAA;;;ACND;;AAEG;;;;"}
+{"version":3,"file":"ng-nest-ui-pattern.mjs","sources":["../../../../lib/ng-nest/ui/pattern/pattern.property.ts","../../../../lib/ng-nest/ui/pattern/pattern.component.ts","../../../../lib/ng-nest/ui/pattern/pattern.component.html","../../../../lib/ng-nest/ui/pattern/pattern.module.ts","../../../../lib/ng-nest/ui/pattern/ng-nest-ui-pattern.ts"],"sourcesContent":["/**\r\n * Pattern\r\n * @selector x-pattern\r\n * @decorator component\r\n */\r\nexport const XPatternPrefix = 'x-pattern';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XPatternPrefix } from './pattern.property';\r\n\r\n@Component({\r\n  selector: XPatternPrefix,\r\n  templateUrl: './pattern.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XPatternComponent {\r\n  @HostBinding('class') className = XPatternPrefix;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XPatternComponent } from './pattern.component';\r\n\r\n@NgModule({\r\n  exports: [XPatternComponent],\r\n  imports: [XPatternComponent]\r\n})\r\nexport class XPatternModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;AAIG;AACI,MAAM,cAAc,GAAG;;MCKjB,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QAQwB,IAAA,CAAA,SAAS,GAAG,cAAc;AACjD,IAAA;iIAFY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,0HCV9B,+BACA,EAAA,MAAA,EAAA,CAAA,mKAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,iBAGT,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,mKAAA,CAAA,EAAA;8BAGzB,SAAS,EAAA,CAAA;sBAA9B,WAAW;uBAAC,OAAO;;;MEJT,cAAc,CAAA;iIAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAd,cAAc,EAAA,OAAA,EAAA,CAFf,iBAAiB,CAAA,EAAA,OAAA,EAAA,CADjB,iBAAiB,CAAA,EAAA,CAAA,CAAA;kIAGhB,cAAc,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,iBAAiB;AAC5B,iBAAA;;;ACND;;AAEG;;;;"}

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

@@ -27,67 +27,67 @@ class XPopconfirmProperty extends XPropertyFunction(X_POPCONFIRM_CONFIG_NAME) {
          * @zh_CN 标题，支持自定义模板
          * @en_US Title, support custom template
          */
-        this.title = input('');
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
         /**
          * @zh_CN 内容，支持自定义模板
          * @en_US Content, support custom templates
          */
-        this.content = input('');
+        this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
         /**
          * @zh_CN 弹出的位置
          * @en_US Pop-up position
          */
-        this.placement = input(this.config?.placement ?? 'bottom');
+        this.placement = input(this.config?.placement ?? 'bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
         /**
          * @zh_CN 激活方式
          * @en_US Activation method
          */
-        this.trigger = input(this.config?.trigger ?? 'click');
+        this.trigger = input(this.config?.trigger ?? 'click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
         /**
          * @zh_CN 宽度
          * @en_US width
          */
-        this.width = input(this.config?.width ?? '', { transform: XToCssPixelValue });
+        this.width = input(this.config?.width ?? '', ...(ngDevMode ? [{ debugName: "width", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 最大宽度
          * @en_US Max width
          */
-        this.maxWidth = input(this.config?.maxWidth ?? '15rem', { transform: XToCssPixelValue });
+        this.maxWidth = input(this.config?.maxWidth ?? '15rem', ...(ngDevMode ? [{ debugName: "maxWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 最小宽度
          * @en_US Min width
          */
-        this.minWidth = input(this.config?.minWidth ?? '15rem', { transform: XToCssPixelValue });
+        this.minWidth = input(this.config?.minWidth ?? '15rem', ...(ngDevMode ? [{ debugName: "minWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 图标
          * @en_US Icon
          */
-        this.icon = input(this.config?.icon ?? 'fto-help-circle');
+        this.icon = input(this.config?.icon ?? 'fto-help-circle', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         /**
          * @zh_CN 图标颜色
          * @en_US Icon color
          */
-        this.iconColor = input(this.config?.iconColor ?? '#e6a23c');
+        this.iconColor = input(this.config?.iconColor ?? '#e6a23c', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
         /**
          * @zh_CN 取消的文字
          * @en_US Canceled text
          */
-        this.cancelText = input(this.config?.cancelText ?? '');
+        this.cancelText = input(this.config?.cancelText ?? '', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
         /**
          * @zh_CN 确认的文字
          * @en_US Confirmed text
          */
-        this.confirmText = input(this.config?.confirmText ?? '');
+        this.confirmText = input(this.config?.confirmText ?? '', ...(ngDevMode ? [{ debugName: "confirmText" }] : []));
         /**
          * @zh_CN 确认异步 Observable
          * @en_US Confirm async
          */
-        this.confirmAsync = input();
+        this.confirmAsync = input(...(ngDevMode ? [undefined, { debugName: "confirmAsync" }] : []));
         /**
          * @zh_CN 条件触发
          * @en_US condition trigger
          */
-        this.condition = input(false, { transform: XToBoolean });
+        this.condition = input(false, ...(ngDevMode ? [{ debugName: "condition", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 取消的点击事件
          * @en_US Cancelled click event
@@ -99,10 +99,10 @@ class XPopconfirmProperty extends XPropertyFunction(X_POPCONFIRM_CONFIG_NAME) {
          */
         this.confirm = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: XPopconfirmProperty, isStandalone: true, selector: "x-popconfirm-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, confirmAsync: { classPropertyName: "confirmAsync", publicName: "confirmAsync", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: XPopconfirmProperty, isStandalone: true, selector: "x-popconfirm-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, confirmAsync: { classPropertyName: "confirmAsync", publicName: "confirmAsync", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPopconfirmPrefix}-property`, template: '' }]
         }] });
@@ -111,14 +111,14 @@ class XPopconfirmComponent extends XPopconfirmProperty {
     constructor() {
         super(...arguments);
         this.i18n = inject(XI18nService);
-        this.visible = signal(false);
-        this.loading = signal(false);
+        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.asyncUnSub = new Subject();
         this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.popconfirm)), {
             initialValue: zh_CN.popconfirm
         });
-        this.cancelTextSignal = computed(() => this.cancelText() || this.locale().cancelText);
-        this.confirmTextSignal = computed(() => this.confirmText() || this.locale().confirmText);
+        this.cancelTextSignal = computed(() => this.cancelText() || this.locale().cancelText, ...(ngDevMode ? [{ debugName: "cancelTextSignal" }] : []));
+        this.confirmTextSignal = computed(() => this.confirmText() || this.locale().confirmText, ...(ngDevMode ? [{ debugName: "confirmTextSignal" }] : []));
     }
     ngOnDestroy() {
         this.asyncUnSub.next();
@@ -147,20 +147,20 @@ class XPopconfirmComponent extends XPopconfirmProperty {
     onClick(event) {
         this.condition() && this.onConfirm(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: XPopconfirmComponent, isStandalone: true, selector: "x-popconfirm", usesInheritance: true, ngImport: i0, template: "<div\r\n  #popconfirm\r\n  class=\"x-popconfirm\"\r\n  x-popover\r\n  [title]=\"titleTpl\"\r\n  [content]=\"content()\"\r\n  [footer]=\"footerTpl\"\r\n  [placement]=\"placement()\"\r\n  [trigger]=\"trigger()\"\r\n  [width]=\"width()\"\r\n  [maxWidth]=\"maxWidth()\"\r\n  [minWidth]=\"minWidth()\"\r\n  [condition]=\"condition()\"\r\n  [(visible)]=\"visible\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #titleTpl>\r\n  <div class=\"x-popconfirm-title\">\r\n    <ng-container *xOutlet=\"title()\">\r\n      @if (icon()) {\r\n        <x-icon [style.color]=\"iconColor()\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span>{{ title() }}</span>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTpl>\r\n  <div class=\"x-popconfirm-buttons\">\r\n    <x-button class=\"x-popconfirm-cancel\" (click)=\"onCancel($event)\" flat plain>{{ cancelTextSignal() }}</x-button>\r\n    <x-button class=\"x-popconfirm-confirm\" type=\"primary\" flat (click)=\"onConfirm($event)\" [loading]=\"loading()\">{{\r\n      confirmTextSignal()\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-popconfirm{margin:0;padding:0}.x-popconfirm{display:inline-block}.x-popconfirm-buttons{display:flex;justify-content:flex-end}.x-popconfirm-buttons>x-button:not(:first-child){margin-left:.5rem}.x-popconfirm-title{display:flex;align-items:center}.x-popconfirm-title>.x-icon{margin-right:.325rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: XPopoverDirective, selector: "[x-popover], x-popover" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: XPopconfirmComponent, isStandalone: true, selector: "x-popconfirm", usesInheritance: true, ngImport: i0, template: "<div\r\n  #popconfirm\r\n  class=\"x-popconfirm\"\r\n  x-popover\r\n  [title]=\"titleTpl\"\r\n  [content]=\"content()\"\r\n  [footer]=\"footerTpl\"\r\n  [placement]=\"placement()\"\r\n  [trigger]=\"trigger()\"\r\n  [width]=\"width()\"\r\n  [maxWidth]=\"maxWidth()\"\r\n  [minWidth]=\"minWidth()\"\r\n  [condition]=\"condition()\"\r\n  [(visible)]=\"visible\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #titleTpl>\r\n  <div class=\"x-popconfirm-title\">\r\n    <ng-container *xOutlet=\"title()\">\r\n      @if (icon()) {\r\n        <x-icon [style.color]=\"iconColor()\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span>{{ title() }}</span>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTpl>\r\n  <div class=\"x-popconfirm-buttons\">\r\n    <x-button class=\"x-popconfirm-cancel\" (click)=\"onCancel($event)\" flat plain>{{ cancelTextSignal() }}</x-button>\r\n    <x-button class=\"x-popconfirm-confirm\" type=\"primary\" flat (click)=\"onConfirm($event)\" [loading]=\"loading()\">{{\r\n      confirmTextSignal()\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-popconfirm{margin:0;padding:0}.x-popconfirm{display:inline-block}.x-popconfirm-buttons{display:flex;justify-content:flex-end}.x-popconfirm-buttons>x-button:not(:first-child){margin-left:.5rem}.x-popconfirm-title{display:flex;align-items:center}.x-popconfirm-title>.x-icon{margin-right:.325rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: XPopoverDirective, selector: "[x-popover], x-popover" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XPopconfirmPrefix}`, imports: [XPopoverDirective, XButtonComponent, XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #popconfirm\r\n  class=\"x-popconfirm\"\r\n  x-popover\r\n  [title]=\"titleTpl\"\r\n  [content]=\"content()\"\r\n  [footer]=\"footerTpl\"\r\n  [placement]=\"placement()\"\r\n  [trigger]=\"trigger()\"\r\n  [width]=\"width()\"\r\n  [maxWidth]=\"maxWidth()\"\r\n  [minWidth]=\"minWidth()\"\r\n  [condition]=\"condition()\"\r\n  [(visible)]=\"visible\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #titleTpl>\r\n  <div class=\"x-popconfirm-title\">\r\n    <ng-container *xOutlet=\"title()\">\r\n      @if (icon()) {\r\n        <x-icon [style.color]=\"iconColor()\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span>{{ title() }}</span>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTpl>\r\n  <div class=\"x-popconfirm-buttons\">\r\n    <x-button class=\"x-popconfirm-cancel\" (click)=\"onCancel($event)\" flat plain>{{ cancelTextSignal() }}</x-button>\r\n    <x-button class=\"x-popconfirm-confirm\" type=\"primary\" flat (click)=\"onConfirm($event)\" [loading]=\"loading()\">{{\r\n      confirmTextSignal()\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-popconfirm{margin:0;padding:0}.x-popconfirm{display:inline-block}.x-popconfirm-buttons{display:flex;justify-content:flex-end}.x-popconfirm-buttons>x-button:not(:first-child){margin-left:.5rem}.x-popconfirm-title{display:flex;align-items:center}.x-popconfirm-title>.x-icon{margin-right:.325rem;font-size:1rem}\n"] }]
         }] });
 
 class XPopconfirmModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmModule, imports: [XPopconfirmComponent], exports: [XPopconfirmComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmModule, imports: [XPopconfirmComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmModule, imports: [XPopconfirmComponent], exports: [XPopconfirmComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmModule, imports: [XPopconfirmComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopconfirmModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopconfirmModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XPopconfirmComponent],

package/fesm2022/ng-nest-ui-popconfirm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-popconfirm.mjs","sources":["../../../../lib/ng-nest/ui/popconfirm/popconfirm.property.ts","../../../../lib/ng-nest/ui/popconfirm/popconfirm.component.ts","../../../../lib/ng-nest/ui/popconfirm/popconfirm.component.html","../../../../lib/ng-nest/ui/popconfirm/popconfirm.module.ts","../../../../lib/ng-nest/ui/popconfirm/ng-nest-ui-popconfirm.ts"],"sourcesContent":["import { XPropertyFunction, XToCssPixelValue, XToBoolean } from '@ng-nest/ui/core';\r\nimport { Component, input, output } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport type { XPopoverTrigger } from '@ng-nest/ui/popover';\r\nimport type { XPlacement, XTemplate, XBoolean, XNumber } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Popconfirm\r\n * @selector x-popconfirm\r\n * @decorator component\r\n */\r\nexport const XPopconfirmPrefix = 'x-popconfirm';\r\nconst X_POPCONFIRM_CONFIG_NAME = 'popconfirm';\r\n\r\n/**\r\n * Popconfirm Property\r\n */\r\n@Component({ selector: `${XPopconfirmPrefix}-property`, template: '' })\r\nexport class XPopconfirmProperty extends XPropertyFunction(X_POPCONFIRM_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 标题，支持自定义模板\r\n   * @en_US Title, support custom template\r\n   */\r\n  readonly title = input<XTemplate>('');\r\n  /**\r\n   * @zh_CN 内容，支持自定义模板\r\n   * @en_US Content, support custom templates\r\n   */\r\n  readonly content = input<XTemplate>('');\r\n  /**\r\n   * @zh_CN 弹出的位置\r\n   * @en_US Pop-up position\r\n   */\r\n  readonly placement = input<XPlacement>(this.config?.placement ?? 'bottom');\r\n  /**\r\n   * @zh_CN 激活方式\r\n   * @en_US Activation method\r\n   */\r\n  readonly trigger = input<XPopoverTrigger>(this.config?.trigger ?? 'click');\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US width\r\n   */\r\n  readonly width = input<string, XNumber>(this.config?.width ?? '', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 最大宽度\r\n   * @en_US Max width\r\n   */\r\n  readonly maxWidth = input<string, XNumber>(this.config?.maxWidth ?? '15rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 最小宽度\r\n   * @en_US Min width\r\n   */\r\n  readonly minWidth = input<string, XNumber>(this.config?.minWidth ?? '15rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  readonly icon = input<string>(this.config?.icon ?? 'fto-help-circle');\r\n  /**\r\n   * @zh_CN 图标颜色\r\n   * @en_US Icon color\r\n   */\r\n  readonly iconColor = input<string>(this.config?.iconColor ?? '#e6a23c');\r\n  /**\r\n   * @zh_CN 取消的文字\r\n   * @en_US Canceled text\r\n   */\r\n  readonly cancelText = input<string>(this.config?.cancelText ?? '');\r\n  /**\r\n   * @zh_CN 确认的文字\r\n   * @en_US Confirmed text\r\n   */\r\n  readonly confirmText = input<string>(this.config?.confirmText ?? '');\r\n  /**\r\n   * @zh_CN 确认异步 Observable\r\n   * @en_US Confirm async\r\n   */\r\n  readonly confirmAsync = input<Observable<void>>();\r\n  /**\r\n   * @zh_CN 条件触发\r\n   * @en_US condition trigger\r\n   */\r\n  readonly condition = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 取消的点击事件\r\n   * @en_US Cancelled click event\r\n   */\r\n  readonly cancel = output<Event>();\r\n  /**\r\n   * @zh_CN 确认的点击事件\r\n   * @en_US Confirmed click event\r\n   */\r\n  readonly confirm = output<Event>();\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  OnDestroy,\r\n  inject,\r\n  computed,\r\n  signal\r\n} from '@angular/core';\r\nimport { XPopconfirmProperty, XPopconfirmPrefix } from './popconfirm.property';\r\nimport { Subject } from 'rxjs';\r\nimport { XI18nService, XI18nPopconfirm, zh_CN } from '@ng-nest/ui/i18n';\r\nimport { map, takeUntil } from 'rxjs/operators';\r\nimport { XPopoverDirective } from '@ng-nest/ui/popover';\r\nimport { XButtonComponent } from '@ng-nest/ui/button';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\n\r\n@Component({\r\n  selector: `${XPopconfirmPrefix}`,\r\n  imports: [XPopoverDirective, XButtonComponent, XIconComponent, XOutletDirective],\r\n  templateUrl: './popconfirm.component.html',\r\n  styleUrls: ['./popconfirm.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XPopconfirmComponent extends XPopconfirmProperty implements OnDestroy {\r\n  private i18n = inject(XI18nService);\r\n  visible = signal(false);\r\n  loading = signal(false);\r\n\r\n  private asyncUnSub = new Subject<void>();\r\n\r\n  locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.popconfirm as XI18nPopconfirm)), {\r\n    initialValue: zh_CN.popconfirm\r\n  });\r\n\r\n  cancelTextSignal = computed(() => this.cancelText() || this.locale().cancelText);\r\n  confirmTextSignal = computed(() => this.confirmText() || this.locale().confirmText);\r\n\r\n  ngOnDestroy(): void {\r\n    this.asyncUnSub.next();\r\n    this.asyncUnSub.complete();\r\n  }\r\n\r\n  onCancel(event: Event) {\r\n    this.visible.set(false);\r\n    this.cancel.emit(event);\r\n  }\r\n\r\n  onConfirm(event: Event) {\r\n    const confirmAsync = this.confirmAsync();\r\n    if (confirmAsync) {\r\n      this.loading.set(true);\r\n      confirmAsync.pipe(takeUntil(this.asyncUnSub)).subscribe(() => {\r\n        this.loading.set(false);\r\n        this.visible.set(false);\r\n        this.confirm.emit(event);\r\n        this.asyncUnSub.next();\r\n      });\r\n    } else {\r\n      this.visible.set(false);\r\n      this.confirm.emit(event);\r\n    }\r\n  }\r\n\r\n  onClick(event: Event) {\r\n    this.condition() && this.onConfirm(event);\r\n  }\r\n}\r\n","<div\r\n  #popconfirm\r\n  class=\"x-popconfirm\"\r\n  x-popover\r\n  [title]=\"titleTpl\"\r\n  [content]=\"content()\"\r\n  [footer]=\"footerTpl\"\r\n  [placement]=\"placement()\"\r\n  [trigger]=\"trigger()\"\r\n  [width]=\"width()\"\r\n  [maxWidth]=\"maxWidth()\"\r\n  [minWidth]=\"minWidth()\"\r\n  [condition]=\"condition()\"\r\n  [(visible)]=\"visible\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #titleTpl>\r\n  <div class=\"x-popconfirm-title\">\r\n    <ng-container *xOutlet=\"title()\">\r\n      @if (icon()) {\r\n        <x-icon [style.color]=\"iconColor()\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span>{{ title() }}</span>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTpl>\r\n  <div class=\"x-popconfirm-buttons\">\r\n    <x-button class=\"x-popconfirm-cancel\" (click)=\"onCancel($event)\" flat plain>{{ cancelTextSignal() }}</x-button>\r\n    <x-button class=\"x-popconfirm-confirm\" type=\"primary\" flat (click)=\"onConfirm($event)\" [loading]=\"loading()\">{{\r\n      confirmTextSignal()\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XPopconfirmComponent } from './popconfirm.component';\r\n\r\n@NgModule({\r\n  exports: [XPopconfirmComponent],\r\n  imports: [XPopconfirmComponent]\r\n})\r\nexport class XPopconfirmModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-popconfirm.mjs","sources":["../../../../lib/ng-nest/ui/popconfirm/popconfirm.property.ts","../../../../lib/ng-nest/ui/popconfirm/popconfirm.component.ts","../../../../lib/ng-nest/ui/popconfirm/popconfirm.component.html","../../../../lib/ng-nest/ui/popconfirm/popconfirm.module.ts","../../../../lib/ng-nest/ui/popconfirm/ng-nest-ui-popconfirm.ts"],"sourcesContent":["import { XPropertyFunction, XToCssPixelValue, XToBoolean } from '@ng-nest/ui/core';\r\nimport { Component, input, output } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport type { XPopoverTrigger } from '@ng-nest/ui/popover';\r\nimport type { XPlacement, XTemplate, XBoolean, XNumber } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Popconfirm\r\n * @selector x-popconfirm\r\n * @decorator component\r\n */\r\nexport const XPopconfirmPrefix = 'x-popconfirm';\r\nconst X_POPCONFIRM_CONFIG_NAME = 'popconfirm';\r\n\r\n/**\r\n * Popconfirm Property\r\n */\r\n@Component({ selector: `${XPopconfirmPrefix}-property`, template: '' })\r\nexport class XPopconfirmProperty extends XPropertyFunction(X_POPCONFIRM_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 标题，支持自定义模板\r\n   * @en_US Title, support custom template\r\n   */\r\n  readonly title = input<XTemplate>('');\r\n  /**\r\n   * @zh_CN 内容，支持自定义模板\r\n   * @en_US Content, support custom templates\r\n   */\r\n  readonly content = input<XTemplate>('');\r\n  /**\r\n   * @zh_CN 弹出的位置\r\n   * @en_US Pop-up position\r\n   */\r\n  readonly placement = input<XPlacement>(this.config?.placement ?? 'bottom');\r\n  /**\r\n   * @zh_CN 激活方式\r\n   * @en_US Activation method\r\n   */\r\n  readonly trigger = input<XPopoverTrigger>(this.config?.trigger ?? 'click');\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US width\r\n   */\r\n  readonly width = input<string, XNumber>(this.config?.width ?? '', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 最大宽度\r\n   * @en_US Max width\r\n   */\r\n  readonly maxWidth = input<string, XNumber>(this.config?.maxWidth ?? '15rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 最小宽度\r\n   * @en_US Min width\r\n   */\r\n  readonly minWidth = input<string, XNumber>(this.config?.minWidth ?? '15rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  readonly icon = input<string>(this.config?.icon ?? 'fto-help-circle');\r\n  /**\r\n   * @zh_CN 图标颜色\r\n   * @en_US Icon color\r\n   */\r\n  readonly iconColor = input<string>(this.config?.iconColor ?? '#e6a23c');\r\n  /**\r\n   * @zh_CN 取消的文字\r\n   * @en_US Canceled text\r\n   */\r\n  readonly cancelText = input<string>(this.config?.cancelText ?? '');\r\n  /**\r\n   * @zh_CN 确认的文字\r\n   * @en_US Confirmed text\r\n   */\r\n  readonly confirmText = input<string>(this.config?.confirmText ?? '');\r\n  /**\r\n   * @zh_CN 确认异步 Observable\r\n   * @en_US Confirm async\r\n   */\r\n  readonly confirmAsync = input<Observable<void>>();\r\n  /**\r\n   * @zh_CN 条件触发\r\n   * @en_US condition trigger\r\n   */\r\n  readonly condition = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 取消的点击事件\r\n   * @en_US Cancelled click event\r\n   */\r\n  readonly cancel = output<Event>();\r\n  /**\r\n   * @zh_CN 确认的点击事件\r\n   * @en_US Confirmed click event\r\n   */\r\n  readonly confirm = output<Event>();\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  OnDestroy,\r\n  inject,\r\n  computed,\r\n  signal\r\n} from '@angular/core';\r\nimport { XPopconfirmProperty, XPopconfirmPrefix } from './popconfirm.property';\r\nimport { Subject } from 'rxjs';\r\nimport { XI18nService, XI18nPopconfirm, zh_CN } from '@ng-nest/ui/i18n';\r\nimport { map, takeUntil } from 'rxjs/operators';\r\nimport { XPopoverDirective } from '@ng-nest/ui/popover';\r\nimport { XButtonComponent } from '@ng-nest/ui/button';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\n\r\n@Component({\r\n  selector: `${XPopconfirmPrefix}`,\r\n  imports: [XPopoverDirective, XButtonComponent, XIconComponent, XOutletDirective],\r\n  templateUrl: './popconfirm.component.html',\r\n  styleUrls: ['./popconfirm.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XPopconfirmComponent extends XPopconfirmProperty implements OnDestroy {\r\n  private i18n = inject(XI18nService);\r\n  visible = signal(false);\r\n  loading = signal(false);\r\n\r\n  private asyncUnSub = new Subject<void>();\r\n\r\n  locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.popconfirm as XI18nPopconfirm)), {\r\n    initialValue: zh_CN.popconfirm\r\n  });\r\n\r\n  cancelTextSignal = computed(() => this.cancelText() || this.locale().cancelText);\r\n  confirmTextSignal = computed(() => this.confirmText() || this.locale().confirmText);\r\n\r\n  ngOnDestroy(): void {\r\n    this.asyncUnSub.next();\r\n    this.asyncUnSub.complete();\r\n  }\r\n\r\n  onCancel(event: Event) {\r\n    this.visible.set(false);\r\n    this.cancel.emit(event);\r\n  }\r\n\r\n  onConfirm(event: Event) {\r\n    const confirmAsync = this.confirmAsync();\r\n    if (confirmAsync) {\r\n      this.loading.set(true);\r\n      confirmAsync.pipe(takeUntil(this.asyncUnSub)).subscribe(() => {\r\n        this.loading.set(false);\r\n        this.visible.set(false);\r\n        this.confirm.emit(event);\r\n        this.asyncUnSub.next();\r\n      });\r\n    } else {\r\n      this.visible.set(false);\r\n      this.confirm.emit(event);\r\n    }\r\n  }\r\n\r\n  onClick(event: Event) {\r\n    this.condition() && this.onConfirm(event);\r\n  }\r\n}\r\n","<div\r\n  #popconfirm\r\n  class=\"x-popconfirm\"\r\n  x-popover\r\n  [title]=\"titleTpl\"\r\n  [content]=\"content()\"\r\n  [footer]=\"footerTpl\"\r\n  [placement]=\"placement()\"\r\n  [trigger]=\"trigger()\"\r\n  [width]=\"width()\"\r\n  [maxWidth]=\"maxWidth()\"\r\n  [minWidth]=\"minWidth()\"\r\n  [condition]=\"condition()\"\r\n  [(visible)]=\"visible\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #titleTpl>\r\n  <div class=\"x-popconfirm-title\">\r\n    <ng-container *xOutlet=\"title()\">\r\n      @if (icon()) {\r\n        <x-icon [style.color]=\"iconColor()\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span>{{ title() }}</span>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTpl>\r\n  <div class=\"x-popconfirm-buttons\">\r\n    <x-button class=\"x-popconfirm-cancel\" (click)=\"onCancel($event)\" flat plain>{{ cancelTextSignal() }}</x-button>\r\n    <x-button class=\"x-popconfirm-confirm\" type=\"primary\" flat (click)=\"onConfirm($event)\" [loading]=\"loading()\">{{\r\n      confirmTextSignal()\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XPopconfirmComponent } from './popconfirm.component';\r\n\r\n@NgModule({\r\n  exports: [XPopconfirmComponent],\r\n  imports: [XPopconfirmComponent]\r\n})\r\nexport class XPopconfirmModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -25,77 +25,77 @@ class XPopoverProperty extends XPropertyFunction(X_POPOVER_CONFIG_NAME) {
          * @zh_CN 标题，支持自定义模板
          * @en_US Title, support custom template
          */
-        this.title = input('');
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
         /**
          * @zh_CN 内容，支持自定义模板
          * @en_US Content, support custom templates
          */
-        this.content = input('');
+        this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
         /**
          * @zh_CN 底部，支持自定义模板
          * @en_US At the bottom, support custom templates
          */
-        this.footer = input('');
+        this.footer = input('', ...(ngDevMode ? [{ debugName: "footer" }] : []));
         /**
          * @zh_CN 内部样式
          * @en_US panel class
          */
-        this.panelClass = input('');
+        this.panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
         /**
          * @zh_CN 指定参考对象
          * @en_US specify reference object
          */
-        this.connectTo = input();
+        this.connectTo = input(...(ngDevMode ? [undefined, { debugName: "connectTo" }] : []));
         /**
          * @zh_CN 弹出的位置
          * @en_US Pop-up position
          */
-        this.placement = input(this.config?.placement ?? 'top');
+        this.placement = input(this.config?.placement ?? 'top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
         /**
          * @zh_CN 激活方式
          * @en_US Activation method
          */
-        this.trigger = input(this.config?.trigger ?? 'hover');
+        this.trigger = input(this.config?.trigger ?? 'hover', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
         /**
          * @zh_CN 宽度
          * @en_US width
          */
-        this.width = input(this.config?.width ?? '', { transform: XToCssPixelValue });
+        this.width = input(this.config?.width ?? '', ...(ngDevMode ? [{ debugName: "width", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 最大宽度
          * @en_US Max width
          */
-        this.maxWidth = input(this.config?.maxWidth ?? '10rem', { transform: XToCssPixelValue });
+        this.maxWidth = input(this.config?.maxWidth ?? '10rem', ...(ngDevMode ? [{ debugName: "maxWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 最小宽度
          * @en_US Min width
          */
-        this.minWidth = input(this.config?.minWidth ?? '10rem', { transform: XToCssPixelValue });
+        this.minWidth = input(this.config?.minWidth ?? '10rem', ...(ngDevMode ? [{ debugName: "minWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 显示/隐藏控制
          * @en_US Show/hide control
          */
-        this.visible = model(false);
+        this.visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
         /**
          * @zh_CN 条件触发
          * @en_US condition trigger
          */
-        this.condition = input(false, { transform: XToBoolean });
+        this.condition = input(false, ...(ngDevMode ? [{ debugName: "condition", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 鼠标移入后延时多少才显示
          * @en_US How much is the mouse transfer after transfer
          */
-        this.mouseEnterDelay = input(150, { transform: XToNumber });
+        this.mouseEnterDelay = input(150, ...(ngDevMode ? [{ debugName: "mouseEnterDelay", transform: XToNumber }] : [{ transform: XToNumber }]));
         /**
          * @zh_CN 鼠标移出后延时多少才隐藏
          * @en_US How much hidden is hidden after the mouse is removed
          */
-        this.mouseLeaveDelay = input(100, { transform: XToNumber });
+        this.mouseLeaveDelay = input(100, ...(ngDevMode ? [{ debugName: "mouseLeaveDelay", transform: XToNumber }] : [{ transform: XToNumber }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: XPopoverProperty, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: XPopoverProperty, isStandalone: true, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverProperty, decorators: [{
             type: Directive,
             args: [{ selector: `[${XPopoverPrefix}], ${XPopoverPrefix}` }]
         }] });
@@ -108,19 +108,19 @@ const XPopoverPortalPrefix = 'x-popover-portal';
 
 class XPopoverPortalComponent {
     constructor() {
-        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.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        this.footer = input(...(ngDevMode ? [undefined, { debugName: "footer" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.minWidth = input(...(ngDevMode ? [undefined, { debugName: "minWidth" }] : []));
+        this.maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : []));
+        this.trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
         this.portalHover = output();
         this.animation = true;
         this.classMap = computed(() => ({
             [`${XPopoverPortalPrefix}-${this.placement()}`]: !XIsEmpty(this.placement())
-        }));
+        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
     }
     mouseenter() {
         if (this.trigger() === 'hover') {
@@ -135,10 +135,10 @@ class XPopoverPortalComponent {
     stopPropagation(event) {
         event.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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}.x-popover-portal{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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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}.x-popover-portal{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: "20.0.0", ngImport: i0, type: XPopoverPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XPopoverPortalPrefix}`, 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}.x-popover-portal{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: [{
@@ -194,12 +194,12 @@ class XPopoverDirective extends XPopoverProperty {
     constructor() {
         super();
         this.unSubject = new Subject();
-        this.realPlacement = signal(null);
+        this.realPlacement = signal(null, ...(ngDevMode ? [{ debugName: "realPlacement" }] : []));
         this.elementRef = inject(ElementRef);
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.overlay = inject(Overlay);
-        this.portalComponent = signal(null);
+        this.portalComponent = signal(null, ...(ngDevMode ? [{ debugName: "portalComponent" }] : []));
         effect(() => this.portalComponent()?.setInput('title', this.title()));
         effect(() => this.portalComponent()?.setInput('content', this.content()));
         effect(() => this.portalComponent()?.setInput('footer', this.footer()));
@@ -303,10 +303,10 @@ class XPopoverDirective extends XPopoverProperty {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.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: "20.2.4", ngImport: i0, type: XPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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: "20.0.0", ngImport: i0, type: XPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverDirective, decorators: [{
             type: Directive,
             args: [{ selector: `[${XPopoverPrefix}], ${XPopoverPrefix}` }]
         }], ctorParameters: () => [], propDecorators: { _show: [{
@@ -330,11 +330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class XPopoverModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XPopoverModule, imports: [XPopoverDirective], exports: [XPopoverDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XPopoverModule, imports: [XPopoverDirective], exports: [XPopoverDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XPopoverDirective],