@smartbit4all/ng-client 3.1.26 → 3.1.29

package/fesm2015/smartbit4all-ng-client.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, Component, Input, ViewChild, forwardRef, EventEmitter, Output, Directive, HostListener, ViewContainerRef, ViewEncapsulation, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { __awaiter, __decorate, __param } from 'tslib';
-import { Subject, takeUntil, startWith, map, distinctUntilChanged, catchError, throwError, from, lastValueFrom } from 'rxjs';
+import { Subject, takeUntil, startWith, map, distinctUntilChanged, throwError, from, catchError as catchError$1, lastValueFrom } from 'rxjs';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpContext, HttpParams, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpContext, HttpParams, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import * as i3$1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, DatePipe, CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/button';
@@ -17,7 +17,7 @@ import * as i7 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatCommonModule } from '@angular/material/core';
 import * as i2$1 from '@angular/platform-browser';
 import { BrowserModule } from '@angular/platform-browser';
-import * as i4 from '@angular/material/expansion';
+import * as i2$6 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i20 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -61,11 +61,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2$4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import { catchError as catchError$1, switchMap } from 'rxjs/operators';
+import * as i7$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { catchError, switchMap } from 'rxjs/operators';
 import * as i2$5 from '@angular/material/tree';
 import { MatTreeNestedDataSource, MatTreeModule } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import * as i7$1 from '@angular/material/paginator';
