@messaia/cdk 21.1.0-rc.14 → 21.1.0-rc.16

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.
@@ -20684,9 +20684,13 @@ class GenericFormBaseComponent extends BaseComponent {
20684
20684
  : $localize `:@@snackbar.error.required-fields:All fields marked with an asterisk (*) are required.`;
20685
20685
  /* Show a notice */
20686
20686
  this.snackBarService.open(message, 'Ok', { duration: 3000, panelClass: ['error'] });
20687
+ /* Call the onAfterFormInvalid hook with the collected errors */
20688
+ this.onAfterFormInvalid(errors);
20687
20689
  })();
20688
20690
  return false;
20689
20691
  }
20692
+ /* Call the onAfterFormValid hook if the form is valid */
20693
+ this.onAfterFormValid();
20690
20694
  return true;
20691
20695
  }
20692
20696
  /**
@@ -20732,46 +20736,6 @@ class GenericFormBaseComponent extends BaseComponent {
20732
20736
  });
20733
20737
  }
20734
20738
  }
20735
- /**
20736
- * Checks if the form is valid.
20737
- * This method validates the form, marks invalid controls, and shows error messages if any.
20738
- * @param form The form to check for validity.
20739
- * @returns A boolean indicating whether the form is valid.
20740
- */
20741
- isFormValidOld(form) {
20742
- /* Print some debug information */
20743
- this.debugForm(form);
20744
- /* If the form is not valid */
20745
- if (form && !form.valid) {
20746
- /* Mark invalid controls as dirty and touched */
20747
- Object.keys(form.controls)
20748
- .filter(x => !form.controls[x].valid)
20749
- .forEach(key => this.invalidateControl(form.controls[key]));
20750
- /* Show error messages */
20751
- (async () => {
20752
- /* Wait until 'mat-error' is displayed */
20753
- await new Promise(y => setTimeout(y, 200));
20754
- /* Parse the error messages */
20755
- var errors = Array();
20756
- Object.keys(form.controls)
20757
- .filter(x => !form.controls[x].valid)
20758
- .forEach(key => {
20759
- /* Get error text */
20760
- var error = this.getElementError(form.controls[key]?.nativeElement);
20761
- if (error) {
20762
- errors.push(error);
20763
- }
20764
- });
20765
- /* Build error message */
20766
- var message = errors.length ? errors.slice(0, 3).join('\n') : $localize `:@@snackbar.error.required-fields:All fields marked with an asterisk (*) are required.`;
20767
- /* Show a notice */
20768
- this.snackBarService.open(message, 'Ok', { duration: 3000, panelClass: ['error'] });
20769
- return false;
20770
- })();
20771
- return false;
20772
- }
20773
- return true;
20774
- }
20775
20739
  /**
20776
20740
  * Resets form controls.
20777
20741
  * This method marks all controls in the form as pristine, untouched, and updates their validity.
@@ -20851,24 +20815,6 @@ class GenericFormBaseComponent extends BaseComponent {
20851
20815
  }
20852
20816
  }
20853
20817
  }
20854
- // /**
20855
- // * Shows form errors.
20856
- // * This method logs form control errors to the console if debugging is enabled.
20857
- // * @param form The form to debug.
20858
- // */
20859
- // protected debugForm(form?: NgForm | FormGroup | FormArray): void {
20860
- // if (form && this.debug) {
20861
- // console.log('Form:', form);
20862
- // Object.keys(form.controls).forEach(key => {
20863
- // const controlErrors: ValidationErrors | null = form.controls[key].errors;
20864
- // if (controlErrors != null) {
20865
- // Object.keys(controlErrors).forEach(keyError => {
20866
- // console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
20867
- // });
20868
- // }
20869
- // });
20870
- // }
20871
- // }
20872
20818
  /**
20873
20819
  * Adds toolbar menu items.
20874
20820
  * This method adds the 'Delete' menu item to the toolbar if the entity is deletable.
@@ -21060,6 +21006,17 @@ class GenericFormBaseComponent extends BaseComponent {
21060
21006
  });
21061
21007
  }
21062
21008
  }
21009
+ /**
21010
+ * Event emitted when the form is invalid.
21011
+ * This method allows performing operations when the form is found to be invalid.
21012
+ * @param errors The validation errors found in the form.
21013
+ */
21014
+ onAfterFormInvalid(errors) { }
21015
+ /**
21016
+ * Event emitted when the form is valid.
21017
+ * This method allows performing operations when the form is found to be valid.
21018
+ */
21019
+ onAfterFormValid() { }
21063
21020
  /**
21064
21021
  * Event emitted when the entity has been created.
21065
21022
  */
