ngssm-shell 14.2.0 → 14.2.2

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 (30) hide show
  1. package/esm2020/lib/actions/index.mjs +2 -1
  2. package/esm2020/lib/actions/lock-navigation-bar.action.mjs +8 -0
  3. package/esm2020/lib/actions/shell-action-type.mjs +2 -1
  4. package/esm2020/lib/components/shell/shell.component.mjs +30 -11
  5. package/esm2020/lib/components/shell-notification/shell-notification.component.mjs +5 -7
  6. package/esm2020/lib/components/shell-notification-popup/shell-notification-popup.component.mjs +4 -4
  7. package/esm2020/lib/components/shell-notifications/shell-notifications.component.mjs +7 -8
  8. package/esm2020/lib/components/side-nav/side-nav.component.mjs +7 -9
  9. package/esm2020/lib/components/wrapper/wrapper.component.mjs +4 -4
  10. package/esm2020/lib/effects/notification-showing.effect.mjs +4 -4
  11. package/esm2020/lib/model/index.mjs +2 -1
  12. package/esm2020/lib/model/lock-status.mjs +7 -0
  13. package/esm2020/lib/ngssm-shell.module.mjs +5 -5
  14. package/esm2020/lib/reducers/navigation-bar.reducer.mjs +11 -5
  15. package/esm2020/lib/reducers/shell-notifications.reducer.mjs +4 -4
  16. package/esm2020/lib/state/shell.state.mjs +3 -1
  17. package/fesm2015/ngssm-shell.mjs +89 -51
  18. package/fesm2015/ngssm-shell.mjs.map +1 -1
  19. package/fesm2020/ngssm-shell.mjs +89 -51
  20. package/fesm2020/ngssm-shell.mjs.map +1 -1
  21. package/lib/actions/index.d.ts +1 -0
  22. package/lib/actions/lock-navigation-bar.action.d.ts +7 -0
  23. package/lib/actions/shell-action-type.d.ts +1 -0
  24. package/lib/components/shell/shell.component.d.ts +1 -0
  25. package/lib/model/index.d.ts +1 -0
  26. package/lib/model/lock-status.d.ts +5 -0
  27. package/lib/state/shell.state.d.ts +2 -0
  28. package/package.json +4 -4
  29. package/styles/ngssm-shell.scss +40 -9
  30. package/styles/ngssm-sidenav.scss +29 -2
@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, Input, HostBinding, Injectable, NgM
3
3
  import * as i2$1 from '@angular/router';
4
4
  import { RouterModule } from '@angular/router';
5
5
  import { MaterialImportsModule } from 'ngssm-toolkit';
6
- import * as i7$1 from 'ngssm-ace-editor';
6
+ import * as i6 from 'ngssm-ace-editor';
7
7
  import { NgssmAceEditorMode, NgssmAceEditorModule } from 'ngssm-ace-editor';
8
8
  import { BehaviorSubject, combineLatest, takeUntil } from 'rxjs';
9
9
  import * as i1 from 'ngssm-store';
@@ -12,17 +12,27 @@ import { __decorate } from 'tslib';
12
12
  import update from 'immutability-helper';
13
13
  import * as i2 from '@angular/common';
14
14
  import * as i4$2 from '@angular/material/toolbar';
15
- import * as i5$2 from '@angular/material/sidenav';
15
+ import * as i5$1 from '@angular/material/sidenav';
16
16
  import * as i3 from '@angular/material/button';
17
17
  import * as i4$1 from '@angular/material/icon';
18
18
  import * as i8 from '@angular/material/badge';
19
- import * as i6 from '@angular/flex-layout/flex';
20
- import * as i4 from '@angular/material/list';
21
- import * as i5 from '@angular/material/divider';
22
- import * as i5$1 from '@angular/material/card';
23
- import * as i7 from '@angular/flex-layout/extended';
19
+ import * as i4 from '@angular/material/divider';
20
+ import * as i5 from '@angular/material/card';
24
21
  import * as i1$1 from '@angular/material/snack-bar';
25
22
 
23
+ var ShellNotificationType;
24
+ (function (ShellNotificationType) {
25
+ ShellNotificationType["success"] = "Success";
26
+ ShellNotificationType["error"] = "Error";
27
+ })(ShellNotificationType || (ShellNotificationType = {}));
28
+
29
+ var LockStatus;
30
+ (function (LockStatus) {
31
+ LockStatus["notLocked"] = "Not Locked";
32
+ LockStatus["lockedOpen"] = "Locked Open";
33
+ LockStatus["lockedClosed"] = "Locked Closed";
34
+ })(LockStatus || (LockStatus = {}));
35
+
26
36
  const getDefaultShellNotifications = () => ({
27
37
  notifications: []
28
38
  });
@@ -37,6 +47,7 @@ let ShellStateSpecification = ShellStateSpecification_1 = class ShellStateSpecif
37
47
  ShellStateSpecification.featureStateKey = 'shell-state';
38
48
  ShellStateSpecification.initialState = {
39
49
  navigationBarOpen: true,
50
+ navigationBarLockStatus: LockStatus.notLocked,
40
51
  shellNotifications: getDefaultShellNotifications()
41
52
  };
