@inspark/inspark-components 1.0.21 → 1.0.22

package/full/fesm2015/inspark-inspark-components.js

@@ -10,7 +10,7 @@ import { DynamicDialogInjector } from 'primeng/components/dynamicdialog/dynamicd
 import { Subject } from 'rxjs';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { Button, Menu, DropdownModule, Dropdown, TooltipModule, TreeTableModule, RadioButtonModule, BreadcrumbModule, TreeModule, SharedModule } from 'primeng/primeng';
+import { Button, Menu, DropdownModule, Dropdown, TooltipModule, TreeTableModule, AutoComplete, ButtonModule, RadioButtonModule, BreadcrumbModule, TreeModule, SharedModule } from 'primeng/primeng';
 export { BreadcrumbModule, RadioButtonModule, SharedModule, TreeModule } from 'primeng/primeng';
 import { Router } from '@angular/router';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -1094,9 +1094,9 @@ DropdownItem = __decorate([
         [attr.aria-label]="option.label"
         [ngStyle]="{'height': itemSize + 'px'}"
         [ngClass]="{'ui-dropdown-item ui-corner-all':true,
-                                                'ui-state-highlight': selected,
-                                                'ui-state-disabled':(option.disabled),
-                                                'ui-dropdown-item-empty': !option.label||option.label.length === 0}">
+                    'ui-state-highlight': selected,
+                    'ui-state-disabled':(option.disabled),
+                    'ui-dropdown-item-empty': !option.label||option.label.length === 0}">
       <span *ngIf="!template">{{option.label || 'empty'}}</span>
       <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
     </li>
