barsa-sap-ui 2.3.27 → 2.3.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/barsa-sap-ui.mjs +33 -2
- package/fesm2022/barsa-sap-ui.mjs.map +1 -1
- package/index.d.ts +8 -0
- package/package.json +1 -1
|
@@ -16134,7 +16134,22 @@ class BarsaMegamenuComponent extends BaseComponent {
|
|
|
16134
16134
|
this.titleKey = 'title';
|
|
16135
16135
|
this.iconKey = 'icon';
|
|
16136
16136
|
this.visibilityChange = new EventEmitter();
|
|
16137
|
+
this.rtl = signal(true);
|
|
16138
|
+
this.showScrollButtons = signal(false);
|
|
16137
16139
|
this._router = inject(Router);
|
|
16140
|
+
this._portalService = inject(PortalService);
|
|
16141
|
+
}
|
|
16142
|
+
ngAfterViewInit() {
|
|
16143
|
+
super.ngAfterViewInit();
|
|
16144
|
+
this._portalService.windowResize$.pipe(takeUntil$1(this._onDestroy$)).subscribe((_) => {
|
|
16145
|
+
this.checkScrollVisibility();
|
|
16146
|
+
});
|
|
16147
|
+
this._portalService.rtl$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
|
|
16148
|
+
this.rtl.set(c);
|
|
16149
|
+
});
|
|
16150
|
+
setTimeout(() => {
|
|
16151
|
+
this.checkScrollVisibility();
|
|
16152
|
+
});
|
|
16138
16153
|
}
|
|
16139
16154
|
onMainGroupClick(group) {
|
|
16140
16155
|
if (group.children?.length) {
|
|
@@ -16145,12 +16160,25 @@ class BarsaMegamenuComponent extends BaseComponent {
|
|
|
16145
16160
|
onPopoverBeforeOpen(group) {
|
|
16146
16161
|
this.visibilityChange.emit({ visibility: 'Visible', menu: group });
|
|
16147
16162
|
}
|
|
16163
|
+
checkScrollVisibility() {
|
|
16164
|
+
if (!this.sideNavScroll) {
|
|
16165
|
+
return;
|
|
16166
|
+
}
|
|
16167
|
+
const scrollEl = this.sideNavScroll.nativeElement;
|
|
16168
|
+
this.showScrollButtons.set(scrollEl.scrollWidth > scrollEl.clientWidth);
|
|
16169
|
+
}
|
|
16170
|
+
onScrollSideNavLeft() {
|
|
16171
|
+
this.sideNavScroll.nativeElement.scrollBy({ left: -200, behavior: 'smooth' });
|
|
16172
|
+
}
|
|
16173
|
+
onScrollSideNavRight() {
|
|
16174
|
+
this.sideNavScroll.nativeElement.scrollBy({ left: 200, behavior: 'smooth' });
|
|
16175
|
+
}
|
|
16148
16176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
16149
|
-
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" }, usesInheritance: true, ngImport: i0, template: "<fd-side-nav>\r\n <div fd-side-nav-main>\r\n <ul fd-nested-list class=\"fd-shellbar--xl\" [noBorder]=\"true\">\r\n @for (group of menuGroups; track group.id; let i = $index) {\r\n <li\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 }\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</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: ["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}\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" }] }); }
|
|
16177
|
+
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()){ <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 fd-nested-list class=\"fd-shellbar--xl\" [noBorder]=\"true\" [style.width]=\"showScrollButtons() ? 'auto': '100%'\">\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 }\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()){ <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 }); }
|
|
16150
16178
|
}
|
|
16151
16179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaMegamenuComponent, decorators: [{
|
|
16152
16180
|
type: Component,
|
|
16153
|
-
args: [{ selector: 'bsu-barsa-megamenu', standalone: false, template: "<fd-side-nav>\r\n <div fd-side-nav-main>\r\n
|
|
16181
|
+
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()){ <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 fd-nested-list class=\"fd-shellbar--xl\" [noBorder]=\"true\" [style.width]=\"showScrollButtons() ? 'auto': '100%'\">\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 }\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()){ <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"] }]
|
|
16154
16182
|
}], propDecorators: { menuGroups: [{
|
|
16155
16183
|
type: Input
|
|
16156
16184
|
}], titleKey: [{
|
|
@@ -16159,6 +16187,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
16159
16187
|
type: Input
|
|
16160
16188
|
}], visibilityChange: [{
|
|
16161
16189
|
type: Output
|
|
16190
|
+
}], sideNavScroll: [{
|
|
16191
|
+
type: ViewChild,
|
|
16192
|
+
args: ['sideNavScroll']
|
|
16162
16193
|
}] } });
|
|
16163
16194
|
|
|
16164
16195
|
const components = [
|