@@ -25589,6 +25546,12 @@ class VdMenuComponent {
25589
25546
  */
25590
25547
  ngOnInit() {
25591
25548
  this.media.registerQuery(`gt-sm`).subscribe((x) => { this.mobile = !x; });
25549
+ // if (this.items.length > 0) {
25550
+ // var testMenuItem = this.items.find((x: MenuItem) => x.id === 9);
25551
+ // if (testMenuItem) {
25552
+ // this.itemMouseEnter({ type: 'mouseenter' }, testMenuItem);
25553
+ // }
25554
+ // }
25592
25555
  }
25593
25556
  /**
25594
25557
  * Event emitted when a meni item is clicked.
@@ -25616,10 +25579,10 @@ class VdMenuComponent {
25616
25579
  * Event emitted when the cursor of the mouse is moved out of it.
25617
25580
  */
25618
25581
  itemMouseLeave($event, item) {
25619
- this.onMouseLeave.emit({ event: $event, item: item });
25582
+ // this.onMouseLeave.emit({ event: $event, item: item });
25620
25583
  }
25621
25584
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
25622
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n <mat-accordion displayMode=\"flat\">\r\n @for (item of items; track item; let last = $last) {\r\n @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n (click)=\"$event.stopPropagation();\"\r\n [disabled]=\"!mobile\"\r\n [hideToggle]=\"!mobile || !item?.items?.length\"\r\n [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n [routerLinkActive]=\"['active']\"\r\n [routerLinkActiveOptions]=\"{exact:false}\">\r\n <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n <mat-panel-title>\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{item.title}}</h3>\r\n }\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <mat-nav-list>\r\n @for (subItem of item.items; track subItem; let subLast = $last) {\r\n @if (subItem.enabled) {\r\n <a mat-list-item\r\n [style.backgroundColor]=\"subItem.backgroundColor\"\r\n [routerLink]=\"subItem.path\"\r\n target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n [fragment]=\"subItem.fragment\"\r\n (click)=\"itemClicked($event, subItem)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"subItem.iconColor\"\r\n [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && subItem.title) {\r\n <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{subItem.title}}</h3>\r\n }\r\n @if (avatar && subItem.description) {\r\n <p>{{subItem.description}}</p>\r\n }\r\n </a>\r\n }\r\n @if (subItem.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!subItem.divider && avatar && !subLast) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n }\r\n </mat-nav-list>\r\n </mat-expansion-panel>\r\n } @else {\r\n @if (item.enabled) {\r\n <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\"\r\n matListItemIcon>\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3 matLine>{{item.title}}</h3>\r\n }\r\n @if (avatar && item.description) {\r\n <p matLine>{{item.description}}</p>\r\n }\r\n </a>\r\n }\r\n @if (item.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!item.divider && avatar && !last) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n }\r\n }\r\n </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
25585
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n <!-- #region main-menu-accordion -->\r\n <mat-accordion displayMode=\"flat\">\r\n @for (item of items; track item; let last = $last) {\r\n <!-- #region mobile-item-with-submenu -->\r\n @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n (click)=\"$event.stopPropagation();\"\r\n [disabled]=\"!mobile\"\r\n [hideToggle]=\"!mobile || !item?.items?.length\"\r\n [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n [routerLinkActive]=\"['active']\"\r\n [routerLinkActiveOptions]=\"{exact:false}\">\r\n <!-- #region mobile-parent-item-header -->\r\n <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n <mat-panel-title>\r\n <!-- #region parent-item-icon-and-title -->\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{item.title}}</h3>\r\n }\r\n <!-- #endregion -->\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <!-- #endregion -->\r\n\r\n <!-- #region mobile-submenu-items -->\r\n <mat-nav-list>\r\n @for (subItem of item.items; track subItem; let subLast = $last) {\r\n <!-- #region visible-submenu-link -->\r\n @if (subItem.enabled) {\r\n <a mat-list-item\r\n [style.backgroundColor]=\"subItem.backgroundColor\"\r\n [routerLink]=\"subItem.path\"\r\n target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n [fragment]=\"subItem.fragment\"\r\n (click)=\"itemClicked($event, subItem)\">\r\n <!-- #region submenu-icon-and-text -->\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n\r\n @if (!avatar && subItem.title) {\r\n <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n }\r\n\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n\r\n @if (avatar) {\r\n <h3>{{subItem.title}}</h3>\r\n }\r\n\r\n @if (avatar && subItem.description) {\r\n <p>{{subItem.description}}</p>\r\n }\r\n\r\n @if (subItem.badge && subItem.badge() !== 0) {\r\n <span matListItemMeta\r\n [matBadge]=\"subItem.badge()\"\r\n matBadgeOverlap=\"false\"\r\n matBadgePosition=\"above before\"\r\n class=\"menu-badge-align\">\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region submenu-divider-lines -->\r\n @if (subItem.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!subItem.divider && avatar && !subLast) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n <!-- #endregion -->\r\n }\r\n </mat-nav-list>\r\n <!-- #endregion -->\r\n </mat-expansion-panel>\r\n <!-- #endregion -->\r\n\r\n <!-- #region regular-menu-item -->\r\n } @else {\r\n <!-- #region regular-item-link -->\r\n @if (item.enabled) {\r\n <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n aria-hidden=\"false\"\r\n matListItemIcon>\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n }\r\n\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n\r\n @if (avatar) {\r\n <h3 matLine>{{item.title}}</h3>\r\n }\r\n\r\n @if (avatar && item.description) {\r\n <p matLine>{{item.description}}</p>\r\n }\r\n\r\n @if (item.badge && item.badge() !== 0) {\r\n <span matListItemMeta\r\n [matBadge]=\"item.badge()\"\r\n matBadgeOverlap=\"false\"\r\n matBadgePosition=\"above before\"\r\n class=\"menu-badge-align\">\r\n </span>\r\n }\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region regular-item-divider-lines -->\r\n @if (item.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!item.divider && avatar && !last) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n <!-- #endregion -->\r\n }\r\n <!-- #endregion -->\r\n }\r\n </mat-accordion>\r\n <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
25623
25586
  }
