@igo2/common 1.14.2 → 1.14.4

package/fesm2020/igo2-common.mjs

@@ -4061,10 +4061,10 @@ ActionbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Actionba
         i0.ɵɵproperty("ngIf", ctx.mode === ctx.actionbarMode.Overlay);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.mode === ctx.actionbarMode.Context);
-    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$2.MatButton, i3$2.MatIcon, i6$1.MatTooltip, i7$1.MatMenu, i7$1.MatMenuTrigger, i2$3.MatList, i9.MatCard, ActionbarItemComponent, i1.AsyncPipe, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{display:block;height:100%;overflow:auto;position:relative}button[_ngcontent-%COMP%]{margin:4px}.buttonOverlay[_ngcontent-%COMP%]{margin:0}mat-list[_ngcontent-%COMP%]{padding-top:0}.horizontal[_nghost-%COMP%]{max-width:100%;overflow:visible;overflow:initial}.horizontal[_nghost-%COMP%]   mat-list[_ngcontent-%COMP%]{width:auto;white-space:nowrap}.horizontal[_nghost-%COMP%]   igo-actionbar-item[_ngcontent-%COMP%]{display:inline-block}[_nghost-%COMP%]     .mat-list .mat-list-item .mat-list-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}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item:hover{cursor:pointer}.context-menu-card[_ngcontent-%COMP%]{padding:8px 3px;margin:10px}#topChevron[_ngcontent-%COMP%]{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}#lowChevron[_ngcontent-%COMP%]{position:fixed;position:-webkit-sticky;position:sticky;bottom:0;background-color:#fff;z-index:3}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$2.MatButton, i3$2.MatIcon, i6$1.MatTooltip, i7$1.MatMenu, i7$1.MatMenuTrigger, i2$3.MatList, i9.MatCard, ActionbarItemComponent, i1.AsyncPipe, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{display:block;height:100%;overflow:auto;position:relative}button[_ngcontent-%COMP%]{margin:4px}.buttonOverlay[_ngcontent-%COMP%]{margin:0}mat-list[_ngcontent-%COMP%]{padding-top:0}.horizontal[_nghost-%COMP%]{max-width:100%;overflow:visible;overflow:initial}.horizontal[_nghost-%COMP%]   mat-list[_ngcontent-%COMP%]{width:auto;white-space:nowrap}.horizontal[_nghost-%COMP%]   igo-actionbar-item[_ngcontent-%COMP%]{display:inline-block}[_nghost-%COMP%]     .mat-list .mat-list-item .mat-list-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}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item:hover{cursor:pointer}.context-menu-card[_ngcontent-%COMP%]{padding:8px 3px;margin:10px}#topChevron[_ngcontent-%COMP%]{position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}#lowChevron[_ngcontent-%COMP%]{position:fixed;position:sticky;bottom:0;background-color:#fff;z-index:3}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionbarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\">\n\n    <div *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n      id=\"topChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n        (click)=\"scrollUp()\">\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    </igo-actionbar-item>\n\n    <ng-template #buttonContent *ngIf=\"!collapsed\" ngFor let-action [ngForOf]=\"store.view.all$() | async\">\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      </igo-actionbar-item>\n    </ng-template>\n\n    <div *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n      id=\"lowChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n        (click)=\"scrollDown()\">\n        <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n      </button>\n    </div>\n\n</mat-list>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n  <button 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    <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        </igo-actionbar-item>\n      </ng-template>\n    </mat-list>\n  </mat-menu>\n</div>\n<mat-card *ngIf=\"mode === actionbarMode.Context\" class=\"context-menu-card mat-elevation-z4\">\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          </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}button{margin:4px}.buttonOverlay{margin:0}mat-list{padding-top:0}:host.horizontal{max-width:100%;overflow:visible;overflow:initial}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host ::ng-deep .mat-list .mat-list-item .mat-list-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-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item ::ng-deep mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item ::ng-deep mat-list-item:hover{cursor:pointer}.context-menu-card{padding:8px 3px;margin:10px}#topChevron{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron{position:fixed;top:auto;top:initial}}#lowChevron{position:fixed;position:-webkit-sticky;position:sticky;bottom:0;background-color:#fff;z-index:3}\n"] }]
+        args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\">\n\n    <div *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n      id=\"topChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n        (click)=\"scrollUp()\">\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    </igo-actionbar-item>\n\n    <ng-template #buttonContent *ngIf=\"!collapsed\" ngFor let-action [ngForOf]=\"store.view.all$() | async\">\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      </igo-actionbar-item>\n    </ng-template>\n\n    <div *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n      id=\"lowChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n        (click)=\"scrollDown()\">\n        <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n      </button>\n    </div>\n\n</mat-list>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n  <button 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    <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        </igo-actionbar-item>\n      </ng-template>\n    </mat-list>\n  </mat-menu>\n</div>\n<mat-card *ngIf=\"mode === actionbarMode.Context\" class=\"context-menu-card mat-elevation-z4\">\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          </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}button{margin:4px}.buttonOverlay{margin:0}mat-list{padding-top:0}:host.horizontal{max-width:100%;overflow:visible;overflow:initial}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host ::ng-deep .mat-list .mat-list-item .mat-list-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-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item ::ng-deep mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item ::ng-deep mat-list-item:hover{cursor:pointer}.context-menu-card{padding:8px 3px;margin:10px}#topChevron{position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron{position:fixed;top:auto;top:initial}}#lowChevron{position:fixed;position:sticky;bottom:0;background-color:#fff;z-index:3}\n"] }]
     }], function () { return [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MediaService }]; }, { store: [{
             type: Input
         }], mode: [{
@@ -4186,10 +4186,10 @@ BackdropComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BackdropC
         i0.ɵɵelement(0, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0$b, ctx.shown));
-    } }, dependencies: [i1.NgClass], styles: ["[_nghost-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#64646480;z-index:2;display:none}[_nghost-%COMP%] > div.igo-backdrop-shown[_ngcontent-%COMP%]{display:block}"] });
+    } }, dependencies: [i1.NgClass], styles: ["[_nghost-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;inset:0;background-color:#64646480;z-index:2;display:none}[_nghost-%COMP%] > div.igo-backdrop-shown[_ngcontent-%COMP%]{display:block}"] });
 (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;top:0;bottom:0;left:0;right: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>\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
         }] }); })();
