@unifylib/ui-lib 1.1.48 → 1.1.49

package/fesm2022/unifylib-ui-lib.mjs

@@ -668,7 +668,30 @@ class TitleBarComponent {
     goBack() {
         this.location.back();
     }
-    onButtonClick(btn) {
+    resolveButtonHref(btn) {
+        if (btn.showCommentDialog) {
+            return null;
+        }
+        const lh = btn.linkHref;
+        if (lh == null || lh === '') {
+            return null;
+        }
+        if (typeof lh === 'function') {
+            const resolved = lh(undefined);
+            const s = resolved != null ? String(resolved).trim() : '';
+            return s.length > 0 ? s : null;
+        }
+        const s = String(lh).trim();
+        return s.length > 0 ? s : null;
+    }
+    onButtonClick(btn, event) {
+        const href = this.resolveButtonHref(btn);
+        if (href && event) {
+            if (event.ctrlKey || event.metaKey || event.button === 1) {
+                return;
+            }
+            event.preventDefault();
+        }
         this.buttonClicked.emit(btn);
     }
     onViewModeChanged(isPending) {
@@ -688,7 +711,7 @@ class TitleBarComponent {
             this.onViewModeChanged(value === 'PENDING');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, deps: [{ token: i1$1.Location }, { token: i3.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n    <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of buttons\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <button\r\n          *ngFor=\"let btn of buttons\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"title-bar-list-button\"\r\n          (click)=\"onButtonClick(btn)\"\r\n          [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n    <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          type=\"button\"\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <ng-container *ngFor=\"let btn of buttons\">\r\n            <a\r\n              *ngIf=\"resolveButtonHref(btn) as href\"\r\n              mat-menu-item\r\n              [href]=\"href\"\r\n              (click)=\"onButtonClick(btn, $event)\"\r\n              [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n              <mat-icon>{{ btn.icon }}</mat-icon>\r\n              <span>{{ btn.label | translate }}</span>\r\n            </a>\r\n            <button\r\n              *ngIf=\"!resolveButtonHref(btn)\"\r\n              type=\"button\"\r\n              mat-menu-item\r\n              (click)=\"onButtonClick(btn)\"\r\n              [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n              <mat-icon>{{ btn.icon }}</mat-icon>\r\n              <span>{{ btn.label | translate }}</span>\r\n            </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <ng-container *ngFor=\"let btn of buttons\">\r\n          <a\r\n            *ngIf=\"resolveButtonHref(btn) as href\"\r\n            mat-flat-button\r\n            color=\"primary\"\r\n            class=\"title-bar-list-button\"\r\n            [href]=\"href\"\r\n            (click)=\"onButtonClick(btn, $event)\"\r\n            [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </a>\r\n          <button\r\n            *ngIf=\"!resolveButtonHref(btn)\"\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"primary\"\r\n            class=\"title-bar-list-button\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, decorators: [{
             type: Component,
@@ -703,7 +726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TranslateModule,
                         MatChipListbox,
                         MatChipOption,
-                    ], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n    <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of buttons\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <button\r\n          *ngFor=\"let btn of buttons\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"title-bar-list-button\"\r\n          (click)=\"onButtonClick(btn)\"\r\n          [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"] }]
+                    ], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n    <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          type=\"button\"\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <ng-container *ngFor=\"let btn of buttons\">\r\n            <a\r\n              *ngIf=\"resolveButtonHref(btn) as href\"\r\n              mat-menu-item\r\n              [href]=\"href\"\r\n              (click)=\"onButtonClick(btn, $event)\"\r\n              [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n              <mat-icon>{{ btn.icon }}</mat-icon>\r\n              <span>{{ btn.label | translate }}</span>\r\n            </a>\r\n            <button\r\n              *ngIf=\"!resolveButtonHref(btn)\"\r\n              type=\"button\"\r\n              mat-menu-item\r\n              (click)=\"onButtonClick(btn)\"\r\n              [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n              <mat-icon>{{ btn.icon }}</mat-icon>\r\n              <span>{{ btn.label | translate }}</span>\r\n            </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <ng-container *ngFor=\"let btn of buttons\">\r\n          <a\r\n            *ngIf=\"resolveButtonHref(btn) as href\"\r\n            mat-flat-button\r\n            color=\"primary\"\r\n            class=\"title-bar-list-button\"\r\n            [href]=\"href\"\r\n            (click)=\"onButtonClick(btn, $event)\"\r\n            [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </a>\r\n          <button\r\n            *ngIf=\"!resolveButtonHref(btn)\"\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"primary\"\r\n            class=\"title-bar-list-button\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Location }, { type: i3.Directionality }], propDecorators: { pageTitle: [{
                 type: Input
             }], showExtractButton: [{