@mediusinc/mng-commons 0.18.0 → 0.18.1

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.
@@ -7,7 +7,7 @@ import { InjectionToken, Injectable, Pipe, Inject, EventEmitter, Component, Chan
7
7
  import * as i2$2 from '@angular/forms';
8
8
  import { Validators, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
9
9
  import * as i1 from '@angular/router';
10
- import { NavigationEnd, ActivatedRoute, GuardsCheckEnd, RouterModule } from '@angular/router';
10
+ import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, ActivatedRoute, GuardsCheckEnd, RouterModule } from '@angular/router';
11
11
  import * as i2$3 from '@ngx-formly/core';
12
12
  import { FieldWrapper, FieldType, FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
13
13
  import * as i2 from '@ngx-translate/core';
@@ -9642,6 +9642,8 @@ class MngTableComponent {
9642
9642
  this.showInlineActionsColumn = false;
9643
9643
  this.rowClickActions = [];
9644
9644
  this.rowInlineActions = [];
9645
+ // other
9646
+ this.routerIsNavigationOutsideInProgress = false;
9645
9647
  this.subscriptions = [];
9646
9648
  }
9647
9649
  ngOnInit() {
@@ -9698,7 +9700,6 @@ class MngTableComponent {
9698
9700
  // when data provider is used, use pagination
9699
9701
  paginationMode = TablePaginationModeEnum.Pagination;
9700
9702
  }
9701
- console.log(paginationMode);
9702
9703
  if (paginationMode === TablePaginationModeEnum.InfiniteScroll) {
9703
9704
  this.infiniteScroll = true;
9704
9705
  this.tableFullHeightOffset = this.descriptor?.tableFullHeightOffset ?? 315;
@@ -9827,11 +9828,14 @@ class MngTableComponent {
9827
9828
  if (!event.filters) {
9828
9829
  event.filters = this.createFilterMeta();
9829
9830
  }
9830
- this.router.navigate([], {
9831
- relativeTo: this.route,
9832
- replaceUrl: true,
9833
- queryParams: MediusRestUtil.fromPrimeLazyLoadEventToAngularQueryParams(event, this.rowsPerPageOptions[0])
9834
- });
9831
+ if (!this.routerIsNavigationOutsideInProgress) {
9832
+ // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
9833
+ this.router.navigate([], {
9834
+ relativeTo: this.route,
9835
+ replaceUrl: true,
9836
+ queryParams: MediusRestUtil.fromPrimeLazyLoadEventToAngularQueryParams(event, this.rowsPerPageOptions[0])
9837
+ });
9838
+ }
9835
9839
  }
9836
9840
  else {
9837
9841
  const mediusQueryParams = event ? MediusRestUtil.fromPrimeLazyLoadEventToMediusQueryParams(event) : new MediusQueryParam();
@@ -10049,10 +10053,19 @@ class MngTableComponent {
10049
10053
  initializeDataLoadingTriggers() {
10050
10054
  if (this.useQueryParams) {
10051
10055
  // trigger table loads from route updates
10052
- const subscription = this.route.queryParams.subscribe(qp => {
10056
+ const routeQpSubscription = this.route.queryParams.subscribe(qp => {
10053
10057
  this.loadTableFromRouteUpdate(qp);
10054
10058
  });
10055
- this.subscriptions.push(subscription);
10059
+ const routerEvSubscription = this.router.events
10060
+ .pipe(filter(e => (e instanceof NavigationStart && e.url.split('?')[0].split('#')[0] !== this.router.url.split('?')[0].split('#')[0]) ||
10061
+ e instanceof NavigationEnd ||
10062
+ e instanceof NavigationCancel ||
10063
+ e instanceof NavigationError))
10064
+ .subscribe(e => {
10065
+ this.routerIsNavigationOutsideInProgress = e instanceof NavigationStart;
10066
+ });
10067
+ this.subscriptions.push(routeQpSubscription);
10068
+ this.subscriptions.push(routerEvSubscription);
10056
10069
  }
10057
10070
  else {
10058
10071
  // load data immediately by creating default sorts and filters (primeng will trigger onLazyLoad event on sort&filter metadata change)
@@ -11087,9 +11100,6 @@ class MngMenuItemComponent {
11087
11100
  this.isVisible$ = this.isVisibleSubject.asObservable().pipe(distinctUntilChanged());
11088
11101
  }
11089
11102
  ngOnInit() {
11090
- if (!this.mngCommons.menuModeIsSlim && this.item.routerLink) {
11091
- this.updateActiveStateFromRoute();
11092
- }
11093
11103
  this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
11094
11104
  if (this.item.routerLink) {
11095
11105
  if (typeof this.item.routerLink === 'string') {
@@ -11099,6 +11109,9 @@ class MngMenuItemComponent {
11099
11109
  this.itemUrl = this.router.parseUrl(this.item.routerLink.join('/'));
11100
11110
  }
11101
11111
  }
11112
+ if (!this.mngCommons.menuModeIsSlim && this.item.routerLink) {
11113
+ this.updateActiveStateFromRoute();
11114
+ }
11102
11115
  this.menuSourceSubscription = this.mngCommons.menuActiveKey$.subscribe(key => {
11103
11116
  // deactivate current active menu
11104
11117
  if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
@@ -11149,7 +11162,12 @@ class MngMenuItemComponent {
11149
11162
  }
11150
11163
  updateActiveStateFromRoute() {
11151
11164
  if (this.itemUrl) {
11152
- this.active = this.router.isActive(this.itemUrl, this.item.items ? false : true);
11165
+ this.active = this.router.isActive(this.itemUrl, {
11166
+ matrixParams: 'ignored',
11167
+ queryParams: 'ignored',
11168
+ paths: this.item.items ? 'subset' : 'exact',
11169
+ fragment: 'ignored'
11170
+ });
11153
11171
  }
11154
11172
  else {
11155
11173
  this.active = false;
@@ -11243,7 +11261,7 @@ class MngMenuItemComponent {
11243
11261
  }
11244
11262
  }
11245
11263
  MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngAuthorizationService }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
11246
- MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding", "class.hidden": "this.hostClassChildrenHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [
11264
+ MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding", "class.hidden": "this.hostClassChildrenHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [
11247
11265
  trigger('children', [
11248
11266
  state('void', style({
11249
11267
  height: '0px'
@@ -11295,7 +11313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
11295
11313
  transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
11296
11314
  transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
11297
11315
  ])
11298
- ], template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n" }]
11316
+ ], template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n" }]
11299
11317
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: MngAuthorizationService }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
11300
11318
  type: Input
11301
11319
  }], index: [{