@inspark/inspark-components 1.0.21 → 1.0.23

package/full/fesm5/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 { Menu, Button, DropdownModule, Dropdown, TooltipModule, TreeTableModule, RadioButtonModule, BreadcrumbModule, TreeModule, SharedModule } from 'primeng/primeng';
+import { Menu, Button, 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';
@@ -696,14 +696,19 @@ var InputTextComponent = /** @class */ (function () {
         this.error = null;
         this.size = 100000;
         this.maxlength = 100000;
-        this.width = 'auto';
+        this.width = '';
+        this.display = false;
+        this.large = true;
+        this.small = false;
         this.placeholder = '';
         this.id = null;
         this.testId = null;
         this.opacity = true;
         this.shadow = false;
+        this.right = false;
         this.focus = new EventEmitter();
         this.blur = new EventEmitter();
+        this.onClick = new EventEmitter();
         this.propagateChange = function (_) {
         };
     }
@@ -734,6 +739,9 @@ var InputTextComponent = /** @class */ (function () {
         // Store the provided function as an internal method.
         this.onTouched = fn;
     };
+    InputTextComponent.prototype.clear = function () {
+        this.onClick.emit('');
+    };
     InputTextComponent.prototype.onChange = function (_) {
         if (this.type === 'number') {
             this.propagateChange(+this.value);
@@ -777,6 +785,18 @@ var InputTextComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], InputTextComponent.prototype, "width", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "display", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "large", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "small", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -801,6 +821,10 @@ var InputTextComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], InputTextComponent.prototype, "shadow", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "right", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -825,10 +849,14 @@ var InputTextComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], InputTextComponent.prototype, "blur", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], InputTextComponent.prototype, "onClick", void 0);
     InputTextComponent = InputTextComponent_1 = __decorate([
         Component({
             selector: 'in-input-text',
-            template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n    <span *ngIf=\"label\" class=\"c-label__content\">\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        *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n        class=\"constraints-message__warning u-text_uppercase\">\n                     {{'maxlength: ' | translate}} {{maxlength}}</span>\n    </span>\n  <input (blur)=\"this.blur.emit($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"this.focus.emit($event)\"\n         (input)=\"onChange($event)\"\n         [(ngModel)]=\"value\"\n         [autocomplete]=\"autocomplete? 'on':'off'\"\n         [disabled]=\"disabled\"\n         [id]=\"id\"\n         [maxlength]=\"maxlength\"\n         [name]=\"name\"\n         [ngClass]=\"{'c-input_opaque' : opacity === false,\n                     'c-input_shadowed' : shadow}\"\n         [placeholder]=\"placeholder\"\n         [required]=\"required\"\n         [size]=\"size\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [step]=\"step\"\n         class=\"c-input c-input_large field_{{id}}\"\n         type=\"text\"\n  />\n</label>\n",
+            template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n    <span *ngIf=\"label\" class=\"c-label__content\">\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        *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n        class=\"constraints-message__warning u-text_uppercase\">\n                     {{'maxlength: ' | translate}} {{maxlength}}</span>\n    </span>\n  <form class=\"c-label\">\n    <div class=\"input-wrapper u-margin-right-tiny\" [ngClass]=\"{'u-margin-right-tiny': right}\">\n      <input (blur)=\"this.blur.emit($event)\"\n             (change)=\"onChange($event)\"\n             (focus)=\"this.focus.emit($event)\"\n             (input)=\"onChange($event)\"\n             [(ngModel)]=\"value\"\n             [autocomplete]=\"autocomplete? 'on':'off'\"\n             [disabled]=\"disabled\"\n             [id]=\"id\"\n             [maxlength]=\"maxlength\"\n             [name]=\"name\"\n             [ngClass]=\"{'c-input_opaque' : opacity === false,\n                     'c-input_shadowed' : shadow,\n                     'c-input_large' : large,\n                     'c-input_small' : small}\"\n             [ngModelOptions]=\"{standalone: true}\"\n             [placeholder]=\"placeholder\"\n             [required]=\"required\"\n             [size]=\"size\"\n             [min]=\"min\"\n             [max]=\"max\"\n             [step]=\"step\"\n             class=\"search-box c-input c-input_large c-input_small field_{{id}}\"\n             type=\"search\"\n             autofocus=\"\"\n             tabindex=\"1\"\n             style=\"padding-right: 28px\">\n      <button (click)=\"clear()\"\n              class=\"button-reset empty\"\n              [ngClass]=\"{empty: display}\"\n              type=\"reset\"\n              [attr.title]=\"'Reset' | translate\">\n        <i class=\"fa fa-close\"></i>\n      </button>\n    </div>\n  </form>\n</label>\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -836,7 +864,7 @@ var InputTextComponent = /** @class */ (function () {
                     multi: true,
                 }
             ],
-            styles: ["@charset \"UTF-8\";.label{display:inline-block;margin-bottom:0}.c-input{height:36px}.c-input_opaque{background:var(--colorBgLevel3)}.c-input_shadowed{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.constraints-message__warning{color:red}"]
+            styles: ["@charset \"UTF-8\";.label{display:inline-block;margin-bottom:0}.c-input{height:36px}.c-input_opaque{background:var(--colorBgLevel3)}.c-input_shadowed{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.constraints-message__warning{color:red}.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)}.empty{display:none}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}"]
         })
     ], InputTextComponent);
     return InputTextComponent;
@@ -1132,7 +1160,7 @@ var DropdownItem = /** @class */ (function () {
     DropdownItem = __decorate([
         Component({
             selector: 'p-dropdownItem',
-            template: "\n    <li (click)=\"onOptionClick($event)\" role=\"option\"\n        [attr.aria-label]=\"option.label\"\n        [ngStyle]=\"{'height': itemSize + 'px'}\"\n        [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                                                'ui-state-highlight': selected,\n                                                'ui-state-disabled':(option.disabled),\n                                                'ui-dropdown-item-empty': !option.label||option.label.length === 0}\">\n      <span *ngIf=\"!template\">{{option.label || 'empty'}}</span>\n      <ng-container *ngTemplateOutlet=\"template; context: {$implicit: option}\"></ng-container>\n    </li>\n  "
+            template: "\n    <li (click)=\"onOptionClick($event)\" role=\"option\"\n        [attr.aria-label]=\"option.label\"\n        [ngStyle]=\"{'height': itemSize + 'px'}\"\n        [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n                    'ui-state-highlight': selected,\n                    'ui-state-disabled':(option.disabled),\n                    'ui-dropdown-item-empty': !option.label||option.label.length === 0}\">\n      <span *ngIf=\"!template\">{{option.label || 'empty'}}</span>\n      <ng-container *ngTemplateOutlet=\"template; context: {$implicit: option}\"></ng-container>\n    </li>\n  "
         })
     ], DropdownItem);
     return DropdownItem;
@@ -1835,8 +1863,11 @@ var TableComponent = /** @class */ (function () {
     TableComponent.prototype.toggleGroup = function (rowIndex, key) {
         this.groupInfo[key].isExpanded = !this.groupInfo[key].isExpanded;
     };
-    TableComponent.prototype.localSearch = function (dt, text) {
-        dt.filterGlobal(text, 'contains');
+    TableComponent.prototype.clear = function () {
+        this.dt.filterGlobal('', 'contains');
+    };
+    TableComponent.prototype.localSearch = function (dt, searchText) {
+        dt.filterGlobal(searchText, 'contains');
     };
     TableComponent.prototype.sortByGroup = function () {
         var g = this.groupMode;
@@ -2029,7 +2060,7 @@ var TableComponent = /** @class */ (function () {
     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}"]
         })
@@ -3178,9 +3209,9 @@ var TreeTableComponent = /** @class */ (function () {
     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);
     return TreeTableComponent;
@@ -3670,12 +3701,320 @@ var InputGroupComponent = /** @class */ (function () {
     return InputGroupComponent;
 }());
 
+var AutoCompleteComponent = /** @class */ (function (_super) {
+    __extends(AutoCompleteComponent, _super);
+    function AutoCompleteComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _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';
+        return _this;
+    }
+    AutoCompleteComponent_1 = AutoCompleteComponent;
+    AutoCompleteComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        this.templates.forEach(function (item) {
+            switch (item.getType()) {
+                case 'item':
+                    _this.itemTemplate = item.template;
+                    break;
+                case 'selectedItem':
+                    _this.selectedItemTemplate = item.template;
+                    break;
+                default:
+                    _this.itemTemplate = item.template;
+                    break;
+            }
+        });
+    };
+    var AutoCompleteComponent_1;
+    __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(function () { return AutoCompleteComponent_1; }),
+                    multi: true
+                }],
+            styles: [""]
+        })
+    ], AutoCompleteComponent);
+    return AutoCompleteComponent;
+}(AutoComplete));
+var AutoCompleteComponentModule = /** @class */ (function () {
+    function AutoCompleteComponentModule() {
+    }
+    AutoCompleteComponentModule = __decorate([
+        NgModule({
+            declarations: [
+                AutoCompleteComponent,
+            ],
+            imports: [
+                TooltipModule,
+                ScrollingModule,
+                CommonModule,
+                PrimengComponentsModule,
+                ButtonModule,
+            ],
+            exports: [
+                AutoCompleteComponent,
+            ],
+            entryComponents: [
+                AutoCompleteComponent,
+            ]
+        })
+    ], AutoCompleteComponentModule);
+    return AutoCompleteComponentModule;
+}());
+
 var InsparkComponentsModule = /** @class */ (function () {
     function InsparkComponentsModule() {
     }
     InsparkComponentsModule = __decorate([
         NgModule({
             imports: [
+                AutoCompleteComponentModule,
                 FormsModule,
                 ReactiveFormsModule,
                 CommonModule,
@@ -3719,7 +4058,7 @@ var InsparkComponentsModule = /** @class */ (function () {
                 RadiobuttonComponent,
                 ObjectTreeComponent,
                 ContentToggleComponent,
-                InputGroupComponent,
+                InputGroupComponent
             ],
             exports: [
                 ButtonComponent,
@@ -3754,7 +4093,8 @@ var InsparkComponentsModule = /** @class */ (function () {
                 RadiobuttonComponent,
                 ObjectTreeComponent,
                 ContentToggleComponent,
-                InputGroupComponent
+                InputGroupComponent,
+                AutoCompleteComponentModule
             ],
             entryComponents: [SelectListComponent, ModalInputTextComponent],
             schemas: [NO_ERRORS_SCHEMA]
@@ -3771,5 +4111,5 @@ var InsparkComponentsModule = /** @class */ (function () {
  * 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