ngx-tethys 17.0.0-next.1 → 17.0.0-next.3

package/fesm2022/ngx-tethys-table.mjs

@@ -10,14 +10,14 @@ import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { NgFor, NgClass, NgIf, NgTemplateOutlet, isPlatformServer, DOCUMENT, NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, TemplateRef, Component, ViewEncapsulation, Optional, Inject, Input, Output, ContentChild, Pipe, ChangeDetectionStrategy, ViewChild, PLATFORM_ID, ElementRef, ViewChildren, HostBinding, ContentChildren, NgModule } from '@angular/core';
-import { ThyPaginationComponent, ThyPaginationModule } from 'ngx-tethys/pagination';
-import { ThySkeletonRectangleComponent, ThySkeletonCircleComponent, ThySkeletonModule } from 'ngx-tethys/skeleton';
+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 { ThyEmptyComponent, ThyEmptyModule } from 'ngx-tethys/empty';
-import { ThySwitchComponent, ThySwitchModule } from 'ngx-tethys/switch';
+import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
+import { ThySwitch, ThySwitchModule } from 'ngx-tethys/switch';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ThyIconComponent, ThyIconModule } from 'ngx-tethys/icon';
+import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
 import { ThyLoadingModule } from 'ngx-tethys/loading';
 
@@ -297,7 +297,7 @@ const COLUMN_COUNT = 5;
  * 表格的骨架屏组件
  * @name thy-table-skeleton
  */