@@ -4870,7 +4870,7 @@ CustomHtmlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomH
     } }, dependencies: [SanitizeHtmlPipe], styles: [".custom-html[_ngcontent-%COMP%]{padding:20px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomHtmlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-custom-html', template: "<div class=\"custom-html\" [innerHTML]=\"html | sanitizeHtml\"></div>\n", styles: [".custom-html{padding:20px}\n"] }]
+        args: [{ selector: 'igo-custom-html', template: "<div class=\"custom-html\" [innerHTML]=\"html | sanitizeHtml\"></div>\r\n", styles: [".custom-html{padding:20px}\n"] }]
     }], function () { return []; }, { html: [{
             type: Input
         }] }); })();
@@ -5368,7 +5368,7 @@ DynamicOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dyna
     } }, styles: ["[_nghost-%COMP%]{display:block;width:100%;height:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicOutletComponent, [{
         type: Component,
-        args: [{ selector: 'igo-dynamic-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #target></ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        args: [{ selector: 'igo-dynamic-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #target></ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
     }], function () { return [{ type: DynamicComponentService }, { type: i0.ChangeDetectorRef }]; }, { component: [{
             type: Input
         }], inputs: [{
@@ -5550,10 +5550,10 @@ FlexibleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlexibleC
         i0.ɵɵelementEnd()()();
     } if (rf & 2) {
         i0.ɵɵclassMapInterpolate2("igo-flexible-main ", ctx.state, " ", ctx.direction, "");
-    } }, styles: ["[_nghost-%COMP%]{display:flex;height:100%;width:100%}.column[_nghost-%COMP%]{flex-direction:column}.row[_nghost-%COMP%]{flex-direction:row}.igo-flexible-main[_ngcontent-%COMP%]{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column[_ngcontent-%COMP%]{transition:height .25s ease-in}.igo-flexible-main.row[_ngcontent-%COMP%]{transition:width .25s ease-in}.igo-flexible-fill[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0}.igo-container[_ngcontent-%COMP%]{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}  .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}  .igo-content{height:100%;width:100%;overflow:auto}  igo-panel{height:100%}"] });
+    } }, styles: ["[_nghost-%COMP%]{display:flex;height:100%;width:100%}.column[_nghost-%COMP%]{flex-direction:column}.row[_nghost-%COMP%]{flex-direction:row}.igo-flexible-main[_ngcontent-%COMP%]{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column[_ngcontent-%COMP%]{transition:height .25s ease-in}.igo-flexible-main.row[_ngcontent-%COMP%]{transition:width .25s ease-in}.igo-flexible-fill[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;inset:0}.igo-container[_ngcontent-%COMP%]{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}  .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}  .igo-content{height:100%;width:100%;overflow:auto}  igo-panel{height:100%}"] });
 (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  \t<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}.igo-flexible-main{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column{transition:height .25s ease-in}.igo-flexible-main.row{transition:width .25s ease-in}.igo-flexible-fill>div{position:absolute;top:0;bottom:0;left:0;right:0}.igo-container{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}::ng-deep .igo-content{height:100%;width:100%;overflow:auto}::ng-deep igo-panel{height:100%}\n"] }]
+        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  \t<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}.igo-flexible-main{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column{transition:height .25s ease-in}.igo-flexible-main.row{transition:width .25s ease-in}.igo-flexible-fill>div{position:absolute;inset:0}.igo-container{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}::ng-deep .igo-content{height:100%;width:100%;overflow:auto}::ng-deep igo-panel{height:100%}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i1$1.MediaService }]; }, { main: [{
             type: ViewChild,
             args: ['flexibleMain', { static: true }]
@@ -6503,10 +6503,10 @@ HomeButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeBut
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 1, "igo.context.sidenav.mainMenu"));
-    } }, dependencies: [i3$2.MatIcon, i2$2.MatButton, i6$1.MatTooltip, i6$2.TranslatePipe], styles: ["#homeButton[_ngcontent-%COMP%]{position:absolute;top:50px;left:0px;border-radius:0;height:46px;width:48px}"] });
+    } }, dependencies: [i3$2.MatIcon, i2$2.MatButton, i6$1.MatTooltip, i6$2.TranslatePipe], styles: ["#homeButton[_ngcontent-%COMP%]{position:absolute;top:50px;left:0;border-radius:0;height:46px;width:48px}"] });
 (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    <mat-icon svgIcon=\"home\"></mat-icon>\n</button>\n", styles: ["#homeButton{position:absolute;top:50px;left:0px;border-radius:0;height:46px;width:48px}\n"] }]
