ngx-tethys 18.2.7 → 19.0.0-next.1

package/fesm2022/ngx-tethys-table.mjs

@@ -7,9 +7,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { NgClass, NgStyle, NgTemplateOutlet, DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
+import { NgClass, NgStyle, DOCUMENT, isPlatformServer, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 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 { InjectionToken, inject, ElementRef, EventEmitter, TemplateRef, ContentChild, Output, Input, ViewEncapsulation, Component, Pipe, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, IterableDiffers, PLATFORM_ID, NgZone, Renderer2, DestroyRef, numberAttribute, ContentChildren, HostBinding, ViewChildren, 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';
@@ -153,10 +153,10 @@ class ThyTableColumnComponent {
     _generateKey() {
         return '[$$column]' + Math.random().toString(16).slice(2, 10);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", 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.13", ngImport: i0, type: ThyTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-table-column',
@@ -231,10 +231,10 @@ class TableRowDragDisabledPipe {
     transform(item, dragDisabledPredicate) {
         return dragDisabledPredicate(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableRowDragDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TableRowDragDisabledPipe, isStandalone: true, name: "tableRowDragDisabled" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableRowDragDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: TableRowDragDisabledPipe, isStandalone: true, name: "tableRowDragDisabled" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableRowDragDisabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableRowDragDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tableRowDragDisabled',
@@ -249,10 +249,10 @@ class TableIsValidModelValuePipe {
     transform(value) {
         return value !== '' && value !== undefined && value !== null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableIsValidModelValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TableIsValidModelValuePipe, isStandalone: true, name: "isValidModelValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableIsValidModelValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: TableIsValidModelValuePipe, isStandalone: true, name: "isValidModelValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableIsValidModelValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableIsValidModelValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isValidModelValue',
@@ -364,8 +364,8 @@ class ThyTableSkeleton {
         };
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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' ? 'var(--gray-200, #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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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' ? 'var(--gray-200, #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([
     InputCssPixel(),
@@ -379,11 +379,11 @@ __decorate([
     InputCssPixel(),
     __metadata("design:type", Object)
 ], ThyTableSkeleton.prototype, "thyMinWidth", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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: [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' ? 'var(--gray-200, #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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgStyle, 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' ? 'var(--gray-200, #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" }]
         }], propDecorators: { titleTemplate: [{
                 type: ViewChild,
                 args: ['titleTemplate']
@@ -1196,8 +1196,8 @@ class ThyTable {
     ngOnDestroy() {
         this._destroyInvalidAttribute();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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", "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
@@ -1213,7 +1213,7 @@ __decorate([
     InputCssPixel(),
     __metadata("design:type", String)
 ], ThyTable.prototype, "thyHeight", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTable, decorators: [{
             type: Component,
             args: [{ selector: 'thy-table', providers: [
                         {
@@ -1226,7 +1226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class.thy-table-bordered]': `theme === 'bordered'`,
                         '[class.thy-table-boxed]': `theme === 'boxed'`,
                         '[class.thy-table-fixed-header]': 'thyHeaderFixed'
-                    }, standalone: true, imports: [
+                    }, imports: [
                         CdkScrollable,
                         NgClass,
                         NgTemplateOutlet,
@@ -1365,8 +1365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ThyTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ThyTableModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: ThyTableModule, imports: [CommonModule,
             FormsModule,
             ThyPaginationModule,
             ThySwitchModule,
@@ -1382,7 +1382,7 @@ class ThyTableModule {
             TableIsValidModelValuePipe,
             TableRowDragDisabledPipe,
             ThyTableSkeleton], exports: [ThyTable, ThyTableColumnComponent, ThyTableSkeleton] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableModule, imports: [CommonModule,
             FormsModule,
             ThyPaginationModule,
             ThySwitchModule,
@@ -1396,7 +1396,7 @@ class ThyTableModule {
             ThyTable,
             ThyTableSkeleton] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThyTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ThyTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [