@den4ik92/ng2-smart-table 19.2.2 → 19.2.4

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

@@ -1618,7 +1618,7 @@ class Grid {
     }
     prepareSource(source, initialSort, initialPaging) {
         const preparedSource = source || new LocalDataSource();
-        if (initialSort) {
+        if (initialSort && !source?.getSort().field) {
             preparedSource.setSort(initialSort, false);
         }
         if (initialPaging && initialPaging?.display) {
@@ -1659,7 +1659,6 @@ class Grid {
         this.settings.set(settings);
         this.dataSet = new DataSet([], settings.columns);
         if (this.source) {
-            console.log('updateSettingsAndDataSet', emittedEvent);
             this.source.pagingConf.update((old) => ({
                 ...old,
                 display: this.getSetting('pager.display'),
@@ -1762,14 +1761,15 @@ class TbodyCustomComponent {
     }
     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: `
-    @for (action of customActions(); track $index) {
+    @for (action of customActions(); track $index) { @if(!action.hasPermissionFunction ? true :
+    action.hasPermissionFunction(row.getData())) {
     <a
       [id]="'row-' + row.index + '_action-' + action.name + '-button'"
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
       (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: [{
@@ -1778,14 +1778,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'ng2-st-tbody-custom',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @for (action of customActions(); track $index) {
+    @for (action of customActions(); track $index) { @if(!action.hasPermissionFunction ? true :
+    action.hasPermissionFunction(row.getData())) {
     <a
       [id]="'row-' + row.index + '_action-' + action.name + '-button'"
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
       (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
-    }
+    } }
   `,
                     standalone: true,
                 }]
@@ -1806,22 +1807,32 @@ class TbodyEditDeleteComponent {
         this.deleteConfirm = input.required();
         this.edit = output();
         this.delete = output();
-        this.isActionEdit = false;
-        this.isActionDelete = false;
-        this.isExternalMode = false;
-        this.editRowButtonContent = 'Edit';
-        this.deleteRowButtonContent = 'Delete';
-        effect(() => {
-            const settings = this.grid().settings();
-            const actions = settings.actions;
-            if (actions) {
-                this.isActionDelete = !!actions.delete;
-                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.cdr.detectChanges();
+        this.isActionEdit = computed(() => {
+            const actions = this.grid().settings().actions;
+            return actions ? !!actions.edit : false;
+        });
+        this.isActionDelete = computed(() => {
+            const actions = this.grid().settings().actions;
+            return actions ? !!actions.delete : false;
+        });
+        this.isExternalMode = computed(() => {
+            return this.grid().settings().mode === 'external';
+        });
+        this.canDeleteFunction = computed(() => {
+            const deleteConfig = this.grid().settings().delete;
+            return deleteConfig ? deleteConfig.hasPermissionFunction || ((data) => true) : (data) => true;
+        });
+        this.canEditFunction = computed(() => {
+            const edit = this.grid().settings().edit;
+            return edit ? edit.hasPermissionFunction || ((data) => true) : (data) => true;
+        });
+        this.editRowButtonContent = computed(() => {
+            const edit = this.grid().settings().edit;
+            return edit ? edit.editButtonContent || 'Edit' : 'Edit';
+        });
+        this.deleteRowButtonContent = computed(() => {
+            const deleteConfig = this.grid().settings().delete;
+            return deleteConfig ? deleteConfig.deleteButtonContent || 'Delete' : 'Delete';
         });
     }
     onEdit(event) {
@@ -1838,7 +1849,7 @@ class TbodyEditDeleteComponent {
     onDelete(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.isExternalMode) {
+        if (this.isExternalMode()) {
             this.delete.emit({
                 data: this.row().getData(),
                 source: this.source(),
@@ -1849,165 +1860,12 @@ class TbodyEditDeleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", delete: "delete" }, ngImport: i0, template: `
-    @if (!row().pending()) { @if (isActionEdit) {
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_action-edit-button'"
-      class="ng2-smart-action ng2-smart-action-edit-edit"
-      [innerHTML]="editRowButtonContent"
-      (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>
-    } } @else {
-    <div style="display: flex;">
-      @if (isActionEdit) {
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        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">
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite" />
-        </path>
-      </svg>
-      } @if (isActionDelete) {
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        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">
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite" />
-        </path>
-      </svg>
-      }
-    </div>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", delete: "delete" }, ngImport: i0, template: "@if (!row().pending()) { @if (isActionEdit() && canEditFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-edit-button'\"\n  class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n  [innerHTML]=\"editRowButtonContent()\"\n  (click)=\"onEdit($event)\"></a>\n} @if (isActionDelete() && canDeleteFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-delete-button'\"\n  class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n  [innerHTML]=\"deleteRowButtonContent()\"\n  (click)=\"onDelete($event)\"></a>\n} } @else {\n<div style=\"display: flex\">\n  @if (isActionEdit()) {\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      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\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n  } @if (isActionDelete()) {\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      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\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n  }\n</div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ng2-st-tbody-edit-delete',
-                    template: `
-    @if (!row().pending()) { @if (isActionEdit) {
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_action-edit-button'"
-      class="ng2-smart-action ng2-smart-action-edit-edit"
-      [innerHTML]="editRowButtonContent"
-      (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>
-    } } @else {
-    <div style="display: flex;">
-      @if (isActionEdit) {
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        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">
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite" />
-        </path>
-      </svg>
-      } @if (isActionDelete) {
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        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">
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite" />
-        </path>
-      </svg>
-      }
-    </div>
-    }
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ng2-st-tbody-edit-delete', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) { @if (isActionEdit() && canEditFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-edit-button'\"\n  class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n  [innerHTML]=\"editRowButtonContent()\"\n  (click)=\"onEdit($event)\"></a>\n} @if (isActionDelete() && canDeleteFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-delete-button'\"\n  class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n  [innerHTML]=\"deleteRowButtonContent()\"\n  (click)=\"onDelete($event)\"></a>\n} } @else {\n<div style=\"display: flex\">\n  @if (isActionEdit()) {\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      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\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n  } @if (isActionDelete()) {\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      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\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n  }\n</div>\n}\n" }]
+        }] });
 
 class Ng2SmartTableTbodyComponent {
     constructor() {