barsa-sap-ui 2.3.29 → 2.3.31

package/fesm2022/barsa-sap-ui.mjs

@@ -16174,11 +16174,11 @@ class BarsaMegamenuComponent extends BaseComponent {
         this.sideNavScroll.nativeElement.scrollBy({ left: 200, behavior: 'smooth' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaMegamenuComponent, isStandalone: false, selector: "bsu-barsa-megamenu", inputs: { menuGroups: "menuGroups", titleKey: "titleKey", iconKey: "iconKey" }, outputs: { visibilityChange: "visibilityChange" }, viewQueries: [{ propertyName: "sideNavScroll", first: true, predicate: ["sideNavScroll"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group }\">\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: childGroup }\">\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group>\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header>\r\n            <span fd-list-title>{{ group.title | bbbTranslate }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul fd-list fdCompact [byline]=\"true\" class=\"tw-grid tw-grid-cols-2\" [noBorder]=\"true\">\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\">\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: x-large\"></fd-icon></span>\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$4.NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: ["textOnly", "ariaRoledescriptionTree", "ariaRoledescriptionMenuBar", "ariaLabelSelected"] }, { kind: "directive", type: i7$4.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i7$4.NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: ["expanded"], outputs: ["expandedChange", "keyboardTriggered"] }, { kind: "component", type: i7$4.NestedListIconComponent, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: ["role"] }, { kind: "directive", type: i7$4.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i9$1.SideNavigationComponent, selector: "fd-side-nav", inputs: ["sideNavigationConfiguration", "condensed", "collapseWidth", "selectable"] }, { kind: "directive", type: i9$1.SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "directive", type: i4$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BarsaMegamenuComponent, isStandalone: false, selector: "bsu-barsa-megamenu", inputs: { menuGroups: "menuGroups", titleKey: "titleKey", iconKey: "iconKey" }, outputs: { visibilityChange: "visibilityChange" }, viewQueries: [{ propertyName: "sideNavScroll", first: true, predicate: ["sideNavScroll"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group }\">\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: childGroup }\">\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group>\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header>\r\n            <span fd-list-title>{{ group.title | bbbTranslate }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul fd-list [byline]=\"true\" class=\"tw-grid tw-grid-cols-2\" [noBorder]=\"true\" fdCompact>\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                 @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>                                \r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" />\r\n                </span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BodyClickDirective, selector: "[bodyClick]", inputs: ["disableBodyClick"] }, { kind: "component", type: i3$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size", "role"] }, { kind: "directive", type: i3$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i3$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$4.NestedListDirective, selector: "[fdNestedList], [fd-nested-list]", inputs: ["textOnly", "ariaRoledescriptionTree", "ariaRoledescriptionMenuBar", "ariaLabelSelected"] }, { kind: "directive", type: i7$4.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i7$4.NestedItemDirective, selector: "[fdNestedItem], [fd-nested-list-item]", inputs: ["expanded"], outputs: ["expandedChange", "keyboardTriggered"] }, { kind: "component", type: i7$4.NestedListIconComponent, selector: "[fdNestedDirectivesIcon], [fd-nested-list-icon]", inputs: ["role"] }, { kind: "directive", type: i7$4.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "component", type: i7$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i7$2.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i7$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i9$1.SideNavigationComponent, selector: "fd-side-nav", inputs: ["sideNavigationConfiguration", "condensed", "collapseWidth", "selectable"] }, { kind: "directive", type: i9$1.SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "directive", type: i4$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group }\">\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: childGroup }\">\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group>\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header>\r\n            <span fd-list-title>{{ group.title | bbbTranslate }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul fd-list fdCompact [byline]=\"true\" class=\"tw-grid tw-grid-cols-2\" [noBorder]=\"true\">\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\">\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: x-large\"></fd-icon></span>\r\n                <div fd-list-content>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"] }]
+            args: [{ selector: 'bsu-barsa-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-side-nav>\r\n    <div class=\"side-nav-wrapper tw-relative\">\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn left\" (click)=\"onScrollSideNavLeft()\">{{ rtl() ? '\u2039' : '\u203A' }}</button>}\r\n        <div\r\n            fd-side-nav-main\r\n            #sideNavScroll\r\n            class=\"side-scroll-container tw-overflow-x-auto tw-flex tw-whitespace-nowrap tw-scroll-smooth\"\r\n            [class.tw-px-8]=\"showScrollButtons()\"\r\n        >\r\n            <ul\r\n                fd-nested-list\r\n                class=\"fd-shellbar--xl\"\r\n                [noBorder]=\"true\"\r\n                [style.width]=\"showScrollButtons() ? 'auto' : '100%'\"\r\n            >\r\n                @for (group of menuGroups; track group.id; let i = $index) {\r\n                <li\r\n                    class=\"tw-inline-block\"\r\n                    fd-nested-list-item\r\n                    [routerLink]=\"group.routePath && !group.children?.length ? [group.routePath] : null\"\r\n                    [routerLinkActive]=\"[group.children?.length ? '' : 'active']\"\r\n                >\r\n                    <fd-popover\r\n                        [noArrow]=\"true\"\r\n                        [disabled]=\"!group.children?.length\"\r\n                        placement=\"bottom-start\"\r\n                        #popover\r\n                        (beforeOpen)=\"onPopoverBeforeOpen(group)\"\r\n                    >\r\n                        <fd-popover-control>\r\n                            <a fd-nested-list-link (click)=\"onMainGroupClick(group)\">\r\n                                @if(group.icon){\r\n                                <i fd-nested-list-icon [ngClass]=\"'fd-button--' + group.color\" [glyph]=\"group.icon\"></i>\r\n                                }@else if(group.iconImage){\r\n                                <span class=\"tw-w-8 tw-flex\">\r\n                                    <img [src]=\"group.iconImage\" />\r\n                                </span>\r\n                                }\r\n                                <span fd-nested-list-title [ngClass]=\"'fd-button--' + group.color\"\r\n                                    >{{ group.title | bbbTranslate }}\r\n                                    @if(group.children?.length){\r\n                                    <svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mt-0.5\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                    >\r\n                                        <path\r\n                                            stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"\r\n                                            stroke-width=\"2\"\r\n                                            d=\"M19 9l-7 7-7-7\"\r\n                                        />\r\n                                    </svg>\r\n                                    }\r\n                                </span>\r\n                            </a>\r\n                        </fd-popover-control>\r\n                        <fd-popover-body>\r\n                            <!-- <fd-toolbar>\r\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\r\n                            <fd-input-group\r\n                                glyph=\"decline\"\r\n                                glyphAriaLabel=\"Clear\"\r\n                                placeholder=\"Search\"\r\n                                [button]=\"true\"\r\n                                [disabled]=\"false\"\r\n                            >\r\n                            </fd-input-group>\r\n                        </fd-toolbar> -->\r\n                            <div class=\"tw-grid tw-gap-1 mega-menu\">\r\n                                @if(group.items?.length){\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: group }\">\r\n                                </ng-template>\r\n                                } @for (childGroup of group.children; track childGroup.id) {\r\n                                <ng-template *ngTemplateOutlet=\"ulAppTileGroup; context: { $implicit: childGroup }\">\r\n                                </ng-template>\r\n                                }\r\n                            </div>\r\n                            <div fd-bar aria-label=\"Default Bar\" barDesign=\"footer\">\r\n                                <div fd-bar-left></div>\r\n                                <div fd-bar-middle></div>\r\n                                <div fd-bar-right>\r\n                                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"popover.close()\">\r\n                                        {{ 'Close' | bbbTranslate }}</fd-button-bar\r\n                                    >\r\n                                </div>\r\n                            </div>\r\n                        </fd-popover-body>\r\n                    </fd-popover>\r\n                </li>\r\n                }\r\n            </ul>\r\n        </div>\r\n        @if(showScrollButtons()){\r\n        <button class=\"scroll-btn right\" (click)=\"onScrollSideNavRight()\">{{ rtl() ? '\u203A' : '\u2039' }}</button>}\r\n    </div>\r\n</fd-side-nav>\r\n<ng-template #ulAppTileGroup let-group>\r\n    <ul fd-list fdCompact [noBorder]=\"true\">\r\n        <li fd-list-group-header>\r\n            <span fd-list-title>{{ group.title | bbbTranslate }}</span>\r\n        </li>\r\n    </ul>\r\n    <ul fd-list [byline]=\"true\" class=\"tw-grid tw-grid-cols-2\" [noBorder]=\"true\" fdCompact>\r\n        @for (item of group.items; track index;let index = $index) {\r\n        <li fd-list-item fdCompact>\r\n            <a fd-list-link bodyClick (click)=\"item.handleClick(item)\" fdCompact>\r\n                 @if(item.icon){\r\n                <span fd-list-thumbnail><fd-icon [glyph]=\"item.icon\" style=\"font-size: large\"></fd-icon></span>                                \r\n                }@else if(item.iconImage){\r\n                <span class=\"fd-list__thumbnail\">\r\n                    <img [src]=\"item.iconImage\" />\r\n                </span>\r\n                }\r\n                <div fd-list-content fdCompact>\r\n                    <div fd-list-title>{{ item.title | bbbTranslate }}</div>\r\n                    <div fd-list-byline>{{ item.subtitle | bbbTranslate }}</div>\r\n                </div>\r\n            </a>\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";fd-side-nav ul{box-shadow:var(--sapShell_Shadow);border-bottom:none!important;display:flex}fd-side-nav ul li{border:none;background-color:transparent;padding-inline-start:0rem}fd-side-nav ul li.active{background-color:var(--sapList_SelectionBackgroundColor)}fd-side-nav ul li a{height:var(--megamenu-height);min-width:5rem;border:none}fd-side-nav ul li a.is-selected{background-color:transparent}fd-side-nav ul li a i,fd-side-nav ul li a span{background-color:transparent;color:var(--fdButtonBorderColor)}fd-side-nav ul li a i{min-width:2rem;font-size:1.3rem;margin-top:-2px}fd-side-nav ul li a span{text-align:center;justify-content:center}fd-side-nav .fd-nested-list__title:first-child{padding-inline-start:0}.side-nav-wrapper{position:relative}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:#ffffffe6;border:none;z-index:10;width:32px;height:32px;font-size:20px;cursor:pointer;box-shadow:0 0 5px #0000004d;border-radius:50%;display:flex;align-items:center;justify-content:center}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.side-scroll-container{scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.side-scroll-container::-webkit-scrollbar{height:6px;opacity:0;transition:opacity .3s ease-in-out}.side-scroll-container:hover::-webkit-scrollbar{opacity:1}.side-scroll-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.side-scroll-container::-webkit-scrollbar-track{background-color:transparent}\n"] }]
         }], propDecorators: { menuGroups: [{
                 type: Input
             }], titleKey: [{