@ng-nest/ui 20.2.5 → 21.0.0

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

@@ -218,10 +218,10 @@ class XCarouselProperty extends XPropertyFunction(X_CAROUSEL_CONFIG_NAME) {
          */
         this.current = input(false, ...(ngDevMode ? [{ debugName: "current", transform: XToBoolean }] : [{ transform: XToBoolean }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCarouselProperty, isStandalone: true, selector: "x-carousel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, outside: { classPropertyName: "outside", publicName: "outside", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCarouselProperty, isStandalone: true, selector: "x-carousel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, outside: { classPropertyName: "outside", publicName: "outside", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPrefix}-property`, template: '' }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], outside: [{ type: i0.Input, args: [{ isSignal: true, alias: "outside", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
@@ -252,10 +252,10 @@ class XCarouselPanelProperty extends XProperty {
          */
         this.active = input(false, ...(ngDevMode ? [{ debugName: "active", transform: XToBoolean }] : [{ transform: XToBoolean }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselPanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCarouselPanelProperty, isStandalone: true, selector: "x-carousel-panel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselPanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCarouselPanelProperty, isStandalone: true, selector: "x-carousel-panel-property", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselPanelProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselPanelProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPanelPrefix}-property`, template: '' }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
@@ -339,10 +339,10 @@ class XCarouselComponent extends XCarouselProperty {
     getActivated(index) {
         return this.active() === index;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCarouselComponent, isStandalone: true, selector: "x-carousel", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-carousel-arrow-always]=\"arrow() === 'always'\"\r\n  [class.x-carousel-has-current]=\"current()\"\r\n  [class.x-carousel-indicator-outside]=\"outside() || card()\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height()\">\r\n    @if (arrow() !== 'never' && direction() !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active(), -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active(), 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text()) {\r\n      <div class=\"x-carousel-text\">{{ text() }}</div>\r\n    }\r\n    @if (current()) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page() }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count() }}</span>\r\n      </div>\r\n    }\r\n    @if (progress()) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent()\" [color]=\"progressColor()\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panels(); track $index) {\r\n      <li\r\n        [class.x-activated]=\"getActivated($index)\"\r\n        (click)=\"action($index, 0, 'click')\"\r\n        (mouseenter)=\"action($index, 0, 'hover')\"\r\n      >\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0}.x-carousel{font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative;overflow:hidden}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCarouselComponent, isStandalone: true, selector: "x-carousel", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-carousel-arrow-always]=\"arrow() === 'always'\"\r\n  [class.x-carousel-has-current]=\"current()\"\r\n  [class.x-carousel-indicator-outside]=\"outside() || card()\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height()\">\r\n    @if (arrow() !== 'never' && direction() !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active(), -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active(), 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text()) {\r\n      <div class=\"x-carousel-text\">{{ text() }}</div>\r\n    }\r\n    @if (current()) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page() }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count() }}</span>\r\n      </div>\r\n    }\r\n    @if (progress()) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent()\" [color]=\"progressColor()\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panels(); track $index) {\r\n      <li\r\n        [class.x-activated]=\"getActivated($index)\"\r\n        (click)=\"action($index, 0, 'click')\"\r\n        (mouseenter)=\"action($index, 0, 'hover')\"\r\n      >\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0}.x-carousel{font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative;overflow:hidden}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPrefix}`, imports: [NgClass, XButtonComponent, XProgressComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #carousel\r\n  class=\"x-carousel\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-carousel-arrow-always]=\"arrow() === 'always'\"\r\n  [class.x-carousel-has-current]=\"current()\"\r\n  [class.x-carousel-indicator-outside]=\"outside() || card()\"\r\n>\r\n  <div #content class=\"x-carousel-content\" [style.height]=\"height()\">\r\n    @if (arrow() !== 'never' && direction() !== 'vertical') {\r\n      <x-button class=\"arrow-left\" icon=\"fto-chevron-left\" (click)=\"action(active(), -1)\"></x-button>\r\n      <x-button class=\"arrow-right\" icon=\"fto-chevron-right\" (click)=\"action(active(), 1)\"></x-button>\r\n    }\r\n    <ng-content></ng-content>\r\n    @if (text()) {\r\n      <div class=\"x-carousel-text\">{{ text() }}</div>\r\n    }\r\n    @if (current()) {\r\n      <div class=\"x-carousel-current\">\r\n        <span class=\"x-carousel-active\">{{ page() }}</span> /\r\n        <span class=\"x-carousel-count\">{{ count() }}</span>\r\n      </div>\r\n    }\r\n    @if (progress()) {\r\n      <div class=\"x-carousel-progress\">\r\n        <x-progress [percent]=\"percent()\" [color]=\"progressColor()\" [info]=\"false\" height=\"0.325rem\"></x-progress>\r\n      </div>\r\n    }\r\n  </div>\r\n  <ul class=\"x-carousel-indicator\">\r\n    @for (panel of panels(); track $index) {\r\n      <li\r\n        [class.x-activated]=\"getActivated($index)\"\r\n        (click)=\"action($index, 0, 'click')\"\r\n        (mouseenter)=\"action($index, 0, 'hover')\"\r\n      >\r\n        <x-button type=\"text\"></x-button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-carousel{margin:0;padding:0}.x-carousel{font-size:var(--x-font-size);box-sizing:border-box;position:relative}.x-carousel-content{position:relative;overflow:hidden}.x-carousel-content>x-button{opacity:0;visibility:hidden;top:50%;z-index:10;transform:translateY(-50%);position:absolute;transition:var(--x-animation-duration-base) ease-out}.x-carousel-content>x-button .x-button{border:none;outline:none;padding:0;margin:0;height:2.25rem;width:2.25rem;border-radius:50%;background-color:#1f2d3d26;color:var(--x-background-100);text-align:center}.x-carousel-content>x-button .x-button:hover{color:var(--x-background-100);background-color:#1f2d3d40}.x-carousel-content>x-button.arrow-left{left:1rem;transform:translate3D(-15px,-50%,0)}.x-carousel-content>x-button.arrow-right{right:1rem;transform:translate3D(15px,-50%,0)}.x-carousel-content>x-carousel-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;background-color:var(--x-background-a100);z-index:0}.x-carousel-content>x-carousel-panel.x-carousel-animating{transition:.4s ease-in-out}.x-carousel-content>x-carousel-panel.x-carousel-card{width:50%}.x-carousel-content>x-carousel-panel.x-carousel-in-stage{cursor:pointer;z-index:1}.x-carousel-content>x-carousel-panel.x-carousel-in-stage .x-carousel-mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--x-background);opacity:.24;transition:.2s}.x-carousel-content>x-carousel-panel.x-carousel-in-stage:hover .x-carousel-mask{opacity:.12}.x-carousel-content>x-carousel-panel.x-activated{z-index:2}.x-carousel-indicator{bottom:.25rem;left:50%;transform:translate(-50%);position:absolute;z-index:2;display:inline-flex}.x-carousel-indicator>li{cursor:pointer;background-color:transparent;display:inline-flex;padding:.75rem .25rem}.x-carousel-indicator>li>x-button .x-button{padding:0;width:1.875rem;height:.125rem;background-color:#1f2d3d26;transition:.3s}.x-carousel-indicator>li:hover>x-button .x-button{background-color:#1f2d3d40}.x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#ffffffe6}.x-carousel-indicator-outside .x-carousel-indicator{position:static;transform:none;display:flex;align-items:center;justify-content:center}.x-carousel-indicator-outside .x-carousel-indicator>li>x-button .x-button{background-color:var(--x-text-700)}.x-carousel-indicator-outside .x-carousel-indicator>li.x-activated>x-button .x-button{background-color:#00000080}.x-carousel:hover .x-carousel-content>x-button,.x-carousel-arrow-always .x-carousel-content>x-button{opacity:1;visibility:inherit}.x-carousel:hover .x-carousel-content>x-button.arrow-left,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-left{transform:translate3D(0,-50%,0)}.x-carousel:hover .x-carousel-content>x-button.arrow-right,.x-carousel-arrow-always .x-carousel-content>x-button.arrow-right{transform:translate3D(0,-50%,0)}.x-carousel-horizontal,.x-carousel-vertical{overflow:hidden}.x-carousel-vertical>.x-carousel-indicator{right:0;top:50%;left:inherit;bottom:inherit;flex-direction:column;transform:translateY(-50%)}.x-carousel-vertical>.x-carousel-indicator>li{padding:.25rem .75rem}.x-carousel-vertical>.x-carousel-indicator>li>x-button .x-button{width:.125rem;height:1rem}.x-carousel-text{position:absolute;bottom:0;z-index:10;font-size:1rem;padding:.5rem .75rem}.x-carousel-progress{position:absolute;bottom:0;z-index:11;width:100%;height:.5rem}.x-carousel-progress x-progress{position:relative;height:.5rem;display:block;top:0}.x-carousel-progress x-progress .x-progress{position:relative;top:-.5625rem}.x-carousel-progress x-progress .x-progress-rail,.x-carousel-progress x-progress .x-progress-bg{border-radius:0}.x-carousel-progress x-progress .x-progress-rail{background-color:transparent}.x-carousel-current{position:absolute;bottom:0;right:0;z-index:11;padding:.5rem .75rem;font-size:var(--x-font-size-big)}.x-carousel-active{color:var(--x-primary);font-weight:600;font-size:1.5rem}.x-carousel-count{color:var(--x-text);font-weight:600}.x-carousel-has-current .x-carousel-text{padding-right:5rem}\n"] }]
         }], propDecorators: { carousel: [{ type: i0.ViewChild, args: ['carousel', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
@@ -467,10 +467,10 @@ class XCarouselPanelComponent extends XCarouselPanelProperty {
             this.carousel?.setActiveItem(this.index());
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCarouselPanelComponent, isStandalone: true, selector: "x-carousel-panel", host: { properties: { "class.x-carousel-card": "this.getCard", "class.x-activated": "this.getActivated", "class.x-carousel-in-stage": "this.getInStage", "class.x-carousel-animating": "this.getAnimating", "style.transform": "this.getTransform" } }, usesInheritance: true, ngImport: i0, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (card()) {\r\n    <div [hidden]=\"activeSignal()\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0}.x-carousel-panel{box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCarouselPanelComponent, isStandalone: true, selector: "x-carousel-panel", host: { properties: { "class.x-carousel-card": "this.getCard", "class.x-activated": "this.getActivated", "class.x-carousel-in-stage": "this.getInStage", "class.x-carousel-animating": "this.getAnimating", "style.transform": "this.getTransform" } }, usesInheritance: true, ngImport: i0, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (card()) {\r\n    <div [hidden]=\"activeSignal()\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0}.x-carousel-panel{box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCarouselPanelPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselPanel class=\"x-carousel-panel\" (click)=\"panelClick()\">\r\n  @if (card()) {\r\n    <div [hidden]=\"activeSignal()\" class=\"x-carousel-mask\"></div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-carousel-panel{margin:0;padding:0}.x-carousel-panel{box-sizing:border-box;width:100%;height:100%;display:inline-block}\n"] }]
         }], propDecorators: { getCard: [{
@@ -491,11 +491,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }] } });
 
 class XCarouselModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent, XCarouselPanelComponent], exports: [XCarouselComponent, XCarouselPanelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent, XCarouselPanelComponent], exports: [XCarouselComponent, XCarouselPanelComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselModule, imports: [XCarouselComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XCarouselComponent, XCarouselPanelComponent],

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

@@ -130,10 +130,10 @@ class XCascadePortalComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadePortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCascadePortalComponent, isStandalone: true, selector: "x-cascade-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, nodeTrigger: { classPropertyName: "nodeTrigger", publicName: "nodeTrigger", isSignal: true, isRequired: false, transformFunction: null }, nodeHoverDelay: { classPropertyName: "nodeHoverDelay", publicName: "nodeHoverDelay", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, datas: { classPropertyName: "datas", publicName: "datas", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, ngImport: i0, template: "<div\r\n  class=\"x-cascade-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  @for (list of nodes(); track list) {\r\n    <x-list\r\n      [style.width]=\"portalWidth()\"\r\n      [data]=\"list\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [(ngModel)]=\"values\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      (nodeMouseenter)=\"nodeTrigger() === 'hover' && nodeMouseenter($event)\"\r\n      (nodeMouseleave)=\"nodeTrigger() === 'hover' && nodeMouseleave()\"\r\n      [checked]=\"true\"\r\n      [inPortal]=\"true\"\r\n    ></x-list>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-cascade-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-cascade-portal:focus{outline:none}.x-cascade-portal>x-list .x-list-option{min-width:8rem}.x-cascade-portal>x-list:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadePortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCascadePortalComponent, isStandalone: true, selector: "x-cascade-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, nodeTrigger: { classPropertyName: "nodeTrigger", publicName: "nodeTrigger", isSignal: true, isRequired: false, transformFunction: null }, nodeHoverDelay: { classPropertyName: "nodeHoverDelay", publicName: "nodeHoverDelay", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, datas: { classPropertyName: "datas", publicName: "datas", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, ngImport: i0, template: "<div\r\n  class=\"x-cascade-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  @for (list of nodes(); track list) {\r\n    <x-list\r\n      [style.width]=\"portalWidth()\"\r\n      [data]=\"list\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [(ngModel)]=\"values\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      (nodeMouseenter)=\"nodeTrigger() === 'hover' && nodeMouseenter($event)\"\r\n      (nodeMouseleave)=\"nodeTrigger() === 'hover' && nodeMouseleave()\"\r\n      [checked]=\"true\"\r\n      [inPortal]=\"true\"\r\n    ></x-list>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-cascade-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-cascade-portal:focus{outline:none}.x-cascade-portal>x-list .x-list-option{min-width:8rem}.x-cascade-portal>x-list:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadePortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadePortalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-cascade-portal', imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-cascade-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  @for (list of nodes(); track list) {\r\n    <x-list\r\n      [style.width]=\"portalWidth()\"\r\n      [data]=\"list\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [(ngModel)]=\"values\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      (nodeMouseenter)=\"nodeTrigger() === 'hover' && nodeMouseenter($event)\"\r\n      (nodeMouseleave)=\"nodeTrigger() === 'hover' && nodeMouseleave()\"\r\n      [checked]=\"true\"\r\n      [inPortal]=\"true\"\r\n    ></x-list>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-cascade-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-cascade-portal:focus{outline:none}.x-cascade-portal>x-list .x-list-option{min-width:8rem}.x-cascade-portal>x-list:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"] }]
         }], propDecorators: { animateEnter: [{
@@ -348,10 +348,10 @@ class XCascadeProperty extends XFormControlFunction(X_CASCADE_CONFIG_NAME) {
          */
         this.nodeEmit = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCascadeProperty, isStandalone: true, selector: "x-cascade-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, portalClass: { classPropertyName: "portalClass", publicName: "portalClass", isSignal: true, isRequired: false, transformFunction: null }, nodeTrigger: { classPropertyName: "nodeTrigger", publicName: "nodeTrigger", isSignal: true, isRequired: false, transformFunction: null }, nodeHoverDelay: { classPropertyName: "nodeHoverDelay", publicName: "nodeHoverDelay", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", 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 }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCascadeProperty, isStandalone: true, selector: "x-cascade-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, portalClass: { classPropertyName: "portalClass", publicName: "portalClass", isSignal: true, isRequired: false, transformFunction: null }, nodeTrigger: { classPropertyName: "nodeTrigger", publicName: "nodeTrigger", isSignal: true, isRequired: false, transformFunction: null }, nodeHoverDelay: { classPropertyName: "nodeHoverDelay", publicName: "nodeHoverDelay", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", 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 }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCascadePrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], portalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalHeight", required: false }] }], portalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalWidth", required: false }] }], portalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalClass", required: false }] }], nodeTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTrigger", required: false }] }], nodeHoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHoverDelay", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatFixed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], inputValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValidator", required: false }] }], nodeEmit: [{ type: i0.Output, args: ["nodeEmit"] }] } });
