@igo2/common 16.0.0-rc.2 → 16.0.0-rc.3

package/fesm2022/igo2-common.mjs

@@ -2147,7 +2147,7 @@ class EntitySelectorComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntitySelectorComponent, [{
         type: Component,
-        args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n  <mat-select\n    [disabled]=\"disabled\"\n    [value]=\"selected$ | async\"\n    [multiple]=\"multi\"\n    [placeholder]=\"placeholder\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <mat-option\n      *ngIf=\"emptyText !== undefined && multi === false\"\n      [value]=\"emptyValue\"\n      >{{ emptyText }}</mat-option\n    >\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{\n      multiText$ | async\n    }}</mat-option>\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\n      <mat-option [value]=\"record.entity\">\n        {{ titleAccessor(record.entity) }}\n      </mat-option>\n    </ng-template>\n  </mat-select>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\r\n  <mat-select\r\n    [disabled]=\"disabled\"\r\n    [value]=\"selected$ | async\"\r\n    [multiple]=\"multi\"\r\n    [placeholder]=\"placeholder\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n  >\r\n    <mat-option\r\n      *ngIf=\"emptyText !== undefined && multi === false\"\r\n      [value]=\"emptyValue\"\r\n      >{{ emptyText }}</mat-option\r\n    >\r\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{\r\n      multiText$ | async\r\n    }}</mat-option>\r\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\r\n      <mat-option [value]=\"record.entity\">\r\n        {{ titleAccessor(record.entity) }}\r\n      </mat-option>\r\n    </ng-template>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: ["mat-form-field{width:100%}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { store: [{
             type: Input
         }], titleAccessor: [{
@@ -2330,7 +2330,7 @@ class EntityTablePaginatorComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityTablePaginatorComponent, [{
         type: Component,
-        args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator\n  [disabled]=\"disabled\"\n  [hidePageSize]=\"hidePageSize\"\n  [length]=\"length\"\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"emitPaginator()\"\n>\n</mat-paginator>\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"] }]
+        args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator\r\n  [disabled]=\"disabled\"\r\n  [hidePageSize]=\"hidePageSize\"\r\n  [length]=\"length\"\r\n  [pageIndex]=\"pageIndex\"\r\n  [pageSize]=\"pageSize\"\r\n  [pageSizeOptions]=\"pageSizeOptions\"\r\n  [showFirstLastButtons]=\"showFirstLastButtons\"\r\n  (page)=\"emitPaginator()\"\r\n>\r\n</mat-paginator>\r\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"] }]
     }], function () { return [{ type: i1$1.LanguageService }, { type: i1$1.MediaService }]; }, { entitySortChange$: [{
             type: Input
         }], store: [{
@@ -3536,12 +3536,10 @@ class EntityTableComponent {
      * @internal
      */
     getTrackByFunction() {
-        return (index, record) => {
-            return record.ref;
-        };
+        return (_index, row) => row.record.ref;
     }
     /**
-     * Trigger a refresh of thre table. This can be useful when
+     * Trigger a refresh of the table. This can be useful when
      * the data source doesn't emit a new value but for some reason
      * the records need an update.
      * @internal
@@ -4347,7 +4345,7 @@ class ActionbarComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionbarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\" matListItemIcon>\n  <div\n    *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n    id=\"topChevron\"\n  >\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n      (click)=\"scrollUp()\"\n    >\n      <mat-icon svgIcon=\"chevron-up\"></mat-icon>\n    </button>\n  </div>\n\n  <igo-actionbar-item\n    *ngIf=\"withToggleButton\"\n    color=\"accent\"\n    [withTitle]=\"false\"\n    [withIcon]=\"true\"\n    [color]=\"color\"\n    [disabled]=\"store.view.empty\"\n    [action]=\"toggleCollapseAction\"\n    (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n  >\n  </igo-actionbar-item>\n\n  <ng-template\n    #buttonContent\n    *ngIf=\"!collapsed\"\n    ngFor\n    let-action\n    [ngForOf]=\"store.view.all$() | async\"\n  >\n    <igo-actionbar-item\n      color=\"accent\"\n      [withTitle]=\"withTitle\"\n      [withIcon]=\"withIcon\"\n      [withTooltip]=\"withTooltip\"\n      [color]=\"color\"\n      [disabled]=\"store.state.get(action).disabled\"\n      [action]=\"action\"\n      (trigger)=\"onTriggerAction(action)\"\n    >\n    </igo-actionbar-item>\n  </ng-template>\n\n  <div\n    *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n    id=\"lowChevron\"\n  >\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n      (click)=\"scrollDown()\"\n    >\n      <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n    </button>\n  </div>\n</mat-list>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n  <button\n    class=\"buttonOverlay\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n    [matMenuTriggerFor]=\"actionbarMenu\"\n    [disabled]=\"store.view.empty\"\n    [color]=\"iconColor\"\n  >\n    <mat-icon [svgIcon]=\"icon\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #actionbarMenu=\"matMenu\"\n    class=\"igo-compact-menu igo-no-min-width-menu\"\n    overlapTrigger=\"true\"\n    [xPosition]=\"xPosition\"\n    [yPosition]=\"yPosition\"\n    [class]=\"overlayClass\"\n  >\n    <mat-list>\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle\"\n          [withIcon]=\"withIcon\"\n          [color]=\"color\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        >\n        </igo-actionbar-item>\n      </ng-template>\n    </mat-list>\n  </mat-menu>\n</div>\n<mat-card\n  *ngIf=\"mode === actionbarMode.Context\"\n  class=\"context-menu-card mat-elevation-z4\"\n>\n  <mat-list>\n    <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"withTitle\"\n        [withIcon]=\"withIcon\"\n        [color]=\"color\"\n        [action]=\"action\"\n        (trigger)=\"onTriggerAction(action)\"\n      >\n      </igo-actionbar-item>\n      <br />\n    </ng-template>\n  </mat-list>\n</mat-card>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:fixed;position:sticky;bottom:0;background-color:#fff;z-index:3}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"] }]
+        args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\" matListItemIcon>\r\n  <div\r\n    *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\r\n    id=\"topChevron\"\r\n  >\r\n    <button\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\r\n      (click)=\"scrollUp()\"\r\n    >\r\n      <mat-icon svgIcon=\"chevron-up\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <igo-actionbar-item\r\n    *ngIf=\"withToggleButton\"\r\n    color=\"accent\"\r\n    [withTitle]=\"false\"\r\n    [withIcon]=\"true\"\r\n    [color]=\"color\"\r\n    [disabled]=\"store.view.empty\"\r\n    [action]=\"toggleCollapseAction\"\r\n    (trigger)=\"onTriggerAction(toggleCollapseAction)\"\r\n  >\r\n  </igo-actionbar-item>\r\n\r\n  <ng-template\r\n    #buttonContent\r\n    *ngIf=\"!collapsed\"\r\n    ngFor\r\n    let-action\r\n    [ngForOf]=\"store.view.all$() | async\"\r\n  >\r\n    <igo-actionbar-item\r\n      color=\"accent\"\r\n      [withTitle]=\"withTitle\"\r\n      [withIcon]=\"withIcon\"\r\n      [withTooltip]=\"withTooltip\"\r\n      [color]=\"color\"\r\n      [disabled]=\"store.state.get(action).disabled\"\r\n      [action]=\"action\"\r\n      (trigger)=\"onTriggerAction(action)\"\r\n    >\r\n    </igo-actionbar-item>\r\n  </ng-template>\r\n\r\n  <div\r\n    *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\r\n    id=\"lowChevron\"\r\n  >\r\n    <button\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\r\n      (click)=\"scrollDown()\"\r\n    >\r\n      <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list>\r\n\r\n<div *ngIf=\"mode === actionbarMode.Overlay\">\r\n  <button\r\n    class=\"buttonOverlay\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\r\n    [matMenuTriggerFor]=\"actionbarMenu\"\r\n    [disabled]=\"store.view.empty\"\r\n    [color]=\"iconColor\"\r\n  >\r\n    <mat-icon [svgIcon]=\"icon\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #actionbarMenu=\"matMenu\"\r\n    class=\"igo-compact-menu igo-no-min-width-menu\"\r\n    overlapTrigger=\"true\"\r\n    [xPosition]=\"xPosition\"\r\n    [yPosition]=\"yPosition\"\r\n    [class]=\"overlayClass\"\r\n  >\r\n    <mat-list>\r\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\r\n        <igo-actionbar-item\r\n          color=\"accent\"\r\n          [withTitle]=\"withTitle\"\r\n          [withIcon]=\"withIcon\"\r\n          [color]=\"color\"\r\n          [action]=\"action\"\r\n          (trigger)=\"onTriggerAction(action)\"\r\n        >\r\n        </igo-actionbar-item>\r\n      </ng-template>\r\n    </mat-list>\r\n  </mat-menu>\r\n</div>\r\n<mat-card\r\n  *ngIf=\"mode === actionbarMode.Context\"\r\n  class=\"context-menu-card mat-elevation-z4\"\r\n>\r\n  <mat-list>\r\n    <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\r\n      <igo-actionbar-item\r\n        color=\"accent\"\r\n        [withTitle]=\"withTitle\"\r\n        [withIcon]=\"withIcon\"\r\n        [color]=\"color\"\r\n        [action]=\"action\"\r\n        (trigger)=\"onTriggerAction(action)\"\r\n      >\r\n      </igo-actionbar-item>\r\n      <br />\r\n    </ng-template>\r\n  </mat-list>\r\n</mat-card>\r\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:fixed;position:sticky;bottom:0;background-color:#fff;z-index:3}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"] }]
     }], function () { return [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MediaService }]; }, { store: [{
             type: Input
         }], mode: [{
@@ -4469,7 +4467,7 @@ class BackdropComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BackdropComponent, [{
         type: Component,
-        args: [{ selector: 'igo-backdrop', template: "<div [ngClass]=\"{ 'igo-backdrop-shown': shown }\"></div>\n", styles: [":host>div{position:absolute;inset:0;background-color:#64646480;z-index:2;display:none}:host>div.igo-backdrop-shown{display:block}\n"] }]
+        args: [{ selector: 'igo-backdrop', template: "<div [ngClass]=\"{ 'igo-backdrop-shown': shown }\"></div>\r\n", styles: [":host>div{position:absolute;inset:0;background-color:#64646480;z-index:2;display:none}:host>div.igo-backdrop-shown{display:block}\n"] }]
     }], function () { return []; }, { shown: [{
             type: Input
         }] }); })();
@@ -4853,7 +4851,7 @@ class CollapsibleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsibleComponent, [{
         type: Component,
-        args: [{ selector: 'igo-collapsible', template: "<mat-list-item>\n  <mat-icon\n    svgIcon=\"chevron-up\"\n    class=\"igo-chevron\"\n    matListItemIcon\n    igoCollapse\n    [target]=\"content\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"collapsed = $event\"\n  >\n  </mat-icon>\n  <span matListItemTitle>{{ title }}</span>\n</mat-list-item>\n\n<div #content>\n  <ng-content></ng-content>\n</div>\n", styles: [":host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mat-mdc-list-item-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"] }]
+        args: [{ selector: 'igo-collapsible', template: "<mat-list-item>\r\n  <mat-icon\r\n    svgIcon=\"chevron-up\"\r\n    class=\"igo-chevron\"\r\n    matListItemIcon\r\n    igoCollapse\r\n    [target]=\"content\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"collapsed = $event\"\r\n  >\r\n  </mat-icon>\r\n  <span matListItemTitle>{{ title }}</span>\r\n</mat-list-item>\r\n\r\n<div #content>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mat-mdc-list-item-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"] }]
     }], null, { title: [{
             type: Input
         }], collapsed: [{
@@ -4921,7 +4919,7 @@ class ConfirmDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-confirm-dialog', template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.common.confirmDialog.title' | translate }}\n</h2>\n<div mat-dialog-content class=\"mat-typography\">{{ confirmMessage }}</div>\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(true)\">\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\n  </button>\n  <button mat-button (click)=\"dialogRef.close(false)\">\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\n  </button>\n</div>\n", styles: ["h2{margin:5px 0 10px}div[mat-dialog-content]{max-width:200px}div[mat-dialog-actions]{margin:10px 0 0}\n"] }]
+        args: [{ selector: 'igo-confirm-dialog', template: "<h2 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.common.confirmDialog.title' | translate }}\r\n</h2>\r\n<div mat-dialog-content class=\"mat-typography\">{{ confirmMessage }}</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(true)\">\r\n    {{ 'igo.common.confirmDialog.confirmBtn' | translate }}\r\n  </button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">\r\n    {{ 'igo.common.confirmDialog.cancelBtn' | translate }}\r\n  </button>\r\n</div>\r\n", styles: ["h2{margin:5px 0 10px}div[mat-dialog-content]{max-width:200px}div[mat-dialog-actions]{margin:10px 0 0}\n"] }]
     }], function () { return [{ type: i1$6.MatDialogRef }]; }, null); })();
 
 class ConfirmDialogService {
@@ -5869,7 +5867,7 @@ class FlexibleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlexibleComponent, [{
         type: Component,
-        args: [{ selector: 'igo-flexible', template: "<div #flexibleMain class=\"igo-flexible-main {{ state }} {{ direction }}\">\n  <div class=\"igo-container\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"igo-flexible-fill\">\n  <div>\n    <div class=\"igo-container\">\n      <ng-content select=\"[igoFlexibleFill]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}:host .igo-flexible-main{flex:0 0 auto;overflow:hidden}:host .igo-flexible-main.column{transition:height .25s ease-in}:host .igo-flexible-main.row{transition:width .25s ease-in}:host .igo-flexible-fill>div{position:absolute;inset:0}:host .igo-container{height:100%;overflow:hidden;position:relative}:host ::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}:host ::ng-deep .igo-content{height:100%;width:100%;overflow:auto}:host ::ng-deep igo-panel{height:100%}\n"] }]
+        args: [{ selector: 'igo-flexible', template: "<div #flexibleMain class=\"igo-flexible-main {{ state }} {{ direction }}\">\r\n  <div class=\"igo-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"igo-flexible-fill\">\r\n  <div>\r\n    <div class=\"igo-container\">\r\n      <ng-content select=\"[igoFlexibleFill]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}:host .igo-flexible-main{flex:0 0 auto;overflow:hidden}:host .igo-flexible-main.column{transition:height .25s ease-in}:host .igo-flexible-main.row{transition:width .25s ease-in}:host .igo-flexible-fill>div{position:absolute;inset:0}:host .igo-container{height:100%;overflow:hidden;position:relative}:host ::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}:host ::ng-deep .igo-content{height:100%;width:100%;overflow:auto}:host ::ng-deep igo-panel{height:100%}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i1$1.MediaService }]; }, { main: [{
             type: ViewChild,
             args: ['flexibleMain', { static: true }]
@@ -6099,7 +6097,7 @@ FormFieldSelectComponent = __decorate([
 ], FormFieldSelectComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldSelectComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <mat-select\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\"\n  >\n    <mat-option *ngFor=\"let choice of choices$ | async\" [value]=\"choice.value\">\n      {{ choice.title }}\n    </mat-option>\n  </mat-select>\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"\n      (disabled$ | async) === true\n        ? 'checkbox-blank-outline'\n        : 'checkbox-marked-outline'\n    \"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix\n  >\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{\n    getErrorMessage() | translate\n  }}</mat-error>\n</mat-form-field>\n" }]
+        args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <mat-select\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\"\r\n  >\r\n    <mat-option *ngFor=\"let choice of choices$ | async\" [value]=\"choice.value\">\r\n      {{ choice.title }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"\r\n      (disabled$ | async) === true\r\n        ? 'checkbox-blank-outline'\r\n        : 'checkbox-marked-outline'\r\n    \"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix\r\n  >\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{\r\n    getErrorMessage() | translate\r\n  }}</mat-error>\r\n</mat-form-field>\r\n" }]
     }], null, { choices: [{
             type: Input
         }], formControl: [{
@@ -6202,7 +6200,7 @@ FormFieldTextComponent = __decorate([
 ], FormFieldTextComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldTextComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <input\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\"\n  />\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"\n      (disabled$ | async) === true\n        ? 'checkbox-blank-outline'\n        : 'checkbox-marked-outline'\n    \"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix\n  >\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{\n    getErrorMessage() | translate\n  }}</mat-error>\n</mat-form-field>\n" }]
+        args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <input\r\n    matInput\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\"\r\n  />\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"\r\n      (disabled$ | async) === true\r\n        ? 'checkbox-blank-outline'\r\n        : 'checkbox-marked-outline'\r\n    \"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix\r\n  >\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{\r\n    getErrorMessage() | translate\r\n  }}</mat-error>\r\n</mat-form-field>\r\n" }]
     }], null, { formControl: [{
             type: Input
         }], placeholder: [{
@@ -6304,7 +6302,7 @@ FormFieldTextareaComponent = __decorate([
 ], FormFieldTextareaComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldTextareaComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\"\n  >\n  </textarea>\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"\n      (disabled$ | async) === true\n        ? 'checkbox-blank-outline'\n        : 'checkbox-marked-outline'\n    \"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix\n  >\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{\n    getErrorMessage() | translate\n  }}</mat-error>\n</mat-form-field>\n" }]
+        args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <textarea\r\n    matInput\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\"\r\n  >\r\n  </textarea>\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"\r\n      (disabled$ | async) === true\r\n        ? 'checkbox-blank-outline'\r\n        : 'checkbox-marked-outline'\r\n    \"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix\r\n  >\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{\r\n    getErrorMessage() | translate\r\n  }}</mat-error>\r\n</mat-form-field>\r\n" }]
     }], null, { formControl: [{
             type: Input
         }], placeholder: [{
@@ -6459,7 +6457,7 @@ class FormFieldComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"field !== undefined\">\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  >\n  </igo-dynamic-outlet>\n</ng-container>\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
+        args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"field !== undefined\">\r\n  <igo-dynamic-outlet\r\n    [component]=\"getFieldComponent()\"\r\n    [inputs]=\"getFieldInputs()\"\r\n    [subscribers]=\"getFieldSubscribers()\"\r\n  >\r\n  </igo-dynamic-outlet>\r\n</ng-container>\r\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
     }], function () { return [{ type: FormFieldService }]; }, { field: [{
             type: Input
         }] }); })();
@@ -6625,7 +6623,7 @@ class FormGroupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormGroupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"group && group.fields.length > 0\" class=\"igo-form-group-fields\">\n  <div\n    *ngFor=\"let field of group.fields\"\n    class=\"igo-form-field-wrapper\"\n    [ngClass]=\"getFieldNgClass(field)\"\n  >\n    <igo-form-field [field]=\"field\"></igo-form-field>\n  </div>\n</div>\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content></ng-content>\n</div>\n\n<mat-error *ngIf=\"formControl.errors\">{{\n  getErrorMessage() | translate\n}}</mat-error>\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"] }]
+        args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"group && group.fields.length > 0\" class=\"igo-form-group-fields\">\r\n  <div\r\n    *ngFor=\"let field of group.fields\"\r\n    class=\"igo-form-field-wrapper\"\r\n    [ngClass]=\"getFieldNgClass(field)\"\r\n  >\r\n    <igo-form-field [field]=\"field\"></igo-form-field>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"igo-form-group-extra-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<mat-error *ngIf=\"formControl.errors\">{{\r\n  getErrorMessage() | translate\r\n}}</mat-error>\r\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"] }]
     }], function () { return []; }, { group: [{
             type: Input
         }], errors: [{
@@ -6766,7 +6764,7 @@ class FormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n  [autocomplete]=\"autocomplete\"\n  [formGroup]=\"form.control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div\n    class=\"igo-form-body\"\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\n  >\n    <div class=\"igo-form-content\">\n      <ng-content></ng-content>\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\"></ng-content>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
+        args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\r\n  [autocomplete]=\"autocomplete\"\r\n  [formGroup]=\"form.control\"\r\n  (ngSubmit)=\"onSubmit()\"\r\n>\r\n  <div\r\n    class=\"igo-form-body\"\r\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\r\n  >\r\n    <div class=\"igo-form-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div #buttons class=\"igo-form-buttons\">\r\n      <ng-content select=\"[formButtons]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
     }], function () { return []; }, { form: [{
             type: Input
         }], formData: [{
@@ -6836,7 +6834,7 @@ class HomeButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-home-button', template: "<button\n  id=\"homeButton\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\n  (click)=\"onUnselectButtonClick()\"\n>\n  <mat-icon svgIcon=\"home\"></mat-icon>\n</button>\n", styles: ["#homeButton{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-home-button', template: "<button\r\n  id=\"homeButton\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\r\n  (click)=\"onUnselectButtonClick()\"\r\n>\r\n  <mat-icon svgIcon=\"home\"></mat-icon>\r\n</button>\r\n", styles: ["#homeButton{border-radius:0}\n"] }]
     }], function () { return []; }, { unselectButton: [{
             type: Output
         }] }); })();
@@ -7939,7 +7937,7 @@ class JsonDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-json-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ title }}</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <ng-container\n    *ngTemplateOutlet=\"loopObject; context: { obj: data }\"\n  ></ng-container>\n\n  <ng-template #loopObject let-obj=\"obj\" let-baseKey=\"baseKey\">\n    <ng-container *ngFor=\"let property of obj | keyvalue\">\n      <ng-container\n        *ngIf=\"ignoreKeys.indexOf(getKey(baseKey, property.key)) === -1\"\n      >\n        <ng-container *ngIf=\"isObject(property.value); else notObject\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              loopObject;\n              context: {\n                obj: property.value,\n                baseKey: getKey(baseKey, property.key)\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template #notObject>\n          <p>\n            <span\n              ><b>{{ getKey(baseKey, property.key) }}</b> : </span\n            ><span class=\"propertyValue\" [innerHtml]=\"property.value\"></span>\n          </p>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(false)\">\n    OK\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-json-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ title }}</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"loopObject; context: { obj: data }\"\r\n  ></ng-container>\r\n\r\n  <ng-template #loopObject let-obj=\"obj\" let-baseKey=\"baseKey\">\r\n    <ng-container *ngFor=\"let property of obj | keyvalue\">\r\n      <ng-container\r\n        *ngIf=\"ignoreKeys.indexOf(getKey(baseKey, property.key)) === -1\"\r\n      >\r\n        <ng-container *ngIf=\"isObject(property.value); else notObject\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              loopObject;\r\n              context: {\r\n                obj: property.value,\r\n                baseKey: getKey(baseKey, property.key)\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #notObject>\r\n          <p>\r\n            <span\r\n              ><b>{{ getKey(baseKey, property.key) }}</b> : </span\r\n            ><span class=\"propertyValue\" [innerHtml]=\"property.value\"></span>\r\n          </p>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(false)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i1$6.MatDialogRef }]; }, null); })();
 
 class JsonDialogService {
@@ -8395,7 +8393,7 @@ class ListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-list', template: "<mat-list\n  igoClickout\n  [ngClass]=\"{ selectable: selection }\"\n  (clickout)=\"disableNavigation()\"\n  (click)=\"enableNavigation()\"\n>\n  <ng-content></ng-content>\n</mat-list>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host mat-list{padding-top:0}:host ::ng-deep .mat-mdc-list .mat-mdc-list-item .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mdc-list-item--with-leading-icon{height:48px}:host ::ng-deep .mat-mdc-list ::ng-deep igo-collapsible>.mat-mdc-list-item>.mdc-list-item__primary-text>.mat-mdc-list-item{font-weight:700;opacity:.9}:host mat-list.selectable ::ng-deep [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}:host ::ng-deep [igolistitem]:focus{outline:none}\n"] }]
+        args: [{ selector: 'igo-list', template: "<mat-list\r\n  igoClickout\r\n  [ngClass]=\"{ selectable: selection }\"\r\n  (clickout)=\"disableNavigation()\"\r\n  (click)=\"enableNavigation()\"\r\n>\r\n  <ng-content></ng-content>\r\n</mat-list>\r\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host mat-list{padding-top:0}:host ::ng-deep .mat-mdc-list .mat-mdc-list-item .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mdc-list-item--with-leading-icon{height:48px}:host ::ng-deep .mat-mdc-list ::ng-deep igo-collapsible>.mat-mdc-list-item>.mdc-list-item__primary-text>.mat-mdc-list-item{font-weight:700;opacity:.9}:host mat-list.selectable ::ng-deep [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}:host ::ng-deep [igolistitem]:focus{outline:none}\n"] }]
     }], function () { return [{ type: i0.ElementRef }]; }, { navigation: [{
             type: Input
         }], selection: [{
@@ -8477,7 +8475,7 @@ class PanelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PanelComponent, [{
         type: Component,
-        args: [{ selector: 'igo-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"withHeader\"\n  class=\"igo-panel-header\"\n  title=\"\"\n  [ngClass]=\"{ 'igo-cursor-pointer': cursorPointer === true }\"\n>\n  <div class=\"panel-left\">\n    <ng-content select=\"[panelLeftButton]\"></ng-content>\n  </div>\n  <h3 class=\"igo-panel-title\">\n    {{ title }}\n    <ng-content select=\"[panelHeader]\"></ng-content>\n  </h3>\n  <div class=\"panel-right\">\n    <ng-content select=\"[panelRightButton]\"></ng-content>\n  </div>\n</div>\n<div class=\"igo-panel-content\" title=\"\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host igo-interactive-tour{position:absolute;top:0;right:0}:host .igo-panel-header{display:flex;justify-content:space-between;align-items:center;height:48px;text-align:center}:host .igo-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;font-weight:600;flex:1}:host .igo-panel-content{flex:1;overflow:auto}:host .igo-cursor-pointer{cursor:pointer}:host .panel-left,:host .panel-right{display:flex;min-width:40px}:host .panel-right:not(:empty){padding-right:4px}\n"] }]
+        args: [{ selector: 'igo-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"withHeader\"\r\n  class=\"igo-panel-header\"\r\n  title=\"\"\r\n  [ngClass]=\"{ 'igo-cursor-pointer': cursorPointer === true }\"\r\n>\r\n  <div class=\"panel-left\">\r\n    <ng-content select=\"[panelLeftButton]\"></ng-content>\r\n  </div>\r\n  <h3 class=\"igo-panel-title\">\r\n    {{ title }}\r\n    <ng-content select=\"[panelHeader]\"></ng-content>\r\n  </h3>\r\n  <div class=\"panel-right\">\r\n    <ng-content select=\"[panelRightButton]\"></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"igo-panel-content\" title=\"\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host igo-interactive-tour{position:absolute;top:0;right:0}:host .igo-panel-header{display:flex;justify-content:space-between;align-items:center;height:48px;text-align:center}:host .igo-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;font-weight:600;flex:1}:host .igo-panel-content{flex:1;overflow:auto}:host .igo-cursor-pointer{cursor:pointer}:host .panel-left,:host .panel-right{display:flex;min-width:40px}:host .panel-right:not(:empty){padding-right:4px}\n"] }]
     }], null, { title: [{
             type: Input
         }], withHeader: [{
@@ -8608,7 +8606,7 @@ class SpinnerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpinnerComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spinner', template: "<div\n  [ngClass]=\"{\n    'igo-spinner-container': true,\n    'igo-spinner-shown': (shown$ | async)\n  }\"\n>\n  <div class=\"igo-spinner-background\"></div>\n  <mat-progress-spinner\n    diameter=\"40\"\n    mode=\"indeterminate\"\n  ></mat-progress-spinner>\n</div>\n", styles: [":host .igo-spinner-container{display:none;position:relative;pointer-events:none}:host .igo-spinner-container.igo-spinner-shown{display:block}:host mat-progress-spinner{height:40px;width:40px;border-radius:50%}:host .igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"] }]
+        args: [{ selector: 'igo-spinner', template: "<div\r\n  [ngClass]=\"{\r\n    'igo-spinner-container': true,\r\n    'igo-spinner-shown': (shown$ | async)\r\n  }\"\r\n>\r\n  <div class=\"igo-spinner-background\"></div>\r\n  <mat-progress-spinner\r\n    diameter=\"40\"\r\n    mode=\"indeterminate\"\r\n  ></mat-progress-spinner>\r\n</div>\r\n", styles: [":host .igo-spinner-container{display:none;position:relative;pointer-events:none}:host .igo-spinner-container.igo-spinner-shown{display:block}:host mat-progress-spinner{height:40px;width:40px;border-radius:50%}:host .igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"] }]
     }], function () { return []; }, { shown: [{
             type: Input
         }] }); })();
@@ -9036,7 +9034,7 @@ class TableComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
         type: Component,
-        args: [{ selector: 'igo-table', template: "<div class=\"table-box\">\n  <div class=\"table-header\" *ngIf=\"hasFilterInput\">\n    <mat-form-field floatPlaceholder=\"never\">\n      <input\n        matInput\n        #filter\n        [placeholder]=\"'igo.common.table.filter' | translate\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table #table [dataSource]=\"dataSource\" matSort>\n      <!-- Checkbox Column -->\n      <ng-container matColumnDef=\"selectionCheckbox\">\n        <th mat-header-cell *matHeaderCellDef>\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          >\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection.isSelected(row)\"\n          >\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-container\n        [matColumnDef]=\"column.name\"\n        *ngFor=\"let column of model.columns\"\n      >\n        <ng-container *ngIf=\"column.sortable\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header>\n            {{ column.title }}\n          </th>\n        </ng-container>\n\n        <ng-container *ngIf=\"!column.sortable\">\n          <th mat-header-cell *matHeaderCellDef>{{ column.title }}</th>\n        </ng-container>\n\n        <ng-container *ngIf=\"!column.html; else cellHTML\">\n          <td\n            mat-cell\n            *matCellDef=\"let row\"\n            class=\"mat-cell-text\"\n            [ngClass]=\"\n              model.cellClassFunc ? model.cellClassFunc(row, column) : {}\n            \"\n          >\n            {{ getValue(row, column.name) }}\n          </td>\n        </ng-container>\n\n        <ng-template #cellHTML>\n          <td\n            mat-cell\n            *matCellDef=\"let row\"\n            class=\"mat-cell-text\"\n            [ngClass]=\"\n              model.cellClassFunc ? model.cellClassFunc(row, column) : {}\n            \"\n            [innerHTML]=\"getValue(row, column.name)\"\n          ></td>\n        </ng-template>\n      </ng-container>\n\n      <!-- Action Column -->\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <button\n            *ngFor=\"let action of model.actions\"\n            mat-mini-fab\n            [color]=\"getActionColor(action.color)\"\n            (click)=\"handleClickAction($event, action, row)\"\n          >\n            <mat-icon svgIcon=\"{{ action.icon }}\"></mat-icon>\n          </button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [ngClass]=\"model.rowClassFunc ? model.rowClassFunc(row) : {}\"\n        (click)=\"selection.toggle(row)\"\n      ></tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;display:block}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.table-box{height:100%;display:flex;flex-direction:column}.table-header{min-height:64px;max-width:500px;display:flex;flex:0 1 auto;align-items:baseline;padding:8px 24px 0;font-size:20px;justify-content:space-between}tr[mat-header-row],tr[mat-row]{height:60px}.mat-cell-text{overflow:hidden;word-wrap:break-word}td[mat-cell]{padding-right:15px}th.mat-mdc-header-cell{padding-right:5px}button{margin-right:10px}\n"] }]
+        args: [{ selector: 'igo-table', template: "<div class=\"table-box\">\r\n  <div class=\"table-header\" *ngIf=\"hasFilterInput\">\r\n    <mat-form-field floatPlaceholder=\"never\">\r\n      <input\r\n        matInput\r\n        #filter\r\n        [placeholder]=\"'igo.common.table.filter' | translate\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"table-container\">\r\n    <table mat-table #table [dataSource]=\"dataSource\" matSort>\r\n      <!-- Checkbox Column -->\r\n      <ng-container matColumnDef=\"selectionCheckbox\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <mat-checkbox\r\n            (change)=\"$event ? masterToggle() : null\"\r\n            [checked]=\"selection.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n          >\r\n          </mat-checkbox>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\"\r\n          >\r\n          </mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container\r\n        [matColumnDef]=\"column.name\"\r\n        *ngFor=\"let column of model.columns\"\r\n      >\r\n        <ng-container *ngIf=\"column.sortable\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n            {{ column.title }}\r\n          </th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!column.sortable\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ column.title }}</th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!column.html; else cellHTML\">\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let row\"\r\n            class=\"mat-cell-text\"\r\n            [ngClass]=\"\r\n              model.cellClassFunc ? model.cellClassFunc(row, column) : {}\r\n            \"\r\n          >\r\n            {{ getValue(row, column.name) }}\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-template #cellHTML>\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let row\"\r\n            class=\"mat-cell-text\"\r\n            [ngClass]=\"\r\n              model.cellClassFunc ? model.cellClassFunc(row, column) : {}\r\n            \"\r\n            [innerHTML]=\"getValue(row, column.name)\"\r\n          ></td>\r\n        </ng-template>\r\n      </ng-container>\r\n\r\n      <!-- Action Column -->\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <button\r\n            *ngFor=\"let action of model.actions\"\r\n            mat-mini-fab\r\n            [color]=\"getActionColor(action.color)\"\r\n            (click)=\"handleClickAction($event, action, row)\"\r\n          >\r\n            <mat-icon svgIcon=\"{{ action.icon }}\"></mat-icon>\r\n          </button>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: displayedColumns\"\r\n        [ngClass]=\"model.rowClassFunc ? model.rowClassFunc(row) : {}\"\r\n        (click)=\"selection.toggle(row)\"\r\n      ></tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.table-box{height:100%;display:flex;flex-direction:column}.table-header{min-height:64px;max-width:500px;display:flex;flex:0 1 auto;align-items:baseline;padding:8px 24px 0;font-size:20px;justify-content:space-between}tr[mat-header-row],tr[mat-row]{height:60px}.mat-cell-text{overflow:hidden;word-wrap:break-word}td[mat-cell]{padding-right:15px}th.mat-mdc-header-cell{padding-right:5px}button{margin-right:10px}\n"] }]
     }], null, { database: [{
             type: Input
         }], model: [{
@@ -9369,7 +9367,7 @@ class ToolboxComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToolboxComponent, [{
         type: Component,
-        args: [{ selector: 'igo-toolbox', animations: [toolSlideInOut()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-actionbar\n  *ngIf=\"(toolbar$ | async).length > 0\"\n  [store]=\"actionStore\"\n  [withIcon]=\"true\"\n  [withTitle]=\"toolbarWithTitle$ | async\"\n  [withTooltip]=\"(toolbarWithTitle$ | async) === false\"\n  [scrollActive]=\"toolbarWithTitle$ | async\"\n  [horizontal]=\"false\"\n>\n</igo-actionbar>\n\n<div\n  *ngIf=\"activeTool$ | async as tool\"\n  class=\"igo-tool-container mat-body-1\"\n  [ngClass]=\"{\n    'igo-tool-container-with-toolbar': !actionStore.empty,\n    'igo-tool-container-with-animation': animate\n  }\"\n  [@toolSlideInOut]=\"animation$ | async\"\n  (@toolSlideInOut.start)=\"onAnimationStart()\"\n  (@toolSlideInOut.done)=\"onAnimationComplete()\"\n>\n  <igo-dynamic-outlet\n    [component]=\"tool.component\"\n    [inputs]=\"getToolInputs(tool)\"\n  >\n  </igo-dynamic-outlet>\n</div>\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}:host ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin:0}:host .igo-tool-container{position:absolute;inset:0;margin-bottom:0}:host .igo-tool-container-with-animation{transform:translate3d(100%,0,0)}:host .igo-tool-container-with-toolbar{left:50px}:host igo-actionbar{height:100%}:host igo-actionbar.with-title{width:100%;overflow:auto}:host igo-actionbar:not(.with-title){width:48px;overflow:hidden;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host igo-actionbar:not(.with-title){overflow:auto}}:host igo-dynamic-outlet{overflow:auto}\n"] }]
+        args: [{ selector: 'igo-toolbox', animations: [toolSlideInOut()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-actionbar\r\n  *ngIf=\"(toolbar$ | async).length > 0\"\r\n  [store]=\"actionStore\"\r\n  [withIcon]=\"true\"\r\n  [withTitle]=\"toolbarWithTitle$ | async\"\r\n  [withTooltip]=\"(toolbarWithTitle$ | async) === false\"\r\n  [scrollActive]=\"toolbarWithTitle$ | async\"\r\n  [horizontal]=\"false\"\r\n>\r\n</igo-actionbar>\r\n\r\n<div\r\n  *ngIf=\"activeTool$ | async as tool\"\r\n  class=\"igo-tool-container mat-body-1\"\r\n  [ngClass]=\"{\r\n    'igo-tool-container-with-toolbar': !actionStore.empty,\r\n    'igo-tool-container-with-animation': animate\r\n  }\"\r\n  [@toolSlideInOut]=\"animation$ | async\"\r\n  (@toolSlideInOut.start)=\"onAnimationStart()\"\r\n  (@toolSlideInOut.done)=\"onAnimationComplete()\"\r\n>\r\n  <igo-dynamic-outlet\r\n    [component]=\"tool.component\"\r\n    [inputs]=\"getToolInputs(tool)\"\r\n  >\r\n  </igo-dynamic-outlet>\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}:host ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin:0}:host .igo-tool-container{position:absolute;inset:0;margin-bottom:0}:host .igo-tool-container-with-animation{transform:translate3d(100%,0,0)}:host .igo-tool-container-with-toolbar{left:50px}:host igo-actionbar{height:100%}:host igo-actionbar.with-title{width:100%;overflow:auto}:host igo-actionbar:not(.with-title){width:48px;overflow:hidden;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host igo-actionbar:not(.with-title){overflow:auto}}:host igo-dynamic-outlet{overflow:auto}\n"] }]
     }], null, { toolbox: [{
             type: Input
         }], animate: [{
@@ -9547,7 +9545,7 @@ class WidgetOutletComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WidgetOutletComponent, [{
         type: Component,
-        args: [{ selector: 'igo-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-dynamic-outlet\n  *ngIf=\"widget\"\n  [component]=\"widget\"\n  [inputs]=\"inputs\"\n  [subscribers]=\"getEffectiveSubscribers()\"\n>\n</igo-dynamic-outlet>\n", styles: [":host igo-dynamic-outlet{height:100%}\n"] }]
+        args: [{ selector: 'igo-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-dynamic-outlet\r\n  *ngIf=\"widget\"\r\n  [component]=\"widget\"\r\n  [inputs]=\"inputs\"\r\n  [subscribers]=\"getEffectiveSubscribers()\"\r\n>\r\n</igo-dynamic-outlet>\r\n", styles: [":host igo-dynamic-outlet{height:100%}\n"] }]
     }], function () { return []; }, { widget: [{
             type: Input
         }], inputs: [{
@@ -9673,7 +9671,7 @@ class WorkspaceSelectorComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkspaceSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'igo-workspace-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-entity-selector\n  [store]=\"store\"\n  [multi]=\"false\"\n  [titleAccessor]=\"getWorkspaceTitle\"\n  [disabled]=\"disabled\"\n  (selectedChange)=\"onSelectedChange($event)\"\n>\n</igo-entity-selector>\n", styles: ["igo-entity-selector ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding:0}\n"] }]
+        args: [{ selector: 'igo-workspace-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-entity-selector\r\n  [store]=\"store\"\r\n  [multi]=\"false\"\r\n  [titleAccessor]=\"getWorkspaceTitle\"\r\n  [disabled]=\"disabled\"\r\n  (selectedChange)=\"onSelectedChange($event)\"\r\n>\r\n</igo-entity-selector>\r\n", styles: ["igo-entity-selector ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding:0}\n"] }]
     }], null, { store: [{
             type: Input
         }], disabled: [{
@@ -9924,7 +9922,7 @@ class WorkspaceWidgetOutletComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkspaceWidgetOutletComponent, [{
         type: Component,
-        args: [{ selector: 'igo-workspace-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"widget$ | async as widget\">\n  <igo-widget-outlet\n    [widget]=\"widget\"\n    [inputs]=\"widgetInputs$ | async\"\n    [subscribers]=\"widgetSubscribers$ | async\"\n    (cancel)=\"onWidgetCancel(widget)\"\n    (complete)=\"onWidgetComplete(widget)\"\n  >\n  </igo-widget-outlet>\n</ng-container>\n", styles: ["igo-widget-outlet{height:100%}\n"] }]
+        args: [{ selector: 'igo-workspace-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"widget$ | async as widget\">\r\n  <igo-widget-outlet\r\n    [widget]=\"widget\"\r\n    [inputs]=\"widgetInputs$ | async\"\r\n    [subscribers]=\"widgetSubscribers$ | async\"\r\n    (cancel)=\"onWidgetCancel(widget)\"\r\n    (complete)=\"onWidgetComplete(widget)\"\r\n  >\r\n  </igo-widget-outlet>\r\n</ng-container>\r\n", styles: ["igo-widget-outlet{height:100%}\n"] }]
     }], function () { return []; }, { workspace: [{
             type: Input
         }], deactivateWidget: [{