-class ThyTableSkeletonComponent {
+class ThyTableSkeleton {
     /**
      * 行数
      */
@@ -391,34 +391,34 @@ class ThyTableSkeletonComponent {
         };
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableSkeletonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTableSkeletonComponent, isStandalone: true, selector: "thy-table-skeleton", inputs: { thyBorderRadius: "thyBorderRadius", thyRowHeight: "thyRowHeight", thyAnimated: "thyAnimated", thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyRowCount: "thyRowCount", thyHeadless: "thyHeadless", 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\" [style.min-width]=\"thyMinWidth\">\n  <colgroup>\n    <col *ngFor=\"let column of columns; trackBy: trackByFn\" [width]=\"column.width\" />\n  </colgroup>\n  <ng-container *ngIf=\"!thyHeadless\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns; trackBy: trackByFn\">\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      </tr>\n    </thead>\n  </ng-container>\n  <tbody>\n    <ng-container *ngFor=\"let item of rowCount; let i = index\">\n      <tr>\n        <ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\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        </ng-container>\n      </tr>\n    </ng-container>\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=\"defaultTemplate;\n      context:{\n        rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : '',\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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ThyViewOutletDirective, selector: "[thyViewOutlet]", inputs: ["thyViewOutlet", "thyViewOutletContext"] }, { kind: "component", type: ThySkeletonRectangleComponent, selector: "thy-skeleton-rectangle", inputs: ["thyAnimated", "thyAnimatedInterval", "thyBorderRadius", "thyRowWidth", "thyRowHeight", "thyPrimaryColor", "thySecondaryColor"] }, { kind: "component", type: ThySkeletonCircleComponent, selector: "thy-skeleton-circle", inputs: ["thyAnimatedInterval", "thySize", "thyPrimaryColor", "thySecondaryColor", "thyAnimated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableSkeleton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTableSkeleton, isStandalone: true, selector: "thy-table-skeleton", inputs: { thyBorderRadius: "thyBorderRadius", thyRowHeight: "thyRowHeight", thyAnimated: "thyAnimated", thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyRowCount: "thyRowCount", thyHeadless: "thyHeadless", 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\" [style.min-width]=\"thyMinWidth\">\n  <colgroup>\n    <col *ngFor=\"let column of columns; trackBy: trackByFn\" [width]=\"column.width\" />\n  </colgroup>\n  <ng-container *ngIf=\"!thyHeadless\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns; trackBy: trackByFn\">\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      </tr>\n    </thead>\n  </ng-container>\n  <tbody>\n    <ng-container *ngFor=\"let item of rowCount; let i = index\">\n      <tr>\n        <ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\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        </ng-container>\n      </tr>\n    </ng-container>\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=\"defaultTemplate;\n      context:{\n        rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : '',\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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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([
     InputCssPixel(),
     __metadata("design:type", Object)
-], ThyTableSkeletonComponent.prototype, "thyBorderRadius", void 0);
+], ThyTableSkeleton.prototype, "thyBorderRadius", void 0);
 __decorate([
     InputCssPixel(),
     __metadata("design:type", Object)
-], ThyTableSkeletonComponent.prototype, "thyRowHeight", void 0);
+], ThyTableSkeleton.prototype, "thyRowHeight", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean)
-], ThyTableSkeletonComponent.prototype, "thyAnimated", void 0);
+], ThyTableSkeleton.prototype, "thyAnimated", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTableSkeletonComponent.prototype, "thyHeadless", void 0);
+], ThyTableSkeleton.prototype, "thyHeadless", void 0);
 __decorate([
     InputCssPixel(),
     __metadata("design:type", Object)
-], ThyTableSkeletonComponent.prototype, "thyMinWidth", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableSkeletonComponent, decorators: [{
+], ThyTableSkeleton.prototype, "thyMinWidth", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableSkeleton, decorators: [{
             type: Component,
             args: [{ selector: 'thy-table-skeleton', host: {
                         class: 'thy-table-skeleton'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgFor, NgClass, NgIf, NgTemplateOutlet, ThyViewOutletDirective, ThySkeletonRectangleComponent, ThySkeletonCircleComponent], template: "<table [ngClass]=\"tableClassMap\" [style.min-width]=\"thyMinWidth\">\n  <colgroup>\n    <col *ngFor=\"let column of columns; trackBy: trackByFn\" [width]=\"column.width\" />\n  </colgroup>\n  <ng-container *ngIf=\"!thyHeadless\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns; trackBy: trackByFn\">\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      </tr>\n    </thead>\n  </ng-container>\n  <tbody>\n    <ng-container *ngFor=\"let item of rowCount; let i = index\">\n      <tr>\n        <ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\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        </ng-container>\n      </tr>\n    </ng-container>\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=\"defaultTemplate;\n      context:{\n        rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : '',\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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgFor, NgClass, NgIf, NgTemplateOutlet, ThyViewOutletDirective, ThySkeletonRectangle, ThySkeletonCircle], template: "<table [ngClass]=\"tableClassMap\" [style.min-width]=\"thyMinWidth\">\n  <colgroup>\n    <col *ngFor=\"let column of columns; trackBy: trackByFn\" [width]=\"column.width\" />\n  </colgroup>\n  <ng-container *ngIf=\"!thyHeadless\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns; trackBy: trackByFn\">\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      </tr>\n    </thead>\n  </ng-container>\n  <tbody>\n    <ng-container *ngFor=\"let item of rowCount; let i = index\">\n      <tr>\n        <ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\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        </ng-container>\n      </tr>\n    </ng-container>\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=\"defaultTemplate;\n      context:{\n        rowWidth: trIndex % 3 === 0 ? '75%' : trIndex % 3 === 1 ? '100%' : trIndex % 3 === 2 ? '65%' : '',\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: [{
                 type: ViewChild,
                 args: ['titleTemplate']
@@ -486,7 +486,7 @@ const _MixinBase = mixinUnsubscribe(MixinBase);
  * @name thy-table
  * @order 10
  */
-class ThyTableComponent extends _MixinBase {
+class ThyTable extends _MixinBase {
     get tableScrollElement() {
         return this.elementRef.nativeElement.getElementsByClassName(css.tableBody)[0];
     }
@@ -1229,92 +1229,92 @@ class ThyTableComponent extends _MixinBase {
         super.ngOnDestroy();
         this._destroyInvalidAttribute();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableComponent, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTableComponent, isStandalone: true, selector: "thy-table", inputs: { thyMode: "thyMode", thyGroupBy: "thyGroupBy", thyRowKey: "thyRowKey", thyGroups: "thyGroups", thyModel: "thyModel", thyTheme: "thyTheme", thySize: "thySize", thyMinWidth: "thyMinWidth", thyLayoutFixed: "thyLayoutFixed", thyHeaderFixed: "thyHeaderFixed", thyHeight: "thyHeight", thyClassName: "thyClassName", thyRowClassName: "thyRowClassName", thyLoadingDone: "thyLoadingDone", thyLoadingText: "thyLoadingText", thyEmptyOptions: "thyEmptyOptions", thyDraggable: "thyDraggable", thyPageIndex: "thyPageIndex", thyPageSize: "thyPageSize", thyPageTotal: "thyPageTotal", thyWholeRowSelect: "thyWholeRowSelect", thyHeadless: "thyHeadless", thyShowHeader: "thyShowHeader", showTotal: ["thyShowTotal", "showTotal"], showSizeChanger: ["thyShowSizeChanger", "showSizeChanger"], pageSizeOptions: ["thyPageSizeOptions", "pageSizeOptions"], thyIndent: "thyIndent", thyChildrenKey: "thyChildrenKey", thyHoverDisplayOperation: "thyHoverDisplayOperation", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", 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", thyHeaderFixed: "thyHeaderFixed", thyHeight: "thyHeight", thyClassName: "thyClassName", thyRowClassName: "thyRowClassName", thyLoadingDone: "thyLoadingDone", thyLoadingText: "thyLoadingText", thyEmptyOptions: "thyEmptyOptions", thyDraggable: "thyDraggable", thyPageIndex: "thyPageIndex", thyPageSize: "thyPageSize", thyPageTotal: "thyPageTotal", thyWholeRowSelect: "thyWholeRowSelect", thyHeadless: "thyHeadless", thyShowHeader: "thyShowHeader", showTotal: ["thyShowTotal", "showTotal"], showSizeChanger: ["thyShowSizeChanger", "showSizeChanger"], pageSizeOptions: ["thyPageSizeOptions", "pageSizeOptions"], thyIndent: "thyIndent", thyChildrenKey: "thyChildrenKey", thyHoverDisplayOperation: "thyHoverDisplayOperation", 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: ThyTableComponent
+                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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{ 'thy-table-fixed': hasFixed, 'thy-table-bordered-theme': theme === 'bordered' && hasFixed }\">\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    [style.min-width]=\"thyMinWidth\">\n    <colgroup>\n      <col *ngFor=\"let column of columns\" [width]=\"column.width\" [style.minWidth]=\"hasFixed ? column.width : column.minWidth\" />\n    </colgroup>\n\n    <thead *ngIf=\"!thyHeadless\">\n      <tr>\n        <th\n          *ngFor=\"let column of columns\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          (click)=\"onColumnHeaderClick($event, column)\">\n          <ng-container *ngIf=\"!column.headerTemplateRef\">\n            <span>{{ column.title }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"column.headerTemplateRef\">\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"column.sortable\">\n            <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n            </thy-icon>\n          </ng-container>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody\n      *ngIf=\"loadingDone\"\n      thyDragDrop\n      cdkDropList\n      [cdkDropListDisabled]=\"!draggable\"\n      [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n      (cdkDropListDropped)=\"onDragDropped($event)\">\n      <!-- group -->\n      <ng-container *ngIf=\"mode === 'group'\">\n        <ng-container *ngFor=\"let group of groups\">\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                <ng-container *ngIf=\"draggable && !(group | tableRowDragDisabled : thyDragDisabledPredicate)\">\n                  <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                </ng-container>\n                <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                <ng-container *ngIf=\"groupTemplate\">\n                  <ng-template\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                </ng-container>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"group.children?.length && group.expand\">\n            <ng-container *ngFor=\"let row of group.children; trackBy: trackByFn; let i = index\">\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\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      <ng-container *ngIf=\"mode === 'list'\">\n        <tr\n          #rows\n          *ngFor=\"let row of model; trackBy: trackByFn; let i = index\"\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      </ng-container>\n\n      <ng-container *ngIf=\"mode === 'tree'\">\n        <ng-container *ngFor=\"let row of model; trackBy: trackByFn; let i = index\">\n          <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n        </ng-container>\n      </ng-container>\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\n        <ng-container *ngIf=\"mode === 'tree' && isExpanded(row)\">\n          <ng-template\n            *ngFor=\"let child of row[thyChildrenKey]; trackBy: trackByFn; let j = index\"\n            [ngTemplateOutlet]=\"trTemplate\"\n            [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n        </ng-container>\n      </ng-template>\n\n      <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n        <td\n          *ngFor=\"let column of columns; let j = index\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          [ngStyle]=\"mode === 'tree' && column.expand ? tdIndentComputed(level) : null\">\n          <ng-container *ngIf=\"j === 0 && draggable && !(row | tableRowDragDisabled : thyDragDisabledPredicate)\">\n            <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n          </ng-container>\n\n          <!--template-->\n          <ng-container *ngIf=\"isTemplateRef(column.cellTemplateRef)\">\n            <thy-icon\n              class=\"tree-expand-icon cursor-pointer\"\n              *ngIf=\"mode === 'tree' && column.expand\"\n              [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n              [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n              [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n            <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n          </ng-container>\n\n          <!--not template-->\n          <ng-container *ngIf=\"!isTemplateRef(column.cellTemplateRef)\">\n            <!-- default -->\n            <ng-container *ngIf=\"column.model && !column.type\">\n              <thy-icon\n                class=\"tree-expand-icon cursor-pointer\"\n                *ngIf=\"mode === 'tree' && column.expand\"\n                [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n              <ng-container *ngIf=\"getModelValue(row, column.model) | isValidModelValue; else default\">\n                {{ getModelValue(row, column.model) }}\n              </ng-container>\n              <ng-template #default>\n                <div *ngIf=\"column.defaultText\" class=\"text-desc\">\n                  {{ column.defaultText }}\n                </div>\n              </ng-template>\n            </ng-container>\n\n            <!-- index -->\n            <ng-container *ngIf=\"column.type === customType.index\">\n              {{ i + 1 }}\n            </ng-container>\n\n            <!-- checkbox -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- radio -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- switch -->\n            <ng-container *ngIf=\"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            </ng-container>\n          </ng-container>\n        </td>\n      </ng-template>\n    </tbody>\n  </table>\n\n  <div *ngIf=\"loadingDone && model.length === 0 && groups.length === 0\" class=\"thy-table-empty clear-hover\">\n    <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n      <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n    </ng-container>\n    <ng-template #defaultEmpty>\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    </ng-template>\n  </div>\n\n  <thy-table-skeleton\n    *ngIf=\"!loadingDone\"\n    [thyRowCount]=\"6\"\n    [thyHeadless]=\"true\"\n    [thyTheme]=\"theme\"\n    [thySize]=\"size\"\n    [thyMinWidth]=\"thyMinWidth\"\n    [thyColumns]=\"skeletonColumns\">\n  </thy-table-skeleton>\n\n  <div class=\"thy-table-footer\" *ngIf=\"pagination.total > pagination.size\" [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</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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIconComponent, 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "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: ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyTableSkeletonComponent, selector: "thy-table-skeleton", inputs: ["thyBorderRadius", "thyRowHeight", "thyAnimated", "thyAnimatedInterval", "thyPrimaryColor", "thySecondaryColor", "thyRowCount", "thyHeadless", "thyTheme", "thySize", "thyMinWidth", "thyColumns"] }, { kind: "component", type: ThyPaginationComponent, selector: "thy-pagination", inputs: ["thyPageIndex", "thyPageSize", "thyTotal", "thyCustomPages", "thyDisabled", "thyShowQuickJumper", "thyShowTotalPageCount", "thySize", "thyMaxCount", "thyMarginalCount", "thyRangeCount", "thyShowSizeChanger", "thyPageSizeOptions", "thyHideOnSinglePage", "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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{ 'thy-table-fixed': hasFixed, 'thy-table-bordered-theme': theme === 'bordered' && hasFixed }\">\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    [style.min-width]=\"thyMinWidth\">\n    <colgroup>\n      <col *ngFor=\"let column of columns\" [width]=\"column.width\" [style.minWidth]=\"hasFixed ? column.width : column.minWidth\" />\n    </colgroup>\n\n    <thead *ngIf=\"!thyHeadless\">\n      <tr>\n        <th\n          *ngFor=\"let column of columns\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          (click)=\"onColumnHeaderClick($event, column)\">\n          <ng-container *ngIf=\"!column.headerTemplateRef\">\n            <span>{{ column.title }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"column.headerTemplateRef\">\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"column.sortable\">\n            <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n            </thy-icon>\n          </ng-container>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody\n      *ngIf=\"loadingDone\"\n      thyDragDrop\n      cdkDropList\n      [cdkDropListDisabled]=\"!draggable\"\n      [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n      (cdkDropListDropped)=\"onDragDropped($event)\">\n      <!-- group -->\n      <ng-container *ngIf=\"mode === 'group'\">\n        <ng-container *ngFor=\"let group of groups\">\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                <ng-container *ngIf=\"draggable && !(group | tableRowDragDisabled : thyDragDisabledPredicate)\">\n                  <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                </ng-container>\n                <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                <ng-container *ngIf=\"groupTemplate\">\n                  <ng-template\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                </ng-container>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"group.children?.length && group.expand\">\n            <ng-container *ngFor=\"let row of group.children; trackBy: trackByFn; let i = index\">\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\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      <ng-container *ngIf=\"mode === 'list'\">\n        <tr\n          #rows\n          *ngFor=\"let row of model; trackBy: trackByFn; let i = index\"\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      </ng-container>\n\n      <ng-container *ngIf=\"mode === 'tree'\">\n        <ng-container *ngFor=\"let row of model; trackBy: trackByFn; let i = index\">\n          <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n        </ng-container>\n      </ng-container>\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\n        <ng-container *ngIf=\"mode === 'tree' && isExpanded(row)\">\n          <ng-template\n            *ngFor=\"let child of row[thyChildrenKey]; trackBy: trackByFn; let j = index\"\n            [ngTemplateOutlet]=\"trTemplate\"\n            [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n        </ng-container>\n      </ng-template>\n\n      <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n        <td\n          *ngFor=\"let column of columns; let j = index\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          [ngStyle]=\"mode === 'tree' && column.expand ? tdIndentComputed(level) : null\">\n          <ng-container *ngIf=\"j === 0 && draggable && !(row | tableRowDragDisabled : thyDragDisabledPredicate)\">\n            <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n          </ng-container>\n\n          <!--template-->\n          <ng-container *ngIf=\"isTemplateRef(column.cellTemplateRef)\">\n            <thy-icon\n              class=\"tree-expand-icon cursor-pointer\"\n              *ngIf=\"mode === 'tree' && column.expand\"\n              [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n              [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n              [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n            <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n          </ng-container>\n\n          <!--not template-->\n          <ng-container *ngIf=\"!isTemplateRef(column.cellTemplateRef)\">\n            <!-- default -->\n            <ng-container *ngIf=\"column.model && !column.type\">\n              <thy-icon\n                class=\"tree-expand-icon cursor-pointer\"\n                *ngIf=\"mode === 'tree' && column.expand\"\n                [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n              <ng-container *ngIf=\"getModelValue(row, column.model) | isValidModelValue; else default\">\n                {{ getModelValue(row, column.model) }}\n              </ng-container>\n              <ng-template #default>\n                <div *ngIf=\"column.defaultText\" class=\"text-desc\">\n                  {{ column.defaultText }}\n                </div>\n              </ng-template>\n            </ng-container>\n\n            <!-- index -->\n            <ng-container *ngIf=\"column.type === customType.index\">\n              {{ i + 1 }}\n            </ng-container>\n\n            <!-- checkbox -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- radio -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- switch -->\n            <ng-container *ngIf=\"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            </ng-container>\n          </ng-container>\n        </td>\n      </ng-template>\n    </tbody>\n  </table>\n\n  <div *ngIf=\"loadingDone && model.length === 0 && groups.length === 0\" class=\"thy-table-empty clear-hover\">\n    <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n      <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n    </ng-container>\n    <ng-template #defaultEmpty>\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    </ng-template>\n  </div>\n\n  <thy-table-skeleton\n    *ngIf=\"!loadingDone\"\n    [thyRowCount]=\"6\"\n    [thyHeadless]=\"true\"\n    [thyTheme]=\"theme\"\n    [thySize]=\"size\"\n    [thyMinWidth]=\"thyMinWidth\"\n    [thyColumns]=\"skeletonColumns\">\n  </thy-table-skeleton>\n\n  <div class=\"thy-table-footer\" *ngIf=\"pagination.total > pagination.size\" [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</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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "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", "thyShowTotal"], outputs: ["thyPageIndexChange", "thyPageChanged", "thyPageSizeChanged"] }, { kind: "pipe", type: TableIsValidModelValuePipe, name: "isValidModelValue" }, { kind: "pipe", type: TableRowDragDisabledPipe, name: "tableRowDragDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     InputCssPixel(),
     __metadata("design:type", Object)
-], ThyTableComponent.prototype, "thyMinWidth", void 0);
+], ThyTable.prototype, "thyMinWidth", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean)
-], ThyTableComponent.prototype, "thyLayoutFixed", void 0);
+], ThyTable.prototype, "thyLayoutFixed", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean)
-], ThyTableComponent.prototype, "thyHeaderFixed", void 0);
+], ThyTable.prototype, "thyHeaderFixed", void 0);
 __decorate([
     InputCssPixel(),
     __metadata("design:type", String)
-], ThyTableComponent.prototype, "thyHeight", void 0);
+], ThyTable.prototype, "thyHeight", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTableComponent.prototype, "thyLoadingDone", null);
+], ThyTable.prototype, "thyLoadingDone", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTableComponent.prototype, "thyDraggable", null);
+], ThyTable.prototype, "thyDraggable", null);
 __decorate([
     InputNumber(),
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
-], ThyTableComponent.prototype, "thyPageIndex", null);
+], ThyTable.prototype, "thyPageIndex", null);
 __decorate([
     InputNumber(),
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
-], ThyTableComponent.prototype, "thyPageSize", null);
+], ThyTable.prototype, "thyPageSize", null);
 __decorate([
     InputNumber(),
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
-], ThyTableComponent.prototype, "thyPageTotal", null);
+], ThyTable.prototype, "thyPageTotal", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTableComponent.prototype, "thyWholeRowSelect", null);
+], ThyTable.prototype, "thyWholeRowSelect", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTableComponent.prototype, "thyHeadless", void 0);
+], ThyTable.prototype, "thyHeadless", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTableComponent.prototype, "thyShowHeader", null);
+], ThyTable.prototype, "thyShowHeader", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTableComponent.prototype, "showTotal", void 0);
+], ThyTable.prototype, "showTotal", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTableComponent.prototype, "showSizeChanger", void 0);
+], ThyTable.prototype, "showSizeChanger", void 0);
 __decorate([
     InputNumber(),
     __metadata("design:type", Object)
-], ThyTableComponent.prototype, "thyIndent", void 0);
+], ThyTable.prototype, "thyIndent", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean)
-], ThyTableComponent.prototype, "thyHoverDisplayOperation", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableComponent, decorators: [{
+], ThyTable.prototype, "thyHoverDisplayOperation", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTable, decorators: [{
             type: Component,
             args: [{ selector: 'thy-table', providers: [
                         {
                             provide: THY_TABLE_COLUMN_PARENT_COMPONENT,
-                            useExisting: ThyTableComponent
+                            useExisting: ThyTable
                         },
                         UpdateHostClassService
                     ], encapsulation: ViewEncapsulation.None, host: {
@@ -1328,17 +1328,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         NgFor,
                         NgIf,
                         NgTemplateOutlet,
-                        ThyIconComponent,
+                        ThyIcon,
                         ThyDragDropDirective,
                         CdkDropList,
                         CdkDrag,
                         ThyContextMenuDirective,
                         NgStyle,
                         FormsModule,
-                        ThySwitchComponent,
-                        ThyEmptyComponent,
-                        ThyTableSkeletonComponent,
-                        ThyPaginationComponent,
+                        ThySwitch,
+                        ThyEmpty,
+                        ThyTableSkeleton,
+                        ThyPagination,
                         TableIsValidModelValuePipe,
                         TableRowDragDisabledPipe
                     ], template: "<div\n  class=\"thy-table-body\"\n  cdkScrollable\n  [ngClass]=\"{ 'thy-table-fixed': hasFixed, 'thy-table-bordered-theme': theme === 'bordered' && hasFixed }\">\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    [style.min-width]=\"thyMinWidth\">\n    <colgroup>\n      <col *ngFor=\"let column of columns\" [width]=\"column.width\" [style.minWidth]=\"hasFixed ? column.width : column.minWidth\" />\n    </colgroup>\n\n    <thead *ngIf=\"!thyHeadless\">\n      <tr>\n        <th\n          *ngFor=\"let column of columns\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          (click)=\"onColumnHeaderClick($event, column)\">\n          <ng-container *ngIf=\"!column.headerTemplateRef\">\n            <span>{{ column.title }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"column.headerTemplateRef\">\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: column }\"></ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"column.sortable\">\n            <thy-icon [ngClass]=\"['thy-table-column-sortable-icon', 'px-1', column.sortDirection]\" thyIconName=\"sort-vertical-tt\">\n            </thy-icon>\n          </ng-container>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody\n      *ngIf=\"loadingDone\"\n      thyDragDrop\n      cdkDropList\n      [cdkDropListDisabled]=\"!draggable\"\n      [cdkDropListSortPredicate]=\"dropListEnterPredicate\"\n      (cdkDropListDropped)=\"onDragDropped($event)\">\n      <!-- group -->\n      <ng-container *ngIf=\"mode === 'group'\">\n        <ng-container *ngFor=\"let group of groups\">\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                <ng-container *ngIf=\"draggable && !(group | tableRowDragDisabled : thyDragDisabledPredicate)\">\n                  <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n                </ng-container>\n                <thy-icon class=\"expand-icon\" [thyIconName]=\"group.expand ? 'angle-down' : 'angle-right'\"></thy-icon>\n                <ng-container *ngIf=\"groupTemplate\">\n                  <ng-template\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"></ng-template>\n                </ng-container>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"group.children?.length && group.expand\">\n            <ng-container *ngFor=\"let row of group.children; trackBy: trackByFn; let i = index\">\n              <ng-template\n                [ngTemplateOutlet]=\"trTemplate\"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  index: i,\n                  level: 0\n                }\"></ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\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      <ng-container *ngIf=\"mode === 'list'\">\n        <tr\n          #rows\n          *ngFor=\"let row of model; trackBy: trackByFn; let i = index\"\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      </ng-container>\n\n      <ng-container *ngIf=\"mode === 'tree'\">\n        <ng-container *ngFor=\"let row of model; trackBy: trackByFn; let i = index\">\n          <ng-template [ngTemplateOutlet]=\"trTemplate\" [ngTemplateOutletContext]=\"{ row: row, index: i, level: 0 }\"></ng-template>\n        </ng-container>\n      </ng-container>\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\n        <ng-container *ngIf=\"mode === 'tree' && isExpanded(row)\">\n          <ng-template\n            *ngFor=\"let child of row[thyChildrenKey]; trackBy: trackByFn; let j = index\"\n            [ngTemplateOutlet]=\"trTemplate\"\n            [ngTemplateOutletContext]=\"{ row: child, index: j, level: level + 1 }\"></ng-template>\n        </ng-container>\n      </ng-template>\n\n      <ng-template #tdsTemplate let-row=\"row\" let-i=\"index\" let-level=\"level\">\n        <td\n          *ngFor=\"let column of columns; let j = index\"\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          [style.left.px]=\"column.left\"\n          [style.right.px]=\"column.right\"\n          [ngStyle]=\"mode === 'tree' && column.expand ? tdIndentComputed(level) : null\">\n          <ng-container *ngIf=\"j === 0 && draggable && !(row | tableRowDragDisabled : thyDragDisabledPredicate)\">\n            <thy-icon class=\"table-draggable-icon\" thyIconName=\"drag\"></thy-icon>\n          </ng-container>\n\n          <!--template-->\n          <ng-container *ngIf=\"isTemplateRef(column.cellTemplateRef)\">\n            <thy-icon\n              class=\"tree-expand-icon cursor-pointer\"\n              *ngIf=\"mode === 'tree' && column.expand\"\n              [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n              [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n              [style.left.px]=\"iconIndentComputed(level)\"></thy-icon>\n            <ng-template [ngTemplateOutlet]=\"column.cellTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-template>\n          </ng-container>\n\n          <!--not template-->\n          <ng-container *ngIf=\"!isTemplateRef(column.cellTemplateRef)\">\n            <!-- default -->\n            <ng-container *ngIf=\"column.model && !column.type\">\n              <thy-icon\n                class=\"tree-expand-icon cursor-pointer\"\n                *ngIf=\"mode === 'tree' && column.expand\"\n                [thyIconName]=\"isExpanded(row) ? 'angle-down' : 'angle-right'\"\n                [style.visibility]=\"showExpand(row) ? 'visible' : 'hidden'\"\n                [style.marginLeft.px]=\"iconIndentComputed(level)\"></thy-icon>\n              <ng-container *ngIf=\"getModelValue(row, column.model) | isValidModelValue; else default\">\n                {{ getModelValue(row, column.model) }}\n              </ng-container>\n              <ng-template #default>\n                <div *ngIf=\"column.defaultText\" class=\"text-desc\">\n                  {{ column.defaultText }}\n                </div>\n              </ng-template>\n            </ng-container>\n\n            <!-- index -->\n            <ng-container *ngIf=\"column.type === customType.index\">\n              {{ i + 1 }}\n            </ng-container>\n\n            <!-- checkbox -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- radio -->\n            <ng-container *ngIf=\"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            </ng-container>\n\n            <!-- switch -->\n            <ng-container *ngIf=\"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            </ng-container>\n          </ng-container>\n        </td>\n      </ng-template>\n    </tbody>\n  </table>\n\n  <div *ngIf=\"loadingDone && model.length === 0 && groups.length === 0\" class=\"thy-table-empty clear-hover\">\n    <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n      <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n    </ng-container>\n    <ng-template #defaultEmpty>\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    </ng-template>\n  </div>\n\n  <thy-table-skeleton\n    *ngIf=\"!loadingDone\"\n    [thyRowCount]=\"6\"\n    [thyHeadless]=\"true\"\n    [thyTheme]=\"theme\"\n    [thySize]=\"size\"\n    [thyMinWidth]=\"thyMinWidth\"\n    [thyColumns]=\"skeletonColumns\">\n  </thy-table-skeleton>\n\n  <div class=\"thy-table-footer\" *ngIf=\"pagination.total > pagination.size\" [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</div>\n\n<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
@@ -1469,11 +1469,11 @@ class ThyTableModule {
             ThyIconModule,
             DragDropModule,
             ScrollingModule,
-            ThyTableComponent,
+            ThyTable,
             ThyTableColumnComponent,
             TableIsValidModelValuePipe,
             TableRowDragDisabledPipe,
-            ThyTableSkeletonComponent], exports: [ThyTableComponent, ThyTableColumnComponent, ThyTableSkeletonComponent] }); }
+            ThyTableSkeleton], exports: [ThyTable, ThyTableColumnComponent, ThyTableSkeleton] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableModule, imports: [CommonModule,
             FormsModule,
             ThyPaginationModule,
@@ -1485,8 +1485,8 @@ class ThyTableModule {
             ThyIconModule,
             DragDropModule,
             ScrollingModule,
-            ThyTableComponent,
-            ThyTableSkeletonComponent] }); }
+            ThyTable,
+            ThyTableSkeleton] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTableModule, decorators: [{
             type: NgModule,
@@ -1503,13 +1503,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         ThyIconModule,
                         DragDropModule,
                         ScrollingModule,
-                        ThyTableComponent,
+                        ThyTable,
                         ThyTableColumnComponent,
                         TableIsValidModelValuePipe,
                         TableRowDragDisabledPipe,
-                        ThyTableSkeletonComponent
+                        ThyTableSkeleton
                     ],
-                    exports: [ThyTableComponent, ThyTableColumnComponent, ThyTableSkeletonComponent]
+                    exports: [ThyTable, ThyTableColumnComponent, ThyTableSkeleton]
                 }]
         }] });
 
@@ -1517,5 +1517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { THY_TABLE_COLUMN_PARENT_COMPONENT, TableIsValidModelValuePipe, TableRowDragDisabledPipe, ThyFixedDirection, ThyTableColumnComponent, ThyTableColumnSkeletonType, ThyTableComponent, ThyTableModule, ThyTableSkeletonComponent, ThyTableSortDirection };
+export { THY_TABLE_COLUMN_PARENT_COMPONENT, TableIsValidModelValuePipe, TableRowDragDisabledPipe, ThyFixedDirection, ThyTable, ThyTableColumnComponent, ThyTableColumnSkeletonType, ThyTableModule, ThyTableSkeleton, ThyTableSortDirection };
 //# sourceMappingURL=ngx-tethys-table.mjs.map