@@ -576,20 +576,20 @@ class XCascadeComponent extends XCascadeProperty {
     setPortal() {
         this.portalAttached() && this.portalOverlayRef()?.updatePositionStrategy(this.setPlacement());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XCascadeComponent, isStandalone: true, selector: "x-cascade", providers: [XValueAccessor(XCascadeComponent)], viewQueries: [{ propertyName: "cascade", first: true, predicate: ["cascade"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #cascade class=\"x-cascade\">\r\n  <div class=\"x-cascade-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContextSignal()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"true\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      [variant]=\"variant()\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (click)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>\r\n  <span [attr.title]=\"displayValue()\">{{ displayValue() }}</span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-cascade{display:inline-block;width:12rem}.x-cascade{margin:0;padding:0}.x-cascade{width:100%}.x-cascade x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: XCascadeComponent, isStandalone: true, selector: "x-cascade", providers: [XValueAccessor(XCascadeComponent)], viewQueries: [{ propertyName: "cascade", first: true, predicate: ["cascade"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #cascade class=\"x-cascade\">\r\n  <div class=\"x-cascade-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContextSignal()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"true\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      [variant]=\"variant()\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (click)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>\r\n  <span [attr.title]=\"displayValue()\">{{ displayValue() }}</span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-cascade{display:inline-block;width:12rem}.x-cascade{margin:0;padding:0}.x-cascade{width:100%}.x-cascade x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-cascade', imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XCascadeComponent)], template: "<div #cascade class=\"x-cascade\">\r\n  <div class=\"x-cascade-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContextSignal()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"true\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      [variant]=\"variant()\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (click)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #valueTemplate>\r\n  <span [attr.title]=\"displayValue()\">{{ displayValue() }}</span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-cascade{display:inline-block;width:12rem}.x-cascade{margin:0;padding:0}.x-cascade{width:100%}.x-cascade x-input{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cascade: [{ type: i0.ViewChild, args: ['cascade', { ...{ read: (ElementRef) }, isSignal: true }] }], inputCom: [{ type: i0.ViewChild, args: ['inputCom', { ...{ read: XInputComponent }, isSignal: true }] }] } });
 
 class XCascadeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XCascadeModule, imports: [XCascadeComponent], exports: [XCascadeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeModule, imports: [XCascadeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XCascadeModule, imports: [XCascadeComponent], exports: [XCascadeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeModule, imports: [XCascadeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCascadeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCascadeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCascadeComponent],

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

@@ -133,10 +133,10 @@ class XCheckboxProperty extends XFormControlFunction(X_CHECKBOX_CONFIG_NAME) {
          */
         this.after = input(...(ngDevMode ? [undefined, { debugName: "after" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCheckboxProperty, isStandalone: true, selector: "x-checkbox-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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, single: { classPropertyName: "single", publicName: "single", 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 }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", 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: "21.0.0", ngImport: i0, type: XCheckboxProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCheckboxProperty, isStandalone: true, selector: "x-checkbox-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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, single: { classPropertyName: "single", publicName: "single", 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 }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", 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: "20.3.5", ngImport: i0, type: XCheckboxProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCheckboxPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tagBordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagBordered", required: false }] }], tagDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagDark", required: false }] }], single: [{ type: i0.Input, args: [{ isSignal: true, alias: "single", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }] } });
@@ -224,20 +224,20 @@ class XCheckboxComponent extends XCheckboxProperty {
             this.nodes.set(x);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCheckboxComponent, isStandalone: true, selector: "x-checkbox", providers: [XValueAccessor(XCheckboxComponent)], viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #checkbox\r\n  class=\"x-checkbox\"\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-checkbox-button]=\"button()\"\r\n  [class.x-checkbox-icon]=\"icon()\"\r\n  [class.x-checkbox-vertical]=\"vertical()\"\r\n  [class.x-checkbox-after]=\"after()\"\r\n  [class.x-checkbox-before]=\"before()\"\r\n  [class.x-checkbox-after-template]=\"afterIsTemplate()\"\r\n  [class.x-checkbox-before-template]=\"beforeIsTemplate()\"\r\n  [ngClass]=\"classMap()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-checkbox-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      *xOutlet=\"label()\"\r\n    >\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n  <div class=\"x-checkbox-row\">\r\n    @if (before()) {\r\n      <div class=\"x-checkbox-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-checkbox-row-list\">\r\n      @switch (checkboxType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-checkbox-row-item\"\r\n              [class.x-checked]=\"item.checked!\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              [class.x-indeterminate]=\"indeterminate()\"\r\n              (click)=\"checkboxClick($event, item)\"\r\n            >\r\n              <span class=\"x-checkbox-box\"></span>\r\n              <span class=\"x-checkbox-label\">\r\n                <ng-container *xOutlet=\"item.label; context: { $node: item.node }\">{{ item.label }}</ng-container>\r\n              </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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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) {\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]=\"item.checked!\"\r\n              (click)=\"checkboxClick($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-checkbox-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-checkbox{display:inline-block}.x-checkbox{margin:0;padding:0}.x-checkbox{width:100%}.x-checkbox.x-flex{display:flex}.x-checkbox.x-justify-start{justify-content:flex-start}.x-checkbox.x-justify-center{justify-content:center}.x-checkbox.x-justify-end{justify-content:flex-end}.x-checkbox.x-justify-space-between{justify-content:space-between}.x-checkbox.x-justify-space-around{justify-content:space-around}.x-checkbox.x-align-start{align-items:flex-start}.x-checkbox.x-align-center{align-items:center}.x-checkbox.x-align-end{align-items:flex-end}.x-checkbox.x-direction-column{flex-direction:column}.x-checkbox.x-direction-column-reverse{flex-direction:column-reverse}.x-checkbox.x-direction-row{flex-direction:row}.x-checkbox.x-direction-row-reverse{flex-direction:row-reverse}.x-checkbox>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:500}.x-checkbox>label.x-text-align-start{text-align:start}.x-checkbox>label.x-text-align-center{text-align:center}.x-checkbox>label.x-text-align-end{text-align:end}.x-checkbox-row{flex:1;display:flex;align-items:center;flex-wrap:wrap}.x-checkbox-row .x-checkbox-row-before,.x-checkbox-row .x-checkbox-row-after{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-checkbox-row-list{position:relative;display:inline-flex;align-items:center}.x-checkbox-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-checkbox-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-checkbox-row-item:hover{color:var(--x-primary)}.x-checkbox-row-item:hover .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item:last-child{margin-right:0}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box:after{top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--x-primary);border:0;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:.125rem;content:\" \";transition:transform .2s}.x-checkbox-row-item.x-checked .x-checkbox-box{border-color:var(--x-primary);background-color:var(--x-primary)}.x-checkbox-row-item.x-checked .x-checkbox-box:after{border:.125rem solid white;border-top:0;border-left:0;top:.575rem;left:.325rem;width:.425rem;height:.825rem;transform:rotate(40deg) scale(1) translate(-50%,-50%);opacity:1;transition:transform .2s;content:\" \"}.x-checkbox-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-checkbox-row-item.x-disabled .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox-row-item.x-disabled .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox-button .x-checkbox-row-before,.x-checkbox-icon .x-checkbox-row-before{margin-right:0}.x-checkbox-button .x-checkbox-row-after,.x-checkbox-icon .x-checkbox-row-after{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list{flex-direction:column;align-items:flex-start}.x-checkbox-vertical .x-checkbox-row-list x-tag{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list x-tag:not(:first-child){margin-top:.25rem}.x-checkbox-vertical .x-checkbox-row-item{margin-right:0}.x-checkbox-vertical .x-checkbox-row-item:not(:first-child){margin-top:.25rem}.x-checkbox-box{border:var(--x-border-width) solid var(--x-border);width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);border-radius:.425rem;background-color:var(--x-background-a100);position:relative;display:inline-block;box-sizing:border-box;transition:all .3s}.x-checkbox-box:hover{border-color:var(--x-primary)}.x-checkbox-box:after{position:absolute;top:.35rem;left:.175rem;display:inline-block;width:.3rem;height:.6rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0;border-left:0;transform:rotate(40deg) scale(0) translate(-50%,-50%);opacity:0;transition:scale .2s;content:\" \"}.x-checkbox-label{margin-left:.325rem;-webkit-user-select:none;user-select:none}.x-checkbox-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-checkbox-before:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-before{margin-right:var(--x-padding-medium)}.x-checkbox-before.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-checkbox-before.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-before.x-checkbox-button .x-checkbox-row-before,.x-checkbox-before.x-checkbox-icon .x-checkbox-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-before-template .x-checkbox-row-before{display:contents}.x-checkbox-before-template .x-checkbox-row-list{margin-left:var(--x-padding-medium)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list{margin-left:0}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-left:calc(var(--x-border-width) * -1)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-after{margin-left:var(--x-padding-medium)}.x-checkbox-after.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-checkbox-after.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after.x-checkbox-button .x-checkbox-row-after,.x-checkbox-after.x-checkbox-icon .x-checkbox-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-after-template .x-checkbox-row-after{display:contents}.x-checkbox-after-template .x-checkbox-row-list{margin-right:var(--x-padding-medium)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list{margin-right:0}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-right:calc(var(--x-border-width) * -1)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox.x-disabled .x-checkbox-item.x-indeterminate .x-checkbox-box:after{background-color:var(--x-text-400)}.x-checkbox.x-disabled .x-checkbox-item.x-checked .x-checkbox-box:after{background-color:transparent}.x-checkbox.x-disabled .x-checkbox-item{color:var(--x-text-400);cursor:not-allowed}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox.x-invalid>label,.x-checkbox.x-required>label{color:var(--x-danger)}.x-checkbox.x-direction-row>label{padding:0 .5rem 0 0}.x-checkbox.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-checkbox.x-direction-column,.x-checkbox.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: "21.0.0", ngImport: i0, type: XCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCheckboxComponent, isStandalone: true, selector: "x-checkbox", providers: [XValueAccessor(XCheckboxComponent)], viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #checkbox\r\n  class=\"x-checkbox\"\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-checkbox-button]=\"button()\"\r\n  [class.x-checkbox-icon]=\"icon()\"\r\n  [class.x-checkbox-vertical]=\"vertical()\"\r\n  [class.x-checkbox-after]=\"after()\"\r\n  [class.x-checkbox-before]=\"before()\"\r\n  [class.x-checkbox-after-template]=\"afterIsTemplate()\"\r\n  [class.x-checkbox-before-template]=\"beforeIsTemplate()\"\r\n  [ngClass]=\"classMap()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-checkbox-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      *xOutlet=\"label()\"\r\n    >\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n  <div class=\"x-checkbox-row\">\r\n    @if (before()) {\r\n      <div class=\"x-checkbox-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-checkbox-row-list\">\r\n      @switch (checkboxType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-checkbox-row-item\"\r\n              [class.x-checked]=\"item.checked!\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              [class.x-indeterminate]=\"indeterminate()\"\r\n              (click)=\"checkboxClick($event, item)\"\r\n            >\r\n              <span class=\"x-checkbox-box\"></span>\r\n              <span class=\"x-checkbox-label\">\r\n                <ng-container *xOutlet=\"item.label; context: { $node: item.node }\">{{ item.label }}</ng-container>\r\n              </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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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) {\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]=\"item.checked!\"\r\n              (click)=\"checkboxClick($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-checkbox-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-checkbox{display:inline-block}.x-checkbox{margin:0;padding:0}.x-checkbox{width:100%}.x-checkbox.x-flex{display:flex}.x-checkbox.x-justify-start{justify-content:flex-start}.x-checkbox.x-justify-center{justify-content:center}.x-checkbox.x-justify-end{justify-content:flex-end}.x-checkbox.x-justify-space-between{justify-content:space-between}.x-checkbox.x-justify-space-around{justify-content:space-around}.x-checkbox.x-align-start{align-items:flex-start}.x-checkbox.x-align-center{align-items:center}.x-checkbox.x-align-end{align-items:flex-end}.x-checkbox.x-direction-column{flex-direction:column}.x-checkbox.x-direction-column-reverse{flex-direction:column-reverse}.x-checkbox.x-direction-row{flex-direction:row}.x-checkbox.x-direction-row-reverse{flex-direction:row-reverse}.x-checkbox>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:500}.x-checkbox>label.x-text-align-start{text-align:start}.x-checkbox>label.x-text-align-center{text-align:center}.x-checkbox>label.x-text-align-end{text-align:end}.x-checkbox-row{flex:1;display:flex;align-items:center;flex-wrap:wrap}.x-checkbox-row .x-checkbox-row-before,.x-checkbox-row .x-checkbox-row-after{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-checkbox-row-list{position:relative;display:inline-flex;align-items:center}.x-checkbox-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-checkbox-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-checkbox-row-item:hover{color:var(--x-primary)}.x-checkbox-row-item:hover .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item:last-child{margin-right:0}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box:after{top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--x-primary);border:0;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:.125rem;content:\" \";transition:transform .2s}.x-checkbox-row-item.x-checked .x-checkbox-box{border-color:var(--x-primary);background-color:var(--x-primary)}.x-checkbox-row-item.x-checked .x-checkbox-box:after{border:.125rem solid white;border-top:0;border-left:0;top:.575rem;left:.325rem;width:.425rem;height:.825rem;transform:rotate(40deg) scale(1) translate(-50%,-50%);opacity:1;transition:transform .2s;content:\" \"}.x-checkbox-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-checkbox-row-item.x-disabled .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox-row-item.x-disabled .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox-button .x-checkbox-row-before,.x-checkbox-icon .x-checkbox-row-before{margin-right:0}.x-checkbox-button .x-checkbox-row-after,.x-checkbox-icon .x-checkbox-row-after{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list{flex-direction:column;align-items:flex-start}.x-checkbox-vertical .x-checkbox-row-list x-tag{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list x-tag:not(:first-child){margin-top:.25rem}.x-checkbox-vertical .x-checkbox-row-item{margin-right:0}.x-checkbox-vertical .x-checkbox-row-item:not(:first-child){margin-top:.25rem}.x-checkbox-box{border:var(--x-border-width) solid var(--x-border);width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);border-radius:.425rem;background-color:var(--x-background-a100);position:relative;display:inline-block;box-sizing:border-box;transition:all .3s}.x-checkbox-box:hover{border-color:var(--x-primary)}.x-checkbox-box:after{position:absolute;top:.35rem;left:.175rem;display:inline-block;width:.3rem;height:.6rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0;border-left:0;transform:rotate(40deg) scale(0) translate(-50%,-50%);opacity:0;transition:scale .2s;content:\" \"}.x-checkbox-label{margin-left:.325rem;-webkit-user-select:none;user-select:none}.x-checkbox-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-checkbox-before:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-before{margin-right:var(--x-padding-medium)}.x-checkbox-before.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-checkbox-before.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-before.x-checkbox-button .x-checkbox-row-before,.x-checkbox-before.x-checkbox-icon .x-checkbox-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-before-template .x-checkbox-row-before{display:contents}.x-checkbox-before-template .x-checkbox-row-list{margin-left:var(--x-padding-medium)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list{margin-left:0}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-left:calc(var(--x-border-width) * -1)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-after{margin-left:var(--x-padding-medium)}.x-checkbox-after.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-checkbox-after.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after.x-checkbox-button .x-checkbox-row-after,.x-checkbox-after.x-checkbox-icon .x-checkbox-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-after-template .x-checkbox-row-after{display:contents}.x-checkbox-after-template .x-checkbox-row-list{margin-right:var(--x-padding-medium)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list{margin-right:0}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-right:calc(var(--x-border-width) * -1)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox.x-disabled .x-checkbox-item.x-indeterminate .x-checkbox-box:after{background-color:var(--x-text-400)}.x-checkbox.x-disabled .x-checkbox-item.x-checked .x-checkbox-box:after{background-color:transparent}.x-checkbox.x-disabled .x-checkbox-item{color:var(--x-text-400);cursor:not-allowed}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox.x-invalid>label,.x-checkbox.x-required>label{color:var(--x-danger)}.x-checkbox.x-direction-row>label{padding:0 .5rem 0 0}.x-checkbox.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-checkbox.x-direction-column,.x-checkbox.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: "20.3.5", ngImport: i0, type: XCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCheckboxPrefix}`, imports: [NgClass, FormsModule, XButtonComponent, XButtonsComponent, XTagComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XCheckboxComponent)], template: "<div\r\n  #checkbox\r\n  class=\"x-checkbox\"\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-checkbox-button]=\"button()\"\r\n  [class.x-checkbox-icon]=\"icon()\"\r\n  [class.x-checkbox-vertical]=\"vertical()\"\r\n  [class.x-checkbox-after]=\"after()\"\r\n  [class.x-checkbox-before]=\"before()\"\r\n  [class.x-checkbox-after-template]=\"afterIsTemplate()\"\r\n  [class.x-checkbox-before-template]=\"beforeIsTemplate()\"\r\n  [ngClass]=\"classMap()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-checkbox-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      *xOutlet=\"label()\"\r\n    >\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n  <div class=\"x-checkbox-row\">\r\n    @if (before()) {\r\n      <div class=\"x-checkbox-row-before\">\r\n        <ng-container *xOutlet=\"before()\">{{ before() }}</ng-container>\r\n      </div>\r\n    }\r\n    <div class=\"x-checkbox-row-list\">\r\n      @switch (checkboxType()) {\r\n        @case ('initial') {\r\n          @for (item of nodes(); track item.id) {\r\n            <div\r\n              class=\"x-checkbox-row-item\"\r\n              [class.x-checked]=\"item.checked!\"\r\n              [class.x-disabled]=\"disabledComputed() || item.disabled\"\r\n              [class.x-indeterminate]=\"indeterminate()\"\r\n              (click)=\"checkboxClick($event, item)\"\r\n            >\r\n              <span class=\"x-checkbox-box\"></span>\r\n              <span class=\"x-checkbox-label\">\r\n                <ng-container *xOutlet=\"item.label; context: { $node: item.node }\">{{ item.label }}</ng-container>\r\n              </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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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                [title]=\"item.title!\"\r\n                [size]=\"size()\"\r\n                [type]=\"type()\"\r\n                [activated]=\"item.checked!\"\r\n                [disabled]=\"disabledComputed() || item.disabled!\"\r\n                attrType=\"button\"\r\n                (click)=\"checkboxClick($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) {\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]=\"item.checked!\"\r\n              (click)=\"checkboxClick($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-checkbox-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-checkbox{display:inline-block}.x-checkbox{margin:0;padding:0}.x-checkbox{width:100%}.x-checkbox.x-flex{display:flex}.x-checkbox.x-justify-start{justify-content:flex-start}.x-checkbox.x-justify-center{justify-content:center}.x-checkbox.x-justify-end{justify-content:flex-end}.x-checkbox.x-justify-space-between{justify-content:space-between}.x-checkbox.x-justify-space-around{justify-content:space-around}.x-checkbox.x-align-start{align-items:flex-start}.x-checkbox.x-align-center{align-items:center}.x-checkbox.x-align-end{align-items:flex-end}.x-checkbox.x-direction-column{flex-direction:column}.x-checkbox.x-direction-column-reverse{flex-direction:column-reverse}.x-checkbox.x-direction-row{flex-direction:row}.x-checkbox.x-direction-row-reverse{flex-direction:row-reverse}.x-checkbox>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:500}.x-checkbox>label.x-text-align-start{text-align:start}.x-checkbox>label.x-text-align-center{text-align:center}.x-checkbox>label.x-text-align-end{text-align:end}.x-checkbox-row{flex:1;display:flex;align-items:center;flex-wrap:wrap}.x-checkbox-row .x-checkbox-row-before,.x-checkbox-row .x-checkbox-row-after{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-checkbox-row-list{position:relative;display:inline-flex;align-items:center}.x-checkbox-row-list x-tag:not(:first-child){margin-left:var(--x-font-size)}.x-checkbox-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-checkbox-row-item:hover{color:var(--x-primary)}.x-checkbox-row-item:hover .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item:last-child{margin-right:0}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box{border-color:var(--x-primary)}.x-checkbox-row-item.x-indeterminate:not(.x-checked) .x-checkbox-box:after{top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--x-primary);border:0;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:.125rem;content:\" \";transition:transform .2s}.x-checkbox-row-item.x-checked .x-checkbox-box{border-color:var(--x-primary);background-color:var(--x-primary)}.x-checkbox-row-item.x-checked .x-checkbox-box:after{border:.125rem solid white;border-top:0;border-left:0;top:.575rem;left:.325rem;width:.425rem;height:.825rem;transform:rotate(40deg) scale(1) translate(-50%,-50%);opacity:1;transition:transform .2s;content:\" \"}.x-checkbox-row-item.x-disabled{color:var(--x-text-400);cursor:not-allowed}.x-checkbox-row-item.x-disabled .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox-row-item.x-disabled .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox-button .x-checkbox-row-before,.x-checkbox-icon .x-checkbox-row-before{margin-right:0}.x-checkbox-button .x-checkbox-row-after,.x-checkbox-icon .x-checkbox-row-after{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list{flex-direction:column;align-items:flex-start}.x-checkbox-vertical .x-checkbox-row-list x-tag{margin-left:0}.x-checkbox-vertical .x-checkbox-row-list x-tag:not(:first-child){margin-top:.25rem}.x-checkbox-vertical .x-checkbox-row-item{margin-right:0}.x-checkbox-vertical .x-checkbox-row-item:not(:first-child){margin-top:.25rem}.x-checkbox-box{border:var(--x-border-width) solid var(--x-border);width:calc(var(--x-height-medium) - .875rem);height:calc(var(--x-height-medium) - .875rem);border-radius:.425rem;background-color:var(--x-background-a100);position:relative;display:inline-block;box-sizing:border-box;transition:all .3s}.x-checkbox-box:hover{border-color:var(--x-primary)}.x-checkbox-box:after{position:absolute;top:.35rem;left:.175rem;display:inline-block;width:.3rem;height:.6rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:0;border-left:0;transform:rotate(40deg) scale(0) translate(-50%,-50%);opacity:0;transition:scale .2s;content:\" \"}.x-checkbox-label{margin-left:.325rem;-webkit-user-select:none;user-select:none}.x-checkbox-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-checkbox-before:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-before{margin-right:var(--x-padding-medium)}.x-checkbox-before.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button,.x-checkbox-before.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-before.x-checkbox-button .x-checkbox-row-before,.x-checkbox-before.x-checkbox-icon .x-checkbox-row-before{margin-right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-before-template .x-checkbox-row-before{display:contents}.x-checkbox-before-template .x-checkbox-row-list{margin-left:var(--x-padding-medium)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list{margin-left:0}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-left:calc(var(--x-border-width) * -1)}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input:focus,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:hover,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button:focus{z-index:1}.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-button .x-checkbox-row-before .x-button,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before input,.x-checkbox-before-template.x-checkbox-icon .x-checkbox-row-before .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after:not(.x-checkbox-before-template,.x-checkbox-button,.x-checkbox-icon) .x-checkbox-row-after{margin-left:var(--x-padding-medium)}.x-checkbox-after.x-checkbox-button .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button,.x-checkbox-after.x-checkbox-icon .x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-checkbox-after.x-checkbox-button .x-checkbox-row-after,.x-checkbox-after.x-checkbox-icon .x-checkbox-row-after{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox-after-template .x-checkbox-row-after{display:contents}.x-checkbox-after-template .x-checkbox-row-list{margin-right:var(--x-padding-medium)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list{margin-right:0}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button{margin-right:calc(var(--x-border-width) * -1)}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-list .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-list .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input:focus,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:hover,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button:focus{z-index:1}.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-button .x-checkbox-row-after .x-button,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after input,.x-checkbox-after-template.x-checkbox-icon .x-checkbox-row-after .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-checkbox.x-disabled .x-checkbox-item.x-indeterminate .x-checkbox-box:after{background-color:var(--x-text-400)}.x-checkbox.x-disabled .x-checkbox-item.x-checked .x-checkbox-box:after{background-color:transparent}.x-checkbox.x-disabled .x-checkbox-item{color:var(--x-text-400);cursor:not-allowed}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box{border-color:var(--x-border-a900);background-color:var(--x-border-a300)}.x-checkbox.x-disabled .x-checkbox-item .x-checkbox-box:after{border-color:var(--x-text-400);background-color:transparent}.x-checkbox.x-invalid>label,.x-checkbox.x-required>label{color:var(--x-danger)}.x-checkbox.x-direction-row>label{padding:0 .5rem 0 0}.x-checkbox.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-checkbox.x-direction-column,.x-checkbox.x-direction-column-reverse{align-items:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checkbox: [{ type: i0.ViewChild, args: ['checkbox', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 class XCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxModule, imports: [XCheckboxComponent], exports: [XCheckboxComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxModule, imports: [XCheckboxComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxModule, imports: [XCheckboxComponent], exports: [XCheckboxComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxModule, imports: [XCheckboxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCheckboxComponent],

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

@@ -105,10 +105,10 @@ class XCollapseProperty extends XPropertyFunction(X_COLLAPSE_CONFIG_NAME) {
          */
         this.bordered = input(this.config?.bordered ?? false, ...(ngDevMode ? [{ debugName: "bordered", transform: XToBoolean }] : [{ transform: XToBoolean }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCollapseProperty, isStandalone: true, selector: "x-collapse-property", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCollapseProperty, isStandalone: true, selector: "x-collapse-property", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePrefix}-property`, template: '' }]
         }], propDecorators: { accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
@@ -168,10 +168,10 @@ class XCollapsePanelProperty extends XProperty {
          */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: XToBoolean }] : [{ transform: XToBoolean }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapsePanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCollapsePanelProperty, isStandalone: true, selector: "x-collapse-panel-property", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapsePanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCollapsePanelProperty, isStandalone: true, selector: "x-collapse-panel-property", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapsePanelProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapsePanelProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePanelPrefix}-property`, template: '' }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -204,10 +204,10 @@ class XCollapseComponent extends XCollapseProperty {
             return;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XCollapseComponent, isStandalone: true, selector: "x-collapse", usesInheritance: true, ngImport: i0, template: "<div #collapse class=\"x-collapse\" [class.x-collapse-ghost]=\"ghost()\" [class.x-collapse-bordered]=\"bordered()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-collapse{margin:0;padding:0}.x-collapse{font-size:var(--x-font-size);box-sizing:border-box;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-collapse x-collapse-panel:last-child .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse x-collapse-panel:last-child .x-collapse-panel-body{border-bottom-color:transparent}.x-collapse-bordered{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-header{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-body{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-ghost{border-top:none;border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-header{border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-body{border-bottom:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XCollapseComponent, isStandalone: true, selector: "x-collapse", usesInheritance: true, ngImport: i0, template: "<div #collapse class=\"x-collapse\" [class.x-collapse-ghost]=\"ghost()\" [class.x-collapse-bordered]=\"bordered()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-collapse{margin:0;padding:0}.x-collapse{font-size:var(--x-font-size);box-sizing:border-box;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-collapse x-collapse-panel:last-child .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse x-collapse-panel:last-child .x-collapse-panel-body{border-bottom-color:transparent}.x-collapse-bordered{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-header{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-body{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-ghost{border-top:none;border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-header{border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-body{border-bottom:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #collapse class=\"x-collapse\" [class.x-collapse-ghost]=\"ghost()\" [class.x-collapse-bordered]=\"bordered()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-collapse{margin:0;padding:0}.x-collapse{font-size:var(--x-font-size);box-sizing:border-box;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-collapse x-collapse-panel:last-child .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse x-collapse-panel:last-child .x-collapse-panel-body{border-bottom-color:transparent}.x-collapse-bordered{border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-header{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-bordered x-collapse-panel .x-collapse-panel-body{padding-left:var(--x-padding-medium);padding-right:var(--x-padding-medium)}.x-collapse-ghost{border-top:none;border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-header{border-bottom:none}.x-collapse-ghost x-collapse-panel .x-collapse-panel-body{border-bottom:none}\n"] }]
         }] });
@@ -244,20 +244,20 @@ class XCollapsePanelComponent extends XCollapsePanelProperty {
         else
             this.collapseComponent.change(this.index(), false);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapsePanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCollapsePanelComponent, isStandalone: true, selector: "x-collapse-panel", usesInheritance: true, ngImport: i0, template: "<div class=\"x-collapse-panel\" [class.x-activated]=\"activeSignal()\" [class.x-collapse-panel-disabled]=\"disabled()\">\r\n  <div\r\n    class=\"x-collapse-panel-header x-collapse-panel-icon-{{ collapseComponent?.iconPosition() }}\"\r\n    (click)=\"!disabled() && headerClick()\"\r\n  >\r\n    <div class=\"x-collapse-panel-header-title\">\r\n      <ng-container *xOutlet=\"label()\">{{ label() }}</ng-container>\r\n    </div>\r\n    @if (collapseComponent?.showIcon()) {\r\n      <ng-container *xOutlet=\"collapseComponent?.icon()\">\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"x-collapse-panel-body\" [class.x-collapse-panel-active]=\"activeSignal()\">\r\n    <div class=\"x-collapse-panel-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-collapse-panel{margin:0;padding:0}.x-collapse-panel{box-sizing:border-box}.x-collapse-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--x-padding-small) 0;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:border-color .3s;cursor:pointer}.x-collapse-panel-header-title{flex:1}.x-collapse-panel-header>.x-icon{margin-right:.125rem;color:var(--x-text-300);transition:transform .3s}.x-collapse-panel-disabled .x-collapse-panel-header-title{color:var(--x-text-400);cursor:not-allowed}.x-collapse-panel-icon-left{flex-direction:row-reverse}.x-collapse-panel-body{display:grid;grid-template-rows:0fr;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) transparent;transition:border-color var(--x-animation-duration-base),grid-template-rows var(--x-animation-duration-base);transition-timing-function:ease-in-out}.x-collapse-panel-active{grid-template-rows:1fr}.x-collapse-panel-active .x-collapse-panel-content{padding-bottom:.625rem;visibility:visible;opacity:1}.x-collapse-panel-content{padding-bottom:0;min-height:0;transition:visibility var(--x-animation-duration-base),opacity var(--x-animation-duration-base),padding-bottom var(--x-animation-duration-base);transition-timing-function:ease-in-out;visibility:hidden;overflow:hidden;opacity:0}.x-collapse-panel.x-activated .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse-panel.x-activated .x-collapse-panel-header>.x-icon{transform:rotate(90deg)}.x-collapse-panel.x-activated .x-collapse-panel-body{border-bottom-color:var(--x-border-500)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapsePanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCollapsePanelComponent, isStandalone: true, selector: "x-collapse-panel", usesInheritance: true, ngImport: i0, template: "<div class=\"x-collapse-panel\" [class.x-activated]=\"activeSignal()\" [class.x-collapse-panel-disabled]=\"disabled()\">\r\n  <div\r\n    class=\"x-collapse-panel-header x-collapse-panel-icon-{{ collapseComponent?.iconPosition() }}\"\r\n    (click)=\"!disabled() && headerClick()\"\r\n  >\r\n    <div class=\"x-collapse-panel-header-title\">\r\n      <ng-container *xOutlet=\"label()\">{{ label() }}</ng-container>\r\n    </div>\r\n    @if (collapseComponent?.showIcon()) {\r\n      <ng-container *xOutlet=\"collapseComponent?.icon()\">\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"x-collapse-panel-body\" [class.x-collapse-panel-active]=\"activeSignal()\">\r\n    <div class=\"x-collapse-panel-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-collapse-panel{margin:0;padding:0}.x-collapse-panel{box-sizing:border-box}.x-collapse-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--x-padding-small) 0;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:border-color .3s;cursor:pointer}.x-collapse-panel-header-title{flex:1}.x-collapse-panel-header>.x-icon{margin-right:.125rem;color:var(--x-text-300);transition:transform .3s}.x-collapse-panel-disabled .x-collapse-panel-header-title{color:var(--x-text-400);cursor:not-allowed}.x-collapse-panel-icon-left{flex-direction:row-reverse}.x-collapse-panel-body{display:grid;grid-template-rows:0fr;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) transparent;transition:border-color var(--x-animation-duration-base),grid-template-rows var(--x-animation-duration-base);transition-timing-function:ease-in-out}.x-collapse-panel-active{grid-template-rows:1fr}.x-collapse-panel-active .x-collapse-panel-content{padding-bottom:.625rem;visibility:visible;opacity:1}.x-collapse-panel-content{padding-bottom:0;min-height:0;transition:visibility var(--x-animation-duration-base),opacity var(--x-animation-duration-base),padding-bottom var(--x-animation-duration-base);transition-timing-function:ease-in-out;visibility:hidden;overflow:hidden;opacity:0}.x-collapse-panel.x-activated .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse-panel.x-activated .x-collapse-panel-header>.x-icon{transform:rotate(90deg)}.x-collapse-panel.x-activated .x-collapse-panel-body{border-bottom-color:var(--x-border-500)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapsePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapsePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePanelPrefix}`, imports: [XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-collapse-panel\" [class.x-activated]=\"activeSignal()\" [class.x-collapse-panel-disabled]=\"disabled()\">\r\n  <div\r\n    class=\"x-collapse-panel-header x-collapse-panel-icon-{{ collapseComponent?.iconPosition() }}\"\r\n    (click)=\"!disabled() && headerClick()\"\r\n  >\r\n    <div class=\"x-collapse-panel-header-title\">\r\n      <ng-container *xOutlet=\"label()\">{{ label() }}</ng-container>\r\n    </div>\r\n    @if (collapseComponent?.showIcon()) {\r\n      <ng-container *xOutlet=\"collapseComponent?.icon()\">\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"x-collapse-panel-body\" [class.x-collapse-panel-active]=\"activeSignal()\">\r\n    <div class=\"x-collapse-panel-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-collapse-panel{margin:0;padding:0}.x-collapse-panel{box-sizing:border-box}.x-collapse-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--x-padding-small) 0;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:border-color .3s;cursor:pointer}.x-collapse-panel-header-title{flex:1}.x-collapse-panel-header>.x-icon{margin-right:.125rem;color:var(--x-text-300);transition:transform .3s}.x-collapse-panel-disabled .x-collapse-panel-header-title{color:var(--x-text-400);cursor:not-allowed}.x-collapse-panel-icon-left{flex-direction:row-reverse}.x-collapse-panel-body{display:grid;grid-template-rows:0fr;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) transparent;transition:border-color var(--x-animation-duration-base),grid-template-rows var(--x-animation-duration-base);transition-timing-function:ease-in-out}.x-collapse-panel-active{grid-template-rows:1fr}.x-collapse-panel-active .x-collapse-panel-content{padding-bottom:.625rem;visibility:visible;opacity:1}.x-collapse-panel-content{padding-bottom:0;min-height:0;transition:visibility var(--x-animation-duration-base),opacity var(--x-animation-duration-base),padding-bottom var(--x-animation-duration-base);transition-timing-function:ease-in-out;visibility:hidden;overflow:hidden;opacity:0}.x-collapse-panel.x-activated .x-collapse-panel-header{border-bottom-color:transparent}.x-collapse-panel.x-activated .x-collapse-panel-header>.x-icon{transform:rotate(90deg)}.x-collapse-panel.x-activated .x-collapse-panel-body{border-bottom-color:var(--x-border-500)}\n"] }]
         }] });
 
 class XCollapseModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XCollapseModule, imports: [XCollapseComponent, XCollapsePanelComponent], exports: [XCollapseComponent, XCollapsePanelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseModule, imports: [XCollapsePanelComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XCollapseModule, imports: [XCollapseComponent, XCollapsePanelComponent], exports: [XCollapseComponent, XCollapsePanelComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseModule, imports: [XCollapsePanelComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCollapseComponent, XCollapsePanelComponent],