@@ -1766,8 +1766,11 @@ let TableComponent = class TableComponent {
     toggleGroup(rowIndex, key) {
         this.groupInfo[key].isExpanded = !this.groupInfo[key].isExpanded;
     }
-    localSearch(dt, text) {
-        dt.filterGlobal(text, 'contains');
+    clear() {
+        this.dt.filterGlobal('', 'contains');
+    }
+    localSearch(dt, searchText) {
+        dt.filterGlobal(searchText, 'contains');
     }
     sortByGroup() {
         const g = this.groupMode;
@@ -1960,7 +1963,7 @@ __decorate([
 TableComponent = __decorate([
     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         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n         [(selection)]=\"selectionValue\"\n         [class]=\"class\"\n         [columns]=\"filteredColumns\"\n         [customSort]=\"customSort\"\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\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 *ngIf=\"isSortIcon\" [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-rowData let-rowIndex=\"rowIndex\" 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 *ngIf=\"isTextSearch\" class=\"c-form c-form_inline u-display-inline-block\">\n          <form class=\"c-label\">\n            <div class=\"input-wrapper u-margin-right-tiny\">\n              <input #searchTextInput\n                     (input)=\"localSearch(dt, $event.target.value)\"\n                     [(ngModel)]=\"searchText\"\n                     [ngModelOptions]=\"{standalone: true}\"\n                     autofocus=\"\"\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n                     pInputText\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n                     required\n                     style=\"padding-right: 28px\"\n                     tabindex=\"1\"\n                     type=\"search\"\n              >\n              <button (click)=\"localSearch(dt, $event.target.value)\" class=\"button-reset\" type=\"reset\"\n                      [attr.title]=\"'Reset' | translate\">\n                <i class=\"fa fa-close\"></i>\n              </button>\n            </div>\n          </form>\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)=\"paramsEditAction.emit($event)\" *ngIf=\"toolbar.paramsEdit && toolbar.paramsEdit.active\"\n                [disabled]=\"toolbar.paramsEdit.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-share-square-o\" title=\"{{'paramsEdit' | translate}}\"></i>\n        </button>\n\n\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 (click)=\"toggleNodes(true)\"\n                *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                title=\"{{'Expand all' | translate}}\">\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n          </svg>\n        </button>\n        <button (click)=\"toggleNodes(false)\"\n                *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                title=\"{{'Collapse all' | translate}}\">\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path clip-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" fill-rule=\"evenodd\"/>\n          </svg>\n        </button>\n\n        <div *ngIf=\"toolbar.groupSort\"\n             class=\"c-btn-group\"\n             container=\"body\"\n             ngbDropdown>\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              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n              ngbDropdownMenu\n              role=\"menu\">\n            <li *ngFor=\"let item of toolbar.groupSort.label\"\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n                ngbDropdownItem\n                role=\"menuitem\">\n              <a (click)=\"toggleMode(item.value)\" class=\"c-dropdown-menu__content\">\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         (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n         [(selection)]=\"selectionValue\"\n         [class]=\"class\"\n         [columns]=\"filteredColumns\"\n         [customSort]=\"customSort\"\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\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 *ngIf=\"isSortIcon\" [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-rowData let-rowIndex=\"rowIndex\" 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 *ngIf=\"isTextSearch\" class=\"c-form c-form_inline u-display-inline-block\">\n          <form class=\"c-label\">\n            <div class=\"input-wrapper u-margin-right-tiny\">\n              <input #searchTextInput\n                     (input)=\"localSearch(dt, searchText)\"\n                     [(ngModel)]=\"searchText\"\n                     [ngModelOptions]=\"{standalone: true}\"\n                     autofocus=\"\"\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n                     pInputText\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n                     required\n                     style=\"padding-right: 28px\"\n                     tabindex=\"1\"\n                     type=\"search\"\n              >\n              <button (click)=\"clear()\" class=\"button-reset\" type=\"reset\"\n                      [attr.title]=\"'Reset' | translate\">\n                <i class=\"fa fa-close\"></i>\n              </button>\n            </div>\n          </form>\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)=\"paramsEditAction.emit($event)\" *ngIf=\"toolbar.paramsEdit && toolbar.paramsEdit.active\"\n                [disabled]=\"toolbar.paramsEdit.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\">\n          <i class=\"fa fa-share-square-o\" title=\"{{'paramsEdit' | translate}}\"></i>\n        </button>\n\n\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 (click)=\"toggleNodes(true)\"\n                *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                title=\"{{'Expand all' | translate}}\">\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n          </svg>\n        </button>\n        <button (click)=\"toggleNodes(false)\"\n                *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                title=\"{{'Collapse all' | translate}}\">\n          <svg fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path clip-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" fill-rule=\"evenodd\"/>\n          </svg>\n        </button>\n\n        <div *ngIf=\"toolbar.groupSort\"\n             class=\"c-btn-group\"\n             container=\"body\"\n             ngbDropdown>\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              class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n              ngbDropdownMenu\n              role=\"menu\">\n            <li *ngFor=\"let item of toolbar.groupSort.label\"\n                [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n                class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n                ngbDropdownItem\n                role=\"menuitem\">\n              <a (click)=\"toggleMode(item.value)\" class=\"c-dropdown-menu__content\">\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}.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,#fff)}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}"]
     })
@@ -3061,9 +3064,9 @@ __decorate([
 TreeTableComponent = __decorate([
     Component({
         selector: 'in-tree-table',
-        template: "<p-treeTable #dt\n             [(selection)]=\"selectionValue\"\n             [class]=\"class\"\n             [columns]=\"visibleColumns()\"\n             [resizableColumns]=\"true\"\n             [scrollHeight]=\"scrollHeight\"\n             [scrollable]=\"scrollable\"\n             [selectionMode]=\"selectionMode\"\n             [sortField]=\"sortField || 'id'\"\n             [sortOrder]=\"isAscending ? 1 : -1\"\n             [style]=\"style\"\n             [value]=\"values\"\n             columnResizeMode=\"expand\"\n>\n  <ng-template let-columns pTemplate=\"colgroup\">\n    <colgroup>\n      <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\n      <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\n    </colgroup>\n  </ng-template>\n  <ng-template let-columns pTemplate=\"header\">\n    <tr>\n      <th *ngIf=\"checkboxSelection\">\n        <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n      </th>\n      <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\n          ttResizableColumn>\n        <div class=\"ui-treetable-thead-title\" title=\"{{col.label | translate}}\">\n          {{col.label | translate}}\n        </div>\n        <p-treeTableSortIcon [field]=\"col.field\" class=\"ui-sortable-column-buttons\"></p-treeTableSortIcon>\n      </th>\n    </tr>\n  </ng-template>\n\n  <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\n    <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\n      <td *ngIf=\"checkboxSelection\">\n        <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n      </td>\n      <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\n          class=\"_u-overflow-visible\">\n        <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\n          <ng-template [ngIf]=\"i == 0\">\n            <p-treeTableToggler  [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\n          </ng-template>\n          <div [ngClass]=\"{ 'ui-treetable-tbody-content_has-toggler ': i == 0 }\"\n               class=\"ui-treetable-tbody-content cell-content_hover\"\n               style=\"flex-grow: 1;\"\n               title=\"{{rowData | propertyValue: col.field}}\">\n            <ng-container *ngIf=\"!valueTemplate\">\n              <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\n              {{rowData | propertyValue: col.field}}\n            </ng-container>\n\n            <ng-container\n              *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n          </div>\n        </div>\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)=\"dt.filterGlobal($event.target.value, 'contains')\"\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]=\"columns\"></in-table-columns-multiselect>\n        </div>\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]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\n        </button>\n\n        <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-folder\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\n        </button>\n\n\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]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></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 (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=\"fas fa-file-csv\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\n        </button>\n        <button  *ngIf=\"toolbar.collapse\"\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)=\"collapse($event, dt)\"\n                 title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\n          <svg *ngIf=\"isCollapse\"  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          <svg *ngIf=\"!isCollapse\"  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      </div>\n    </div>\n  </ng-template>\n</p-treeTable>\n",
+        template: "<p-treeTable #dt\n             [(selection)]=\"selectionValue\"\n             [class]=\"class\"\n             [columns]=\"visibleColumns()\"\n             [resizableColumns]=\"true\"\n             [scrollHeight]=\"scrollHeight\"\n             [scrollable]=\"scrollable\"\n             [selectionMode]=\"selectionMode\"\n             [sortField]=\"sortField || 'id'\"\n             [sortOrder]=\"isAscending ? 1 : -1\"\n             [style]=\"style\"\n             [value]=\"values\"\n             columnResizeMode=\"expand\"\n>\n  <ng-template let-columns pTemplate=\"colgroup\">\n    <colgroup>\n      <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\n      <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\n    </colgroup>\n  </ng-template>\n  <ng-template let-columns pTemplate=\"header\">\n    <tr>\n      <th *ngIf=\"checkboxSelection\">\n        <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n      </th>\n      <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\n          ttResizableColumn>\n        <div class=\"ui-treetable-thead-title\" title=\"{{col.label | translate}}\">\n          {{col.label | translate}}\n        </div>\n        <p-treeTableSortIcon [field]=\"col.field\" class=\"ui-sortable-column-buttons\"></p-treeTableSortIcon>\n      </th>\n    </tr>\n  </ng-template>\n\n  <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\n    <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\n      <td *ngIf=\"checkboxSelection\">\n        <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n      </td>\n      <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\n          class=\"_u-overflow-visible\">\n        <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\n          <ng-template [ngIf]=\"i == 0\">\n            <p-treeTableToggler  [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\n          </ng-template>\n          <div [ngClass]=\"{ 'ui-treetable-tbody-content_has-toggler ': i == 0 }\"\n               class=\"ui-treetable-tbody-content cell-content_hover\"\n               style=\"flex-grow: 1;\"\n               title=\"{{rowData | propertyValue: col.field}}\">\n            <ng-container *ngIf=\"!valueTemplate\">\n              <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\n              {{rowData | propertyValue: col.field}}\n            </ng-container>\n\n            <ng-container\n              *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n          </div>\n        </div>\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          <form class=\"c-label\">\n            <div class=\"input-wrapper u-margin-right-tiny\">\n              <input #searchTextInput\n                     (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                     [(ngModel)]=\"searchText\"\n                     [ngModelOptions]=\"{standalone: true}\"\n                     autofocus=\"\"\n                     class=\"search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n                     pInputText\n                     placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n                     required\n                     style=\"padding-right: 28px\"\n                     tabindex=\"1\"\n                     type=\"search\"\n              >\n              <button (click)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"button-reset\" type=\"reset\"\n                      [attr.title]=\"'Reset' | translate\">\n                <i class=\"fa fa-close\"></i>\n              </button>\n            </div>\n          </form>\n        </div>\n        <div class=\"c-btn c-btn_border-free c-btn_small\">\n          <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n                                        [columns]=\"columns\"></in-table-columns-multiselect>\n        </div>\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]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\n        </button>\n\n        <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\n                class=\"c-btn c-btn_border-free c-btn_small\"\n        >\n          <i class=\"fa fa-folder\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\n        </button>\n\n\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]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></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 (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=\"fas fa-file-csv\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\n        </button>\n        <button  *ngIf=\"toolbar.collapse\"\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)=\"collapse($event, dt)\"\n                 title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\n          <svg *ngIf=\"isCollapse\"  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          <svg *ngIf=\"!isCollapse\"  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      </div>\n    </div>\n  </ng-template>\n</p-treeTable>\n",
         entryComponents: [],
-        styles: ["@charset \"UTF-8\";.ui-sortable-column{cursor:pointer;position:relative}.ui-sortable-column-buttons{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.ui-sortable-column-buttons>a{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible{overflow:visible!important}"]
+        styles: ["@charset \"UTF-8\";.ui-sortable-column{cursor:pointer;position:relative}.ui-sortable-column-buttons{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.ui-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}"]
     })
 ], TreeTableComponent);
 let TreeTableComponentModule = class TreeTableComponentModule {
@@ -3536,11 +3539,311 @@ InputGroupComponent = InputGroupComponent_1 = __decorate([
     })
 ], InputGroupComponent);
 
+var AutoCompleteComponent_1;
+let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponent extends AutoComplete {
+    constructor() {
+        super(...arguments);
+        this.minLength = 1;
+        this.delay = 300;
+        this.type = 'text';
+        this.autoZIndex = true;
+        this.baseZIndex = 0;
+        this.dropdownIcon = "pi pi-caret-down";
+        this.unique = true;
+        this.completeMethod = new EventEmitter();
+        this.onSelect = new EventEmitter();
+        this.onUnselect = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.onBlur = new EventEmitter();
+        this.onDropdownClick = new EventEmitter();
+        this.onClear = new EventEmitter();
+        this.onKeyUp = new EventEmitter();
+        this.scrollHeight = '200px';
+        this.dropdownMode = 'blank';
+        this.immutable = true;
+        this.showTransitionOptions = '225ms ease-out';
+        this.hideTransitionOptions = '195ms ease-in';
+        this.autocomplete = 'off';
+    }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this.itemTemplate = item.template;
+                    break;
+                case 'selectedItem':
+                    this.selectedItemTemplate = item.template;
+                    break;
+                default:
+                    this.itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "minLength", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "delay", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AutoCompleteComponent.prototype, "style", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AutoCompleteComponent.prototype, "panelStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "styleClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "panelStyleClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AutoCompleteComponent.prototype, "inputStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "inputId", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "inputStyleClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "maxlength", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "name", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "required", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AutoCompleteComponent.prototype, "appendTo", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "autoHighlight", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "forceSelection", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "type", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "autoZIndex", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "baseZIndex", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "ariaLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "dropdownIcon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "unique", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "completeMethod", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onSelect", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onUnselect", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onFocus", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onBlur", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onDropdownClick", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onClear", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AutoCompleteComponent.prototype, "onKeyUp", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "field", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "scrollHeight", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "dropdown", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "dropdownMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "multiple", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], AutoCompleteComponent.prototype, "tabindex", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "dataKey", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "emptyMessage", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "immutable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "showTransitionOptions", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "hideTransitionOptions", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], AutoCompleteComponent.prototype, "autofocus", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AutoCompleteComponent.prototype, "autocomplete", void 0);
+__decorate([
+    ViewChild('in', { static: false }),
+    __metadata("design:type", ElementRef)
+], AutoCompleteComponent.prototype, "inputEL", void 0);
+__decorate([
+    ViewChild('multiIn', { static: false }),
+    __metadata("design:type", ElementRef)
+], AutoCompleteComponent.prototype, "multiInputEL", void 0);
+__decorate([
+    ViewChild('multiContainer', { static: false }),
+    __metadata("design:type", ElementRef)
+], AutoCompleteComponent.prototype, "multiContainerEL", void 0);
+__decorate([
+    ViewChild('ddBtn', { static: false }),
+    __metadata("design:type", ElementRef)
+], AutoCompleteComponent.prototype, "dropdownButton", void 0);
+__decorate([
+    ContentChildren(InsparkTemplate),
+    __metadata("design:type", QueryList)
+], AutoCompleteComponent.prototype, "templates", void 0);
+AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
+    Component({
+        selector: 'in-autocomplete',
+        template: "<span [ngClass]=\"{'ui-autocomplete ui-widget':true,'ui-autocomplete-dd':dropdown,'ui-autocomplete-multiple':multiple}\"\n      [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\"\n                   [class]=\"inputStyleClass\" [autocomplete]=\"autocomplete\" [attr.required]=\"required\" [attr.name]=\"name\"\n                   [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input'\"\n                   [value]=\"inputFieldValue\" aria-autocomplete=\"list\" role=\"combobox\"\n                   [attr.aria-expanded]=\"overlayVisible\" aria-haspopup=\"true\"\n                   [attr.aria-activedescendant]=\"'p-highlighted-option'\"\n                   (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\"\n                   (keyup)=\"onKeyup($event)\" [attr.autofocus]=\"autofocus\" (focus)=\"onInputFocus($event)\"\n                   (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n                   [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\"\n                   [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\"\n                   [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n            ><ul *ngIf=\"multiple\" #multiContainer\n                 class=\"ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all\"\n                 [ngClass]=\"{'ui-state-disabled':disabled,'ui-state-focus':focus}\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"ui-autocomplete-token ui-state-highlight ui-corner-all\">\n                    <span class=\"ui-autocomplete-token-icon pi pi-fw pi-times\" (click)=\"removeItem(token)\"\n                          *ngIf=\"!disabled\"></span>\n                    <span *ngIf=\"!selectedItemTemplate\"\n                          class=\"ui-autocomplete-token-label\">{{resolveFieldData(val)}}</span>\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                </li>\n                <li class=\"ui-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\"\n                           [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\"\n                           [attr.maxlength]=\"maxlength\" (input)=\"onInput($event)\" (click)=\"onInputClick($event)\"\n                           (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\"\n                           [attr.autofocus]=\"autofocus\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\"\n                           (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" [autocomplete]=\"autocomplete\"\n                           [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [attr.aria-label]=\"ariaLabel\"\n                           [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n                           aria-autocomplete=\"list\" role=\"combobox\" [attr.aria-expanded]=\"overlayVisible\"\n                           aria-haspopup=\"true\" [attr.aria-activedescendant]=\"'p-highlighted-option'\">\n                </li>\n            </ul\n            ><i *ngIf=\"loading\" class=\"ui-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\"\n                                                                                                 pButton\n                                                                                                 [icon]=\"dropdownIcon\"\n                                                                                                 class=\"ui-autocomplete-dropdown\"\n                                                                                                 [disabled]=\"disabled\"\n                                                                                                 (click)=\"handleDropdownClick($event)\"\n                                                                                                 *ngIf=\"dropdown\"\n                                                                                                 [attr.tabindex]=\"tabindex\"></button>\n            <div #panel *ngIf=\"overlayVisible\"\n                 [ngClass]=\"['ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow']\"\n                 [style.max-height]=\"scrollHeight\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\"\n                 [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                 (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                 (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\">\n                <ul role=\"listbox\"\n                    class=\"ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\">\n                    <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\"\n                        [ngClass]=\"{'ui-autocomplete-list-item ui-corner-all':true,'ui-state-highlight':(highlightOption==option)}\"\n                        (mouseenter)=\"highlightOption=option\" (mouseleave)=\"highlightOption=null\"\n                        [id]=\"highlightOption == option ? 'p-highlighted-option':''\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{resolveFieldData(option)}}</span>\n                        <ng-container\n                          *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\"\n                        class=\"ui-autocomplete-emptymessage ui-autocomplete-list-item ui-corner-all\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n",
+        animations: [
+            trigger('overlayAnimation', [
+                state('void', style({
+                    transform: 'translateY(5%)',
+                    opacity: 0
+                })),
+                state('visible', style({
+                    transform: 'translateY(0)',
+                    opacity: 1
+                })),
+                transition('void => visible', animate('{{showTransitionParams}}')),
+                transition('visible => void', animate('{{hideTransitionParams}}'))
+            ])
+        ],
+        providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AutoCompleteComponent_1),
+                multi: true
+            }],
+        styles: [""]
+    })
+], AutoCompleteComponent);
+let AutoCompleteComponentModule = class AutoCompleteComponentModule {
+};
+AutoCompleteComponentModule = __decorate([
+    NgModule({
+        declarations: [
+            AutoCompleteComponent,
+        ],
+        imports: [
+            TooltipModule,
+            ScrollingModule,
+            CommonModule,
+            PrimengComponentsModule,
+            ButtonModule,
+        ],
+        exports: [
+            AutoCompleteComponent,
+        ],
+        entryComponents: [
+            AutoCompleteComponent,
+        ]
+    })
+], AutoCompleteComponentModule);
+
 let InsparkComponentsModule = class InsparkComponentsModule {
 };
 InsparkComponentsModule = __decorate([
     NgModule({
         imports: [
+            AutoCompleteComponentModule,
             FormsModule,
             ReactiveFormsModule,
             CommonModule,
@@ -3584,7 +3887,7 @@ InsparkComponentsModule = __decorate([
             RadiobuttonComponent,
             ObjectTreeComponent,
             ContentToggleComponent,
-            InputGroupComponent,
+            InputGroupComponent
         ],
         exports: [
             ButtonComponent,
@@ -3619,7 +3922,8 @@ InsparkComponentsModule = __decorate([
             RadiobuttonComponent,
             ObjectTreeComponent,
             ContentToggleComponent,
-            InputGroupComponent
+            InputGroupComponent,
+            AutoCompleteComponentModule
         ],
         entryComponents: [SelectListComponent, ModalInputTextComponent],
         schemas: [NO_ERRORS_SCHEMA]
@@ -3634,5 +3938,5 @@ InsparkComponentsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbComponent, ButtonComponent, CheckboxComponent, CommunicationService, ComponentContainerComponent, ContentToggleComponent, DropdownComponentModule, EmptyComponent, FileComponent, InlineMessageComponent, InputTextComponent, InsparkComponentsModule, InsparkDialogService, InsparkHeaderComponent, InsparkMessageService, InsparkStickyComponent, InsparkTemplate, LinkComponent, ModalInputTextComponent, ObjectTreeComponent, PanelComponent, PipesModule, PreloaderComponent, RadiobuttonComponent, SelectButtonComponent, SelectListComponent, StatusCircleComponent, SvgComponent, SwitcherComponent, TableComponentModule, TextareaComponent, ToolbarComponent, TooltipComponent, TreeTableComponentModule, DropdownItem as ɵa, DropdownComponent as ɵb, TableComponent as ɵc, TreeTableComponent as ɵd, PropertyValuePipe as ɵe, ShortToFullWeekdayPipe as ɵf, NumToShortWeekdayPipe as ɵg, FormatNumToTime as ɵh, InDate as ɵi, SafeUrlPipe as ɵj, SortByPipe as ɵk, PrimengComponentsModule as ɵl, TableColumnsMultiselectComponent as ɵm, TableMenuOverlayComponent as ɵn, TableClickOutsideDirective as ɵo, InputGroupComponent as ɵp };
+export { AutoCompleteComponentModule, BreadcrumbComponent, ButtonComponent, CheckboxComponent, CommunicationService, ComponentContainerComponent, ContentToggleComponent, DropdownComponentModule, EmptyComponent, FileComponent, InlineMessageComponent, InputTextComponent, InsparkComponentsModule, InsparkDialogService, InsparkHeaderComponent, InsparkMessageService, InsparkStickyComponent, InsparkTemplate, LinkComponent, ModalInputTextComponent, ObjectTreeComponent, PanelComponent, PipesModule, PreloaderComponent, RadiobuttonComponent, SelectButtonComponent, SelectListComponent, StatusCircleComponent, SvgComponent, SwitcherComponent, TableComponentModule, TextareaComponent, ToolbarComponent, TooltipComponent, TreeTableComponentModule, DropdownItem as ɵa, DropdownComponent as ɵb, TableComponent as ɵc, TreeTableComponent as ɵd, AutoCompleteComponent as ɵe, PropertyValuePipe as ɵf, ShortToFullWeekdayPipe as ɵg, NumToShortWeekdayPipe as ɵh, FormatNumToTime as ɵi, InDate as ɵj, SafeUrlPipe as ɵk, SortByPipe as ɵl, PrimengComponentsModule as ɵm, TableColumnsMultiselectComponent as ɵn, TableMenuOverlayComponent as ɵo, TableClickOutsideDirective as ɵp, InputGroupComponent as ɵq };
 //# sourceMappingURL=inspark-inspark-components.js.map