42
53
  ShellStateSpecification = ShellStateSpecification_1 = __decorate([
@@ -52,6 +63,7 @@ var ShellActionType;
52
63
  ShellActionType["toggleNavigationBarState"] = "[ShellActionType] toggleNavigationBarState";
53
64
  ShellActionType["openNavigationBar"] = "[ShellActionType] openNavigationBar";
54
65
  ShellActionType["closeNavigationBar"] = "[ShellActionType] closeNavigationBar";
66
+ ShellActionType["lockNavigationBar"] = "[ShellActionType] lockNavigationBar";
55
67
  // Notifications
56
68
  ShellActionType["displayNotification"] = "[ShellActionType] displayNotification";
57
69
  ShellActionType["displayNotificationDetails"] = "[ShellActionType] displayNotificationDetails";
@@ -74,6 +86,13 @@ class DisplayNotificationDetailsAction {
74
86
  }
75
87
  }
76
88
 
89
+ class LockNavigationBarAction {
90
+ constructor(lockStatus) {
91
+ this.lockStatus = lockStatus;
92
+ this.type = ShellActionType.lockNavigationBar;
93
+ }
94
+ }
95
+
77
96
  class WrapperComponent extends NgSsmComponent {
78
97
  constructor(store, viewContainerRef) {
79
98
  super(store);
@@ -93,9 +112,9 @@ class WrapperComponent extends NgSsmComponent {
93
112
  return this._innerHtml$.asObservable();
94
113
  }
95
114
  }
96
- WrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrapperComponent, deps: [{ token: i1.Store }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
97
- WrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrapperComponent, selector: "ngssm-wrapper", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"(innerHtml$ | async) as innerHtml\" [innerHTML]=\"innerHtml\"></span>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
98
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrapperComponent, decorators: [{
115
+ WrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: WrapperComponent, deps: [{ token: i1.Store }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
116
+ WrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: WrapperComponent, selector: "ngssm-wrapper", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"(innerHtml$ | async) as innerHtml\" [innerHTML]=\"innerHtml\"></span>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
117
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: WrapperComponent, decorators: [{
99
118
  type: Component,
100
119
  args: [{ selector: 'ngssm-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"(innerHtml$ | async) as innerHtml\" [innerHTML]=\"innerHtml\"></span>" }]
101
120
  }], ctorParameters: function () { return [{ type: i1.Store }, { type: i0.ViewContainerRef }]; }, propDecorators: { item: [{
@@ -115,11 +134,11 @@ class SideNavComponent extends NgSsmComponent {
115
134
  return this._sidenavConfig$.asObservable();
116
135
  }
117
136
  }
118
- SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
119
- SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SideNavComponent, selector: "ngssm-side-nav", inputs: { config: "config" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<mat-nav-list class=\"ngssm-sidenav-main-container\" *ngIf=\"(sidenavConfig$ | async) as config\">\n <div mat-header *ngIf=\"config.title\">{{config.title}}</div>\n <mat-divider *ngIf=\"config.title\"></mat-divider>\n <ng-container *ngFor=\"let section of config.sections;let last = last;\" class=\"ngssm-sidenav-section-container\">\n <mat-list-item mat-subheader class=\"ngssm-sidenav-section-item-container\">\n <div *ngIf=\"!section.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"section.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:section.linkActiveOnlyIfExact === true}\" *ngIf=\"section.route\"\n class=\"ngssm-sidenav-section-item\">\n <div fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex>\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n </a>\n </mat-list-item>\n <mat-list-item *ngFor=\"let item of section.items\" class=\"ngssm-sidenav-item-container\">\n <div *ngIf=\"!item.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"item.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:item.linkActiveOnlyIfExact === true}\" *ngIf=\"item.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n </a>\n </mat-list-item>\n\n <mat-divider *ngIf=\"!last\"></mat-divider>\n </ng-container>\n</mat-nav-list>", dependencies: [{ kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
120
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SideNavComponent, decorators: [{
137
+ SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SideNavComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
138
+ SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SideNavComponent, selector: "ngssm-side-nav", inputs: { config: "config" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ngssm-sidenav-main-container\" *ngIf=\"(sidenavConfig$ | async) as config\">\n <div class=\"ngssm-sidenav-title\" *ngIf=\"config.title\">{{config.title}}</div>\n <mat-divider *ngIf=\"config.title\"></mat-divider>\n <ng-container *ngFor=\"let section of config.sections;let last = last;\" class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n <div *ngIf=\"!section.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"section.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:section.linkActiveOnlyIfExact === true}\" *ngIf=\"section.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n </a>\n </div>\n <div *ngFor=\"let item of section.items\" class=\"ngssm-sidenav-item-container\">\n <div *ngIf=\"!item.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"item.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:item.linkActiveOnlyIfExact === true}\" *ngIf=\"item.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n </a>\n </div>\n\n <mat-divider *ngIf=\"!last\"></mat-divider>\n </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
139
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SideNavComponent, decorators: [{
121
140
  type: Component,
122
- args: [{ selector: 'ngssm-side-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-nav-list class=\"ngssm-sidenav-main-container\" *ngIf=\"(sidenavConfig$ | async) as config\">\n <div mat-header *ngIf=\"config.title\">{{config.title}}</div>\n <mat-divider *ngIf=\"config.title\"></mat-divider>\n <ng-container *ngFor=\"let section of config.sections;let last = last;\" class=\"ngssm-sidenav-section-container\">\n <mat-list-item mat-subheader class=\"ngssm-sidenav-section-item-container\">\n <div *ngIf=\"!section.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"section.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:section.linkActiveOnlyIfExact === true}\" *ngIf=\"section.route\"\n class=\"ngssm-sidenav-section-item\">\n <div fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex>\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n </a>\n </mat-list-item>\n <mat-list-item *ngFor=\"let item of section.items\" class=\"ngssm-sidenav-item-container\">\n <div *ngIf=\"!item.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"item.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:item.linkActiveOnlyIfExact === true}\" *ngIf=\"item.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n </a>\n </mat-list-item>\n\n <mat-divider *ngIf=\"!last\"></mat-divider>\n </ng-container>\n</mat-nav-list>" }]
141
+ args: [{ selector: 'ngssm-side-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngssm-sidenav-main-container\" *ngIf=\"(sidenavConfig$ | async) as config\">\n <div class=\"ngssm-sidenav-title\" *ngIf=\"config.title\">{{config.title}}</div>\n <mat-divider *ngIf=\"config.title\"></mat-divider>\n <ng-container *ngFor=\"let section of config.sections;let last = last;\" class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n <div *ngIf=\"!section.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"section.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:section.linkActiveOnlyIfExact === true}\" *ngIf=\"section.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"section.icon\" [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{section.label}}\n <ngssm-wrapper *ngIf=\"section.component\" [item]=\"section.component\"></ngssm-wrapper>\n </div>\n </a>\n </div>\n <div *ngFor=\"let item of section.items\" class=\"ngssm-sidenav-item-container\">\n <div *ngIf=\"!item.route\" class=\"ngssm-sidenav-section-item\">\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n\n <a [routerLink]=\"item.route\" routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{exact:item.linkActiveOnlyIfExact === true}\" *ngIf=\"item.route\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n <span *ngIf=\"item.icon\" [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n {{item.label}}\n <ngssm-wrapper *ngIf=\"item.component\" [item]=\"item.component\"></ngssm-wrapper>\n </div>\n </a>\n </div>\n\n <mat-divider *ngIf=\"!last\"></mat-divider>\n </ng-container>\n</div>" }]
123
142
  }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { class: [{
124
143
  type: HostBinding,
125
144
  args: ['class']
@@ -127,12 +146,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
127
146
  type: Input
128
147
  }] } });
129
148
 
130
- var ShellNotificationType;
131
- (function (ShellNotificationType) {
132
- ShellNotificationType["success"] = "Success";
133
- ShellNotificationType["error"] = "Error";
134
- })(ShellNotificationType || (ShellNotificationType = {}));
135
-
136
149
  class ShellNotificationComponent extends NgSsmComponent {
137
150
  constructor(store) {
138
151
  super(store);
@@ -162,11 +175,11 @@ class ShellNotificationComponent extends NgSsmComponent {
162
175
  this.dispatchAction(new DisplayNotificationDetailsAction(this._shellNotificationIndex$.value ?? -1));
163
176
  }
164
177
  }
165
- ShellNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
166
- ShellNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: { displayDetailsButton: "displayDetailsButton", shellNotificationIndex: "shellNotificationIndex" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"(shellNotification$ | async) as shellNotification; else noNotification\"\n class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{'ngssm-shell-notification-success' : shellNotification.type === shellNotificationType.success, 'ngssm-shell-notification-error':shellNotification.type === shellNotificationType.error}\">\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.success\">\n </mat-icon>\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.error\">\n </mat-icon>\n <mat-card-title>{{shellNotification.title}}</mat-card-title>\n <mat-card-subtitle>{{shellNotification.timestamp | date:'shortTime'}}</mat-card-subtitle>\n </mat-card-header>\n <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n <button mat-button *ngIf=\"(displayDetailsButton$ | async) === true && shellNotification.details\"\n (click)=\"displayDetails()\">\n Display details\n </button>\n </div>\n</mat-card>\n\n<ng-template #noNotification>\n No notification to display...\n</ng-template>", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i5$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i5$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
167
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationComponent, decorators: [{
178
+ ShellNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
179
+ ShellNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: { displayDetailsButton: "displayDetailsButton", shellNotificationIndex: "shellNotificationIndex" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"(shellNotification$ | async) as shellNotification; else noNotification\"\n class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{'ngssm-shell-notification-success' : shellNotification.type === shellNotificationType.success, 'ngssm-shell-notification-error':shellNotification.type === shellNotificationType.error}\">\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.success\">\n </mat-icon>\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.error\">\n </mat-icon>\n <mat-card-title>{{shellNotification.title}}</mat-card-title>\n <mat-card-subtitle>{{shellNotification.timestamp | date:'shortTime'}}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n <button mat-button *ngIf=\"(displayDetailsButton$ | async) === true && shellNotification.details\"\n (click)=\"displayDetails()\">\n Display details\n </button>\n </div>\n</mat-card>\n\n<ng-template #noNotification>\n No notification to display...\n</ng-template>", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i5.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
180
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationComponent, decorators: [{
168
181
  type: Component,
169
- args: [{ selector: 'ngssm-shell-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card *ngIf=\"(shellNotification$ | async) as shellNotification; else noNotification\"\n class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{'ngssm-shell-notification-success' : shellNotification.type === shellNotificationType.success, 'ngssm-shell-notification-error':shellNotification.type === shellNotificationType.error}\">\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.success\">\n </mat-icon>\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.error\">\n </mat-icon>\n <mat-card-title>{{shellNotification.title}}</mat-card-title>\n <mat-card-subtitle>{{shellNotification.timestamp | date:'shortTime'}}</mat-card-subtitle>\n </mat-card-header>\n <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n <button mat-button *ngIf=\"(displayDetailsButton$ | async) === true && shellNotification.details\"\n (click)=\"displayDetails()\">\n Display details\n </button>\n </div>\n</mat-card>\n\n<ng-template #noNotification>\n No notification to display...\n</ng-template>", styles: [":host{display:flex;flex-direction:column}\n"] }]
182
+ args: [{ selector: 'ngssm-shell-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card *ngIf=\"(shellNotification$ | async) as shellNotification; else noNotification\"\n class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{'ngssm-shell-notification-success' : shellNotification.type === shellNotificationType.success, 'ngssm-shell-notification-error':shellNotification.type === shellNotificationType.error}\">\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.success\">\n </mat-icon>\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification \"\n *ngIf=\"shellNotification.type === shellNotificationType.error\">\n </mat-icon>\n <mat-card-title>{{shellNotification.title}}</mat-card-title>\n <mat-card-subtitle>{{shellNotification.timestamp | date:'shortTime'}}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n <button mat-button *ngIf=\"(displayDetailsButton$ | async) === true && shellNotification.details\"\n (click)=\"displayDetails()\">\n Display details\n </button>\n </div>\n</mat-card>\n\n<ng-template #noNotification>\n No notification to display...\n</ng-template>", styles: [":host{display:flex;flex-direction:column}\n"] }]
170
183
  }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { displayDetailsButton: [{
171
184
  type: Input
172
185
  }], shellNotificationIndex: [{
@@ -213,24 +226,43 @@ class ShellNotificationsComponent extends NgSsmComponent {
213
226
  this.dispatchActionType(ShellActionType.clearAllNotifications);
214
227
  }
215
228
  }
216
- ShellNotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
217
- ShellNotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ShellNotificationsComponent, selector: "ngssm-shell-notifications", usesInheritance: true, ngImport: i0, template: "<mat-card fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\"\n *ngIf=\"(notificationSelected$ | async) === false; else notificationDetails\">\n <mat-card-title fxLayout=\"row\" fxLayoutAlign=\" center\">\n Notifications\n <span fxFlex></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"(notifications$ | async)?.length === 0\"\n (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n <mat-card-content fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\" class=\"notifications-container\">\n <ngssm-shell-notification *ngFor=\"let notification of notifications$ | async;let index=index\"\n [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\">\n </ngssm-shell-notification>\n </mat-card-content>\n</mat-card>\n\n<ng-template #notificationDetails>\n <mat-card fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\">\n <mat-card-title fxLayout=\"row\" fxLayoutAlign=\" center\">\n Notification details\n <span fxFlex></span>\n <button mat-icon-button (click)=\"closeDetailsPanel()\">\n <mat-icon class=\"fa-solid fa-rectangle-xmark\"></mat-icon>\n </button>\n </mat-card-title>\n <ngssm-ace-editor fxFlex [readonly]=\"true\" [content]=\"(details$ | async) ?? ''\"\n [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;padding:8px;min-width:400px;max-width:400px}:host .notifications-container{overflow:auto}:host ngssm-shell-notification{margin:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i5$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i7$1.AceEditorComponent, selector: "ngssm-ace-editor", inputs: ["content", "readonly", "editorMode"], outputs: ["contentChanged", "isValidChanged", "editorReady"] }, { kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
218
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationsComponent, decorators: [{
229
+ ShellNotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
230
+ ShellNotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: ShellNotificationsComponent, selector: "ngssm-shell-notifications", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"flex-column-stretch fxFlex\"\n *ngIf=\"(notificationSelected$ | async) === false; else notificationDetails\">\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"(notifications$ | async)?.length === 0\"\n (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n <ngssm-shell-notification *ngFor=\"let notification of notifications$ | async;let index=index\"\n [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\">\n </ngssm-shell-notification>\n </mat-card-content>\n</mat-card>\n\n<ng-template #notificationDetails>\n <mat-card class=\"flex-column-stretch fxFlex\">\n <mat-card-title class=\"flex-row-center\">\n Notification details\n <span class=\"fxFlex\"></span>\n <button mat-icon-button (click)=\"closeDetailsPanel()\">\n <mat-icon class=\"fa-solid fa-rectangle-xmark\"></mat-icon>\n </button>\n </mat-card-title>\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"(details$ | async) ?? ''\"\n [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;padding:8px;min-width:400px;max-width:400px}:host .notifications-container{overflow:auto}:host ngssm-shell-notification{margin:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i6.AceEditorComponent, selector: "ngssm-ace-editor", inputs: ["content", "readonly", "editorMode"], outputs: ["contentChanged", "isValidChanged", "editorReady"] }, { kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationsComponent, decorators: [{
219
232
  type: Component,
220
- args: [{ selector: 'ngssm-shell-notifications', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\"\n *ngIf=\"(notificationSelected$ | async) === false; else notificationDetails\">\n <mat-card-title fxLayout=\"row\" fxLayoutAlign=\" center\">\n Notifications\n <span fxFlex></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"(notifications$ | async)?.length === 0\"\n (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n <mat-card-content fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\" class=\"notifications-container\">\n <ngssm-shell-notification *ngFor=\"let notification of notifications$ | async;let index=index\"\n [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\">\n </ngssm-shell-notification>\n </mat-card-content>\n</mat-card>\n\n<ng-template #notificationDetails>\n <mat-card fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\">\n <mat-card-title fxLayout=\"row\" fxLayoutAlign=\" center\">\n Notification details\n <span fxFlex></span>\n <button mat-icon-button (click)=\"closeDetailsPanel()\">\n <mat-icon class=\"fa-solid fa-rectangle-xmark\"></mat-icon>\n </button>\n </mat-card-title>\n <ngssm-ace-editor fxFlex [readonly]=\"true\" [content]=\"(details$ | async) ?? ''\"\n [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;padding:8px;min-width:400px;max-width:400px}:host .notifications-container{overflow:auto}:host ngssm-shell-notification{margin:4px}\n"] }]
233
+ args: [{ selector: 'ngssm-shell-notifications', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex-column-stretch fxFlex\"\n *ngIf=\"(notificationSelected$ | async) === false; else notificationDetails\">\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"(notifications$ | async)?.length === 0\"\n (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n <ngssm-shell-notification *ngFor=\"let notification of notifications$ | async;let index=index\"\n [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\">\n </ngssm-shell-notification>\n </mat-card-content>\n</mat-card>\n\n<ng-template #notificationDetails>\n <mat-card class=\"flex-column-stretch fxFlex\">\n <mat-card-title class=\"flex-row-center\">\n Notification details\n <span class=\"fxFlex\"></span>\n <button mat-icon-button (click)=\"closeDetailsPanel()\">\n <mat-icon class=\"fa-solid fa-rectangle-xmark\"></mat-icon>\n </button>\n </mat-card-title>\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"(details$ | async) ?? ''\"\n [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;padding:8px;min-width:400px;max-width:400px}:host .notifications-container{overflow:auto}:host ngssm-shell-notification{margin:4px}\n"] }]
221
234
  }], ctorParameters: function () { return [{ type: i1.Store }]; } });
222
235
 
223
236
  class ShellComponent extends NgSsmComponent {
224
237
  constructor(store) {
225
238
  super(store);
226
239
  this._shellConfig$ = new BehaviorSubject(undefined);
240
+ this._navigationBarOpen$ = new BehaviorSubject(true);
227
241
  this.class = 'ngssm-shell';
242
+ combineLatest([
243
+ this.watch((s) => selectShellState(s).navigationBarOpen),
244
+ this.watch((s) => selectShellState(s).navigationBarLockStatus)
245
+ ]).subscribe((values) => {
246
+ let isOpen = false;
247
+ switch (values[1]) {
248
+ case LockStatus.lockedClosed:
249
+ isOpen = false;
250
+ break;
251
+ case LockStatus.lockedOpen:
252
+ isOpen = true;
253
+ break;
254
+ default:
255
+ isOpen = values[0];
256
+ break;
257
+ }
258
+ this._navigationBarOpen$.next(isOpen);
259
+ });
228
260
  }
229
261
  set shellConfig(value) {
230
262
  this._shellConfig$.next(value);
231
263
  }
232
264
  get navigationBarOpen$() {
233
- return this.watch((s) => selectShellState(s).navigationBarOpen);
265
+ return this._navigationBarOpen$.asObservable();
234
266
  }
235
267
  get shellConfig$() {
236
268
  return this._shellConfig$.asObservable();
@@ -242,11 +274,11 @@ class ShellComponent extends NgSsmComponent {
242
274
  this.dispatchActionType(ShellActionType.toggleNavigationBarState);
243
275
  }
244
276
  }
245
- ShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
246
- ShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ShellComponent, selector: "ngssm-shell", inputs: { shellConfig: "shellConfig" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\" class=\"ngssm-shell-container\"\n *ngIf=\"(shellConfig$ | async) as config; else noShellConfig\">\n <mat-sidenav-container fxFlex>\n <mat-sidenav-content fxLayout=\"column\">\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\" center\" class=\"ngssm-shell-header\">\n <button mat-icon-button (click)=\"toggleNavigationBarState()\">\n <mat-icon class=\"fa-solid fa-bars\"></mat-icon>\n </button>\n <img [src]=\"config.logo\" *ngIf=\"config.logo\" class=\"ngssm-shell-header-logo\" />\n <span class=\"ngssm-shell-header-title\" *ngIf=\"config.applicationTitle\">\n {{config.applicationTitle}}\n </span>\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container fxFlex>\n <mat-sidenav mode=\"side\" [opened]=\"(navigationBarOpen$ | async)===true\"\n class=\"ngssm-shell-navigation-bar\">\n <ngssm-side-nav [config]=\"config.sidenavConfig\"></ngssm-side-nav>\n </mat-sidenav>\n <mat-sidenav-content class=\"ngssm-shell-content\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n </mat-sidenav-container>\n </mat-sidenav-content>\n\n <mat-sidenav mode=\"over\" opened=\"false\" #rightSidebar position=\"end\" class=\"ngssm-shell-messages-bar\">\n <ngssm-shell-notifications fxFlex></ngssm-shell-notifications>\n </mat-sidenav>\n </mat-sidenav-container>\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\" center\" class=\"ngssm-shell-footer\"\n *ngIf=\"config.displayFooter === true\">\n <ngssm-wrapper *ngFor=\"let component of config.footerComponents\" [item]=\"component\"></ngssm-wrapper>\n <span fxFlex></span>\n <button mat-icon-button (click)=\"rightSidebar.toggle()\" *ngIf=\"config.displayFooterNotificationsButton\">\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount$ | async\"\n *ngIf=\"(notificationsCount$ | async) ?? 0 > 0\">\n </mat-icon>\n <mat-icon class=\"fa-regular fa-message\" *ngIf=\"(notificationsCount$ | async) === 0\">\n </mat-icon>\n </button>\n </mat-toolbar>\n</div>\n\n<ng-template #noShellConfig>\n <div class=\"ngssm-shell-no-config\">\n Please, provide a config for the shell.\n </div>\n</ng-template>", dependencies: [{ kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: SideNavComponent, selector: "ngssm-side-nav", inputs: ["config"] }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }, { kind: "component", type: ShellNotificationsComponent, selector: "ngssm-shell-notifications" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
247
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellComponent, decorators: [{
277
+ ShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
278
+ ShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: ShellComponent, selector: "ngssm-shell", inputs: { shellConfig: "shellConfig" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ngssm-shell-container\" *ngIf=\"(shellConfig$ | async) as config; else noShellConfig\">\n <mat-sidenav-container>\n <mat-sidenav-content>\n <mat-toolbar class=\"ngssm-shell-header\">\n <button mat-icon-button (click)=\"toggleNavigationBarState()\">\n <mat-icon class=\"fa-solid fa-bars\"></mat-icon>\n </button>\n <img [src]=\"config.logo\" *ngIf=\"config.logo\" class=\"ngssm-shell-header-logo\" />\n <span class=\"ngssm-shell-header-title\" *ngIf=\"config.applicationTitle\">\n {{config.applicationTitle}}\n </span>\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"(navigationBarOpen$ | async)===true\"\n class=\"ngssm-shell-navigation-bar\">\n <ngssm-side-nav [config]=\"config.sidenavConfig\"></ngssm-side-nav>\n </mat-sidenav>\n <mat-sidenav-content class=\"ngssm-shell-content\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n </mat-sidenav-container>\n </mat-sidenav-content>\n\n <mat-sidenav mode=\"over\" opened=\"false\" #rightSidebar position=\"end\" class=\"ngssm-shell-messages-bar\">\n <ngssm-shell-notifications class=\"ngssm-shell-notifications\"></ngssm-shell-notifications>\n </mat-sidenav>\n </mat-sidenav-container>\n <mat-toolbar class=\"ngssm-shell-footer\" *ngIf=\"config.displayFooter === true\">\n <ngssm-wrapper *ngFor=\"let component of config.footerComponents\" [item]=\"component\"></ngssm-wrapper>\n <span class=\"ngssm-fxFlex\"></span>\n <button mat-icon-button (click)=\"rightSidebar.toggle()\" *ngIf=\"config.displayFooterNotificationsButton\">\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount$ | async\"\n *ngIf=\"(notificationsCount$ | async) ?? 0 > 0\">\n </mat-icon>\n <mat-icon class=\"fa-regular fa-message\" *ngIf=\"(notificationsCount$ | async) === 0\">\n </mat-icon>\n </button>\n </mat-toolbar>\n</div>\n\n<ng-template #noShellConfig>\n <div class=\"ngssm-shell-no-config\">\n Please, provide a config for the shell.\n </div>\n</ng-template>", dependencies: [{ kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: SideNavComponent, selector: "ngssm-side-nav", inputs: ["config"] }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }, { kind: "component", type: ShellNotificationsComponent, selector: "ngssm-shell-notifications" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
279
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellComponent, decorators: [{
248
280
  type: Component,
249
- args: [{ selector: 'ngssm-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxFlex fxLayout=\"column\" fxLayoutAlign=\" stretch\" class=\"ngssm-shell-container\"\n *ngIf=\"(shellConfig$ | async) as config; else noShellConfig\">\n <mat-sidenav-container fxFlex>\n <mat-sidenav-content fxLayout=\"column\">\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\" center\" class=\"ngssm-shell-header\">\n <button mat-icon-button (click)=\"toggleNavigationBarState()\">\n <mat-icon class=\"fa-solid fa-bars\"></mat-icon>\n </button>\n <img [src]=\"config.logo\" *ngIf=\"config.logo\" class=\"ngssm-shell-header-logo\" />\n <span class=\"ngssm-shell-header-title\" *ngIf=\"config.applicationTitle\">\n {{config.applicationTitle}}\n </span>\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container fxFlex>\n <mat-sidenav mode=\"side\" [opened]=\"(navigationBarOpen$ | async)===true\"\n class=\"ngssm-shell-navigation-bar\">\n <ngssm-side-nav [config]=\"config.sidenavConfig\"></ngssm-side-nav>\n </mat-sidenav>\n <mat-sidenav-content class=\"ngssm-shell-content\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n </mat-sidenav-container>\n </mat-sidenav-content>\n\n <mat-sidenav mode=\"over\" opened=\"false\" #rightSidebar position=\"end\" class=\"ngssm-shell-messages-bar\">\n <ngssm-shell-notifications fxFlex></ngssm-shell-notifications>\n </mat-sidenav>\n </mat-sidenav-container>\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\" center\" class=\"ngssm-shell-footer\"\n *ngIf=\"config.displayFooter === true\">\n <ngssm-wrapper *ngFor=\"let component of config.footerComponents\" [item]=\"component\"></ngssm-wrapper>\n <span fxFlex></span>\n <button mat-icon-button (click)=\"rightSidebar.toggle()\" *ngIf=\"config.displayFooterNotificationsButton\">\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount$ | async\"\n *ngIf=\"(notificationsCount$ | async) ?? 0 > 0\">\n </mat-icon>\n <mat-icon class=\"fa-regular fa-message\" *ngIf=\"(notificationsCount$ | async) === 0\">\n </mat-icon>\n </button>\n </mat-toolbar>\n</div>\n\n<ng-template #noShellConfig>\n <div class=\"ngssm-shell-no-config\">\n Please, provide a config for the shell.\n </div>\n</ng-template>" }]
281
+ args: [{ selector: 'ngssm-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngssm-shell-container\" *ngIf=\"(shellConfig$ | async) as config; else noShellConfig\">\n <mat-sidenav-container>\n <mat-sidenav-content>\n <mat-toolbar class=\"ngssm-shell-header\">\n <button mat-icon-button (click)=\"toggleNavigationBarState()\">\n <mat-icon class=\"fa-solid fa-bars\"></mat-icon>\n </button>\n <img [src]=\"config.logo\" *ngIf=\"config.logo\" class=\"ngssm-shell-header-logo\" />\n <span class=\"ngssm-shell-header-title\" *ngIf=\"config.applicationTitle\">\n {{config.applicationTitle}}\n </span>\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"(navigationBarOpen$ | async)===true\"\n class=\"ngssm-shell-navigation-bar\">\n <ngssm-side-nav [config]=\"config.sidenavConfig\"></ngssm-side-nav>\n </mat-sidenav>\n <mat-sidenav-content class=\"ngssm-shell-content\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n </mat-sidenav-container>\n </mat-sidenav-content>\n\n <mat-sidenav mode=\"over\" opened=\"false\" #rightSidebar position=\"end\" class=\"ngssm-shell-messages-bar\">\n <ngssm-shell-notifications class=\"ngssm-shell-notifications\"></ngssm-shell-notifications>\n </mat-sidenav>\n </mat-sidenav-container>\n <mat-toolbar class=\"ngssm-shell-footer\" *ngIf=\"config.displayFooter === true\">\n <ngssm-wrapper *ngFor=\"let component of config.footerComponents\" [item]=\"component\"></ngssm-wrapper>\n <span class=\"ngssm-fxFlex\"></span>\n <button mat-icon-button (click)=\"rightSidebar.toggle()\" *ngIf=\"config.displayFooterNotificationsButton\">\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount$ | async\"\n *ngIf=\"(notificationsCount$ | async) ?? 0 > 0\">\n </mat-icon>\n <mat-icon class=\"fa-regular fa-message\" *ngIf=\"(notificationsCount$ | async) === 0\">\n </mat-icon>\n </button>\n </mat-toolbar>\n</div>\n\n<ng-template #noShellConfig>\n <div class=\"ngssm-shell-no-config\">\n Please, provide a config for the shell.\n </div>\n</ng-template>" }]
250
282
  }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { class: [{
251
283
  type: HostBinding,
252
284
  args: ['class']
@@ -259,7 +291,8 @@ class NavigationBarReducer {
259
291
  this.processedActions = [
260
292
  ShellActionType.toggleNavigationBarState,
261
293
  ShellActionType.openNavigationBar,
262
- ShellActionType.closeNavigationBar
294
+ ShellActionType.closeNavigationBar,
295
+ ShellActionType.lockNavigationBar
263
296
  ];
264
297
  }
265
298
  updateState(state, action) {
@@ -282,13 +315,18 @@ class NavigationBarReducer {
282
315
  return updateShellState(state, {
283
316
  navigationBarOpen: { $set: false }
284
317
  });
318
+ case ShellActionType.lockNavigationBar:
319
+ const lockNavigationBarAction = action;
320
+ return updateShellState(state, {
321
+ navigationBarLockStatus: { $set: lockNavigationBarAction.lockStatus }
322
+ });
285
323
  }
286
324
  return state;
287
325
  }
288
326
  }
289
- NavigationBarReducer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NavigationBarReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
290
- NavigationBarReducer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NavigationBarReducer });
291
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NavigationBarReducer, decorators: [{
327
+ NavigationBarReducer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NavigationBarReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
328
+ NavigationBarReducer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NavigationBarReducer });
329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NavigationBarReducer, decorators: [{
292
330
  type: Injectable
293
331
  }] });
294
332
  const navigationBarReducerProvider = {
@@ -337,9 +375,9 @@ class ShellNotificationsReducer {
337
375
  return state;
338
376
  }
339
377
  }
340
- ShellNotificationsReducer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationsReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
341
- ShellNotificationsReducer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationsReducer });
342
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationsReducer, decorators: [{
378
+ ShellNotificationsReducer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationsReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
379
+ ShellNotificationsReducer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationsReducer });
380
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationsReducer, decorators: [{
343
381
  type: Injectable
344
382
  }] });
345
383
  const shellNotificationsReducerProvider = {
@@ -361,9 +399,9 @@ class ShellNotificationPopupComponent extends NgSsmComponent {
361
399
  return this._shellNotificationIndex$.asObservable();
362
400
  }
363
401
  }
364
- ShellNotificationPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationPopupComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
365
- ShellNotificationPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ShellNotificationPopupComponent, selector: "ngssm-shell-notification-popup", usesInheritance: true, ngImport: i0, template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex$ | async\"></ngssm-shell-notification>", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
366
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ShellNotificationPopupComponent, decorators: [{
402
+ ShellNotificationPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationPopupComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
403
+ ShellNotificationPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: ShellNotificationPopupComponent, selector: "ngssm-shell-notification-popup", usesInheritance: true, ngImport: i0, template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex$ | async\"></ngssm-shell-notification>", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
404
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: ShellNotificationPopupComponent, decorators: [{
367
405
  type: Component,
368
406
  args: [{ selector: 'ngssm-shell-notification-popup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex$ | async\"></ngssm-shell-notification>", styles: [":host{display:flex;flex-direction:column}\n"] }]
369
407
  }], ctorParameters: function () { return [{ type: i1.Store }]; } });
@@ -382,9 +420,9 @@ class NotificationShowingEffect {
382
420
  });
383
421
  }
384
422
  }
385
- NotificationShowingEffect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NotificationShowingEffect, deps: [{ token: i1$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
386
- NotificationShowingEffect.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NotificationShowingEffect });
387
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NotificationShowingEffect, decorators: [{
423
+ NotificationShowingEffect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NotificationShowingEffect, deps: [{ token: i1$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
424
+ NotificationShowingEffect.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NotificationShowingEffect });
425
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NotificationShowingEffect, decorators: [{
388
426
  type: Injectable
389
427
  }], ctorParameters: function () { return [{ type: i1$1.MatSnackBar }]; } });
390
428
  const notificationShowingEffectProvider = {
@@ -401,15 +439,15 @@ class NgssmShellModule {
401
439
  };
402
440
  }
403
441
  }
404
- NgssmShellModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgssmShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
405
- NgssmShellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: NgssmShellModule, declarations: [ShellComponent,
442
+ NgssmShellModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NgssmShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
443
+ NgssmShellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: NgssmShellModule, declarations: [ShellComponent,
406
444
  SideNavComponent,
407
445
  WrapperComponent,
408
446
  ShellNotificationsComponent,
409
447
  ShellNotificationPopupComponent,
410
448
  ShellNotificationComponent], imports: [RouterModule, MaterialImportsModule, NgssmAceEditorModule], exports: [ShellComponent, SideNavComponent] });
411
- NgssmShellModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgssmShellModule, imports: [RouterModule, MaterialImportsModule, NgssmAceEditorModule] });
412
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgssmShellModule, decorators: [{
449
+ NgssmShellModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NgssmShellModule, imports: [RouterModule, MaterialImportsModule, NgssmAceEditorModule] });
450
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NgssmShellModule, decorators: [{
413
451
  type: NgModule,
414
452
  args: [{
415
453
  declarations: [
@@ -434,5 +472,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
434
472
  * Generated bundle index. Do not edit.
435
473
  */
436
474
 
437
- export { DisplayNotificationAction, DisplayNotificationDetailsAction, NgssmShellModule, ShellActionType, ShellComponent, ShellNotificationType, ShellStateSpecification, SideNavComponent, getDefaultShellNotifications, selectShellState, updateShellState };
475
+ export { DisplayNotificationAction, DisplayNotificationDetailsAction, LockNavigationBarAction, LockStatus, NgssmShellModule, ShellActionType, ShellComponent, ShellNotificationType, ShellStateSpecification, SideNavComponent, getDefaultShellNotifications, selectShellState, updateShellState };
438
476
  //# sourceMappingURL=ngssm-shell.mjs.map