@ng-nest/ui 19.0.9 → 20.0.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, Directive, output, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, signal, inject, ElementRef, ViewContainerRef, effect, NgModule } from '@angular/core';
+import { input, model, Directive, output, computed, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, inject, ElementRef, ViewContainerRef, effect, NgModule } from '@angular/core';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
 import { XPropertyFunction, XToCssPixelValue, XToBoolean, XToNumber, XIsEmpty, XFadeAnimation, XIsChange } from '@ng-nest/ui/core';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
@@ -92,10 +92,10 @@ class XPopoverProperty extends XPropertyFunction(X_POPOVER_CONFIG_NAME) {
          */
         this.mouseLeaveDelay = input(100, { transform: XToNumber });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverProperty, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.1", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverProperty, decorators: [{
             type: Directive,
             args: [{ selector: `[${XPopoverPrefix}], ${XPopoverPrefix}` }]
         }] });
@@ -135,10 +135,10 @@ class XPopoverPortalComponent {
     stopPropagation(event) {
         event.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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}.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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", 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: [{
@@ -303,10 +303,10 @@ class XPopoverDirective extends XPopoverProperty {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.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 }); }
+    /** @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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", 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: "19.0.1", ngImpor
             }] } });
 
 class XPopoverModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: XPopoverModule, imports: [XPopoverDirective], exports: [XPopoverDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XPopoverDirective],

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

@@ -5,11 +5,11 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 
 class XPortalModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: XPortalModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XPortalModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -61,7 +61,7 @@ class XPortalService {
             portal.embeddedViewRef = portal.overlayRef.attach(portal.templatePortal);
         }
         else {
-            portal.componentPortal = new ComponentPortal(option.content, option.viewContainerRef, option.injector, option.componentFactoryResolver);
+            portal.componentPortal = new ComponentPortal(option.content, option.viewContainerRef, option.injector);
             portal.componentRef = portal.overlayRef.attach(portal.componentPortal);
         }
         return portal;
@@ -217,10 +217,10 @@ class XPortalService {
         placement.forEach((place) => result.push(XPortalPlacement[place]));
         return result;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XPortalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XPortalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-portal.mjs","sources":["../../../../lib/ng-nest/ui/portal/portal.module.ts","../../../../lib/ng-nest/ui/portal/portal.property.ts","../../../../lib/ng-nest/ui/portal/portal.service.ts","../../../../lib/ng-nest/ui/portal/ng-nest-ui-portal.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\n\r\n@NgModule({\r\n  imports: [],\r\n  exports: [],\r\n  providers: []\r\n})\r\nexport class XPortalModule {}\r\n","import { TemplateRef, ViewContainerRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef } from '@angular/core';\r\nimport { ComponentType, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\r\nimport { OverlayRef, OverlayConfig, ConnectedPosition } from '@angular/cdk/overlay';\r\nimport { XInvertKeyValues } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Portal\r\n * @selector x-portal\r\n * @decorator component\r\n */\r\nexport const XPortalPrefix = 'x-portal';\r\nexport const XPortalResizablePrefix = 'x-portal-resizable';\r\n\r\nexport const XPortalPlacement: { [proptery: string]: ConnectedPosition } = {\r\n  bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },\r\n  left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },\r\n  right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },\r\n  top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },\r\n  'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\r\n  'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\r\n  'left-end': { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },\r\n  'left-start': { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },\r\n  'right-end': { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },\r\n  'right-start': { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },\r\n  'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\r\n  'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\r\n};\r\n\r\nexport const XPortalConnectedPosition: Map<ConnectedPosition, string> = XInvertKeyValues(XPortalPlacement);\r\n\r\n/**\r\n * Portal Property\r\n */\r\nexport interface XPortalProperty<T> {\r\n  /**\r\n   * @zh_CN 内容，模板/组件\r\n   * @en_US Content, template/component\r\n   */\r\n  content?: TemplateRef<any> | ComponentType<T>;\r\n  /**\r\n   * @zh_CN 视图容器\r\n   * @en_US View container\r\n   */\r\n  viewContainerRef?: ViewContainerRef;\r\n  /**\r\n   * @zh_CN 上下文\r\n   * @en_US Context\r\n   */\r\n  context?: any;\r\n  /**\r\n   * @zh_CN 注入器\r\n   * @en_US Injector\r\n   */\r\n  injector?: any;\r\n  /**\r\n   * @zh_CN 组件解析器\r\n   * @en_US Component parser\r\n   */\r\n  componentFactoryResolver?: ComponentFactoryResolver;\r\n  /**\r\n   * @zh_CN 覆盖视图层配置\r\n   * @en_US Overlay view layer configuration\r\n   */\r\n  overlayConfig?: OverlayConfig;\r\n}\r\n\r\nexport interface XPortalOverlayRef<T> {\r\n  /**\r\n   * @zh_CN cdk 创建的覆盖视图层\r\n   * @en_US Overlay view layer created by cdk\r\n   */\r\n  overlayRef?: OverlayRef;\r\n  /**\r\n   * @zh_CN cdk 模板视图\r\n   * @en_US Cdk template view\r\n   */\r\n  templatePortal?: TemplatePortal<any>;\r\n  /**\r\n   * @zh_CN cdk 组件视图\r\n   * @en_US Cdk component view\r\n   */\r\n  componentPortal?: ComponentPortal<T>;\r\n  /**\r\n   * @zh_CN 组件视图\r\n   * @en_US Component view\r\n   */\r\n  componentRef?: ComponentRef<T>;\r\n  /**\r\n   * @zh_CN 模板视图\r\n   * @en_US Template view\r\n   */\r\n  embeddedViewRef?: EmbeddedViewRef<any>;\r\n}\r\n","import {\r\n  Injectable,\r\n  TemplateRef,\r\n  Injector,\r\n  ElementRef,\r\n  ViewContainerRef,\r\n  StaticProvider,\r\n  RendererFactory2,\r\n  inject\r\n} from '@angular/core';\r\nimport { Overlay, OverlayRef, PositionStrategy, ConnectedPosition, ComponentType } from '@angular/cdk/overlay';\r\nimport { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\r\nimport { XPortalProperty, XPortalOverlayRef, XPortalPlacement } from './portal.property';\r\nimport { XPlacement, XPosition, XPlace, XComputed } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * 动态创建视图服务\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class XPortalService {\r\n  overlay = inject(Overlay);\r\n  injector = inject(Injector);\r\n  private rendererFactory = inject(RendererFactory2);\r\n  renderer = this.rendererFactory.createRenderer(null, null);\r\n\r\n  attach<T>(option: XPortalProperty<T>): XPortalOverlayRef<T> {\r\n    let portal: XPortalOverlayRef<T> = {};\r\n    if (typeof option.content === 'undefined') return portal;\r\n    portal.overlayRef = this.createOverlayRef(option);\r\n    if (option.content instanceof TemplateRef && option.viewContainerRef) {\r\n      portal.templatePortal = new TemplatePortal(option.content, option.viewContainerRef, option.context);\r\n      portal.embeddedViewRef = portal.overlayRef.attach(portal.templatePortal);\r\n    } else {\r\n      portal.componentPortal = new ComponentPortal(\r\n        option.content as ComponentType<T>,\r\n        option.viewContainerRef,\r\n        option.injector,\r\n        option.componentFactoryResolver\r\n      );\r\n      portal.componentRef = portal.overlayRef.attach(portal.componentPortal);\r\n    }\r\n\r\n    return portal;\r\n  }\r\n\r\n  createInjector(providers: StaticProvider[], viewContainerRef?: ViewContainerRef) {\r\n    const injector = viewContainerRef && viewContainerRef.injector;\r\n    return Injector.create({ parent: injector || this.injector, providers });\r\n  }\r\n\r\n  setPlacement(param?: {\r\n    elementRef?: ElementRef;\r\n    placement?: XPlace[] | XPlacement[];\r\n    transformOriginOn?: string;\r\n  }): PositionStrategy {\r\n    if (!param) {\r\n      return this.overlay.position().global().centerHorizontally().centerVertically();\r\n    } else {\r\n      return (\r\n        this.overlay\r\n          .position()\r\n          .flexibleConnectedTo(param.elementRef!)\r\n          // .withLockedPosition(true)\r\n          .withFlexibleDimensions(false)\r\n          .withPush(false)\r\n          .withPositions(this.setConnectedPosition(...param.placement!))\r\n          .withTransformOriginOn(param.transformOriginOn!)\r\n      );\r\n    }\r\n  }\r\n\r\n  setPosition(position?: XPosition, width?: string, height?: string): PositionStrategy {\r\n    let result = this.overlay.position().global().width(width).height(height);\r\n    switch (position) {\r\n      case 'left':\r\n        return result.left();\r\n      case 'right':\r\n        return result.right();\r\n      case 'top':\r\n        return result.top();\r\n      case 'bottom':\r\n      default:\r\n        return result.bottom();\r\n    }\r\n  }\r\n\r\n  setPlace(place?: XPlace, ...offset: string[]): PositionStrategy {\r\n    let result = this.overlay.position().global();\r\n    let [top, right, bottom, left] = this.getOffset(offset);\r\n    switch (place) {\r\n      case 'top-start':\r\n        return result.top(top).left(left);\r\n      case 'top':\r\n        return result.centerHorizontally().top(top);\r\n      case 'top-end':\r\n        return result.top(top).right(right);\r\n      case 'left':\r\n        return result.centerVertically().left(left);\r\n      case 'center':\r\n        return result.centerVertically().centerHorizontally();\r\n      case 'right':\r\n        return result.centerVertically().right(right);\r\n      case 'bottom-start':\r\n        return result.bottom(bottom).left(left);\r\n      case 'bottom':\r\n        return result.centerHorizontally().bottom(bottom);\r\n      case 'bottom-end':\r\n        return result.bottom(bottom).right(right);\r\n      default:\r\n        return result.centerVertically().centerHorizontally();\r\n    }\r\n  }\r\n\r\n  setResizable(ele: HTMLElement, place?: XPlace) {\r\n    const { clientWidth, clientHeight } = ele;\r\n    const computedStyle = XComputed(ele);\r\n    const marginRight = parseFloat(computedStyle.marginRight);\r\n    const marginBottom = parseFloat(computedStyle.marginBottom);\r\n    let marginLeft = null;\r\n    let marginTop = null;\r\n    switch (place) {\r\n      case 'top-start':\r\n        break;\r\n      case 'top':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        break;\r\n      case 'top-end':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        break;\r\n      case 'left':\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'center':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'right':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'bottom-start':\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      case 'bottom':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      case 'bottom-end':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      default:\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight / 2}px)`;\r\n        break;\r\n    }\r\n    marginLeft && this.renderer.setStyle(ele, 'margin-left', marginLeft);\r\n    marginTop && this.renderer.setStyle(ele, 'margin-top', marginTop);\r\n\r\n    return {\r\n      marginLeft: marginLeft || computedStyle.marginLeft,\r\n      marginTop: marginTop || computedStyle.marginTop,\r\n      marginBottom: computedStyle.marginBottom,\r\n      marginRight: computedStyle.marginRight\r\n    };\r\n  }\r\n\r\n  setContainerStyle(place?: XPlace, ...offset: string[]) {\r\n    let [top, right, bottom, left] = this.getOffset(offset);\r\n    switch (place) {\r\n      case 'top-start':\r\n        return { top, left };\r\n      case 'top':\r\n        return { top };\r\n      case 'top-end':\r\n        return { top, right };\r\n      case 'left':\r\n        return { left };\r\n      case 'center':\r\n        return {};\r\n      case 'right':\r\n        return { right };\r\n      case 'bottom-start':\r\n        return { bottom, left };\r\n      case 'bottom':\r\n        return { bottom };\r\n      case 'bottom-end':\r\n        return { bottom, right };\r\n    }\r\n    return {};\r\n  }\r\n\r\n  getOffset(offset: string[]) {\r\n    if (offset.length === 0) offset = Array.from({ length: 4 }).map(() => `0`);\r\n    else if (offset.length < 4) {\r\n      Array.from({ length: 4 - offset.length }).map(() => (offset = [...offset, offset[offset.length - 1]]));\r\n    }\r\n    return offset;\r\n  }\r\n\r\n  createOverlayRef<T>(option: XPortalProperty<T>): OverlayRef {\r\n    return this.overlay.create(option.overlayConfig);\r\n  }\r\n\r\n  setConnectedPosition(...placement: XPlace[] | XPlacement[]): ConnectedPosition[] {\r\n    let result: ConnectedPosition[] = [];\r\n    placement.forEach((place: XPlace | XPlacement) => result.push(XPortalPlacement[place]));\r\n    return result;\r\n  }\r\n}\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-portal.mjs","sources":["../../../../lib/ng-nest/ui/portal/portal.module.ts","../../../../lib/ng-nest/ui/portal/portal.property.ts","../../../../lib/ng-nest/ui/portal/portal.service.ts","../../../../lib/ng-nest/ui/portal/ng-nest-ui-portal.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\n\r\n@NgModule({\r\n  imports: [],\r\n  exports: [],\r\n  providers: []\r\n})\r\nexport class XPortalModule {}\r\n","import { TemplateRef, ViewContainerRef, ComponentRef, EmbeddedViewRef } from '@angular/core';\r\nimport { ComponentType, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\r\nimport { OverlayRef, OverlayConfig, ConnectedPosition } from '@angular/cdk/overlay';\r\nimport { XInvertKeyValues } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Portal\r\n * @selector x-portal\r\n * @decorator component\r\n */\r\nexport const XPortalPrefix = 'x-portal';\r\nexport const XPortalResizablePrefix = 'x-portal-resizable';\r\n\r\nexport const XPortalPlacement: { [proptery: string]: ConnectedPosition } = {\r\n  bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },\r\n  left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },\r\n  right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },\r\n  top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },\r\n  'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\r\n  'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\r\n  'left-end': { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },\r\n  'left-start': { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },\r\n  'right-end': { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },\r\n  'right-start': { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },\r\n  'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\r\n  'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\r\n};\r\n\r\nexport const XPortalConnectedPosition: Map<ConnectedPosition, string> = XInvertKeyValues(XPortalPlacement);\r\n\r\n/**\r\n * Portal Property\r\n */\r\nexport interface XPortalProperty<T> {\r\n  /**\r\n   * @zh_CN 内容，模板/组件\r\n   * @en_US Content, template/component\r\n   */\r\n  content?: TemplateRef<any> | ComponentType<T>;\r\n  /**\r\n   * @zh_CN 视图容器\r\n   * @en_US View container\r\n   */\r\n  viewContainerRef?: ViewContainerRef;\r\n  /**\r\n   * @zh_CN 上下文\r\n   * @en_US Context\r\n   */\r\n  context?: any;\r\n  /**\r\n   * @zh_CN 注入器\r\n   * @en_US Injector\r\n   */\r\n  injector?: any;\r\n  /**\r\n   * @zh_CN 覆盖视图层配置\r\n   * @en_US Overlay view layer configuration\r\n   */\r\n  overlayConfig?: OverlayConfig;\r\n}\r\n\r\nexport interface XPortalOverlayRef<T> {\r\n  /**\r\n   * @zh_CN cdk 创建的覆盖视图层\r\n   * @en_US Overlay view layer created by cdk\r\n   */\r\n  overlayRef?: OverlayRef;\r\n  /**\r\n   * @zh_CN cdk 模板视图\r\n   * @en_US Cdk template view\r\n   */\r\n  templatePortal?: TemplatePortal<any>;\r\n  /**\r\n   * @zh_CN cdk 组件视图\r\n   * @en_US Cdk component view\r\n   */\r\n  componentPortal?: ComponentPortal<T>;\r\n  /**\r\n   * @zh_CN 组件视图\r\n   * @en_US Component view\r\n   */\r\n  componentRef?: ComponentRef<T>;\r\n  /**\r\n   * @zh_CN 模板视图\r\n   * @en_US Template view\r\n   */\r\n  embeddedViewRef?: EmbeddedViewRef<any>;\r\n}\r\n","import {\r\n  Injectable,\r\n  TemplateRef,\r\n  Injector,\r\n  ElementRef,\r\n  ViewContainerRef,\r\n  StaticProvider,\r\n  RendererFactory2,\r\n  inject\r\n} from '@angular/core';\r\nimport { Overlay, OverlayRef, PositionStrategy, ConnectedPosition, ComponentType } from '@angular/cdk/overlay';\r\nimport { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\r\nimport { XPortalProperty, XPortalOverlayRef, XPortalPlacement } from './portal.property';\r\nimport { XPlacement, XPosition, XPlace, XComputed } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * 动态创建视图服务\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class XPortalService {\r\n  overlay = inject(Overlay);\r\n  injector = inject(Injector);\r\n  private rendererFactory = inject(RendererFactory2);\r\n  renderer = this.rendererFactory.createRenderer(null, null);\r\n\r\n  attach<T>(option: XPortalProperty<T>): XPortalOverlayRef<T> {\r\n    let portal: XPortalOverlayRef<T> = {};\r\n    if (typeof option.content === 'undefined') return portal;\r\n    portal.overlayRef = this.createOverlayRef(option);\r\n    if (option.content instanceof TemplateRef && option.viewContainerRef) {\r\n      portal.templatePortal = new TemplatePortal(option.content, option.viewContainerRef, option.context);\r\n      portal.embeddedViewRef = portal.overlayRef.attach(portal.templatePortal);\r\n    } else {\r\n      portal.componentPortal = new ComponentPortal(\r\n        option.content as ComponentType<T>,\r\n        option.viewContainerRef,\r\n        option.injector\r\n      );\r\n      portal.componentRef = portal.overlayRef.attach(portal.componentPortal);\r\n    }\r\n\r\n    return portal;\r\n  }\r\n\r\n  createInjector(providers: StaticProvider[], viewContainerRef?: ViewContainerRef) {\r\n    const injector = viewContainerRef && viewContainerRef.injector;\r\n    return Injector.create({ parent: injector || this.injector, providers });\r\n  }\r\n\r\n  setPlacement(param?: {\r\n    elementRef?: ElementRef;\r\n    placement?: XPlace[] | XPlacement[];\r\n    transformOriginOn?: string;\r\n  }): PositionStrategy {\r\n    if (!param) {\r\n      return this.overlay.position().global().centerHorizontally().centerVertically();\r\n    } else {\r\n      return (\r\n        this.overlay\r\n          .position()\r\n          .flexibleConnectedTo(param.elementRef!)\r\n          // .withLockedPosition(true)\r\n          .withFlexibleDimensions(false)\r\n          .withPush(false)\r\n          .withPositions(this.setConnectedPosition(...param.placement!))\r\n          .withTransformOriginOn(param.transformOriginOn!)\r\n      );\r\n    }\r\n  }\r\n\r\n  setPosition(position?: XPosition, width?: string, height?: string): PositionStrategy {\r\n    let result = this.overlay.position().global().width(width).height(height);\r\n    switch (position) {\r\n      case 'left':\r\n        return result.left();\r\n      case 'right':\r\n        return result.right();\r\n      case 'top':\r\n        return result.top();\r\n      case 'bottom':\r\n      default:\r\n        return result.bottom();\r\n    }\r\n  }\r\n\r\n  setPlace(place?: XPlace, ...offset: string[]): PositionStrategy {\r\n    let result = this.overlay.position().global();\r\n    let [top, right, bottom, left] = this.getOffset(offset);\r\n    switch (place) {\r\n      case 'top-start':\r\n        return result.top(top).left(left);\r\n      case 'top':\r\n        return result.centerHorizontally().top(top);\r\n      case 'top-end':\r\n        return result.top(top).right(right);\r\n      case 'left':\r\n        return result.centerVertically().left(left);\r\n      case 'center':\r\n        return result.centerVertically().centerHorizontally();\r\n      case 'right':\r\n        return result.centerVertically().right(right);\r\n      case 'bottom-start':\r\n        return result.bottom(bottom).left(left);\r\n      case 'bottom':\r\n        return result.centerHorizontally().bottom(bottom);\r\n      case 'bottom-end':\r\n        return result.bottom(bottom).right(right);\r\n      default:\r\n        return result.centerVertically().centerHorizontally();\r\n    }\r\n  }\r\n\r\n  setResizable(ele: HTMLElement, place?: XPlace) {\r\n    const { clientWidth, clientHeight } = ele;\r\n    const computedStyle = XComputed(ele);\r\n    const marginRight = parseFloat(computedStyle.marginRight);\r\n    const marginBottom = parseFloat(computedStyle.marginBottom);\r\n    let marginLeft = null;\r\n    let marginTop = null;\r\n    switch (place) {\r\n      case 'top-start':\r\n        break;\r\n      case 'top':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        break;\r\n      case 'top-end':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        break;\r\n      case 'left':\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'center':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'right':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        marginTop = `calc(50vh - ${clientHeight / 2}px)`;\r\n        break;\r\n      case 'bottom-start':\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      case 'bottom':\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      case 'bottom-end':\r\n        marginLeft = `calc(100vw - ${clientWidth + marginRight}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight + marginBottom}px)`;\r\n        break;\r\n      default:\r\n        marginLeft = `calc(50vw - ${clientWidth / 2}px)`;\r\n        marginTop = `calc(100vh - ${clientHeight / 2}px)`;\r\n        break;\r\n    }\r\n    marginLeft && this.renderer.setStyle(ele, 'margin-left', marginLeft);\r\n    marginTop && this.renderer.setStyle(ele, 'margin-top', marginTop);\r\n\r\n    return {\r\n      marginLeft: marginLeft || computedStyle.marginLeft,\r\n      marginTop: marginTop || computedStyle.marginTop,\r\n      marginBottom: computedStyle.marginBottom,\r\n      marginRight: computedStyle.marginRight\r\n    };\r\n  }\r\n\r\n  setContainerStyle(place?: XPlace, ...offset: string[]) {\r\n    let [top, right, bottom, left] = this.getOffset(offset);\r\n    switch (place) {\r\n      case 'top-start':\r\n        return { top, left };\r\n      case 'top':\r\n        return { top };\r\n      case 'top-end':\r\n        return { top, right };\r\n      case 'left':\r\n        return { left };\r\n      case 'center':\r\n        return {};\r\n      case 'right':\r\n        return { right };\r\n      case 'bottom-start':\r\n        return { bottom, left };\r\n      case 'bottom':\r\n        return { bottom };\r\n      case 'bottom-end':\r\n        return { bottom, right };\r\n    }\r\n    return {};\r\n  }\r\n\r\n  getOffset(offset: string[]) {\r\n    if (offset.length === 0) offset = Array.from({ length: 4 }).map(() => `0`);\r\n    else if (offset.length < 4) {\r\n      Array.from({ length: 4 - offset.length }).map(() => (offset = [...offset, offset[offset.length - 1]]));\r\n    }\r\n    return offset;\r\n  }\r\n\r\n  createOverlayRef<T>(option: XPortalProperty<T>): OverlayRef {\r\n    return this.overlay.create(option.overlayConfig);\r\n  }\r\n\r\n  setConnectedPosition(...placement: XPlace[] | XPlacement[]): ConnectedPosition[] {\r\n    let result: ConnectedPosition[] = [];\r\n    placement.forEach((place: XPlace | XPlacement) => result.push(XPortalPlacement[place]));\r\n    return result;\r\n  }\r\n}\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-progress.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Component, computed, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, Component, computed, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import { XPropertyFunction, XToNumber, XToCssPixelValue, XToBoolean, XIsNumber, XIsEmpty, XIsString, XIsObjectArray, XIsFunction } from '@ng-nest/ui/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -104,10 +104,10 @@ class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {
          */
         this.subsection = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XProgressProperty, isStandalone: true, selector: "x-progress-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, infoWidth: { classPropertyName: "infoWidth", publicName: "infoWidth", isSignal: true, isRequired: false, transformFunction: null }, inside: { classPropertyName: "inside", publicName: "inside", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, stepWidth: { classPropertyName: "stepWidth", publicName: "stepWidth", isSignal: true, isRequired: false, transformFunction: null }, stepFlex: { classPropertyName: "stepFlex", publicName: "stepFlex", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notchAngle: { classPropertyName: "notchAngle", publicName: "notchAngle", isSignal: true, isRequired: false, transformFunction: null }, subsection: { classPropertyName: "subsection", publicName: "subsection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: XProgressProperty, isStandalone: true, selector: "x-progress-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, infoWidth: { classPropertyName: "infoWidth", publicName: "infoWidth", isSignal: true, isRequired: false, transformFunction: null }, inside: { classPropertyName: "inside", publicName: "inside", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, stepWidth: { classPropertyName: "stepWidth", publicName: "stepWidth", isSignal: true, isRequired: false, transformFunction: null }, stepFlex: { classPropertyName: "stepFlex", publicName: "stepFlex", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notchAngle: { classPropertyName: "notchAngle", publicName: "notchAngle", isSignal: true, isRequired: false, transformFunction: null }, subsection: { classPropertyName: "subsection", publicName: "subsection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XProgressPrefix}-property`, template: '' }]
         }] });
@@ -321,20 +321,20 @@ class XProgressComponent extends XProgressProperty {
         }
         return '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n  @switch (type()) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray().length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray().length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info() && !inside()) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div\r\n      class=\"x-progress-ring-rail\"\r\n      [style.clip-path]=\"dashboardRailClipPath()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection()\"\r\n      [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent()\"\r\n        [style.background-color]=\"currentColor()\"\r\n        [style.background-image]=\"linearGradient()\"\r\n        [style.height]=\"height()\"\r\n        [style.line-height]=\"height()\"\r\n      >\r\n        @if (info() && inside()) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection()) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth()\"\r\n          [style.height]=\"height()\"\r\n          [style.line-height]=\"height()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray(); track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.width]=\"stepWidth()\"\r\n      [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n      [style.height]=\"height()\"\r\n      [style.line-height]=\"height()\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n    @switch (status()) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format()) {\r\n          {{ format()!(percent()) }}\r\n        } @else {\r\n          {{ percent() }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0}.x-progress{display:inline-flex;align-items:center;width:100%}.x-progress-track{flex:1;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n  @switch (type()) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray().length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray().length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info() && !inside()) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div\r\n      class=\"x-progress-ring-rail\"\r\n      [style.clip-path]=\"dashboardRailClipPath()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection()\"\r\n      [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent()\"\r\n        [style.background-color]=\"currentColor()\"\r\n        [style.background-image]=\"linearGradient()\"\r\n        [style.height]=\"height()\"\r\n        [style.line-height]=\"height()\"\r\n      >\r\n        @if (info() && inside()) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection()) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth()\"\r\n          [style.height]=\"height()\"\r\n          [style.line-height]=\"height()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray(); track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.width]=\"stepWidth()\"\r\n      [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n      [style.height]=\"height()\"\r\n      [style.line-height]=\"height()\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n    @switch (status()) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format()) {\r\n          {{ format()!(percent()) }}\r\n        } @else {\r\n          {{ percent() }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0}.x-progress{display:inline-flex;align-items:center;width:100%}.x-progress-track{flex:1;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XProgressPrefix}`, imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n  @switch (type()) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray().length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray().length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info() && !inside()) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div\r\n      class=\"x-progress-ring-rail\"\r\n      [style.clip-path]=\"dashboardRailClipPath()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection()\"\r\n      [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent()\"\r\n        [style.background-color]=\"currentColor()\"\r\n        [style.background-image]=\"linearGradient()\"\r\n        [style.height]=\"height()\"\r\n        [style.line-height]=\"height()\"\r\n      >\r\n        @if (info() && inside()) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection()) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth()\"\r\n          [style.height]=\"height()\"\r\n          [style.line-height]=\"height()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray(); track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.width]=\"stepWidth()\"\r\n      [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n      [style.height]=\"height()\"\r\n      [style.line-height]=\"height()\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n    @switch (status()) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format()) {\r\n          {{ format()!(percent()) }}\r\n        } @else {\r\n          {{ percent() }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0}.x-progress{display:inline-flex;align-items:center;width:100%}.x-progress-track{flex:1;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"] }]
         }] });
 
 class XProgressModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: XProgressModule, imports: [XProgressComponent], exports: [XProgressComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressModule, imports: [XProgressComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XProgressModule, imports: [XProgressComponent], exports: [XProgressComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressModule, imports: [XProgressComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XProgressComponent],

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Component, viewChild, ElementRef, signal, computed, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, Component, viewChild, ElementRef, signal, computed, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import { XToBoolean, XToCssPixelValue, XIsChange, XSetData } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { Subject } from 'rxjs';
@@ -118,10 +118,10 @@ class XRadioProperty extends XFormControlFunction(X_RADIO_CONFIG_NAME) {
          */
         this.after = input();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XRadioProperty, isStandalone: true, selector: "x-radio-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tagBordered: { classPropertyName: "tagBordered", publicName: "tagBordered", isSignal: true, isRequired: false, transformFunction: null }, tagDark: { classPropertyName: "tagDark", publicName: "tagDark", isSignal: true, isRequired: false, transformFunction: null }, allowCancel: { classPropertyName: "allowCancel", publicName: "allowCancel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: XRadioProperty, isStandalone: true, selector: "x-radio-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tagBordered: { classPropertyName: "tagBordered", publicName: "tagBordered", isSignal: true, isRequired: false, transformFunction: null }, tagDark: { classPropertyName: "tagDark", publicName: "tagDark", isSignal: true, isRequired: false, transformFunction: null }, allowCancel: { classPropertyName: "allowCancel", publicName: "allowCancel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XRadioPrefix}-property`, template: '' }]
         }] });
@@ -184,20 +184,20 @@ class XRadioComponent extends XRadioProperty {
             this.nodes.set(x);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XRadioComponent, isStandalone: true, selector: "x-radio", providers: [XValueAccessor(XRadioComponent)], viewQueries: [{ propertyName: "radio", first: true, predicate: ["radio"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #radio\r\n  class=\"x-radio\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-flex]=\"justify() || align() || direction()\"\r\n  [class.x-disabled]=\"disabledComputed()\"\r\n  [class.x-required]=\"requiredIsEmpty()\"\r\n  [class.x-invalid]=\"invalid()\"\r\n  [class.x-radio-button]=\"button()\"\r\n  [class.x-radio-icon]=\"icon()\"\r\n  [class.x-radio-vertical]=\"vertical()\"\r\n  [class.x-radio-after]=\"after()\"\r\n  [class.x-radio-before]=\"before()\"\r\n  [class.x-radio-after-template]=\"afterIsTemplate()\"\r\n  [class.x-radio-before-template]=\"beforeIsTemplate()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-radio-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div class=\"x-radio-row\">\r\n    @if (before()) {\r\n      <div class=\"x-radio-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-radio-row-list\">\r\n      @switch (radioType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-radio-row-item\"\r\n              [class.x-checked]=\"item.id === value()\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              (click)=\"radioClick($event, item)\"\r\n            >\r\n              <span class=\"x-radio-box\"></span>\r\n              <span class=\"x-radio-label\">{{ item.label }}</span>\r\n            </div>\r\n          }\r\n        }\r\n        @case ('button') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('icon') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('tag') {\r\n          @for (item of nodes(); track item.id) {\r\n            <x-tag\r\n              checked\r\n              manual\r\n              [type]=\"type()\"\r\n              [size]=\"size()\"\r\n              [bordered]=\"tagBordered()\"\r\n              [dark]=\"tagDark()\"\r\n              [disabled]=\"disabledComputed() || item.disabled!\"\r\n              [selected]=\"value() === item.id\"\r\n              (click)=\"radioClick($event, item)\"\r\n              >{{ item.label }}</x-tag\r\n            >\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if (after()) {\r\n      <div class=\"x-radio-row-after\">\r\n        <ng-container *xOutlet=\"after()\">{{ after() }}</ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-radio{margin:0;padding:0}.x-radio{width:100%}.x-radio.x-flex{display:flex}.x-radio.x-justify-start{justify-content:flex-start}.x-radio.x-justify-center{justify-content:center}.x-radio.x-justify-end{justify-content:flex-end}.x-radio.x-justify-space-between{justify-content:space-between}.x-radio.x-justify-space-around{justify-content:space-around}.x-radio.x-align-start{align-items:flex-start}.x-radio.x-align-center{align-items:center}.x-radio.x-align-end{align-items:flex-end}.x-radio.x-direction-column{flex-direction:column}.x-radio.x-direction-column-reverse{flex-direction:column-reverse}.x-radio.x-direction-row{flex-direction:row}.x-radio.x-direction-row-reverse{flex-direction:row-reverse}.x-radio>label{display:inline-block;white-space:nowrap;height:var(--x-height-medium);line-height:var(--x-height-medium);position:relative;color:var(--x-text-300);font-weight:600}.x-radio>label.x-text-align-start{text-align:start}.x-radio>label.x-text-align-center{text-align:center}.x-radio>label.x-text-align-end{text-align:end}.x-radio-row{flex:1;display:flex;align-items:center;flex-wrap:wrap;height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row .x-radio-row-before,.x-radio-row .x-radio-row-after{border-radius:var(--x-border-radius);background-color:var(--x-background-a200);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row-list{position:relative;display:inline-flex;align-items:center}.x-radio-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-radio-row-item{position:relative;display:inline-flex;align-items:center;white-space:nowrap;outline:none;margin-right:var(--x-font-size);font-size:var(--x-font-size);cursor:pointer;transition:all .3s}.x-radio-row-item:hover{color:var(--x-primary)}.x-radio-row-item:hover .x-radio-box{border-color:var(--x-primary)}.x-radio-row-item:last-child{margin-right:0}.x-radio-row-item.x-checked .x-radio-box{border-color:var(--x-primary);border-width:.375rem}.x-radio-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-radio-row-item.x-disabled .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio-row-item.x-disabled .x-radio-box:after{background-color:var(--x-text-400)}.x-radio-button .x-radio-row-before,.x-radio-icon .x-radio-row-before{margin-right:0}.x-radio-button .x-radio-row-after,.x-radio-icon .x-radio-row-after{margin-left:0}.x-radio-vertical .x-radio-row-list{flex-direction:column;align-items:flex-start}.x-radio-vertical .x-radio-row-list x-tag{margin-left:0}.x-radio-vertical .x-radio-row-list x-tag:not(:first-child){margin-top:.25rem}.x-radio-vertical .x-radio-row-item{margin-right:0}.x-radio-vertical .x-radio-row-item:not(:first-child){margin-top:.25rem}.x-radio-box{border:var(--x-border-width) solid var(--x-border);border-radius:100%;width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);background-color:var(--x-background-a100);position:relative;box-sizing:border-box;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.x-radio-box:hover{border-color:var(--x-primary)}.x-radio-label{margin-left:.325rem}.x-radio-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-radio-before:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-before{margin-right:var(--x-padding-medium)}.x-radio-before.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-radio-before.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-before.x-radio-button .x-radio-row-before,.x-radio-before.x-radio-icon .x-radio-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-before-template .x-radio-row-before{display:contents}.x-radio-before-template .x-radio-row-list{margin-left:var(--x-padding-medium)}.x-radio-before-template.x-radio-button .x-radio-row-list,.x-radio-before-template.x-radio-icon .x-radio-row-list,.x-radio-before-template.x-radio-button .x-radio-row-list .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-list .x-button{margin-left:0}.x-radio-before-template.x-radio-button .x-radio-row-before input,.x-radio-before-template.x-radio-button .x-radio-row-before .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-before input,.x-radio-before-template.x-radio-icon .x-radio-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-after{margin-left:var(--x-padding-medium)}.x-radio-after.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-radio-after.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after.x-radio-button .x-radio-row-after,.x-radio-after.x-radio-icon .x-radio-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-after-template .x-radio-row-after{display:contents}.x-radio-after-template .x-radio-row-list{margin-right:var(--x-padding-medium)}.x-radio-after-template.x-radio-button .x-radio-row-list,.x-radio-after-template.x-radio-icon .x-radio-row-list,.x-radio-after-template.x-radio-button .x-radio-row-list .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-list .x-button{margin-right:0}.x-radio-after-template.x-radio-button .x-radio-row-after input,.x-radio-after-template.x-radio-button .x-radio-row-after .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-after input,.x-radio-after-template.x-radio-icon .x-radio-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio.x-disabled .x-radio-item{color:var(--x-text-400);cursor:not-allowed}.x-radio.x-disabled .x-radio-item .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio.x-disabled .x-radio-item .x-radio-box:after{background-color:var(--x-text-400)}.x-radio.x-invalid>label,.x-radio.x-required>label{color:var(--x-danger)}.x-radio.x-direction-row>label{padding:0 .5rem 0 0}.x-radio.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-radio.x-direction-column,.x-radio.x-direction-column-reverse{align-items:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { 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.0.0", ngImport: i0, type: XRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: XRadioComponent, isStandalone: true, selector: "x-radio", providers: [XValueAccessor(XRadioComponent)], viewQueries: [{ propertyName: "radio", first: true, predicate: ["radio"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #radio\r\n  class=\"x-radio\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-flex]=\"justify() || align() || direction()\"\r\n  [class.x-disabled]=\"disabledComputed()\"\r\n  [class.x-required]=\"requiredIsEmpty()\"\r\n  [class.x-invalid]=\"invalid()\"\r\n  [class.x-radio-button]=\"button()\"\r\n  [class.x-radio-icon]=\"icon()\"\r\n  [class.x-radio-vertical]=\"vertical()\"\r\n  [class.x-radio-after]=\"after()\"\r\n  [class.x-radio-before]=\"before()\"\r\n  [class.x-radio-after-template]=\"afterIsTemplate()\"\r\n  [class.x-radio-before-template]=\"beforeIsTemplate()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-radio-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div class=\"x-radio-row\">\r\n    @if (before()) {\r\n      <div class=\"x-radio-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-radio-row-list\">\r\n      @switch (radioType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-radio-row-item\"\r\n              [class.x-checked]=\"item.id === value()\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              (click)=\"radioClick($event, item)\"\r\n            >\r\n              <span class=\"x-radio-box\"></span>\r\n              <span class=\"x-radio-label\">{{ item.label }}</span>\r\n            </div>\r\n          }\r\n        }\r\n        @case ('button') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('icon') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('tag') {\r\n          @for (item of nodes(); track item.id) {\r\n            <x-tag\r\n              checked\r\n              manual\r\n              [type]=\"type()\"\r\n              [size]=\"size()\"\r\n              [bordered]=\"tagBordered()\"\r\n              [dark]=\"tagDark()\"\r\n              [disabled]=\"disabledComputed() || item.disabled!\"\r\n              [selected]=\"value() === item.id\"\r\n              (click)=\"radioClick($event, item)\"\r\n              >{{ item.label }}</x-tag\r\n            >\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if (after()) {\r\n      <div class=\"x-radio-row-after\">\r\n        <ng-container *xOutlet=\"after()\">{{ after() }}</ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-radio{margin:0;padding:0}.x-radio{width:100%}.x-radio.x-flex{display:flex}.x-radio.x-justify-start{justify-content:flex-start}.x-radio.x-justify-center{justify-content:center}.x-radio.x-justify-end{justify-content:flex-end}.x-radio.x-justify-space-between{justify-content:space-between}.x-radio.x-justify-space-around{justify-content:space-around}.x-radio.x-align-start{align-items:flex-start}.x-radio.x-align-center{align-items:center}.x-radio.x-align-end{align-items:flex-end}.x-radio.x-direction-column{flex-direction:column}.x-radio.x-direction-column-reverse{flex-direction:column-reverse}.x-radio.x-direction-row{flex-direction:row}.x-radio.x-direction-row-reverse{flex-direction:row-reverse}.x-radio>label{display:inline-block;white-space:nowrap;height:var(--x-height-medium);line-height:var(--x-height-medium);position:relative;color:var(--x-text-300);font-weight:600}.x-radio>label.x-text-align-start{text-align:start}.x-radio>label.x-text-align-center{text-align:center}.x-radio>label.x-text-align-end{text-align:end}.x-radio-row{flex:1;display:flex;align-items:center;flex-wrap:wrap;height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row .x-radio-row-before,.x-radio-row .x-radio-row-after{border-radius:var(--x-border-radius);background-color:var(--x-background-a200);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row-list{position:relative;display:inline-flex;align-items:center}.x-radio-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-radio-row-item{position:relative;display:inline-flex;align-items:center;white-space:nowrap;outline:none;margin-right:var(--x-font-size);font-size:var(--x-font-size);cursor:pointer;transition:all .3s}.x-radio-row-item:hover{color:var(--x-primary)}.x-radio-row-item:hover .x-radio-box{border-color:var(--x-primary)}.x-radio-row-item:last-child{margin-right:0}.x-radio-row-item.x-checked .x-radio-box{border-color:var(--x-primary);border-width:.375rem}.x-radio-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-radio-row-item.x-disabled .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio-row-item.x-disabled .x-radio-box:after{background-color:var(--x-text-400)}.x-radio-button .x-radio-row-before,.x-radio-icon .x-radio-row-before{margin-right:0}.x-radio-button .x-radio-row-after,.x-radio-icon .x-radio-row-after{margin-left:0}.x-radio-vertical .x-radio-row-list{flex-direction:column;align-items:flex-start}.x-radio-vertical .x-radio-row-list x-tag{margin-left:0}.x-radio-vertical .x-radio-row-list x-tag:not(:first-child){margin-top:.25rem}.x-radio-vertical .x-radio-row-item{margin-right:0}.x-radio-vertical .x-radio-row-item:not(:first-child){margin-top:.25rem}.x-radio-box{border:var(--x-border-width) solid var(--x-border);border-radius:100%;width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);background-color:var(--x-background-a100);position:relative;box-sizing:border-box;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.x-radio-box:hover{border-color:var(--x-primary)}.x-radio-label{margin-left:.325rem}.x-radio-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-radio-before:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-before{margin-right:var(--x-padding-medium)}.x-radio-before.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-radio-before.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-before.x-radio-button .x-radio-row-before,.x-radio-before.x-radio-icon .x-radio-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-before-template .x-radio-row-before{display:contents}.x-radio-before-template .x-radio-row-list{margin-left:var(--x-padding-medium)}.x-radio-before-template.x-radio-button .x-radio-row-list,.x-radio-before-template.x-radio-icon .x-radio-row-list,.x-radio-before-template.x-radio-button .x-radio-row-list .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-list .x-button{margin-left:0}.x-radio-before-template.x-radio-button .x-radio-row-before input,.x-radio-before-template.x-radio-button .x-radio-row-before .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-before input,.x-radio-before-template.x-radio-icon .x-radio-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-after{margin-left:var(--x-padding-medium)}.x-radio-after.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-radio-after.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after.x-radio-button .x-radio-row-after,.x-radio-after.x-radio-icon .x-radio-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-after-template .x-radio-row-after{display:contents}.x-radio-after-template .x-radio-row-list{margin-right:var(--x-padding-medium)}.x-radio-after-template.x-radio-button .x-radio-row-list,.x-radio-after-template.x-radio-icon .x-radio-row-list,.x-radio-after-template.x-radio-button .x-radio-row-list .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-list .x-button{margin-right:0}.x-radio-after-template.x-radio-button .x-radio-row-after input,.x-radio-after-template.x-radio-button .x-radio-row-after .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-after input,.x-radio-after-template.x-radio-icon .x-radio-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio.x-disabled .x-radio-item{color:var(--x-text-400);cursor:not-allowed}.x-radio.x-disabled .x-radio-item .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio.x-disabled .x-radio-item .x-radio-box:after{background-color:var(--x-text-400)}.x-radio.x-invalid>label,.x-radio.x-required>label{color:var(--x-danger)}.x-radio.x-direction-row>label{padding:0 .5rem 0 0}.x-radio.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-radio.x-direction-column,.x-radio.x-direction-column-reverse{align-items:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XRadioPrefix}`, imports: [NgClass, FormsModule, XButtonComponent, XButtonsComponent, XTagComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XRadioComponent)], template: "<div\r\n  #radio\r\n  class=\"x-radio\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-flex]=\"justify() || align() || direction()\"\r\n  [class.x-disabled]=\"disabledComputed()\"\r\n  [class.x-required]=\"requiredIsEmpty()\"\r\n  [class.x-invalid]=\"invalid()\"\r\n  [class.x-radio-button]=\"button()\"\r\n  [class.x-radio-icon]=\"icon()\"\r\n  [class.x-radio-vertical]=\"vertical()\"\r\n  [class.x-radio-after]=\"after()\"\r\n  [class.x-radio-before]=\"before()\"\r\n  [class.x-radio-after-template]=\"afterIsTemplate()\"\r\n  [class.x-radio-before-template]=\"beforeIsTemplate()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-radio-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div class=\"x-radio-row\">\r\n    @if (before()) {\r\n      <div class=\"x-radio-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-radio-row-list\">\r\n      @switch (radioType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-radio-row-item\"\r\n              [class.x-checked]=\"item.id === value()\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              (click)=\"radioClick($event, item)\"\r\n            >\r\n              <span class=\"x-radio-box\"></span>\r\n              <span class=\"x-radio-label\">{{ item.label }}</span>\r\n            </div>\r\n          }\r\n        }\r\n        @case ('button') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('icon') {\r\n          <x-buttons boxShadow=\"false\">\r\n            @for (item of nodes(); track item.id) {\r\n              <x-button\r\n                [icon]=\"item.icon!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.id === value()\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"radioClick($event, item)\"\r\n                plain\r\n                >{{ item.label }}</x-button\r\n              >\r\n            }\r\n          </x-buttons>\r\n        }\r\n        @case ('tag') {\r\n          @for (item of nodes(); track item.id) {\r\n            <x-tag\r\n              checked\r\n              manual\r\n              [type]=\"type()\"\r\n              [size]=\"size()\"\r\n              [bordered]=\"tagBordered()\"\r\n              [dark]=\"tagDark()\"\r\n              [disabled]=\"disabledComputed() || item.disabled!\"\r\n              [selected]=\"value() === item.id\"\r\n              (click)=\"radioClick($event, item)\"\r\n              >{{ item.label }}</x-tag\r\n            >\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if (after()) {\r\n      <div class=\"x-radio-row-after\">\r\n        <ng-container *xOutlet=\"after()\">{{ after() }}</ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-radio{margin:0;padding:0}.x-radio{width:100%}.x-radio.x-flex{display:flex}.x-radio.x-justify-start{justify-content:flex-start}.x-radio.x-justify-center{justify-content:center}.x-radio.x-justify-end{justify-content:flex-end}.x-radio.x-justify-space-between{justify-content:space-between}.x-radio.x-justify-space-around{justify-content:space-around}.x-radio.x-align-start{align-items:flex-start}.x-radio.x-align-center{align-items:center}.x-radio.x-align-end{align-items:flex-end}.x-radio.x-direction-column{flex-direction:column}.x-radio.x-direction-column-reverse{flex-direction:column-reverse}.x-radio.x-direction-row{flex-direction:row}.x-radio.x-direction-row-reverse{flex-direction:row-reverse}.x-radio>label{display:inline-block;white-space:nowrap;height:var(--x-height-medium);line-height:var(--x-height-medium);position:relative;color:var(--x-text-300);font-weight:600}.x-radio>label.x-text-align-start{text-align:start}.x-radio>label.x-text-align-center{text-align:center}.x-radio>label.x-text-align-end{text-align:end}.x-radio-row{flex:1;display:flex;align-items:center;flex-wrap:wrap;height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row .x-radio-row-before,.x-radio-row .x-radio-row-after{border-radius:var(--x-border-radius);background-color:var(--x-background-a200);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-radio-row-list{position:relative;display:inline-flex;align-items:center}.x-radio-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-radio-row-item{position:relative;display:inline-flex;align-items:center;white-space:nowrap;outline:none;margin-right:var(--x-font-size);font-size:var(--x-font-size);cursor:pointer;transition:all .3s}.x-radio-row-item:hover{color:var(--x-primary)}.x-radio-row-item:hover .x-radio-box{border-color:var(--x-primary)}.x-radio-row-item:last-child{margin-right:0}.x-radio-row-item.x-checked .x-radio-box{border-color:var(--x-primary);border-width:.375rem}.x-radio-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-radio-row-item.x-disabled .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio-row-item.x-disabled .x-radio-box:after{background-color:var(--x-text-400)}.x-radio-button .x-radio-row-before,.x-radio-icon .x-radio-row-before{margin-right:0}.x-radio-button .x-radio-row-after,.x-radio-icon .x-radio-row-after{margin-left:0}.x-radio-vertical .x-radio-row-list{flex-direction:column;align-items:flex-start}.x-radio-vertical .x-radio-row-list x-tag{margin-left:0}.x-radio-vertical .x-radio-row-list x-tag:not(:first-child){margin-top:.25rem}.x-radio-vertical .x-radio-row-item{margin-right:0}.x-radio-vertical .x-radio-row-item:not(:first-child){margin-top:.25rem}.x-radio-box{border:var(--x-border-width) solid var(--x-border);border-radius:100%;width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);background-color:var(--x-background-a100);position:relative;box-sizing:border-box;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.x-radio-box:hover{border-color:var(--x-primary)}.x-radio-label{margin-left:.325rem}.x-radio-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-radio-before:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-before{margin-right:var(--x-padding-medium)}.x-radio-before.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-radio-before.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-before.x-radio-button .x-radio-row-before,.x-radio-before.x-radio-icon .x-radio-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-before-template .x-radio-row-before{display:contents}.x-radio-before-template .x-radio-row-list{margin-left:var(--x-padding-medium)}.x-radio-before-template.x-radio-button .x-radio-row-list,.x-radio-before-template.x-radio-icon .x-radio-row-list,.x-radio-before-template.x-radio-button .x-radio-row-list .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-list .x-button{margin-left:0}.x-radio-before-template.x-radio-button .x-radio-row-before input,.x-radio-before-template.x-radio-button .x-radio-row-before .x-button,.x-radio-before-template.x-radio-icon .x-radio-row-before input,.x-radio-before-template.x-radio-icon .x-radio-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after:not(.x-radio-before-template,.x-radio-button,.x-radio-icon) .x-radio-row-after{margin-left:var(--x-padding-medium)}.x-radio-after.x-radio-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-radio-after.x-radio-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-radio-after.x-radio-button .x-radio-row-after,.x-radio-after.x-radio-icon .x-radio-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-radio-after-template .x-radio-row-after{display:contents}.x-radio-after-template .x-radio-row-list{margin-right:var(--x-padding-medium)}.x-radio-after-template.x-radio-button .x-radio-row-list,.x-radio-after-template.x-radio-icon .x-radio-row-list,.x-radio-after-template.x-radio-button .x-radio-row-list .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-list .x-button{margin-right:0}.x-radio-after-template.x-radio-button .x-radio-row-after input,.x-radio-after-template.x-radio-button .x-radio-row-after .x-button,.x-radio-after-template.x-radio-icon .x-radio-row-after input,.x-radio-after-template.x-radio-icon .x-radio-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-radio.x-disabled .x-radio-item{color:var(--x-text-400);cursor:not-allowed}.x-radio.x-disabled .x-radio-item .x-radio-box{border-color:var(--x-border-a900);background-color:var(--x-border-300)}.x-radio.x-disabled .x-radio-item .x-radio-box:after{background-color:var(--x-text-400)}.x-radio.x-invalid>label,.x-radio.x-required>label{color:var(--x-danger)}.x-radio.x-direction-row>label{padding:0 .5rem 0 0}.x-radio.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-radio.x-direction-column,.x-radio.x-direction-column-reverse{align-items:inherit}\n"] }]
         }] });
 
 class XRadioModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: XRadioModule, imports: [XRadioComponent], exports: [XRadioComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioModule, imports: [XRadioComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XRadioModule, imports: [XRadioComponent], exports: [XRadioComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioModule, imports: [XRadioComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XRadioComponent],