+        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    <mat-icon svgIcon=\"home\"></mat-icon>\n</button>\n", styles: ["#homeButton{position:absolute;top:50px;left:0;border-radius:0;height:46px;width:48px}\n"] }]
     }], function () { return []; }, { unselectButton: [{
             type: Output
         }] }); })();
@@ -8950,10 +8950,10 @@ ToolboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToolboxCom
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 2, ctx.toolbar$).length > 0);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(3, 4, ctx.activeTool$));
-    } }, dependencies: [i1.NgClass, i1.NgIf, ActionbarComponent, DynamicOutletComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0}.igo-tool-container-with-animation[_ngcontent-%COMP%]{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar[_ngcontent-%COMP%]{left:50px}igo-actionbar[_ngcontent-%COMP%]{height:100%}igo-actionbar.with-title[_ngcontent-%COMP%]{width:100%;overflow:auto}igo-actionbar[_ngcontent-%COMP%]: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){igo-actionbar[_ngcontent-%COMP%]:not(.with-title){overflow:auto}}igo-dynamic-outlet[_ngcontent-%COMP%]{overflow:auto}"], data: { animation: [toolSlideInOut()] }, changeDetection: 0 });
+    } }, dependencies: [i1.NgClass, i1.NgIf, ActionbarComponent, DynamicOutletComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container[_ngcontent-%COMP%]{position:absolute;inset:0}.igo-tool-container-with-animation[_ngcontent-%COMP%]{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar[_ngcontent-%COMP%]{left:50px}igo-actionbar[_ngcontent-%COMP%]{height:100%}igo-actionbar.with-title[_ngcontent-%COMP%]{width:100%;overflow:auto}igo-actionbar[_ngcontent-%COMP%]: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){igo-actionbar[_ngcontent-%COMP%]:not(.with-title){overflow:auto}}igo-dynamic-outlet[_ngcontent-%COMP%]{overflow:auto}"], data: { animation: [toolSlideInOut()] }, changeDetection: 0 });
 (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</igo-actionbar>\n\n<div\n  *ngIf=\"activeTool$ | async as tool\"\n  class=\"igo-tool-container\"\n  [ngClass]=\"{'igo-tool-container-with-toolbar': !actionStore.empty, 'igo-tool-container-with-animation': animate}\"\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  </igo-dynamic-outlet>\n\n</div>\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container{position:absolute;top:0;bottom:0;left:0;right:0}.igo-tool-container-with-animation{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar{left:50px}igo-actionbar{height:100%}igo-actionbar.with-title{width:100%;overflow:auto}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){igo-actionbar:not(.with-title){overflow:auto}}igo-dynamic-outlet{overflow:auto}\n"] }]
+        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</igo-actionbar>\n\n<div\n  *ngIf=\"activeTool$ | async as tool\"\n  class=\"igo-tool-container\"\n  [ngClass]=\"{'igo-tool-container-with-toolbar': !actionStore.empty, 'igo-tool-container-with-animation': animate}\"\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  </igo-dynamic-outlet>\n\n</div>\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container{position:absolute;inset:0}.igo-tool-container-with-animation{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar{left:50px}igo-actionbar{height:100%}igo-actionbar.with-title{width:100%;overflow:auto}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){igo-actionbar:not(.with-title){overflow:auto}}igo-dynamic-outlet{overflow:auto}\n"] }]
     }], null, { toolbox: [{
             type: Input
         }], animate: [{