ngssm-shell 22.1.0 → 22.2.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.
@@ -1,387 +1,935 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, input, computed, inject, Component, signal, ViewContainerRef, effect, makeEnvironmentProviders } from '@angular/core';
3
- import { NgSsmFeatureState, Store, createSignal, provideReducers, provideEffect } from 'ngssm-store';
4
- import { __decorate } from 'tslib';
5
- import update from 'immutability-helper';
6
- import { MatSnackBar } from '@angular/material/snack-bar';
7
- import * as i2 from '@angular/material/card';
8
- import { MatCardModule } from '@angular/material/card';
9
- import * as i1 from '@angular/common';
10
- import { CommonModule } from '@angular/common';
11
- import * as i3 from '@angular/material/icon';
12
- import { MatIconModule } from '@angular/material/icon';
13
- import * as i2$1 from '@angular/material/button';
14
- import { MatButtonModule } from '@angular/material/button';
15
- import * as i2$2 from '@angular/router';
16
- import { RouterModule } from '@angular/router';
17
- import * as i2$3 from '@angular/material/sidenav';
18
- import { MatSidenavModule } from '@angular/material/sidenav';
19
- import * as i3$1 from '@angular/material/toolbar';
20
- import { MatToolbarModule } from '@angular/material/toolbar';
21
- import * as i6 from '@angular/material/badge';
22
- import { MatBadgeModule } from '@angular/material/badge';
23
- import * as i1$1 from '@angular/material/divider';
24
- import { MatDividerModule } from '@angular/material/divider';
25
- import { NgssmAceEditorMode, NgssmAceEditorComponent } from 'ngssm-ace-editor';
26
-
1
+ import * as i0 from "@angular/core";
2
+ import { Component, Injectable, ViewContainerRef, computed, effect, inject, input, makeEnvironmentProviders, signal } from "@angular/core";
3
+ import { NgSsmFeatureState, Store, createSignal, provideEffect, provideReducers } from "ngssm-store";
4
+ import { __decorate } from "tslib";
5
+ import update from "immutability-helper";
6
+ import { MatSnackBar } from "@angular/material/snack-bar";
7
+ import * as i2$2 from "@angular/material/card";
8
+ import { MatCardModule } from "@angular/material/card";
9
+ import * as i1$1 from "@angular/common";
10
+ import { CommonModule } from "@angular/common";
11
+ import * as i3$1 from "@angular/material/icon";
12
+ import { MatIconModule } from "@angular/material/icon";
13
+ import * as i4 from "@angular/material/button";
14
+ import { MatButtonModule } from "@angular/material/button";
15
+ import * as i2$1 from "@angular/router";
16
+ import { RouterModule } from "@angular/router";
17
+ import * as i2 from "@angular/material/sidenav";
18
+ import { MatSidenavModule } from "@angular/material/sidenav";
19
+ import * as i3 from "@angular/material/toolbar";
20
+ import { MatToolbarModule } from "@angular/material/toolbar";
21
+ import * as i6 from "@angular/material/badge";
22
+ import { MatBadgeModule } from "@angular/material/badge";
23
+ import * as i1 from "@angular/material/divider";
24
+ import { MatDividerModule } from "@angular/material/divider";
25
+ import { NgssmAceEditorComponent, NgssmAceEditorMode } from "ngssm-ace-editor";
27
26
  var ShellActionType;
