@ng-nest/ui 17.0.5 → 17.0.7

package/esm2022/steps/steps.component.mjs

@@ -69,10 +69,10 @@ export class XStepsComponent extends XStepsProperty {
         this.nodes = this.setStatus(this.nodes);
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XStepsComponent, isStandalone: true, selector: "x-steps", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #steps class=\"x-steps\" [ngClass]=\"classMap\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <div class=\"x-steps-node x-steps-{{ node.status }}\">\r\n      <div class=\"x-steps-header\">\r\n        <ng-container *xOutlet=\"customTpl; context: { $node: node, $index: i }\">\r\n          <div class=\"x-steps-icon\" [class.x-steps-only-icon]=\"node.icon\">\r\n            @if (node.icon) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            } @else {\r\n              @switch (node.status) {\r\n                @case ('finish') {\r\n                  <x-icon type=\"fto-check\"></x-icon>\r\n                }\r\n                @case ('error') {\r\n                  <x-icon type=\"fto-x\"></x-icon>\r\n                }\r\n                @default {\r\n                  <span>{{ getIndex(i) }}</span>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        </ng-container>\r\n        @if (layout === 'column') {\r\n          <span class=\"x-steps-line\"></span>\r\n        }\r\n      </div>\r\n      <div class=\"x-steps-content\">\r\n        <div class=\"x-steps-title\">\r\n          <span class=\"x-steps-label\">{{ node.label }}</span>\r\n          @if (layout === 'row') {\r\n            <span class=\"x-steps-line\"></span>\r\n          }\r\n        </div>\r\n        <div class=\"x-steps-description\">{{ node.description }}</div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".x-steps{margin:0;padding:0;display:flex}.x-steps-node{position:relative;flex:1;display:flex}.x-steps-node:last-child{flex:inherit}.x-steps-node:last-child .x-steps-line{display:none}.x-steps-content{padding:0 .5rem;position:relative;flex:1;display:flex;flex-direction:column}.x-steps-header{display:flex;flex-direction:column;align-items:center}.x-steps-title{display:flex;align-items:center;line-height:2rem;transition:var(--x-animation-duration-base)}.x-steps-label{padding-right:.5rem;white-space:nowrap;transition:var(--x-animation-duration-base)}.x-steps-line{flex:1;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:var(--x-animation-duration-base)}.x-steps-icon{height:2rem;width:2rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--x-animation-duration-base)}.x-steps-icon>.x-icon{font-size:1rem}.x-steps-icon.x-steps-only-icon{border:none}.x-steps-icon.x-steps-only-icon .x-icon{font-size:1.5rem}.x-steps-description{font-size:var(--x-font-size-small);color:var(--x-text-400);max-width:8rem}.x-steps-row{flex-direction:row}.x-steps-column{flex-direction:column}.x-steps-column .x-steps-header{min-height:5rem}.x-steps-column .x-steps-line{border-bottom:none;border-right:var(--x-border-width) var(--x-border-style) var(--x-border);margin:.5rem 0}.x-steps-column .x-steps-content{padding:0 0 .5rem .5rem}.x-steps-column .x-steps-description{max-width:inherit}.x-steps-wait .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-wait .x-steps-icon{color:var(--x-text-400);background-color:\"\";border-color:\"\"}.x-steps-wait .x-steps-line{border-color:\"\"}.x-steps-process .x-steps-label{color:var(--x-text-300);font-weight:700}.x-steps-process .x-steps-icon{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-steps-process .x-steps-icon.x-steps-only-icon{color:var(--x-primary);background-color:inherit}.x-steps-process .x-steps-line{border-color:\"\"}.x-steps-finish .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-finish .x-steps-icon{color:var(--x-primary);background-color:\"\";border-color:\"\"}.x-steps-finish .x-steps-line{border-color:var(--x-primary)}.x-steps-error .x-steps-label{color:var(--x-danger);font-weight:\"\"}.x-steps-error .x-steps-icon{color:var(--x-danger);background-color:\"\";border-color:var(--x-danger)}.x-steps-error .x-steps-line{border-color:\"\"}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "17.3.0", ngImport: i0, type: XStepsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XStepsComponent, isStandalone: true, selector: "x-steps", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #steps class=\"x-steps\" [ngClass]=\"classMap\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <div class=\"x-steps-node x-steps-{{ node.status }}\">\r\n      <div class=\"x-steps-header\">\r\n        <ng-container *xOutlet=\"customTpl; context: { $node: node, $index: i }\">\r\n          <div class=\"x-steps-icon\" [class.x-steps-only-icon]=\"node.icon\">\r\n            @if (node.icon) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            } @else {\r\n              @switch (node.status) {\r\n                @case ('finish') {\r\n                  <x-icon type=\"fto-check\"></x-icon>\r\n                }\r\n                @case ('error') {\r\n                  <x-icon type=\"fto-x\"></x-icon>\r\n                }\r\n                @default {\r\n                  <span>{{ getIndex(i) }}</span>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        </ng-container>\r\n        @if (layout === 'column') {\r\n          <span class=\"x-steps-line\"></span>\r\n        }\r\n      </div>\r\n      <div class=\"x-steps-content\">\r\n        <div class=\"x-steps-title\">\r\n          <span class=\"x-steps-label\">{{ node.label }}</span>\r\n          @if (layout === 'row') {\r\n            <span class=\"x-steps-line\"></span>\r\n          }\r\n        </div>\r\n        <div class=\"x-steps-description\">{{ node.description }}</div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".x-steps{margin:0;padding:0;display:flex}.x-steps-node{position:relative;flex:1;display:flex}.x-steps-node:last-child{flex:inherit}.x-steps-node:last-child .x-steps-line{display:none}.x-steps-content{padding:0 .5rem;position:relative;flex:1;display:flex;flex-direction:column}.x-steps-header{display:flex;flex-direction:column;align-items:center}.x-steps-title{display:flex;align-items:center;line-height:2rem;transition:var(--x-animation-duration-base)}.x-steps-label{padding-right:.5rem;white-space:nowrap;transition:var(--x-animation-duration-base)}.x-steps-line{flex:1;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:var(--x-animation-duration-base)}.x-steps-icon{height:2rem;width:2rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--x-animation-duration-base)}.x-steps-icon>.x-icon{font-size:1rem}.x-steps-icon.x-steps-only-icon{border:none}.x-steps-icon.x-steps-only-icon .x-icon{font-size:1.5rem}.x-steps-description{font-size:var(--x-font-size-small);color:var(--x-text-400);max-width:8rem}.x-steps-row{flex-direction:row}.x-steps-column{flex-direction:column}.x-steps-column .x-steps-header{min-height:5rem}.x-steps-column .x-steps-line{border-bottom:none;border-right:var(--x-border-width) var(--x-border-style) var(--x-border);margin:.5rem 0}.x-steps-column .x-steps-content{padding:0 0 .5rem .5rem}.x-steps-column .x-steps-description{max-width:inherit}.x-steps-wait .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-wait .x-steps-icon{color:var(--x-text-400);background-color:\"\";border-color:\"\"}.x-steps-wait .x-steps-line{border-color:\"\"}.x-steps-process .x-steps-label{color:var(--x-text-300);font-weight:700}.x-steps-process .x-steps-icon{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-steps-process .x-steps-icon.x-steps-only-icon{color:var(--x-primary);background-color:inherit}.x-steps-process .x-steps-line{border-color:\"\"}.x-steps-finish .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-finish .x-steps-icon{color:var(--x-primary);background-color:\"\";border-color:\"\"}.x-steps-finish .x-steps-line{border-color:var(--x-primary)}.x-steps-error .x-steps-label{color:var(--x-danger);font-weight:\"\"}.x-steps-error .x-steps-icon{color:var(--x-danger);background-color:\"\";border-color:var(--x-danger)}.x-steps-error .x-steps-line{border-color:\"\"}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "17.1.0", ngImport: i0, type: XStepsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XStepsPrefix}`, standalone: true, imports: [NgClass, XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #steps class=\"x-steps\" [ngClass]=\"classMap\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <div class=\"x-steps-node x-steps-{{ node.status }}\">\r\n      <div class=\"x-steps-header\">\r\n        <ng-container *xOutlet=\"customTpl; context: { $node: node, $index: i }\">\r\n          <div class=\"x-steps-icon\" [class.x-steps-only-icon]=\"node.icon\">\r\n            @if (node.icon) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            } @else {\r\n              @switch (node.status) {\r\n                @case ('finish') {\r\n                  <x-icon type=\"fto-check\"></x-icon>\r\n                }\r\n                @case ('error') {\r\n                  <x-icon type=\"fto-x\"></x-icon>\r\n                }\r\n                @default {\r\n                  <span>{{ getIndex(i) }}</span>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        </ng-container>\r\n        @if (layout === 'column') {\r\n          <span class=\"x-steps-line\"></span>\r\n        }\r\n      </div>\r\n      <div class=\"x-steps-content\">\r\n        <div class=\"x-steps-title\">\r\n          <span class=\"x-steps-label\">{{ node.label }}</span>\r\n          @if (layout === 'row') {\r\n            <span class=\"x-steps-line\"></span>\r\n          }\r\n        </div>\r\n        <div class=\"x-steps-description\">{{ node.description }}</div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".x-steps{margin:0;padding:0;display:flex}.x-steps-node{position:relative;flex:1;display:flex}.x-steps-node:last-child{flex:inherit}.x-steps-node:last-child .x-steps-line{display:none}.x-steps-content{padding:0 .5rem;position:relative;flex:1;display:flex;flex-direction:column}.x-steps-header{display:flex;flex-direction:column;align-items:center}.x-steps-title{display:flex;align-items:center;line-height:2rem;transition:var(--x-animation-duration-base)}.x-steps-label{padding-right:.5rem;white-space:nowrap;transition:var(--x-animation-duration-base)}.x-steps-line{flex:1;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);transition:var(--x-animation-duration-base)}.x-steps-icon{height:2rem;width:2rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--x-animation-duration-base)}.x-steps-icon>.x-icon{font-size:1rem}.x-steps-icon.x-steps-only-icon{border:none}.x-steps-icon.x-steps-only-icon .x-icon{font-size:1.5rem}.x-steps-description{font-size:var(--x-font-size-small);color:var(--x-text-400);max-width:8rem}.x-steps-row{flex-direction:row}.x-steps-column{flex-direction:column}.x-steps-column .x-steps-header{min-height:5rem}.x-steps-column .x-steps-line{border-bottom:none;border-right:var(--x-border-width) var(--x-border-style) var(--x-border);margin:.5rem 0}.x-steps-column .x-steps-content{padding:0 0 .5rem .5rem}.x-steps-column .x-steps-description{max-width:inherit}.x-steps-wait .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-wait .x-steps-icon{color:var(--x-text-400);background-color:\"\";border-color:\"\"}.x-steps-wait .x-steps-line{border-color:\"\"}.x-steps-process .x-steps-label{color:var(--x-text-300);font-weight:700}.x-steps-process .x-steps-icon{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-steps-process .x-steps-icon.x-steps-only-icon{color:var(--x-primary);background-color:inherit}.x-steps-process .x-steps-line{border-color:\"\"}.x-steps-finish .x-steps-label{color:var(--x-text-400);font-weight:\"\"}.x-steps-finish .x-steps-icon{color:var(--x-primary);background-color:\"\";border-color:\"\"}.x-steps-finish .x-steps-line{border-color:var(--x-primary)}.x-steps-error .x-steps-label{color:var(--x-danger);font-weight:\"\"}.x-steps-error .x-steps-icon{color:var(--x-danger);background-color:\"\";border-color:var(--x-danger)}.x-steps-error .x-steps-line{border-color:\"\"}\n"] }]
         }] });

package/esm2022/steps/steps.module.mjs

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { XStepsComponent } from './steps.component';
 import * as i0 from "@angular/core";
 export class XStepsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XStepsModule, imports: [XStepsComponent], exports: [XStepsComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsModule, imports: [XStepsComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XStepsModule, imports: [XStepsComponent], exports: [XStepsComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsModule, imports: [XStepsComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XStepsComponent],

package/esm2022/steps/steps.property.mjs

@@ -35,8 +35,8 @@ export class XStepsProperty extends XProperty {
          */
         this.startIndex = 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XStepsProperty, selector: "x-steps-property", inputs: { data: "data", layout: "layout", activatedIndex: "activatedIndex", startIndex: "startIndex", status: "status", customTpl: "customTpl", nodeStatus: "nodeStatus" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XStepsProperty, selector: "x-steps-property", inputs: { data: "data", layout: "layout", activatedIndex: "activatedIndex", startIndex: "startIndex", status: "status", customTpl: "customTpl", nodeStatus: "nodeStatus" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XDataConvert()
@@ -50,7 +50,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XStepsProperty.prototype, "nodeStatus", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStepsProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStepsProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XStepsPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{

package/esm2022/switch/switch.component.mjs

@@ -43,10 +43,10 @@ export class XSwitchComponent extends XSwitchProperty {
         this.ngOnInit();
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XSwitchComponent, isStandalone: true, selector: "x-switch", providers: [XValueAccessor(XSwitchComponent)], viewQueries: [{ propertyName: "switch", first: true, predicate: ["switch"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #switch\r\n  class=\"x-switch\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-switch-loading]=\"loading\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-checked]=\"value\"\r\n  [class.x-disabled]=\"disabled\"\r\n>\r\n  @if (label) {\r\n    <label [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  }\r\n  <div class=\"x-switch-row\">\r\n    <div class=\"x-switch-slider\" (click)=\"switchClick()\">\r\n      <div class=\"x-switch-handle\">\r\n        <div class=\"x-switch-spinner\" [x-loading]=\"loading\" [size]=\"size\"></div>\r\n      </div>\r\n      <div class=\"x-switch-text\">\r\n        @if (value) {\r\n          <ng-container *xOutlet=\"checkedText\">{{ checkedText }}</ng-container>\r\n        } @else {\r\n          <ng-container *xOutlet=\"unCheckedText\">{{ unCheckedText }}</ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-switch{margin:0;padding:0;width:100%}.x-switch.x-flex{display:flex}.x-switch.x-justify-start{justify-content:flex-start}.x-switch.x-justify-center{justify-content:center}.x-switch.x-justify-end{justify-content:flex-end}.x-switch.x-justify-space-between{justify-content:space-between}.x-switch.x-justify-space-around{justify-content:space-around}.x-switch.x-align-start{align-items:flex-start}.x-switch.x-align-center{align-items:center}.x-switch.x-align-end{align-items:flex-end}.x-switch.x-direction-column{flex-direction:column}.x-switch.x-direction-column-reverse{flex-direction:column-reverse}.x-switch.x-direction-row{flex-direction:row}.x-switch.x-direction-row-reverse{flex-direction:row-reverse}.x-switch>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-switch>label.x-text-align-start{text-align:start}.x-switch>label.x-text-align-center{text-align:center}.x-switch>label.x-text-align-end{text-align:end}.x-switch-row{flex:1;display:flex;align-items:center;position:relative;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem)}.x-switch-slider{display:inline-flex;align-items:center;position:relative;border:var(--x-border-width) solid var(--x-info);background-color:var(--x-info);cursor:pointer;transition:var(--x-animation-duration-slow)}.x-switch-handle{position:absolute;transition:var(--x-animation-duration-slow);left:0;display:block}.x-switch-handle:before{position:absolute;inset:0;box-shadow:0 .125rem .25rem #00230b33;background-color:var(--x-background-a100);content:\"\"}.x-switch-spinner .x-loading{background-color:transparent}.x-switch-spinner .x-loading-spinner{display:flex;align-items:center}.x-switch-text{color:var(--x-white);transition:var(--x-animation-duration-slow)}.x-switch.x-checked .x-switch-slider{background-color:var(--x-primary);border-color:var(--x-primary)}.x-switch.x-required>label{color:var(--x-danger)}.x-switch.x-disabled .x-switch-slider,.x-switch-loading .x-switch-slider{cursor:not-allowed;background-color:var(--x-info-500);border-color:var(--x-info-500)}.x-switch.x-disabled.x-checked .x-switch-slider,.x-switch-loading.x-checked .x-switch-slider{background-color:var(--x-primary-500);border-color:var(--x-primary-500)}.x-switch.x-direction-row>label{padding:0 .5rem 0 0}.x-switch.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-switch.x-direction-column,.x-switch.x-direction-column-reverse{align-items:inherit}.x-switch-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-switch-big .x-switch-slider{height:calc(var(--x-height-big) - .25rem);min-width:calc((var(--x-height-big) - .25rem) * 2);border-radius:calc(var(--x-height-big) - .25rem);margin:.125rem 0}.x-switch-big .x-switch-handle{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem);margin:0 .125rem}.x-switch-big .x-switch-handle:before{border-radius:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-switch-text{margin-left:calc(var(--x-height-big) - .125rem);margin-right:.5rem}.x-switch-big.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-big) - .5rem) - .25rem)}.x-switch-big.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-big) - .25rem)}.x-switch-big .x-switch-spinner{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-loading-big .x-loading-circular{width:calc(var(--x-height-big) - .625rem);height:calc(var(--x-height-big) - .625rem)}.x-switch-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-switch-large .x-switch-slider{height:calc(var(--x-height-large) - .25rem);min-width:calc((var(--x-height-large) - .25rem) * 2);border-radius:calc(var(--x-height-large) - .25rem);margin:.125rem 0}.x-switch-large .x-switch-handle{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem);margin:0 .125rem}.x-switch-large .x-switch-handle:before{border-radius:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-switch-text{margin-left:calc(var(--x-height-large) - .125rem);margin-right:.5rem}.x-switch-large.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-large) - .5rem) - .25rem)}.x-switch-large.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-large) - .25rem)}.x-switch-large .x-switch-spinner{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-loading-large .x-loading-circular{width:calc(var(--x-height-large) - .625rem);height:calc(var(--x-height-large) - .625rem)}.x-switch-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-switch-medium .x-switch-slider{height:calc(var(--x-height-medium) - .25rem);min-width:calc((var(--x-height-medium) - .25rem) * 2);border-radius:calc(var(--x-height-medium) - .25rem);margin:.125rem 0}.x-switch-medium .x-switch-handle{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem);margin:0 .125rem}.x-switch-medium .x-switch-handle:before{border-radius:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-switch-text{margin-left:calc(var(--x-height-medium) - .125rem);margin-right:.5rem}.x-switch-medium.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-medium) - .5rem) - .25rem)}.x-switch-medium.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-medium) - .25rem)}.x-switch-medium .x-switch-spinner{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-loading-medium .x-loading-circular{width:calc(var(--x-height-medium) - .625rem);height:calc(var(--x-height-medium) - .625rem)}.x-switch-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-switch-small .x-switch-slider{height:calc(var(--x-height-small) - .25rem);min-width:calc((var(--x-height-small) - .25rem) * 2);border-radius:calc(var(--x-height-small) - .25rem);margin:.125rem 0}.x-switch-small .x-switch-handle{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem);margin:0 .125rem}.x-switch-small .x-switch-handle:before{border-radius:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-switch-text{margin-left:calc(var(--x-height-small) - .125rem);margin-right:.5rem}.x-switch-small.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-small) - .5rem) - .25rem)}.x-switch-small.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-small) - .25rem)}.x-switch-small .x-switch-spinner{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-loading-small .x-loading-circular{width:calc(var(--x-height-small) - .625rem);height:calc(var(--x-height-small) - .625rem)}.x-switch-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-switch-mini .x-switch-slider{height:calc(var(--x-height-mini) - .25rem);min-width:calc((var(--x-height-mini) - .25rem) * 2);border-radius:calc(var(--x-height-mini) - .25rem);margin:.125rem 0}.x-switch-mini .x-switch-handle{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem);margin:0 .125rem}.x-switch-mini .x-switch-handle:before{border-radius:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-switch-text{margin-left:calc(var(--x-height-mini) - .125rem);margin-right:.5rem}.x-switch-mini.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-mini) - .5rem) - .25rem)}.x-switch-mini.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-mini) - .25rem)}.x-switch-mini .x-switch-spinner{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-loading-mini .x-loading-circular{width:calc(var(--x-height-mini) - .625rem);height:calc(var(--x-height-mini) - .625rem)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { 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: "17.3.0", ngImport: i0, type: XSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XSwitchComponent, isStandalone: true, selector: "x-switch", providers: [XValueAccessor(XSwitchComponent)], viewQueries: [{ propertyName: "switch", first: true, predicate: ["switch"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #switch\r\n  class=\"x-switch\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-switch-loading]=\"loading\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-checked]=\"value\"\r\n  [class.x-disabled]=\"disabled\"\r\n>\r\n  @if (label) {\r\n    <label [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  }\r\n  <div class=\"x-switch-row\">\r\n    <div class=\"x-switch-slider\" (click)=\"switchClick()\">\r\n      <div class=\"x-switch-handle\">\r\n        <div class=\"x-switch-spinner\" [x-loading]=\"loading\" [size]=\"size\"></div>\r\n      </div>\r\n      <div class=\"x-switch-text\">\r\n        @if (value) {\r\n          <ng-container *xOutlet=\"checkedText\">{{ checkedText }}</ng-container>\r\n        } @else {\r\n          <ng-container *xOutlet=\"unCheckedText\">{{ unCheckedText }}</ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-switch{margin:0;padding:0;width:100%}.x-switch.x-flex{display:flex}.x-switch.x-justify-start{justify-content:flex-start}.x-switch.x-justify-center{justify-content:center}.x-switch.x-justify-end{justify-content:flex-end}.x-switch.x-justify-space-between{justify-content:space-between}.x-switch.x-justify-space-around{justify-content:space-around}.x-switch.x-align-start{align-items:flex-start}.x-switch.x-align-center{align-items:center}.x-switch.x-align-end{align-items:flex-end}.x-switch.x-direction-column{flex-direction:column}.x-switch.x-direction-column-reverse{flex-direction:column-reverse}.x-switch.x-direction-row{flex-direction:row}.x-switch.x-direction-row-reverse{flex-direction:row-reverse}.x-switch>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-switch>label.x-text-align-start{text-align:start}.x-switch>label.x-text-align-center{text-align:center}.x-switch>label.x-text-align-end{text-align:end}.x-switch-row{flex:1;display:flex;align-items:center;position:relative;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem)}.x-switch-slider{display:inline-flex;align-items:center;position:relative;border:var(--x-border-width) solid var(--x-info);background-color:var(--x-info);cursor:pointer;transition:var(--x-animation-duration-slow)}.x-switch-handle{position:absolute;transition:var(--x-animation-duration-slow);left:0;display:block}.x-switch-handle:before{position:absolute;inset:0;box-shadow:0 .125rem .25rem #00230b33;background-color:var(--x-background-a100);content:\"\"}.x-switch-spinner .x-loading{background-color:transparent}.x-switch-spinner .x-loading-spinner{display:flex;align-items:center}.x-switch-text{color:var(--x-white);transition:var(--x-animation-duration-slow)}.x-switch.x-checked .x-switch-slider{background-color:var(--x-primary);border-color:var(--x-primary)}.x-switch.x-required>label{color:var(--x-danger)}.x-switch.x-disabled .x-switch-slider,.x-switch-loading .x-switch-slider{cursor:not-allowed;background-color:var(--x-info-500);border-color:var(--x-info-500)}.x-switch.x-disabled.x-checked .x-switch-slider,.x-switch-loading.x-checked .x-switch-slider{background-color:var(--x-primary-500);border-color:var(--x-primary-500)}.x-switch.x-direction-row>label{padding:0 .5rem 0 0}.x-switch.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-switch.x-direction-column,.x-switch.x-direction-column-reverse{align-items:inherit}.x-switch-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-switch-big .x-switch-slider{height:calc(var(--x-height-big) - .25rem);min-width:calc((var(--x-height-big) - .25rem) * 2);border-radius:calc(var(--x-height-big) - .25rem);margin:.125rem 0}.x-switch-big .x-switch-handle{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem);margin:0 .125rem}.x-switch-big .x-switch-handle:before{border-radius:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-switch-text{margin-left:calc(var(--x-height-big) - .125rem);margin-right:.5rem}.x-switch-big.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-big) - .5rem) - .25rem)}.x-switch-big.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-big) - .25rem)}.x-switch-big .x-switch-spinner{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-loading-big .x-loading-circular{width:calc(var(--x-height-big) - .625rem);height:calc(var(--x-height-big) - .625rem)}.x-switch-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-switch-large .x-switch-slider{height:calc(var(--x-height-large) - .25rem);min-width:calc((var(--x-height-large) - .25rem) * 2);border-radius:calc(var(--x-height-large) - .25rem);margin:.125rem 0}.x-switch-large .x-switch-handle{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem);margin:0 .125rem}.x-switch-large .x-switch-handle:before{border-radius:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-switch-text{margin-left:calc(var(--x-height-large) - .125rem);margin-right:.5rem}.x-switch-large.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-large) - .5rem) - .25rem)}.x-switch-large.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-large) - .25rem)}.x-switch-large .x-switch-spinner{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-loading-large .x-loading-circular{width:calc(var(--x-height-large) - .625rem);height:calc(var(--x-height-large) - .625rem)}.x-switch-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-switch-medium .x-switch-slider{height:calc(var(--x-height-medium) - .25rem);min-width:calc((var(--x-height-medium) - .25rem) * 2);border-radius:calc(var(--x-height-medium) - .25rem);margin:.125rem 0}.x-switch-medium .x-switch-handle{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem);margin:0 .125rem}.x-switch-medium .x-switch-handle:before{border-radius:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-switch-text{margin-left:calc(var(--x-height-medium) - .125rem);margin-right:.5rem}.x-switch-medium.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-medium) - .5rem) - .25rem)}.x-switch-medium.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-medium) - .25rem)}.x-switch-medium .x-switch-spinner{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-loading-medium .x-loading-circular{width:calc(var(--x-height-medium) - .625rem);height:calc(var(--x-height-medium) - .625rem)}.x-switch-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-switch-small .x-switch-slider{height:calc(var(--x-height-small) - .25rem);min-width:calc((var(--x-height-small) - .25rem) * 2);border-radius:calc(var(--x-height-small) - .25rem);margin:.125rem 0}.x-switch-small .x-switch-handle{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem);margin:0 .125rem}.x-switch-small .x-switch-handle:before{border-radius:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-switch-text{margin-left:calc(var(--x-height-small) - .125rem);margin-right:.5rem}.x-switch-small.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-small) - .5rem) - .25rem)}.x-switch-small.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-small) - .25rem)}.x-switch-small .x-switch-spinner{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-loading-small .x-loading-circular{width:calc(var(--x-height-small) - .625rem);height:calc(var(--x-height-small) - .625rem)}.x-switch-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-switch-mini .x-switch-slider{height:calc(var(--x-height-mini) - .25rem);min-width:calc((var(--x-height-mini) - .25rem) * 2);border-radius:calc(var(--x-height-mini) - .25rem);margin:.125rem 0}.x-switch-mini .x-switch-handle{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem);margin:0 .125rem}.x-switch-mini .x-switch-handle:before{border-radius:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-switch-text{margin-left:calc(var(--x-height-mini) - .125rem);margin-right:.5rem}.x-switch-mini.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-mini) - .5rem) - .25rem)}.x-switch-mini.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-mini) - .25rem)}.x-switch-mini .x-switch-spinner{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-loading-mini .x-loading-circular{width:calc(var(--x-height-mini) - .625rem);height:calc(var(--x-height-mini) - .625rem)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XSwitchPrefix}`, standalone: true, imports: [NgClass, FormsModule, ReactiveFormsModule, XLoadingComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XSwitchComponent)], template: "<div\r\n  #switch\r\n  class=\"x-switch\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-switch-loading]=\"loading\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-checked]=\"value\"\r\n  [class.x-disabled]=\"disabled\"\r\n>\r\n  @if (label) {\r\n    <label [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  }\r\n  <div class=\"x-switch-row\">\r\n    <div class=\"x-switch-slider\" (click)=\"switchClick()\">\r\n      <div class=\"x-switch-handle\">\r\n        <div class=\"x-switch-spinner\" [x-loading]=\"loading\" [size]=\"size\"></div>\r\n      </div>\r\n      <div class=\"x-switch-text\">\r\n        @if (value) {\r\n          <ng-container *xOutlet=\"checkedText\">{{ checkedText }}</ng-container>\r\n        } @else {\r\n          <ng-container *xOutlet=\"unCheckedText\">{{ unCheckedText }}</ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-switch{margin:0;padding:0;width:100%}.x-switch.x-flex{display:flex}.x-switch.x-justify-start{justify-content:flex-start}.x-switch.x-justify-center{justify-content:center}.x-switch.x-justify-end{justify-content:flex-end}.x-switch.x-justify-space-between{justify-content:space-between}.x-switch.x-justify-space-around{justify-content:space-around}.x-switch.x-align-start{align-items:flex-start}.x-switch.x-align-center{align-items:center}.x-switch.x-align-end{align-items:flex-end}.x-switch.x-direction-column{flex-direction:column}.x-switch.x-direction-column-reverse{flex-direction:column-reverse}.x-switch.x-direction-row{flex-direction:row}.x-switch.x-direction-row-reverse{flex-direction:row-reverse}.x-switch>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-switch>label.x-text-align-start{text-align:start}.x-switch>label.x-text-align-center{text-align:center}.x-switch>label.x-text-align-end{text-align:end}.x-switch-row{flex:1;display:flex;align-items:center;position:relative;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem)}.x-switch-slider{display:inline-flex;align-items:center;position:relative;border:var(--x-border-width) solid var(--x-info);background-color:var(--x-info);cursor:pointer;transition:var(--x-animation-duration-slow)}.x-switch-handle{position:absolute;transition:var(--x-animation-duration-slow);left:0;display:block}.x-switch-handle:before{position:absolute;inset:0;box-shadow:0 .125rem .25rem #00230b33;background-color:var(--x-background-a100);content:\"\"}.x-switch-spinner .x-loading{background-color:transparent}.x-switch-spinner .x-loading-spinner{display:flex;align-items:center}.x-switch-text{color:var(--x-white);transition:var(--x-animation-duration-slow)}.x-switch.x-checked .x-switch-slider{background-color:var(--x-primary);border-color:var(--x-primary)}.x-switch.x-required>label{color:var(--x-danger)}.x-switch.x-disabled .x-switch-slider,.x-switch-loading .x-switch-slider{cursor:not-allowed;background-color:var(--x-info-500);border-color:var(--x-info-500)}.x-switch.x-disabled.x-checked .x-switch-slider,.x-switch-loading.x-checked .x-switch-slider{background-color:var(--x-primary-500);border-color:var(--x-primary-500)}.x-switch.x-direction-row>label{padding:0 .5rem 0 0}.x-switch.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-switch.x-direction-column,.x-switch.x-direction-column-reverse{align-items:inherit}.x-switch-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-switch-big .x-switch-slider{height:calc(var(--x-height-big) - .25rem);min-width:calc((var(--x-height-big) - .25rem) * 2);border-radius:calc(var(--x-height-big) - .25rem);margin:.125rem 0}.x-switch-big .x-switch-handle{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem);margin:0 .125rem}.x-switch-big .x-switch-handle:before{border-radius:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-switch-text{margin-left:calc(var(--x-height-big) - .125rem);margin-right:.5rem}.x-switch-big.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-big) - .5rem) - .25rem)}.x-switch-big.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-big) - .25rem)}.x-switch-big .x-switch-spinner{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-switch-big .x-loading-big .x-loading-circular{width:calc(var(--x-height-big) - .625rem);height:calc(var(--x-height-big) - .625rem)}.x-switch-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-switch-large .x-switch-slider{height:calc(var(--x-height-large) - .25rem);min-width:calc((var(--x-height-large) - .25rem) * 2);border-radius:calc(var(--x-height-large) - .25rem);margin:.125rem 0}.x-switch-large .x-switch-handle{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem);margin:0 .125rem}.x-switch-large .x-switch-handle:before{border-radius:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-switch-text{margin-left:calc(var(--x-height-large) - .125rem);margin-right:.5rem}.x-switch-large.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-large) - .5rem) - .25rem)}.x-switch-large.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-large) - .25rem)}.x-switch-large .x-switch-spinner{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-switch-large .x-loading-large .x-loading-circular{width:calc(var(--x-height-large) - .625rem);height:calc(var(--x-height-large) - .625rem)}.x-switch-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-switch-medium .x-switch-slider{height:calc(var(--x-height-medium) - .25rem);min-width:calc((var(--x-height-medium) - .25rem) * 2);border-radius:calc(var(--x-height-medium) - .25rem);margin:.125rem 0}.x-switch-medium .x-switch-handle{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem);margin:0 .125rem}.x-switch-medium .x-switch-handle:before{border-radius:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-switch-text{margin-left:calc(var(--x-height-medium) - .125rem);margin-right:.5rem}.x-switch-medium.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-medium) - .5rem) - .25rem)}.x-switch-medium.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-medium) - .25rem)}.x-switch-medium .x-switch-spinner{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-switch-medium .x-loading-medium .x-loading-circular{width:calc(var(--x-height-medium) - .625rem);height:calc(var(--x-height-medium) - .625rem)}.x-switch-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-switch-small .x-switch-slider{height:calc(var(--x-height-small) - .25rem);min-width:calc((var(--x-height-small) - .25rem) * 2);border-radius:calc(var(--x-height-small) - .25rem);margin:.125rem 0}.x-switch-small .x-switch-handle{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem);margin:0 .125rem}.x-switch-small .x-switch-handle:before{border-radius:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-switch-text{margin-left:calc(var(--x-height-small) - .125rem);margin-right:.5rem}.x-switch-small.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-small) - .5rem) - .25rem)}.x-switch-small.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-small) - .25rem)}.x-switch-small .x-switch-spinner{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-switch-small .x-loading-small .x-loading-circular{width:calc(var(--x-height-small) - .625rem);height:calc(var(--x-height-small) - .625rem)}.x-switch-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-switch-mini .x-switch-slider{height:calc(var(--x-height-mini) - .25rem);min-width:calc((var(--x-height-mini) - .25rem) * 2);border-radius:calc(var(--x-height-mini) - .25rem);margin:.125rem 0}.x-switch-mini .x-switch-handle{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem);margin:0 .125rem}.x-switch-mini .x-switch-handle:before{border-radius:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-switch-text{margin-left:calc(var(--x-height-mini) - .125rem);margin-right:.5rem}.x-switch-mini.x-checked .x-switch-handle{left:calc(100% - (var(--x-height-mini) - .5rem) - .25rem)}.x-switch-mini.x-checked .x-switch-text{margin-left:.5rem;margin-right:calc(var(--x-height-mini) - .25rem)}.x-switch-mini .x-switch-spinner{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-switch-mini .x-loading-mini .x-loading-circular{width:calc(var(--x-height-mini) - .625rem);height:calc(var(--x-height-mini) - .625rem)}\n"] }]
         }], propDecorators: { switch: [{

package/esm2022/switch/switch.module.mjs

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { XSwitchComponent } from './switch.component';
 import * as i0 from "@angular/core";
 export class XSwitchModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XSwitchModule, imports: [XSwitchComponent], exports: [XSwitchComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchModule, imports: [XSwitchComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XSwitchModule, imports: [XSwitchComponent], exports: [XSwitchComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchModule, imports: [XSwitchComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XSwitchComponent],

package/esm2022/switch/switch.property.mjs

@@ -27,8 +27,8 @@ export class XSwitchProperty extends XControlValueAccessor {
          */
         this.manual = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XSwitchProperty, selector: "x-switch-property", inputs: { loading: "loading", manual: "manual", size: "size", checkedText: "checkedText", unCheckedText: "unCheckedText" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XSwitchProperty, selector: "x-switch-property", inputs: { loading: "loading", manual: "manual", size: "size", checkedText: "checkedText", unCheckedText: "unCheckedText" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -39,7 +39,7 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME, 'medium')
 ], XSwitchProperty.prototype, "size", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XSwitchProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XSwitchProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XSwitchPrefix}-property`, template: '' }]
         }], propDecorators: { loading: [{

package/esm2022/table/table-body.component.mjs

@@ -201,10 +201,10 @@ export class XTableBodyComponent extends XTableBodyProperty {
     trackByItem(_index, item) {
         return item.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n  @if (cellConfig) {\r\n    @for (row of data; track row.id; let i = $index) {\r\n      <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n        @for (column of cellConfig.cells; track column; let j = $index) {\r\n          <td\r\n            [title]=\"getTitle(row, column)\"\r\n            [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n            [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n            [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n            [style.left.px]=\"column.left\"\r\n            [style.right.px]=\"column.right\"\r\n            [style.grid-area]=\"column.gridArea\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n          </td>\r\n        }\r\n      </tr>\r\n    }\r\n  } @else {\r\n    @if (virtualScroll) {\r\n      <cdk-virtual-scroll-viewport\r\n        #virtualBody\r\n        [itemSize]=\"getItemSize\"\r\n        [minBufferPx]=\"minBufferPx\"\r\n        [maxBufferPx]=\"maxBufferPx\"\r\n        [style.height.px]=\"bodyHeight\"\r\n      >\r\n        <tr\r\n          *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n          [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n        </tr>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n      @for (row of data; track row.id; let i = $index) {\r\n        <tr\r\n          [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n        </tr>\r\n        @if (table.treeTable && row.children && row.expanded) {\r\n          <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\">\r\n            <x-table-body\r\n              [data]=\"row.children\"\r\n              [columns]=\"table.columns\"\r\n              [itemSize]=\"table.itemSize\"\r\n              [rowHeight]=\"table.rowHeight\"\r\n              [columnTpl]=\"table.bodyColumnTpl\"\r\n              [allowSelectRow]=\"table.allowSelectRow\"\r\n              [rowClass]=\"table.rowClass\"\r\n              [cellConfig]=\"table.cellConfig?.tbody\"\r\n              [(activatedRow)]=\"table.activatedRow\"\r\n              [expandedAll]=\"expandedAll\"\r\n              [expandTpl]=\"expandTpl\"\r\n              (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n              [level]=\"row.level! + 1\"\r\n              [table]=\"table\"\r\n            ></x-table-body>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  }\r\n  @if (table.showEmpty && isEmpty && level === 0) {\r\n    <x-empty [img]=\"table.emptyImg\" [content]=\"table.emptyContent\"></x-empty>\r\n  }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  @if (level > 0 && expandTpl) {\r\n    <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n  } @else if (level === 0 || !expandTpl) {\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  @for (column of columns; track column.id; let j = $index) {\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-dragging]=\"column.dragging\"\r\n      [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n      [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n      [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.right.px]=\"column.right\"\r\n      [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        [disabled]=\"row.disabled\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column, row)\"\r\n        single\r\n      ></x-checkbox>\r\n    }\r\n    @case ('index') {\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    }\r\n    @default {\r\n      @if (table.isExpandColumn(column)) {\r\n        <x-button\r\n          [class.is-leaf]=\"!row.leaf\"\r\n          [class.is-expanded]=\"row.expanded\"\r\n          (click)=\"onExpanded($event, row)\"\r\n          icon=\"fto-chevron-right\"\r\n          size=\"mini\"\r\n          onlyIcon\r\n          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      }\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <ng-container *xOutlet=\"table.bodyTdTpl; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n          <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n          {{ table.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XButtonComponent, selector: "x-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n  @if (cellConfig) {\r\n    @for (row of data; track row.id; let i = $index) {\r\n      <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n        @for (column of cellConfig.cells; track column; let j = $index) {\r\n          <td\r\n            [title]=\"getTitle(row, column)\"\r\n            [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n            [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n            [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n            [style.left.px]=\"column.left\"\r\n            [style.right.px]=\"column.right\"\r\n            [style.grid-area]=\"column.gridArea\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n          </td>\r\n        }\r\n      </tr>\r\n    }\r\n  } @else {\r\n    @if (virtualScroll) {\r\n      <cdk-virtual-scroll-viewport\r\n        #virtualBody\r\n        [itemSize]=\"getItemSize\"\r\n        [minBufferPx]=\"minBufferPx\"\r\n        [maxBufferPx]=\"maxBufferPx\"\r\n        [style.height.px]=\"bodyHeight\"\r\n      >\r\n        <tr\r\n          *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n          [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n        </tr>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n      @for (row of data; track row.id; let i = $index) {\r\n        <tr\r\n          [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n        </tr>\r\n        @if (table.treeTable && row.children && row.expanded) {\r\n          <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\">\r\n            <x-table-body\r\n              [data]=\"row.children\"\r\n              [columns]=\"table.columns\"\r\n              [itemSize]=\"table.itemSize\"\r\n              [rowHeight]=\"table.rowHeight\"\r\n              [columnTpl]=\"table.bodyColumnTpl\"\r\n              [allowSelectRow]=\"table.allowSelectRow\"\r\n              [rowClass]=\"table.rowClass\"\r\n              [cellConfig]=\"table.cellConfig?.tbody\"\r\n              [(activatedRow)]=\"table.activatedRow\"\r\n              [expandedAll]=\"expandedAll\"\r\n              [expandTpl]=\"expandTpl\"\r\n              (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n              [level]=\"row.level! + 1\"\r\n              [table]=\"table\"\r\n            ></x-table-body>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  }\r\n  @if (table.showEmpty && isEmpty && level === 0) {\r\n    <x-empty [img]=\"table.emptyImg\" [content]=\"table.emptyContent\"></x-empty>\r\n  }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  @if (level > 0 && expandTpl) {\r\n    <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n  } @else if (level === 0 || !expandTpl) {\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  @for (column of columns; track column.id; let j = $index) {\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-dragging]=\"column.dragging\"\r\n      [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n      [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n      [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.right.px]=\"column.right\"\r\n      [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        [disabled]=\"row.disabled\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column, row)\"\r\n        single\r\n      ></x-checkbox>\r\n    }\r\n    @case ('index') {\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    }\r\n    @default {\r\n      @if (table.isExpandColumn(column)) {\r\n        <x-button\r\n          [class.is-leaf]=\"!row.leaf\"\r\n          [class.is-expanded]=\"row.expanded\"\r\n          (click)=\"onExpanded($event, row)\"\r\n          icon=\"fto-chevron-right\"\r\n          size=\"mini\"\r\n          onlyIcon\r\n          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      }\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <ng-container *xOutlet=\"table.bodyTdTpl; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n          <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n          {{ table.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XButtonComponent, selector: "x-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableBodyPrefix}`, standalone: true, imports: [
                         NgClass,

package/esm2022/table/table-foot.component.mjs

@@ -17,10 +17,10 @@ export class XTableFootComponent extends XTableFootProperty {
     ngAfterViewInit() {
         this.table.tfoot = this.tfoot;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableFootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XTableFootComponent, isStandalone: true, selector: "x-table-foot", inputs: { table: "table" }, viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n  <ng-container *xOutlet=\"footer\">{{ footer }}</ng-container>\r\n</tfoot>\r\n", dependencies: [{ 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: "17.3.0", ngImport: i0, type: XTableFootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTableFootComponent, isStandalone: true, selector: "x-table-foot", inputs: { table: "table" }, viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n  <ng-container *xOutlet=\"footer\">{{ footer }}</ng-container>\r\n</tfoot>\r\n", dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableFootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableFootComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableFootPrefix}`, standalone: true, imports: [XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n  <ng-container *xOutlet=\"footer\">{{ footer }}</ng-container>\r\n</tfoot>\r\n" }]
         }], propDecorators: { tfoot: [{

package/esm2022/table/table-head.component.mjs

@@ -164,10 +164,10 @@ export class XTableHeadComponent extends XTableHeadProperty {
     dragChange() {
         this.table.bodyChange();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle\"\r\n  [class.x-table-head-top]=\"position === 'top'\"\r\n  [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n  @if (cellConfig) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      @for (column of cellConfig.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    [style.padding-right.px]=\"scrollYWidth\"\r\n    [style.width.px]=\"scrollXWidth\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of columns; track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a>{{ column.label }}</a>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n      {{ column.label }}\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle\"\r\n  [class.x-table-head-top]=\"position === 'top'\"\r\n  [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n  @if (cellConfig) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      @for (column of cellConfig.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    [style.padding-right.px]=\"scrollYWidth\"\r\n    [style.width.px]=\"scrollXWidth\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of columns; track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a>{{ column.label }}</a>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n      {{ column.label }}\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableHeadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableHeadPrefix}`, standalone: true, imports: [
                         NgStyle,

package/esm2022/table/table.component.mjs

@@ -353,10 +353,10 @@ export class XTableComponent extends XTableProperty {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XTableComponent, isStandalone: true, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "caption", first: true, predicate: ["caption"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }, { propertyName: "stickyTopRightEle", first: true, predicate: ["stickyTopRightEle"], descendants: true }, { propertyName: "stickyBottomRightEle", first: true, predicate: ["stickyBottomRightEle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  @if (header) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n      <ng-container *xOutlet=\"header\">{{ header }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader && (headerPosition === 'top' || headerPosition === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns\"\r\n      [rowHeight]=\"rowHeight\"\r\n      [columnTpl]=\"headColumnTpl\"\r\n      [scrollYWidth]=\"scrollYWidth\"\r\n      [scrollXWidth]=\"scrollXWidth\"\r\n      [cellConfig]=\"cellConfig?.thead\"\r\n      [position]=\"'top'\"\r\n      [table]=\"this\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable ? treeTableData : tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [rowClass]=\"rowClass\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [expandedAll]=\"expandedAll\"\r\n    [expandTpl]=\"expandTpl\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  @if (showHeader && (headerPosition === 'bottom' || headerPosition === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns\"\r\n      [rowHeight]=\"rowHeight\"\r\n      [columnTpl]=\"headColumnTpl\"\r\n      [scrollYWidth]=\"scrollYWidth\"\r\n      [scrollXWidth]=\"scrollXWidth\"\r\n      [cellConfig]=\"cellConfig?.thead\"\r\n      [position]=\"'bottom'\"\r\n      [table]=\"this\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer) {\r\n    <x-table-foot [table]=\"this\" [footer]=\"footer\" [rowHeight]=\"rowHeight\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl\"\r\n      [style.top.px]=\"getStickyTopScrollTop\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop + getStickyTopRightEleHeight\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop + getStickyBottomRightEleHeight\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination && size) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis\"\r\n    [showTotal]=\"showTotal\"\r\n    [space]=\"space\"\r\n    [hiddenBorder]=\"hiddenPaginationBorder!\"\r\n    [showSize]=\"showSize\"\r\n    [showJump]=\"showJump\"\r\n    [jumpWidth]=\"jumpWidth\"\r\n    [showInputSize]=\"showInputSize\"\r\n    [inputSizeWidth]=\"inputSizeWidth\"\r\n    [sizeData]=\"sizeData\"\r\n    [sizeWidth]=\"sizeWidth\"\r\n    [pageLinkSize]=\"pageLinkSize\"\r\n    [disabled]=\"disabled\"\r\n    [totalTpl]=\"totalTpl\"\r\n    [simple]=\"simple\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a400)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-light-width-minus) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;border-radius:var(--x-border-radius);background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { kind: "component", type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { kind: "component", type: XPaginationComponent, selector: "x-pagination" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTableComponent, isStandalone: true, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "caption", first: true, predicate: ["caption"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }, { propertyName: "stickyTopRightEle", first: true, predicate: ["stickyTopRightEle"], descendants: true }, { propertyName: "stickyBottomRightEle", first: true, predicate: ["stickyBottomRightEle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  @if (header) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n      <ng-container *xOutlet=\"header\">{{ header }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader && (headerPosition === 'top' || headerPosition === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns\"\r\n      [rowHeight]=\"rowHeight\"\r\n      [columnTpl]=\"headColumnTpl\"\r\n      [scrollYWidth]=\"scrollYWidth\"\r\n      [scrollXWidth]=\"scrollXWidth\"\r\n      [cellConfig]=\"cellConfig?.thead\"\r\n      [position]=\"'top'\"\r\n      [table]=\"this\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable ? treeTableData : tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [rowClass]=\"rowClass\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [expandedAll]=\"expandedAll\"\r\n    [expandTpl]=\"expandTpl\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  @if (showHeader && (headerPosition === 'bottom' || headerPosition === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns\"\r\n      [rowHeight]=\"rowHeight\"\r\n      [columnTpl]=\"headColumnTpl\"\r\n      [scrollYWidth]=\"scrollYWidth\"\r\n      [scrollXWidth]=\"scrollXWidth\"\r\n      [cellConfig]=\"cellConfig?.thead\"\r\n      [position]=\"'bottom'\"\r\n      [table]=\"this\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer) {\r\n    <x-table-foot [table]=\"this\" [footer]=\"footer\" [rowHeight]=\"rowHeight\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl\"\r\n      [style.top.px]=\"getStickyTopScrollTop\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop + getStickyTopRightEleHeight\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop + getStickyBottomRightEleHeight\"\r\n      [style.width.px]=\"scrollYWidth\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination && size) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis\"\r\n    [showTotal]=\"showTotal\"\r\n    [space]=\"space\"\r\n    [hiddenBorder]=\"hiddenPaginationBorder!\"\r\n    [showSize]=\"showSize\"\r\n    [showJump]=\"showJump\"\r\n    [jumpWidth]=\"jumpWidth\"\r\n    [showInputSize]=\"showInputSize\"\r\n    [inputSizeWidth]=\"inputSizeWidth\"\r\n    [sizeData]=\"sizeData\"\r\n    [sizeWidth]=\"sizeWidth\"\r\n    [pageLinkSize]=\"pageLinkSize\"\r\n    [disabled]=\"disabled\"\r\n    [totalTpl]=\"totalTpl\"\r\n    [simple]=\"simple\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a400)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-light-width-minus) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;border-radius:var(--x-border-radius);background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { kind: "component", type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { kind: "component", type: XPaginationComponent, selector: "x-pagination" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTablePrefix}`, standalone: true, imports: [
                         NgClass,

package/esm2022/table/table.module.mjs

@@ -5,11 +5,11 @@ import { XTableBodyComponent } from './table-body.component';
 import { XTableFootComponent } from './table-foot.component';
 import * as i0 from "@angular/core";
 export class XTableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent, XTableFootComponent], exports: [XTableComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent, XTableFootComponent], exports: [XTableComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTableComponent],

package/esm2022/table/table.property.mjs

@@ -127,8 +127,8 @@ export class XTableProperty extends XPaginationProperty {
          */
         this.columnDragWidthEnded = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XTableProperty, selector: "x-table-property", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", headerPosition: "headerPosition", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", bodyTdTpl: "bodyTdTpl", rowClass: "rowClass", headSearchTpl: "headSearchTpl", allowSelectRow: "allowSelectRow", allowCheckRow: "allowCheckRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", header: "header", footer: "footer", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", hiddenWrapBorder: "hiddenWrapBorder", hiddenPaginationBorder: "hiddenPaginationBorder", showPagination: "showPagination", treeTable: "treeTable", expandedAll: "expandedAll", expandedLevel: "expandedLevel", expanded: "expanded", expandTpl: "expandTpl", showEmpty: "showEmpty", emptyImg: "emptyImg", emptyContent: "emptyContent" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", headCheckboxChange: "headCheckboxChange", bodyCheckboxChange: "bodyCheckboxChange", manualChange: "manualChange", columnDragStarted: "columnDragStarted", columnDragEnded: "columnDragEnded", columnDropListDropped: "columnDropListDropped", columnDragWidthStarted: "columnDragWidthStarted", columnDragWidthMoved: "columnDragWidthMoved", columnDragWidthEnded: "columnDragWidthEnded" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTableProperty, selector: "x-table-property", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", headerPosition: "headerPosition", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", bodyTdTpl: "bodyTdTpl", rowClass: "rowClass", headSearchTpl: "headSearchTpl", allowSelectRow: "allowSelectRow", allowCheckRow: "allowCheckRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", header: "header", footer: "footer", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", hiddenWrapBorder: "hiddenWrapBorder", hiddenPaginationBorder: "hiddenPaginationBorder", showPagination: "showPagination", treeTable: "treeTable", expandedAll: "expandedAll", expandedLevel: "expandedLevel", expanded: "expanded", expandTpl: "expandTpl", showEmpty: "showEmpty", emptyImg: "emptyImg", emptyContent: "emptyContent" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", headCheckboxChange: "headCheckboxChange", bodyCheckboxChange: "bodyCheckboxChange", manualChange: "manualChange", columnDragStarted: "columnDragStarted", columnDragEnded: "columnDragEnded", columnDropListDropped: "columnDropListDropped", columnDragWidthStarted: "columnDragWidthStarted", columnDragWidthMoved: "columnDragWidthMoved", columnDragWidthEnded: "columnDragWidthEnded" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XWithConfig(X_CONFIG_NAME, 42),
@@ -214,7 +214,7 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME)
 ], XTableProperty.prototype, "emptyContent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTablePrefix}-property`, template: '' }]
         }], propDecorators: { data: [{
@@ -350,13 +350,13 @@ export class XTableHeadProperty extends XProperty {
          */
         this.columnTpl = {};
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XTableHeadProperty, selector: "x-table-head-property", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig", position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTableHeadProperty, selector: "x-table-head-property", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig", position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputNumber()
 ], XTableHeadProperty.prototype, "rowHeight", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableHeadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableHeadPrefix}-property`, template: '' }]
         }], propDecorators: { columns: [{
@@ -447,8 +447,8 @@ export class XTableBodyProperty extends XProperty {
          */
         this.level = 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XTableBodyProperty, selector: "x-table-body-property", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass", level: "level", expandedAll: "expandedAll", expandTpl: "expandTpl" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTableBodyProperty, selector: "x-table-body-property", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass", level: "level", expandedAll: "expandedAll", expandTpl: "expandTpl" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputNumber()
@@ -474,7 +474,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XTableBodyProperty.prototype, "expandedAll", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableBodyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableBodyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableBodyPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{
@@ -528,10 +528,10 @@ export const XTableFootPrefix = 'x-table-foot';
  * Table Foot Property
  */
 export class XTableFootProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XTableFootProperty, selector: "x-table-foot-property", inputs: { footer: "footer", rowHeight: "rowHeight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTableFootProperty, selector: "x-table-foot-property", inputs: { footer: "footer", rowHeight: "rowHeight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTableFootProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableFootProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableFootPrefix}-property`, template: '' }]
         }], propDecorators: { footer: [{

package/esm2022/tabs/tab-content.component.mjs

@@ -10,10 +10,10 @@ export class XTabContentComponent {
     ngOnInit() {
         this.renderer.addClass(this.elementRef.nativeElement, 'x-tab-content');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XTabContentComponent, isStandalone: true, selector: "x-tab-content", inputs: { content: "content", active: "active" }, ngImport: i0, template: "@if (active) {\r\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTabContentComponent, isStandalone: true, selector: "x-tab-content", inputs: { content: "content", active: "active" }, ngImport: i0, template: "@if (active) {\r\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XTabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-tab-content', preserveWhitespaces: false, standalone: true, imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active) {\r\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\r\n}\r\n" }]
         }], propDecorators: { content: [{