@inspark/inspark-components 1.0.23 → 1.0.25

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

@@ -3,7 +3,7 @@ import { Pipe, NgModule, Injectable, ComponentFactoryResolver, ApplicationRef, I
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 export { TranslateModule } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MessageService, ConfirmationService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/api';
+import { MessageService, ConfirmationService, DynamicDialogConfig, DynamicDialogRef, DomHandler } from 'primeng/api';
 import { _ } from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import { DynamicDialogComponent } from 'primeng/dynamicdialog';
 import { DynamicDialogInjector } from 'primeng/components/dynamicdialog/dynamicdialog-injector';
@@ -15,12 +15,13 @@ export { BreadcrumbModule, RadioButtonModule, SharedModule, TreeModule } from 'p
 import { Router } from '@angular/router';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { TableModule } from 'primeng/table';
+import { TableService, Table, TableModule } from 'primeng/table';
 import { DropdownModule as DropdownModule$1 } from 'primeng/dropdown';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { NgbDropdownModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 export { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CheckboxModule } from 'primeng/checkbox';
+import { ObjectUtils } from 'primeng/components/utils/objectutils';
 import { InlineSVGModule } from 'ng-inline-svg';
 export { InlineSVGModule } from 'ng-inline-svg';
 import { MenuModule } from 'primeng/menu';
@@ -700,6 +701,8 @@ var InputTextComponent = /** @class */ (function () {
         this.display = false;
         this.large = true;
         this.small = false;
+        this.widget = false;
+        this.forms = true;
         this.placeholder = '';
         this.id = null;
         this.testId = null;
@@ -797,6 +800,14 @@ var InputTextComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], InputTextComponent.prototype, "small", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "widget", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InputTextComponent.prototype, "forms", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -856,7 +867,7 @@ var InputTextComponent = /** @class */ (function () {
     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  <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",
+            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                         'c-input_margin_padding': widget,\n                         'c-input_padding_right': forms}\"\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      <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,
@@ -864,7 +875,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}.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}"]
+            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}.c-input_margin_padding{margin-left:56px;padding-right:10px;max-width:1200px}.c-input_padding_right{padding-right:28px}"]
         })
     ], InputTextComponent);
     return InputTextComponent;
@@ -1591,6 +1602,10 @@ var TableClickOutsideDirective = /** @class */ (function () {
     return TableClickOutsideDirective;
 }());
 
+// NEW Factory Function
+function tableFactory(wrapper) {
+    return wrapper.dt;
+}
 var TableComponent = /** @class */ (function () {
     function TableComponent() {
         this.columns = [];
@@ -1615,11 +1630,13 @@ var TableComponent = /** @class */ (function () {
         this.groupEditAction = new EventEmitter();
         this.paramsEditAction = new EventEmitter();
         this.sortFunction = new EventEmitter();
+        this.filterFunction = new EventEmitter();
         this.groupMode = 0;
         this.groupInfo = {};
         this.groupIndex = {};
         this._selection = null;
     }
+    TableComponent_1 = TableComponent;
     Object.defineProperty(TableComponent.prototype, "selection", {
         set: function (val) {
             this._selection = val;
@@ -1742,8 +1759,13 @@ var TableComponent = /** @class */ (function () {
         var found = this.toolbar.filter.cols.filter(function (item) { return item.field === field; });
         return found.length === 1 ? found[0] : '';
     };
+    TableComponent.prototype.onFilterToolbar = function (event) {
+        if (this.toolbar && this.toolbar.filter) {
+            this.toolbar.filter.active = !this.toolbar.filter.active;
+        }
+    };
     TableComponent.prototype.onFilter = function (event) {
-        this.toolbar.filter.active = !this.toolbar.filter.active;
+        this.filterFunction.emit(event.filteredValue);
     };
     TableComponent.prototype.stateSave = function (state) {
     };
@@ -1900,6 +1922,7 @@ var TableComponent = /** @class */ (function () {
         }
         this.sortByGroup();
     };
+    var TableComponent_1;
     __decorate([
         Input(),
         __metadata("design:type", Array)
@@ -2048,6 +2071,10 @@ var TableComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], TableComponent.prototype, "sortFunction", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], TableComponent.prototype, "filterFunction", void 0);
     __decorate([
         ViewChild('dt', { static: false }),
         __metadata("design:type", Object)
@@ -2057,11 +2084,21 @@ var TableComponent = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], TableComponent.prototype, "selection", null);
-    TableComponent = __decorate([
+    TableComponent = TableComponent_1 = __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, 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",
+            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         (onFilter) = onFilter($event)\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)=\"onFilterToolbar($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: [],
+            providers: [
+                DomHandler,
+                ObjectUtils,
+                TableService,
+                {
+                    provide: Table,
+                    useFactory: tableFactory,
+                    deps: [TableComponent_1],
+                },
+            ],
             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}"]
         })
     ], TableComponent);
@@ -4111,5 +4148,5 @@ var InsparkComponentsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, tableFactory as ɵc, TableComponent as ɵd, TreeTableComponent as ɵe, AutoCompleteComponent as ɵf, PropertyValuePipe as ɵg, ShortToFullWeekdayPipe as ɵh, NumToShortWeekdayPipe as ɵi, FormatNumToTime as ɵj, InDate as ɵk, SafeUrlPipe as ɵl, SortByPipe as ɵm, PrimengComponentsModule as ɵn, TableColumnsMultiselectComponent as ɵo, TableMenuOverlayComponent as ɵp, TableClickOutsideDirective as ɵq, InputGroupComponent as ɵr };
 //# sourceMappingURL=inspark-inspark-components.js.map