@inspark/inspark-components 1.0.21 → 1.0.23

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

@@ -891,14 +891,19 @@
             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 core.EventEmitter();
             this.blur = new core.EventEmitter();
+            this.onClick = new core.EventEmitter();
             this.propagateChange = function (_) {
             };
         }
@@ -929,6 +934,9 @@
             // 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);
@@ -972,6 +980,18 @@
             core.Input(),
             __metadata("design:type", Object)
         ], InputTextComponent.prototype, "width", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InputTextComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InputTextComponent.prototype, "large", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InputTextComponent.prototype, "small", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -996,6 +1016,10 @@
             core.Input(),
             __metadata("design:type", Object)
         ], InputTextComponent.prototype, "shadow", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InputTextComponent.prototype, "right", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -1020,10 +1044,14 @@
             core.Output(),
             __metadata("design:type", core.EventEmitter)
         ], InputTextComponent.prototype, "blur", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], InputTextComponent.prototype, "onClick", void 0);
         InputTextComponent = InputTextComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
@@ -1031,7 +1059,7 @@
                         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;
@@ -1327,7 +1355,7 @@
         DropdownItem = __decorate([
             core.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;
@@ -2030,8 +2058,11 @@
         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;
@@ -2224,7 +2255,7 @@
         TableComponent = __decorate([
             core.Component({
                 selector: 'in-table',
-                template: "<span *ngIf=\"label\" class=\"c-label\">\n        {{label}}\n  <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n  <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n</span>\n<p-table #dt\n         (onSort)=\"onSort()\"\n         (onStateRestore)=\"restoreSearchText()\"\n         (onStateSave)=\"stateSave($event)\"\n         (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}"]
             })
@@ -3373,9 +3404,9 @@
         TreeTableComponent = __decorate([
             core.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;
@@ -3865,12 +3896,320 @@
         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 core.EventEmitter();
+            _this.onSelect = new core.EventEmitter();
+            _this.onUnselect = new core.EventEmitter();
+            _this.onFocus = new core.EventEmitter();
+            _this.onBlur = new core.EventEmitter();
+            _this.onDropdownClick = new core.EventEmitter();
+            _this.onClear = new core.EventEmitter();
+            _this.onKeyUp = new core.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([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "minLength", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "delay", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutoCompleteComponent.prototype, "style", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutoCompleteComponent.prototype, "panelStyle", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "styleClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "panelStyleClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutoCompleteComponent.prototype, "inputStyle", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "inputId", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "inputStyleClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "maxlength", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "name", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "required", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "size", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutoCompleteComponent.prototype, "appendTo", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "autoHighlight", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "forceSelection", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "type", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "autoZIndex", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "baseZIndex", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "ariaLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "ariaLabelledBy", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "dropdownIcon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "unique", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "completeMethod", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onSelect", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onUnselect", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onFocus", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onBlur", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onDropdownClick", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onClear", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AutoCompleteComponent.prototype, "onKeyUp", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "scrollHeight", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "dropdown", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "dropdownMode", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "multiple", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], AutoCompleteComponent.prototype, "tabindex", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "dataKey", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "emptyMessage", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "immutable", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "showTransitionOptions", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "hideTransitionOptions", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutoCompleteComponent.prototype, "autofocus", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AutoCompleteComponent.prototype, "autocomplete", void 0);
+        __decorate([
+            core.ViewChild('in', { static: false }),
+            __metadata("design:type", core.ElementRef)
+        ], AutoCompleteComponent.prototype, "inputEL", void 0);
+        __decorate([
+            core.ViewChild('multiIn', { static: false }),
+            __metadata("design:type", core.ElementRef)
+        ], AutoCompleteComponent.prototype, "multiInputEL", void 0);
+        __decorate([
+            core.ViewChild('multiContainer', { static: false }),
+            __metadata("design:type", core.ElementRef)
+        ], AutoCompleteComponent.prototype, "multiContainerEL", void 0);
+        __decorate([
+            core.ViewChild('ddBtn', { static: false }),
+            __metadata("design:type", core.ElementRef)
+        ], AutoCompleteComponent.prototype, "dropdownButton", void 0);
+        __decorate([
+            core.ContentChildren(InsparkTemplate),
+            __metadata("design:type", core.QueryList)
+        ], AutoCompleteComponent.prototype, "templates", void 0);
+        AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
+            core.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: [
+                    animations.trigger('overlayAnimation', [
+                        animations.state('void', animations.style({
+                            transform: 'translateY(5%)',
+                            opacity: 0
+                        })),
+                        animations.state('visible', animations.style({
+                            transform: 'translateY(0)',
+                            opacity: 1
+                        })),
+                        animations.transition('void => visible', animations.animate('{{showTransitionParams}}')),
+                        animations.transition('visible => void', animations.animate('{{hideTransitionParams}}'))
+                    ])
+                ],
+                providers: [{
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return AutoCompleteComponent_1; }),
+                        multi: true
+                    }],
+                styles: [""]
+            })
+        ], AutoCompleteComponent);
+        return AutoCompleteComponent;
+    }(primeng.AutoComplete));
+    var AutoCompleteComponentModule = /** @class */ (function () {
+        function AutoCompleteComponentModule() {
+        }
+        AutoCompleteComponentModule = __decorate([
+            core.NgModule({
+                declarations: [
+                    AutoCompleteComponent,
+                ],
+                imports: [
+                    primeng.TooltipModule,
+                    scrolling.ScrollingModule,
+                    common.CommonModule,
+                    PrimengComponentsModule,
+                    primeng.ButtonModule,
+                ],
+                exports: [
+                    AutoCompleteComponent,
+                ],
+                entryComponents: [
+                    AutoCompleteComponent,
+                ]
+            })
+        ], AutoCompleteComponentModule);
+        return AutoCompleteComponentModule;
+    }());
+
     var InsparkComponentsModule = /** @class */ (function () {
         function InsparkComponentsModule() {
         }
         InsparkComponentsModule = __decorate([
             core.NgModule({
                 imports: [
+                    AutoCompleteComponentModule,
                     forms.FormsModule,
                     forms.ReactiveFormsModule,
                     common.CommonModule,
@@ -3914,7 +4253,7 @@
                     RadiobuttonComponent,
                     ObjectTreeComponent,
                     ContentToggleComponent,
-                    InputGroupComponent,
+                    InputGroupComponent
                 ],
                 exports: [
                     ButtonComponent,
@@ -3949,7 +4288,8 @@
                     RadiobuttonComponent,
                     ObjectTreeComponent,
                     ContentToggleComponent,
-                    InputGroupComponent
+                    InputGroupComponent,
+                    AutoCompleteComponentModule
                 ],
                 entryComponents: [SelectListComponent, ModalInputTextComponent],
                 schemas: [core.NO_ERRORS_SCHEMA]
@@ -4012,6 +4352,7 @@
             return slider.SliderModule;
         }
     });
+    exports.AutoCompleteComponentModule = AutoCompleteComponentModule;
     exports.BreadcrumbComponent = BreadcrumbComponent;
     exports.ButtonComponent = ButtonComponent;
     exports.CheckboxComponent = CheckboxComponent;
@@ -4050,18 +4391,19 @@
     exports.ɵb = DropdownComponent;
     exports.ɵc = TableComponent;
     exports.ɵd = TreeTableComponent;
-    exports.ɵe = PropertyValuePipe;
-    exports.ɵf = ShortToFullWeekdayPipe;
-    exports.ɵg = NumToShortWeekdayPipe;
-    exports.ɵh = FormatNumToTime;
-    exports.ɵi = InDate;
-    exports.ɵj = SafeUrlPipe;
-    exports.ɵk = SortByPipe;
-    exports.ɵl = PrimengComponentsModule;
-    exports.ɵm = TableColumnsMultiselectComponent;
-    exports.ɵn = TableMenuOverlayComponent;
-    exports.ɵo = TableClickOutsideDirective;
-    exports.ɵp = InputGroupComponent;
+    exports.ɵe = AutoCompleteComponent;
+    exports.ɵf = PropertyValuePipe;
+    exports.ɵg = ShortToFullWeekdayPipe;
+    exports.ɵh = NumToShortWeekdayPipe;
+    exports.ɵi = FormatNumToTime;
+    exports.ɵj = InDate;
+    exports.ɵk = SafeUrlPipe;
+    exports.ɵl = SortByPipe;
+    exports.ɵm = PrimengComponentsModule;
+    exports.ɵn = TableColumnsMultiselectComponent;
+    exports.ɵo = TableMenuOverlayComponent;
+    exports.ɵp = TableClickOutsideDirective;
+    exports.ɵq = InputGroupComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });