@tilde-nlp/ngx-menu 6.1.50 → 6.1.52

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.
Files changed (9) hide show
  1. package/esm2022/lib/components/menu-columns/menu-columns.component.mjs +20 -9
  2. package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +47 -18
  3. package/esm2022/lib/menu.module.mjs +8 -4
  4. package/esm2022/lib/models/menu-item-group.model.mjs +1 -1
  5. package/fesm2022/tilde-nlp-ngx-menu.mjs +71 -27
  6. package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
  7. package/lib/menu.module.d.ts +2 -1
  8. package/lib/models/menu-item-group.model.d.ts +6 -0
  9. package/package.json +1 -1
package/fesm2022/tilde-nlp-ngx-menu.mjs CHANGED
@@ -27,6 +27,8 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
27
27
  import * as i1$2 from '@ngbracket/ngx-layout/flex';
28
28
  import * as i2$2 from '@ngbracket/ngx-layout/extended';
29
29
  import * as i4 from '@angular/material/divider';
30
+ import * as i5$1 from '@angular/material/progress-spinner';
31
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
30
32
 
31
33
  /** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
32
34
  var StrapiDataLocation;
@@ -857,8 +859,24 @@ function MenuItemListComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
857
859
  const ctx_r0 = i0.ɵɵnextContext();
858
860
  i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
859
861
  } }
862
+ function MenuItemListComponent_ng_template_11_button_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
863
+ i0.ɵɵelement(0, "mat-icon", 32);
864
+ } if (rf & 2) {
865
+ let tmp_7_0;
866
+ const ctx_r0 = i0.ɵɵnextContext(3);
867
+ i0.ɵɵproperty("svgIcon", (tmp_7_0 = ctx_r0.menuItemGroup.itemGroupIcon) !== null && tmp_7_0 !== undefined ? tmp_7_0 : "");
868
+ } }
869
+ function MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
870
+ i0.ɵɵelementStart(0, "mat-icon");
871
+ i0.ɵɵtext(1);
872
+ i0.ɵɵelementEnd();
873
+ } if (rf & 2) {
874
+ const ctx_r0 = i0.ɵɵnextContext(3);
875
+ i0.ɵɵadvance();
876
+ i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
877
+ } }
860
878
  function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
861
- i0.ɵɵelementStart(0, "span", 33);
879
+ i0.ɵɵelementStart(0, "span", 34);
862
880
  i0.ɵɵtext(1);
863
881
  i0.ɵɵpipe(2, "translate");
864
882
  i0.ɵɵelementEnd();
@@ -871,34 +889,47 @@ function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (r
871
889
  const _r16 = i0.ɵɵgetCurrentView();
872
890
  i0.ɵɵelementStart(0, "button", 31);
873
891
  i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
874
- i0.ɵɵelementStart(1, "mat-icon");
875
- i0.ɵɵtext(2);
876
- i0.ɵɵelementEnd();
877
- i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 32);
892
+ i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_11_button_0_Conditional_1_Template, 1, 1, "mat-icon", 32)(2, MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template, 2, 1, "mat-icon")(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 33);
878
893
  i0.ɵɵelementEnd();
879
894
  } if (rf & 2) {
880
895
  const ctx_r0 = i0.ɵɵnextContext(2);
881
- i0.ɵɵadvance(2);
882
- i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
896
+ i0.ɵɵclassProp("active-menu-item-group", ctx_r0.menuItemGroup.isItemGroupActive && ctx_r0.menuItemGroup.isItemGroupActive());
883
897
  i0.ɵɵadvance();
898
+ i0.ɵɵconditional(ctx_r0.menuItemGroup.isCustomItemGroupIcon ? 1 : 2);
899
+ i0.ɵɵadvance(2);
884
900
  i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
885
901
  } }
902
+ function MenuItemListComponent_ng_template_11_button_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
903
+ i0.ɵɵelement(0, "mat-icon", 32);
904
+ } if (rf & 2) {
905
+ let tmp_7_0;
906
+ const ctx_r0 = i0.ɵɵnextContext(3);
907
+ i0.ɵɵproperty("svgIcon", (tmp_7_0 = ctx_r0.menuItemGroup.itemGroupIcon) !== null && tmp_7_0 !== undefined ? tmp_7_0 : "");
908
+ } }
909
+ function MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
910
+ i0.ɵɵelementStart(0, "mat-icon");
911
+ i0.ɵɵtext(1);
912
+ i0.ɵɵelementEnd();
913
+ } if (rf & 2) {
914
+ const ctx_r0 = i0.ɵɵnextContext(3);
915
+ i0.ɵɵadvance();
916
+ i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
917
+ } }
886
918
  function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (rf & 1) {
887
919
  const _r17 = i0.ɵɵgetCurrentView();
888
- i0.ɵɵelementStart(0, "button", 34);
920
+ i0.ɵɵelementStart(0, "button", 35);
889
921
  i0.ɵɵpipe(1, "translate");
890
922
  i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
891
- i0.ɵɵelementStart(2, "mat-icon");
892
- i0.ɵɵtext(3);
893
- i0.ɵɵelementEnd()();
923
+ i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_11_button_1_Conditional_2_Template, 1, 1, "mat-icon", 32)(3, MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template, 2, 1, "mat-icon");
924
+ i0.ɵɵelementEnd();
894
925
  } if (rf & 2) {
895
926
  const ctx_r0 = i0.ɵɵnextContext(2);
896
927
  i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, ctx_r0.titleKey));
897
- i0.ɵɵadvance(3);
898
- i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
928
+ i0.ɵɵadvance(2);
929
+ i0.ɵɵconditional(ctx_r0.menuItemGroup.isCustomItemGroupIcon ? 2 : 3);
899
930
  } }
900
931
  function MenuItemListComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
901
- i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button", 29)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 30);
932
+ i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 4, "button", 29)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 30);
902
933
  } if (rf & 2) {
903
934
  const ctx_r0 = i0.ɵɵnextContext();
904
935
  i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
@@ -935,7 +966,7 @@ class MenuItemListComponent {
935
966
  this.toggleExpand.next(menuItem);
936
967
  }
937
968
  static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
938
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [4, "ngIf"], [1, "child-menu"], ["mat-menu-item", ""], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
969
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [4, "ngIf"], [1, "child-menu"], ["mat-menu-item", ""], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "active-menu-item-group", "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], [3, "svgIcon"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
939
970
  i0.ɵɵelementStart(0, "div", 7);
940
971
  i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 8)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
941
972
  i0.ɵɵelementStart(3, "div", 9);
@@ -949,11 +980,11 @@ class MenuItemListComponent {
949
980
  i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
950
981
  i0.ɵɵadvance();
951
982
  i0.ɵɵproperty("ngForOf", ctx.items);
952
- } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}[_nghost-%COMP%] .menu-list-wrapper .menu-parent-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0} lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
983
+ } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}.menu-action-button.active-menu-item-group[_ngcontent-%COMP%]{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}[_nghost-%COMP%] .menu-list-wrapper .menu-parent-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0} lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
953
984
  }
954
985
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
955
986
  type: Component,
956
- args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<button\r\n\t\tmatTooltipClass=\"menu-tooltip\"\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t\t[fxLayout]=\"menuItemLayout\"\r\n\t\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t\t#state=\"matMenuTrigger\"\r\n\t\t[matMenuTriggerFor]=\"menu\"\r\n\t\t[attr.id]=\"menuItem.customId\"\r\n\t\tclass=\"text-m menu-item menu-parent-item\"\r\n\t\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t(click)=\"toggleItemExpand($event, menuItem)\"\r\n\t>\r\n\t\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t\t<span class=\"menu-item-title\">\r\n\t\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t\t>\r\n\t\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t\t<ng-template #iconDown>\r\n\t\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</button>\r\n\t<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t\t@for (child of menuItem.children; track $index) {\r\n\t\t<div mat-menu-item>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child, isChild: true }\"> </ng-container>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\" let-isChild=\"isChild\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible || isChild\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button *ngIf=\"menuItemGroup && labelsVisible\" mat-button class=\"menu-title-btn menu-action-button\" (click)=\"menuItemGroup?.itemGroupClick()\">\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t</button>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
987
+ args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<button\r\n\t\tmatTooltipClass=\"menu-tooltip\"\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t\t[fxLayout]=\"menuItemLayout\"\r\n\t\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t\t#state=\"matMenuTrigger\"\r\n\t\t[matMenuTriggerFor]=\"menu\"\r\n\t\t[attr.id]=\"menuItem.customId\"\r\n\t\tclass=\"text-m menu-item menu-parent-item\"\r\n\t\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t(click)=\"toggleItemExpand($event, menuItem)\"\r\n\t>\r\n\t\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t\t<span class=\"menu-item-title\">\r\n\t\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t\t>\r\n\t\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t\t<ng-template #iconDown>\r\n\t\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</button>\r\n\t<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t\t@for (child of menuItem.children; track $index) {\r\n\t\t<div mat-menu-item>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child, isChild: true }\"> </ng-container>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\" let-isChild=\"isChild\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible || isChild\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}.menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
957
988
  }], null, { direction: [{
958
989
  type: Input
959
990
  }], labelsVisible: [{
@@ -973,7 +1004,7 @@ class MenuItemListComponent {
973
1004
 
974
1005
  function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
975
1006
  const _r1 = i0.ɵɵgetCurrentView();
976
- i0.ɵɵelementStart(0, "menu-item-list", 3);
1007
+ i0.ɵɵelementStart(0, "menu-item-list", 4);
977
1008
  i0.ɵɵlistener("toggleExpand", function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template_menu_item_list_toggleExpand_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.elementExpanded($event)); });
978
1009
  i0.ɵɵelementEnd();
979
1010
  } if (rf & 2) {
@@ -982,19 +1013,29 @@ function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx)
982
1013
  i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items);
983
1014
  } }
984
1015
  function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
985
- i0.ɵɵelementStart(0, "div", 4);
1016
+ i0.ɵɵelementStart(0, "div", 5);
1017
+ i0.ɵɵelement(1, "mat-spinner", 6);
1018
+ i0.ɵɵelementEnd();
1019
+ } if (rf & 2) {
1020
+ i0.ɵɵadvance();
1021
+ i0.ɵɵproperty("diameter", 24);
1022
+ } }
1023
+ function MenuColumnsComponent_ng_container_0_div_3_Template(rf, ctx) { if (rf & 1) {
1024
+ i0.ɵɵelementStart(0, "div", 7);
986
1025
  i0.ɵɵelement(1, "mat-divider");
987
1026
  i0.ɵɵelementEnd();
988
1027
  } }
989
1028
  function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
990
1029
  i0.ɵɵelementContainerStart(0);
991
- i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 5, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 0, "div", 2);
1030
+ i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 5, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 1, "div", 2)(3, MenuColumnsComponent_ng_container_0_div_3_Template, 2, 0, "div", 3);
992
1031
  i0.ɵɵelementContainerEnd();
993
1032
  } if (rf & 2) {
994
1033
  const group_r3 = ctx.$implicit;
995
1034
  i0.ɵɵadvance();
996
1035
  i0.ɵɵproperty("ngIf", group_r3.items.length || group_r3.showEmpty);
997
1036
  i0.ɵɵadvance();
1037
+ i0.ɵɵproperty("ngIf", group_r3.isItemsLoading);
1038
+ i0.ɵɵadvance();
998
1039
  i0.ɵɵproperty("ngIf", group_r3.bottomDivider && group_r3.items.length);
999
1040
  } }
1000
1041
  class MenuColumnsComponent {
@@ -1033,15 +1074,15 @@ class MenuColumnsComponent {
1033
1074
  return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
1034
1075
  }
1035
1076
  static { this.ɵfac = function MenuColumnsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
1036
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
1037
- i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
1077
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "loader-container", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "loader-container"], [1, "loader", 3, "diameter"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
1078
+ i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 4, 3, "ng-container", 0);
1038
1079
  } if (rf & 2) {
1039
1080
  i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
1040
- } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
1081
+ } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, i5$1.MatProgressSpinner, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}.loader-container[_ngcontent-%COMP%]{padding-left:20px}"] }); }
1041
1082
  }
1042
1083
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
1043
1084
  type: Component,
1044
- args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n [items]=\"group.items\">\r\n </menu-item-list>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}\n"] }]
1085
+ args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n [items]=\"group.items\">\r\n </menu-item-list>\r\n <div class=\"loader-container\" *ngIf=\"group.isItemsLoading\">\r\n <mat-spinner [diameter]=\"24\" class=\"loader\"></mat-spinner>\r\n </div>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}.loader-container{padding-left:20px}\n"] }]
1045
1086
  }], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
1046
1087
  type: Optional
1047
1088
  }, {
@@ -1372,7 +1413,8 @@ class MenuModule {
1372
1413
  MatIconModule,
1373
1414
  TranslateModule,
1374
1415
  PlausibleModule,
1375
- LanguageTranslateModule] }); }
1416
+ LanguageTranslateModule,
1417
+ MatProgressSpinnerModule] }); }
1376
1418
  }
1377
1419
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuModule, [{
1378
1420
  type: NgModule,
@@ -1405,7 +1447,8 @@ class MenuModule {
1405
1447
  MatIconModule,
1406
1448
  TranslateModule,
1407
1449
  PlausibleModule,
1408
- LanguageTranslateModule
1450
+ LanguageTranslateModule,
1451
+ MatProgressSpinnerModule
1409
1452
  ],
1410
1453
  providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
1411
1454
  }]
@@ -1430,7 +1473,8 @@ class MenuModule {
1430
1473
  MatIconModule,
1431
1474
  TranslateModule,
1432
1475
  PlausibleModule,
1433
- LanguageTranslateModule], exports: [SideNavMenuComponent,
1476
+ LanguageTranslateModule,
1477
+ MatProgressSpinnerModule], exports: [SideNavMenuComponent,
1434
1478
  MenuColumnsComponent] }); })();
1435
1479
  i0.ɵɵsetComponentScope(SideNavMenuComponent, [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i2.PlausibleEventDirective, MenuColumnsComponent,
1436
1480
  MenuProfileComponent,