ngx-tethys 18.1.0-next.0 → 18.1.0

package/fesm2022/ngx-tethys-table.mjs

@@ -1,23 +1,22 @@
 import { __decorate, __metadata } from 'tslib';
-import * as i2 from 'ngx-tethys/core';
 import { InputCssPixel, UpdateHostClassService } from 'ngx-tethys/core';
 import { isArray, isObject, coerceBooleanProperty, get, isString, set, helpers, keyBy } from 'ngx-tethys/util';
 import { merge, fromEvent, EMPTY, of, Observable } from 'rxjs';
 import { delay, startWith, switchMap } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1 from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/overlay';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { NgClass, NgStyle, NgTemplateOutlet, isPlatformServer, DOCUMENT, CommonModule } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet, DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, TemplateRef, Component, ViewEncapsulation, Optional, Inject, Input, Output, ContentChild, Pipe, ChangeDetectionStrategy, ViewChild, inject, DestroyRef, PLATFORM_ID, numberAttribute, ElementRef, ViewChildren, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, EventEmitter, TemplateRef, Component, ViewEncapsulation, Input, Output, ContentChild, Pipe, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, IterableDiffers, PLATFORM_ID, NgZone, Renderer2, DestroyRef, numberAttribute, ViewChildren, HostBinding, ContentChildren, NgModule } from '@angular/core';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { ThyPagination, ThyPaginationModule } from 'ngx-tethys/pagination';
 import { ThySkeletonRectangle, ThySkeletonCircle, ThySkeletonModule } from 'ngx-tethys/skeleton';
 import { ThyViewOutletDirective, ThyDragDropDirective, ThyContextMenuDirective, ThySharedModule } from 'ngx-tethys/shared';
 import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThySwitch, ThySwitchModule } from 'ngx-tethys/switch';
-import * as i3 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
@@ -40,6 +39,60 @@ const THY_TABLE_COLUMN_PARENT_COMPONENT = new InjectionToken('THY_TABLE_COLUMN_P
  * @order 20
  */
 class ThyTableColumnComponent {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.parent = inject(THY_TABLE_COLUMN_PARENT_COMPONENT, { optional: true });
+        /**
+         * 设置数据属性 Key，读取数组中对象的当前 Key 值
+         * @type string
+         */
+        this.model = '';
+        /**
+         * 设置列名，显示在表头
+         * @type string
+         */
+        this.title = '';
+        /**
+         * 设置列的特殊类型，序列号、选择框、单选框、切换按钮
+         * @type string
+         */
+        this.type = '';
+        this.width = '';
+        this.minWidth = '';
+        /**
+         * 设置列的样式
+         */
+        this.className = '';
+        /**
+         * 设置列头部的 Class，即 th 元素上的样式
+         * @type string
+         */
+        this.headerClassName = '';
+        /**
+         * 设置自定义类型的禁用状态
+         * @type boolean
+         */
+        this.disabled = false;
+        /**
+         * 设置数据为空的时候显示的文本
+         * @type string
+         */
+        this.defaultText = '';
+        /**
+         * 设置 Tree 模式下折叠展开按钮展示列，不传默认第一列
+         */
+        this.expand = false;
+        /**
+         * 默认列排序顺序
+         * @type 'asc' | 'desc' | ''
+         */
+        this.sortDirection = ThyTableSortDirection.default;
+        /**
+         * 列排序修改事件
+         */
+        this.sortChange = new EventEmitter();
+        this._firstChange = true;
+    }
     /**
      * 设置列的宽度
      */
@@ -93,60 +146,6 @@ class ThyTableColumnComponent {
             }
         }
     }
-    constructor(el, parent) {
-        this.el = el;
-        this.parent = parent;
-        /**
-         * 设置数据属性 Key，读取数组中对象的当前 Key 值
-         * @type string
-         */
-        this.model = '';
-        /**
-         * 设置列名，显示在表头
-         * @type string
-         */
-        this.title = '';
-        /**
-         * 设置列的特殊类型，序列号、选择框、单选框、切换按钮
-         * @type string
-         */
-        this.type = '';
-        this.width = '';
-        this.minWidth = '';
-        /**
-         * 设置列的样式
-         */
-        this.className = '';
-        /**
-         * 设置列头部的 Class，即 th 元素上的样式
-         * @type string
-         */
-        this.headerClassName = '';
-        /**
-         * 设置自定义类型的禁用状态
-         * @type boolean
-         */
-        this.disabled = false;
-        /**
-         * 设置数据为空的时候显示的文本
-         * @type string
-         */
-        this.defaultText = '';
-        /**
-         * 设置 Tree 模式下折叠展开按钮展示列，不传默认第一列
-         */
-        this.expand = false;
-        /**
-         * 默认列排序顺序
-         * @type 'asc' | 'desc' | ''
-         */
-        this.sortDirection = ThyTableSortDirection.default;
-        /**
-         * 列排序修改事件
-         */
-        this.sortChange = new EventEmitter();
-        this._firstChange = true;
-    }
     ngOnInit() {
         this.key = this._generateKey();
         this._firstChange = false;
@@ -154,7 +153,7 @@ class ThyTableColumnComponent {
     _generateKey() {
         return '[$$column]' + Math.random().toString(16).slice(2, 10);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTableColumnComponent, deps: [{ token: i0.ElementRef }, { token: THY_TABLE_COLUMN_PARENT_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTableColumnComponent, isStandalone: true, selector: "thy-table-column", inputs: { model: ["thyModelKey", "model"], title: ["thyTitle", "title"], type: ["thyType", "type"], thyWidth: "thyWidth", thyMinWidth: "thyMinWidth", className: ["thyClassName", "className"], headerClassName: ["thyHeaderClassName", "headerClassName"], disabled: ["thyDisabled", "disabled", coerceBooleanProperty], selections: ["thySelections", "selections"], defaultText: ["thyDefaultText", "defaultText"], expand: ["thyExpand", "expand", coerceBooleanProperty], thySortable: ["thySortable", "thySortable", coerceBooleanProperty], sortDirection: ["thySortDirection", "sortDirection"], fixed: ["thyFixed", "fixed"], operational: ["thyOperational", "operational", coerceBooleanProperty], secondary: ["thySecondary", "secondary", coerceBooleanProperty] }, outputs: { sortChange: "thySortChange" }, queries: [{ propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "cellTemplateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTableColumnComponent, decorators: [{
@@ -165,12 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_TABLE_COLUMN_PARENT_COMPONENT]
-                }] }], propDecorators: { model: [{
+        }], propDecorators: { model: [{
                 type: Input,
                 args: ['thyModelKey']
             }], title: [{
@@ -280,34 +274,8 @@ const COLUMN_COUNT = 5;
  * @name thy-table-skeleton
  */
 class ThyTableSkeleton {
-    /**
-     * 行数
-     */
-    set thyRowCount(value) {
-        this.rowCount = Array.from({ length: +value });
-    }
-    /**
-     * 表格列骨架的配置项，支持配置列宽、骨架类型
-     * @type ThyTableSkeletonColumn[]
-     */
-    set thyColumns(columns) {
-        if (columns && columns.length) {
-            this.columns = columns;
-        }
-        else {
-            this.columns = [...this.defaultColumns];
-        }
-    }
-    get tableClassMap() {
-        return {
-            table: true,
-            'table-bordered': this.thyTheme === 'bordered',
-            'table-boxed': this.thyTheme === 'boxed',
-            [`table-${this.thySize}`]: !!this.thySize
-        };
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
         /**
          * 表格内容骨架高度
          */
@@ -362,6 +330,32 @@ class ThyTableSkeleton {
         });
         this.columns = [...this.defaultColumns];
     }
+    /**
+     * 行数
+     */
+    set thyRowCount(value) {
+        this.rowCount = Array.from({ length: +value });
+    }
+    /**
+     * 表格列骨架的配置项，支持配置列宽、骨架类型
+     * @type ThyTableSkeletonColumn[]
+     */
+    set thyColumns(columns) {
+        if (columns && columns.length) {
+            this.columns = columns;
+        }
+        else {
+            this.columns = [...this.defaultColumns];
+        }
+    }
+    get tableClassMap() {
+        return {
+            table: true,
+            'table-bordered': this.thyTheme === 'bordered',
+            'table-boxed': this.thyTheme === 'boxed',
+            [`table-${this.thySize}`]: !!this.thySize
+        };
+    }
     ngAfterViewInit() {
         this.skeletonColumnsMap = {
             [ThyTableColumnSkeletonType.title]: this.titleTemplate,
@@ -370,7 +364,7 @@ class ThyTableSkeleton {
         };
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTableSkeleton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTableSkeleton, isStandalone: true, selector: "thy-table-skeleton", inputs: { thyBorderRadius: "thyBorderRadius", thyRowHeight: "thyRowHeight", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyRowCount: "thyRowCount", thyHeadless: ["thyHeadless", "thyHeadless", coerceBooleanProperty], thyTheme: "thyTheme", thySize: "thySize", thyMinWidth: "thyMinWidth", thyColumns: "thyColumns" }, host: { classAttribute: "thy-table-skeleton" }, viewQueries: [{ propertyName: "titleTemplate", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "memberTemplate", first: true, predicate: ["memberTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "checkboxTemplate", first: true, predicate: ["checkboxTemplate"], descendants: true }], ngImport: i0, template: "<table [ngClass]=\"tableClassMap\" [ngStyle]=\"{ 'min-width': thyMinWidth }\">\n  <colgroup>\n    @for (column of columns; track $index) {\n      <col [width]=\"column.width\" />\n    }\n  </colgroup>\n  @if (!thyHeadless) {\n    <thead>\n      <tr>\n        @for (column of columns; track $index) {\n          <th>\n            <thy-skeleton-rectangle\n              [thyRowWidth]=\"column?.type === columnType.checkbox ? checkboxWidth : titleWidth\"\n              [thyRowHeight]=\"titleHeight\"\n              [thyBorderRadius]=\"thyBorderRadius\"\n              [thyAnimated]=\"thyAnimated\"\n              [thyAnimatedInterval]=\"thyAnimatedInterval\"\n              [thyPrimaryColor]=\"thyTheme === 'bordered' || thyTheme === 'boxed' ? '#eee' : thyPrimaryColor\"\n              [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of rowCount; track $index; let i = $index) {\n      <tr>\n        @for (column of columns; track $index) {\n          <td>\n            <ng-container\n              *thyViewOutlet=\"\n                skeletonColumnsMap[column.type] || defaultTemplate;\n                context: {\n                  trIndex: i\n                }\n              \">\n            </ng-container>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<ng-template #titleTemplate let-trIndex=\"trIndex\">\n  <div class=\"d-flex align-items-center\">\n    <thy-skeleton-rectangle\n      class=\"mr-2 flex-shrink-0\"\n      [thyRowWidth]=\"checkboxWidth\"\n      [thyRowHeight]=\"thyRowHeight\"\n      [thyBorderRadius]=\"thyBorderRadius\"\n      [thyAnimated]=\"thyAnimated\"\n      [thyAnimatedInterval]=\"thyAnimatedInterval\"\n      [thyPrimaryColor]=\"thyPrimaryColor\"\n      [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n\n    <ng-container\n      *thyViewOutlet=\"\n        defaultTemplate;\n        context: {\n          rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : ''\n        }\n      \"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #checkboxTemplate>\n  <thy-skeleton-rectangle\n    [thyRowWidth]=\"checkboxWidth\"\n    [thyRowHeight]=\"thyRowHeight\"\n    [thyBorderRadius]=\"thyBorderRadius\"\n    [thyAnimated]=\"thyAnimated\"\n    [thyAnimatedInterval]=\"thyAnimatedInterval\"\n    [thyPrimaryColor]=\"thyPrimaryColor\"\n    [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n</ng-template>\n\n<ng-template #memberTemplate>\n  <div class=\"d-flex align-items-center\">\n    <thy-skeleton-circle\n      class=\"mr-2 flex-shrink-0\"\n      [thySize]=\"avatarSize\"\n      [thyAnimated]=\"thyAnimated\"\n      [thyAnimatedInterval]=\"thyAnimatedInterval\"\n      [thyPrimaryColor]=\"thyPrimaryColor\"\n      [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-circle>\n\n    <ng-container *thyViewOutlet=\"defaultTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate let-rowWidth=\"rowWidth\">\n  <thy-skeleton-rectangle\n    [thyRowWidth]=\"rowWidth\"\n    [thyRowHeight]=\"thyRowHeight\"\n    [thyBorderRadius]=\"thyBorderRadius\"\n    [thyAnimated]=\"thyAnimated\"\n    [thyAnimatedInterval]=\"thyAnimatedInterval\"\n    [thyPrimaryColor]=\"thyPrimaryColor\"\n    [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ThyViewOutletDirective, selector: "[thyViewOutlet]", inputs: ["thyViewOutlet", "thyViewOutletContext"] }, { kind: "component", type: ThySkeletonRectangle, selector: "thy-skeleton-rectangle", inputs: ["thyAnimated", "thyAnimatedInterval", "thyBorderRadius", "thyRowWidth", "thyRowHeight", "thyPrimaryColor", "thySecondaryColor"] }, { kind: "component", type: ThySkeletonCircle, selector: "thy-skeleton-circle", inputs: ["thyAnimatedInterval", "thySize", "thyPrimaryColor", "thySecondaryColor", "thyAnimated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
@@ -390,7 +384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{ selector: 'thy-table-skeleton', host: {
                         class: 'thy-table-skeleton'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet, ThyViewOutletDirective, ThySkeletonRectangle, ThySkeletonCircle], template: "<table [ngClass]=\"tableClassMap\" [ngStyle]=\"{ 'min-width': thyMinWidth }\">\n  <colgroup>\n    @for (column of columns; track $index) {\n      <col [width]=\"column.width\" />\n    }\n  </colgroup>\n  @if (!thyHeadless) {\n    <thead>\n      <tr>\n        @for (column of columns; track $index) {\n          <th>\n            <thy-skeleton-rectangle\n              [thyRowWidth]=\"column?.type === columnType.checkbox ? checkboxWidth : titleWidth\"\n              [thyRowHeight]=\"titleHeight\"\n              [thyBorderRadius]=\"thyBorderRadius\"\n              [thyAnimated]=\"thyAnimated\"\n              [thyAnimatedInterval]=\"thyAnimatedInterval\"\n              [thyPrimaryColor]=\"thyTheme === 'bordered' || thyTheme === 'boxed' ? '#eee' : thyPrimaryColor\"\n              [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of rowCount; track $index; let i = $index) {\n      <tr>\n        @for (column of columns; track $index) {\n          <td>\n            <ng-container\n              *thyViewOutlet=\"\n                skeletonColumnsMap[column.type] || defaultTemplate;\n                context: {\n                  trIndex: i\n                }\n              \">\n            </ng-container>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<ng-template #titleTemplate let-trIndex=\"trIndex\">\n  <div class=\"d-flex align-items-center\">\n    <thy-skeleton-rectangle\n      class=\"mr-2 flex-shrink-0\"\n      [thyRowWidth]=\"checkboxWidth\"\n      [thyRowHeight]=\"thyRowHeight\"\n      [thyBorderRadius]=\"thyBorderRadius\"\n      [thyAnimated]=\"thyAnimated\"\n      [thyAnimatedInterval]=\"thyAnimatedInterval\"\n      [thyPrimaryColor]=\"thyPrimaryColor\"\n      [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n\n    <ng-container\n      *thyViewOutlet=\"\n        defaultTemplate;\n        context: {\n          rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : ''\n        }\n      \"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #checkboxTemplate>\n  <thy-skeleton-rectangle\n    [thyRowWidth]=\"checkboxWidth\"\n    [thyRowHeight]=\"thyRowHeight\"\n    [thyBorderRadius]=\"thyBorderRadius\"\n    [thyAnimated]=\"thyAnimated\"\n    [thyAnimatedInterval]=\"thyAnimatedInterval\"\n    [thyPrimaryColor]=\"thyPrimaryColor\"\n    [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n</ng-template>\n\n<ng-template #memberTemplate>\n  <div class=\"d-flex align-items-center\">\n    <thy-skeleton-circle\n      class=\"mr-2 flex-shrink-0\"\n      [thySize]=\"avatarSize\"\n      [thyAnimated]=\"thyAnimated\"\n      [thyAnimatedInterval]=\"thyAnimatedInterval\"\n      [thyPrimaryColor]=\"thyPrimaryColor\"\n      [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-circle>\n\n    <ng-container *thyViewOutlet=\"defaultTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate let-rowWidth=\"rowWidth\">\n  <thy-skeleton-rectangle\n    [thyRowWidth]=\"rowWidth\"\n    [thyRowHeight]=\"thyRowHeight\"\n    [thyBorderRadius]=\"thyBorderRadius\"\n    [thyAnimated]=\"thyAnimated\"\n    [thyAnimatedInterval]=\"thyAnimatedInterval\"\n    [thyPrimaryColor]=\"thyPrimaryColor\"\n    [thySecondaryColor]=\"thySecondaryColor\"></thy-skeleton-rectangle>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { titleTemplate: [{
+        }], propDecorators: { titleTemplate: [{
                 type: ViewChild,
                 args: ['titleTemplate']
             }], memberTemplate: [{
@@ -630,16 +624,16 @@ class ThyTable {
             this._initializeDataModel();
         }
     }
-    constructor(elementRef, _differs, viewportRuler, updateHostClassService, document, platformId, ngZone, renderer, cdr) {
-        this.elementRef = elementRef;
-        this._differs = _differs;
-        this.viewportRuler = viewportRuler;
-        this.updateHostClassService = updateHostClassService;
-        this.document = document;
-        this.platformId = platformId;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.cdr = cdr;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this._differs = inject(IterableDiffers);
+        this.viewportRuler = inject(ViewportRuler);
+        this.updateHostClassService = inject(UpdateHostClassService);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.ngZone = inject(NgZone);
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.customType = customType;
         this.model = [];
@@ -1202,14 +1196,14 @@ class ThyTable {
     ngOnDestroy() {
         this._destroyInvalidAttribute();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTable, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1.ViewportRuler }, { token: i2.UpdateHostClassService }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTable, isStandalone: true, selector: "thy-table", inputs: { thyMode: "thyMode", thyGroupBy: "thyGroupBy", thyRowKey: "thyRowKey", thyGroups: "thyGroups", thyModel: "thyModel", thyTheme: "thyTheme", thySize: "thySize", thyMinWidth: "thyMinWidth", thyLayoutFixed: ["thyLayoutFixed", "thyLayoutFixed", coerceBooleanProperty], thyHeaderFixed: ["thyHeaderFixed", "thyHeaderFixed", coerceBooleanProperty], thyHeight: "thyHeight", thyClassName: "thyClassName", thyRowClassName: "thyRowClassName", thyLoadingDone: ["thyLoadingDone", "thyLoadingDone", coerceBooleanProperty], thyLoadingText: "thyLoadingText", thyEmptyOptions: "thyEmptyOptions", thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyPageIndex: ["thyPageIndex", "thyPageIndex", numberAttribute], thyPageSize: ["thyPageSize", "thyPageSize", numberAttribute], thyPageTotal: ["thyPageTotal", "thyPageTotal", numberAttribute], thyWholeRowSelect: ["thyWholeRowSelect", "thyWholeRowSelect", coerceBooleanProperty], thyHeadless: ["thyHeadless", "thyHeadless", coerceBooleanProperty], thyShowHeader: ["thyShowHeader", "thyShowHeader", coerceBooleanProperty], showTotal: ["thyShowTotal", "showTotal", coerceBooleanProperty], showSizeChanger: ["thyShowSizeChanger", "showSizeChanger", coerceBooleanProperty], pageSizeOptions: ["thyPageSizeOptions", "pageSizeOptions"], thyIndent: ["thyIndent", "thyIndent", numberAttribute], thyChildrenKey: "thyChildrenKey", thyHoverDisplayOperation: ["thyHoverDisplayOperation", "thyHoverDisplayOperation", coerceBooleanProperty], thyDragDisabledPredicate: "thyDragDisabledPredicate", thyColumnSkeletonTypes: "thyColumnSkeletonTypes" }, outputs: { thyOnSwitchChange: "thyOnSwitchChange", thyOnPageChange: "thyOnPageChange", thyOnPageIndexChange: "thyOnPageIndexChange", thyOnPageSizeChange: "thyOnPageSizeChange", thyOnMultiSelectChange: "thyOnMultiSelectChange", thyOnRadioSelectChange: "thyOnRadioSelectChange", thyOnDraggableChange: "thyOnDraggableChange", thyOnRowClick: "thyOnRowClick", thySortChange: "thySortChange", thyOnRowContextMenu: "thyOnRowContextMenu" }, host: { properties: { "class.thy-table-bordered": "theme === 'bordered'", "class.thy-table-boxed": "theme === 'boxed'", "class.thy-table-fixed-header": "thyHeaderFixed", "style.height": "this.thyHeight", "class.thy-table-hover-display-operation": "this.thyHoverDisplayOperation" }, classAttribute: "thy-table" }, providers: [
             {
                 provide: THY_TABLE_COLUMN_PARENT_COMPONENT,
                 useExisting: ThyTable
             },
             UpdateHostClassService
-        ], queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "listOfColumnComponents", predicate: ThyTableColumnComponent }], viewQueries: [{ propertyName: "tableElementRef", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "rows", predicate: ["rows"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{\n    'thy-table-fixed': hasFixed,\n    'thy-table-bordered-theme': theme === 'bordered' && hasFixed,\n    'thy-table-body-empty': loadingDone && model?.length === 0 && groups?.length === 0\n  }\">\n  <table\n    #table\n    class=\"table\"\n    [ngClass]=\"[className]\"\n    [class.table-fixed]=\"thyLayoutFixed\"\n    [class.table-draggable]=\"draggable\"\n    [class.table-group]=\"mode === 'group'\"\n    [ngStyle]=\"{ 'min-width': thyMinWidth }\">\n    <colgroup>\n      @for (column of columns; track $index) {\n        <col [width]=\"column.width\" [ngStyle]=\"{ minWidth: hasFixed ? column.width : column.minWidth }\" />\n      }\n    </colgroup>\n\n    @if (!thyHeadless) {\n      <thead>\n        <tr>\n          @for (column of columns; track $index) {\n            <th\n              [ngClass]=\"column.headerClassName\"\n              [class.thy-table-column-sortable]=\"column.sortable\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"{ left: column.left + 'px', right: column.right + 'px' }\"\n              (click)=\"onColumnHeaderClick($event, column)\">\n              @if (!column.headerTemplateRef) {\n                <span>{{ column.title }}</span>\n              }\n              @if (column.headerTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n              }\n              @if (column.sortable) {\n                <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n                </thy-icon>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n\n    @if (loadingDone) {\n      <tbody\n        thyDragDrop\n        cdkDropList\n        [cdkDropListDisabled]=\"!draggable\"\n        [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n        (cdkDropListDropped)=\"onDragDropped($event)\">\n        <!-- group -->\n        @if (mode === 'group') {\n          @for (group of groups; track group.id) {\n            <tr\n              class=\"thy-table-group\"\n              (click)=\"expandGroup(group)\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"group\"\n              [cdkDragDisabled]=\"group | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragGroupStarted($event)\"\n              (cdkDragEnded)=\"onDragGroupEnd($event)\">\n              <td [attr.colspan]=\"columns.length\">\n                <div class=\"thy-table-group-container\">\n                  @if (draggable && !(group | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                    <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                  }\n                  <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                  @if (groupTemplate) {\n                    <ng-template\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                  }\n                </div>\n              </td>\n            </tr>\n            @if (group.children?.length && group.expand) {\n              @for (row of group.children; track $index; let i = $index) {\n                <ng-template\n                  [ngTemplateOutlet]=\"trTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    row: row,\n                    index: i,\n                    level: 0\n                  }\"></ng-template>\n              }\n            }\n          }\n        }\n        <!-- list\u6A21\u5F0F\u4E0B\u6CA1\u6709\u76F4\u63A5\u4F7F\u7528item\u6A21\u677F\uFF0C\u662F\u56E0\u4E3A\u4F7F\u7528\u4E86\u6A21\u677F\u5F71\u54CD\u4E86Angular\u7684\u4F9D\u8D56\u6811\uFF0C\u5BFC\u81F4CdkDragDrop\u6392\u5E8F\u5931\u6548\uFF0C\u76EE\u524D\u8FD9\u6837\u4FEE\u6539\u53EF\u4EE5\u6682\u65F6\u89E3\u51B3\u7EBF\u4E0A\u4E0D\u80FD\u6392\u5E8F\u7684\u95EE\u9898\uFF0CTree\u6A21\u5F0F\u7684\u6392\u5E8F\u6682\u65F6\u4E0D\u652F\u6301 -->\n        @if (mode === 'list') {\n          @for (row of model; track $index; let i = $index) {\n            <tr\n              #rows\n              class=\"thy-sortable-item\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"row\"\n              [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragStarted($event)\"\n              [ngClass]=\"renderRowClassName(row, i)\"\n              (click)=\"onRowClick($event, row)\"\n              (thyContextMenu)=\"onRowContextMenu($event, row)\">\n              <ng-template\n                [ngTemplateOutlet]=\"tdsTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </tr>\n          }\n        }\n        @if (mode === 'tree') {\n          @for (row of model; track trackByFn(i, row); let i = $index) {\n            <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n          }\n        }\n        <ng-template #trTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          <tr\n            #rows\n            class=\"thy-sortable-item\"\n            cdkDrag\n            [cdkDragPreviewClass]=\"dragPreviewClass\"\n            [cdkDragData]=\"row\"\n            (cdkDragStarted)=\"onDragStarted($event)\"\n            [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n            [ngClass]=\"renderRowClassName(row, i)\"\n            (click)=\"onRowClick($event, row)\"\n            (thyContextMenu)=\"onRowContextMenu($event, row)\">\n            <ng-template\n              [ngTemplateOutlet]=\"tdsTemplate\"\n              [ngTemplateOutletContext]=\"{\n                row: row,\n                index: i,\n                level: level + 1\n              }\"></ng-template>\n          </tr>\n          @if (mode === 'tree' && isExpanded(row)) {\n            @for (child of row[thyChildrenKey]; track trackByFn(j, child); let j = $index) {\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n            }\n          }\n        </ng-template>\n        <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          @for (column of columns; track $index; let j = $index) {\n            <td\n              [ngClass]=\"column.className\"\n              [class.thy-operation-links]=\"!!column.operational\"\n              [class.thy-table-column-secondary]=\"!!column.secondary\"\n              [class.thy-table-checkbox-column]=\"column.type === customType.checkbox\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"\n                mode === 'tree' && column.expand\n                  ? tdIndentComputed(level, column)\n                  : { left: column.left + 'px', right: column.right + 'px' }\n              \">\n              @if (j === 0 && draggable && !(row | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n              }\n              <!--template-->\n              @if (isTemplateRef(column.cellTemplateRef)) {\n                @if (mode === 'tree' && column.expand) {\n                  <thy-icon\n                    class=\"tree-expand-icon cursor-pointer\"\n                    [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                    [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                    [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n                }\n                <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n              }\n              <!--not template-->\n              @if (!isTemplateRef(column.cellTemplateRef)) {\n                <!-- default -->\n                @if (column.model && !column.type) {\n                  @if (mode === 'tree' && column.expand) {\n                    <thy-icon\n                      class=\"tree-expand-icon cursor-pointer\"\n                      [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                      [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                      [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n                  }\n                  @if (getModelValue(row, column.model) | isValidModelValue) {\n                    {{ getModelValue(row, column.model) }}\n                  } @else {\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  }\n                  <ng-template #default>\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  </ng-template>\n                }\n                <!-- index -->\n                @if (column.type === customType.index) {\n                  {{ i + 1 }}\n                }\n                <!-- checkbox -->\n                @if (column.type === customType.checkbox) {\n                  <input\n                    type=\"checkbox\"\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onCheckboxChange(row, column)\"\n                    (click)=\"onStopPropagation($event)\"\n                    [disabled]=\"column.disabled\" />\n                }\n                <!-- radio -->\n                @if (column.type === customType.radio) {\n                  <input\n                    type=\"radio\"\n                    [(ngModel)]=\"selectedRadioRow\"\n                    [value]=\"row\"\n                    [disabled]=\"column.disabled\"\n                    (click)=\"onStopPropagation($event)\"\n                    (change)=\"onRadioSelectChange($event, row)\" />\n                }\n                <!-- switch -->\n                @if (column.type === customType.switch) {\n                  <thy-switch\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onModelChange(row, column)\"\n                    [disabled]=\"column.disabled\"\n                    (thyChange)=\"onSwitchChange($event, row, column)\"></thy-switch>\n                }\n              }\n            </td>\n          }\n        </ng-template>\n      </tbody>\n    }\n  </table>\n\n  @if (loadingDone && model.length === 0 && groups.length === 0) {\n    <div class=\"thy-table-empty clear-hover\">\n      @if (emptyTemplate) {\n        <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n      } @else {\n        <thy-empty\n          [thyMessage]=\"emptyOptions.message\"\n          [thyTranslationKey]=\"emptyOptions.translationKey\"\n          [thyTranslationValues]=\"emptyOptions.translationValues\"\n          [thyEntityName]=\"emptyOptions.entityName\"\n          [thyEntityNameTranslateKey]=\"emptyOptions.entityNameTranslateKey\"\n          [thyIconName]=\"emptyOptions.iconName\"\n          [thySize]=\"emptyOptions.size\"\n          [thyMarginTop]=\"emptyOptions.marginTop\"\n          [thyTopAuto]=\"emptyOptions.topAuto\"\n          [thyContainer]=\"emptyOptions.container\"></thy-empty>\n      }\n    </div>\n  }\n\n  @if (!loadingDone) {\n    <thy-table-skeleton\n      [thyRowCount]=\"6\"\n      [thyHeadless]=\"true\"\n      [thyTheme]=\"theme\"\n      [thySize]=\"size\"\n      [thyMinWidth]=\"thyMinWidth\"\n      [thyColumns]=\"skeletonColumns\">\n    </thy-table-skeleton>\n  }\n\n  @if (pagination.total > pagination.size) {\n    <div class=\"thy-table-footer\" [class.thy-table-footer-has-padding]=\"theme === 'default'\">\n      <thy-pagination\n        [thyPageIndex]=\"pagination.index\"\n        [thyTotal]=\"pagination.total\"\n        [thyPageSize]=\"pagination.size\"\n        [thyPageSizeOptions]=\"pagination.sizeOptions\"\n        [thyShowSizeChanger]=\"showSizeChanger\"\n        [thyShowTotal]=\"showTotal\"\n        (thyPageChanged)=\"onPageChange($event)\"\n        (thyPageIndexChange)=\"onPageIndexChange($event)\"\n        (thyPageSizeChanged)=\"onPageSizeChange($event)\"></thy-pagination>\n    </div>\n  }\n</div>\n\n<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyDragDropDirective, selector: "[thyDragDrop]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ThyContextMenuDirective, selector: "[thyContextMenu]", outputs: ["thyContextMenu"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyTableSkeleton, selector: "thy-table-skeleton", inputs: ["thyBorderRadius", "thyRowHeight", "thyAnimated", "thyAnimatedInterval", "thyPrimaryColor", "thySecondaryColor", "thyRowCount", "thyHeadless", "thyTheme", "thySize", "thyMinWidth", "thyColumns"] }, { kind: "component", type: ThyPagination, selector: "thy-pagination", inputs: ["thyPageIndex", "thyPageSize", "thyTotal", "thyCustomPages", "thyDisabled", "thyShowQuickJumper", "thyShowTotalPageCount", "thySize", "thyMaxCount", "thyMarginalCount", "thyRangeCount", "thyShowSizeChanger", "thyPageSizeOptions", "thyHideOnSinglePage", "thyUnit", "thyShowTotal"], outputs: ["thyPageIndexChange", "thyPageChanged", "thyPageSizeChanged"] }, { kind: "pipe", type: TableIsValidModelValuePipe, name: "isValidModelValue" }, { kind: "pipe", type: TableRowDragDisabledPipe, name: "tableRowDragDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "listOfColumnComponents", predicate: ThyTableColumnComponent }], viewQueries: [{ propertyName: "tableElementRef", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "rows", predicate: ["rows"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{\n    'thy-table-fixed': hasFixed,\n    'thy-table-bordered-theme': theme === 'bordered' && hasFixed,\n    'thy-table-body-empty': loadingDone && model?.length === 0 && groups?.length === 0\n  }\">\n  <table\n    #table\n    class=\"table\"\n    [ngClass]=\"[className]\"\n    [class.table-fixed]=\"thyLayoutFixed\"\n    [class.table-draggable]=\"draggable\"\n    [class.table-group]=\"mode === 'group'\"\n    [ngStyle]=\"{ 'min-width': thyMinWidth }\">\n    <colgroup>\n      @for (column of columns; track $index) {\n        <col [width]=\"column.width\" [ngStyle]=\"{ minWidth: hasFixed ? column.width : column.minWidth }\" />\n      }\n    </colgroup>\n\n    @if (!thyHeadless) {\n      <thead>\n        <tr>\n          @for (column of columns; track $index) {\n            <th\n              [ngClass]=\"column.headerClassName\"\n              [class.thy-table-column-sortable]=\"column.sortable\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"{ left: column.left + 'px', right: column.right + 'px' }\"\n              (click)=\"onColumnHeaderClick($event, column)\">\n              @if (!column.headerTemplateRef) {\n                <span>{{ column.title }}</span>\n              }\n              @if (column.headerTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n              }\n              @if (column.sortable) {\n                <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n                </thy-icon>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n\n    @if (loadingDone) {\n      <tbody\n        thyDragDrop\n        cdkDropList\n        [cdkDropListDisabled]=\"!draggable\"\n        [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n        (cdkDropListDropped)=\"onDragDropped($event)\">\n        <!-- group -->\n        @if (mode === 'group') {\n          @for (group of groups; track group.id) {\n            <tr\n              class=\"thy-table-group\"\n              (click)=\"expandGroup(group)\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"group\"\n              [cdkDragDisabled]=\"group | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragGroupStarted($event)\"\n              (cdkDragEnded)=\"onDragGroupEnd($event)\">\n              <td [attr.colspan]=\"columns.length\">\n                <div class=\"thy-table-group-container\">\n                  @if (draggable && !(group | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                    <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                  }\n                  <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                  @if (groupTemplate) {\n                    <ng-template\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                  }\n                </div>\n              </td>\n            </tr>\n            @if (group.children?.length && group.expand) {\n              @for (row of group.children; track $index; let i = $index) {\n                <ng-template\n                  [ngTemplateOutlet]=\"trTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    row: row,\n                    index: i,\n                    level: 0\n                  }\"></ng-template>\n              }\n            }\n          }\n        }\n        <!-- list\u6A21\u5F0F\u4E0B\u6CA1\u6709\u76F4\u63A5\u4F7F\u7528item\u6A21\u677F\uFF0C\u662F\u56E0\u4E3A\u4F7F\u7528\u4E86\u6A21\u677F\u5F71\u54CD\u4E86Angular\u7684\u4F9D\u8D56\u6811\uFF0C\u5BFC\u81F4CdkDragDrop\u6392\u5E8F\u5931\u6548\uFF0C\u76EE\u524D\u8FD9\u6837\u4FEE\u6539\u53EF\u4EE5\u6682\u65F6\u89E3\u51B3\u7EBF\u4E0A\u4E0D\u80FD\u6392\u5E8F\u7684\u95EE\u9898\uFF0CTree\u6A21\u5F0F\u7684\u6392\u5E8F\u6682\u65F6\u4E0D\u652F\u6301 -->\n        @if (mode === 'list') {\n          @for (row of model; track $index; let i = $index) {\n            <tr\n              #rows\n              class=\"thy-sortable-item\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"row\"\n              [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragStarted($event)\"\n              [ngClass]=\"renderRowClassName(row, i)\"\n              (click)=\"onRowClick($event, row)\"\n              (thyContextMenu)=\"onRowContextMenu($event, row)\">\n              <ng-template\n                [ngTemplateOutlet]=\"tdsTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </tr>\n          }\n        }\n        @if (mode === 'tree') {\n          @for (row of model; track trackByFn(i, row); let i = $index) {\n            <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n          }\n        }\n        <ng-template #trTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          <tr\n            #rows\n            class=\"thy-sortable-item\"\n            cdkDrag\n            [cdkDragPreviewClass]=\"dragPreviewClass\"\n            [cdkDragData]=\"row\"\n            (cdkDragStarted)=\"onDragStarted($event)\"\n            [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n            [ngClass]=\"renderRowClassName(row, i)\"\n            (click)=\"onRowClick($event, row)\"\n            (thyContextMenu)=\"onRowContextMenu($event, row)\">\n            <ng-template\n              [ngTemplateOutlet]=\"tdsTemplate\"\n              [ngTemplateOutletContext]=\"{\n                row: row,\n                index: i,\n                level: level + 1\n              }\"></ng-template>\n          </tr>\n          @if (mode === 'tree' && isExpanded(row)) {\n            @for (child of row[thyChildrenKey]; track trackByFn(j, child); let j = $index) {\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n            }\n          }\n        </ng-template>\n        <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          @for (column of columns; track $index; let j = $index) {\n            <td\n              [ngClass]=\"column.className\"\n              [class.thy-operation-links]=\"!!column.operational\"\n              [class.thy-table-column-secondary]=\"!!column.secondary\"\n              [class.thy-table-checkbox-column]=\"column.type === customType.checkbox\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"\n                mode === 'tree' && column.expand\n                  ? tdIndentComputed(level, column)\n                  : { left: column.left + 'px', right: column.right + 'px' }\n              \">\n              @if (j === 0 && draggable && !(row | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n              }\n              <!--template-->\n              @if (isTemplateRef(column.cellTemplateRef)) {\n                @if (mode === 'tree' && column.expand) {\n                  <thy-icon\n                    class=\"tree-expand-icon cursor-pointer\"\n                    [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                    [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                    [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n                }\n                <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n              }\n              <!--not template-->\n              @if (!isTemplateRef(column.cellTemplateRef)) {\n                <!-- default -->\n                @if (column.model && !column.type) {\n                  @if (mode === 'tree' && column.expand) {\n                    <thy-icon\n                      class=\"tree-expand-icon cursor-pointer\"\n                      [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                      [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                      [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n                  }\n                  @if (getModelValue(row, column.model) | isValidModelValue) {\n                    {{ getModelValue(row, column.model) }}\n                  } @else {\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  }\n                  <ng-template #default>\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  </ng-template>\n                }\n                <!-- index -->\n                @if (column.type === customType.index) {\n                  {{ i + 1 }}\n                }\n                <!-- checkbox -->\n                @if (column.type === customType.checkbox) {\n                  <input\n                    type=\"checkbox\"\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onCheckboxChange(row, column)\"\n                    (click)=\"onStopPropagation($event)\"\n                    [disabled]=\"column.disabled\" />\n                }\n                <!-- radio -->\n                @if (column.type === customType.radio) {\n                  <input\n                    type=\"radio\"\n                    [(ngModel)]=\"selectedRadioRow\"\n                    [value]=\"row\"\n                    [disabled]=\"column.disabled\"\n                    (click)=\"onStopPropagation($event)\"\n                    (change)=\"onRadioSelectChange($event, row)\" />\n                }\n                <!-- switch -->\n                @if (column.type === customType.switch) {\n                  <thy-switch\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onModelChange(row, column)\"\n                    [disabled]=\"column.disabled\"\n                    (thyChange)=\"onSwitchChange($event, row, column)\"></thy-switch>\n                }\n              }\n            </td>\n          }\n        </ng-template>\n      </tbody>\n    }\n  </table>\n\n  @if (loadingDone && model.length === 0 && groups.length === 0) {\n    <div class=\"thy-table-empty clear-hover\">\n      @if (emptyTemplate) {\n        <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n      } @else {\n        <thy-empty\n          [thyMessage]=\"emptyOptions.message\"\n          [thyTranslationKey]=\"emptyOptions.translationKey\"\n          [thyTranslationValues]=\"emptyOptions.translationValues\"\n          [thyEntityName]=\"emptyOptions.entityName\"\n          [thyEntityNameTranslateKey]=\"emptyOptions.entityNameTranslateKey\"\n          [thyIconName]=\"emptyOptions.iconName\"\n          [thySize]=\"emptyOptions.size\"\n          [thyMarginTop]=\"emptyOptions.marginTop\"\n          [thyTopAuto]=\"emptyOptions.topAuto\"\n          [thyContainer]=\"emptyOptions.container\"></thy-empty>\n      }\n    </div>\n  }\n\n  @if (!loadingDone) {\n    <thy-table-skeleton\n      [thyRowCount]=\"6\"\n      [thyHeadless]=\"true\"\n      [thyTheme]=\"theme\"\n      [thySize]=\"size\"\n      [thyMinWidth]=\"thyMinWidth\"\n      [thyColumns]=\"skeletonColumns\">\n    </thy-table-skeleton>\n  }\n\n  @if (pagination.total > pagination.size) {\n    <div class=\"thy-table-footer\" [class.thy-table-footer-has-padding]=\"theme === 'default'\">\n      <thy-pagination\n        [thyPageIndex]=\"pagination.index\"\n        [thyTotal]=\"pagination.total\"\n        [thyPageSize]=\"pagination.size\"\n        [thyPageSizeOptions]=\"pagination.sizeOptions\"\n        [thyShowSizeChanger]=\"showSizeChanger\"\n        [thyShowTotal]=\"showTotal\"\n        (thyPageChanged)=\"onPageChange($event)\"\n        (thyPageIndexChange)=\"onPageIndexChange($event)\"\n        (thyPageSizeChanged)=\"onPageSizeChange($event)\"></thy-pagination>\n    </div>\n  }\n</div>\n\n<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyDragDropDirective, selector: "[thyDragDrop]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ThyContextMenuDirective, selector: "[thyContextMenu]", outputs: ["thyContextMenu"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyTableSkeleton, selector: "thy-table-skeleton", inputs: ["thyBorderRadius", "thyRowHeight", "thyAnimated", "thyAnimatedInterval", "thyPrimaryColor", "thySecondaryColor", "thyRowCount", "thyHeadless", "thyTheme", "thySize", "thyMinWidth", "thyColumns"] }, { kind: "component", type: ThyPagination, selector: "thy-pagination", inputs: ["thyPageIndex", "thyPageSize", "thyTotal", "thyCustomPages", "thyDisabled", "thyShowQuickJumper", "thyShowTotalPageCount", "thySize", "thyMaxCount", "thyMarginalCount", "thyRangeCount", "thyShowSizeChanger", "thyPageSizeOptions", "thyHideOnSinglePage", "thyUnit", "thyShowTotal"], outputs: ["thyPageIndexChange", "thyPageChanged", "thyPageSizeChanged"] }, { kind: "pipe", type: TableIsValidModelValuePipe, name: "isValidModelValue" }, { kind: "pipe", type: TableRowDragDisabledPipe, name: "tableRowDragDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     InputCssPixel(),
@@ -1250,13 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         TableIsValidModelValuePipe,
                         TableRowDragDisabledPipe
                     ], template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{\n    'thy-table-fixed': hasFixed,\n    'thy-table-bordered-theme': theme === 'bordered' && hasFixed,\n    'thy-table-body-empty': loadingDone && model?.length === 0 && groups?.length === 0\n  }\">\n  <table\n    #table\n    class=\"table\"\n    [ngClass]=\"[className]\"\n    [class.table-fixed]=\"thyLayoutFixed\"\n    [class.table-draggable]=\"draggable\"\n    [class.table-group]=\"mode === 'group'\"\n    [ngStyle]=\"{ 'min-width': thyMinWidth }\">\n    <colgroup>\n      @for (column of columns; track $index) {\n        <col [width]=\"column.width\" [ngStyle]=\"{ minWidth: hasFixed ? column.width : column.minWidth }\" />\n      }\n    </colgroup>\n\n    @if (!thyHeadless) {\n      <thead>\n        <tr>\n          @for (column of columns; track $index) {\n            <th\n              [ngClass]=\"column.headerClassName\"\n              [class.thy-table-column-sortable]=\"column.sortable\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"{ left: column.left + 'px', right: column.right + 'px' }\"\n              (click)=\"onColumnHeaderClick($event, column)\">\n              @if (!column.headerTemplateRef) {\n                <span>{{ column.title }}</span>\n              }\n              @if (column.headerTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n              }\n              @if (column.sortable) {\n                <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n                </thy-icon>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n\n    @if (loadingDone) {\n      <tbody\n        thyDragDrop\n        cdkDropList\n        [cdkDropListDisabled]=\"!draggable\"\n        [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n        (cdkDropListDropped)=\"onDragDropped($event)\">\n        <!-- group -->\n        @if (mode === 'group') {\n          @for (group of groups; track group.id) {\n            <tr\n              class=\"thy-table-group\"\n              (click)=\"expandGroup(group)\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"group\"\n              [cdkDragDisabled]=\"group | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragGroupStarted($event)\"\n              (cdkDragEnded)=\"onDragGroupEnd($event)\">\n              <td [attr.colspan]=\"columns.length\">\n                <div class=\"thy-table-group-container\">\n                  @if (draggable && !(group | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                    <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                  }\n                  <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                  @if (groupTemplate) {\n                    <ng-template\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                  }\n                </div>\n              </td>\n            </tr>\n            @if (group.children?.length && group.expand) {\n              @for (row of group.children; track $index; let i = $index) {\n                <ng-template\n                  [ngTemplateOutlet]=\"trTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    row: row,\n                    index: i,\n                    level: 0\n                  }\"></ng-template>\n              }\n            }\n          }\n        }\n        <!-- list\u6A21\u5F0F\u4E0B\u6CA1\u6709\u76F4\u63A5\u4F7F\u7528item\u6A21\u677F\uFF0C\u662F\u56E0\u4E3A\u4F7F\u7528\u4E86\u6A21\u677F\u5F71\u54CD\u4E86Angular\u7684\u4F9D\u8D56\u6811\uFF0C\u5BFC\u81F4CdkDragDrop\u6392\u5E8F\u5931\u6548\uFF0C\u76EE\u524D\u8FD9\u6837\u4FEE\u6539\u53EF\u4EE5\u6682\u65F6\u89E3\u51B3\u7EBF\u4E0A\u4E0D\u80FD\u6392\u5E8F\u7684\u95EE\u9898\uFF0CTree\u6A21\u5F0F\u7684\u6392\u5E8F\u6682\u65F6\u4E0D\u652F\u6301 -->\n        @if (mode === 'list') {\n          @for (row of model; track $index; let i = $index) {\n            <tr\n              #rows\n              class=\"thy-sortable-item\"\n              cdkDrag\n              [cdkDragPreviewClass]=\"dragPreviewClass\"\n              [cdkDragData]=\"row\"\n              [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n              (cdkDragStarted)=\"onDragStarted($event)\"\n              [ngClass]=\"renderRowClassName(row, i)\"\n              (click)=\"onRowClick($event, row)\"\n              (thyContextMenu)=\"onRowContextMenu($event, row)\">\n              <ng-template\n                [ngTemplateOutlet]=\"tdsTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </tr>\n          }\n        }\n        @if (mode === 'tree') {\n          @for (row of model; track trackByFn(i, row); let i = $index) {\n            <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n          }\n        }\n        <ng-template #trTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          <tr\n            #rows\n            class=\"thy-sortable-item\"\n            cdkDrag\n            [cdkDragPreviewClass]=\"dragPreviewClass\"\n            [cdkDragData]=\"row\"\n            (cdkDragStarted)=\"onDragStarted($event)\"\n            [cdkDragDisabled]=\"row | tableRowDragDisabled: thyDragDisabledPredicate\"\n            [ngClass]=\"renderRowClassName(row, i)\"\n            (click)=\"onRowClick($event, row)\"\n            (thyContextMenu)=\"onRowContextMenu($event, row)\">\n            <ng-template\n              [ngTemplateOutlet]=\"tdsTemplate\"\n              [ngTemplateOutletContext]=\"{\n                row: row,\n                index: i,\n                level: level + 1\n              }\"></ng-template>\n          </tr>\n          @if (mode === 'tree' && isExpanded(row)) {\n            @for (child of row[thyChildrenKey]; track trackByFn(j, child); let j = $index) {\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n            }\n          }\n        </ng-template>\n        <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n          @for (column of columns; track $index; let j = $index) {\n            <td\n              [ngClass]=\"column.className\"\n              [class.thy-operation-links]=\"!!column.operational\"\n              [class.thy-table-column-secondary]=\"!!column.secondary\"\n              [class.thy-table-checkbox-column]=\"column.type === customType.checkbox\"\n              [class.thy-table-fixed-column-left]=\"column.fixed === fixedDirection.left\"\n              [class.thy-table-fixed-column-right]=\"column.fixed === fixedDirection.right\"\n              [ngStyle]=\"\n                mode === 'tree' && column.expand\n                  ? tdIndentComputed(level, column)\n                  : { left: column.left + 'px', right: column.right + 'px' }\n              \">\n              @if (j === 0 && draggable && !(row | tableRowDragDisabled: thyDragDisabledPredicate)) {\n                <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n              }\n              <!--template-->\n              @if (isTemplateRef(column.cellTemplateRef)) {\n                @if (mode === 'tree' && column.expand) {\n                  <thy-icon\n                    class=\"tree-expand-icon cursor-pointer\"\n                    [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                    [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                    [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n                }\n                <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n              }\n              <!--not template-->\n              @if (!isTemplateRef(column.cellTemplateRef)) {\n                <!-- default -->\n                @if (column.model && !column.type) {\n                  @if (mode === 'tree' && column.expand) {\n                    <thy-icon\n                      class=\"tree-expand-icon cursor-pointer\"\n                      [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                      [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                      [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n                  }\n                  @if (getModelValue(row, column.model) | isValidModelValue) {\n                    {{ getModelValue(row, column.model) }}\n                  } @else {\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  }\n                  <ng-template #default>\n                    @if (column.defaultText) {\n                      <div class=\"text-desc\">\n                        {{ column.defaultText }}\n                      </div>\n                    }\n                  </ng-template>\n                }\n                <!-- index -->\n                @if (column.type === customType.index) {\n                  {{ i + 1 }}\n                }\n                <!-- checkbox -->\n                @if (column.type === customType.checkbox) {\n                  <input\n                    type=\"checkbox\"\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onCheckboxChange(row, column)\"\n                    (click)=\"onStopPropagation($event)\"\n                    [disabled]=\"column.disabled\" />\n                }\n                <!-- radio -->\n                @if (column.type === customType.radio) {\n                  <input\n                    type=\"radio\"\n                    [(ngModel)]=\"selectedRadioRow\"\n                    [value]=\"row\"\n                    [disabled]=\"column.disabled\"\n                    (click)=\"onStopPropagation($event)\"\n                    (change)=\"onRadioSelectChange($event, row)\" />\n                }\n                <!-- switch -->\n                @if (column.type === customType.switch) {\n                  <thy-switch\n                    [(ngModel)]=\"row[column.key]\"\n                    (ngModelChange)=\"onModelChange(row, column)\"\n                    [disabled]=\"column.disabled\"\n                    (thyChange)=\"onSwitchChange($event, row, column)\"></thy-switch>\n                }\n              }\n            </td>\n          }\n        </ng-template>\n      </tbody>\n    }\n  </table>\n\n  @if (loadingDone && model.length === 0 && groups.length === 0) {\n    <div class=\"thy-table-empty clear-hover\">\n      @if (emptyTemplate) {\n        <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n      } @else {\n        <thy-empty\n          [thyMessage]=\"emptyOptions.message\"\n          [thyTranslationKey]=\"emptyOptions.translationKey\"\n          [thyTranslationValues]=\"emptyOptions.translationValues\"\n          [thyEntityName]=\"emptyOptions.entityName\"\n          [thyEntityNameTranslateKey]=\"emptyOptions.entityNameTranslateKey\"\n          [thyIconName]=\"emptyOptions.iconName\"\n          [thySize]=\"emptyOptions.size\"\n          [thyMarginTop]=\"emptyOptions.marginTop\"\n          [thyTopAuto]=\"emptyOptions.topAuto\"\n          [thyContainer]=\"emptyOptions.container\"></thy-empty>\n      }\n    </div>\n  }\n\n  @if (!loadingDone) {\n    <thy-table-skeleton\n      [thyRowCount]=\"6\"\n      [thyHeadless]=\"true\"\n      [thyTheme]=\"theme\"\n      [thySize]=\"size\"\n      [thyMinWidth]=\"thyMinWidth\"\n      [thyColumns]=\"skeletonColumns\">\n    </thy-table-skeleton>\n  }\n\n  @if (pagination.total > pagination.size) {\n    <div class=\"thy-table-footer\" [class.thy-table-footer-has-padding]=\"theme === 'default'\">\n      <thy-pagination\n        [thyPageIndex]=\"pagination.index\"\n        [thyTotal]=\"pagination.total\"\n        [thyPageSize]=\"pagination.size\"\n        [thyPageSizeOptions]=\"pagination.sizeOptions\"\n        [thyShowSizeChanger]=\"showSizeChanger\"\n        [thyShowTotal]=\"showTotal\"\n        (thyPageChanged)=\"onPageChange($event)\"\n        (thyPageIndexChange)=\"onPageIndexChange($event)\"\n        (thyPageSizeChanged)=\"onPageSizeChange($event)\"></thy-pagination>\n    </div>\n  }\n</div>\n\n<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1.ViewportRuler }, { type: i2.UpdateHostClassService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { emptyTemplate: [{
+        }], ctorParameters: () => [], propDecorators: { emptyTemplate: [{
                 type: ContentChild,
                 args: ['empty']
             }], tableElementRef: [{