@testgorilla/tgo-ui 11.5.0-beta.1 → 11.6.0

package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs

@@ -53,10 +53,10 @@ class MobileNavbarSideSheetComponent {
     clickMenuItem(id) {
         this.menuItemClicked.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-mobile-navbar-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
@@ -297,10 +297,10 @@ class NavbarComponent {
     observeMaxWidth(breakpointPx) {
         return toSignal(toObservable(breakpointPx).pipe(switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`)), map(state => state.matches)), { initialValue: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: NavbarComponent, isStandalone: true, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, collapseBreakpoint: { classPropertyName: "collapseBreakpoint", publicName: "collapseBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, providers: [UiTranslatePipe], ngImport: i0, template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: SideSheetComponentModule }, { kind: "component", type: i1$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "iconColor", "trailingIcon", "trailingIconColor", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2$1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { 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: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "menuContentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: NavbarComponent, isStandalone: true, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, collapseBreakpoint: { classPropertyName: "collapseBreakpoint", publicName: "collapseBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, providers: [UiTranslatePipe], ngImport: i0, template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: SideSheetComponentModule }, { kind: "component", type: i1$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "iconColor", "trailingIcon", "trailingIconColor", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2$1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { 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: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "menuContentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SideSheetComponentModule,
@@ -323,8 +323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         }], propDecorators: { routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], activedRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activedRoute", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], contentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplateRef", required: false }] }], userInfoExtraTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfoExtraTemplateRef", required: false }] }], menuContentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuContentTemplateRef", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], collapseBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseBreakpoint", required: false }] }], isAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAvatar", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], navigateEvent: [{ type: i0.Output, args: ["navigateEvent"] }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], logoutEvent: [{ type: i0.Output, args: ["logoutEvent"] }], menuState: [{ type: i0.Output, args: ["menuState"] }] } });
 
 class NavbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -339,7 +339,7 @@ class NavbarComponentModule {
             MobileNavbarSideSheetComponent,
             BadgeComponentModule,
             NavbarComponent], exports: [NavbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -354,7 +354,7 @@ class NavbarComponentModule {
             BadgeComponentModule,
             NavbarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NavbarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NavbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs

@@ -1,6 +1,6 @@
 import { NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, inject, DestroyRef, ViewChild, ViewChildren, Output, Input, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, EventEmitter, signal, inject, DestroyRef, ViewChild, ViewChildren, Output, Input, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatMenuTrigger, MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -74,6 +74,15 @@ class OverflowMenuComponent {
          */
         this.buttonSize = 'medium';
         this.menuConfig = DEFAULT_MENU_CONFIG;
+        /**
+         * Selection semantics of the menu. 'single' renders every entry as a menuitemradio whose
+         * aria-checked and right-aligned check come from the button's isSelected flag; 'none' keeps
+         * plain menuitem entries.
+         *
+         * @type {OverflowMenuSelectionMode}
+         * @memberof OverflowMenuComponent
+         */
+        this.selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         this.isDynamicMenu = false;
         this.withRemovableOption = false;
         this.selectItem = new EventEmitter();
@@ -95,7 +104,9 @@ class OverflowMenuComponent {
         this.reindex();
     }
     ngOnChanges(changes) {
-        if (changes['buttons'] && this.isDynamicMenu) {
+        // Selection menus re-render on their own: the natural flow is to hand in a new buttons array
+        // after a pick, and requiring isDynamicMenu for the check to move would be an untold coupling.
+        if (changes['buttons'] && (this.isDynamicMenu || this.selectionMode() === 'single')) {
             this.resetSubmenus();
             this.createSubmenus(this.buttons, 's0', 1);
             this.reindex();
@@ -119,6 +130,14 @@ class OverflowMenuComponent {
             }));
         }, 300);
     }
+    /** Opens the dropdown programmatically, as if the trigger had been used. */
+    openMenu() {
+        this.matTrigger.first?.openMenu();
+    }
+    /** Closes the dropdown, whichever way it was opened. */
+    closeMenu() {
+        this.matTrigger.first?.closeMenu();
+    }
     onSelectItem(event, value) {
         if (value) {
             this.selectItem.emit(value);
@@ -194,6 +213,7 @@ class OverflowMenuComponent {
             tooltipText: item.tooltipText,
             value: item.value,
             disabled: item.disabled,
+            isSelected: item.isSelected,
             btnTemplate: item.btnTemplate,
             subMenu: item.subMenu ? 0 : -1,
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty action falls back to a generated key
@@ -208,10 +228,10 @@ class OverflowMenuComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: OverflowMenuComponent, isStandalone: true, selector: "ui-overflow-menu", inputs: { buttons: "buttons", iconTrigger: "iconTrigger", menuLabel: "menuLabel", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", describedby: "describedby", contentTemplateRef: "contentTemplateRef", buttonVariant: "buttonVariant", buttonSize: "buttonSize", menuConfig: "menuConfig", isDynamicMenu: "isDynamicMenu", withRemovableOption: "withRemovableOption" }, outputs: { selectItem: "selectItem", menuOpened: "menuOpened", menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }, { propertyName: "matmenus", predicate: MatMenu, descendants: true }, { propertyName: "matTrigger", predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n  @if (isMenuRendered()) {\n    <button\n      #buttonElement\n      [ngClass]=\"{\n        'icon-button': !contentTemplateRef && !buttonVariant,\n        'content-template': contentTemplateRef,\n        'no-hover': buttonVariant,\n      }\"\n      [matMenuTriggerFor]=\"matmenus.first\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-required]=\"ariaRequired\"\n      [attr.aria-describedby]=\"'describedby'\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"isMenuOpened()\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\"\n      class=\"overflow-menu-opener\"\n      [matTooltip]=\"menuLabel\"\n    >\n      <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n      @if (buttonVariant) {\n        <ui-button\n          [variant]=\"buttonVariant\"\n          [justIcon]=\"true\"\n          [iconName]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [disabled]=\"false\"\n          [size]=\"buttonSize\"\n        >\n        </ui-button>\n      } @else if (contentTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n      } @else {\n        <ui-icon\n          [name]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [size]=\"'24'\"\n          [color]=\"'rebrand-black'\"\n        ></ui-icon>\n      }\n    </button>\n  }\n\n  @for (menu of submenus; track submenus[$index]) {\n    <mat-menu\n      [xPosition]=\"menuConfig.xPosition\"\n      [yPosition]=\"menuConfig.yPosition\"\n      #matMenu\n      [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n      [overlapTrigger]=\"menuConfig.overlapTrigger\"\n      backdropClass=\"overflow-menu-backdrop\"\n    >\n      @for (button of menu; track trackByButton(id, button); let id = $index) {\n        @if (button.btnTemplate) {\n          <!-- Menu option by provided button template-->\n          <ng-container\n            [ngTemplateOutlet]=\"button.btnTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: button }\"\n          ></ng-container>\n        } @else if (withRemovableOption) {\n          <!--  Simple menu option that can be removed dynamically -->\n          <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n            <span\n              [id]=\"'labelledby-' + button.label + id\"\n              class=\"label\"\n              uiEllipseText\n              [refresh]=\"isMenuOpened()\"\n              [maxDiffPixels]=\"1\"\n              [isMultiline]=\"true\"\n              (onChangeTextState)=\"button.isTextEllipsed = $event\"\n              >{{ button.label }}\n            </span>\n            @if (button.icon) {\n              <ui-button\n                variant=\"icon-button\"\n                [applicationTheme]=\"applicationTheme\"\n                [iconName]=\"button.icon\"\n                [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n                [tooltipPosition]=\"'above'\"\n                [size]=\"'medium'\"\n                (focus)=\"onButtonFocus(button)\"\n                (blur)=\"onButtonBlur(button)\"\n                (mouseenter)=\"onButtonHover(button, true)\"\n                (mouseleave)=\"onButtonHover(button, false)\"\n                (click)=\"onSelectItem($event, button.value)\"\n              >\n              </ui-button>\n            }\n          </div>\n        } @else {\n          <!--  Default non-removable menu option -->\n          @if (button.isTitleButton && !button.hideTitleButton) {\n            <div class=\"menu-title\">{{ button.label }}</div>\n          }\n          @if (!button.isTitleButton) {\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n              (menuOpened)=\"onSubmenuOpened()\"\n              (focus)=\"onButtonFocus(button)\"\n              (blur)=\"onButtonBlur(button)\"\n              (mouseenter)=\"onButtonHover(button, true)\"\n              (mouseleave)=\"onButtonHover(button, false)\"\n              [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n              disableRipple\n              (click)=\"onButtonClick(button, $event)\"\n              [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n              [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n              [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n              [attr.aria-label]=\"button.ariaLabel || null\"\n              role=\"menuitem\"\n              matTooltipPosition=\"right\"\n            >\n              <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n                {{\n                  button.disabled\n                    ? ('MENU.MENUITEM_DISABLED' | uiTranslate | async) + ' ' + (button.describedby || '')\n                    : button.describedby\n                }}\n              </span>\n              @if (button.icon) {\n                <ui-icon\n                  [name]=\"button.icon\"\n                  [toggleIconStyle]=\"true\"\n                  [filled]=\"\n                    button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n                  \"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n                ></ui-icon>\n              }\n              <span\n                [id]=\"'labelledby-' + button.label + id\"\n                class=\"label\"\n                uiEllipseText\n                [refresh]=\"isMenuOpened()\"\n                [maxDiffPixels]=\"1\"\n                [isMultiline]=\"true\"\n                (onChangeTextState)=\"button.isTextEllipsed = $event\"\n                >{{ button.label }}</span\n              >\n              @if (button.isPremium) {\n                <ui-icon\n                  [name]=\"'Premium-circle-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  class=\"premium-icon\"\n                ></ui-icon>\n              }\n            </button>\n          }\n        }\n      }\n\n      <ng-content select=\"[menu-content]\"></ng-content>\n    </mat-menu>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;border:unset;cursor:pointer;margin:0}.overflow-menu-opener.content-template{display:flex;justify-content:flex-start;height:100%;width:100%;padding:1px 8px 0 6px}.overflow-menu-opener.icon-button{height:40px;width:40px;border-radius:50px;display:flex;align-items:center;justify-content:center}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-title{padding:16px;font-weight:700}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-option{padding:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.overflow-menu-backdrop+* .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing);padding-top:16px;padding-bottom:16px}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.premium-icon{margin-left:8px;flex-shrink:0}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;line-height:16px}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}.overflow-menu-opener.no-hover:hover{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { 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: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: OverflowMenuComponent, isStandalone: true, selector: "ui-overflow-menu", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: false, isRequired: false, transformFunction: null }, iconTrigger: { classPropertyName: "iconTrigger", publicName: "iconTrigger", isSignal: false, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: false, isRequired: false, transformFunction: null }, describedby: { classPropertyName: "describedby", publicName: "describedby", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: false, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: false, isRequired: false, transformFunction: null }, menuConfig: { classPropertyName: "menuConfig", publicName: "menuConfig", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, isDynamicMenu: { classPropertyName: "isDynamicMenu", publicName: "isDynamicMenu", isSignal: false, isRequired: false, transformFunction: null }, withRemovableOption: { classPropertyName: "withRemovableOption", publicName: "withRemovableOption", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", menuOpened: "menuOpened", menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }, { propertyName: "matmenus", predicate: MatMenu, descendants: true }, { propertyName: "matTrigger", predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n  @if (isMenuRendered()) {\n    <button\n      #buttonElement\n      [ngClass]=\"{\n        'icon-button': !contentTemplateRef && !buttonVariant,\n        'content-template': contentTemplateRef,\n        'no-hover': buttonVariant,\n      }\"\n      [matMenuTriggerFor]=\"matmenus.first\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-required]=\"ariaRequired\"\n      [attr.aria-describedby]=\"'describedby'\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"isMenuOpened()\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\"\n      class=\"overflow-menu-opener\"\n      [matTooltip]=\"menuLabel\"\n    >\n      <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n      @if (buttonVariant) {\n        <ui-button\n          [variant]=\"buttonVariant\"\n          [justIcon]=\"true\"\n          [iconName]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [disabled]=\"false\"\n          [size]=\"buttonSize\"\n        >\n        </ui-button>\n      } @else if (contentTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n      } @else {\n        <ui-icon\n          [name]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [size]=\"'24'\"\n          [color]=\"'rebrand-black'\"\n        ></ui-icon>\n      }\n    </button>\n  }\n\n  <!-- Tracked by index so refreshing the buttons re-renders the rows without destroying an open\n       mat-menu, whose trigger would otherwise be left holding a dead overlay. -->\n  @for (menu of submenus; track $index) {\n    <mat-menu\n      [xPosition]=\"menuConfig.xPosition\"\n      [yPosition]=\"menuConfig.yPosition\"\n      #matMenu\n      [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n      [overlapTrigger]=\"menuConfig.overlapTrigger\"\n      backdropClass=\"overflow-menu-backdrop\"\n    >\n      @for (button of menu; track trackByButton(id, button); let id = $index) {\n        @if (button.btnTemplate) {\n          <!-- Menu option by provided button template-->\n          <ng-container\n            [ngTemplateOutlet]=\"button.btnTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: button }\"\n          ></ng-container>\n        } @else if (withRemovableOption) {\n          <!--  Simple menu option that can be removed dynamically -->\n          <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n            <span\n              [id]=\"'labelledby-' + button.label + id\"\n              class=\"label\"\n              uiEllipseText\n              [refresh]=\"isMenuOpened()\"\n              [maxDiffPixels]=\"1\"\n              [isMultiline]=\"true\"\n              (onChangeTextState)=\"button.isTextEllipsed = $event\"\n              >{{ button.label }}\n            </span>\n            @if (button.icon) {\n              <ui-button\n                variant=\"icon-button\"\n                [applicationTheme]=\"applicationTheme\"\n                [iconName]=\"button.icon\"\n                [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n                [tooltipPosition]=\"'above'\"\n                [size]=\"'medium'\"\n                (focus)=\"onButtonFocus(button)\"\n                (blur)=\"onButtonBlur(button)\"\n                (mouseenter)=\"onButtonHover(button, true)\"\n                (mouseleave)=\"onButtonHover(button, false)\"\n                (click)=\"onSelectItem($event, button.value)\"\n              >\n              </ui-button>\n            }\n          </div>\n        } @else {\n          <!--  Default non-removable menu option -->\n          @if (button.isTitleButton && !button.hideTitleButton) {\n            <div class=\"menu-title\">{{ button.label }}</div>\n          }\n          @if (!button.isTitleButton) {\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n              (menuOpened)=\"onSubmenuOpened()\"\n              (focus)=\"onButtonFocus(button)\"\n              (blur)=\"onButtonBlur(button)\"\n              (mouseenter)=\"onButtonHover(button, true)\"\n              (mouseleave)=\"onButtonHover(button, false)\"\n              [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n              disableRipple\n              (click)=\"onButtonClick(button, $event)\"\n              [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n              [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n              [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n              [attr.aria-label]=\"button.ariaLabel || null\"\n              [role]=\"selectionMode() === 'single' ? 'menuitemradio' : 'menuitem'\"\n              [attr.aria-checked]=\"selectionMode() === 'single' ? !!button.isSelected : null\"\n              matTooltipPosition=\"right\"\n            >\n              <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n                {{\n                  button.disabled\n                    ? ('MENU.MENUITEM_DISABLED' | uiTranslate | async) + ' ' + (button.describedby || '')\n                    : button.describedby\n                }}\n              </span>\n              @if (button.icon) {\n                <ui-icon\n                  [name]=\"button.icon\"\n                  [toggleIconStyle]=\"true\"\n                  [filled]=\"\n                    button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n                  \"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n                ></ui-icon>\n              }\n              <span\n                [id]=\"'labelledby-' + button.label + id\"\n                class=\"label\"\n                uiEllipseText\n                [refresh]=\"isMenuOpened()\"\n                [maxDiffPixels]=\"1\"\n                [isMultiline]=\"true\"\n                (onChangeTextState)=\"button.isTextEllipsed = $event\"\n                >{{ button.label }}</span\n              >\n              @if (selectionMode() === 'single' && button.isSelected) {\n                <ui-icon\n                  class=\"overflow-menu-selected-check\"\n                  [name]=\"'Check-small-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'16'\"\n                  [color]=\"'rebrand-black'\"\n                ></ui-icon>\n              }\n              @if (button.isPremium) {\n                <ui-icon\n                  [name]=\"'Premium-circle-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  class=\"premium-icon\"\n                ></ui-icon>\n              }\n            </button>\n          }\n        }\n      }\n\n      <ng-content select=\"[menu-content]\"></ng-content>\n    </mat-menu>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;border:unset;cursor:pointer;margin:0}.overflow-menu-opener.content-template{display:flex;justify-content:flex-start;height:100%;width:100%;padding:1px 8px 0 6px}.overflow-menu-opener.icon-button{height:40px;width:40px;border-radius:50px;display:flex;align-items:center;justify-content:center}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-title{padding:16px;font-weight:700}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-option{padding:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.overflow-menu-backdrop+* .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing);padding-top:16px;padding-bottom:16px}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.premium-icon{margin-left:8px;flex-shrink:0}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;line-height:16px}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}.overflow-menu-opener.no-hover:hover{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { 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: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-overflow-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
@@ -225,7 +245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         MatMenuItem,
                         AsyncPipe,
                         UiTranslatePipe,
-                    ], template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n  @if (isMenuRendered()) {\n    <button\n      #buttonElement\n      [ngClass]=\"{\n        'icon-button': !contentTemplateRef && !buttonVariant,\n        'content-template': contentTemplateRef,\n        'no-hover': buttonVariant,\n      }\"\n      [matMenuTriggerFor]=\"matmenus.first\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-required]=\"ariaRequired\"\n      [attr.aria-describedby]=\"'describedby'\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"isMenuOpened()\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\"\n      class=\"overflow-menu-opener\"\n      [matTooltip]=\"menuLabel\"\n    >\n      <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n      @if (buttonVariant) {\n        <ui-button\n          [variant]=\"buttonVariant\"\n          [justIcon]=\"true\"\n          [iconName]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [disabled]=\"false\"\n          [size]=\"buttonSize\"\n        >\n        </ui-button>\n      } @else if (contentTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n      } @else {\n        <ui-icon\n          [name]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [size]=\"'24'\"\n          [color]=\"'rebrand-black'\"\n        ></ui-icon>\n      }\n    </button>\n  }\n\n  @for (menu of submenus; track submenus[$index]) {\n    <mat-menu\n      [xPosition]=\"menuConfig.xPosition\"\n      [yPosition]=\"menuConfig.yPosition\"\n      #matMenu\n      [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n      [overlapTrigger]=\"menuConfig.overlapTrigger\"\n      backdropClass=\"overflow-menu-backdrop\"\n    >\n      @for (button of menu; track trackByButton(id, button); let id = $index) {\n        @if (button.btnTemplate) {\n          <!-- Menu option by provided button template-->\n          <ng-container\n            [ngTemplateOutlet]=\"button.btnTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: button }\"\n          ></ng-container>\n        } @else if (withRemovableOption) {\n          <!--  Simple menu option that can be removed dynamically -->\n          <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n            <span\n              [id]=\"'labelledby-' + button.label + id\"\n              class=\"label\"\n              uiEllipseText\n              [refresh]=\"isMenuOpened()\"\n              [maxDiffPixels]=\"1\"\n              [isMultiline]=\"true\"\n              (onChangeTextState)=\"button.isTextEllipsed = $event\"\n              >{{ button.label }}\n            </span>\n            @if (button.icon) {\n              <ui-button\n                variant=\"icon-button\"\n                [applicationTheme]=\"applicationTheme\"\n                [iconName]=\"button.icon\"\n                [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n                [tooltipPosition]=\"'above'\"\n                [size]=\"'medium'\"\n                (focus)=\"onButtonFocus(button)\"\n                (blur)=\"onButtonBlur(button)\"\n                (mouseenter)=\"onButtonHover(button, true)\"\n                (mouseleave)=\"onButtonHover(button, false)\"\n                (click)=\"onSelectItem($event, button.value)\"\n              >\n              </ui-button>\n            }\n          </div>\n        } @else {\n          <!--  Default non-removable menu option -->\n          @if (button.isTitleButton && !button.hideTitleButton) {\n            <div class=\"menu-title\">{{ button.label }}</div>\n          }\n          @if (!button.isTitleButton) {\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n              (menuOpened)=\"onSubmenuOpened()\"\n              (focus)=\"onButtonFocus(button)\"\n              (blur)=\"onButtonBlur(button)\"\n              (mouseenter)=\"onButtonHover(button, true)\"\n              (mouseleave)=\"onButtonHover(button, false)\"\n              [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n              disableRipple\n              (click)=\"onButtonClick(button, $event)\"\n              [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n              [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n              [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n              [attr.aria-label]=\"button.ariaLabel || null\"\n              role=\"menuitem\"\n              matTooltipPosition=\"right\"\n            >\n              <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n                {{\n                  button.disabled\n                    ? ('MENU.MENUITEM_DISABLED' | uiTranslate | async) + ' ' + (button.describedby || '')\n                    : button.describedby\n                }}\n              </span>\n              @if (button.icon) {\n                <ui-icon\n                  [name]=\"button.icon\"\n                  [toggleIconStyle]=\"true\"\n                  [filled]=\"\n                    button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n                  \"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n                ></ui-icon>\n              }\n              <span\n                [id]=\"'labelledby-' + button.label + id\"\n                class=\"label\"\n                uiEllipseText\n                [refresh]=\"isMenuOpened()\"\n                [maxDiffPixels]=\"1\"\n                [isMultiline]=\"true\"\n                (onChangeTextState)=\"button.isTextEllipsed = $event\"\n                >{{ button.label }}</span\n              >\n              @if (button.isPremium) {\n                <ui-icon\n                  [name]=\"'Premium-circle-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  class=\"premium-icon\"\n                ></ui-icon>\n              }\n            </button>\n          }\n        }\n      }\n\n      <ng-content select=\"[menu-content]\"></ng-content>\n    </mat-menu>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;border:unset;cursor:pointer;margin:0}.overflow-menu-opener.content-template{display:flex;justify-content:flex-start;height:100%;width:100%;padding:1px 8px 0 6px}.overflow-menu-opener.icon-button{height:40px;width:40px;border-radius:50px;display:flex;align-items:center;justify-content:center}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-title{padding:16px;font-weight:700}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-option{padding:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.overflow-menu-backdrop+* .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing);padding-top:16px;padding-bottom:16px}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.premium-icon{margin-left:8px;flex-shrink:0}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;line-height:16px}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}.overflow-menu-opener.no-hover:hover{background:transparent}\n"] }]
+                    ], template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n  @if (isMenuRendered()) {\n    <button\n      #buttonElement\n      [ngClass]=\"{\n        'icon-button': !contentTemplateRef && !buttonVariant,\n        'content-template': contentTemplateRef,\n        'no-hover': buttonVariant,\n      }\"\n      [matMenuTriggerFor]=\"matmenus.first\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-required]=\"ariaRequired\"\n      [attr.aria-describedby]=\"'describedby'\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"isMenuOpened()\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\"\n      class=\"overflow-menu-opener\"\n      [matTooltip]=\"menuLabel\"\n    >\n      <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n      @if (buttonVariant) {\n        <ui-button\n          [variant]=\"buttonVariant\"\n          [justIcon]=\"true\"\n          [iconName]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [disabled]=\"false\"\n          [size]=\"buttonSize\"\n        >\n        </ui-button>\n      } @else if (contentTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n      } @else {\n        <ui-icon\n          [name]=\"iconTrigger\"\n          [applicationTheme]=\"applicationTheme\"\n          [size]=\"'24'\"\n          [color]=\"'rebrand-black'\"\n        ></ui-icon>\n      }\n    </button>\n  }\n\n  <!-- Tracked by index so refreshing the buttons re-renders the rows without destroying an open\n       mat-menu, whose trigger would otherwise be left holding a dead overlay. -->\n  @for (menu of submenus; track $index) {\n    <mat-menu\n      [xPosition]=\"menuConfig.xPosition\"\n      [yPosition]=\"menuConfig.yPosition\"\n      #matMenu\n      [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n      [overlapTrigger]=\"menuConfig.overlapTrigger\"\n      backdropClass=\"overflow-menu-backdrop\"\n    >\n      @for (button of menu; track trackByButton(id, button); let id = $index) {\n        @if (button.btnTemplate) {\n          <!-- Menu option by provided button template-->\n          <ng-container\n            [ngTemplateOutlet]=\"button.btnTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: button }\"\n          ></ng-container>\n        } @else if (withRemovableOption) {\n          <!--  Simple menu option that can be removed dynamically -->\n          <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n            <span\n              [id]=\"'labelledby-' + button.label + id\"\n              class=\"label\"\n              uiEllipseText\n              [refresh]=\"isMenuOpened()\"\n              [maxDiffPixels]=\"1\"\n              [isMultiline]=\"true\"\n              (onChangeTextState)=\"button.isTextEllipsed = $event\"\n              >{{ button.label }}\n            </span>\n            @if (button.icon) {\n              <ui-button\n                variant=\"icon-button\"\n                [applicationTheme]=\"applicationTheme\"\n                [iconName]=\"button.icon\"\n                [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n                [tooltipPosition]=\"'above'\"\n                [size]=\"'medium'\"\n                (focus)=\"onButtonFocus(button)\"\n                (blur)=\"onButtonBlur(button)\"\n                (mouseenter)=\"onButtonHover(button, true)\"\n                (mouseleave)=\"onButtonHover(button, false)\"\n                (click)=\"onSelectItem($event, button.value)\"\n              >\n              </ui-button>\n            }\n          </div>\n        } @else {\n          <!--  Default non-removable menu option -->\n          @if (button.isTitleButton && !button.hideTitleButton) {\n            <div class=\"menu-title\">{{ button.label }}</div>\n          }\n          @if (!button.isTitleButton) {\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n              (menuOpened)=\"onSubmenuOpened()\"\n              (focus)=\"onButtonFocus(button)\"\n              (blur)=\"onButtonBlur(button)\"\n              (mouseenter)=\"onButtonHover(button, true)\"\n              (mouseleave)=\"onButtonHover(button, false)\"\n              [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n              disableRipple\n              (click)=\"onButtonClick(button, $event)\"\n              [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n              [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n              [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n              [attr.aria-label]=\"button.ariaLabel || null\"\n              [role]=\"selectionMode() === 'single' ? 'menuitemradio' : 'menuitem'\"\n              [attr.aria-checked]=\"selectionMode() === 'single' ? !!button.isSelected : null\"\n              matTooltipPosition=\"right\"\n            >\n              <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n                {{\n                  button.disabled\n                    ? ('MENU.MENUITEM_DISABLED' | uiTranslate | async) + ' ' + (button.describedby || '')\n                    : button.describedby\n                }}\n              </span>\n              @if (button.icon) {\n                <ui-icon\n                  [name]=\"button.icon\"\n                  [toggleIconStyle]=\"true\"\n                  [filled]=\"\n                    button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n                  \"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n                ></ui-icon>\n              }\n              <span\n                [id]=\"'labelledby-' + button.label + id\"\n                class=\"label\"\n                uiEllipseText\n                [refresh]=\"isMenuOpened()\"\n                [maxDiffPixels]=\"1\"\n                [isMultiline]=\"true\"\n                (onChangeTextState)=\"button.isTextEllipsed = $event\"\n                >{{ button.label }}</span\n              >\n              @if (selectionMode() === 'single' && button.isSelected) {\n                <ui-icon\n                  class=\"overflow-menu-selected-check\"\n                  [name]=\"'Check-small-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'16'\"\n                  [color]=\"'rebrand-black'\"\n                ></ui-icon>\n              }\n              @if (button.isPremium) {\n                <ui-icon\n                  [name]=\"'Premium-circle-in-line'\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [size]=\"'24'\"\n                  class=\"premium-icon\"\n                ></ui-icon>\n              }\n            </button>\n          }\n        }\n      }\n\n      <ng-content select=\"[menu-content]\"></ng-content>\n    </mat-menu>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;border:unset;cursor:pointer;margin:0}.overflow-menu-opener.content-template{display:flex;justify-content:flex-start;height:100%;width:100%;padding:1px 8px 0 6px}.overflow-menu-opener.icon-button{height:40px;width:40px;border-radius:50px;display:flex;align-items:center;justify-content:center}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-title{padding:16px;font-weight:700}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty) .menu-option{padding:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.overflow-menu-backdrop+* .mat-mdc-menu-submenu-icon{padding-right:var(--mat-menu-item-spacing);padding-top:16px;padding-bottom:16px}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.premium-icon{margin-left:8px;flex-shrink:0}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;line-height:16px}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}.overflow-menu-opener.no-hover:hover{background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -253,7 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 type: Input
             }], menuConfig: [{
                 type: Input
-            }], isDynamicMenu: [{
+            }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], isDynamicMenu: [{
                 type: Input
             }], withRemovableOption: [{
                 type: Input
@@ -275,8 +295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }] } });
 
 class OverflowMenuComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
             ButtonComponentModule,
             IconComponentModule,
             MatMenuModule,
@@ -285,7 +305,7 @@ class OverflowMenuComponentModule {
             EllipseTextDirective,
             UiTranslatePipe,
             OverflowMenuComponent], exports: [OverflowMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
             ButtonComponentModule,
             IconComponentModule,
             MatMenuModule,
@@ -293,7 +313,7 @@ class OverflowMenuComponentModule {
             MatTooltipModule,
             OverflowMenuComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OverflowMenuComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: OverflowMenuComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [