@smartbit4all/ng-client 6.0.53 → 6.0.55

package/fesm2022/smartbit4all-ng-client.mjs

@@ -11986,7 +11986,7 @@ class Table {
             widgetId: gridId,
         };
     }
-    getRowMenuActionModelArray(element) {
+    getMenuActions(element) {
         var cacheKey = element.id;
         if (this.rowMenuActionModelArrayCache.has(cacheKey)) {
             return this.rowMenuActionModelArrayCache.get(cacheKey);
@@ -11999,33 +11999,6 @@ class Table {
     shouldShowMenuButton(row) {
         return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders);
     }
-    // OLD STUFF
-    getMenuButtons(row, button) {
-        let columnActions = row.columnActions ?? {};
-        // Filter for columnActions that are in a columnAction, but the column is not in the headers
-        let filteredActionColumns = Object.keys(columnActions)
-            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
-            .reduce((acc, key) => {
-            acc[key] = columnActions[key];
-            return acc;
-        }, {});
-        let columnCodes = Object.values(filteredActionColumns).flat();
-        return (button.menuItemButtons || []).filter((btn) => !columnCodes.includes(btn.code));
-    }
-    getMenuItemButtonsPropertyName(element, button) {
-        let buttons = this.getValue(element, button.menuItemButtonsPropertyName);
-        let gridRow = element;
-        let columnActions = gridRow.columnActions ?? {};
-        // Filter for columnActions that are in a columnAction, but the column is not in the headers
-        let filteredActionColumns = Object.keys(columnActions)
-            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
-            .reduce((acc, key) => {
-            acc[key] = columnActions[key];
-            return acc;
-        }, {});
-        let columnCodes = Object.values(filteredActionColumns || {}).flat();
-        return buttons?.filter((button) => !columnCodes.includes(button.code));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Table, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
@@ -12098,7 +12071,7 @@ class MaterialTableComponent extends Table {
         super(cfService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              <button\n                *ngIf=\"showMenuButton(element, button)\"\n                mat-button\n                [matMenuTriggerFor]=\"menu\"\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\n                color=\"{{ button.color }}\"\n              >\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n                <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                <div *ngIf=\"button.menuItemButtons\">\n                  <button\n                    *ngFor=\"let btn of getMenuButtons(element, button)\"\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\n                    mat-menu-item\n                  >\n                    <smart-icon\n                      *ngIf=\"btn?.translator(btn)?.icon\"\n                      [icon]=\"btn!.translator!(btn)!.icon!\"\n                    ></smart-icon>\n                    {{ btn?.translator(btn)?.title }}\n                  </button>\n                </div>\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\n                  <div *ngFor=\"let btn of getMenuItemButtonsPropertyName(element, button)\">\n                    <button\n                      *ngIf=\"btn.code !== ACTION_SEPERATOR\"\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\n                      mat-menu-item\n                      [disabled]=\"btn.disabled\"\n                      [smartTooltip]=\"\n                        btn?.descriptor?.tooltip\n                          ? btn?.descriptor?.tooltip\n                          : button.translator!(btn).tooltip\n                      \"\n                    >\n                      <div\n                        class=\"smart-table-icon-container\"\n                        [ngClass]=\"\n                          button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\n                        \"\n                        ><smart-icon\n                          *ngIf=\"button.translator!(btn).icon\"\n                          [icon]=\"button.translator!(btn).icon!\"\n                        ></smart-icon>\n                        {{ button.translator!(btn).title }}</div\n                      >\n                    </button>\n                    <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\n                  </div>\n                </div>\n              </mat-menu>\n            </div>\n\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -12114,7 +12087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              <button\n                *ngIf=\"showMenuButton(element, button)\"\n                mat-button\n                [matMenuTriggerFor]=\"menu\"\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\n                color=\"{{ button.color }}\"\n              >\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n                <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                <div *ngIf=\"button.menuItemButtons\">\n                  <button\n                    *ngFor=\"let btn of getMenuButtons(element, button)\"\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\n                    mat-menu-item\n                  >\n                    <smart-icon\n                      *ngIf=\"btn?.translator(btn)?.icon\"\n                      [icon]=\"btn!.translator!(btn)!.icon!\"\n                    ></smart-icon>\n                    {{ btn?.translator(btn)?.title }}\n                  </button>\n                </div>\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\n                  <div *ngFor=\"let btn of getMenuItemButtonsPropertyName(element, button)\">\n                    <button\n                      *ngIf=\"btn.code !== ACTION_SEPERATOR\"\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\n                      mat-menu-item\n                      [disabled]=\"btn.disabled\"\n                      [smartTooltip]=\"\n                        btn?.descriptor?.tooltip\n                          ? btn?.descriptor?.tooltip\n                          : button.translator!(btn).tooltip\n                      \"\n                    >\n                      <div\n                        class=\"smart-table-icon-container\"\n                        [ngClass]=\"\n                          button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\n                        \"\n                        ><smart-icon\n                          *ngIf=\"button.translator!(btn).icon\"\n                          [icon]=\"button.translator!(btn).icon!\"\n                        ></smart-icon>\n                        {{ button.translator!(btn).title }}</div\n                      >\n                    </button>\n                    <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\n                  </div>\n                </div>\n              </mat-menu>\n            </div>\n\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+                    ], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class MobileTableComponent extends Table {
@@ -12122,11 +12095,11 @@ class MobileTableComponent extends Table {
         super(cfService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MobileTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MobileTableComponent, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  <div\n    class=\"mobileTableRow\"\n    *ngFor=\"let row of smartTable.tableRows\"\n    [ngClass]=\"getRowClasses(row)\"\n    [ngStyle]=\"getRowStyles(row)\"\n    [attr.data-testid]=\"row?.id ?? null\"\n  >\n    <div\n      class=\"mobileTableCell\"\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\n      (click)=\"handleOnRowClick(row)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n    >\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n        {{ header.label }}\n      </div>\n\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox\n            [disabled]=\"true\"\n            [checked]=\"getValue(row, header.propertyName)\"\n          ></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(row, i)\"\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\n        <smart-icon\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, row)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\n                ></smart-ui-action-toolbar>\n              }\n              <!------ MENU ------>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n      </div>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon\n          *ngIf=\"header.propertyName === 'icon'\"\n          [icon]=\"getValue(row, header.propertyName)!\"\n        >\n        </smart-icon>\n        <img\n          *ngIf=\"header.propertyName === 'img'\"\n          [src]=\"getValue(row, header.propertyName)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <div\n          *ngIf=\"\n            header.propertyName !== 'icon' &&\n            header.propertyName !== 'img' &&\n            header.propertyName !== 'option' &&\n            header.propertyName !== 'button'\n          \"\n          [innerHtml]=\"getValue(row, header.propertyName)\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MobileTableComponent, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  <div\n    class=\"mobileTableRow\"\n    *ngFor=\"let row of smartTable.tableRows\"\n    [ngClass]=\"getRowClasses(row)\"\n    [ngStyle]=\"getRowStyles(row)\"\n    [attr.data-testid]=\"row?.id ?? null\"\n  >\n    <div\n      class=\"mobileTableCell\"\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\n      (click)=\"handleOnRowClick(row)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n    >\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n        {{ header.label }}\n      </div>\n\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox\n            [disabled]=\"true\"\n            [checked]=\"getValue(row, header.propertyName)\"\n          ></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(row, i)\"\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\n        <smart-icon\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, row)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n              <!------ MENU ------>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n      </div>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon\n          *ngIf=\"header.propertyName === 'icon'\"\n          [icon]=\"getValue(row, header.propertyName)!\"\n        >\n        </smart-icon>\n        <img\n          *ngIf=\"header.propertyName === 'img'\"\n          [src]=\"getValue(row, header.propertyName)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <div\n          *ngIf=\"\n            header.propertyName !== 'icon' &&\n            header.propertyName !== 'img' &&\n            header.propertyName !== 'option' &&\n            header.propertyName !== 'button'\n          \"\n          [innerHtml]=\"getValue(row, header.propertyName)\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MobileTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-table', template: "<div class=\"mobileTable\">\n  <div\n    class=\"mobileTableRow\"\n    *ngFor=\"let row of smartTable.tableRows\"\n    [ngClass]=\"getRowClasses(row)\"\n    [ngStyle]=\"getRowStyles(row)\"\n    [attr.data-testid]=\"row?.id ?? null\"\n  >\n    <div\n      class=\"mobileTableCell\"\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\n      (click)=\"handleOnRowClick(row)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n    >\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n        {{ header.label }}\n      </div>\n\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox\n            [disabled]=\"true\"\n            [checked]=\"getValue(row, header.propertyName)\"\n          ></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(row, i)\"\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\n        <smart-icon\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, row)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\n                ></smart-ui-action-toolbar>\n              }\n              <!------ MENU ------>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n      </div>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon\n          *ngIf=\"header.propertyName === 'icon'\"\n          [icon]=\"getValue(row, header.propertyName)!\"\n        >\n        </smart-icon>\n        <img\n          *ngIf=\"header.propertyName === 'img'\"\n          [src]=\"getValue(row, header.propertyName)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <div\n          *ngIf=\"\n            header.propertyName !== 'icon' &&\n            header.propertyName !== 'img' &&\n            header.propertyName !== 'option' &&\n            header.propertyName !== 'button'\n          \"\n          [innerHtml]=\"getValue(row, header.propertyName)\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
+            args: [{ selector: 'lib-mobile-table', template: "<div class=\"mobileTable\">\n  <div\n    class=\"mobileTableRow\"\n    *ngFor=\"let row of smartTable.tableRows\"\n    [ngClass]=\"getRowClasses(row)\"\n    [ngStyle]=\"getRowStyles(row)\"\n    [attr.data-testid]=\"row?.id ?? null\"\n  >\n    <div\n      class=\"mobileTableCell\"\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\n      (click)=\"handleOnRowClick(row)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n    >\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n        {{ header.label }}\n      </div>\n\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(row, header.propertyName)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(row, header.propertyName)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox\n            [disabled]=\"true\"\n            [checked]=\"getValue(row, header.propertyName)\"\n          ></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(row, i)\"\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\n        <smart-icon\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, row)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, row)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n\n              <!------ GENERIC HAMBURGER ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n              <!------ MENU ------>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n      </div>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon\n          *ngIf=\"header.propertyName === 'icon'\"\n          [icon]=\"getValue(row, header.propertyName)!\"\n        >\n        </smart-icon>\n        <img\n          *ngIf=\"header.propertyName === 'img'\"\n          [src]=\"getValue(row, header.propertyName)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <div\n          *ngIf=\"\n            header.propertyName !== 'icon' &&\n            header.propertyName !== 'img' &&\n            header.propertyName !== 'option' &&\n            header.propertyName !== 'button'\n          \"\n          [innerHtml]=\"getValue(row, header.propertyName)\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class SmarttableComponent {
@@ -21274,6 +21247,27 @@ class SmartComponentLayoutUtility {
         }
         return result;
     }
+    /**
+     * The editors of the filter widgets in the layout tree. A widget whose builder model has not
+     * arrived yet has no editor and is left out until it does.
+     */
+    static getFilters(comp) {
+        const result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => SmartComponentLayoutUtility.getFilters(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getFilters(expandable));
+        }
+        if (comp.smartFilterComponent?.contentComponent) {
+            result.push(comp.smartFilterComponent.contentComponent);
+        }
+        return result;
+    }
     static getTrees(comp) {
         let result = [];
         if (comp.components) {
@@ -22367,501 +22361,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }] } });
 
-class SmartComponentLayoutComponent {
-    get testId() {
-        return this.smartComponentLayout?.identifier ?? null;
-    }
-    get isHorizontal() {
-        return (this.smartComponentLayout?.type === this.type().CONTAINER &&
-            this.smartComponentLayout?.direction === 'horizontal');
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+class CustomHttpParameterCodec {
+    encodeKey(k) {
+        return encodeURIComponent(k);
     }
-    get isVertical() {
-        return (this.smartComponentLayout?.type === this.type().CONTAINER &&
-            (this.smartComponentLayout?.direction ?? 'vertical') === 'vertical');
+    encodeValue(v) {
+        return encodeURIComponent(v);
     }
-    set embeddedSlotVcRefSetter(vcRef) {
-        this._embeddedSlotVcRef = vcRef;
-        if (vcRef) {
-            this.tryRegisterEmbeddedSlot();
-        }
+    decodeKey(k) {
+        return decodeURIComponent(k);
     }
-    constructor(layoutService, viewContext, element, renderer) {
-        this.layoutService = layoutService;
-        this.viewContext = viewContext;
-        this.element = element;
-        this.renderer = renderer;
-        this._destroy$ = new Subject();
-        this.appRef = inject(ApplicationRef);
-        this.formRef = viewChild(SmartformComponent);
-        this.onFormChange = effect(() => {
-            const form = this.formRef();
-            if (this.smartForm && form && this.parentSmartComponent) {
-                this.parentSmartComponent.handleDataChangeSubscriptions(form);
-                this.parentSmartComponent.handleUploadCallback(form);
-                form.markAllWidgetsForChangeDetection();
-            }
-        });
-        this.pendingOrphanCleanup = false;
-        this.embeddedSlotActive = false;
+    decodeValue(v) {
+        return decodeURIComponent(v);
     }
-    ngAfterViewInit() {
-        if (this.smartFormList?.first) {
-            this.setFormComponent(this.smartFormList?.first);
-        }
-        this.smartFormList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setFormComponent(list.first);
-        });
-        if (this.smartGridList?.first) {
-            this.setGridComponent(this.smartGridList?.first);
+}
+
+const BASE_PATH = new InjectionToken('basePath');
+const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+class Configuration {
+    constructor(configurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
         }
-        this.smartGridList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setGridComponent(list.first);
-        });
-        if (this.smartMapList?.first) {
-            this.setMapComponent(this.smartMapList?.first);
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
         }
-        this.smartMapList.changes.pipe(takeUntil(this._destroy$)).subscribe((maps) => {
-            this.setMapComponent(maps.first);
-        });
-        if (this.smartDiagramList?.first) {
-            this.setDiagramComponent(this.smartDiagramList?.first);
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
         }
-        this.smartDiagramList.changes.pipe(takeUntil(this._destroy$)).subscribe((diagrams) => {
-            this.setDiagramComponent(diagrams.first);
-        });
-        this.smartFilterList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            if (!this.smartFilterComponent) {
-                this.smartFilterComponent = list.first;
-                this.bindFilter();
-            }
-        });
-        if (this.toolbarList?.first) {
-            this.setToolbarComponent(this.toolbarList?.first);
+        else {
+            this.credentials = {};
         }
-        this.toolbarList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setToolbarComponent(list.first);
-        });
-        this.setUp();
     }
-    ngAfterViewChecked() {
-        if (this.pendingOrphanCleanup) {
-            this.pendingOrphanCleanup = false;
-            this.viewContext.cleanupOrphanedEmbeddedViews(this.uuid);
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderContentType(contentTypes) {
+        if (contentTypes.length === 0) {
+            return undefined;
+        }
+        const type = contentTypes.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
         }
+        return type;
     }
-    ngOnDestroy() {
-        if (this.embeddedSlotContainerId && this.uuid) {
-            this.viewContext.unregisterEmbeddedSlot(this.uuid, this.embeddedSlotContainerId);
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderAccept(accepts) {
+        if (accepts.length === 0) {
+            return undefined;
         }
-        this._destroy$.next();
-        this._destroy$.complete();
+        const type = accepts.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
     }
-    ngOnChanges(changes) {
-        this.setUp();
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    isJsonMime(mime) {
+        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
     }
-    setUp() {
-        if (!this.parentSmartComponent || !this.smartComponentLayout) {
-            return;
-        }
-        if (deepEqual(this.smartComponentLayout, this.currentLayout)) {
-            // no layout change, keep current state
-            this.smartComponentLayout = this.currentLayout;
-            return;
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+    defaultEncodeParam(param) {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? param.value.toISOString()
+            : param.value;
+        return encodeURIComponent(String(value));
+    }
+}
+
+/**
+ * Filter API 2
+ * Filter API 2
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class FilterService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
         }
-        // layout changed, render, but save current
-        // this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
-        SmartComponentLayoutUtility.clearFormHandlers(this);
-        this.currentLayout = this.smartComponentLayout;
-        this.uuid = this.parentSmartComponent.uuid;
-        this.treeService = this.parentSmartComponent.smartTreeService;
-        // Top-level layout: detach embedded views before the tree is re-rendered,
-        // so they survive *ngFor component destruction
-        if (!this.parentLayoutComponent && this.uuid) {
-            this.viewContext.detachAllEmbeddedViews(this.uuid);
-            this.pendingOrphanCleanup = true;
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
         }
-        this.smartComponentLayout?.direction;
-        // the nature of the layout might have changed (e.g. from GRID to FORM), we null out every
-        // template-related element, so no stale data is left on screen:
-        this.expandableSection = undefined;
-        this.smartForm = undefined;
-        this.smartFormComponent = undefined;
-        this.smartGrid = undefined;
-        this.smartGridComponent = undefined;
-        this.smartFilter = undefined;
-        this.smartFilterComponent = undefined;
-        this.smartGrid = undefined;
-        this.toolbarId = undefined;
-        this.toolbar = undefined;
-        // null out toolbar?
-        this.mapId = undefined;
-        this.smartDiagramId = undefined;
-        if (this.embeddedSlotContainerId && this.uuid) {
-            this.viewContext.unregisterEmbeddedSlot(this.uuid, this.embeddedSlotContainerId);
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
         }
-        this.embeddedSlotActive = false;
-        this.embeddedSlotContainerId = undefined;
-        if (this.smartComponentLayout?.expandable) {
-            this.constructExpandableSection();
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
-            this.constructForm();
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
         }
-        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
-            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
-                this.constructGrid();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
-                console.warn('ComponentWidgetType.FILTER is not supported');
-                // this.constructFilter();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
-                this.constructTree();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
-                this.constructToolbar();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.MAP) {
-                this.constructMap();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.DIAGRAM) {
-                this.construcDiagram();
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
             }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.EMBEDDED_SLOT) {
-                this.constructEmbeddedSlot();
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
             }
-            if (!this.parentLayoutComponent) {
-                // only top level component should call init actions
-                this.parentSmartComponent.initActions();
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
             }
         }
-        SmartStyleUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
-    }
-    type() {
-        return ComponentType;
-    }
-    constructExpandableSection() {
-        let data = { ...this.smartComponentLayout };
-        data.expandable = false;
-        this.expandableSection = {
-            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
-            inputs: new Map([
-                ['smartComponentLayout', data],
-                ['parentSmartComponent', this.parentSmartComponent],
-                ['parentLayoutComponent', this.parentLayoutComponent],
-            ]),
-            headerToolbarId: this.smartComponentLayout?.expandableSectionHeaderToolbarId,
-            customComponent: SmartComponentLayoutComponent,
-        };
-    }
-    constructForm() {
-        const widgets = this.layoutService.render({
-            layoutDefinitions: this.smartComponentLayout?.form,
-        });
-        if (this.gridRow && !this.gridRow.valueSets && this.parentSmartComponent?.model) {
-            this.gridRow.valueSets = this.parentSmartComponent.model.valueSets;
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
         }
-        this.smartForm = {
-            direction: this.getFormLayout(),
-            componentModel: this.gridRow ? this.gridRow : this.parentSmartComponent?.model,
-            widgets,
-        };
-        this.bindForm();
-    }
-    getFormLayout() {
-        if (this.smartComponentLayout?.direction) {
-            return this.smartComponentLayout?.direction === LayoutDirection.HORIZONTAL
-                ? SmartFormWidgetDirection.ROW
-                : SmartFormWidgetDirection.COL;
+        else {
+            throw Error("key may not be null if value is not object or array");
         }
-        return SmartFormWidgetDirection.COL;
+        return httpParams;
     }
-    setFormComponent(comp) {
-        if (!this.smartFormComponent) {
-            this.smartFormComponent = comp;
-            this.bindForm();
+    load(uuid, filterIdentifier, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling load.');
         }
-    }
-    bindForm() {
-        if (this.parentSmartComponent?.useQueryLists) {
-            return;
+        if (filterIdentifier === null || filterIdentifier === undefined) {
+            throw new Error('Required parameter filterIdentifier was null or undefined when calling load.');
         }
-        if (this.smartForm && this.smartFormComponent) {
-            this.parentSmartComponent?.addForm(
-            // unique identifier for the form
-            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
         }
-    }
-    makeid(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            counter += 1;
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        return result;
-    }
-    constructGrid() {
-        this.smartGrid = {
-            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
-            gridModel: {
-                page: {},
-            },
-            options: {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            },
-            layoutDef: SmartLayoutDef.TABLE,
-            paginator: false,
-            layoutComponent: SmartComponentLayoutComponent,
-            layoutUtility: SmartComponentLayoutUtility,
-        };
-        this.bindGrid();
-    }
-    setGridComponent(comp) {
-        if (!this.smartGridComponent) {
-            this.smartGridComponent = comp;
-            this.bindGrid();
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
         }
-    }
-    bindGrid() {
-        if (this.parentSmartComponent?.useQueryLists) {
-            if (this.smartGrid && this.smartGridComponent && this.parentSmartComponent) {
-                this.parentSmartComponent.setupGridServices(this.smartGridComponent);
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
             }
-            return;
-        }
-        if (this.smartGrid && this.smartGridComponent) {
-            this.smartGrid = this.parentSmartComponent?.addGrid(this.smartGrid, {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            }, false, this.smartGridComponent);
         }
+        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/load`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
     }
-    constructMap() {
-        this.mapId = this.smartComponentLayout?.widget?.identifier;
-        this.bindMap();
-    }
-    construcDiagram() {
-        this.smartDiagramId = this.smartComponentLayout?.widget?.identifier;
-        this.bindDiagram();
-    }
-    setMapComponent(comp) {
-        if (!this.smartMapComponent) {
-            this.smartMapComponent = comp;
-            this.bindMap();
+    performWidgetAction(uuid, filterIdentifier, body, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling performWidgetAction.');
         }
-    }
-    setDiagramComponent(comp) {
-        if (!this.smartDiagramComponent) {
-            this.smartDiagramComponent = comp;
-            this.bindDiagram();
+        if (filterIdentifier === null || filterIdentifier === undefined) {
+            throw new Error('Required parameter filterIdentifier was null or undefined when calling performWidgetAction.');
         }
-    }
-    bindMap() {
-        if (this.parentSmartComponent.useQueryLists) {
-            return;
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performWidgetAction.');
         }
-        console.warn('Map components are only supported through QueryLists!');
-    }
-    bindDiagram() {
-        if (this.parentSmartComponent.useQueryLists) {
-            return;
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
         }
-        console.warn('Diagram components are only supported through QueryLists!');
-    }
-    setToolbarComponent(comp) {
-        this.toolbar = comp;
-    }
-    // NOT USED, DOESN'T WORK
-    // constructFilter(): void {
-    //   this.smartFilter = (this.smartComponentLayout!.parentComponent as any).addFilter(
-    //     `filter_${this.makeid(5)}`,
-    //     this.smartComponentLayout?.widget?.filterExpressionFieldList,
-    //     this.smartComponentLayout?.widget?.filterType,
-    //     this.smartFilterComponent
-    //   );
-    // }
-    bindFilter() {
-        // TODO
-    }
-    constructTree() {
-        if (this.parentSmartComponent?.useQueryLists) {
-            return;
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        this.parentSmartComponent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
-        this.treeService?.initialize();
-    }
-    constructToolbar() {
-        let toolbarId = this.smartComponentLayout?.widget?.identifier;
-        if (this.toolbarId !== toolbarId) {
-            this.toolbarId = toolbarId;
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
         }
-        let properties = this.smartComponentLayout?.widget?.properties;
-        if (properties && properties['toolbar_properties']) {
-            this.toolbarPropertes = properties['toolbar_properties'];
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
         }
+        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/performWidgetAction`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: body,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
     }
-    constructEmbeddedSlot() {
-        this.embeddedSlotContainerId = this.smartComponentLayout?.widget?.identifier;
-        this.embeddedSlotActive = true;
-        this.tryRegisterEmbeddedSlot();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+class SmartFilterEditorService {
+    constructor(service, viewCtxService) {
+        this.service = service;
+        this.viewCtxService = viewCtxService;
+        this.modelChanged = new Subject();
+        this.submit = new Subject();
+        this.itemSelected = new Subject();
+        this.toolbars = [];
     }
-    tryRegisterEmbeddedSlot() {
-        if (this.embeddedSlotContainerId && this.uuid && this._embeddedSlotVcRef) {
-            // An EMBEDDED_SLOT widget slot is LAYOUT-kind: it lives inside the re-rendering
-            // layout *ngFor, so its child must be detached before a top-level re-render and
-            // reattaches when this slot re-registers. (#28870)
-            this.viewContext.registerEmbeddedSlot(this.uuid, this.embeddedSlotContainerId, this._embeddedSlotVcRef, 'layout');
+    submitForm(validate) {
+        // NOPE
+    }
+    getInvalidFields() {
+        return { invalidFieldKeys: [], invalidFieldNames: [] };
+    }
+    getComplexToolbars() {
+        return [...this.toolbars];
+    }
+    setComplexToolbars(toolbars) {
+        this.toolbars = [...toolbars];
+        this.parentSmartComponent?.initActions();
+    }
+    async load() {
+        if (this.config.uuid) {
+            this.model = await this.service.load(this.config.uuid, this.config.identifier).toPromise();
+            this.modelChanged.next();
         }
     }
-    updateUuid(newUuid) {
-        const oldUuid = this.uuid;
-        this.uuid = newUuid;
-        if (oldUuid !== newUuid && this.embeddedSlotContainerId) {
-            if (oldUuid) {
-                this.viewContext.unregisterEmbeddedSlot(oldUuid, this.embeddedSlotContainerId);
+    async peformWidgetAction(request) {
+        if (this.config.uuid) {
+            let filterView = this.viewCtxService
+                .getCurrentViewContext()
+                ?.views.find((view) => view.uuid == this.config.uuid);
+            if (filterView && filterView.state != ViewState.CLOSED) {
+                this.model = await this.service
+                    .performWidgetAction(this.config.uuid, this.config.identifier, request)
+                    .toPromise();
+                this.modelChanged.next();
             }
-            this.tryRegisterEmbeddedSlot();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: SmartViewContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "formRef", first: true, predicate: SmartformComponent, descendants: true, isSignal: true }, { propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\n\n<ng-template #expandable>\n  <smart-expandable-section\n    *ngIf=\"expandableSection\"\n    [data]=\"expandableSection\"\n  ></smart-expandable-section>\n</ng-template>\n\n<ng-template #normal>\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <smart-component-layout\n      *ngFor=\"let layout of smartComponentLayout?.components\"\n      [parentSmartComponent]=\"parentSmartComponent\"\n      [parentLayoutComponent]=\"this\"\n      [smartComponentLayout]=\"layout\"\n      [gridRow]=\"gridRow\"\n    ></smart-component-layout>\n  }\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\n  <smart-grid\n    *ngIf=\"smartGrid\"\n    #grid\n    [smartGrid]=\"smartGrid\"\n    [uuid]=\"uuid!\"\n    [parentLayoutComponent]=\"this\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-grid>\n  <smart-map\n    *ngIf=\"!!uuid && !!mapId\"\n    #map\n    [uuid]=\"uuid\"\n    [identifier]=\"mapId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-map>\n  <smart-diagram\n    *ngIf=\"!!uuid && !!smartDiagramId\"\n    #diagram\n    [uuid]=\"uuid\"\n    [identifier]=\"smartDiagramId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-diagram>\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\n  <smart-ui-action-toolbar\n    *ngIf=\"!!toolbarId\"\n    #toolbar\n    [id]=\"toolbarId\"\n    [toolbarPropertes]=\"toolbarPropertes\"\n  ></smart-ui-action-toolbar>\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\n</ng-template>\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parent", "parentLayoutComponent", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\n\n<ng-template #expandable>\n  <smart-expandable-section\n    *ngIf=\"expandableSection\"\n    [data]=\"expandableSection\"\n  ></smart-expandable-section>\n</ng-template>\n\n<ng-template #normal>\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <smart-component-layout\n      *ngFor=\"let layout of smartComponentLayout?.components\"\n      [parentSmartComponent]=\"parentSmartComponent\"\n      [parentLayoutComponent]=\"this\"\n      [smartComponentLayout]=\"layout\"\n      [gridRow]=\"gridRow\"\n    ></smart-component-layout>\n  }\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\n  <smart-grid\n    *ngIf=\"smartGrid\"\n    #grid\n    [smartGrid]=\"smartGrid\"\n    [uuid]=\"uuid!\"\n    [parentLayoutComponent]=\"this\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-grid>\n  <smart-map\n    *ngIf=\"!!uuid && !!mapId\"\n    #map\n    [uuid]=\"uuid\"\n    [identifier]=\"mapId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-map>\n  <smart-diagram\n    *ngIf=\"!!uuid && !!smartDiagramId\"\n    #diagram\n    [uuid]=\"uuid\"\n    [identifier]=\"smartDiagramId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-diagram>\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\n  <smart-ui-action-toolbar\n    *ngIf=\"!!toolbarId\"\n    #toolbar\n    [id]=\"toolbarId\"\n    [toolbarPropertes]=\"toolbarPropertes\"\n  ></smart-ui-action-toolbar>\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\n</ng-template>\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: SmartViewContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
-                type: Input
-            }], parentLayoutComponent: [{
-                type: Input
-            }], parentSmartComponent: [{
-                type: Input
-            }], gridRow: [{
-                type: Input
-            }], testId: [{
-                type: HostBinding,
-                args: ['attr.data-testid']
-            }], isHorizontal: [{
-                type: HostBinding,
-                args: ['class.horizontal']
-            }], isVertical: [{
-                type: HostBinding,
-                args: ['class.vertical']
-            }], smartFormList: [{
-                type: ViewChildren,
-                args: ['form']
-            }], smartGridList: [{
-                type: ViewChildren,
-                args: ['grid']
-            }], smartMapList: [{
-                type: ViewChildren,
-                args: ['map']
-            }], smartDiagramList: [{
-                type: ViewChildren,
-                args: ['diagram']
-            }], smartFilterList: [{
-                type: ViewChildren,
-                args: ['filter']
-            }], toolbarList: [{
-                type: ViewChildren,
-                args: ['toolbar']
-            }], embeddedSlotVcRefSetter: [{
-                type: ViewChild,
-                args: ['embeddedSlot', { read: ViewContainerRef, static: false }]
-            }], expandableComponents: [{
-                type: ViewChildren,
-                args: [ExpandableSectionComponent]
-            }], components: [{
-                type: ViewChildren,
-                args: [SmartComponentLayoutComponent]
-            }] } });
-
-const DEFAULT_PROVIDERS = [
-    DefaultChartOptionsProvider,
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: barChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: scatterChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: bubbleChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: horizontalBarChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: stackedBarChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: horizontalStackedBarChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: multiAxisLineChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: polarAreaChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: radarChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: doughnutChart, multi: true },
-    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: pieChart, multi: true },
-];
-class SmartDiagramModule {
-    static forRoot(providers) {
+    getModel() {
+        return this.model;
+    }
+    async performUiActionRequest(uiActionRequest, widgetId, nodeId) {
+        await this.peformWidgetAction(uiActionRequest);
+    }
+    async handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
         return {
-            ngModule: SmartDiagramModule,
-            providers: [...DEFAULT_PROVIDERS, ...providers],
+            shouldPerformAction: true,
+            uiActionRequest: uiActionRequest,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, declarations: [SmartDiagramComponent], imports: [BrowserModule, ChartModule], exports: [SmartDiagramComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, imports: [BrowserModule, ChartModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SmartDiagramComponent],
-                    imports: [BrowserModule, ChartModule],
-                    exports: [SmartDiagramComponent],
-                }]
-        }] });
-
-class SmartComponentLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
-            MatCommonModule,
-            SmartGridModule,
-            SmartExpandableSectionModule,
-            SmarttreeModule,
-            SmartViewContextModule,
-            SmartMapModule,
-            SmartDiagramModule,
-            InputGroupModule,
-            InputGroupAddonModule], exports: [SmartComponentLayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, imports: [BrowserModule,
-            MatCommonModule,
-            SmartGridModule,
-            SmartExpandableSectionModule,
-            SmarttreeModule,
-            SmartViewContextModule,
-            SmartMapModule,
-            SmartDiagramModule,
-            InputGroupModule,
-            InputGroupAddonModule] }); }
+    getAdditionalParams(uiAction) {
+        throw new Error('Method not implemented.');
+    }
+    async bulkUpdateFilterExpression(operationType, item) {
+        if (!this.model?.readOnly) {
+            if (item) {
+                item.expressionData.boolOperator = operationType;
+            }
+            await this.peformWidgetAction({
+                code: 'BULK_UPDATE_FILTER_EXPRESSION',
+                params: {
+                    model: item,
+                    operator: operationType,
+                },
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService, deps: [{ token: FilterService }, { token: SmartViewContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SmartComponentLayoutComponent],
-                    imports: [
-                        BrowserModule,
-                        MatCommonModule,
-                        SmartGridModule,
-                        SmartExpandableSectionModule,
-                        SmarttreeModule,
-                        SmartViewContextModule,
-                        SmartMapModule,
-                        SmartDiagramModule,
-                        InputGroupModule,
-                        InputGroupAddonModule,
-                    ],
-                    exports: [SmartComponentLayoutComponent],
-                    providers: [],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FilterService }, { type: SmartViewContextService }] });
 
 class SmartFilterParamComponent {
     constructor() { }
@@ -23495,397 +23377,516 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     type: Optional
                 }] }], propDecorators: { service: [{
                 type: Input
-            }], vcRef: [{
-                type: ViewChild,
-                args: ['form', { read: ViewContainerRef }]
-            }], simpleFilterVcRef: [{
+            }], vcRef: [{
+                type: ViewChild,
+                args: ['form', { read: ViewContainerRef }]
+            }], simpleFilterVcRef: [{
+                type: ViewChild,
+                args: ['simpleFilterFromChild', { read: ViewContainerRef }]
+            }] } });
+
+/**
+ * A filter builder placed in a component layout. The identifier is the builder's filterId in the
+ * view: the widget loads the builder by it, and the client above the layout finds the widget by it
+ * for push updates and toolbar collection. Each widget owns its own SmartFilterEditorService.
+ */
+class SmartFilterWidgetComponent {
+    // A template reference instead of the class token: a value import of the editor would pull
+    // the library's module cycle into this file. The editor subscribes to modelChanged in its own
+    // ngAfterViewInit, which runs before this setter fires, so the action refresh below always
+    // follows the editor's toolbar rebuild.
+    set contentComponentSetter(comp) {
+        if (comp && !this.contentComponent) {
+            this.service.modelChanged
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => this.parent?.initActions());
+        }
+        this.contentComponent = comp;
+    }
+    constructor(service) {
+        this.service = service;
+        this._destroy$ = new Subject();
+    }
+    ngOnChanges() {
+        this.service.config = { uuid: this.uuid, identifier: this.identifier };
+        this.service.parentSmartComponent = this.parent;
+        if (this.uuid) {
+            this.service.load();
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterWidgetComponent, deps: [{ token: SmartFilterEditorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterWidgetComponent, selector: "smart-filter-widget", inputs: { uuid: "uuid", identifier: "identifier", parent: "parent" }, providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "contentComponentSetter", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filter-widget-container\" *ngIf=\"service.model\">\n  <smart-filter-group-params [service]=\"service\"></smart-filter-group-params>\n  <smart-filter-expression-editor #editor [service]=\"service\"></smart-filter-expression-editor>\n</div>\n", styles: [".filter-widget-container{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-filter-widget', providers: [SmartFilterEditorService], template: "<div class=\"filter-widget-container\" *ngIf=\"service.model\">\n  <smart-filter-group-params [service]=\"service\"></smart-filter-group-params>\n  <smart-filter-expression-editor #editor [service]=\"service\"></smart-filter-expression-editor>\n</div>\n", styles: [".filter-widget-container{display:flex;flex-direction:row}\n"] }]
+        }], ctorParameters: () => [{ type: SmartFilterEditorService }], propDecorators: { uuid: [{
+                type: Input
+            }], identifier: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], contentComponentSetter: [{
                 type: ViewChild,
-                args: ['simpleFilterFromChild', { read: ViewContainerRef }]
+                args: ['editor']
             }] } });
 
-/**
- * Custom HttpParameterCodec
- * Workaround for https://github.com/angular/angular/issues/18261
- */
-class CustomHttpParameterCodec {
-    encodeKey(k) {
-        return encodeURIComponent(k);
+class SmartComponentLayoutComponent {
+    get testId() {
+        return this.smartComponentLayout?.identifier ?? null;
     }
-    encodeValue(v) {
-        return encodeURIComponent(v);
+    get isHorizontal() {
+        return (this.smartComponentLayout?.type === this.type().CONTAINER &&
+            this.smartComponentLayout?.direction === 'horizontal');
     }
-    decodeKey(k) {
-        return decodeURIComponent(k);
+    get isVertical() {
+        return (this.smartComponentLayout?.type === this.type().CONTAINER &&
+            (this.smartComponentLayout?.direction ?? 'vertical') === 'vertical');
     }
-    decodeValue(v) {
-        return decodeURIComponent(v);
+    set embeddedSlotVcRefSetter(vcRef) {
+        this._embeddedSlotVcRef = vcRef;
+        if (vcRef) {
+            this.tryRegisterEmbeddedSlot();
+        }
     }
-}
-
-const BASE_PATH = new InjectionToken('basePath');
-const COLLECTION_FORMATS = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
-};
-
-class Configuration {
-    constructor(configurationParameters = {}) {
-        this.apiKeys = configurationParameters.apiKeys;
-        this.username = configurationParameters.username;
-        this.password = configurationParameters.password;
-        this.accessToken = configurationParameters.accessToken;
-        this.basePath = configurationParameters.basePath;
-        this.withCredentials = configurationParameters.withCredentials;
-        this.encoder = configurationParameters.encoder;
-        if (configurationParameters.encodeParam) {
-            this.encodeParam = configurationParameters.encodeParam;
+    constructor(layoutService, viewContext, element, renderer) {
+        this.layoutService = layoutService;
+        this.viewContext = viewContext;
+        this.element = element;
+        this.renderer = renderer;
+        this._destroy$ = new Subject();
+        this.appRef = inject(ApplicationRef);
+        this.formRef = viewChild(SmartformComponent);
+        this.onFormChange = effect(() => {
+            const form = this.formRef();
+            if (this.smartForm && form && this.parentSmartComponent) {
+                this.parentSmartComponent.handleDataChangeSubscriptions(form);
+                this.parentSmartComponent.handleUploadCallback(form);
+                form.markAllWidgetsForChangeDetection();
+            }
+        });
+        this.pendingOrphanCleanup = false;
+        this.embeddedSlotActive = false;
+    }
+    ngAfterViewInit() {
+        if (this.smartFormList?.first) {
+            this.setFormComponent(this.smartFormList?.first);
         }
-        else {
-            this.encodeParam = param => this.defaultEncodeParam(param);
+        this.smartFormList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setFormComponent(list.first);
+        });
+        if (this.smartGridList?.first) {
+            this.setGridComponent(this.smartGridList?.first);
         }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
+        this.smartGridList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setGridComponent(list.first);
+        });
+        if (this.smartMapList?.first) {
+            this.setMapComponent(this.smartMapList?.first);
         }
-        else {
-            this.credentials = {};
+        this.smartMapList.changes.pipe(takeUntil(this._destroy$)).subscribe((maps) => {
+            this.setMapComponent(maps.first);
+        });
+        if (this.smartDiagramList?.first) {
+            this.setDiagramComponent(this.smartDiagramList?.first);
         }
-    }
-    /**
-     * Select the correct content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param contentTypes - the array of content types that are available for selection
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderContentType(contentTypes) {
-        if (contentTypes.length === 0) {
-            return undefined;
+        this.smartDiagramList.changes.pipe(takeUntil(this._destroy$)).subscribe((diagrams) => {
+            this.setDiagramComponent(diagrams.first);
+        });
+        if (this.smartFilterList?.first) {
+            this.setFilterComponent(this.smartFilterList?.first);
         }
-        const type = contentTypes.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return contentTypes[0];
+        this.smartFilterList.changes.pipe(takeUntil(this._destroy$)).subscribe((filters) => {
+            this.setFilterComponent(filters.first);
+        });
+        if (this.toolbarList?.first) {
+            this.setToolbarComponent(this.toolbarList?.first);
         }
-        return type;
+        this.toolbarList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setToolbarComponent(list.first);
+        });
+        this.setUp();
     }
-    /**
-     * Select the correct accept content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param accepts - the array of content types that are available for selection.
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderAccept(accepts) {
-        if (accepts.length === 0) {
-            return undefined;
-        }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
+    ngAfterViewChecked() {
+        if (this.pendingOrphanCleanup) {
+            this.pendingOrphanCleanup = false;
+            this.viewContext.cleanupOrphanedEmbeddedViews(this.uuid);
         }
-        return type;
-    }
-    /**
-     * Check if the given MIME is a JSON MIME.
-     * JSON MIME examples:
-     *   application/json
-     *   application/json; charset=UTF8
-     *   APPLICATION/JSON
-     *   application/vnd.company+json
-     * @param mime - MIME (Multipurpose Internet Mail Extensions)
-     * @return True if the given MIME is JSON, false otherwise.
-     */
-    isJsonMime(mime) {
-        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
-        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
     }
-    lookupCredential(key) {
-        const value = this.credentials[key];
-        return typeof value === 'function'
-            ? value()
-            : value;
+    ngOnDestroy() {
+        if (this.embeddedSlotContainerId && this.uuid) {
+            this.viewContext.unregisterEmbeddedSlot(this.uuid, this.embeddedSlotContainerId);
+        }
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    defaultEncodeParam(param) {
-        // This implementation exists as fallback for missing configuration
-        // and for backwards compatibility to older typescript-angular generator versions.
-        // It only works for the 'simple' parameter style.
-        // Date-handling only works for the 'date-time' format.
-        // All other styles and Date-formats are probably handled incorrectly.
-        //
-        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
-        const value = param.dataFormat === 'date-time' && param.value instanceof Date
-            ? param.value.toISOString()
-            : param.value;
-        return encodeURIComponent(String(value));
+    ngOnChanges(changes) {
+        this.setUp();
     }
-}
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-/* tslint:disable:no-unused-variable member-ordering */
-class FilterService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'http://localhost';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
+    setUp() {
+        if (!this.parentSmartComponent || !this.smartComponentLayout) {
+            return;
         }
-        if (typeof this.configuration.basePath !== 'string') {
-            if (Array.isArray(basePath) && basePath.length > 0) {
-                basePath = basePath[0];
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
+        if (deepEqual(this.smartComponentLayout, this.currentLayout)) {
+            // no layout change, keep current state
+            this.smartComponentLayout = this.currentLayout;
+            return;
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === "object" && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        // layout changed, render, but save current
+        // this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
+        SmartComponentLayoutUtility.clearFormHandlers(this);
+        this.currentLayout = this.smartComponentLayout;
+        this.uuid = this.parentSmartComponent.uuid;
+        this.treeService = this.parentSmartComponent.smartTreeService;
+        // Top-level layout: detach embedded views before the tree is re-rendered,
+        // so they survive *ngFor component destruction
+        if (!this.parentLayoutComponent && this.uuid) {
+            this.viewContext.detachAllEmbeddedViews(this.uuid);
+            this.pendingOrphanCleanup = true;
+        }
+        this.smartComponentLayout?.direction;
+        // the nature of the layout might have changed (e.g. from GRID to FORM), we null out every
+        // template-related element, so no stale data is left on screen:
+        this.expandableSection = undefined;
+        this.smartForm = undefined;
+        this.smartFormComponent = undefined;
+        this.smartGrid = undefined;
+        this.smartGridComponent = undefined;
+        this.filterId = undefined;
+        this.smartFilterComponent = undefined;
+        this.smartGrid = undefined;
+        this.toolbarId = undefined;
+        this.toolbar = undefined;
+        // null out toolbar?
+        this.mapId = undefined;
+        this.smartDiagramId = undefined;
+        if (this.embeddedSlotContainerId && this.uuid) {
+            this.viewContext.unregisterEmbeddedSlot(this.uuid, this.embeddedSlotContainerId);
         }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        this.embeddedSlotActive = false;
+        this.embeddedSlotContainerId = undefined;
+        if (this.smartComponentLayout?.expandable) {
+            this.constructExpandableSection();
         }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
+        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
+            this.constructForm();
         }
-        if (typeof value === "object") {
-            if (Array.isArray(value)) {
-                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
+            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
+                this.constructGrid();
             }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
-                }
-                else {
-                    throw Error("key may not be null if value is Date");
-                }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
+                this.constructFilter();
             }
-            else {
-                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
+                this.constructTree();
             }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error("key may not be null if value is not object or array");
-        }
-        return httpParams;
-    }
-    load(uuid, filterIdentifier, observe = 'body', reportProgress = false, options) {
-        if (uuid === null || uuid === undefined) {
-            throw new Error('Required parameter uuid was null or undefined when calling load.');
-        }
-        if (filterIdentifier === null || filterIdentifier === undefined) {
-            throw new Error('Required parameter filterIdentifier was null or undefined when calling load.');
-        }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [
-                'application/json'
-            ];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
+                this.constructToolbar();
             }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.MAP) {
+                this.constructMap();
             }
-            else {
-                responseType_ = 'blob';
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.DIAGRAM) {
+                this.construcDiagram();
+            }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.EMBEDDED_SLOT) {
+                this.constructEmbeddedSlot();
+            }
+            if (!this.parentLayoutComponent) {
+                // only top level component should call init actions
+                this.parentSmartComponent.initActions();
             }
         }
-        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/load`;
-        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
+        SmartStyleUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
     }
-    performWidgetAction(uuid, filterIdentifier, body, observe = 'body', reportProgress = false, options) {
-        if (uuid === null || uuid === undefined) {
-            throw new Error('Required parameter uuid was null or undefined when calling performWidgetAction.');
-        }
-        if (filterIdentifier === null || filterIdentifier === undefined) {
-            throw new Error('Required parameter filterIdentifier was null or undefined when calling performWidgetAction.');
+    type() {
+        return ComponentType;
+    }
+    constructExpandableSection() {
+        let data = { ...this.smartComponentLayout };
+        data.expandable = false;
+        this.expandableSection = {
+            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
+            inputs: new Map([
+                ['smartComponentLayout', data],
+                ['parentSmartComponent', this.parentSmartComponent],
+                ['parentLayoutComponent', this.parentLayoutComponent],
+            ]),
+            headerToolbarId: this.smartComponentLayout?.expandableSectionHeaderToolbarId,
+            customComponent: SmartComponentLayoutComponent,
+        };
+    }
+    constructForm() {
+        const widgets = this.layoutService.render({
+            layoutDefinitions: this.smartComponentLayout?.form,
+        });
+        if (this.gridRow && !this.gridRow.valueSets && this.parentSmartComponent?.model) {
+            this.gridRow.valueSets = this.parentSmartComponent.model.valueSets;
         }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performWidgetAction.');
+        this.smartForm = {
+            direction: this.getFormLayout(),
+            componentModel: this.gridRow ? this.gridRow : this.parentSmartComponent?.model,
+            widgets,
+        };
+        this.bindForm();
+    }
+    getFormLayout() {
+        if (this.smartComponentLayout?.direction) {
+            return this.smartComponentLayout?.direction === LayoutDirection.HORIZONTAL
+                ? SmartFormWidgetDirection.ROW
+                : SmartFormWidgetDirection.COL;
         }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [
-                'application/json'
-            ];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        return SmartFormWidgetDirection.COL;
+    }
+    setFormComponent(comp) {
+        if (!this.smartFormComponent) {
+            this.smartFormComponent = comp;
+            this.bindForm();
         }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+    }
+    bindForm() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            return;
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
+        if (this.smartForm && this.smartFormComponent) {
+            this.parentSmartComponent?.addForm(
+            // unique identifier for the form
+            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
         }
-        // to determine the Content-Type header
-        const consumes = [
-            'application/json'
-        ];
-        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+    }
+    makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
         }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
-            }
+        return result;
+    }
+    constructGrid() {
+        this.smartGrid = {
+            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
+            gridModel: {
+                page: {},
+            },
+            options: {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            },
+            layoutDef: SmartLayoutDef.TABLE,
+            paginator: false,
+            layoutComponent: SmartComponentLayoutComponent,
+            layoutUtility: SmartComponentLayoutUtility,
+        };
+        this.bindGrid();
+    }
+    setGridComponent(comp) {
+        if (!this.smartGridComponent) {
+            this.smartGridComponent = comp;
+            this.bindGrid();
         }
-        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/performWidgetAction`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            body: body,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [BASE_PATH]
-                }] }, { type: Configuration, decorators: [{
-                    type: Optional
-                }] }] });
-
-class SmartFilterEditorService {
-    constructor(service, viewCtxService) {
-        this.service = service;
-        this.viewCtxService = viewCtxService;
-        this.modelChanged = new Subject();
-        this.submit = new Subject();
-        this.itemSelected = new Subject();
-        this.toolbars = [];
+    bindGrid() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            if (this.smartGrid && this.smartGridComponent && this.parentSmartComponent) {
+                this.parentSmartComponent.setupGridServices(this.smartGridComponent);
+            }
+            return;
+        }
+        if (this.smartGrid && this.smartGridComponent) {
+            this.smartGrid = this.parentSmartComponent?.addGrid(this.smartGrid, {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            }, false, this.smartGridComponent);
+        }
     }
-    submitForm(validate) {
-        // NOPE
+    constructMap() {
+        this.mapId = this.smartComponentLayout?.widget?.identifier;
+        this.bindMap();
     }
-    getInvalidFields() {
-        return { invalidFieldKeys: [], invalidFieldNames: [] };
+    construcDiagram() {
+        this.smartDiagramId = this.smartComponentLayout?.widget?.identifier;
+        this.bindDiagram();
     }
-    getComplexToolbars() {
-        return [...this.toolbars];
+    setMapComponent(comp) {
+        if (!this.smartMapComponent) {
+            this.smartMapComponent = comp;
+            this.bindMap();
+        }
     }
-    setComplexToolbars(toolbars) {
-        this.toolbars = [...toolbars];
-        this.parentSmartComponent?.initActions();
+    setDiagramComponent(comp) {
+        if (!this.smartDiagramComponent) {
+            this.smartDiagramComponent = comp;
+            this.bindDiagram();
+        }
     }
-    async load() {
-        if (this.config.uuid) {
-            this.model = await this.service.load(this.config.uuid, this.config.identifier).toPromise();
-            this.modelChanged.next();
+    setFilterComponent(comp) {
+        if (!this.smartFilterComponent) {
+            this.smartFilterComponent = comp;
+            this.bindFilter();
         }
     }
-    async peformWidgetAction(request) {
-        if (this.config.uuid) {
-            let filterView = this.viewCtxService
-                .getCurrentViewContext()
-                ?.views.find((view) => view.uuid == this.config.uuid);
-            if (filterView && filterView.state != ViewState.CLOSED) {
-                this.model = await this.service
-                    .performWidgetAction(this.config.uuid, this.config.identifier, request)
-                    .toPromise();
-                this.modelChanged.next();
-            }
+    bindMap() {
+        if (this.parentSmartComponent.useQueryLists) {
+            return;
         }
+        console.warn('Map components are only supported through QueryLists!');
     }
-    getModel() {
-        return this.model;
+    bindDiagram() {
+        if (this.parentSmartComponent.useQueryLists) {
+            return;
+        }
+        console.warn('Diagram components are only supported through QueryLists!');
     }
-    async performUiActionRequest(uiActionRequest, widgetId, nodeId) {
-        await this.peformWidgetAction(uiActionRequest);
+    setToolbarComponent(comp) {
+        this.toolbar = comp;
     }
-    async handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
-        return {
-            shouldPerformAction: true,
-            uiActionRequest: uiActionRequest,
-        };
+    constructFilter() {
+        this.filterId = this.smartComponentLayout?.widget?.identifier;
+        this.bindFilter();
     }
-    getAdditionalParams(uiAction) {
-        throw new Error('Method not implemented.');
+    bindFilter() {
+        if (this.parentSmartComponent.useQueryLists) {
+            return;
+        }
+        console.warn('Filter widgets are only supported through QueryLists!');
     }
-    async bulkUpdateFilterExpression(operationType, item) {
-        if (!this.model?.readOnly) {
-            if (item) {
-                item.expressionData.boolOperator = operationType;
+    constructTree() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            return;
+        }
+        this.parentSmartComponent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
+        this.treeService?.initialize();
+    }
+    constructToolbar() {
+        let toolbarId = this.smartComponentLayout?.widget?.identifier;
+        if (this.toolbarId !== toolbarId) {
+            this.toolbarId = toolbarId;
+        }
+        let properties = this.smartComponentLayout?.widget?.properties;
+        if (properties && properties['toolbar_properties']) {
+            this.toolbarPropertes = properties['toolbar_properties'];
+        }
+    }
+    constructEmbeddedSlot() {
+        this.embeddedSlotContainerId = this.smartComponentLayout?.widget?.identifier;
+        this.embeddedSlotActive = true;
+        this.tryRegisterEmbeddedSlot();
+    }
+    tryRegisterEmbeddedSlot() {
+        if (this.embeddedSlotContainerId && this.uuid && this._embeddedSlotVcRef) {
+            // An EMBEDDED_SLOT widget slot is LAYOUT-kind: it lives inside the re-rendering
+            // layout *ngFor, so its child must be detached before a top-level re-render and
+            // reattaches when this slot re-registers. (#28870)
+            this.viewContext.registerEmbeddedSlot(this.uuid, this.embeddedSlotContainerId, this._embeddedSlotVcRef, 'layout');
+        }
+    }
+    updateUuid(newUuid) {
+        const oldUuid = this.uuid;
+        this.uuid = newUuid;
+        if (oldUuid !== newUuid && this.embeddedSlotContainerId) {
+            if (oldUuid) {
+                this.viewContext.unregisterEmbeddedSlot(oldUuid, this.embeddedSlotContainerId);
             }
-            await this.peformWidgetAction({
-                code: 'BULK_UPDATE_FILTER_EXPRESSION',
-                params: {
-                    model: item,
-                    operator: operationType,
-                },
-            });
+            this.tryRegisterEmbeddedSlot();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService, deps: [{ token: FilterService }, { token: SmartViewContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: SmartViewContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "formRef", first: true, predicate: SmartformComponent, descendants: true, isSignal: true }, { propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\n\n<ng-template #expandable>\n  <smart-expandable-section\n    *ngIf=\"expandableSection\"\n    [data]=\"expandableSection\"\n  ></smart-expandable-section>\n</ng-template>\n\n<ng-template #normal>\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <smart-component-layout\n      *ngFor=\"let layout of smartComponentLayout?.components\"\n      [parentSmartComponent]=\"parentSmartComponent\"\n      [parentLayoutComponent]=\"this\"\n      [smartComponentLayout]=\"layout\"\n      [gridRow]=\"gridRow\"\n    ></smart-component-layout>\n  }\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\n  <smart-grid\n    *ngIf=\"smartGrid\"\n    #grid\n    [smartGrid]=\"smartGrid\"\n    [uuid]=\"uuid!\"\n    [parentLayoutComponent]=\"this\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-grid>\n  <smart-map\n    *ngIf=\"!!uuid && !!mapId\"\n    #map\n    [uuid]=\"uuid\"\n    [identifier]=\"mapId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-map>\n  <smart-diagram\n    *ngIf=\"!!uuid && !!smartDiagramId\"\n    #diagram\n    [uuid]=\"uuid\"\n    [identifier]=\"smartDiagramId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-diagram>\n  <smart-filter-widget\n    *ngIf=\"!!uuid && !!filterId\"\n    #filter\n    [uuid]=\"uuid\"\n    [identifier]=\"filterId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-filter-widget>\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\n  <smart-ui-action-toolbar\n    *ngIf=\"!!toolbarId\"\n    #toolbar\n    [id]=\"toolbarId\"\n    [toolbarPropertes]=\"toolbarPropertes\"\n  ></smart-ui-action-toolbar>\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\n</ng-template>\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parent", "parentLayoutComponent", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartFilterWidgetComponent, selector: "smart-filter-widget", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FilterService }, { type: SmartViewContextService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\n\n<ng-template #expandable>\n  <smart-expandable-section\n    *ngIf=\"expandableSection\"\n    [data]=\"expandableSection\"\n  ></smart-expandable-section>\n</ng-template>\n\n<ng-template #normal>\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <smart-component-layout\n      *ngFor=\"let layout of smartComponentLayout?.components\"\n      [parentSmartComponent]=\"parentSmartComponent\"\n      [parentLayoutComponent]=\"this\"\n      [smartComponentLayout]=\"layout\"\n      [gridRow]=\"gridRow\"\n    ></smart-component-layout>\n  }\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\n  <smart-grid\n    *ngIf=\"smartGrid\"\n    #grid\n    [smartGrid]=\"smartGrid\"\n    [uuid]=\"uuid!\"\n    [parentLayoutComponent]=\"this\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-grid>\n  <smart-map\n    *ngIf=\"!!uuid && !!mapId\"\n    #map\n    [uuid]=\"uuid\"\n    [identifier]=\"mapId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-map>\n  <smart-diagram\n    *ngIf=\"!!uuid && !!smartDiagramId\"\n    #diagram\n    [uuid]=\"uuid\"\n    [identifier]=\"smartDiagramId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-diagram>\n  <smart-filter-widget\n    *ngIf=\"!!uuid && !!filterId\"\n    #filter\n    [uuid]=\"uuid\"\n    [identifier]=\"filterId\"\n    [parent]=\"parentSmartComponent\"\n  ></smart-filter-widget>\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\n  <smart-ui-action-toolbar\n    *ngIf=\"!!toolbarId\"\n    #toolbar\n    [id]=\"toolbarId\"\n    [toolbarPropertes]=\"toolbarPropertes\"\n  ></smart-ui-action-toolbar>\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\n</ng-template>\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: SmartViewContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
+                type: Input
+            }], parentLayoutComponent: [{
+                type: Input
+            }], parentSmartComponent: [{
+                type: Input
+            }], gridRow: [{
+                type: Input
+            }], testId: [{
+                type: HostBinding,
+                args: ['attr.data-testid']
+            }], isHorizontal: [{
+                type: HostBinding,
+                args: ['class.horizontal']
+            }], isVertical: [{
+                type: HostBinding,
+                args: ['class.vertical']
+            }], smartFormList: [{
+                type: ViewChildren,
+                args: ['form']
+            }], smartGridList: [{
+                type: ViewChildren,
+                args: ['grid']
+            }], smartMapList: [{
+                type: ViewChildren,
+                args: ['map']
+            }], smartDiagramList: [{
+                type: ViewChildren,
+                args: ['diagram']
+            }], smartFilterList: [{
+                type: ViewChildren,
+                args: ['filter']
+            }], toolbarList: [{
+                type: ViewChildren,
+                args: ['toolbar']
+            }], embeddedSlotVcRefSetter: [{
+                type: ViewChild,
+                args: ['embeddedSlot', { read: ViewContainerRef, static: false }]
+            }], expandableComponents: [{
+                type: ViewChildren,
+                args: [ExpandableSectionComponent]
+            }], components: [{
+                type: ViewChildren,
+                args: [SmartComponentLayoutComponent]
+            }] } });
+
+const DEFAULT_PROVIDERS = [
+    DefaultChartOptionsProvider,
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: barChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: scatterChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: bubbleChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: horizontalBarChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: stackedBarChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: horizontalStackedBarChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: multiAxisLineChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: polarAreaChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: radarChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: doughnutChart, multi: true },
+    { provide: CUSTOM_DIAGRAM_OPTIONS, useValue: pieChart, multi: true },
+];
+class SmartDiagramModule {
+    static forRoot(providers) {
+        return {
+            ngModule: SmartDiagramModule,
+            providers: [...DEFAULT_PROVIDERS, ...providers],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, declarations: [SmartDiagramComponent], imports: [BrowserModule, ChartModule], exports: [SmartDiagramComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, imports: [BrowserModule, ChartModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDiagramModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SmartDiagramComponent],
+                    imports: [BrowserModule, ChartModule],
+                    exports: [SmartDiagramComponent],
+                }]
+        }] });
 
 class SmartFilterEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -23896,7 +23897,8 @@ class SmartFilterEditorModule {
             SmartFilterExpressionItemComponent,
             AdvancedSmartFilterExpressionItemComponent,
             AdvancedRelationButtonComponent,
-            ExpressionEditorDialogComponent], imports: [CommonModule,
+            ExpressionEditorDialogComponent,
+            SmartFilterWidgetComponent], imports: [CommonModule,
             SmartIconModule,
             SmartExpandableSectionModule,
             SmartViewContextModule,
@@ -23909,7 +23911,8 @@ class SmartFilterEditorModule {
             SmartFilterExpressionItemComponent,
             AdvancedSmartFilterExpressionItemComponent,
             AdvancedRelationButtonComponent,
-            ExpressionEditorDialogComponent] }); }
+            ExpressionEditorDialogComponent,
+            SmartFilterWidgetComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterEditorModule, imports: [CommonModule,
             SmartIconModule,
             SmartExpandableSectionModule,
@@ -23930,6 +23933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         AdvancedSmartFilterExpressionItemComponent,
                         AdvancedRelationButtonComponent,
                         ExpressionEditorDialogComponent,
+                        SmartFilterWidgetComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -23949,7 +23953,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         AdvancedSmartFilterExpressionItemComponent,
                         AdvancedRelationButtonComponent,
                         ExpressionEditorDialogComponent,
+                        SmartFilterWidgetComponent,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+class SmartComponentLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
+            MatCommonModule,
+            SmartGridModule,
+            SmartExpandableSectionModule,
+            SmarttreeModule,
+            SmartViewContextModule,
+            SmartMapModule,
+            SmartDiagramModule,
+            SmartFilterEditorModule,
+            InputGroupModule,
+            InputGroupAddonModule], exports: [SmartComponentLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, imports: [BrowserModule,
+            MatCommonModule,
+            SmartGridModule,
+            SmartExpandableSectionModule,
+            SmarttreeModule,
+            SmartViewContextModule,
+            SmartMapModule,
+            SmartDiagramModule,
+            SmartFilterEditorModule,
+            InputGroupModule,
+            InputGroupAddonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SmartComponentLayoutComponent],
+                    imports: [
+                        BrowserModule,
+                        MatCommonModule,
+                        SmartGridModule,
+                        SmartExpandableSectionModule,
+                        SmarttreeModule,
+                        SmartViewContextModule,
+                        SmartMapModule,
+                        SmartDiagramModule,
+                        SmartFilterEditorModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
                     ],
+                    exports: [SmartComponentLayoutComponent],
                     providers: [],
                 }]
         }] });
@@ -24536,6 +24588,9 @@ class SmartComponentApiClient {
     }
     getAllSmartFilterEditorContentComponents() {
         let filters = this.getSmartFilterEditorContentComponentsQL()?.toArray() ?? [];
+        this.getSmartComponentLayoutsQL()?.forEach((comp) => {
+            filters.push(...SmartComponentLayoutUtility.getFilters(comp));
+        });
         return filters;
     }
     getAllSmartUiActionToolbars() {
@@ -25997,5 +26052,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APIS$5 as APIS, AbstractMap, AclEditingViewComponent, AdvancedRelationButtonComponent, AdvancedSmartFilterExpressionItemComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, ClickMenuComponent, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, ExpressionEditorDialogComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, HoverMenuComponent, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PhotoCaptureWidgetComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DEFAULT_VIEW_COMPONENTS, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGenericPagesModule, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSubject, SmartTabGroupModule, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, resolveSlot, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
+export { APIS$5 as APIS, AbstractMap, AclEditingViewComponent, AdvancedRelationButtonComponent, AdvancedSmartFilterExpressionItemComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, ClickMenuComponent, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, ExpressionEditorDialogComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, HoverMenuComponent, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PhotoCaptureWidgetComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DEFAULT_VIEW_COMPONENTS, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGenericPagesModule, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSubject, SmartTabGroupModule, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, resolveSlot, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map