25624
25587
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, decorators: [{
25625
25588
  type: Component,
@@ -25633,7 +25596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
25633
25596
  MatBadgeModule,
25634
25597
  VdDelayedHoverDirective,
25635
25598
  FuncPipe
25636
- ], template: "<mat-nav-list>\r\n <mat-accordion displayMode=\"flat\">\r\n @for (item of items; track item; let last = $last) {\r\n @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n (click)=\"$event.stopPropagation();\"\r\n [disabled]=\"!mobile\"\r\n [hideToggle]=\"!mobile || !item?.items?.length\"\r\n [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n [routerLinkActive]=\"['active']\"\r\n [routerLinkActiveOptions]=\"{exact:false}\">\r\n <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n <mat-panel-title>\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{item.title}}</h3>\r\n }\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <mat-nav-list>\r\n @for (subItem of item.items; track subItem; let subLast = $last) {\r\n @if (subItem.enabled) {\r\n <a mat-list-item\r\n [style.backgroundColor]=\"subItem.backgroundColor\"\r\n [routerLink]=\"subItem.path\"\r\n target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n [fragment]=\"subItem.fragment\"\r\n (click)=\"itemClicked($event, subItem)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"subItem.iconColor\"\r\n [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && subItem.title) {\r\n <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{subItem.title}}</h3>\r\n }\r\n @if (avatar && subItem.description) {\r\n <p>{{subItem.description}}</p>\r\n }\r\n </a>\r\n }\r\n @if (subItem.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!subItem.divider && avatar && !subLast) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n }\r\n </mat-nav-list>\r\n </mat-expansion-panel>\r\n } @else {\r\n @if (item.enabled) {\r\n <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\"\r\n matListItemIcon>\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3 matLine>{{item.title}}</h3>\r\n }\r\n @if (avatar && item.description) {\r\n <p matLine>{{item.description}}</p>\r\n }\r\n </a>\r\n }\r\n @if (item.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!item.divider && avatar && !last) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n }\r\n }\r\n </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"] }]
25599
+ ], template: "<mat-nav-list>\r\n <!-- #region main-menu-accordion -->\r\n <mat-accordion displayMode=\"flat\">\r\n @for (item of items; track item; let last = $last) {\r\n <!-- #region mobile-item-with-submenu -->\r\n @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n (click)=\"$event.stopPropagation();\"\r\n [disabled]=\"!mobile\"\r\n [hideToggle]=\"!mobile || !item?.items?.length\"\r\n [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n [routerLinkActive]=\"['active']\"\r\n [routerLinkActiveOptions]=\"{exact:false}\">\r\n <!-- #region mobile-parent-item-header -->\r\n <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n <mat-panel-title>\r\n <!-- #region parent-item-icon-and-title -->\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n [matBadge]=\"item.badge ? item.badge() : null\"\r\n [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n aria-hidden=\"false\">\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n }\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n @if (avatar) {\r\n <h3>{{item.title}}</h3>\r\n }\r\n <!-- #endregion -->\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <!-- #endregion -->\r\n\r\n <!-- #region mobile-submenu-items -->\r\n <mat-nav-list>\r\n @for (subItem of item.items; track subItem; let subLast = $last) {\r\n <!-- #region visible-submenu-link -->\r\n @if (subItem.enabled) {\r\n <a mat-list-item\r\n [style.backgroundColor]=\"subItem.backgroundColor\"\r\n [routerLink]=\"subItem.path\"\r\n target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n [fragment]=\"subItem.fragment\"\r\n (click)=\"itemClicked($event, subItem)\">\r\n <!-- #region submenu-icon-and-text -->\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n\r\n @if (!avatar && subItem.title) {\r\n <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n }\r\n\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n\r\n @if (avatar) {\r\n <h3>{{subItem.title}}</h3>\r\n }\r\n\r\n @if (avatar && subItem.description) {\r\n <p>{{subItem.description}}</p>\r\n }\r\n\r\n @if (subItem.badge && subItem.badge() !== 0) {\r\n <span matListItemMeta\r\n [matBadge]=\"subItem.badge()\"\r\n matBadgeOverlap=\"false\"\r\n matBadgePosition=\"above before\"\r\n class=\"menu-badge-align\">\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region submenu-divider-lines -->\r\n @if (subItem.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!subItem.divider && avatar && !subLast) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n <!-- #endregion -->\r\n }\r\n </mat-nav-list>\r\n <!-- #endregion -->\r\n </mat-expansion-panel>\r\n <!-- #endregion -->\r\n\r\n <!-- #region regular-menu-item -->\r\n } @else {\r\n <!-- #region regular-item-link -->\r\n @if (item.enabled) {\r\n <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n @if (!avatar) {\r\n <mat-icon [fontSet]=\"fontSet\"\r\n [style.color]=\"item.iconColor\"\r\n aria-hidden=\"false\"\r\n matListItemIcon>\r\n {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n }\r\n\r\n @if (!avatar && item.title) {\r\n <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n }\r\n\r\n @if (avatar) {\r\n <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n }\r\n\r\n @if (avatar) {\r\n <h3 matLine>{{item.title}}</h3>\r\n }\r\n\r\n @if (avatar && item.description) {\r\n <p matLine>{{item.description}}</p>\r\n }\r\n\r\n @if (item.badge && item.badge() !== 0) {\r\n <span matListItemMeta\r\n [matBadge]=\"item.badge()\"\r\n matBadgeOverlap=\"false\"\r\n matBadgePosition=\"above before\"\r\n class=\"menu-badge-align\">\r\n </span>\r\n }\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region regular-item-divider-lines -->\r\n @if (item.divider && !avatar) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (!item.divider && avatar && !last) {\r\n <mat-divider [inset]=\"avatar\"></mat-divider>\r\n }\r\n <!-- #endregion -->\r\n }\r\n <!-- #endregion -->\r\n }\r\n </mat-accordion>\r\n <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"] }]
25637
25600
  }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { items: [{
25638
25601
  type: Input
25639
25602
  }], activeExact: [{