@inspark/inspark-components 1.0.12 → 1.0.15

package/full/bundles/inspark-inspark-components.umd.js

@@ -1818,7 +1818,6 @@
         };
         TableComponent.prototype.ngOnChanges = function (changes) {
             this.resetColumnWidth();
-            this.saveHiddenColumns();
             this.visibleColumns();
         };
         TableComponent.prototype.updateData = function () {
@@ -1917,12 +1916,31 @@
                 window.localStorage.setItem(key, JSON.stringify(state));
             }
         };
+        TableComponent.prototype.isHiddenFieldsChanged = function () {
+            var hiddenFieldsSaved = this.getHiddenHiddenFieldsFromStorage();
+            var hiddenFieldsColumns = (this.columns || []).filter(function (_col) { return _col.isHidden; }).map(function (_col) { return _col.field; });
+            if (hiddenFieldsSaved.length === hiddenFieldsColumns.length) {
+                var diff = hiddenFieldsSaved.filter(function (field) { return !hiddenFieldsColumns.includes(field); });
+                diff.length !== 0;
+            }
+            return true;
+        };
         TableComponent.prototype.saveHiddenColumns = function () {
             if (this.stateKey) {
+                if (!this.isHiddenFieldsChanged()) {
+                    return;
+                }
                 var hiddenFields = (this.columns || []).filter(function (_col) { return _col.isHidden; }).map(function (_col) { return _col.field; }).join(',');
                 this.saveToLocalStorage(hiddenFields, this.stateKey + 'HiddenFields');
                 window.localStorage.removeItem(this.stateKey);
-                this.dt.restoreState();
+                if (this.searchText) {
+                    window.localStorage.setItem(this.stateKey, JSON.stringify({
+                        filters: { global: { value: this.searchText, matchMode: 'contains' } }
+                    }));
+                }
+                if (this.dt) {
+                    this.dt.restoreState();
+                }
             }
         };
         TableComponent.prototype.countVisibleColumns = function () {
@@ -1966,17 +1984,20 @@
             }
             this.columns.forEach(function (column, index) { return column.width = index === 0 ? firstColumnPercent + '%' : percent + "%"; });
         };
-        TableComponent.prototype.restoreHiddenColumns = function () {
+        TableComponent.prototype.getHiddenHiddenFieldsFromStorage = function () {
             if (this.stateKey) {
                 var hiddenFields = window.localStorage.getItem(this.stateKey + 'HiddenFields');
                 if (hiddenFields) {
-                    var hiddenFieldsArray_1 = JSON.parse(hiddenFields).split(',');
-                    this.columns.forEach(function (_col) { return _col.isHidden = hiddenFieldsArray_1.includes(_col.field) || _col.col_invisible; });
-                }
-                else {
-                    // this.columns.forEach(_col => _col.isHidden = _col.col_invisible);
+                    return JSON.parse(hiddenFields).split(',');
                 }
             }
+            return [];
+        };
+        TableComponent.prototype.restoreHiddenColumns = function () {
+            if (this.stateKey) {
+                var hiddenFieldsArray_1 = this.getHiddenHiddenFieldsFromStorage();
+                this.columns.forEach(function (_col) { return _col.isHidden = hiddenFieldsArray_1.includes(_col.field) || _col.col_invisible; });
+            }
         };
         TableComponent.prototype.calcWidth = function (idx, label, width) {
             return width && idx >= 0 ? width : 'auto';
@@ -2188,7 +2209,7 @@
         TableComponent = __decorate([
             core.Component({
                 selector: 'in-table',
-                template: "<span *ngIf=\"label\" class=\"c-label\">\n        {{label}}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n</span>\n<p-table #dt\n         (onSort)=\"onSort()\"\n         (onStateRestore)=\"restoreSearchText()\"\n         (onStateSave)=\"stateSave($event)\"\n         [(selection)]=\"selectionValue\"\n         [class]=\"class\"\n         [columns]=\"filteredColumns\"\n         [dataKey]=\"dataKey || 'id'\"\n         [globalFilterFields]=\"globalFilteredColumns\"\n         [resizableColumns]=\"resizableColumns\"\n         [scrollHeight]=\"scrollHeight\"\n         [scrollable]=\"scrollable\"\n         [selectionMode]=\"selectionMode\"\n         [sortField]=\"sortField || 'id'\"\n         [sortOrder]=\"isAscending ? 1 : -1\"\n         [stateKey]=\"stateKey\"\n         [stateStorage]=\"'local'\"\n         [style]=\"style\"\n         [value]=\"values\"\n         columnResizeMode=\"expand\"\n         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n         [customSort]=\"true\"\n\n>\n\n  <ng-template *ngIf=\"colGroupTemplate\" let-columns pTemplate=\"body\">\n    <ng-container\n      *ngTemplateOutlet=\"colGroupTemplate; context: {$implicit: { columns: columns}}\"></ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"!colGroupTemplate\" let-columns pTemplate=\"colgroup\">\n    <colgroup *ngIf=\"!isMobileView\">\n      <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\n      <col *ngFor=\"let col of filteredColumns; let idx = index\" [style.width]=\"calcWidth(idx, col.field, col.width)\">\n    </colgroup>\n  </ng-template>\n\n  <ng-template let-columns pTemplate=\"header\">\n    <ng-container *ngIf=\"showHeader\">\n      <tr>\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\n          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n        </th>\n        <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\n            pResizableColumn>\n          <div class=\"ui-table-thead-title\"\n               title=\"{{col.label | translate}}\">\n            {{col.label | translate}}\n          </div>\n          <p-sortIcon [field]=\"col.field\"\n                      class=\"u-position-absolute u-position-absolute-right c-sorticon\"\n                      style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\n        </th>\n      </tr>\n      <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\n            style=\"width: 44px;\"></th>\n        <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\n          <input\n            (input)=\"dt.filter($event.target.value, col.field, 'contains')\"\n            *ngSwitchCase=\"colFilter(col.field).type === 'text' ? col.field : ''\"\n            autofocus=\"\"\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n            pInputText\n            type=\"text\">\n\n          <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\n                      *ngSwitchCase=\"colFilter(col.field).type === 'dropdown' ? col.field : ''\"\n                      [options]=\"colFilter(col.field).options\"\n                      [style]=\"{ width: '100%', overflow: 'visible' }\"\n                      appendTo=\"body\"></p-dropdown>\n\n          <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\n                         *ngSwitchCase=\"colFilter(col.field).type === 'multiselect' ? col.field : ''\"\n                         [options]=\"colFilter(col.field).options\"\n                         [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\n                         defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\n          <input\n            (input)=\"dt.filter($event.target.value, col.field + '2filter', 'contains')\"\n            *ngSwitchCase=\"colFilter(col.field).type === 'datetext' ? col.field : ''\"\n            autofocus=\"\"\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n            pInputText\n            type=\"text\">\n        </th>\n      </tr>\n    </ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowIndex=\"rowIndex\" let-rowData pTemplate=\"body\">\n    <ng-container\n      *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\n    <tr\n      (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\n      *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\n      class=\"row_hover_highlight\">\n      <td [colSpan]=\"countVisibleColumns() + 1\">\n        <span>\n          <i\n            [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'fa fa-fw fa-angle-down' : 'fa fa-fw fa-angle-right'\"></i>\n          <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\n            )</span>\n        </span>\n      </td>\n    </tr>\n    <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\n        [ngClass]=\"{row_active: isRowActive(rowData)}\"\n        [pSelectableRow]=\"rowData\"\n        class=\"row\">\n      <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\n            'row_status_success': rowData.sdirparamstatecolor === 'success',\n            'row_status_error': rowData.sdirparamstatecolor === 'error',\n            'row_status_warning': rowData.sdirparamstatecolor === 'warning',\n            'row_status_critical': rowData.sdirparamstatecolor === 'critical',\n            'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue'\n          }\" class=\"u-text_center\"\n          style=\"width: 44px\"\n      >\n        <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\n      </td>\n      <td (click)=\"activeChange.emit(rowData)\"\n          *ngFor=\"let col of filteredColumns\"\n          class=\"u-overflow-visible\">\n        <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"ui-table-tbody-content\" title>\n          {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n    <div class=\"o-grid o-grid_no-gutter\">\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n        <div class=\"c-form c-form_inline u-display-inline-block\">\n          <label class=\"c-label\">\n            <input #searchTextInput\n                   (input)=\"localSearch(dt, $event.target.value)\"\n                   [(ngModel)]=\"searchText\"\n                   autofocus=\"\"\n                   class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n                   pInputText\n                   placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n                   tabindex=\"1\"\n                   type=\"search\"\n            >\n          </label>\n        </div>\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n                                        [columns]=\"primaryColumns\"\n                                        [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\n        </div>\n\n        <button (click)=\"onFilter($event)\" *ngIf=\"toolbar.filter\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-filter\" title=\"{{'Service filter' | translate}}\"></i>\n        </button>\n\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-plus\" title=\"{{'Add' | translate}}\"></i>\n        </button>\n\n        <button (click)=\"linkAction.emit($event)\" *ngIf=\"toolbar.link\" [disabled]=\"toolbar.link.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-link\" title=\"{{'Link' | translate}}\"></i>\n        </button>\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-file-csv\" title=\"{{'LOGS.SAVE_TO_SCV' | translate}}\"></i>\n        </button>\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n                [disabled]=\"toolbar.save.disabled\"\n                class=\"c-btn c-btn_primary c-btn_small\"\n                title=\"{{'Save' | translate}}\"\n        >\n          {{'Save' | translate}}\n        </button>\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n                [disabled]=\"toolbar.groupEdit.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n        </button>\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n                [disabled]=\"toolbar.remove.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-trash\" title=\"{{'Delete' | translate}}\"></i>\n        </button>\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n        </button>\n        <button *ngIf=\"toolbar.expandAll\"\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n                (click)=\"toggleNodes(true)\"\n                title=\"{{'Expand all' | translate}}\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n          </svg>\n        </button>\n        <button *ngIf=\"toolbar.expandAll\"\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n                (click)=\"toggleNodes(false)\"\n                title=\"{{'Collapse all' | translate}}\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n          </svg>\n        </button>\n\n        <div *ngIf=\"toolbar.groupSort\"\n             container=\"body\"\n             ngbDropdown\n             class=\"c-btn-group\">\n\n          <button class=\"c-btn c-btn_border-free c-btn_small\"\n                  id=\"dropdownGroupType\"\n                  ngbDropdownToggle\n                  title=\"{{'Change the way parameters are grouped' | translate}}\">\n            <i aria-hidden=\"true\" class=\"fa fa-object-group\"></i>\n            <i aria-hidden=\"true\" class=\"c-caret\"></i>\n          </button>\n\n          <ul aria-labelledby=\"dropdownGroupType\"\n              ngbDropdownMenu\n              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n              role=\"menu\">\n            <li ngbDropdownItem\n                *ngFor=\"let item of toolbar.groupSort.label\"\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n                role=\"menuitem\">\n              <a class=\"c-dropdown-menu__content\" (click)=\"toggleMode(item.value)\">\n                {{item.label}}\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</p-table>\n",
+                template: "<span *ngIf=\"label\" class=\"c-label\">\n        {{label}}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n</span>\n<p-table #dt\n         (onSort)=\"onSort()\"\n         (onStateRestore)=\"restoreSearchText()\"\n         (onStateSave)=\"stateSave($event)\"\n         [(selection)]=\"selectionValue\"\n         [class]=\"class\"\n         [columns]=\"filteredColumns\"\n         [dataKey]=\"dataKey || 'id'\"\n         [globalFilterFields]=\"globalFilteredColumns\"\n         [resizableColumns]=\"resizableColumns\"\n         [scrollHeight]=\"scrollHeight\"\n         [scrollable]=\"scrollable\"\n         [selectionMode]=\"selectionMode\"\n         [sortField]=\"sortField || 'id'\"\n         [sortOrder]=\"isAscending ? 1 : -1\"\n         [stateKey]=\"stateKey\"\n         [stateStorage]=\"'local'\"\n         [style]=\"style\"\n         [value]=\"values\"\n         columnResizeMode=\"expand\"\n         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n         [customSort]=\"customSort\"\n\n>\n\n  <ng-template *ngIf=\"colGroupTemplate\" let-columns pTemplate=\"body\">\n    <ng-container\n      *ngTemplateOutlet=\"colGroupTemplate; context: {$implicit: { columns: columns}}\"></ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"!colGroupTemplate\" let-columns pTemplate=\"colgroup\">\n    <colgroup *ngIf=\"!isMobileView\">\n      <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\n      <col *ngFor=\"let col of filteredColumns; let idx = index\" [style.width]=\"calcWidth(idx, col.field, col.width)\">\n    </colgroup>\n  </ng-template>\n\n  <ng-template let-columns pTemplate=\"header\">\n    <ng-container *ngIf=\"showHeader\">\n      <tr>\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\n          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n        </th>\n        <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\n            pResizableColumn>\n          <div class=\"ui-table-thead-title\"\n               title=\"{{col.label | translate}}\">\n            {{col.label | translate}}\n          </div>\n          <p-sortIcon [field]=\"col.field\"\n                      class=\"u-position-absolute u-position-absolute-right c-sorticon\"\n                      style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\n        </th>\n      </tr>\n      <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\n            style=\"width: 44px;\"></th>\n        <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\n          <input\n            (input)=\"dt.filter($event.target.value, col.field, 'contains')\"\n            *ngSwitchCase=\"colFilter(col.field).type === 'text' ? col.field : ''\"\n            autofocus=\"\"\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n            pInputText\n            type=\"text\">\n\n          <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\n                      *ngSwitchCase=\"colFilter(col.field).type === 'dropdown' ? col.field : ''\"\n                      [options]=\"colFilter(col.field).options\"\n                      [style]=\"{ width: '100%', overflow: 'visible' }\"\n                      appendTo=\"body\"></p-dropdown>\n\n          <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\n                         *ngSwitchCase=\"colFilter(col.field).type === 'multiselect' ? col.field : ''\"\n                         [options]=\"colFilter(col.field).options\"\n                         [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\n                         defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\n          <input\n            (input)=\"dt.filter($event.target.value, col.field + '2filter', 'contains')\"\n            *ngSwitchCase=\"colFilter(col.field).type === 'datetext' ? col.field : ''\"\n            autofocus=\"\"\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n            pInputText\n            type=\"text\">\n        </th>\n      </tr>\n    </ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowIndex=\"rowIndex\" let-rowData pTemplate=\"body\">\n    <ng-container\n      *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\n  </ng-template>\n\n  <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\n    <tr\n      (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\n      *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\n      class=\"row_hover_highlight\">\n      <td [colSpan]=\"countVisibleColumns() + 1\">\n        <span>\n          <i\n            [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'fa fa-fw fa-angle-down' : 'fa fa-fw fa-angle-right'\"></i>\n          <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\n            )</span>\n        </span>\n      </td>\n    </tr>\n    <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\n        [ngClass]=\"{row_active: isRowActive(rowData)}\"\n        [pSelectableRow]=\"rowData\"\n        class=\"row\">\n      <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\n            'row_status_success': rowData.sdirparamstatecolor === 'success',\n            'row_status_error': rowData.sdirparamstatecolor === 'error',\n            'row_status_warning': rowData.sdirparamstatecolor === 'warning',\n            'row_status_critical': rowData.sdirparamstatecolor === 'critical',\n            'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue'\n          }\" class=\"u-text_center\"\n          style=\"width: 44px\"\n      >\n        <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\n      </td>\n      <td (click)=\"activeChange.emit(rowData)\"\n          *ngFor=\"let col of filteredColumns\"\n          class=\"u-overflow-visible\">\n        <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"ui-table-tbody-content\" title>\n          {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n    <div class=\"o-grid o-grid_no-gutter\">\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n        <div class=\"c-form c-form_inline u-display-inline-block\">\n          <label class=\"c-label\">\n            <input #searchTextInput\n                   (input)=\"localSearch(dt, $event.target.value)\"\n                   [(ngModel)]=\"searchText\"\n                   autofocus=\"\"\n                   class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n                   pInputText\n                   placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n                   tabindex=\"1\"\n                   type=\"search\"\n            >\n          </label>\n        </div>\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n                                        [columns]=\"primaryColumns\"\n                                        [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\n        </div>\n\n        <button (click)=\"onFilter($event)\" *ngIf=\"toolbar.filter\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-filter\" title=\"{{'Service filter' | translate}}\"></i>\n        </button>\n\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-plus\" title=\"{{'Add' | translate}}\"></i>\n        </button>\n\n        <button (click)=\"linkAction.emit($event)\" *ngIf=\"toolbar.link\" [disabled]=\"toolbar.link.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-link\" title=\"{{'Link' | translate}}\"></i>\n        </button>\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-file-csv\" title=\"{{'LOGS.SAVE_TO_SCV' | translate}}\"></i>\n        </button>\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n                [disabled]=\"toolbar.save.disabled\"\n                class=\"c-btn c-btn_primary c-btn_small\"\n                title=\"{{'Save' | translate}}\"\n        >\n          {{'Save' | translate}}\n        </button>\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n                [disabled]=\"toolbar.groupEdit.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n        </button>\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n                [disabled]=\"toolbar.remove.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-trash\" title=\"{{'Delete' | translate}}\"></i>\n        </button>\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n        </button>\n        <button *ngIf=\"toolbar.expandAll\"\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n                (click)=\"toggleNodes(true)\"\n                title=\"{{'Expand all' | translate}}\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n          </svg>\n        </button>\n        <button *ngIf=\"toolbar.expandAll\"\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n                (click)=\"toggleNodes(false)\"\n                title=\"{{'Collapse all' | translate}}\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n          </svg>\n        </button>\n\n        <div *ngIf=\"toolbar.groupSort\"\n             container=\"body\"\n             ngbDropdown\n             class=\"c-btn-group\">\n\n          <button class=\"c-btn c-btn_border-free c-btn_small\"\n                  id=\"dropdownGroupType\"\n                  ngbDropdownToggle\n                  title=\"{{'Change the way parameters are grouped' | translate}}\">\n            <i aria-hidden=\"true\" class=\"fa fa-object-group\"></i>\n            <i aria-hidden=\"true\" class=\"c-caret\"></i>\n          </button>\n\n          <ul aria-labelledby=\"dropdownGroupType\"\n              ngbDropdownMenu\n              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n              role=\"menu\">\n            <li ngbDropdownItem\n                *ngFor=\"let item of toolbar.groupSort.label\"\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n                role=\"menuitem\">\n              <a class=\"c-dropdown-menu__content\" (click)=\"toggleMode(item.value)\">\n                {{item.label}}\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</p-table>\n",
                 entryComponents: [],
                 styles: ["@charset \"UTF-8\";.u-overflow-visible{overflow:visible!important}.row_status_success{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-success,#31ac51)}.row_status_error{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-error,#f95c5d)}.row_status_warning{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-warning,#ee9946)}.row_status_critical{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-critical,#f95c5d)}.row_status_falsevalue{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-falsevalue,#85b3cb)}.row_status_disabled{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-disabled)}.row_status_none{padding-left:9px!important;border-left:4px solid transparent}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button}"]
             })