@testgorilla/tgo-ui 11.22.2 → 12.0.0

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

@@ -1,416 +1,692 @@
-import { DOCUMENT, NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, 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';
-import { startWith } from 'rxjs';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { EllipseTextDirective, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i1 from '@angular/cdk/a11y';
-import { MatButtonModule } from '@angular/material/button';
-
+import { AsyncPipe, CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, Inject, Input, NgModule, Optional, Output, ViewChild, ViewChildren, ViewEncapsulation, booleanAttribute, inject, input, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { MatMenu, MatMenuItem, MatMenuModule, MatMenuTrigger } from "@angular/material/menu";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import { startWith } from "rxjs";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { EllipseTextDirective, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i1 from "@angular/cdk/a11y";
+import { MatButtonModule } from "@angular/material/button";
 const DEFAULT_MENU_CONFIG = {
-    overlapTrigger: false,
-    panelClass: '',
-    xPosition: 'after',
-    yPosition: 'below',
+	overlapTrigger: false,
+	panelClass: "",
+	xPosition: "after",
+	yPosition: "below"
 };
-class OverflowMenuComponent {
-    get menuItemHasHovered() {
-        return this.submenus.some(menu => menu.some(item => item.isHovered));
-    }
-    constructor(defaultAppTheme, focusMonitor, ngZone) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.focusMonitor = focusMonitor;
-        this.ngZone = ngZone;
-        /**
-         * Menu icon trigger
-         *
-         * @memberof OverflowMenuComponent
-         */
-        this.iconTrigger = 'Menu-ellipsis';
-        /**
-         * Label menu
-         *
-         * @memberof OverflowMenuComponent
-         */
-        this.menuLabel = '';
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof OverflowMenuComponent
-         */
-        this.applicationTheme = 'light';
-        this.testId = null;
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {boolean}
-         * @memberof OverflowMenuComponent
-         */
-        this.ariaRequired = false;
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input for description.
-         * @type {text}
-         * @memberof OverflowMenuComponent
-         */
-        this.describedby = '';
-        /**
-         * Button variant for the overflow menu trigger
-         * When null, uses the default icon rendering
-         *
-         * @type {ButtonColor | null}
-         * @memberof OverflowMenuComponent
-         */
-        this.buttonVariant = null;
-        /**
-         * Button size for the overflow menu trigger
-         *
-         * @type {ButtonSize}
-         * @memberof 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 */ []));
-        /**
-         * Element the dropdown is positioned against, instead of the trigger: an element, or a selector
-         * resolved as the trigger's closest matching ancestor (e.g. `'ui-tag'` to open from the start of
-         * the tag the trigger sits in). Read when the dropdown is first opened.
-         *
-         * @type {string | HTMLElement | null}
-         * @memberof OverflowMenuComponent
-         */
-        this.menuAnchor = input(null, ...(ngDevMode ? [{ debugName: "menuAnchor" }] : /* istanbul ignore next */ []));
-        /**
-         * Makes the open dropdown as wide as its anchor (`menuAnchor`, or the trigger when none is set),
-         * instead of sizing it to its content. Measured each time it opens.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof OverflowMenuComponent
-         */
-        this.shouldMatchAnchorWidth = input(false, { ...(ngDevMode ? { debugName: "shouldMatchAnchorWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.isDynamicMenu = false;
-        this.withRemovableOption = false;
-        this.selectItem = new EventEmitter();
-        this.menuOpened = new EventEmitter();
-        this.menuClosed = new EventEmitter();
-        this.menuItems = [];
-        this.submenus = [];
-        this.isMenuRendered = signal(false, ...(ngDevMode ? [{ debugName: "isMenuRendered" }] : /* istanbul ignore next */ []));
-        this.isMenuOpened = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpened" }] : /* istanbul ignore next */ []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
-        this.destroyRef = inject(DestroyRef);
-        this.anchoredTriggers = new WeakSet();
-        this.document = inject(DOCUMENT);
-        this.trackByButton = (_, btn) => btn.action ?? btn.value ?? btn.label;
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-    }
-    ngOnInit() {
-        this.createSubmenus(this.buttons, 's0', 1);
-        this.reindex();
-    }
-    ngOnChanges(changes) {
-        // 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();
-        }
-    }
-    ngAfterViewInit() {
-        this.isMenuRendered.set(true);
-        // The trigger renders after this hook (it waits on isMenuRendered), so anchor it once it appears.
-        this.matTrigger.changes
-            .pipe(startWith(this.matTrigger), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.anchorTrigger(this.matTrigger.first));
-        setTimeout(() => {
-            this.focusMonitor
-                .monitor(this.buttonElement)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(origin => this.ngZone.run(() => {
-                if (origin === 'keyboard') {
-                    this.isFocused.set(true);
-                }
-                else {
-                    if (!this.isMenuOpened()) {
-                        this.isFocused.set(false);
-                    }
-                }
-            }));
-        }, 300);
-    }
-    /**
-     * MatMenuTrigger has no public way to position against another element: it takes its origin from
-     * the protected `_getOverlayOrigin()` when it first creates the overlay. Overriding it on the root
-     * trigger lets `menuAnchor` move the origin, falling back to the trigger itself.
-     */
-    anchorTrigger(trigger) {
-        if (!trigger || this.anchoredTriggers.has(trigger)) {
-            return;
-        }
-        this.anchoredTriggers.add(trigger);
-        const anchorable = trigger;
-        // eslint-disable-next-line no-underscore-dangle -- _getOverlayOrigin is MatMenuTrigger's protected origin hook
-        const ownOrigin = anchorable._getOverlayOrigin.bind(trigger);
-        // eslint-disable-next-line no-underscore-dangle -- see above
-        anchorable._getOverlayOrigin = () => this.resolveMenuAnchor() ?? ownOrigin();
-    }
-    resolveMenuAnchor() {
-        const anchor = this.menuAnchor();
-        if (typeof anchor === 'string') {
-            return this.buttonElement?.nativeElement.closest(anchor) ?? null;
-        }
-        return anchor;
-    }
-    /** Sizes the open panel to the anchor (or the trigger), overriding Material's 112–280px panel limits. */
-    matchPanelToAnchorWidth() {
-        if (!this.shouldMatchAnchorWidth()) {
-            return;
-        }
-        const anchor = this.resolveMenuAnchor() ?? this.buttonElement?.nativeElement;
-        const panelId = this.matmenus.first?.panelId;
-        const panel = panelId ? this.document.getElementById(panelId) : null;
-        if (!anchor || !panel) {
-            return;
-        }
-        const width = `${anchor.getBoundingClientRect().width}px`;
-        panel.style.width = width;
-        panel.style.minWidth = width;
-        panel.style.maxWidth = width;
-        // The theme also caps the content at 340px; left alone, it would stop short of a wider panel.
-        const content = panel.querySelector('.mat-mdc-menu-content');
-        if (content) {
-            content.style.maxWidth = 'none';
-        }
-    }
-    /** 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);
-        }
-    }
-    onMenuOpened() {
-        this.menuOpened.emit();
-        this.isMenuOpened.set(true);
-        this.matchPanelToAnchorWidth();
-        if (this.isFocused()) {
-            setTimeout(() => {
-                // eslint-disable-next-line no-underscore-dangle -- _allItems is MatMenu's internal item query
-                this.matmenus.first._allItems.first.focus('keyboard');
-            }, 300);
-        }
-    }
-    onMenuClosed() {
-        this.isMenuOpened.set(false);
-        this.menuClosed.emit();
-    }
-    onButtonFocus(button) {
-        if (this.isFocused()) {
-            button.isFocused = true;
-        }
-    }
-    onButtonBlur(button) {
-        button.isFocused = false;
-    }
-    onButtonClick(button, $event) {
-        if (button.disabled) {
-            $event.preventDefault();
-            $event.stopPropagation();
-        }
-        else {
-            this.onSelectItem($event, button.value);
-        }
-    }
-    onSubmenuOpened() {
-        this.isMenuOpened.set(!this.isMenuOpened);
-        if (this.isFocused()) {
-            setTimeout(() => {
-                // eslint-disable-next-line no-underscore-dangle -- _allItems is MatMenu's internal item query
-                this.matmenus.last._allItems.first.focus('keyboard');
-            }, 300);
-        }
-    }
-    onButtonHover(button, state) {
-        button.isHovered = state;
-    }
-    getMenu(index) {
-        return typeof index === 'number' && index >= 0 && this.matmenus
-            ? (this.matmenus.find((x, i) => i === index) ?? null)
-            : null;
-    }
-    reindex() {
-        this.submenus.forEach((menu) => {
-            menu.forEach((item) => {
-                if (item.subMenu !== -1) {
-                    item.subMenu = this.menuItems.indexOf(`${item.action}`);
-                }
-            });
-        });
-    }
-    resetSubmenus() {
-        this.submenus = [];
-        this.menuItems = [];
-    }
-    createSubmenus(menu, prefix, count) {
-        this.menuItems.push(prefix);
-        this.submenus.push(menu.map((item, index) => ({
-            label: item.label,
-            icon: item.icon,
-            isDestructive: item.isDestructive,
-            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
-            action: item.action ? item.action : prefix + index,
-            isTitleButton: item.isTitleButton,
-            hideTitleButton: item.hideTitleButton,
-            isPremium: item.isPremium,
-            // The template reads these off the copy, so omitting them leaves the menu items' ARIA unset.
-            ariaLabel: item.ariaLabel,
-            describedby: item.describedby,
-            testId: item.testId,
-        })));
-        menu.forEach((item, index) => {
-            if (item.subMenu) {
-                this.createSubmenus(item.subMenu, prefix + index, count + 1);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", 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.25", 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 }, testId: { classPropertyName: "testId", publicName: "testId", 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 }, menuAnchor: { classPropertyName: "menuAnchor", publicName: "menuAnchor", isSignal: true, isRequired: false, transformFunction: null }, shouldMatchAnchorWidth: { classPropertyName: "shouldMatchAnchorWidth", publicName: "shouldMatchAnchorWidth", 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      [attr.data-testid]=\"testId\"\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                [testId]=\"button.testId ?? null\"\n                [ariaLabel]=\"button.ariaLabel || button.label\"\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]=\"{\n                'is-destructive': button.isDestructive,\n                disabled: button.disabled,\n                'overflow-menu-item-selectable': selectionMode() === 'single',\n              }\"\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              [attr.data-testid]=\"button.testId ?? 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}.overflow-menu-container ui-icon,.overflow-menu .mat-mdc-menu-item ui-icon{pointer-events:none}: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}.overflow-menu-item-selectable .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px}.overflow-menu-selected-check{margin-left:auto;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", "trailingIconName", "trailingIconFilled", "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", "testId"], 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.25", ngImport: i0, type: OverflowMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-overflow-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass,
-                        MatMenuTrigger,
-                        MatTooltip,
-                        ButtonComponent,
-                        NgTemplateOutlet,
-                        IconComponent,
-                        MatMenu,
-                        EllipseTextDirective,
-                        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      [attr.data-testid]=\"testId\"\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                [testId]=\"button.testId ?? null\"\n                [ariaLabel]=\"button.ariaLabel || button.label\"\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]=\"{\n                'is-destructive': button.isDestructive,\n                disabled: button.disabled,\n                'overflow-menu-item-selectable': selectionMode() === 'single',\n              }\"\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              [attr.data-testid]=\"button.testId ?? 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}.overflow-menu-container ui-icon,.overflow-menu .mat-mdc-menu-item ui-icon{pointer-events:none}: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}.overflow-menu-item-selectable .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px}.overflow-menu-selected-check{margin-left:auto;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
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i1.FocusMonitor }, { type: i0.NgZone }], propDecorators: { buttons: [{
-                type: Input
-            }], iconTrigger: [{
-                type: Input
-            }], menuLabel: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], ariaRequired: [{
-                type: Input
-            }], describedby: [{
-                type: Input
-            }], contentTemplateRef: [{
-                type: Input
-            }], buttonVariant: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], menuConfig: [{
-                type: Input
-            }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], menuAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAnchor", required: false }] }], shouldMatchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldMatchAnchorWidth", required: false }] }], isDynamicMenu: [{
-                type: Input
-            }], withRemovableOption: [{
-                type: Input
-            }], selectItem: [{
-                type: Output
-            }], menuOpened: [{
-                type: Output
-            }], menuClosed: [{
-                type: Output
-            }], matmenus: [{
-                type: ViewChildren,
-                args: [MatMenu]
-            }], matTrigger: [{
-                type: ViewChildren,
-                args: [MatMenuTrigger]
-            }], buttonElement: [{
-                type: ViewChild,
-                args: ['buttonElement']
-            }] } });
-
-class OverflowMenuComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: OverflowMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
-            ButtonComponentModule,
-            IconComponentModule,
-            MatMenuModule,
-            MatButtonModule,
-            MatTooltipModule,
-            EllipseTextDirective,
-            UiTranslatePipe,
-            OverflowMenuComponent], exports: [OverflowMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule,
-            ButtonComponentModule,
-            IconComponentModule,
-            MatMenuModule,
-            MatButtonModule,
-            MatTooltipModule,
-            OverflowMenuComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: OverflowMenuComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ButtonComponentModule,
-                        IconComponentModule,
-                        MatMenuModule,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        EllipseTextDirective,
-                        UiTranslatePipe,
-                        OverflowMenuComponent,
-                    ],
-                    exports: [OverflowMenuComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var OverflowMenuComponent = class OverflowMenuComponent {
+	get menuItemHasHovered() {
+		return this.submenus.some((menu) => menu.some((item) => item.isHovered));
+	}
+	constructor(defaultAppTheme, focusMonitor, ngZone) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.focusMonitor = focusMonitor;
+		this.ngZone = ngZone;
+		this.iconTrigger = "Menu-ellipsis";
+		this.menuLabel = "";
+		this.applicationTheme = "light";
+		this.testId = null;
+		this.ariaRequired = false;
+		this.describedby = "";
+		this.buttonVariant = null;
+		this.buttonSize = "medium";
+		this.menuConfig = DEFAULT_MENU_CONFIG;
+		this.selectionMode = input("none", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+		this.menuAnchor = input(null, ...ngDevMode ? [{ debugName: "menuAnchor" }] : /* istanbul ignore next */ []);
+		this.shouldMatchAnchorWidth = input(false, {
+			...ngDevMode ? { debugName: "shouldMatchAnchorWidth" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.isDynamicMenu = false;
+		this.withRemovableOption = false;
+		this.selectItem = new EventEmitter();
+		this.menuOpened = new EventEmitter();
+		this.menuClosed = new EventEmitter();
+		this.menuItems = [];
+		this.submenus = [];
+		this.isMenuRendered = signal(false, ...ngDevMode ? [{ debugName: "isMenuRendered" }] : /* istanbul ignore next */ []);
+		this.isMenuOpened = signal(false, ...ngDevMode ? [{ debugName: "isMenuOpened" }] : /* istanbul ignore next */ []);
+		this.isFocused = signal(false, ...ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []);
+		this.destroyRef = inject(DestroyRef);
+		this.anchoredTriggers = /* @__PURE__ */ new WeakSet();
+		this.document = inject(DOCUMENT);
+		this.trackByButton = (_, btn) => btn.action ?? btn.value ?? btn.label;
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+	}
+	ngOnInit() {
+		this.createSubmenus(this.buttons, "s0", 1);
+		this.reindex();
+	}
+	ngOnChanges(changes) {
+		if (changes["buttons"] && (this.isDynamicMenu || this.selectionMode() === "single")) {
+			this.resetSubmenus();
+			this.createSubmenus(this.buttons, "s0", 1);
+			this.reindex();
+		}
+	}
+	ngAfterViewInit() {
+		this.isMenuRendered.set(true);
+		this.matTrigger.changes.pipe(startWith(this.matTrigger), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.anchorTrigger(this.matTrigger.first));
+		setTimeout(() => {
+			this.focusMonitor.monitor(this.buttonElement).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => this.ngZone.run(() => {
+				if (origin === "keyboard") this.isFocused.set(true);
+				else if (!this.isMenuOpened()) this.isFocused.set(false);
+			}));
+		}, 300);
+	}
+	anchorTrigger(trigger) {
+		if (!trigger || this.anchoredTriggers.has(trigger)) return;
+		this.anchoredTriggers.add(trigger);
+		const anchorable = trigger;
+		const ownOrigin = anchorable._getOverlayOrigin.bind(trigger);
+		anchorable._getOverlayOrigin = () => this.resolveMenuAnchor() ?? ownOrigin();
+	}
+	resolveMenuAnchor() {
+		const anchor = this.menuAnchor();
+		if (typeof anchor === "string") return this.buttonElement?.nativeElement.closest(anchor) ?? null;
+		return anchor;
+	}
+	matchPanelToAnchorWidth() {
+		if (!this.shouldMatchAnchorWidth()) return;
+		const anchor = this.resolveMenuAnchor() ?? this.buttonElement?.nativeElement;
+		const panelId = this.matmenus.first?.panelId;
+		const panel = panelId ? this.document.getElementById(panelId) : null;
+		if (!anchor || !panel) return;
+		const width = `${anchor.getBoundingClientRect().width}px`;
+		panel.style.width = width;
+		panel.style.minWidth = width;
+		panel.style.maxWidth = width;
+		const content = panel.querySelector(".mat-mdc-menu-content");
+		if (content) content.style.maxWidth = "none";
+	}
+	openMenu() {
+		this.matTrigger.first?.openMenu();
+	}
+	closeMenu() {
+		this.matTrigger.first?.closeMenu();
+	}
+	onSelectItem(event, value) {
+		if (value) this.selectItem.emit(value);
+	}
+	onMenuOpened() {
+		this.menuOpened.emit();
+		this.isMenuOpened.set(true);
+		this.matchPanelToAnchorWidth();
+		if (this.isFocused()) setTimeout(() => {
+			this.matmenus.first._allItems.first.focus("keyboard");
+		}, 300);
+	}
+	onMenuClosed() {
+		this.isMenuOpened.set(false);
+		this.menuClosed.emit();
+	}
+	onButtonFocus(button) {
+		if (this.isFocused()) button.isFocused = true;
+	}
+	onButtonBlur(button) {
+		button.isFocused = false;
+	}
+	onButtonClick(button, $event) {
+		if (button.disabled) {
+			$event.preventDefault();
+			$event.stopPropagation();
+		} else this.onSelectItem($event, button.value);
+	}
+	onSubmenuOpened() {
+		this.isMenuOpened.set(!this.isMenuOpened);
+		if (this.isFocused()) setTimeout(() => {
+			this.matmenus.last._allItems.first.focus("keyboard");
+		}, 300);
+	}
+	onButtonHover(button, state) {
+		button.isHovered = state;
+	}
+	getMenu(index) {
+		return typeof index === "number" && index >= 0 && this.matmenus ? this.matmenus.find((x, i) => i === index) ?? null : null;
+	}
+	reindex() {
+		this.submenus.forEach((menu) => {
+			menu.forEach((item) => {
+				if (item.subMenu !== -1) item.subMenu = this.menuItems.indexOf(`${item.action}`);
+			});
+		});
+	}
+	resetSubmenus() {
+		this.submenus = [];
+		this.menuItems = [];
+	}
+	createSubmenus(menu, prefix, count) {
+		this.menuItems.push(prefix);
+		this.submenus.push(menu.map((item, index) => ({
+			label: item.label,
+			icon: item.icon,
+			isDestructive: item.isDestructive,
+			tooltipText: item.tooltipText,
+			value: item.value,
+			disabled: item.disabled,
+			isSelected: item.isSelected,
+			btnTemplate: item.btnTemplate,
+			subMenu: item.subMenu ? 0 : -1,
+			action: item.action ? item.action : prefix + index,
+			isTitleButton: item.isTitleButton,
+			hideTitleButton: item.hideTitleButton,
+			isPremium: item.isPremium,
+			ariaLabel: item.ariaLabel,
+			describedby: item.describedby,
+			testId: item.testId
+		})));
+		menu.forEach((item, index) => {
+			if (item.subMenu) this.createSubmenus(item.subMenu, prefix + index, count + 1);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			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: "22.2.4",
+			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
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					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
+				},
+				menuAnchor: {
+					classPropertyName: "menuAnchor",
+					publicName: "menuAnchor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				shouldMatchAnchorWidth: {
+					classPropertyName: "shouldMatchAnchorWidth",
+					publicName: "shouldMatchAnchorWidth",
+					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      [attr.data-testid]=\"testId\"\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                [testId]=\"button.testId ?? null\"\n                [ariaLabel]=\"button.ariaLabel || button.label\"\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]=\"{\n                'is-destructive': button.isDestructive,\n                disabled: button.disabled,\n                'overflow-menu-item-selectable': selectionMode() === 'single',\n              }\"\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              [attr.data-testid]=\"button.testId ?? 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}.overflow-menu-container ui-icon,.overflow-menu .mat-mdc-menu-item ui-icon{pointer-events:none}: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}.overflow-menu-item-selectable .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px}.overflow-menu-selected-check{margin-left:auto;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",
+						"trailingIconName",
+						"trailingIconFilled",
+						"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",
+						"testId"
+					],
+					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",
+						"disabledInteractive",
+						"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: "22.2.4",
+	ngImport: i0,
+	type: OverflowMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-overflow-menu",
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				NgClass,
+				MatMenuTrigger,
+				MatTooltip,
+				ButtonComponent,
+				NgTemplateOutlet,
+				IconComponent,
+				MatMenu,
+				EllipseTextDirective,
+				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      [attr.data-testid]=\"testId\"\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                [testId]=\"button.testId ?? null\"\n                [ariaLabel]=\"button.ariaLabel || button.label\"\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]=\"{\n                'is-destructive': button.isDestructive,\n                disabled: button.disabled,\n                'overflow-menu-item-selectable': selectionMode() === 'single',\n              }\"\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              [attr.data-testid]=\"button.testId ?? 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}.overflow-menu-container ui-icon,.overflow-menu .mat-mdc-menu-item ui-icon{pointer-events:none}: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}.overflow-menu-item-selectable .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px}.overflow-menu-selected-check{margin-left:auto;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: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{ type: i1.FocusMonitor },
+		{ type: i0.NgZone }
+	],
+	propDecorators: {
+		buttons: [{ type: Input }],
+		iconTrigger: [{ type: Input }],
+		menuLabel: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		testId: [{ type: Input }],
+		ariaRequired: [{ type: Input }],
+		describedby: [{ type: Input }],
+		contentTemplateRef: [{ type: Input }],
+		buttonVariant: [{ type: Input }],
+		buttonSize: [{ type: Input }],
+		menuConfig: [{ type: Input }],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		menuAnchor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuAnchor",
+				required: false
+			}]
+		}],
+		shouldMatchAnchorWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shouldMatchAnchorWidth",
+				required: false
+			}]
+		}],
+		isDynamicMenu: [{ type: Input }],
+		withRemovableOption: [{ type: Input }],
+		selectItem: [{ type: Output }],
+		menuOpened: [{ type: Output }],
+		menuClosed: [{ type: Output }],
+		matmenus: [{
+			type: ViewChildren,
+			args: [MatMenu]
+		}],
+		matTrigger: [{
+			type: ViewChildren,
+			args: [MatMenuTrigger]
+		}],
+		buttonElement: [{
+			type: ViewChild,
+			args: ["buttonElement"]
+		}]
+	}
+});
+var OverflowMenuComponentModule = class OverflowMenuComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: OverflowMenuComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: OverflowMenuComponentModule,
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				MatMenuModule,
+				MatButtonModule,
+				MatTooltipModule,
+				EllipseTextDirective,
+				UiTranslatePipe,
+				OverflowMenuComponent
+			],
+			exports: [OverflowMenuComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: OverflowMenuComponentModule,
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				MatMenuModule,
+				MatButtonModule,
+				MatTooltipModule,
+				OverflowMenuComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: OverflowMenuComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				MatMenuModule,
+				MatButtonModule,
+				MatTooltipModule,
+				EllipseTextDirective,
+				UiTranslatePipe,
+				OverflowMenuComponent
+			],
+			exports: [OverflowMenuComponent]
+		}]
+	}]
+});
 export { OverflowMenuComponent, OverflowMenuComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-overflow-menu.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-overflow-menu.mjs.map