@inspark/inspark-components 19.0.12 → 19.0.14

package/full/fesm2022/inspark-inspark-components.mjs

@@ -15,7 +15,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/fo
 import * as i2$3 from 'ng-inline-svg-2';
 import { InlineSVGModule } from 'ng-inline-svg-2';
 import * as i2$2 from 'primeng/table';
-import { TableService, Table, TableModule } from 'primeng/table';
+import { Table, TableService, TableModule } from 'primeng/table';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from 'primeng/dropdown';
@@ -1325,6 +1325,57 @@ class TableComponent {
          *  Replaces p-tableCheckbox which calls dt.isSelected() (O(M)) for EVERY
          *  row on EVERY CD cycle via TableService.selectionSource$ subscription. */
         this._selectionSet = new Set();
+        TableComponent.patchPrimeTableSaveColumnWidths();
+    }
+    /**
+     * В PrimeNG 19 при восстановленном глобальном фильтре p-table может вызвать saveState()/saveColumnWidths()
+     * до того, как DOM-колонки полностью готовы. В таком случае внутри PrimeNG падает чтение offsetWidth.
+     * Патчим метод один раз на уровне прототипа Table: обычное поведение сохраняется, а в раннем ошибочном
+     * вызове в state возвращаются ранее сохраненные columnWidths/tableWidth.
+     */
+    static patchPrimeTableSaveColumnWidths() {
+        const tablePrototype = Table.prototype;
+        if (!tablePrototype || tablePrototype.__insparkSaveColumnWidthsPatched || typeof tablePrototype.saveColumnWidths !== 'function') {
+            return;
+        }
+        const originalSaveColumnWidths = tablePrototype.saveColumnWidths;
+        tablePrototype.saveColumnWidths = function (state) {
+            try {
+                return originalSaveColumnWidths.apply(this, arguments);
+            }
+            catch (error) {
+                if (!TableComponent.isOffsetWidthError(error)) {
+                    throw error;
+                }
+                TableComponent.copyColumnWidthsFromSavedState(this, state);
+            }
+        };
+        tablePrototype.__insparkSaveColumnWidthsPatched = true;
+    }
+    static isOffsetWidthError(error) {
+        return !!error && typeof error.message === 'string' && error.message.indexOf('offsetWidth') !== -1;
+    }
+    static copyColumnWidthsFromSavedState(table, state) {
+        if (!state || !table || !table.stateKey) {
+            return;
+        }
+        const storage = table.stateStorage === 'session' ? window.sessionStorage : window.localStorage;
+        const savedState = storage.getItem(table.stateKey);
+        if (!savedState) {
+            return;
+        }
+        try {
+            const parsedState = JSON.parse(savedState);
+            if (parsedState.columnWidths) {
+                state.columnWidths = parsedState.columnWidths;
+            }
+            if (parsedState.tableWidth) {
+                state.tableWidth = parsedState.tableWidth;
+            }
+        }
+        catch (parseError) {
+            // сохраненный state поврежден; игнорируем его и даем PrimeNG сохранить новый state без ширин колонок
+        }
     }
     _rebuildSelectionSet(val) {
         this._selectionSet = new Set();
@@ -1663,12 +1714,12 @@ class TableComponent {
             i0.ɵɵproperty("ngIf", !ctx.bodyTemplate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.toolbar);
-        } }, dependencies: () => [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, i1$2.NgSwitch, i1$2.NgSwitchCase, i2$2.Table, i2.PrimeTemplate, i2$2.SortableColumn, i2$2.SelectableRow, i2$2.ResizableColumn, i2$2.SortIcon, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.RequiredValidator, i2$1.NgModel, i2$1.NgForm, i5.Dropdown, i6.MultiSelect, i7.NgbDropdown, i7.NgbDropdownToggle, i7.NgbDropdownMenu, i7.NgbDropdownItem, TableColumnsMultiselectComponent, PropertyValuePipe, i1.TranslatePipe], styles: ["@charset \"UTF-8\";.u-overflow-visible[_ngcontent-%COMP%]{overflow:visible!important}.row_status_success[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-success, #31AC51)}.row_status_error[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-error, #F95C5D)}.row_status_warning[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-warning, #EE9946)}.row_status_critical[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-critical, #F95C5D)}.row_status_falsevalue[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-falsevalue, #85B3CB)}.row_status_disabled[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-disabled)}.row_status_none[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid transparent}.row_status_pending[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-pending, #1f85ff)}.button-reset[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset[_ngcontent-%COMP%]:hover{color:var(--ids-theme-btn-default-color, #FFFFFF)}.input-wrapper[_ngcontent-%COMP%]{position:relative;display:flex;align-items:baseline}.c-input[_ngcontent-%COMP%]:not(:valid) ~ .button-reset[_ngcontent-%COMP%]{display:none}.in-table-checkbox[_ngcontent-%COMP%]{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox[_ngcontent-%COMP%]:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}"] }); }
+        } }, dependencies: () => [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, i1$2.NgSwitch, i1$2.NgSwitchCase, i2$2.Table, i2.PrimeTemplate, i2$2.SortableColumn, i2$2.SelectableRow, i2$2.ResizableColumn, i2$2.SortIcon, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.RequiredValidator, i2$1.NgModel, i2$1.NgForm, i5.Dropdown, i6.MultiSelect, i7.NgbDropdown, i7.NgbDropdownToggle, i7.NgbDropdownMenu, i7.NgbDropdownItem, TableColumnsMultiselectComponent, PropertyValuePipe, i1.TranslatePipe], styles: ["@charset \"UTF-8\";.u-overflow-visible[_ngcontent-%COMP%]{overflow:visible!important}.row_status_success[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-success, #31AC51)}.row_status_error[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-error, #F95C5D)}.row_status_warning[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-warning, #EE9946)}.row_status_critical[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-critical, #F95C5D)}.row_status_falsevalue[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-falsevalue, #85B3CB)}.row_status_disabled[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-disabled)}.row_status_none[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid transparent}.row_status_pending[_ngcontent-%COMP%]{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-pending, #1f85ff)}.button-reset[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset[_ngcontent-%COMP%]:hover{color:var(--ids-theme-btn-default-color, #FFFFFF)}.input-wrapper[_ngcontent-%COMP%]{position:relative;display:flex;align-items:baseline}.c-input[_ngcontent-%COMP%]:not(:valid) ~ .button-reset[_ngcontent-%COMP%]{display:none}.theme-light[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-light   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-contrast[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-contrast   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]{border-color:#00000073}.theme-light[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-light   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-contrast[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-contrast   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:#000000b3}.in-table-checkbox[_ngcontent-%COMP%]{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox[_ngcontent-%COMP%]:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'in-table', providers: [TableService], template: "<span *ngIf=\"label\" class=\"c-label\">\r\n        {{label}}\r\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\r\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\r\n</span>\r\n<p-table #dt\r\n         (onFilter) = onFilter($event)\r\n         (onSort)=\"onSort()\"\r\n         (onStateRestore)=\"restoreSearchText()\"\r\n         (onStateSave)=\"stateSave($event)\"\r\n         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\r\n         [(selection)]=\"selectionValue\"\r\n         [class]=\"class\"\r\n         [columns]=\"filteredColumns\"\r\n         [customSort]=\"customSort\"\r\n         [dataKey]=\"dataKey || 'id'\"\r\n         [globalFilterFields]=\"globalFilteredColumns\"\r\n         [resizableColumns]=\"resizableColumns\"\r\n         [scrollHeight]=\"scrollHeight\"\r\n         [scrollable]=\"scrollable\"\r\n         [selectionMode]=\"selectionMode\"\r\n         [sortField]=\"sortField || 'id'\"\r\n         [sortOrder]=\"isAscending ? 1 : -1\"\r\n         [stateKey]=\"stateKey\"\r\n         [stateStorage]=\"'local'\"\r\n         [style]=\"style\"\r\n         [value]=\"values\"\r\n         [columnResizeMode]=\"columnResizeMode\"\r\n>\r\n  <ng-template *ngIf=\"colGroupTemplate\" let-columns pTemplate=\"colgroup\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"colGroupTemplate; context: {$implicit: { columns: columns}}\"></ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!colGroupTemplate\" let-columns pTemplate=\"colgroup\">\r\n    <colgroup *ngIf=\"!isMobileView\">\r\n      <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\r\n      <col *ngFor=\"let col of filteredColumns; let idx = index\">\r\n    </colgroup>\r\n  </ng-template>\r\n\r\n  <ng-template let-columns pTemplate=\"header\">\r\n    <ng-container *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\r\n          <!-- Native header checkbox bypasses dt.processedData (O(N log N) sort) used\r\n               by p-tableHeaderCheckbox.toggleRowsWithCheckbox() on select all. -->\r\n          <input type=\"checkbox\"\r\n                 class=\"in-table-checkbox\"\r\n                 [checked]=\"_isAllSelected()\"\r\n                 (change)=\"_onHeaderCheckboxChange($event)\"\r\n                 (click)=\"$event.stopPropagation()\"\r\n          >\r\n        </th>\r\n        <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\r\n            pResizableColumn>\r\n          <div class=\"p-table-thead-title\"\r\n               title=\"{{col.label | translate}}\">\r\n            {{col.label | translate}}\r\n          </div>\r\n          <p-sortIcon *ngIf=\"isSortIcon\" [field]=\"col.field\"\r\n                      class=\"u-position-absolute u-position-absolute-right c-sorticon\"\r\n                      style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\r\n        </th>\r\n      </tr>\r\n      <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\r\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\r\n            style=\"width: 44px;\"></th>\r\n        <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\r\n          <input\r\n            (input)=\"dt.filter($any($event.target).value, col.field, 'contains')\"\r\n            *ngSwitchCase=\"colFilter(col.field)?.type === 'text' ? col.field : ''\"\r\n            autofocus=\"\"\r\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n            pInputText\r\n            type=\"text\">\r\n\r\n          <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\r\n                      *ngSwitchCase=\"colFilter(col.field)?.type === 'dropdown' ? col.field : ''\"\r\n                      [options]=\"colFilter(col.field)?.options\"\r\n                      [style]=\"{ width: '100%', overflow: 'visible' }\"\r\n                      appendTo=\"body\"></p-dropdown>\r\n\r\n          <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\r\n                         *ngSwitchCase=\"colFilter(col.field)?.type === 'multiselect' ? col.field : ''\"\r\n                         [options]=\"colFilter(col.field)?.options\"\r\n                         [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\r\n                         defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\r\n          <input\r\n            (input)=\"dt.filter($any($event.target).value, col.field + '2filter', 'contains')\"\r\n            *ngSwitchCase=\"colFilter(col.field)?.type === 'datetext' ? col.field : ''\"\r\n            autofocus=\"\"\r\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n            pInputText\r\n            type=\"text\">\r\n        </th>\r\n      </tr>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowData let-rowIndex=\"rowIndex\" pTemplate=\"body\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\r\n    <tr\r\n      (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\r\n      *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\r\n      class=\"row_hover_highlight\">\r\n      <td [colSpan]=\"countVisibleColumns() + 1\">\r\n        <span>\r\n          <i\r\n            [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'in fa-fw in-chevron-down' : 'in fa-fw in-chevron-right'\"></i>\r\n          <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\r\n            )</span>\r\n        </span>\r\n      </td>\r\n    </tr>\r\n    <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\r\n        [ngClass]=\"{row_active: isRowActive(rowData)}\"\r\n        [pSelectableRow]=\"rowData\"\r\n        class=\"row\">\r\n      <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\r\n            'row_status_success': rowData.sdirparamstatecolor === 'success',\r\n            'row_status_error': rowData.sdirparamstatecolor === 'error',\r\n            'row_status_warning': rowData.sdirparamstatecolor === 'warning',\r\n            'row_status_critical': rowData.sdirparamstatecolor === 'critical',\r\n            'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue',\r\n            'row_status_pending': rowData.sdirparamstatecolor === 'pending'\r\n          }\" class=\"u-text_center\"\r\n          style=\"width: 44px\"\r\n      >\r\n        <!-- Native checkbox \u2014 no Angular component overhead (no NgModel/CVA/signals).\r\n             Uses Set for O(1) state lookup instead of p-tableCheckbox's O(M) isSelected(). -->\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isRowSelected(rowData)\"\r\n               [style.pointer-events]=\"(selectionMode === 'single' || (selectionMode === 'multiple' && checkboxSelection)) ? 'none' : 'auto'\"\r\n               (change)=\"_onCheckboxChange($event, rowData)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </td>\r\n      <td (click)=\"activeChange.emit(rowData)\"\r\n          *ngFor=\"let col of filteredColumns\"\r\n          class=\"u-overflow-visible\">\r\n        <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"p-table-tbody-content\" title>\r\n          {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\r\n        </div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\r\n\r\n    <div class=\"o-grid o-grid_no-gutter\">\r\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\r\n        <div *ngIf=\"isTextSearch\" class=\"c-form c-form_inline u-display-inline-block\">\r\n          <form class=\"c-label\">\r\n            <div class=\"input-wrapper u-margin-right-tiny\">\r\n              <input #searchTextInput\r\n                     (input)=\"localSearch(dt, searchText)\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     [ngModelOptions]=\"{standalone: true}\"\r\n                     autofocus=\"\"\r\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n                     pInputText\r\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\r\n                     required\r\n                     style=\"padding-right: 28px\"\r\n                     tabindex=\"1\"\r\n                     type=\"search\"\r\n              >\r\n              <button (click)=\"clear()\" class=\"button-reset\" type=\"reset\"\r\n                      [attr.title]=\"'Reset' | translate\">\r\n                <i class=\"in in-close\"></i>\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\r\n                                        [columns]=\"primaryColumns\"\r\n                                        [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\r\n        </div>\r\n\r\n        <button (click)=\"onFilterToolbar($event)\" *ngIf=\"toolbar.filter\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-filter\" title=\"{{'Service filter' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"treeAction.emit($event)\" *ngIf=\"toolbar.tree\" [disabled]=\"toolbar.tree.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-list\" title=\"{{'Filter by rubric' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-plus\" title=\"{{'Add' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"linkAction.emit($event)\" *ngIf=\"toolbar.link\" [disabled]=\"toolbar.link.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-link\" title=\"{{'Link' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <!--Todo: \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u043D\u0430 in-file-csv-->\r\n          <i class=\"in in-file-excel-outline\" title=\"{{'LOGS.SAVE_TO_CSV' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\r\n                [disabled]=\"toolbar.save.disabled\"\r\n                class=\"c-btn c-btn_primary c-btn_small\"\r\n                title=\"{{'Save' | translate}}\"\r\n        >\r\n          {{'Save' | translate}}\r\n        </button>\r\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\r\n                [disabled]=\"toolbar.groupEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'groupEdit' | translate}}\"></i>\r\n        </button>\r\n        <ng-content select=\"[buttons]\"></ng-content>\r\n        <button (click)=\"paramsEditAction.emit($event)\" *ngIf=\"toolbar.paramsEdit && toolbar.paramsEdit.active\"\r\n                [disabled]=\"toolbar.paramsEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'paramsEdit' | translate}}\"></i>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\r\n                [disabled]=\"toolbar.remove.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-trash\" title=\"{{'Delete' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-link-off\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"toggleNodes(true)\"\r\n                *ngIf=\"toolbar.expandAll\"\r\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                title=\"{{'Expand all' | translate}}\">\r\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\r\n          </svg>\r\n        </button>\r\n        <button (click)=\"toggleNodes(false)\"\r\n                *ngIf=\"toolbar.expandAll\"\r\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                title=\"{{'Collapse all' | translate}}\">\r\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path clip-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" fill-rule=\"evenodd\"/>\r\n          </svg>\r\n        </button>\r\n\r\n        <div *ngIf=\"toolbar.groupSort\"\r\n             class=\"c-btn-group\"\r\n             container=\"body\"\r\n             ngbDropdown>\r\n\r\n          <button class=\"c-btn c-btn_border-free c-btn_small\"\r\n                  id=\"dropdownGroupType\"\r\n                  ngbDropdownToggle\r\n                  title=\"{{'Change the way parameters are grouped' | translate}}\">\r\n            <i aria-hidden=\"true\" class=\"in in-object-group\"></i>\r\n            <i aria-hidden=\"true\" class=\"c-caret\"></i>\r\n          </button>\r\n\r\n          <ul aria-labelledby=\"dropdownGroupType\"\r\n              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\r\n              ngbDropdownMenu\r\n              role=\"menu\">\r\n            <li *ngFor=\"let item of toolbar.groupSort.label\"\r\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\r\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\r\n                ngbDropdownItem\r\n                role=\"menuitem\">\r\n              <a (click)=\"toggleMode(item.value)\" class=\"c-dropdown-menu__content\">\r\n                {{item.label}}\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-table>\r\n", 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}.row_status_pending{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-pending, #1f85ff)}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--ids-theme-btn-default-color, #FFFFFF)}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}.in-table-checkbox{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}\n"] }]
-    }], null, { columns: [{
+        args: [{ standalone: false, selector: 'in-table', providers: [TableService], template: "<span *ngIf=\"label\" class=\"c-label\">\r\n        {{label}}\r\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\r\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\r\n</span>\r\n<p-table #dt\r\n         (onFilter) = onFilter($event)\r\n         (onSort)=\"onSort()\"\r\n         (onStateRestore)=\"restoreSearchText()\"\r\n         (onStateSave)=\"stateSave($event)\"\r\n         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\r\n         [(selection)]=\"selectionValue\"\r\n         [class]=\"class\"\r\n         [columns]=\"filteredColumns\"\r\n         [customSort]=\"customSort\"\r\n         [dataKey]=\"dataKey || 'id'\"\r\n         [globalFilterFields]=\"globalFilteredColumns\"\r\n         [resizableColumns]=\"resizableColumns\"\r\n         [scrollHeight]=\"scrollHeight\"\r\n         [scrollable]=\"scrollable\"\r\n         [selectionMode]=\"selectionMode\"\r\n         [sortField]=\"sortField || 'id'\"\r\n         [sortOrder]=\"isAscending ? 1 : -1\"\r\n         [stateKey]=\"stateKey\"\r\n         [stateStorage]=\"'local'\"\r\n         [style]=\"style\"\r\n         [value]=\"values\"\r\n         [columnResizeMode]=\"columnResizeMode\"\r\n>\r\n  <ng-template *ngIf=\"colGroupTemplate\" let-columns pTemplate=\"colgroup\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"colGroupTemplate; context: {$implicit: { columns: columns}}\"></ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!colGroupTemplate\" let-columns pTemplate=\"colgroup\">\r\n    <colgroup *ngIf=\"!isMobileView\">\r\n      <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\r\n      <col *ngFor=\"let col of filteredColumns; let idx = index\">\r\n    </colgroup>\r\n  </ng-template>\r\n\r\n  <ng-template let-columns pTemplate=\"header\">\r\n    <ng-container *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\r\n          <!-- Native header checkbox bypasses dt.processedData (O(N log N) sort) used\r\n               by p-tableHeaderCheckbox.toggleRowsWithCheckbox() on select all. -->\r\n          <input type=\"checkbox\"\r\n                 class=\"in-table-checkbox\"\r\n                 [checked]=\"_isAllSelected()\"\r\n                 (change)=\"_onHeaderCheckboxChange($event)\"\r\n                 (click)=\"$event.stopPropagation()\"\r\n          >\r\n        </th>\r\n        <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\r\n            pResizableColumn>\r\n          <div class=\"p-table-thead-title\"\r\n               title=\"{{col.label | translate}}\">\r\n            {{col.label | translate}}\r\n          </div>\r\n          <p-sortIcon *ngIf=\"isSortIcon\" [field]=\"col.field\"\r\n                      class=\"u-position-absolute u-position-absolute-right c-sorticon\"\r\n                      style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\r\n        </th>\r\n      </tr>\r\n      <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\r\n        <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\r\n            style=\"width: 44px;\"></th>\r\n        <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\r\n          <input\r\n            (input)=\"dt.filter($any($event.target).value, col.field, 'contains')\"\r\n            *ngSwitchCase=\"colFilter(col.field)?.type === 'text' ? col.field : ''\"\r\n            autofocus=\"\"\r\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n            pInputText\r\n            type=\"text\">\r\n\r\n          <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\r\n                      *ngSwitchCase=\"colFilter(col.field)?.type === 'dropdown' ? col.field : ''\"\r\n                      [options]=\"colFilter(col.field)?.options\"\r\n                      [style]=\"{ width: '100%', overflow: 'visible' }\"\r\n                      appendTo=\"body\"></p-dropdown>\r\n\r\n          <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\r\n                         *ngSwitchCase=\"colFilter(col.field)?.type === 'multiselect' ? col.field : ''\"\r\n                         [options]=\"colFilter(col.field)?.options\"\r\n                         [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\r\n                         defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\r\n          <input\r\n            (input)=\"dt.filter($any($event.target).value, col.field + '2filter', 'contains')\"\r\n            *ngSwitchCase=\"colFilter(col.field)?.type === 'datetext' ? col.field : ''\"\r\n            autofocus=\"\"\r\n            class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n            pInputText\r\n            type=\"text\">\r\n        </th>\r\n      </tr>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowData let-rowIndex=\"rowIndex\" pTemplate=\"body\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\r\n    <tr\r\n      (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\r\n      *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\r\n      class=\"row_hover_highlight\">\r\n      <td [colSpan]=\"countVisibleColumns() + 1\">\r\n        <span>\r\n          <i\r\n            [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'in fa-fw in-chevron-down' : 'in fa-fw in-chevron-right'\"></i>\r\n          <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\r\n            )</span>\r\n        </span>\r\n      </td>\r\n    </tr>\r\n    <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\r\n        [ngClass]=\"{row_active: isRowActive(rowData)}\"\r\n        [pSelectableRow]=\"rowData\"\r\n        class=\"row\">\r\n      <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\r\n            'row_status_success': rowData.sdirparamstatecolor === 'success',\r\n            'row_status_error': rowData.sdirparamstatecolor === 'error',\r\n            'row_status_warning': rowData.sdirparamstatecolor === 'warning',\r\n            'row_status_critical': rowData.sdirparamstatecolor === 'critical',\r\n            'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue',\r\n            'row_status_pending': rowData.sdirparamstatecolor === 'pending'\r\n          }\" class=\"u-text_center\"\r\n          style=\"width: 44px\"\r\n      >\r\n        <!-- Native checkbox \u2014 no Angular component overhead (no NgModel/CVA/signals).\r\n             Uses Set for O(1) state lookup instead of p-tableCheckbox's O(M) isSelected(). -->\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isRowSelected(rowData)\"\r\n               [style.pointer-events]=\"(selectionMode === 'single' || (selectionMode === 'multiple' && checkboxSelection)) ? 'none' : 'auto'\"\r\n               (change)=\"_onCheckboxChange($event, rowData)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </td>\r\n      <td (click)=\"activeChange.emit(rowData)\"\r\n          *ngFor=\"let col of filteredColumns\"\r\n          class=\"u-overflow-visible\">\r\n        <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"p-table-tbody-content\" title>\r\n          {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\r\n        </div>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\r\n\r\n    <div class=\"o-grid o-grid_no-gutter\">\r\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\r\n        <div *ngIf=\"isTextSearch\" class=\"c-form c-form_inline u-display-inline-block\">\r\n          <form class=\"c-label\">\r\n            <div class=\"input-wrapper u-margin-right-tiny\">\r\n              <input #searchTextInput\r\n                     (input)=\"localSearch(dt, searchText)\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     [ngModelOptions]=\"{standalone: true}\"\r\n                     autofocus=\"\"\r\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n                     pInputText\r\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\r\n                     required\r\n                     style=\"padding-right: 28px\"\r\n                     tabindex=\"1\"\r\n                     type=\"search\"\r\n              >\r\n              <button (click)=\"clear()\" class=\"button-reset\" type=\"reset\"\r\n                      [attr.title]=\"'Reset' | translate\">\r\n                <i class=\"in in-close\"></i>\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\r\n                                        [columns]=\"primaryColumns\"\r\n                                        [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\r\n        </div>\r\n\r\n        <button (click)=\"onFilterToolbar($event)\" *ngIf=\"toolbar.filter\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-filter\" title=\"{{'Service filter' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"treeAction.emit($event)\" *ngIf=\"toolbar.tree\" [disabled]=\"toolbar.tree.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-list\" title=\"{{'Filter by rubric' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-plus\" title=\"{{'Add' | translate}}\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"linkAction.emit($event)\" *ngIf=\"toolbar.link\" [disabled]=\"toolbar.link.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-link\" title=\"{{'Link' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <!--Todo: \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u043D\u0430 in-file-csv-->\r\n          <i class=\"in in-file-excel-outline\" title=\"{{'LOGS.SAVE_TO_CSV' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\r\n                [disabled]=\"toolbar.save.disabled\"\r\n                class=\"c-btn c-btn_primary c-btn_small\"\r\n                title=\"{{'Save' | translate}}\"\r\n        >\r\n          {{'Save' | translate}}\r\n        </button>\r\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\r\n                [disabled]=\"toolbar.groupEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'groupEdit' | translate}}\"></i>\r\n        </button>\r\n        <ng-content select=\"[buttons]\"></ng-content>\r\n        <button (click)=\"paramsEditAction.emit($event)\" *ngIf=\"toolbar.paramsEdit && toolbar.paramsEdit.active\"\r\n                [disabled]=\"toolbar.paramsEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'paramsEdit' | translate}}\"></i>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\r\n                [disabled]=\"toolbar.remove.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-trash\" title=\"{{'Delete' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-link-off\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"toggleNodes(true)\"\r\n                *ngIf=\"toolbar.expandAll\"\r\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                title=\"{{'Expand all' | translate}}\">\r\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\r\n          </svg>\r\n        </button>\r\n        <button (click)=\"toggleNodes(false)\"\r\n                *ngIf=\"toolbar.expandAll\"\r\n                class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                title=\"{{'Collapse all' | translate}}\">\r\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path clip-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" fill-rule=\"evenodd\"/>\r\n          </svg>\r\n        </button>\r\n\r\n        <div *ngIf=\"toolbar.groupSort\"\r\n             class=\"c-btn-group\"\r\n             container=\"body\"\r\n             ngbDropdown>\r\n\r\n          <button class=\"c-btn c-btn_border-free c-btn_small\"\r\n                  id=\"dropdownGroupType\"\r\n                  ngbDropdownToggle\r\n                  title=\"{{'Change the way parameters are grouped' | translate}}\">\r\n            <i aria-hidden=\"true\" class=\"in in-object-group\"></i>\r\n            <i aria-hidden=\"true\" class=\"c-caret\"></i>\r\n          </button>\r\n\r\n          <ul aria-labelledby=\"dropdownGroupType\"\r\n              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\r\n              ngbDropdownMenu\r\n              role=\"menu\">\r\n            <li *ngFor=\"let item of toolbar.groupSort.label\"\r\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\r\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\r\n                ngbDropdownItem\r\n                role=\"menuitem\">\r\n              <a (click)=\"toggleMode(item.value)\" class=\"c-dropdown-menu__content\">\r\n                {{item.label}}\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-table>\r\n", 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}.row_status_pending{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-pending, #1f85ff)}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--ids-theme-btn-default-color, #FFFFFF)}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}:host-context(.theme-light) .in-table-checkbox,:host-context(.theme-contrast) .in-table-checkbox{border-color:#00000073}:host-context(.theme-light) .in-table-checkbox:hover:not(:checked):not(:indeterminate),:host-context(.theme-contrast) .in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:#000000b3}.in-table-checkbox{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}\n"] }]
+    }], () => [], { columns: [{
             type: Input
         }], values: [{
             type: Input
@@ -2850,11 +2901,11 @@ class TreeTableComponent {
             i0.ɵɵproperty("columns", ctx.visibleColumns())("resizableColumns", true)("scrollHeight", ctx.scrollHeight)("scrollable", ctx.scrollable)("selectionMode", ctx.selectionMode)("sortField", ctx.sortField || "id")("sortOrder", ctx.isAscending ? 1 : -1)("value", ctx.values);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.toolbar);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, i2$4.TreeTable, i2.PrimeTemplate, i2$4.TreeTableToggler, i2$4.TTSortableColumn, i2$4.TTSortIcon, i2$4.TTResizableColumn, i2$4.TTSelectableRow, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.RequiredValidator, i2$1.NgModel, i2$1.NgForm, TableColumnsMultiselectComponent, PropertyValuePipe, i1.TranslatePipe], styles: ["@charset \"UTF-8\";.p-sortable-column[_ngcontent-%COMP%]{cursor:pointer;position:relative}.in-table-checkbox[_ngcontent-%COMP%]{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox[_ngcontent-%COMP%]:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}.p-sortable-column-buttons[_ngcontent-%COMP%]{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.p-sortable-column-buttons[_ngcontent-%COMP%] > a[_ngcontent-%COMP%]{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible[_ngcontent-%COMP%]{overflow:visible!important}.button-reset[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset[_ngcontent-%COMP%]:hover{color:var(--colorIcon)}.input-wrapper[_ngcontent-%COMP%]{position:relative;display:flex;align-items:baseline}.c-input[_ngcontent-%COMP%]:not(:valid) ~ .button-reset[_ngcontent-%COMP%]{display:none}"] }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i1$2.NgTemplateOutlet, i2$4.TreeTable, i2.PrimeTemplate, i2$4.TreeTableToggler, i2$4.TTSortableColumn, i2$4.TTSortIcon, i2$4.TTResizableColumn, i2$4.TTSelectableRow, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.RequiredValidator, i2$1.NgModel, i2$1.NgForm, TableColumnsMultiselectComponent, PropertyValuePipe, i1.TranslatePipe], styles: ["@charset \"UTF-8\";.p-sortable-column[_ngcontent-%COMP%]{cursor:pointer;position:relative}.theme-light[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-light   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-contrast[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%], .theme-contrast   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]{border-color:#00000073}.theme-light[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-light   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-contrast[_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate), .theme-contrast   [_nghost-%COMP%]   .in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:#000000b3}.in-table-checkbox[_ngcontent-%COMP%]{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox[_ngcontent-%COMP%]:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox[_ngcontent-%COMP%]:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox[_ngcontent-%COMP%]:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}.p-sortable-column-buttons[_ngcontent-%COMP%]{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.p-sortable-column-buttons[_ngcontent-%COMP%] > a[_ngcontent-%COMP%]{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible[_ngcontent-%COMP%]{overflow:visible!important}.button-reset[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset[_ngcontent-%COMP%]:hover{color:var(--colorIcon)}.input-wrapper[_ngcontent-%COMP%]{position:relative;display:flex;align-items:baseline}.c-input[_ngcontent-%COMP%]:not(:valid) ~ .button-reset[_ngcontent-%COMP%]{display:none}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeTableComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'in-tree-table', template: "<p-treeTable #dt\r\n             [(selection)]=\"selectionValue\"\r\n             [class]=\"class\"\r\n             [columns]=\"visibleColumns()\"\r\n             [resizableColumns]=\"true\"\r\n             [scrollHeight]=\"scrollHeight\"\r\n             [scrollable]=\"scrollable\"\r\n             [selectionMode]=\"selectionMode\"\r\n             [sortField]=\"sortField || 'id'\"\r\n             [sortOrder]=\"isAscending ? 1 : -1\"\r\n             [style]=\"style\"\r\n             [value]=\"values\"\r\n             columnResizeMode=\"expand\"\r\n>\r\n  <ng-template let-columns pTemplate=\"colgroup\">\r\n    <colgroup>\r\n      <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\r\n      <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\r\n    </colgroup>\r\n  </ng-template>\r\n  <ng-template let-columns pTemplate=\"header\">\r\n    <tr>\r\n      <th *ngIf=\"checkboxSelection\">\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isAllSelected()\"\r\n               (change)=\"_onHeaderCheckboxChange($event)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </th>\r\n      <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\r\n          ttResizableColumn>\r\n        <div class=\"p-treetable-thead-title\" title=\"{{col.label | translate}}\">\r\n          {{col.label | translate}}\r\n        </div>\r\n        <p-treeTableSortIcon [field]=\"col.field\" class=\"p-sortable-column-buttons\"></p-treeTableSortIcon>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\r\n    <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\r\n      <td *ngIf=\"checkboxSelection\">\r\n        <!-- rowData = plain data; rowNode = PrimeNG wrapper used for selection cascade -->\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isRowSelected(rowData)\"\r\n               [indeterminate]=\"_isIndeterminate(rowData)\"\r\n               (change)=\"_onCheckboxChange($event, rowNode, rowData)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </td>\r\n      <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\r\n          class=\"_u-overflow-visible\">\r\n        <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\r\n          <ng-template [ngIf]=\"i == 0\">\r\n            <p-treeTableToggler  [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\r\n          </ng-template>\r\n          <div [ngClass]=\"{ 'p-treetable-tbody-content_has-toggler ': i == 0 }\"\r\n               class=\"p-treetable-tbody-content cell-content_hover\"\r\n               style=\"flex-grow: 1;\"\r\n               title=\"{{rowData | propertyValue: col.field}}\">\r\n            <ng-container *ngIf=\"!valueTemplate\">\r\n              <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\r\n              {{rowData | propertyValue: col.field}}\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\r\n\r\n    <div class=\"o-grid o-grid_no-gutter\">\r\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\r\n        <div class=\"c-form c-form_inline u-display-inline-block\">\r\n          <form class=\"c-label\">\r\n            <div class=\"input-wrapper u-margin-right-tiny\">\r\n              <input #searchTextInput\r\n                     (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     [ngModelOptions]=\"{standalone: true}\"\r\n                     autofocus=\"\"\r\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n                     pInputText\r\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\r\n                     required\r\n                     style=\"padding-right: 28px\"\r\n                     tabindex=\"1\"\r\n                     type=\"search\"\r\n              >\r\n              <button (click)=\"dt.filterGlobal($any($event.target).value, 'contains')\" class=\"button-reset\" type=\"reset\"\r\n                      [attr.title]=\"'Reset' | translate\">\r\n                <i class=\"in in-close\"></i>\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\r\n                                        [columns]=\"columns\"></in-table-columns-multiselect>\r\n        </div>\r\n\r\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-plus\" [title]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-folder-closed\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\r\n                [disabled]=\"toolbar.save.disabled\"\r\n                class=\"c-btn c-btn_primary c-btn_small\"\r\n                title=\"{{'Save' | translate}}\"\r\n        >\r\n          {{'Save' | translate}}\r\n        </button>\r\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\r\n                [disabled]=\"toolbar.groupEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'groupEdit' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\r\n                [disabled]=\"toolbar.remove.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-trash\" [title]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></i>\r\n        </button>\r\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-link-off\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n<!--          Todo: \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u043D\u0430 in-file-csv-->\r\n          <i class=\"in in-file-excel-outline\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\r\n        </button>\r\n        <button  *ngIf=\"toolbar.collapse\"\r\n                 class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                 (click)=\"collapse($event, dt)\"\r\n                 title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\r\n          <svg *ngIf=\"isCollapse\"  xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\r\n          </svg>\r\n          <svg *ngIf=\"!isCollapse\"  xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-treeTable>\r\n", styles: ["@charset \"UTF-8\";.p-sortable-column{cursor:pointer;position:relative}.in-table-checkbox{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}.p-sortable-column-buttons{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.p-sortable-column-buttons>a{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible{overflow:visible!important}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--colorIcon)}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}\n"] }]
+        args: [{ standalone: false, selector: 'in-tree-table', template: "<p-treeTable #dt\r\n             [(selection)]=\"selectionValue\"\r\n             [class]=\"class\"\r\n             [columns]=\"visibleColumns()\"\r\n             [resizableColumns]=\"true\"\r\n             [scrollHeight]=\"scrollHeight\"\r\n             [scrollable]=\"scrollable\"\r\n             [selectionMode]=\"selectionMode\"\r\n             [sortField]=\"sortField || 'id'\"\r\n             [sortOrder]=\"isAscending ? 1 : -1\"\r\n             [style]=\"style\"\r\n             [value]=\"values\"\r\n             columnResizeMode=\"expand\"\r\n>\r\n  <ng-template let-columns pTemplate=\"colgroup\">\r\n    <colgroup>\r\n      <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\r\n      <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\r\n    </colgroup>\r\n  </ng-template>\r\n  <ng-template let-columns pTemplate=\"header\">\r\n    <tr>\r\n      <th *ngIf=\"checkboxSelection\">\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isAllSelected()\"\r\n               (change)=\"_onHeaderCheckboxChange($event)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </th>\r\n      <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\r\n          ttResizableColumn>\r\n        <div class=\"p-treetable-thead-title\" title=\"{{col.label | translate}}\">\r\n          {{col.label | translate}}\r\n        </div>\r\n        <p-treeTableSortIcon [field]=\"col.field\" class=\"p-sortable-column-buttons\"></p-treeTableSortIcon>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\r\n    <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\r\n      <td *ngIf=\"checkboxSelection\">\r\n        <!-- rowData = plain data; rowNode = PrimeNG wrapper used for selection cascade -->\r\n        <input type=\"checkbox\"\r\n               class=\"in-table-checkbox\"\r\n               [checked]=\"_isRowSelected(rowData)\"\r\n               [indeterminate]=\"_isIndeterminate(rowData)\"\r\n               (change)=\"_onCheckboxChange($event, rowNode, rowData)\"\r\n               (click)=\"$event.stopPropagation()\"\r\n        >\r\n      </td>\r\n      <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\r\n          class=\"_u-overflow-visible\">\r\n        <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\r\n          <ng-template [ngIf]=\"i == 0\">\r\n            <p-treeTableToggler  [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\r\n          </ng-template>\r\n          <div [ngClass]=\"{ 'p-treetable-tbody-content_has-toggler ': i == 0 }\"\r\n               class=\"p-treetable-tbody-content cell-content_hover\"\r\n               style=\"flex-grow: 1;\"\r\n               title=\"{{rowData | propertyValue: col.field}}\">\r\n            <ng-container *ngIf=\"!valueTemplate\">\r\n              <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\r\n              {{rowData | propertyValue: col.field}}\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\r\n\r\n    <div class=\"o-grid o-grid_no-gutter\">\r\n      <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\r\n        <div class=\"c-form c-form_inline u-display-inline-block\">\r\n          <form class=\"c-label\">\r\n            <div class=\"input-wrapper u-margin-right-tiny\">\r\n              <input #searchTextInput\r\n                     (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     [ngModelOptions]=\"{standalone: true}\"\r\n                     autofocus=\"\"\r\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\r\n                     pInputText\r\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\r\n                     required\r\n                     style=\"padding-right: 28px\"\r\n                     tabindex=\"1\"\r\n                     type=\"search\"\r\n              >\r\n              <button (click)=\"dt.filterGlobal($any($event.target).value, 'contains')\" class=\"button-reset\" type=\"reset\"\r\n                      [attr.title]=\"'Reset' | translate\">\r\n                <i class=\"in in-close\"></i>\r\n              </button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\r\n                                        [columns]=\"columns\"></in-table-columns-multiselect>\r\n        </div>\r\n\r\n        <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-plus\" [title]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\r\n        </button>\r\n\r\n        <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n          <i class=\"in in-folder-closed\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\r\n                [disabled]=\"toolbar.save.disabled\"\r\n                class=\"c-btn c-btn_primary c-btn_small\"\r\n                title=\"{{'Save' | translate}}\"\r\n        >\r\n          {{'Save' | translate}}\r\n        </button>\r\n        <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\r\n                [disabled]=\"toolbar.groupEdit.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-pencil\" title=\"{{'groupEdit' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\r\n                [disabled]=\"toolbar.remove.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-trash\" [title]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></i>\r\n        </button>\r\n        <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\">\r\n          <i class=\"in in-link-off\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\r\n        </button>\r\n        <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\r\n                class=\"c-btn c-btn_border-free c-btn_small\"\r\n        >\r\n<!--          Todo: \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u043D\u0430 in-file-csv-->\r\n          <i class=\"in in-file-excel-outline\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\r\n        </button>\r\n        <button  *ngIf=\"toolbar.collapse\"\r\n                 class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\r\n                 (click)=\"collapse($event, dt)\"\r\n                 title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\r\n          <svg *ngIf=\"isCollapse\"  xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\r\n          </svg>\r\n          <svg *ngIf=\"!isCollapse\"  xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-treeTable>\r\n", styles: ["@charset \"UTF-8\";.p-sortable-column{cursor:pointer;position:relative}:host-context(.theme-light) .in-table-checkbox,:host-context(.theme-contrast) .in-table-checkbox{border-color:#00000073}:host-context(.theme-light) .in-table-checkbox:hover:not(:checked):not(:indeterminate),:host-context(.theme-contrast) .in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:#000000b3}.in-table-checkbox{appearance:none;-webkit-appearance:none;width:var(--p-checkbox-width, 20px);height:var(--p-checkbox-height, 20px);border:1px solid var(--p-checkbox-border-color, #B3B3B3);border-radius:var(--p-checkbox-border-radius, 2px);background:var(--p-checkbox-background, transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:border-color var(--p-checkbox-transition-duration, .15s),background var(--p-checkbox-transition-duration, .15s)}.in-table-checkbox:checked{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:checked:after{content:\"\";display:block;width:var(--p-checkbox-icon-size, 14px);height:var(--p-checkbox-icon-size, 14px);background-color:var(--p-checkbox-icon-checked-color, #ffffff);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E\");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}.in-table-checkbox:indeterminate{background:var(--p-checkbox-checked-background, #387382);border-color:var(--p-checkbox-checked-border-color, #387382)}.in-table-checkbox:indeterminate:after{content:\"\";display:block;width:calc(var(--p-checkbox-icon-size, 14px) - 2px);height:2px;background-color:var(--p-checkbox-icon-checked-color, #ffffff);margin:auto}.in-table-checkbox:hover:not(:checked):not(:indeterminate){border-color:var(--p-checkbox-hover-border-color, #999999)}.p-sortable-column-buttons{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.p-sortable-column-buttons>a{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible{overflow:visible!important}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--colorIcon)}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}\n"] }]
     }], null, { columns: [{
             type: Input
         }], scrollHeight: [{