28
- (function (ShellActionType) {
29
- // Navigation bar
30
- ShellActionType["toggleNavigationBarState"] = "[ShellActionType] toggleNavigationBarState";
31
- ShellActionType["openNavigationBar"] = "[ShellActionType] openNavigationBar";
32
- ShellActionType["closeNavigationBar"] = "[ShellActionType] closeNavigationBar";
33
- ShellActionType["lockNavigationBar"] = "[ShellActionType] lockNavigationBar";
34
- // Notifications
35
- ShellActionType["displayNotification"] = "[ShellActionType] displayNotification";
36
- ShellActionType["displayNotificationDetails"] = "[ShellActionType] displayNotificationDetails";
37
- ShellActionType["clearAllNotifications"] = "[ShellActionType] clearAllNotifications";
27
+ (function(ShellActionType) {
28
+ ShellActionType["toggleNavigationBarState"] = "[ShellActionType] toggleNavigationBarState";
29
+ ShellActionType["openNavigationBar"] = "[ShellActionType] openNavigationBar";
30
+ ShellActionType["closeNavigationBar"] = "[ShellActionType] closeNavigationBar";
31
+ ShellActionType["lockNavigationBar"] = "[ShellActionType] lockNavigationBar";
32
+ ShellActionType["displayNotification"] = "[ShellActionType] displayNotification";
33
+ ShellActionType["displayNotificationDetails"] = "[ShellActionType] displayNotificationDetails";
34
+ ShellActionType["clearAllNotifications"] = "[ShellActionType] clearAllNotifications";
38
35
  })(ShellActionType || (ShellActionType = {}));
39
-
40
- class DisplayNotificationAction {
41
- notificationType;
42
- title;
43
- details;
44
- type = ShellActionType.displayNotification;
45
- constructor(notificationType, title, details) {
46
- this.notificationType = notificationType;
47
- this.title = title;
48
- this.details = details;
49
- }
50
- }
51
-
52
- class DisplayNotificationDetailsAction {
53
- notificationIndex;
54
- type = ShellActionType.displayNotificationDetails;
55
- constructor(notificationIndex) {
56
- this.notificationIndex = notificationIndex;
57
- }
58
- }
59
-
60
- class LockNavigationBarAction {
61
- lockStatus;
62
- type = ShellActionType.lockNavigationBar;
63
- constructor(lockStatus) {
64
- this.lockStatus = lockStatus;
65
- }
66
- }
67
-
36
+ var DisplayNotificationAction = class {
37
+ notificationType;
38
+ title;
39
+ details;
40
+ type = ShellActionType.displayNotification;
41
+ constructor(notificationType, title, details) {
42
+ this.notificationType = notificationType;
43
+ this.title = title;
44
+ this.details = details;
45
+ }
46
+ };
47
+ var DisplayNotificationDetailsAction = class {
48
+ notificationIndex;
49
+ type = ShellActionType.displayNotificationDetails;
50
+ constructor(notificationIndex) {
51
+ this.notificationIndex = notificationIndex;
52
+ }
53
+ };
54
+ var LockNavigationBarAction = class {
55
+ lockStatus;
56
+ type = ShellActionType.lockNavigationBar;
57
+ constructor(lockStatus) {
58
+ this.lockStatus = lockStatus;
59
+ }
60
+ };
68
61
  var ShellNotificationType;
69
- (function (ShellNotificationType) {
70
- ShellNotificationType["success"] = "Success";
71
- ShellNotificationType["error"] = "Error";
62
+ (function(ShellNotificationType) {
63
+ ShellNotificationType["success"] = "Success";
64
+ ShellNotificationType["error"] = "Error";
72
65
  })(ShellNotificationType || (ShellNotificationType = {}));
73
-
74
66
  var LockStatus;
75
- (function (LockStatus) {
76
- LockStatus["notLocked"] = "Not Locked";
77
- LockStatus["lockedOpen"] = "Locked Open";
78
- LockStatus["lockedClosed"] = "Locked Closed";
67
+ (function(LockStatus) {
68
+ LockStatus["notLocked"] = "Not Locked";
69
+ LockStatus["lockedOpen"] = "Locked Open";
70
+ LockStatus["lockedClosed"] = "Locked Closed";
79
71
  })(LockStatus || (LockStatus = {}));
80
-
81
- const getDefaultShellNotifications = () => ({
82
- notifications: []
83
- });
84
-
72
+ const getDefaultShellNotifications = () => ({ notifications: [] });
85
73
  const selectShellState = (state) => state[ShellStateSpecification.featureStateKey];
86
- const updateShellState = (state, command) => update(state, {
87
- [ShellStateSpecification.featureStateKey]: command
88
- });
74
+ const updateShellState = (state, command) => update(state, { [ShellStateSpecification.featureStateKey]: command });
89
75
  let ShellStateSpecification = class ShellStateSpecification {
90
- static featureStateKey = 'shell-state';
91
- static initialState = {
92
- navigationBarOpen: true,
93
- navigationBarLockStatus: LockStatus.notLocked,
94
- shellNotifications: getDefaultShellNotifications()
95
- };
76
+ static featureStateKey = "shell-state";
77
+ static initialState = {
78
+ navigationBarOpen: true,
79
+ navigationBarLockStatus: LockStatus.notLocked,
80
+ shellNotifications: getDefaultShellNotifications()
81
+ };
96
82
  };
97
- ShellStateSpecification = __decorate([
98
- NgSsmFeatureState({
99
- featureStateKey: ShellStateSpecification.featureStateKey,
100
- initialState: ShellStateSpecification.initialState
101
- })
102
- ], ShellStateSpecification);
103
-
104
- class NavigationBarReducer {
105
- processedActions = [
106
- ShellActionType.toggleNavigationBarState,
107
- ShellActionType.openNavigationBar,
108
- ShellActionType.closeNavigationBar,
109
- ShellActionType.lockNavigationBar
110
- ];
111
- updateState(state, action) {
112
- switch (action.type) {
113
- case ShellActionType.toggleNavigationBarState:
114
- return updateShellState(state, {
115
- navigationBarOpen: { $apply: (value) => !value }
116
- });
117
- case ShellActionType.openNavigationBar:
118
- if (selectShellState(state).navigationBarOpen) {
119
- return state;
120
- }
121
- return updateShellState(state, {
122
- navigationBarOpen: { $set: true }
123
- });
124
- case ShellActionType.closeNavigationBar:
125
- if (!selectShellState(state).navigationBarOpen) {
126
- return state;
127
- }
128
- return updateShellState(state, {
129
- navigationBarOpen: { $set: false }
130
- });
131
- case ShellActionType.lockNavigationBar: {
132
- const lockNavigationBarAction = action;
133
- return updateShellState(state, {
134
- navigationBarLockStatus: { $set: lockNavigationBarAction.lockStatus }
135
- });
136
- }
137
- }
138
- return state;
139
- }
140
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NavigationBarReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
141
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NavigationBarReducer });
142
- }
143
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NavigationBarReducer, decorators: [{
144
- type: Injectable
145
- }] });
146
-
147
- class ShellNotificationsReducer {
148
- processedActions = [
149
- ShellActionType.displayNotification,
150
- ShellActionType.displayNotificationDetails,
151
- ShellActionType.clearAllNotifications
152
- ];
153
- updateState(state, action) {
154
- switch (action.type) {
155
- case ShellActionType.displayNotification: {
156
- const displayNotificationAction = action;
157
- const notification = {
158
- type: displayNotificationAction.notificationType,
159
- title: displayNotificationAction.title,
160
- details: displayNotificationAction.details,
161
- timestamp: new Date()
162
- };
163
- return updateShellState(state, {
164
- shellNotifications: {
165
- notifications: { $push: [notification] }
166
- }
167
- });
168
- }
169
- case ShellActionType.displayNotificationDetails: {
170
- const displayNotificationDetailsAction = action;
171
- return updateShellState(state, {
172
- shellNotifications: {
173
- selectedNotificaitonIndex: { $set: displayNotificationDetailsAction.notificationIndex }
174
- }
175
- });
176
- }
177
- case ShellActionType.clearAllNotifications:
178
- return updateShellState(state, {
179
- shellNotifications: {
180
- notifications: { $set: [] }
181
- }
182
- });
183
- }
184
- return state;
185
- }
186
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationsReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
187
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationsReducer });
188
- }
189
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationsReducer, decorators: [{
190
- type: Injectable
191
- }] });
192
-
193
- class ShellNotificationComponent {
194
- displayDetailsButton = input(false, /* @ts-ignore */
195
- ...(ngDevMode ? [{ debugName: "displayDetailsButton" }] : /* istanbul ignore next */ []));
196
- shellNotificationIndex = input(/* @ts-ignore */
197
- ...(ngDevMode ? [undefined, { debugName: "shellNotificationIndex" }] : /* istanbul ignore next */ []));
198
- shellNotification = computed(() => {
199
- return this.notifications()[this.shellNotificationIndex() ?? -1];
200
- }, /* @ts-ignore */
201
- ...(ngDevMode ? [{ debugName: "shellNotification" }] : /* istanbul ignore next */ []));
202
- shellNotificationType = ShellNotificationType;
203
- store = inject(Store);
204
- notifications = createSignal((state) => selectShellState(state).shellNotifications.notifications);
205
- displayDetails() {
206
- this.store.dispatchAction(new DisplayNotificationDetailsAction(this.shellNotificationIndex() ?? -1));
207
- }
208
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
209
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ShellNotificationComponent, isStandalone: true, selector: "ngssm-shell-notification", inputs: { displayDetailsButton: { classPropertyName: "displayDetailsButton", publicName: "displayDetailsButton", isSignal: true, isRequired: false, transformFunction: null }, shellNotificationIndex: { classPropertyName: "shellNotificationIndex", publicName: "shellNotificationIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (shellNotification(); as notification) {\n <mat-card class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{\n 'ngssm-shell-notification-success': notification.type === shellNotificationType.success,\n 'ngssm-shell-notification-error': notification.type === shellNotificationType.error\n }\">\n @if (notification.type === shellNotificationType.success) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n @if (notification.type === shellNotificationType.error) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n <mat-card-title>{{ notification.title }}</mat-card-title>\n <mat-card-subtitle>{{ notification.timestamp | date: 'shortTime' }}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n @if (displayDetailsButton() && notification.details) {\n <button mat-button (click)=\"displayDetails()\">Display details</button>\n }\n </div>\n </mat-card>\n} @else {\n No notification to display...\n}\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
210
- }
211
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationComponent, decorators: [{
212
- type: Component,
213
- args: [{ selector: 'ngssm-shell-notification', imports: [CommonModule, MatCardModule, MatIconModule, MatButtonModule], template: "@if (shellNotification(); as notification) {\n <mat-card class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{\n 'ngssm-shell-notification-success': notification.type === shellNotificationType.success,\n 'ngssm-shell-notification-error': notification.type === shellNotificationType.error\n }\">\n @if (notification.type === shellNotificationType.success) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n @if (notification.type === shellNotificationType.error) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n <mat-card-title>{{ notification.title }}</mat-card-title>\n <mat-card-subtitle>{{ notification.timestamp | date: 'shortTime' }}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n @if (displayDetailsButton() && notification.details) {\n <button mat-button (click)=\"displayDetails()\">Display details</button>\n }\n </div>\n </mat-card>\n} @else {\n No notification to display...\n}\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
214
- }], propDecorators: { displayDetailsButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayDetailsButton", required: false }] }], shellNotificationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "shellNotificationIndex", required: false }] }] } });
215
-
216
- class ShellNotificationPopupComponent {
217
- shellNotificationIndex = createSignal((state) => {
218
- const items = selectShellState(state).shellNotifications.notifications;
219
- return items.length - 1;
220
- });
221
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
222
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: ShellNotificationPopupComponent, isStandalone: true, selector: "ngssm-shell-notification-popup", ngImport: i0, template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex()\"></ngssm-shell-notification>", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }] });
223
- }
224
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationPopupComponent, decorators: [{
225
- type: Component,
226
- args: [{ selector: 'ngssm-shell-notification-popup', imports: [ShellNotificationComponent], template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex()\"></ngssm-shell-notification>", styles: [":host{display:flex;flex-direction:column}\n"] }]
227
- }] });
228
-
229
- class WrapperComponent {
230
- item = input(/* @ts-ignore */
231
- ...(ngDevMode ? [undefined, { debugName: "item" }] : /* istanbul ignore next */ []));
232
- innerHtml = signal(undefined, /* @ts-ignore */
233
- ...(ngDevMode ? [{ debugName: "innerHtml" }] : /* istanbul ignore next */ []));
234
- viewContainerRef = inject(ViewContainerRef);
235
- constructor() {
236
- effect(() => {
237
- const inputItem = this.item();
238
- if (typeof inputItem === 'string') {
239
- this.innerHtml.set(inputItem);
240
- }
241
- else if (inputItem) {
242
- this.viewContainerRef.clear();
243
- this.viewContainerRef.createComponent(inputItem);
244
- }
245
- });
246
- }
247
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
248
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrapperComponent, isStandalone: true, selector: "ngssm-wrapper", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (innerHtml(); as content) {\n <span [innerHTML]=\"content\"></span>\n}\n" });
249
- }
250
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrapperComponent, decorators: [{
251
- type: Component,
252
- args: [{ selector: 'ngssm-wrapper', imports: [], template: "@if (innerHtml(); as content) {\n <span [innerHTML]=\"content\"></span>\n}\n" }]
253
- }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }] } });
254
-
255
- class SideNavComponent {
256
- config = input(/* @ts-ignore */
257
- ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
258
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
259
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SideNavComponent, isStandalone: true, selector: "ngssm-side-nav", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngssm-sidenav" }, ngImport: i0, template: "@if (config(); as sidenavConfig) {\n <div class=\"ngssm-sidenav-main-container\">\n @if (sidenavConfig.title) {\n <div class=\"ngssm-sidenav-title\">{{ sidenavConfig.title }}</div>\n <mat-divider></mat-divider>\n }\n\n @for (section of sidenavConfig.sections; track section; let last = $last) {\n <ng-container class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n @if (!section.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"section.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: section.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n @for (item of section.items; track item) {\n <div class=\"ngssm-sidenav-item-container\">\n @if (!item.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: item.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n }\n\n @if (!last) {\n <mat-divider></mat-divider>\n }\n </ng-container>\n }\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }] });
260
- }
261
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, decorators: [{
262
- type: Component,
263
- args: [{ selector: 'ngssm-side-nav', imports: [MatDividerModule, RouterModule, WrapperComponent], host: {
264
- class: 'ngssm-sidenav'
265
- }, template: "@if (config(); as sidenavConfig) {\n <div class=\"ngssm-sidenav-main-container\">\n @if (sidenavConfig.title) {\n <div class=\"ngssm-sidenav-title\">{{ sidenavConfig.title }}</div>\n <mat-divider></mat-divider>\n }\n\n @for (section of sidenavConfig.sections; track section; let last = $last) {\n <ng-container class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n @if (!section.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"section.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: section.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n @for (item of section.items; track item) {\n <div class=\"ngssm-sidenav-item-container\">\n @if (!item.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: item.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n }\n\n @if (!last) {\n <mat-divider></mat-divider>\n }\n </ng-container>\n }\n </div>\n}\n" }]
266
- }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
267
-
268
- class ShellNotificationsComponent {
269
- notificationSelected = signal(false, /* @ts-ignore */
270
- ...(ngDevMode ? [{ debugName: "notificationSelected" }] : /* istanbul ignore next */ []));
271
- notifications = createSignal((state) => selectShellState(state).shellNotifications.notifications);
272
- details = signal('', /* @ts-ignore */
273
- ...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
274
- shellNotificationType = ShellNotificationType;
275
- ngssmAceEditorMode = NgssmAceEditorMode;
276
- store = inject(Store);
277
- selectedNotificaitonIndex = createSignal((state) => selectShellState(state).shellNotifications.selectedNotificaitonIndex);
278
- constructor() {
279
- effect(() => {
280
- const items = this.notifications();
281
- const index = this.selectedNotificaitonIndex();
282
- const id = index ?? -1;
283
- this.notificationSelected.set(id !== -1);
284
- const details = items[id]?.details;
285
- if (details) {
286
- this.details.set(JSON.stringify(details, null, 2));
287
- }
288
- else {
289
- this.details.set('');
290
- }
291
- });
292
- }
293
- closeDetailsPanel() {
294
- this.store.dispatchAction(new DisplayNotificationDetailsAction(undefined));
295
- }
296
- clearAll() {
297
- this.store.dispatchActionType(ShellActionType.clearAllNotifications);
298
- }
299
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
300
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ShellNotificationsComponent, isStandalone: true, selector: "ngssm-shell-notifications", ngImport: i0, template: "@if (!notificationSelected()) {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"notifications().length === 0\" (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n </mat-card-header>\n\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n @for (notification of notifications(); track notification; let index = $index) {\n <ngssm-shell-notification [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\"> </ngssm-shell-notification>\n }\n </mat-card-content>\n </mat-card>\n} @else {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\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 </mat-card-header>\n\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"details()\" [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n}\n", 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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgssmAceEditorComponent, selector: "ngssm-ace-editor", inputs: ["content", "readonly", "editorMode"], outputs: ["contentChanged", "isValidChanged", "editorReady"] }, { kind: "component", type: ShellNotificationComponent, selector: "ngssm-shell-notification", inputs: ["displayDetailsButton", "shellNotificationIndex"] }] });
301
- }
302
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellNotificationsComponent, decorators: [{
303
- type: Component,
304
- args: [{ selector: 'ngssm-shell-notifications', imports: [MatCardModule, MatButtonModule, MatIconModule, NgssmAceEditorComponent, ShellNotificationComponent], template: "@if (!notificationSelected()) {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"notifications().length === 0\" (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n </mat-card-header>\n\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n @for (notification of notifications(); track notification; let index = $index) {\n <ngssm-shell-notification [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\"> </ngssm-shell-notification>\n }\n </mat-card-content>\n </mat-card>\n} @else {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\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 </mat-card-header>\n\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"details()\" [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n}\n", 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"] }]
305
- }], ctorParameters: () => [] });
306
-
307
- class ShellComponent {
308
- shellConfig = input(/* @ts-ignore */
309
- ...(ngDevMode ? [undefined, { debugName: "shellConfig" }] : /* istanbul ignore next */ []));
310
- notificationsCount = createSignal((state) => selectShellState(state).shellNotifications.notifications.length);
311
- navigationBarRendered = computed(() => {
312
- let isOpen;
313
- switch (this.navigationBarLockStatus()) {
314
- case LockStatus.lockedClosed:
315
- isOpen = false;
316
- break;
317
- case LockStatus.lockedOpen:
318
- isOpen = true;
319
- break;
320
- default:
321
- isOpen = this.navigationBarOpen();
322
- break;
323
- }
324
- return isOpen;
325
- }, /* @ts-ignore */
326
- ...(ngDevMode ? [{ debugName: "navigationBarRendered" }] : /* istanbul ignore next */ []));
327
- store = inject(Store);
328
- navigationBarOpen = createSignal((state) => selectShellState(state).navigationBarOpen);
329
- navigationBarLockStatus = createSignal((state) => selectShellState(state).navigationBarLockStatus);
330
- toggleNavigationBarState() {
331
- this.store.dispatchActionType(ShellActionType.toggleNavigationBarState);
332
- }
333
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
334
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ShellComponent, isStandalone: true, selector: "ngssm-shell", inputs: { shellConfig: { classPropertyName: "shellConfig", publicName: "shellConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngssm-shell" }, ngImport: i0, template: "@if (shellConfig(); as config) {\n <div class=\"ngssm-shell-container\">\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 @if (config.logo) {\n <img [src]=\"config.logo\" class=\"ngssm-shell-header-logo\" alt=\"logo\" />\n }\n\n @if (config.applicationTitle) {\n <span class=\"ngssm-shell-header-title\">\n {{ config.applicationTitle }}\n </span>\n }\n\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"navigationBarRendered()\" 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 @if (config.displayFooter) {\n <mat-toolbar class=\"ngssm-shell-footer\">\n @for (component of config.footerComponents; track component) {\n <ngssm-wrapper [item]=\"component\"></ngssm-wrapper>\n }\n\n <span class=\"ngssm-fxFlex\"></span>\n @if (config.displayFooterNotificationsButton) {\n <button mat-icon-button (click)=\"rightSidebar.toggle()\">\n @if (notificationsCount() > 0) {\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount()\"> </mat-icon>\n } @else {\n <mat-icon class=\"fa-regular fa-message\"> </mat-icon>\n }\n </button>\n }\n </mat-toolbar>\n }\n </div>\n} @else {\n <div class=\"ngssm-shell-no-config\">Please, provide a config for the shell.</div>\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: SideNavComponent, selector: "ngssm-side-nav", inputs: ["config"] }, { kind: "component", type: ShellNotificationsComponent, selector: "ngssm-shell-notifications" }, { kind: "component", type: WrapperComponent, selector: "ngssm-wrapper", inputs: ["item"] }] });
335
- }
336
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShellComponent, decorators: [{
337
- type: Component,
338
- args: [{ selector: 'ngssm-shell', imports: [
339
- RouterModule,
340
- MatSidenavModule,
341
- MatToolbarModule,
342
- MatIconModule,
343
- MatButtonModule,
344
- MatBadgeModule,
345
- SideNavComponent,
346
- ShellNotificationsComponent,
347
- WrapperComponent
348
- ], host: {
349
- class: 'ngssm-shell'
350
- }, template: "@if (shellConfig(); as config) {\n <div class=\"ngssm-shell-container\">\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 @if (config.logo) {\n <img [src]=\"config.logo\" class=\"ngssm-shell-header-logo\" alt=\"logo\" />\n }\n\n @if (config.applicationTitle) {\n <span class=\"ngssm-shell-header-title\">\n {{ config.applicationTitle }}\n </span>\n }\n\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"navigationBarRendered()\" 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 @if (config.displayFooter) {\n <mat-toolbar class=\"ngssm-shell-footer\">\n @for (component of config.footerComponents; track component) {\n <ngssm-wrapper [item]=\"component\"></ngssm-wrapper>\n }\n\n <span class=\"ngssm-fxFlex\"></span>\n @if (config.displayFooterNotificationsButton) {\n <button mat-icon-button (click)=\"rightSidebar.toggle()\">\n @if (notificationsCount() > 0) {\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount()\"> </mat-icon>\n } @else {\n <mat-icon class=\"fa-regular fa-message\"> </mat-icon>\n }\n </button>\n }\n </mat-toolbar>\n }\n </div>\n} @else {\n <div class=\"ngssm-shell-no-config\">Please, provide a config for the shell.</div>\n}\n" }]
351
- }], propDecorators: { shellConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "shellConfig", required: false }] }] } });
352
-
353
- class NotificationShowingEffect {
354
- processedActions = [ShellActionType.displayNotification];
355
- snackBar = inject(MatSnackBar);
356
- processAction() {
357
- this.snackBar.openFromComponent(ShellNotificationPopupComponent, {
358
- panelClass: 'ngssm-shell-notification-snack-panel',
359
- duration: 1000,
360
- horizontalPosition: 'center',
361
- verticalPosition: 'top'
362
- });
363
- }
364
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NotificationShowingEffect, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
365
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NotificationShowingEffect });
366
- }
367
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NotificationShowingEffect, decorators: [{
368
- type: Injectable
369
- }] });
370
-
83
+ ShellStateSpecification = __decorate([NgSsmFeatureState({
84
+ featureStateKey: ShellStateSpecification.featureStateKey,
85
+ initialState: ShellStateSpecification.initialState
86
+ })], ShellStateSpecification);
87
+ var NavigationBarReducer = class NavigationBarReducer {
88
+ processedActions = [
89
+ ShellActionType.toggleNavigationBarState,
90
+ ShellActionType.openNavigationBar,
91
+ ShellActionType.closeNavigationBar,
92
+ ShellActionType.lockNavigationBar
93
+ ];
94
+ updateState(state, action) {
95
+ switch (action.type) {
96
+ case ShellActionType.toggleNavigationBarState: return updateShellState(state, { navigationBarOpen: { $apply: (value) => !value } });
97
+ case ShellActionType.openNavigationBar:
98
+ if (selectShellState(state).navigationBarOpen) return state;
99
+ return updateShellState(state, { navigationBarOpen: { $set: true } });
100
+ case ShellActionType.closeNavigationBar:
101
+ if (!selectShellState(state).navigationBarOpen) return state;
102
+ return updateShellState(state, { navigationBarOpen: { $set: false } });
103
+ case ShellActionType.lockNavigationBar: return updateShellState(state, { navigationBarLockStatus: { $set: action.lockStatus } });
104
+ }
105
+ return state;
106
+ }
107
+ static ɵfac = i0.ɵɵngDeclareFactory({
108
+ minVersion: "12.0.0",
109
+ version: "22.2.0",
110
+ ngImport: i0,
111
+ type: NavigationBarReducer,
112
+ deps: [],
113
+ target: i0.ɵɵFactoryTarget.Injectable
114
+ });
115
+ static ɵprov = i0.ɵɵngDeclareInjectable({
116
+ minVersion: "12.0.0",
117
+ version: "22.2.0",
118
+ ngImport: i0,
119
+ type: NavigationBarReducer
120
+ });
121
+ };
122
+ i0.ɵɵngDeclareClassMetadata({
123
+ minVersion: "12.0.0",
124
+ version: "22.2.0",
125
+ ngImport: i0,
126
+ type: NavigationBarReducer,
127
+ decorators: [{ type: Injectable }]
128
+ });
129
+ var ShellNotificationsReducer = class ShellNotificationsReducer {
130
+ processedActions = [
131
+ ShellActionType.displayNotification,
132
+ ShellActionType.displayNotificationDetails,
133
+ ShellActionType.clearAllNotifications
134
+ ];
135
+ updateState(state, action) {
136
+ switch (action.type) {
137
+ case ShellActionType.displayNotification: {
138
+ const displayNotificationAction = action;
139
+ const notification = {
140
+ type: displayNotificationAction.notificationType,
141
+ title: displayNotificationAction.title,
142
+ details: displayNotificationAction.details,
143
+ timestamp: /* @__PURE__ */ new Date()
144
+ };
145
+ return updateShellState(state, { shellNotifications: { notifications: { $push: [notification] } } });
146
+ }
147
+ case ShellActionType.displayNotificationDetails: return updateShellState(state, { shellNotifications: { selectedNotificaitonIndex: { $set: action.notificationIndex } } });
148
+ case ShellActionType.clearAllNotifications: return updateShellState(state, { shellNotifications: { notifications: { $set: [] } } });
149
+ }
150
+ return state;
151
+ }
152
+ static ɵfac = i0.ɵɵngDeclareFactory({
153
+ minVersion: "12.0.0",
154
+ version: "22.2.0",
155
+ ngImport: i0,
156
+ type: ShellNotificationsReducer,
157
+ deps: [],
158
+ target: i0.ɵɵFactoryTarget.Injectable
159
+ });
160
+ static ɵprov = i0.ɵɵngDeclareInjectable({
161
+ minVersion: "12.0.0",
162
+ version: "22.2.0",
163
+ ngImport: i0,
164
+ type: ShellNotificationsReducer
165
+ });
166
+ };
167
+ i0.ɵɵngDeclareClassMetadata({
168
+ minVersion: "12.0.0",
169
+ version: "22.2.0",
170
+ ngImport: i0,
171
+ type: ShellNotificationsReducer,
172
+ decorators: [{ type: Injectable }]
173
+ });
174
+ var ShellNotificationComponent = class ShellNotificationComponent {
175
+ displayDetailsButton = input(false, ...ngDevMode ? [{ debugName: "displayDetailsButton" }] : /* istanbul ignore next */ []);
176
+ shellNotificationIndex = input(...ngDevMode ? [void 0, { debugName: "shellNotificationIndex" }] : /* istanbul ignore next */ []);
177
+ shellNotification = computed(() => {
178
+ return this.notifications()[this.shellNotificationIndex() ?? -1];
179
+ }, ...ngDevMode ? [{ debugName: "shellNotification" }] : /* istanbul ignore next */ []);
180
+ shellNotificationType = ShellNotificationType;
181
+ store = inject(Store);
182
+ notifications = createSignal((state) => selectShellState(state).shellNotifications.notifications);
183
+ displayDetails() {
184
+ this.store.dispatchAction(new DisplayNotificationDetailsAction(this.shellNotificationIndex() ?? -1));
185
+ }
186
+ static ɵfac = i0.ɵɵngDeclareFactory({
187
+ minVersion: "12.0.0",
188
+ version: "22.2.0",
189
+ ngImport: i0,
190
+ type: ShellNotificationComponent,
191
+ deps: [],
192
+ target: i0.ɵɵFactoryTarget.Component
193
+ });
194
+ static ɵcmp = i0.ɵɵngDeclareComponent({
195
+ minVersion: "17.0.0",
196
+ version: "22.2.0",
197
+ type: ShellNotificationComponent,
198
+ isStandalone: true,
199
+ selector: "ngssm-shell-notification",
200
+ inputs: {
201
+ displayDetailsButton: {
202
+ classPropertyName: "displayDetailsButton",
203
+ publicName: "displayDetailsButton",
204
+ isSignal: true,
205
+ isRequired: false,
206
+ transformFunction: null
207
+ },
208
+ shellNotificationIndex: {
209
+ classPropertyName: "shellNotificationIndex",
210
+ publicName: "shellNotificationIndex",
211
+ isSignal: true,
212
+ isRequired: false,
213
+ transformFunction: null
214
+ }
215
+ },
216
+ ngImport: i0,
217
+ template: "@if (shellNotification(); as notification) {\n <mat-card class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{\n 'ngssm-shell-notification-success': notification.type === shellNotificationType.success,\n 'ngssm-shell-notification-error': notification.type === shellNotificationType.error\n }\">\n @if (notification.type === shellNotificationType.success) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n @if (notification.type === shellNotificationType.error) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n <mat-card-title>{{ notification.title }}</mat-card-title>\n <mat-card-subtitle>{{ notification.timestamp | date: 'shortTime' }}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n @if (displayDetailsButton() && notification.details) {\n <button mat-button (click)=\"displayDetails()\">Display details</button>\n }\n </div>\n </mat-card>\n} @else {\n No notification to display...\n}\n",
218
+ styles: [":host{display:flex;flex-direction:column}\n"],
219
+ dependencies: [
220
+ {
221
+ kind: "ngmodule",
222
+ type: CommonModule
223
+ },
224
+ {
225
+ kind: "directive",
226
+ type: i1$1.NgClass,
227
+ selector: "[ngClass]",
228
+ inputs: ["class", "ngClass"]
229
+ },
230
+ {
231
+ kind: "ngmodule",
232
+ type: MatCardModule
233
+ },
234
+ {
235
+ kind: "component",
236
+ type: i2$2.MatCard,
237
+ selector: "mat-card",
238
+ inputs: ["appearance"],
239
+ exportAs: ["matCard"]
240
+ },
241
+ {
242
+ kind: "directive",
243
+ type: i2$2.MatCardAvatar,
244
+ selector: "[mat-card-avatar], [matCardAvatar]"
245
+ },
246
+ {
247
+ kind: "component",
248
+ type: i2$2.MatCardHeader,
249
+ selector: "mat-card-header"
250
+ },
251
+ {
252
+ kind: "directive",
253
+ type: i2$2.MatCardSubtitle,
254
+ selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]"
255
+ },
256
+ {
257
+ kind: "directive",
258
+ type: i2$2.MatCardTitle,
259
+ selector: "mat-card-title, [mat-card-title], [matCardTitle]"
260
+ },
261
+ {
262
+ kind: "ngmodule",
263
+ type: MatIconModule
264
+ },
265
+ {
266
+ kind: "component",
267
+ type: i3$1.MatIcon,
268
+ selector: "mat-icon",
269
+ inputs: [
270
+ "color",
271
+ "inline",
272
+ "svgIcon",
273
+ "fontSet",
274
+ "fontIcon"
275
+ ],
276
+ exportAs: ["matIcon"]
277
+ },
278
+ {
279
+ kind: "ngmodule",
280
+ type: MatButtonModule
281
+ },
282
+ {
283
+ kind: "component",
284
+ type: i4.MatButton,
285
+ selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ",
286
+ inputs: ["matButton"],
287
+ exportAs: ["matButton", "matAnchor"]
288
+ },
289
+ {
290
+ kind: "pipe",
291
+ type: i1$1.DatePipe,
292
+ name: "date"
293
+ }
294
+ ]
295
+ });
296
+ };
297
+ i0.ɵɵngDeclareClassMetadata({
298
+ minVersion: "12.0.0",
299
+ version: "22.2.0",
300
+ ngImport: i0,
301
+ type: ShellNotificationComponent,
302
+ decorators: [{
303
+ type: Component,
304
+ args: [{
305
+ selector: "ngssm-shell-notification",
306
+ imports: [
307
+ CommonModule,
308
+ MatCardModule,
309
+ MatIconModule,
310
+ MatButtonModule
311
+ ],
312
+ template: "@if (shellNotification(); as notification) {\n <mat-card class=\"ngssm-shell-notification-card\">\n <mat-card-header\n [ngClass]=\"{\n 'ngssm-shell-notification-success': notification.type === shellNotificationType.success,\n 'ngssm-shell-notification-error': notification.type === shellNotificationType.error\n }\">\n @if (notification.type === shellNotificationType.success) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-check ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n @if (notification.type === shellNotificationType.error) {\n <mat-icon mat-card-avatar class=\"fa-solid fa-triangle-exclamation ngssm-shell-avatar-notification\"> </mat-icon>\n }\n\n <mat-card-title>{{ notification.title }}</mat-card-title>\n <mat-card-subtitle>{{ notification.timestamp | date: 'shortTime' }}</mat-card-subtitle>\n </mat-card-header>\n <div class=\"flex-row-center\">\n <span class=\"fxFlex\"></span>\n @if (displayDetailsButton() && notification.details) {\n <button mat-button (click)=\"displayDetails()\">Display details</button>\n }\n </div>\n </mat-card>\n} @else {\n No notification to display...\n}\n",
313
+ styles: [":host{display:flex;flex-direction:column}\n"]
314
+ }]
315
+ }],
316
+ propDecorators: {
317
+ displayDetailsButton: [{
318
+ type: i0.Input,
319
+ args: [{
320
+ isSignal: true,
321
+ alias: "displayDetailsButton",
322
+ required: false
323
+ }]
324
+ }],
325
+ shellNotificationIndex: [{
326
+ type: i0.Input,
327
+ args: [{
328
+ isSignal: true,
329
+ alias: "shellNotificationIndex",
330
+ required: false
331
+ }]
332
+ }]
333
+ }
334
+ });
335
+ var ShellNotificationPopupComponent = class ShellNotificationPopupComponent {
336
+ shellNotificationIndex = createSignal((state) => {
337
+ return selectShellState(state).shellNotifications.notifications.length - 1;
338
+ });
339
+ static ɵfac = i0.ɵɵngDeclareFactory({
340
+ minVersion: "12.0.0",
341
+ version: "22.2.0",
342
+ ngImport: i0,
343
+ type: ShellNotificationPopupComponent,
344
+ deps: [],
345
+ target: i0.ɵɵFactoryTarget.Component
346
+ });
347
+ static ɵcmp = i0.ɵɵngDeclareComponent({
348
+ minVersion: "14.0.0",
349
+ version: "22.2.0",
350
+ type: ShellNotificationPopupComponent,
351
+ isStandalone: true,
352
+ selector: "ngssm-shell-notification-popup",
353
+ ngImport: i0,
354
+ template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex()\"></ngssm-shell-notification>",
355
+ styles: [":host{display:flex;flex-direction:column}\n"],
356
+ dependencies: [{
357
+ kind: "component",
358
+ type: ShellNotificationComponent,
359
+ selector: "ngssm-shell-notification",
360
+ inputs: ["displayDetailsButton", "shellNotificationIndex"]
361
+ }]
362
+ });
363
+ };
364
+ i0.ɵɵngDeclareClassMetadata({
365
+ minVersion: "12.0.0",
366
+ version: "22.2.0",
367
+ ngImport: i0,
368
+ type: ShellNotificationPopupComponent,
369
+ decorators: [{
370
+ type: Component,
371
+ args: [{
372
+ selector: "ngssm-shell-notification-popup",
373
+ imports: [ShellNotificationComponent],
374
+ template: "<ngssm-shell-notification [shellNotificationIndex]=\"shellNotificationIndex()\"></ngssm-shell-notification>",
375
+ styles: [":host{display:flex;flex-direction:column}\n"]
376
+ }]
377
+ }]
378
+ });
379
+ var WrapperComponent = class WrapperComponent {
380
+ item = input(...ngDevMode ? [void 0, { debugName: "item" }] : /* istanbul ignore next */ []);
381
+ innerHtml = signal(void 0, ...ngDevMode ? [{ debugName: "innerHtml" }] : /* istanbul ignore next */ []);
382
+ viewContainerRef = inject(ViewContainerRef);
383
+ constructor() {
384
+ effect(() => {
385
+ const inputItem = this.item();
386
+ if (typeof inputItem === "string") this.innerHtml.set(inputItem);
387
+ else if (inputItem) {
388
+ this.viewContainerRef.clear();
389
+ this.viewContainerRef.createComponent(inputItem);
390
+ }
391
+ });
392
+ }
393
+ static ɵfac = i0.ɵɵngDeclareFactory({
394
+ minVersion: "12.0.0",
395
+ version: "22.2.0",
396
+ ngImport: i0,
397
+ type: WrapperComponent,
398
+ deps: [],
399
+ target: i0.ɵɵFactoryTarget.Component
400
+ });
401
+ static ɵcmp = i0.ɵɵngDeclareComponent({
402
+ minVersion: "17.0.0",
403
+ version: "22.2.0",
404
+ type: WrapperComponent,
405
+ isStandalone: true,
406
+ selector: "ngssm-wrapper",
407
+ inputs: { item: {
408
+ classPropertyName: "item",
409
+ publicName: "item",
410
+ isSignal: true,
411
+ isRequired: false,
412
+ transformFunction: null
413
+ } },
414
+ ngImport: i0,
415
+ template: "@if (innerHtml(); as content) {\n <span [innerHTML]=\"content\"></span>\n}\n"
416
+ });
417
+ };
418
+ i0.ɵɵngDeclareClassMetadata({
419
+ minVersion: "12.0.0",
420
+ version: "22.2.0",
421
+ ngImport: i0,
422
+ type: WrapperComponent,
423
+ decorators: [{
424
+ type: Component,
425
+ args: [{
426
+ selector: "ngssm-wrapper",
427
+ imports: [],
428
+ template: "@if (innerHtml(); as content) {\n <span [innerHTML]=\"content\"></span>\n}\n"
429
+ }]
430
+ }],
431
+ ctorParameters: () => [],
432
+ propDecorators: { item: [{
433
+ type: i0.Input,
434
+ args: [{
435
+ isSignal: true,
436
+ alias: "item",
437
+ required: false
438
+ }]
439
+ }] }
440
+ });
441
+ var SideNavComponent = class SideNavComponent {
442
+ config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
443
+ static ɵfac = i0.ɵɵngDeclareFactory({
444
+ minVersion: "12.0.0",
445
+ version: "22.2.0",
446
+ ngImport: i0,
447
+ type: SideNavComponent,
448
+ deps: [],
449
+ target: i0.ɵɵFactoryTarget.Component
450
+ });
451
+ static ɵcmp = i0.ɵɵngDeclareComponent({
452
+ minVersion: "17.0.0",
453
+ version: "22.2.0",
454
+ type: SideNavComponent,
455
+ isStandalone: true,
456
+ selector: "ngssm-side-nav",
457
+ inputs: { config: {
458
+ classPropertyName: "config",
459
+ publicName: "config",
460
+ isSignal: true,
461
+ isRequired: false,
462
+ transformFunction: null
463
+ } },
464
+ host: { classAttribute: "ngssm-sidenav" },
465
+ ngImport: i0,
466
+ template: "@if (config(); as sidenavConfig) {\n <div class=\"ngssm-sidenav-main-container\">\n @if (sidenavConfig.title) {\n <div class=\"ngssm-sidenav-title\">{{ sidenavConfig.title }}</div>\n <mat-divider></mat-divider>\n }\n\n @for (section of sidenavConfig.sections; track section; let last = $last) {\n <ng-container class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n @if (!section.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"section.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: section.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n @for (item of section.items; track item) {\n <div class=\"ngssm-sidenav-item-container\">\n @if (!item.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: item.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n }\n\n @if (!last) {\n <mat-divider></mat-divider>\n }\n </ng-container>\n }\n </div>\n}\n",
467
+ dependencies: [
468
+ {
469
+ kind: "ngmodule",
470
+ type: MatDividerModule
471
+ },
472
+ {
473
+ kind: "component",
474
+ type: i1.MatDivider,
475
+ selector: "mat-divider",
476
+ inputs: ["vertical", "inset"]
477
+ },
478
+ {
479
+ kind: "ngmodule",
480
+ type: RouterModule
481
+ },
482
+ {
483
+ kind: "directive",
484
+ type: i2$1.RouterLink,
485
+ selector: "[routerLink]",
486
+ inputs: [
487
+ "target",
488
+ "queryParams",
489
+ "fragment",
490
+ "queryParamsHandling",
491
+ "state",
492
+ "info",
493
+ "relativeTo",
494
+ "preserveFragment",
495
+ "skipLocationChange",
496
+ "replaceUrl",
497
+ "browserUrl",
498
+ "routerLink"
499
+ ]
500
+ },
501
+ {
502
+ kind: "directive",
503
+ type: i2$1.RouterLinkActive,
504
+ selector: "[routerLinkActive]",
505
+ inputs: [
506
+ "routerLinkActiveOptions",
507
+ "ariaCurrentWhenActive",
508
+ "routerLinkActive"
509
+ ],
510
+ outputs: ["isActiveChange"],
511
+ exportAs: ["routerLinkActive"]
512
+ },
513
+ {
514
+ kind: "component",
515
+ type: WrapperComponent,
516
+ selector: "ngssm-wrapper",
517
+ inputs: ["item"]
518
+ }
519
+ ]
520
+ });
521
+ };
522
+ i0.ɵɵngDeclareClassMetadata({
523
+ minVersion: "12.0.0",
524
+ version: "22.2.0",
525
+ ngImport: i0,
526
+ type: SideNavComponent,
527
+ decorators: [{
528
+ type: Component,
529
+ args: [{
530
+ selector: "ngssm-side-nav",
531
+ imports: [
532
+ MatDividerModule,
533
+ RouterModule,
534
+ WrapperComponent
535
+ ],
536
+ host: { class: "ngssm-sidenav" },
537
+ template: "@if (config(); as sidenavConfig) {\n <div class=\"ngssm-sidenav-main-container\">\n @if (sidenavConfig.title) {\n <div class=\"ngssm-sidenav-title\">{{ sidenavConfig.title }}</div>\n <mat-divider></mat-divider>\n }\n\n @for (section of sidenavConfig.sections; track section; let last = $last) {\n <ng-container class=\"ngssm-sidenav-section-container\">\n <div class=\"ngssm-sidenav-section-item-container\">\n @if (!section.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"section.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: section.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (section.icon) {\n <span [innerHTML]=\"section.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ section.label }}\n\n @if (section.component) {\n <ngssm-wrapper [item]=\"section.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n @for (item of section.items; track item) {\n <div class=\"ngssm-sidenav-item-container\">\n @if (!item.route) {\n <div class=\"ngssm-sidenav-section-item\">\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n } @else {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"ngssm-sidenav-active-link\"\n [routerLinkActiveOptions]=\"{ exact: item.linkActiveOnlyIfExact === true }\"\n class=\"ngssm-sidenav-section-item\">\n <div>\n @if (item.icon) {\n <span [innerHTML]=\"item.icon\" class=\"ngssm-sidenav-item-icon\"></span>\n }\n\n {{ item.label }}\n\n @if (item.component) {\n <ngssm-wrapper [item]=\"item.component\"></ngssm-wrapper>\n }\n </div>\n </a>\n }\n </div>\n }\n\n @if (!last) {\n <mat-divider></mat-divider>\n }\n </ng-container>\n }\n </div>\n}\n"
538
+ }]
539
+ }],
540
+ propDecorators: { config: [{
541
+ type: i0.Input,
542
+ args: [{
543
+ isSignal: true,
544
+ alias: "config",
545
+ required: false
546
+ }]
547
+ }] }
548
+ });
549
+ var ShellNotificationsComponent = class ShellNotificationsComponent {
550
+ notificationSelected = signal(false, ...ngDevMode ? [{ debugName: "notificationSelected" }] : /* istanbul ignore next */ []);
551
+ notifications = createSignal((state) => selectShellState(state).shellNotifications.notifications);
552
+ details = signal("", ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
553
+ shellNotificationType = ShellNotificationType;
554
+ ngssmAceEditorMode = NgssmAceEditorMode;
555
+ store = inject(Store);
556
+ selectedNotificaitonIndex = createSignal((state) => selectShellState(state).shellNotifications.selectedNotificaitonIndex);
557
+ constructor() {
558
+ effect(() => {
559
+ const items = this.notifications();
560
+ const id = this.selectedNotificaitonIndex() ?? -1;
561
+ this.notificationSelected.set(id !== -1);
562
+ const details = items[id]?.details;
563
+ if (details) this.details.set(JSON.stringify(details, null, 2));
564
+ else this.details.set("");
565
+ });
566
+ }
567
+ closeDetailsPanel() {
568
+ this.store.dispatchAction(new DisplayNotificationDetailsAction(void 0));
569
+ }
570
+ clearAll() {
571
+ this.store.dispatchActionType(ShellActionType.clearAllNotifications);
572
+ }
573
+ static ɵfac = i0.ɵɵngDeclareFactory({
574
+ minVersion: "12.0.0",
575
+ version: "22.2.0",
576
+ ngImport: i0,
577
+ type: ShellNotificationsComponent,
578
+ deps: [],
579
+ target: i0.ɵɵFactoryTarget.Component
580
+ });
581
+ static ɵcmp = i0.ɵɵngDeclareComponent({
582
+ minVersion: "17.0.0",
583
+ version: "22.2.0",
584
+ type: ShellNotificationsComponent,
585
+ isStandalone: true,
586
+ selector: "ngssm-shell-notifications",
587
+ ngImport: i0,
588
+ template: "@if (!notificationSelected()) {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"notifications().length === 0\" (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n </mat-card-header>\n\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n @for (notification of notifications(); track notification; let index = $index) {\n <ngssm-shell-notification [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\"> </ngssm-shell-notification>\n }\n </mat-card-content>\n </mat-card>\n} @else {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\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 </mat-card-header>\n\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"details()\" [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n}\n",
589
+ 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"],
590
+ dependencies: [
591
+ {
592
+ kind: "ngmodule",
593
+ type: MatCardModule
594
+ },
595
+ {
596
+ kind: "component",
597
+ type: i2$2.MatCard,
598
+ selector: "mat-card",
599
+ inputs: ["appearance"],
600
+ exportAs: ["matCard"]
601
+ },
602
+ {
603
+ kind: "directive",
604
+ type: i2$2.MatCardContent,
605
+ selector: "mat-card-content"
606
+ },
607
+ {
608
+ kind: "component",
609
+ type: i2$2.MatCardHeader,
610
+ selector: "mat-card-header"
611
+ },
612
+ {
613
+ kind: "directive",
614
+ type: i2$2.MatCardTitle,
615
+ selector: "mat-card-title, [mat-card-title], [matCardTitle]"
616
+ },
617
+ {
618
+ kind: "ngmodule",
619
+ type: MatButtonModule
620
+ },
621
+ {
622
+ kind: "component",
623
+ type: i4.MatButton,
624
+ selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ",
625
+ inputs: ["matButton"],
626
+ exportAs: ["matButton", "matAnchor"]
627
+ },
628
+ {
629
+ kind: "component",
630
+ type: i4.MatIconButton,
631
+ selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
632
+ exportAs: ["matButton", "matAnchor"]
633
+ },
634
+ {
635
+ kind: "ngmodule",
636
+ type: MatIconModule
637
+ },
638
+ {
639
+ kind: "component",
640
+ type: i3$1.MatIcon,
641
+ selector: "mat-icon",
642
+ inputs: [
643
+ "color",
644
+ "inline",
645
+ "svgIcon",
646
+ "fontSet",
647
+ "fontIcon"
648
+ ],
649
+ exportAs: ["matIcon"]
650
+ },
651
+ {
652
+ kind: "component",
653
+ type: NgssmAceEditorComponent,
654
+ selector: "ngssm-ace-editor",
655
+ inputs: [
656
+ "content",
657
+ "readonly",
658
+ "editorMode"
659
+ ],
660
+ outputs: [
661
+ "contentChanged",
662
+ "isValidChanged",
663
+ "editorReady"
664
+ ]
665
+ },
666
+ {
667
+ kind: "component",
668
+ type: ShellNotificationComponent,
669
+ selector: "ngssm-shell-notification",
670
+ inputs: ["displayDetailsButton", "shellNotificationIndex"]
671
+ }
672
+ ]
673
+ });
674
+ };
675
+ i0.ɵɵngDeclareClassMetadata({
676
+ minVersion: "12.0.0",
677
+ version: "22.2.0",
678
+ ngImport: i0,
679
+ type: ShellNotificationsComponent,
680
+ decorators: [{
681
+ type: Component,
682
+ args: [{
683
+ selector: "ngssm-shell-notifications",
684
+ imports: [
685
+ MatCardModule,
686
+ MatButtonModule,
687
+ MatIconModule,
688
+ NgssmAceEditorComponent,
689
+ ShellNotificationComponent
690
+ ],
691
+ template: "@if (!notificationSelected()) {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\n <mat-card-title class=\"flex-row-center\">\n Notifications\n <span class=\"fxFlex\"></span>\n <button mat-stroked-button color=\"primary\" [disabled]=\"notifications().length === 0\" (click)=\"clearAll()\">\n Clear all\n </button>\n </mat-card-title>\n </mat-card-header>\n\n <mat-card-content class=\"notifications-container flex-column-stretch fxFlex\">\n @for (notification of notifications(); track notification; let index = $index) {\n <ngssm-shell-notification [shellNotificationIndex]=\"index\" [displayDetailsButton]=\"true\"> </ngssm-shell-notification>\n }\n </mat-card-content>\n </mat-card>\n} @else {\n <mat-card appearance=\"outlined\" class=\"flex-column-stretch fxFlex\">\n <mat-card-header>\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 </mat-card-header>\n\n <ngssm-ace-editor class=\"fxFlex\" [readonly]=\"true\" [content]=\"details()\" [editorMode]=\"ngssmAceEditorMode.json\">\n </ngssm-ace-editor>\n </mat-card>\n}\n",
692
+ 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"]
693
+ }]
694
+ }],
695
+ ctorParameters: () => []
696
+ });
697
+ var ShellComponent = class ShellComponent {
698
+ shellConfig = input(...ngDevMode ? [void 0, { debugName: "shellConfig" }] : /* istanbul ignore next */ []);
699
+ notificationsCount = createSignal((state) => selectShellState(state).shellNotifications.notifications.length);
700
+ navigationBarRendered = computed(() => {
701
+ let isOpen;
702
+ switch (this.navigationBarLockStatus()) {
703
+ case LockStatus.lockedClosed:
704
+ isOpen = false;
705
+ break;
706
+ case LockStatus.lockedOpen:
707
+ isOpen = true;
708
+ break;
709
+ default: isOpen = this.navigationBarOpen();
710
+ }
711
+ return isOpen;
712
+ }, ...ngDevMode ? [{ debugName: "navigationBarRendered" }] : /* istanbul ignore next */ []);
713
+ store = inject(Store);
714
+ navigationBarOpen = createSignal((state) => selectShellState(state).navigationBarOpen);
715
+ navigationBarLockStatus = createSignal((state) => selectShellState(state).navigationBarLockStatus);
716
+ toggleNavigationBarState() {
717
+ this.store.dispatchActionType(ShellActionType.toggleNavigationBarState);
718
+ }
719
+ static ɵfac = i0.ɵɵngDeclareFactory({
720
+ minVersion: "12.0.0",
721
+ version: "22.2.0",
722
+ ngImport: i0,
723
+ type: ShellComponent,
724
+ deps: [],
725
+ target: i0.ɵɵFactoryTarget.Component
726
+ });
727
+ static ɵcmp = i0.ɵɵngDeclareComponent({
728
+ minVersion: "17.0.0",
729
+ version: "22.2.0",
730
+ type: ShellComponent,
731
+ isStandalone: true,
732
+ selector: "ngssm-shell",
733
+ inputs: { shellConfig: {
734
+ classPropertyName: "shellConfig",
735
+ publicName: "shellConfig",
736
+ isSignal: true,
737
+ isRequired: false,
738
+ transformFunction: null
739
+ } },
740
+ host: { classAttribute: "ngssm-shell" },
741
+ ngImport: i0,
742
+ template: "@if (shellConfig(); as config) {\n <div class=\"ngssm-shell-container\">\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 @if (config.logo) {\n <img [src]=\"config.logo\" class=\"ngssm-shell-header-logo\" alt=\"logo\" />\n }\n\n @if (config.applicationTitle) {\n <span class=\"ngssm-shell-header-title\">\n {{ config.applicationTitle }}\n </span>\n }\n\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"navigationBarRendered()\" 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 @if (config.displayFooter) {\n <mat-toolbar class=\"ngssm-shell-footer\">\n @for (component of config.footerComponents; track component) {\n <ngssm-wrapper [item]=\"component\"></ngssm-wrapper>\n }\n\n <span class=\"ngssm-fxFlex\"></span>\n @if (config.displayFooterNotificationsButton) {\n <button mat-icon-button (click)=\"rightSidebar.toggle()\">\n @if (notificationsCount() > 0) {\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount()\"> </mat-icon>\n } @else {\n <mat-icon class=\"fa-regular fa-message\"> </mat-icon>\n }\n </button>\n }\n </mat-toolbar>\n }\n </div>\n} @else {\n <div class=\"ngssm-shell-no-config\">Please, provide a config for the shell.</div>\n}\n",
743
+ dependencies: [
744
+ {
745
+ kind: "ngmodule",
746
+ type: RouterModule
747
+ },
748
+ {
749
+ kind: "directive",
750
+ type: i2$1.RouterOutlet,
751
+ selector: "router-outlet",
752
+ inputs: ["name", "routerOutletData"],
753
+ outputs: [
754
+ "activate",
755
+ "deactivate",
756
+ "attach",
757
+ "detach"
758
+ ],
759
+ exportAs: ["outlet"]
760
+ },
761
+ {
762
+ kind: "ngmodule",
763
+ type: MatSidenavModule
764
+ },
765
+ {
766
+ kind: "component",
767
+ type: i2.MatSidenav,
768
+ selector: "mat-sidenav",
769
+ inputs: [
770
+ "fixedInViewport",
771
+ "fixedTopGap",
772
+ "fixedBottomGap"
773
+ ],
774
+ exportAs: ["matSidenav"]
775
+ },
776
+ {
777
+ kind: "component",
778
+ type: i2.MatSidenavContainer,
779
+ selector: "mat-sidenav-container",
780
+ exportAs: ["matSidenavContainer"]
781
+ },
782
+ {
783
+ kind: "component",
784
+ type: i2.MatSidenavContent,
785
+ selector: "mat-sidenav-content"
786
+ },
787
+ {
788
+ kind: "ngmodule",
789
+ type: MatToolbarModule
790
+ },
791
+ {
792
+ kind: "component",
793
+ type: i3.MatToolbar,
794
+ selector: "mat-toolbar",
795
+ inputs: ["color"],
796
+ exportAs: ["matToolbar"]
797
+ },
798
+ {
799
+ kind: "ngmodule",
800
+ type: MatIconModule
801
+ },
802
+ {
803
+ kind: "component",
804
+ type: i3$1.MatIcon,
805
+ selector: "mat-icon",
806
+ inputs: [
807
+ "color",
808
+ "inline",
809
+ "svgIcon",
810
+ "fontSet",
811
+ "fontIcon"
812
+ ],
813
+ exportAs: ["matIcon"]
814
+ },
815
+ {
816
+ kind: "ngmodule",
817
+ type: MatButtonModule
818
+ },
819
+ {
820
+ kind: "component",
821
+ type: i4.MatIconButton,
822
+ selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
823
+ exportAs: ["matButton", "matAnchor"]
824
+ },
825
+ {
826
+ kind: "ngmodule",
827
+ type: MatBadgeModule
828
+ },
829
+ {
830
+ kind: "directive",
831
+ type: i6.MatBadge,
832
+ selector: "[matBadge]",
833
+ inputs: [
834
+ "matBadgeColor",
835
+ "matBadgeOverlap",
836
+ "matBadgeDisabled",
837
+ "matBadgePosition",
838
+ "matBadge",
839
+ "matBadgeDescription",
840
+ "matBadgeSize",
841
+ "matBadgeHidden"
842
+ ]
843
+ },
844
+ {
845
+ kind: "component",
846
+ type: SideNavComponent,
847
+ selector: "ngssm-side-nav",
848
+ inputs: ["config"]
849
+ },
850
+ {
851
+ kind: "component",
852
+ type: ShellNotificationsComponent,
853
+ selector: "ngssm-shell-notifications"
854
+ },
855
+ {
856
+ kind: "component",
857
+ type: WrapperComponent,
858
+ selector: "ngssm-wrapper",
859
+ inputs: ["item"]
860
+ }
861
+ ]
862
+ });
863
+ };
864
+ i0.ɵɵngDeclareClassMetadata({
865
+ minVersion: "12.0.0",
866
+ version: "22.2.0",
867
+ ngImport: i0,
868
+ type: ShellComponent,
869
+ decorators: [{
870
+ type: Component,
871
+ args: [{
872
+ selector: "ngssm-shell",
873
+ imports: [
874
+ RouterModule,
875
+ MatSidenavModule,
876
+ MatToolbarModule,
877
+ MatIconModule,
878
+ MatButtonModule,
879
+ MatBadgeModule,
880
+ SideNavComponent,
881
+ ShellNotificationsComponent,
882
+ WrapperComponent
883
+ ],
884
+ host: { class: "ngssm-shell" },
885
+ template: "@if (shellConfig(); as config) {\n <div class=\"ngssm-shell-container\">\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 @if (config.logo) {\n <img [src]=\"config.logo\" class=\"ngssm-shell-header-logo\" alt=\"logo\" />\n }\n\n @if (config.applicationTitle) {\n <span class=\"ngssm-shell-header-title\">\n {{ config.applicationTitle }}\n </span>\n }\n\n <ng-content></ng-content>\n </mat-toolbar>\n\n <mat-sidenav-container>\n <mat-sidenav mode=\"side\" [opened]=\"navigationBarRendered()\" 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 @if (config.displayFooter) {\n <mat-toolbar class=\"ngssm-shell-footer\">\n @for (component of config.footerComponents; track component) {\n <ngssm-wrapper [item]=\"component\"></ngssm-wrapper>\n }\n\n <span class=\"ngssm-fxFlex\"></span>\n @if (config.displayFooterNotificationsButton) {\n <button mat-icon-button (click)=\"rightSidebar.toggle()\">\n @if (notificationsCount() > 0) {\n <mat-icon class=\"fa-regular fa-message\" [matBadge]=\"notificationsCount()\"> </mat-icon>\n } @else {\n <mat-icon class=\"fa-regular fa-message\"> </mat-icon>\n }\n </button>\n }\n </mat-toolbar>\n }\n </div>\n} @else {\n <div class=\"ngssm-shell-no-config\">Please, provide a config for the shell.</div>\n}\n"
886
+ }]
887
+ }],
888
+ propDecorators: { shellConfig: [{
889
+ type: i0.Input,
890
+ args: [{
891
+ isSignal: true,
892
+ alias: "shellConfig",
893
+ required: false
894
+ }]
895
+ }] }
896
+ });
897
+ var NotificationShowingEffect = class NotificationShowingEffect {
898
+ processedActions = [ShellActionType.displayNotification];
899
+ snackBar = inject(MatSnackBar);
900
+ processAction() {
901
+ this.snackBar.openFromComponent(ShellNotificationPopupComponent, {
902
+ panelClass: "ngssm-shell-notification-snack-panel",
903
+ duration: 1e3,
904
+ horizontalPosition: "center",
905
+ verticalPosition: "top"
906
+ });
907
+ }
908
+ static ɵfac = i0.ɵɵngDeclareFactory({
909
+ minVersion: "12.0.0",
910
+ version: "22.2.0",
911
+ ngImport: i0,
912
+ type: NotificationShowingEffect,
913
+ deps: [],
914
+ target: i0.ɵɵFactoryTarget.Injectable
915
+ });
916
+ static ɵprov = i0.ɵɵngDeclareInjectable({
917
+ minVersion: "12.0.0",
918
+ version: "22.2.0",
919
+ ngImport: i0,
920
+ type: NotificationShowingEffect
921
+ });
922
+ };
923
+ i0.ɵɵngDeclareClassMetadata({
924
+ minVersion: "12.0.0",
925
+ version: "22.2.0",
926
+ ngImport: i0,
927
+ type: NotificationShowingEffect,
928
+ decorators: [{ type: Injectable }]
929
+ });
371
930
  const provideNgssmShell = () => {
372
- return makeEnvironmentProviders([
373
- provideReducers(NavigationBarReducer, ShellNotificationsReducer),
374
- provideEffect(NotificationShowingEffect)
375
- ]);
931
+ return makeEnvironmentProviders([provideReducers(NavigationBarReducer, ShellNotificationsReducer), provideEffect(NotificationShowingEffect)]);
376
932
  };
377
-
378
- /*
379
- * Public API Surface of ngssm-shell
380
- */
381
-
382
- /**
383
- * Generated bundle index. Do not edit.
384
- */
385
-
386
933
  export { DisplayNotificationAction, DisplayNotificationDetailsAction, LockNavigationBarAction, LockStatus, ShellActionType, ShellComponent, ShellNotificationComponent, ShellNotificationPopupComponent, ShellNotificationType, ShellNotificationsComponent, ShellStateSpecification, SideNavComponent, WrapperComponent, getDefaultShellNotifications, provideNgssmShell, selectShellState, updateShellState };
387
- //# sourceMappingURL=ngssm-shell.mjs.map
934
+
935
+ //# sourceMappingURL=ngssm-shell.mjs.map