@den4ik92/ng2-smart-table 19.2.0 → 19.2.1

package/fesm2022/den4ik92-ng2-smart-table.mjs

@@ -7,7 +7,6 @@ import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
-import { SmartTableOnChangedEventName as SmartTableOnChangedEventName$1, BaseEditorComponent as BaseEditorComponent$1 } from 'ng2-smart-table';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -179,7 +178,7 @@ function getLocalStorage(key) {
 
 class TableColumnsEditorComponent {
     constructor() {
-        this.infoText = "You can drag and drop columns as you wish and also disable unnecessary ones.";
+        this.infoText = 'You can drag and drop columns as you wish and also disable unnecessary ones.';
         this.grid = input();
         this.close = input.required();
         this.currentState = [];
@@ -213,7 +212,7 @@ class TableColumnsEditorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
+            args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
         }], ctorParameters: () => [] });
 
 class SmartTableColumnEditorDirective {
@@ -235,9 +234,12 @@ class SmartTableColumnEditorDirective {
         this.overlayRef = this.overlay.create(this.getOverlayConfig());
         const componentPortal = new ComponentPortal(TableColumnsEditorComponent);
         const dropdownRef = this.overlayRef.attach(componentPortal);
-        dropdownRef.setInput("grid", this.grid());
-        dropdownRef.setInput("close", this.hide.bind(this));
-        this.overlayRef?.backdropClick().pipe(takeUntil(this.destroy$)).subscribe(() => this.hide());
+        dropdownRef.setInput('grid', this.grid());
+        dropdownRef.setInput('close', this.hide.bind(this));
+        this.overlayRef
+            ?.backdropClick()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.hide());
     }
     hide() {
         this.overlayRef?.detach();
@@ -254,46 +256,46 @@ class SmartTableColumnEditorDirective {
             .withPush(false)
             .withPositions([
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "end",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "center",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "start",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "start",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "center",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "start",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
             },
         ]);
         return new OverlayConfig({
             positionStrategy: positionStrategy,
             hasBackdrop: true,
-            backdropClass: "cdk-overlay-transparent-backdrop",
+            backdropClass: 'cdk-overlay-transparent-backdrop',
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -302,9 +304,9 @@ class SmartTableColumnEditorDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[ng2SmartTableColumnEditor]",
+                    selector: '[ng2SmartTableColumnEditor]',
                     host: {
-                        "(click)": "buttclicked()",
+                        '(click)': 'buttclicked()',
                     },
                 }]
         }] });