+import * as i7$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -2132,7 +2134,8 @@ const UiActionButtonType = {
     Raised: 'RAISED',
     Icon: 'ICON',
     MiniFab: 'MINI_FAB',
-    Fab: 'FAB'
+    Fab: 'FAB',
+    Separator: 'SEPARATOR'
 };
 
 /**
@@ -5227,6 +5230,7 @@ var SmartTableButtonType;
     SmartTableButtonType["ICON"] = "ICON";
     SmartTableButtonType["NORMAL"] = "NORMAL";
     SmartTableButtonType["RAISED"] = "RAISED";
+    SmartTableButtonType["SEPARATOR"] = "SEPARATOR";
 })(SmartTableButtonType || (SmartTableButtonType = {}));
 var SmartTableOptionButtonDirection;
 (function (SmartTableOptionButtonDirection) {
@@ -5248,19 +5252,17 @@ class SmartTable {
         this.customSmartTableHeaders = config.customSmartTableHeaders;
         if (this.expandable) {
             (_a = this.customSmartTableHeaders) === null || _a === void 0 ? void 0 : _a.push({
-                label: "",
-                propertyName: "expand",
+                label: '',
+                propertyName: 'expand',
             });
         }
         this.tableType = config.tableType;
         if (this.tableType === SmartTableType.CHECK_BOX) {
             this.customSmartTableHeaders = [
                 {
-                    label: "",
-                    propertyName: "select",
-                    showCheckboxInHeader: typeof config.showCheckboxInHeader === "undefined"
-                        ? true
-                        : config.showCheckboxInHeader,
+                    label: '',
+                    propertyName: 'select',
+                    showCheckboxInHeader: typeof config.showCheckboxInHeader === 'undefined' ? true : config.showCheckboxInHeader,
                 },
                 ...this.customSmartTableHeaders,
             ];
@@ -5269,8 +5271,7 @@ class SmartTable {
             this.tableType === SmartTableType.ROW_SELECT) {
             this.isMultiple = config.isMultiple;
             this.selectionProperty = config.selectionProperty;
-            this.selection =
-                (_b = config.selection) !== null && _b !== void 0 ? _b : new SelectionModel(this.isMultiple, []);
+            this.selection = (_b = config.selection) !== null && _b !== void 0 ? _b : new SelectionModel(this.isMultiple, []);
         }
         this.tableHeaders = this.getPropertyNamesDeeply(config.tableRows[0]);
         this.setTableHeaders();
@@ -5280,6 +5281,7 @@ class SmartTable {
         this.tableOptionButtonDirection = config.tableOptionButtonDirection;
         this.onRowClick = config.onRowClick;
         this.onRowDoubleClick = config.onRowDoubleClick;
+        this.defaultActions = config.defaultActions;
         this.highlightOnRowClick = config.highlightOnRowClick;
         this.highlightClass = config.highlightClass;
         this.hover = config.hover;
@@ -5302,9 +5304,9 @@ class SmartTable {
         let properties = Object.keys(element);
         properties.forEach((property) => {
             if (element === undefined ||
-                typeof element[property] === "string" ||
-                typeof element[property] === "boolean" ||
-                typeof element[property] === "number" ||
+                typeof element[property] === 'string' ||
+                typeof element[property] === 'boolean' ||
+                typeof element[property] === 'number' ||
                 element[property] === undefined ||
                 element[property] === null ||
                 !element[property] ||
@@ -5317,7 +5319,7 @@ class SmartTable {
         return properties;
     }
     getValueDeeply(model, key) {
-        let splittedKey = key.split(".");
+        let splittedKey = key.split('.');
         let value;
         splittedKey.forEach((k) => {
             if (!value) {
@@ -5328,7 +5330,7 @@ class SmartTable {
                     return undefined;
                 }
                 else if (value[k] === undefined || value[k] === null || !value) {
-                    value = "";
+                    value = '';
                     return value;
                 }
                 else {
@@ -5340,7 +5342,7 @@ class SmartTable {
     }
     pushOptions() {
         if (this.options && this.options.length) {
-            this.tableHeaders.push("options");
+            this.tableHeaders.push('options');
         }
     }
     setTableHeaders() {
@@ -5349,7 +5351,7 @@ class SmartTable {
             this.tableHeaders = [];
             this.customTableHeaders = [];
             this.customSmartTableHeaders.forEach((tableHeader) => {
-                let propertyNames = tableHeader.propertyName.split(".");
+                let propertyNames = tableHeader.propertyName.split('.');
                 if (propertyNames.filter((property) => originalHeaders.includes(property)) &&
                     !tableHeader.isHidden) {
                     this.tableHeaders.push(tableHeader.propertyName);
@@ -5357,8 +5359,8 @@ class SmartTable {
                 }
                 else if (tableHeader.buttons ||
                     tableHeader.icon ||
-                    tableHeader.propertyName === "expand" ||
-                    tableHeader.propertyName === "select") {
+                    tableHeader.propertyName === 'expand' ||
+                    tableHeader.propertyName === 'select') {
                     this.tableHeaders.push(tableHeader.propertyName);
                     this.customTableHeaders.push(tableHeader.label);
                 }
@@ -5392,6 +5394,7 @@ class Table {
         this.sortEvent = new Subject();
         this.onSelectionChanged = new Subject();
         this.asyncTranslationResult = (translator, param) => translator(param);
+        this.ACTION_SEPERATOR = SmartTableButtonType.SEPARATOR;
     }
     ngOnInit() {
         if (this.smartTable.sortable)
@@ -5429,13 +5432,18 @@ class Table {
         this.myTableChild.renderRows();
     }
     handleOnRowDoubleClick(element) {
-        if (this.smartTable.tableType === SmartTableType.INHERITED) {
-            this.onRowDoubleClick(element);
+        if (this.smartTable.defaultActions) {
+            this.openDefaultActionsMenu();
         }
-        else if (this.smartTable.tableType === SmartTableType.CHECK_BOX) {
-            if (this.smartTable.onRowDoubleClick) {
+        else {
+            if (this.smartTable.tableType === SmartTableType.INHERITED) {
                 this.onRowDoubleClick(element);
             }
+            else if (this.smartTable.tableType === SmartTableType.CHECK_BOX) {
+                if (this.smartTable.onRowDoubleClick) {
+                    this.onRowDoubleClick(element);
+                }
+            }
         }
     }
     type() {
@@ -5454,7 +5462,7 @@ class Table {
         }
         button.callback(button.args, element, btn);
         if (close) {
-            let openMenus = this.trigger.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
+            let openMenus = this.triggers.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
             openMenus.forEach((matMenuTrigger) => {
                 matMenuTrigger.closeMenu();
             });
@@ -5793,17 +5801,23 @@ class Table {
         var _a;
         return (_a = element.icons[this.originalProperty(header)].color) !== null && _a !== void 0 ? _a : 'primary';
     }
+    openDefaultActionsMenu() {
+        this.trigger.openMenu();
+    }
 }
 Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Table, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: '', isInline: true });
+Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["defaultActionsMenuTrigger"], descendants: true, read: MatMenuTrigger }, { propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; }, propDecorators: { trigger: [{
+        }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; }, propDecorators: { triggers: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
+            }], trigger: [{
+                type: ViewChild,
+                args: ['defaultActionsMenuTrigger', { read: MatMenuTrigger }]
             }], vcRef: [{
                 type: ViewChildren,
                 args: ['expandedArea', { read: ViewContainerRef }]
@@ -5860,7 +5874,7 @@ class MaterialTableComponent extends Table {
     }
 }
 MaterialTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <th mat-header-cell *matHeaderCellDef>\r\n      <div\r\n        *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n      ></div>\r\n      <div *ngIf=\"header === 'select'\">\r\n        <mat-checkbox\r\n          *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n          (change)=\"$event ? toggleAllRows() : null\"\r\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n          [aria-label]=\"checkboxLabel()\"\r\n        >\r\n        </mat-checkbox>\r\n        <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          header !== 'icon' &&\r\n          header !== 'img' &&\r\n          header !== 'options' &&\r\n          header !== 'button' &&\r\n          header !== 'select' &&\r\n          header !== 'expand' &&\r\n          header !== 'actions'\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n        <ng-template #sortable>\r\n          <button\r\n            (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n            *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n            mat-button\r\n            class=\"sortableHeaderButton\"\r\n          >\r\n            {{ smartTable.customTableHeaders[i] }}\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"getSortIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortIcon(header)!\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"hasSortNumIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortNumIcon(header)\"\r\n            ></smart-icon>\r\n          </button>\r\n        </ng-template>\r\n        <ng-template #notSortable>\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </ng-template>\r\n      </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(element, header)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(element, header)\"\r\n          [color]=\"getImageResourceColor(element, header)\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of button.menuItemButtons\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <button\r\n                    *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\"\r\n                    (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    {{ button.translator!(btn) }}\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n    class=\"example-element-row\"\r\n    [class.example-expanded-row]=\"expandedElement === element\"\r\n    [ngClass]=\"[\r\n      isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n      smartTable.hover ? 'smartTableRowHover' : '',\r\n      isSelected(element) ? 'selected' : ''\r\n    ]\"\r\n    (click)=\"handleOnRowClick(element)\"\r\n    (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n  ></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}\n"], components: [{ type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "smartDateTime": SmartDateTimePipe, "smartDate": SmartDatePipe, "smartTime": SmartTimePipe }, animations: [
+MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <th mat-header-cell *matHeaderCellDef>\r\n      <div\r\n        *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n      ></div>\r\n      <div *ngIf=\"header === 'select'\">\r\n        <mat-checkbox\r\n          *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n          (change)=\"$event ? toggleAllRows() : null\"\r\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n          [aria-label]=\"checkboxLabel()\"\r\n        >\r\n        </mat-checkbox>\r\n        <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          header !== 'icon' &&\r\n          header !== 'img' &&\r\n          header !== 'options' &&\r\n          header !== 'button' &&\r\n          header !== 'select' &&\r\n          header !== 'expand' &&\r\n          header !== 'actions'\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n        <ng-template #sortable>\r\n          <button\r\n            (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n            *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n            mat-button\r\n            class=\"sortableHeaderButton\"\r\n          >\r\n            {{ smartTable.customTableHeaders[i] }}\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"getSortIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortIcon(header)!\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"hasSortNumIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortNumIcon(header)\"\r\n            ></smart-icon>\r\n          </button>\r\n        </ng-template>\r\n        <ng-template #notSortable>\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </ng-template>\r\n      </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(element, header)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(element, header)\"\r\n          [color]=\"getImageResourceColor(element, header)\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of button.menuItemButtons\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n                    <button\r\n                      *ngIf=\"btn.descriptor.type !== ACTION_SEPERATOR\"\r\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                      mat-menu-item\r\n                    >\r\n                      {{ button.translator!(btn) }}\r\n                    </button>\r\n                    <mat-divider\r\n                      [color]=\"btn.descriptor.color\"\r\n                      *ngIf=\"btn.descriptor.type === ACTION_SEPERATOR\"\r\n                    ></mat-divider>\r\n                  </div>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n      <div>\r\n        <div #defaultActionsMenuTrigger [matMenuTriggerFor]=\"defaultActionsMenu\"></div>\r\n        <mat-menu #defaultActionsMenu=\"matMenu\">\r\n          <div *ngFor=\"let btn of smartTable.defaultActions\">\r\n            <button\r\n              *ngIf=\"btn.type! !== ACTION_SEPERATOR\"\r\n              (click)=\"customButtonClicked($event, btn, element, btn, true)\"\r\n              mat-menu-item\r\n            >\r\n              {{ btn.label }}\r\n            </button>\r\n            <mat-divider *ngIf=\"btn.type === ACTION_SEPERATOR\"></mat-divider>\r\n          </div>\r\n        </mat-menu>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n    class=\"example-element-row\"\r\n    [class.example-expanded-row]=\"expandedElement === element\"\r\n    [ngClass]=\"[\r\n      isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n      smartTable.hover ? 'smartTableRowHover' : '',\r\n      isSelected(element) ? 'selected' : ''\r\n    ]\"\r\n    (click)=\"handleOnRowClick(element)\"\r\n    (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n  ></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}\n"], components: [{ type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "smartDateTime": SmartDateTimePipe, "smartDate": SmartDatePipe, "smartTime": SmartTimePipe }, animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: '*' })),
@@ -5875,7 +5889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <th mat-header-cell *matHeaderCellDef>\r\n      <div\r\n        *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n      ></div>\r\n      <div *ngIf=\"header === 'select'\">\r\n        <mat-checkbox\r\n          *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n          (change)=\"$event ? toggleAllRows() : null\"\r\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n          [aria-label]=\"checkboxLabel()\"\r\n        >\r\n        </mat-checkbox>\r\n        <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          header !== 'icon' &&\r\n          header !== 'img' &&\r\n          header !== 'options' &&\r\n          header !== 'button' &&\r\n          header !== 'select' &&\r\n          header !== 'expand' &&\r\n          header !== 'actions'\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n        <ng-template #sortable>\r\n          <button\r\n            (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n            *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n            mat-button\r\n            class=\"sortableHeaderButton\"\r\n          >\r\n            {{ smartTable.customTableHeaders[i] }}\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"getSortIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortIcon(header)!\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"hasSortNumIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortNumIcon(header)\"\r\n            ></smart-icon>\r\n          </button>\r\n        </ng-template>\r\n        <ng-template #notSortable>\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </ng-template>\r\n      </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(element, header)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(element, header)\"\r\n          [color]=\"getImageResourceColor(element, header)\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of button.menuItemButtons\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <button\r\n                    *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\"\r\n                    (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    {{ button.translator!(btn) }}\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n    class=\"example-element-row\"\r\n    [class.example-expanded-row]=\"expandedElement === element\"\r\n    [ngClass]=\"[\r\n      isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n      smartTable.hover ? 'smartTableRowHover' : '',\r\n      isSelected(element) ? 'selected' : ''\r\n    ]\"\r\n    (click)=\"handleOnRowClick(element)\"\r\n    (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n  ></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}\n"] }]
+                    ], template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <th mat-header-cell *matHeaderCellDef>\r\n      <div\r\n        *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n      ></div>\r\n      <div *ngIf=\"header === 'select'\">\r\n        <mat-checkbox\r\n          *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n          (change)=\"$event ? toggleAllRows() : null\"\r\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n          [aria-label]=\"checkboxLabel()\"\r\n        >\r\n        </mat-checkbox>\r\n        <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          header !== 'icon' &&\r\n          header !== 'img' &&\r\n          header !== 'options' &&\r\n          header !== 'button' &&\r\n          header !== 'select' &&\r\n          header !== 'expand' &&\r\n          header !== 'actions'\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n        <ng-template #sortable>\r\n          <button\r\n            (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n            *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n            mat-button\r\n            class=\"sortableHeaderButton\"\r\n          >\r\n            {{ smartTable.customTableHeaders[i] }}\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"getSortIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortIcon(header)!\"\r\n            ></smart-icon>\r\n            <smart-icon\r\n              class=\"sortableHeaderButtonIcon\"\r\n              *ngIf=\"hasSortNumIcon(header)\"\r\n              title=\"sort\"\r\n              [icon]=\"getSortNumIcon(header)\"\r\n            ></smart-icon>\r\n          </button>\r\n        </ng-template>\r\n        <ng-template #notSortable>\r\n          {{ smartTable.customTableHeaders[i] }}\r\n        </ng-template>\r\n      </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(element, header)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(element, header)\"\r\n          [color]=\"getImageResourceColor(element, header)\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                {{ button.label ?? (button.translator ? button.translator(element) : '') }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of button.menuItemButtons\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n                    <button\r\n                      *ngIf=\"btn.descriptor.type !== ACTION_SEPERATOR\"\r\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                      mat-menu-item\r\n                    >\r\n                      {{ button.translator!(btn) }}\r\n                    </button>\r\n                    <mat-divider\r\n                      [color]=\"btn.descriptor.color\"\r\n                      *ngIf=\"btn.descriptor.type === ACTION_SEPERATOR\"\r\n                    ></mat-divider>\r\n                  </div>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n      <div>\r\n        <div #defaultActionsMenuTrigger [matMenuTriggerFor]=\"defaultActionsMenu\"></div>\r\n        <mat-menu #defaultActionsMenu=\"matMenu\">\r\n          <div *ngFor=\"let btn of smartTable.defaultActions\">\r\n            <button\r\n              *ngIf=\"btn.type! !== ACTION_SEPERATOR\"\r\n              (click)=\"customButtonClicked($event, btn, element, btn, true)\"\r\n              mat-menu-item\r\n            >\r\n              {{ btn.label }}\r\n            </button>\r\n            <mat-divider *ngIf=\"btn.type === ACTION_SEPERATOR\"></mat-divider>\r\n          </div>\r\n        </mat-menu>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n    class=\"example-element-row\"\r\n    [class.example-expanded-row]=\"expandedElement === element\"\r\n    [ngClass]=\"[\r\n      isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n      smartTable.hover ? 'smartTableRowHover' : '',\r\n      isSelected(element) ? 'selected' : ''\r\n    ]\"\r\n    (click)=\"handleOnRowClick(element)\"\r\n    (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n  ></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; } });
 
 class MobileTableComponent extends Table {
@@ -6593,7 +6607,8 @@ SmarttableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MatMenuModule,
         MatProgressSpinnerModule,
         ComponentFactoryServiceModule,
-        SmartIconModule], exports: [SmarttableComponent] });
+        SmartIconModule,
+        MatDividerModule], exports: [SmarttableComponent] });
 SmarttableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttableModule, providers: [ComponentFactoryService], imports: [[
             BrowserModule,
             MatCommonModule,
@@ -6608,6 +6623,7 @@ SmarttableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             MatProgressSpinnerModule,
             ComponentFactoryServiceModule,
             SmartIconModule,
+            MatDividerModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttableModule, decorators: [{
             type: NgModule,
@@ -6635,6 +6651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         MatProgressSpinnerModule,
                         ComponentFactoryServiceModule,
                         SmartIconModule,
+                        MatDividerModule,
                     ],
                     exports: [SmarttableComponent],
                     providers: [ComponentFactoryService],
@@ -6704,364 +6721,6 @@ var SmartActionType;
  * Public API Surface of smartdialog
  */
 
-class SmartDevToolService {
-    constructor(cookieService) {
-        this.cookieService = cookieService;
-        this.smartDevToolName = 'smartDevTool';
-        this.isSmartDevToolActiveName = 'smartDevToolActive';
-        this.isActive = false;
-        this.smartDevToolHoursName = 'smartDevToolHours';
-        this.smartDevToolMaxName = 'smartDevToolMaxCalls';
-        this.hoursToSave = 1;
-        this.maxNumOfSavedCalls = 50;
-        this._destroy$ = new Subject();
-        this.descriptorChanged = new SmartSubject(this._destroy$);
-        this.newErrorsCount = 0;
-        this.newErrorsCountChanged = new SmartSubject(this._destroy$);
-        this.setUpLocalStorage();
-        let apiCallsFromLocalStorage = localStorage.getItem(this.smartDevToolName);
-        if (apiCallsFromLocalStorage) {
-            this.descriptor = JSON.parse(apiCallsFromLocalStorage);
-        }
-        else {
-            this.descriptor = { apiCalls: [] };
-            this.save();
-        }
-        window.addEventListener('storage', (event) => {
-            if (event.storageArea === localStorage) {
-                this.isActive = localStorage.getItem(this.isSmartDevToolActiveName) === 'true';
-                let hoursToSaveString = localStorage.getItem(this.smartDevToolHoursName);
-                if (hoursToSaveString) {
-                    this.hoursToSave = Number.parseInt(hoursToSaveString);
-                }
-                let maxNumOfSavedCalls = localStorage.getItem(this.smartDevToolMaxName);
-                if (maxNumOfSavedCalls) {
-                    this.maxNumOfSavedCalls = Number.parseInt(maxNumOfSavedCalls);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    setUpLocalStorage() {
-        let keysOfLocalStorage = Object.keys(localStorage);
-        if (!keysOfLocalStorage.includes(this.isSmartDevToolActiveName)) {
-            localStorage.setItem(this.isSmartDevToolActiveName, 'true');
-        }
-    }
-    writeResponse(request, response, requestDate, responseDate) {
-        var _a;
-        this.sanitizeByLength();
-        this.sanitizeByTime();
-        let requestHeader = this.createObject(request.headers.keys(), request.headers, false);
-        let responseHeader = this.createObject(response.headers.keys(), response.headers, false);
-        let _localStorage = this.createObject(Object.keys(localStorage).filter((key) => key !== this.smartDevToolName), localStorage, true);
-        let _sessionStorage = this.createObject(Object.keys(sessionStorage), sessionStorage, true);
-        let _cookies = this.cookieService.getAll();
-        this.descriptor.apiCalls = [
-            {
-                url: response.url,
-                requestBody: request.body,
-                requestHeader,
-                requestDate,
-                requestMethod: request.method,
-                responseBody: (_a = response.body) !== null && _a !== void 0 ? _a : null,
-                responseHeader,
-                responseStatus: response.status,
-                responseStatusText: response.statusText,
-                responseDate,
-                localStorage: _localStorage,
-                sessionStorage: _sessionStorage,
-                cookies: _cookies,
-            },
-            ...this.descriptor.apiCalls,
-        ];
-        if (response.status !== 200) {
-            this.newErrorsCount++;
-            this.newErrorsCountChanged.next();
-        }
-        this.save();
-    }
-    clearErrors() {
-        this.newErrorsCount = 0;
-        this.newErrorsCountChanged.next();
-    }
-    createObject(keys, mapWithValues, useGetItem) {
-        let newObject = {};
-        keys.forEach((key) => {
-            if (useGetItem) {
-                newObject[key] = mapWithValues.getItem(key);
-            }
-            else {
-                newObject[key] = mapWithValues.get(key);
-            }
-        });
-        return newObject;
-    }
-    sanitizeByTime() {
-        let now = new Date();
-        this.descriptor.apiCalls = this.descriptor.apiCalls.filter((apiCall) => {
-            let hoursBetween;
-            if (typeof apiCall.requestDate === 'string') {
-                hoursBetween = Math.floor(Math.abs(now.getMilliseconds() - new Date(apiCall.requestDate).getMilliseconds()) / 36e5);
-            }
-            else {
-                hoursBetween = Math.floor(Math.abs(now.getMilliseconds() - apiCall.requestDate.getMilliseconds()) / 36e5);
-            }
-            return hoursBetween < this.hoursToSave;
-        });
-    }
-    sanitizeByLength() {
-        var _a;
-        if (((_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.apiCalls) && this.descriptor.apiCalls.length > this.maxNumOfSavedCalls) {
-            let length = this.descriptor.apiCalls.length;
-            this.descriptor.apiCalls.splice(this.maxNumOfSavedCalls - 1, length - this.maxNumOfSavedCalls);
-        }
-    }
-    save() {
-        try {
-            localStorage.setItem(this.smartDevToolName, JSON.stringify(this.descriptor));
-            this.descriptorChanged.next();
-        }
-        catch (error) {
-            // localStorage.setItem() throws a "QuotaExceededError" DOMException exception if the new value
-            // couldn't be set. (Setting could fail if, e.g., the user has disabled storage for the site,
-            // or if the quota has been exceeded.)
-            this.sanitizeByLength();
-            this.save();
-        }
-    }
-    clear() {
-        this.descriptor = {
-            apiCalls: [],
-        };
-        this.save();
-    }
-    getPureString() {
-        return localStorage.getItem(this.smartDevToolName);
-    }
-}
-SmartDevToolService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolService, deps: [{ token: SmartCookieService }], target: i0.ɵɵFactoryTarget.Injectable });
-SmartDevToolService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: SmartCookieService }]; } });
-class SmartDevToolDatePipe extends DatePipe {
-    transform(value, format = 'yyyy.MM.dd. H:mm:ss') {
-        return super.transform(value, format);
-    }
-}
-SmartDevToolDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
-SmartDevToolDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDatePipe, name: "smartDevToolDatePipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'smartDevToolDatePipe',
-                }]
-        }] });
-
-class SmartDevToolDialogService extends SmartdialogService {
-    constructor(dialog, router, service) {
-        super(dialog, router);
-        this.service = service;
-        this.update = this.service.descriptorChanged;
-    }
-    handleAfterClosed(result) { }
-    openDialog() {
-        const dialogData = {
-            content: {
-                title: '',
-            },
-            size: {},
-            customComponent: SmartDevToolDialogComponent,
-        };
-        this.createDialog(dialogData, SmartDevToolDialogComponent);
-    }
-    getData() {
-        return this.service.descriptor;
-    }
-    getPureString() {
-        return this.service.getPureString();
-    }
-    clear() {
-        this.service.clear();
-    }
-}
-SmartDevToolDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDialogService, deps: [{ token: i1$2.MatDialog }, { token: i2.Router }, { token: SmartDevToolService }], target: i0.ɵɵFactoryTarget.Injectable });
-SmartDevToolDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i2.Router }, { type: SmartDevToolService }]; } });
-
-class SmartDevToolDialogComponent {
-    constructor(service) {
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.descriptor = this.service.getData();
-        this.service.update.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.descriptor = this.service.getData();
-        });
-        this.service.service.clearErrors();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-    }
-    clear() {
-        this.service.clear();
-    }
-    getBody(inp) {
-        return this.syntaxHighlight(inp);
-    }
-    syntaxHighlight(json) {
-        if (typeof json != 'string') {
-            json = JSON.stringify(json, undefined, 2);
-        }
-        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-            var cls = 'number';
-            if (/^"/.test(match)) {
-                if (/:$/.test(match)) {
-                    cls = 'key';
-                }
-                else {
-                    cls = 'string';
-                }
-            }
-            else if (/true|false/.test(match)) {
-                cls = 'boolean';
-            }
-            else if (/null/.test(match)) {
-                cls = 'null';
-            }
-            return '<span class="' + cls + '">' + match + '</span>';
-        });
-    }
-    copy() {
-        copyToClipboard({
-            value: this.service.getPureString(),
-        });
-    }
-    close() {
-        this.service.closeDialog();
-    }
-}
-SmartDevToolDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDialogComponent, deps: [{ token: SmartDevToolDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SmartDevToolDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartDevToolDialogComponent, selector: "app-smart-dev-tool-dialog", ngImport: i0, template: "<div class=\"smartDevToolDialogContainer\">\r\n    <div class=\"header\">\r\n        <h2>Developer tool</h2>\r\n        <button mat-icon-button title=\"close\" (click)=\"close()\">\r\n            <smart-icon icon=\"close\"></smart-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"requestsContainer\">\r\n        <mat-accordion multi>\r\n            <mat-expansion-panel\r\n                class=\"requestCard\"\r\n                [ngClass]=\"apiCall.responseStatus === 200 ? '' : 'hasError'\"\r\n                *ngFor=\"let apiCall of descriptor?.apiCalls; let i = index\"\r\n            >\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        <div class=\"titlePanel\">\r\n                            <span class=\"date\">\r\n                                {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                            </span>\r\n                            <span class=\"urlText\">\r\n                                {{ apiCall.url }}\r\n                            </span>\r\n                            <div [ngClass]=\"apiCall.requestMethod\">\r\n                                {{ apiCall.requestMethod }}\r\n                            </div>\r\n                            <div [ngClass]=\"'statusCode-' + apiCall.responseStatus.toString()[0]\">\r\n                                {{ apiCall.responseStatus }}\r\n                            </div>\r\n                        </div>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n\r\n                <div>\r\n                    <div class=\"table\">\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol heading\">Request</div>\r\n                            <div class=\"mainCol heading\">Response</div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.requestDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatus }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status text</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatusText }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestBody\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseBody\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Session Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Local Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Cookies</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.sessionStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.sessionStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.sessionStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.localStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.localStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.localStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.cookies\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.cookies)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.cookies\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </mat-accordion>\r\n    </div>\r\n    <div class=\"buttonsContainer\">\r\n        <button color=\"primary\" mat-raised-button (click)=\"copy()\">Copy</button>\r\n        <button color=\"warn\" mat-raised-button (click)=\"clear()\">Clear</button>\r\n    </div>\r\n</div>\r\n", styles: [".smartDevToolDialogContainer{display:flex;flex-direction:column;gap:1rem;width:78vw;height:90vh}.header{display:flex;flex-direction:row;justify-content:space-between}.requestsContainer{display:flex;flex-direction:column;gap:1rem;flex:1;overflow:auto}.requestCard{background-color:var(--primary-lighter-color);padding:.5rem;border-radius:.5rem;display:flex;flex-direction:column}.table{display:flex;flex-direction:column;gap:.25rem}.row{display:flex;flex-direction:row;gap:1rem}.mainCol{flex:1;display:flex;flex-direction:row;gap:.5rem;overflow:auto}.heading{font-weight:700}.data{word-wrap:break-word}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}pre{outline:1px solid #000;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#f0f}.key{color:red}@media only screen and (max-width: 1000px){.row{flex-direction:column;gap:.5rem}.mainCol{flex-direction:column;overflow-x:auto;overflow-y:visible;flex:auto}.requestCard h4{font-size:small;overflow:auto}.smartDevToolDialogContainer{width:calc(80vw - 3rem)}}.hasError{background-color:var(--warn-lighter-color)}.titlePanel{flex:1;display:flex;flex-direction:row;gap:1rem}.urlText{flex:1;text-decoration:underline}.PATCH{color:#d38042}.DELETE{color:#a41e22}.GET{color:#0f6ab4}.POST{color:#10a54a}.PUT{color:#c5862b}.HEAD{color:#ffd20f}.statusCode-2{color:#5fb442}.statusCode-3{color:#5970f6}.statusCode-4{color:#ec6762}.statusCode-5{color:#f2a63b}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "smartDevToolDatePipe": SmartDevToolDatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-smart-dev-tool-dialog', template: "<div class=\"smartDevToolDialogContainer\">\r\n    <div class=\"header\">\r\n        <h2>Developer tool</h2>\r\n        <button mat-icon-button title=\"close\" (click)=\"close()\">\r\n            <smart-icon icon=\"close\"></smart-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"requestsContainer\">\r\n        <mat-accordion multi>\r\n            <mat-expansion-panel\r\n                class=\"requestCard\"\r\n                [ngClass]=\"apiCall.responseStatus === 200 ? '' : 'hasError'\"\r\n                *ngFor=\"let apiCall of descriptor?.apiCalls; let i = index\"\r\n            >\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        <div class=\"titlePanel\">\r\n                            <span class=\"date\">\r\n                                {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                            </span>\r\n                            <span class=\"urlText\">\r\n                                {{ apiCall.url }}\r\n                            </span>\r\n                            <div [ngClass]=\"apiCall.requestMethod\">\r\n                                {{ apiCall.requestMethod }}\r\n                            </div>\r\n                            <div [ngClass]=\"'statusCode-' + apiCall.responseStatus.toString()[0]\">\r\n                                {{ apiCall.responseStatus }}\r\n                            </div>\r\n                        </div>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n\r\n                <div>\r\n                    <div class=\"table\">\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol heading\">Request</div>\r\n                            <div class=\"mainCol heading\">Response</div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.requestDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Date</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseDate | smartDevToolDatePipe }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Headers</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseHeader\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseHeader)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseHeader\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatus }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\"></div>\r\n                                <div class=\"data\"></div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Status text</div>\r\n                                <div class=\"data\">\r\n                                    {{ apiCall.responseStatusText }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Body</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.requestBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.requestBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.requestBody\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.responseBody\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.responseBody)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.responseBody\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Session Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Local Storage</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <div class=\"heading\">Cookies</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row\">\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.sessionStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.sessionStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.sessionStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.localStorage\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.localStorage)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.localStorage\" class=\"data\">null</div>\r\n                            </div>\r\n                            <div class=\"mainCol\">\r\n                                <pre\r\n                                    *ngIf=\"apiCall.cookies\"\r\n                                    class=\"data\"\r\n                                    [innerHTML]=\"getBody(apiCall.cookies)\"\r\n                                ></pre>\r\n                                <div *ngIf=\"!apiCall.cookies\" class=\"data\">null</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </mat-accordion>\r\n    </div>\r\n    <div class=\"buttonsContainer\">\r\n        <button color=\"primary\" mat-raised-button (click)=\"copy()\">Copy</button>\r\n        <button color=\"warn\" mat-raised-button (click)=\"clear()\">Clear</button>\r\n    </div>\r\n</div>\r\n", styles: [".smartDevToolDialogContainer{display:flex;flex-direction:column;gap:1rem;width:78vw;height:90vh}.header{display:flex;flex-direction:row;justify-content:space-between}.requestsContainer{display:flex;flex-direction:column;gap:1rem;flex:1;overflow:auto}.requestCard{background-color:var(--primary-lighter-color);padding:.5rem;border-radius:.5rem;display:flex;flex-direction:column}.table{display:flex;flex-direction:column;gap:.25rem}.row{display:flex;flex-direction:row;gap:1rem}.mainCol{flex:1;display:flex;flex-direction:row;gap:.5rem;overflow:auto}.heading{font-weight:700}.data{word-wrap:break-word}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}pre{outline:1px solid #000;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#f0f}.key{color:red}@media only screen and (max-width: 1000px){.row{flex-direction:column;gap:.5rem}.mainCol{flex-direction:column;overflow-x:auto;overflow-y:visible;flex:auto}.requestCard h4{font-size:small;overflow:auto}.smartDevToolDialogContainer{width:calc(80vw - 3rem)}}.hasError{background-color:var(--warn-lighter-color)}.titlePanel{flex:1;display:flex;flex-direction:row;gap:1rem}.urlText{flex:1;text-decoration:underline}.PATCH{color:#d38042}.DELETE{color:#a41e22}.GET{color:#0f6ab4}.POST{color:#10a54a}.PUT{color:#c5862b}.HEAD{color:#ffd20f}.statusCode-2{color:#5fb442}.statusCode-3{color:#5970f6}.statusCode-4{color:#ec6762}.statusCode-5{color:#f2a63b}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartDevToolDialogService }]; } });
-const copyToClipboard = ({ target, message, value }) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        let copyValue = '';
-        if (!navigator.clipboard) {
-            throw new Error("Browser don't have support for native clipboard.");
-        }
-        if (target) {
-            const node = document.querySelector(target);
-            if (!node || !node.textContent) {
-                throw new Error('Element not found');
-            }
-            value = node.textContent;
-        }
-        if (value) {
-            copyValue = value;
-        }
-        yield navigator.clipboard.writeText(copyValue);
-    }
-    catch (error) {
-        console.error(error.toString());
-    }
-});
-
-class SmartDevToolFloatingButtonComponent {
-    constructor(service) {
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.adminKeyName = 'useDevTool';
-        this.isShown = false;
-        this.errorsCount = '';
-        this.service.service.newErrorsCountChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.errorsCount = `${this.service.service.newErrorsCount > 0 ? this.service.service.newErrorsCount : ''}`;
-        });
-        window.addEventListener('storage', (event) => {
-            if (event.storageArea === localStorage) {
-                if (Object.keys(localStorage).includes(this.adminKeyName)) {
-                    this.isShown = localStorage.getItem(this.adminKeyName) === 'true';
-                }
-            }
-        });
-        this.isShown = localStorage.getItem(this.adminKeyName) === 'true';
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-    }
-    openDevToolDialog() {
-        this.service.openDialog();
-    }
-}
-SmartDevToolFloatingButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolFloatingButtonComponent, deps: [{ token: SmartDevToolDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SmartDevToolFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartDevToolFloatingButtonComponent, selector: "smart-session-dev-tool", ngImport: i0, template: "<button\r\n    *ngIf=\"isShown\"\r\n    mat-fab\r\n    [color]=\"errorsCount.length ? 'warn' : 'accent'\"\r\n    class=\"floatingButton\"\r\n    extended\r\n    title=\"devTool\"\r\n    (click)=\"openDevToolDialog()\"\r\n>\r\n    <smart-icon color=\"white\" icon=\"developer_mode\"></smart-icon>\r\n    {{ errorsCount }}\r\n</button>\r\n", styles: [".floatingButton{position:fixed;right:2rem;bottom:2rem}.mat-icon.mat-white{color:#fff}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolFloatingButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-session-dev-tool', template: "<button\r\n    *ngIf=\"isShown\"\r\n    mat-fab\r\n    [color]=\"errorsCount.length ? 'warn' : 'accent'\"\r\n    class=\"floatingButton\"\r\n    extended\r\n    title=\"devTool\"\r\n    (click)=\"openDevToolDialog()\"\r\n>\r\n    <smart-icon color=\"white\" icon=\"developer_mode\"></smart-icon>\r\n    {{ errorsCount }}\r\n</button>\r\n", styles: [".floatingButton{position:fixed;right:2rem;bottom:2rem}.mat-icon.mat-white{color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartDevToolDialogService }]; } });
-
-class SmartDevToolInterceptor {
-    constructor(service) {
-        this.service = service;
-    }
-    intercept(request, next) {
-        if (!this.service.isActive) {
-            return next.handle(request);
-        }
-        let requestDate = new Date();
-        return next.handle(request).pipe(map((event) => {
-            if (event.type === HttpEventType.Response) {
-                let responseDate = new Date();
-                this.service.writeResponse(request, event, requestDate, responseDate);
-            }
-            return event;
-        }));
-    }
-}
-SmartDevToolInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolInterceptor, deps: [{ token: SmartDevToolService }], target: i0.ɵɵFactoryTarget.Injectable });
-SmartDevToolInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: SmartDevToolService }]; } });
-class SmartDevToolErrorInterceptor {
-    constructor(service) {
-        this.service = service;
-    }
-    intercept(request, next) {
-        if (!this.service.isActive) {
-            return next.handle(request);
-        }
-        let requestDate = new Date();
-        return next.handle(request).pipe(catchError((error) => {
-            if (error.status !== 200) {
-                let responseDate = new Date();
-                this.service.writeResponse(request, error, requestDate, responseDate);
-            }
-            return throwError(error);
-        }));
-    }
-}
-SmartDevToolErrorInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolErrorInterceptor, deps: [{ token: SmartDevToolService }], target: i0.ɵɵFactoryTarget.Injectable });
-SmartDevToolErrorInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolErrorInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartDevToolErrorInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: SmartDevToolService }]; } });
-
 var SessionErrorBehaviour;
 (function (SessionErrorBehaviour) {
     SessionErrorBehaviour[SessionErrorBehaviour["REFRESH"] = 0] = "REFRESH";
@@ -7183,7 +6842,7 @@ class SmartErrorCatchingInterceptor {
         ];
     }
     intercept(request, next) {
-        return next.handle(request).pipe(catchError$1((error) => {
+        return next.handle(request).pipe(catchError((error) => {
             if (error.status === 400 && error.error.code) {
                 let sessionError = this.sessionErrorCodes.find((sessionError) => sessionError.code === error.error.code);
                 if (sessionError) {
@@ -7259,10 +6918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 class SmartSessionModule {
 }
 SmartSessionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartSessionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmartSessionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartSessionModule, declarations: [SmartDevToolDialogComponent,
-        SmartDevToolFloatingButtonComponent,
-        SmartDevToolDatePipe,
-        SmartSessionTimerComponent], imports: [BrowserModule, MatCommonModule, MatExpansionModule, MatButtonModule, SmartIconModule], exports: [SmartDevToolFloatingButtonComponent, SmartSessionTimerComponent] });
+SmartSessionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartSessionModule, declarations: [SmartSessionTimerComponent], imports: [BrowserModule, MatCommonModule, MatExpansionModule, MatButtonModule, SmartIconModule], exports: [SmartSessionTimerComponent] });
 SmartSessionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartSessionModule, providers: [
         SmartCookieService,
         SmartSessionService,
@@ -7277,20 +6933,13 @@ SmartSessionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
             useClass: SmartHeaderMaintainerInterceptor,
             multi: true,
         },
-        { provide: HTTP_INTERCEPTORS, useClass: SmartDevToolInterceptor, multi: true },
-        { provide: HTTP_INTERCEPTORS, useClass: SmartDevToolErrorInterceptor, multi: true },
     ], imports: [[BrowserModule, MatCommonModule, MatExpansionModule, MatButtonModule, SmartIconModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartSessionModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SmartDevToolDialogComponent,
-                        SmartDevToolFloatingButtonComponent,
-                        SmartDevToolDatePipe,
-                        SmartSessionTimerComponent,
-                    ],
+                    declarations: [SmartSessionTimerComponent],
                     imports: [BrowserModule, MatCommonModule, MatExpansionModule, MatButtonModule, SmartIconModule],
-                    exports: [SmartDevToolFloatingButtonComponent, SmartSessionTimerComponent],
+                    exports: [SmartSessionTimerComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
                         SmartCookieService,
@@ -7306,8 +6955,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useClass: SmartHeaderMaintainerInterceptor,
                             multi: true,
                         },
-                        { provide: HTTP_INTERCEPTORS, useClass: SmartDevToolInterceptor, multi: true },
-                        { provide: HTTP_INTERCEPTORS, useClass: SmartDevToolErrorInterceptor, multi: true },
                     ],
                 }]
         }] });
@@ -7418,7 +7065,7 @@ class SmartViewContextInterceptor {
             }
             catch (error) { }
         }
-        return next.handle(request).pipe(catchError((error) => {
+        return next.handle(request).pipe(catchError$1((error) => {
             if (error.status === 409 &&
                 (error.error.code || error.error.message)) {
                 this.openErrorDialog(error.error);
@@ -9836,7 +9483,7 @@ class ExpandableSectionComponent {
     }
 }
 ExpandableSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"] }]
@@ -11373,7 +11020,7 @@ class SmartGridComponent {
         });
     }
     renderTable() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         return __awaiter(this, void 0, void 0, function* () {
             let tableRow = this.smartGrid.gridModel.page.rows.map((item) => {
                 return item;
@@ -11399,7 +11046,20 @@ class SmartGridComponent {
                 tableType = SmartTableType.INHERITED;
             }
             if (this.smartGrid.layoutDef === SmartLayoutDef.TABLE) {
-                let tableConfig = Object.assign(Object.assign({}, this.smartGrid.tableConfig), { tableRows: tableRow, tableType, customSmartTableHeaders: yield this.constructHeader(), expandable: this.smartGrid.expandable, expandedComponent: this.smartGrid.expandedComponent, type: SmartTableInterfaceTypeEnum.NORMAL, sortable: true });
+                let tableConfig = Object.assign(Object.assign({}, this.smartGrid.tableConfig), { tableRows: tableRow, tableType, customSmartTableHeaders: yield this.constructHeader(), expandable: this.smartGrid.expandable, expandedComponent: this.smartGrid.expandedComponent, type: SmartTableInterfaceTypeEnum.NORMAL, sortable: true, defaultActions: (_h = (_g = this.smartGrid) === null || _g === void 0 ? void 0 : _g.gridModel.defaultRowActions) === null || _h === void 0 ? void 0 : _h.map((code) => {
+                        return {
+                            type: code === '_actionSeparator_'
+                                ? SmartTableButtonType.SEPARATOR
+                                : SmartTableButtonType.NORMAL,
+                            callback: this.execute.bind(this),
+                            label: this.buttonTranslator({ code: code }),
+                            args: [
+                                {
+                                    code: code,
+                                },
+                            ],
+                        };
+                    }) });
                 if (this.smartGrid.uiActionService &&
                     this.smartGrid.uiActionDescriptorService &&
                     this.smartGrid.serviceToUse &&
@@ -11420,7 +11080,7 @@ class SmartGridComponent {
                 if (tableConfig.asyncOnExpand) {
                     tableConfig.rowExpander = this;
                 }
-                const selectionMode = (_h = (_g = this.service.gridModel.view) === null || _g === void 0 ? void 0 : _g.descriptor) === null || _h === void 0 ? void 0 : _h.selectionMode;
+                const selectionMode = (_k = (_j = this.service.gridModel.view) === null || _j === void 0 ? void 0 : _j.descriptor) === null || _k === void 0 ? void 0 : _k.selectionMode;
                 if (!tableConfig.selection &&
                     !tableConfig.selectionProperty &&
                     selectionMode !== GridSelectionMode.None) {
@@ -11436,7 +11096,7 @@ class SmartGridComponent {
                     this.componentRefTable.instance.updateSmartTable(this.smartTable);
                 }
                 else {
-                    (_j = this.vcRefTable) === null || _j === void 0 ? void 0 : _j.clear();
+                    (_l = this.vcRefTable) === null || _l === void 0 ? void 0 : _l.clear();
                     if (!this.vcRefTable) {
                         return;
                     }
@@ -11477,7 +11137,7 @@ class SmartGridComponent {
                         };
                         this.service.sort(this.smartGrid, gridUpdateData);
                     });
-                    (_k = this.componentRefTable.instance.smartTable.selection) === null || _k === void 0 ? void 0 : _k.changed.pipe(takeUntil(this.componentRefTable.instance._destroy$)).subscribe((row) => {
+                    (_m = this.componentRefTable.instance.smartTable.selection) === null || _m === void 0 ? void 0 : _m.changed.pipe(takeUntil(this.componentRefTable.instance._destroy$)).subscribe((row) => {
                         this.selectionChanges.next(row);
                     });
                 }
@@ -11719,10 +11379,10 @@ class SmartGridComponent {
     }
 }
 SmartGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-SmartGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid"] }, { type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+SmartGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [""], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid"] }, { type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$2.MatDialog }]; }, propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -13184,5 +12844,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APIS$3 as APIS, ApiModule$3 as ApiModule, ApiQueueService, BASE_PATH$4 as BASE_PATH, COLLECTION_FORMATS$4 as COLLECTION_FORMATS, CloseResult, ComponentFactoryService, ComponentFactoryServiceModule, ComponentType, ComponentWidgetType, Configuration$4 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultUiActionCode_CLOSE, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator, FilterExpressionBuilderGroup, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderBy, GridColumnContentType, GridDataAccessConfig, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptor, IS_ASYNC_PARAM_NAME, ImageResource, LayoutDirection, Link, MessageOptionType, MessageType, SelectionDefinition, SessionAPIS, SessionErrorBehaviour, SessionService, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDevToolDatePipe, SmartDevToolFloatingButtonComponent, SmartDevToolService, SmartDialog, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterModule, SmartFilterPosition, SmartFilterType, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformModule, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, UiActionButtonIconPos, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, ViewEventHandler, ViewService, ViewState, ViewType, WidgetMap };
+export { APIS$3 as APIS, ApiModule$3 as ApiModule, ApiQueueService, BASE_PATH$4 as BASE_PATH, COLLECTION_FORMATS$4 as COLLECTION_FORMATS, CloseResult, ComponentFactoryService, ComponentFactoryServiceModule, ComponentType, ComponentWidgetType, Configuration$4 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultUiActionCode_CLOSE, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator, FilterExpressionBuilderGroup, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderBy, GridColumnContentType, GridDataAccessConfig, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptor, IS_ASYNC_PARAM_NAME, ImageResource, LayoutDirection, Link, MessageOptionType, MessageType, SelectionDefinition, SessionAPIS, SessionErrorBehaviour, SessionService, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDialog, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterModule, SmartFilterPosition, SmartFilterType, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformModule, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, UiActionButtonIconPos, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, ViewEventHandler, ViewService, ViewState, ViewType, WidgetMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map