@@ -755,11 +757,11 @@ class ServerDataSource extends DataSource {
     }
     emitOnChanged(eventData, newElements) {
         if ([
-            SmartTableOnChangedEventName$1.filter,
-            SmartTableOnChangedEventName$1.sort,
-            SmartTableOnChangedEventName$1.page,
-            SmartTableOnChangedEventName$1.paging,
-            SmartTableOnChangedEventName$1.refresh,
+            SmartTableOnChangedEventName.filter,
+            SmartTableOnChangedEventName.sort,
+            SmartTableOnChangedEventName.page,
+            SmartTableOnChangedEventName.paging,
+            SmartTableOnChangedEventName.refresh,
         ].includes(eventData.action)) {
             this.paramPrepareFunction({
                 sort: this.sortConf,
@@ -970,7 +972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
   `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }] });
 
-class BuildInEditorComponent extends BaseEditorComponent$1 {
+class BuildInEditorComponent extends BaseEditorComponent {
     constructor() {
         super(...arguments);
         this.editorType = computed(() => {
@@ -989,7 +991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{ selector: 'ng2-table-cell-build-in-editor', imports: [SelectEditorComponent, TextareaEditorComponent, CheckboxEditorComponent, InputEditorComponent], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>" }]
         }] });
 
-class CustomEditComponent extends BaseEditorComponent$1 {
+class CustomEditComponent extends BaseEditorComponent {
     ngOnChanges(changes) {
         const editor = this.cell().getColumn().editor;
         if (this.customComponent) {
@@ -999,10 +1001,7 @@ class CustomEditComponent extends BaseEditorComponent$1 {
             }
             return;
         }
-        if (this.cell() &&
-            !this.customComponent &&
-            editor &&
-            editor.type == "custom") {
+        if (this.cell() && !this.customComponent && editor && editor.type == 'custom') {
             this.customComponent = this.dynamicTarget?.createComponent(editor.component);
             this.customComponent?.setInput('cell', this.cell());
             this.customComponent?.setInput('inputClass', this.inputClass());
@@ -1019,13 +1018,13 @@ class CustomEditComponent extends BaseEditorComponent$1 {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-table-cell-custom-editor",
+                    selector: 'ng2-table-cell-custom-editor',
                     template: ` <ng-template #dynamicTarget></ng-template> `,
                     standalone: true,
                 }]
         }], propDecorators: { dynamicTarget: [{
                 type: ViewChild,
-                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
             }] } });
 
 class EditCellComponent {
@@ -1754,7 +1753,7 @@ class TbodyCustomComponent {
         });
     }
     customActions() {
-        return this.grid.getSetting("actions.custom");
+        return this.grid.getSetting('actions.custom');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCustomComponent, isStandalone: true, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
@@ -1764,17 +1763,14 @@ class TbodyCustomComponent {
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
-      (click)="
-        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
-      "
-    ></a>
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-custom",
+                    selector: 'ng2-st-tbody-custom',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @for (action of customActions(); track $index) {
@@ -1783,10 +1779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
-      (click)="
-        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
-      "
-    ></a>
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
     }
   `,
                     standalone: true,
@@ -1811,8 +1804,8 @@ class TbodyEditDeleteComponent {
         this.isActionEdit = false;
         this.isActionDelete = false;
         this.isExternalMode = false;
-        this.editRowButtonContent = "Edit";
-        this.deleteRowButtonContent = "Delete";
+        this.editRowButtonContent = 'Edit';
+        this.deleteRowButtonContent = 'Delete';
         effect(() => {
             const settings = this.grid().settings();
             const actions = settings.actions;
@@ -1821,12 +1814,8 @@ class TbodyEditDeleteComponent {
                 this.isActionEdit = !!actions.edit;
             }
             this.isExternalMode = settings.mode === 'external';
-            this.editRowButtonContent = settings.edit
-                ? settings.edit.editButtonContent || "Edit"
-                : "Edit";
-            this.deleteRowButtonContent = settings.delete
-                ? settings.delete.deleteButtonContent || "Delete"
-                : "Delete";
+            this.editRowButtonContent = settings.edit ? settings.edit.editButtonContent || 'Edit' : 'Edit';
+            this.deleteRowButtonContent = settings.delete ? settings.delete.deleteButtonContent || 'Delete' : 'Delete';
             this.cdr.detectChanges();
         });
     }
@@ -1862,16 +1851,14 @@ class TbodyEditDeleteComponent {
       [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
-      (click)="onEdit($event)"
-    ></a>
+      (click)="onEdit($event)"></a>
     } @if (isActionDelete) {
     <a
       href="#"
       [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
-      (click)="onDelete($event)"
-    ></a>
+      (click)="onDelete($event)"></a>
     } } @else {
     <div style="display: flex;">
       @if (isActionEdit) {
@@ -1887,12 +1874,10 @@ class TbodyEditDeleteComponent {
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -1900,8 +1885,7 @@ class TbodyEditDeleteComponent {
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       } @if (isActionDelete) {
@@ -1917,12 +1901,10 @@ class TbodyEditDeleteComponent {
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -1930,8 +1912,7 @@ class TbodyEditDeleteComponent {
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       }
@@ -1942,7 +1923,7 @@ class TbodyEditDeleteComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-edit-delete",
+                    selector: 'ng2-st-tbody-edit-delete',
                     template: `
     @if (!row().pending()) { @if (isActionEdit) {
     <a
@@ -1950,16 +1931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
-      (click)="onEdit($event)"
-    ></a>
+      (click)="onEdit($event)"></a>
     } @if (isActionDelete) {
     <a
       href="#"
       [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
-      (click)="onDelete($event)"
-    ></a>
+      (click)="onDelete($event)"></a>
     } } @else {
     <div style="display: flex;">
       @if (isActionEdit) {
@@ -1975,12 +1954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -1988,8 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       } @if (isActionDelete) {
@@ -2005,12 +1981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -2018,8 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       }
@@ -2038,7 +2011,7 @@ class Ng2SmartTableTbodyComponent {
         this.deleteConfirm = input.required();
         this.createConfirm = input.required();
         this.editConfirm = input.required();
-        this.rowClassFunction = input(() => "");
+        this.rowClassFunction = input(() => '');
         this.save = output();
         this.edit = output();
         this.editCancel = output();
@@ -2056,7 +2029,7 @@ class Ng2SmartTableTbodyComponent {
             return editOptions.inputClass || '';
         });
         this.noDataMessage = computed(() => {
-            return this.grid().settings().noDataMessage || "No data found";
+            return this.grid().settings().noDataMessage || 'No data found';
         });
     }
     trackByIdOrIndex(index, item) {
@@ -2067,7 +2040,7 @@ class Ng2SmartTableTbodyComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "[ng2-st-tbody]", standalone: true, imports: [
+            args: [{ selector: '[ng2-st-tbody]', standalone: true, imports: [
                         FormsModule,
                         TbodyCustomComponent,
                         TbodyEditDeleteComponent,
@@ -2417,15 +2390,15 @@ class AddButtonComponent {
         this.addNewButtonContent = computed(() => {
             const addParams = this.grid().settings()?.add;
             if (!addParams) {
-                return "Add New";
+                return 'Add New';
             }
-            return addParams?.addButtonContent || "Add New";
+            return addParams?.addButtonContent || 'Add New';
         });
     }
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid().getSetting("mode") === "external") {
+        if (this.grid().getSetting('mode') === 'external') {
             this.create.emit({
                 source: this.source(),
             });
@@ -2441,27 +2414,25 @@ class AddButtonComponent {
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
       [innerHTML]="addNewButtonContent()"
-      (click)="onAdd($event)"
-    ></a>
+      (click)="onAdd($event)"></a>
     }
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-add-button]",
+                    selector: '[ng2-st-add-button]',
                     template: `
     @if (isActionAdd()) {
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
       [innerHTML]="addNewButtonContent()"
-      (click)="onAdd($event)"
-    ></a>
+      (click)="onAdd($event)"></a>
     }
   `,
                     host: {
-                        class: "ng2-smart-actions-title ng2-smart-actions-title-add",
+                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
                     },
                     standalone: true,
                 }]
@@ -2475,9 +2446,9 @@ class TheadFiltersRowComponent {
         this.filterInputClass = computed(() => {
             const filterOptions = this.grid().settings()?.filter;
             if (!filterOptions) {
-                return "";
+                return '';
             }
-            return filterOptions.inputClass || "";
+            return filterOptions.inputClass || '';
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2485,61 +2456,33 @@ class TheadFiltersRowComponent {
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [source]="source()"
-      [grid]="grid()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
     } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
     <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter
-        [source]="source()"
-        [column]="column"
-        [inputClass]="filterInputClass()"
-      >
+      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
       </ng2-smart-table-filter>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [grid]="grid()"
-      [source]="source()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-filters-row]",
+                    selector: '[ng2-st-thead-filters-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [source]="source()"
-      [grid]="grid()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
     } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
     <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter
-        [source]="source()"
-        [column]="column"
-        [inputClass]="filterInputClass()"
-      >
+      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
       </ng2-smart-table-filter>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [grid]="grid()"
-      [source]="source()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
     }
   `,
                     standalone: true,
@@ -2611,9 +2554,9 @@ class TheadFormRowComponent {
         this.addInputClass = computed(() => {
             const addOptions = this.grid().settings()?.add;
             if (!addOptions) {
-                return "";
+                return '';
             }
-            return addOptions.inputClass || "";
+            return addOptions.inputClass || '';
         });
     }
     onCreate(event) {
@@ -2629,26 +2572,19 @@ class TheadFormRowComponent {
     <td></td>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()"
-      >
+        [isInEditing]="grid().getNewRow().isInEditing()">
       </ng2-smart-table-cell>
     </td>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
@@ -2656,32 +2592,25 @@ class TheadFormRowComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-form-row]",
+                    selector: '[ng2-st-thead-form-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
     <td></td>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()"
-      >
+        [isInEditing]="grid().getNewRow().isInEditing()">
       </ng2-smart-table-cell>
     </td>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     }
   `,
@@ -2799,23 +2728,17 @@ class ColumnTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="ng2-smart-title">
-      <ng2-smart-table-title
-        [source]="source()"
-        [column]="column()"
-      ></ng2-smart-table-title>
+      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["source", "column"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-column-title",
+                    selector: 'ng2-st-column-title',
                     template: `
     <div class="ng2-smart-title">
-      <ng2-smart-table-title
-        [source]="source()"
-        [column]="column()"
-      ></ng2-smart-table-title>
+      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
     </div>
   `,
                     standalone: true,
@@ -2832,24 +2755,13 @@ class TheadTitlesRowComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows" }, ngImport: i0, template: `
     @if (grid().isMultiSelectVisible()) {
-    <th
-      ng2-st-checkbox-select-all
-      [grid]="grid()"
-      (click)="selectAllRows.emit()"
-    ></th>
+    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
 
     <th ng2-st-actions-title [grid]="grid()"></th>
     } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th
-      class="ng2-smart-th {{ column.id }}"
-      [class]="column.class"
-      [style.width]="column.width"
-    >
-      <ng2-st-column-title
-        [source]="source()"
-        [column]="column"
-      ></ng2-st-column-title>
+    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
+      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th ng2-st-actions-title [grid]="grid()"></th>
@@ -2859,38 +2771,23 @@ class TheadTitlesRowComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-titles-row]",
+                    selector: '[ng2-st-thead-titles-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
-    <th
-      ng2-st-checkbox-select-all
-      [grid]="grid()"
-      (click)="selectAllRows.emit()"
-    ></th>
+    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
 
     <th ng2-st-actions-title [grid]="grid()"></th>
     } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th
-      class="ng2-smart-th {{ column.id }}"
-      [class]="column.class"
-      [style.width]="column.width"
-    >
-      <ng2-st-column-title
-        [source]="source()"
-        [column]="column"
-      ></ng2-st-column-title>
+    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
+      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th ng2-st-actions-title [grid]="grid()"></th>
     }
   `,
                     standalone: true,
-                    imports: [
-                        CheckboxSelectAllComponent,
-                        ActionsTitleComponent,
-                        ColumnTitleComponent,
-                    ],
+                    imports: [CheckboxSelectAllComponent, ActionsTitleComponent, ColumnTitleComponent],
                 }]
         }] });
 
@@ -2912,11 +2809,7 @@ class Ng2SmartTableTheadComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "[ng2-st-thead]", standalone: true, imports: [
-                        TheadTitlesRowComponent,
-                        TheadFiltersRowComponent,
-                        TheadFormRowComponent,
-                    ], template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
+            args: [{ selector: '[ng2-st-thead]', standalone: true, imports: [TheadTitlesRowComponent, TheadFiltersRowComponent, TheadFormRowComponent], template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
         }], propDecorators: { createConfirm: [{
                 type: Input
             }] } });