sgh-navbar 0.0.3 → 0.0.5
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.
- package/esm2020/lib/sgh-navbar.component.mjs +3 -3
- package/esm2020/lib/sgh-navbar.module.mjs +36 -11
- package/esm2020/lib/sgh-navbar.service.mjs +27 -6
- package/esm2020/lib/sidenav/menu-list-item/menu-list-item.component.mjs +59 -0
- package/esm2020/lib/sidenav/nav-data.mjs +68 -75
- package/esm2020/lib/sidenav/sidenav-data.mjs +3 -0
- package/esm2020/lib/sidenav/sidenav.component.mjs +10 -18
- package/esm2020/lib/sidenav/sublevel-menu.component.mjs +6 -6
- package/esm2020/lib/sidenav/toolbar-data.mjs +3 -0
- package/esm2020/lib/toolbar/toolbar.component.mjs +30 -31
- package/fesm2015/sgh-navbar.mjs +220 -145
- package/fesm2015/sgh-navbar.mjs.map +1 -1
- package/fesm2020/sgh-navbar.mjs +220 -145
- package/fesm2020/sgh-navbar.mjs.map +1 -1
- package/lib/sgh-navbar.module.d.ts +12 -6
- package/lib/sgh-navbar.service.d.ts +9 -1
- package/lib/sidenav/menu-list-item/menu-list-item.component.d.ts +18 -0
- package/lib/sidenav/sidenav-data.d.ts +7 -0
- package/lib/sidenav/sidenav.component.d.ts +3 -5
- package/lib/sidenav/toolbar-data.d.ts +4 -0
- package/lib/toolbar/toolbar.component.d.ts +14 -12
- package/package.json +2 -2
package/fesm2020/sgh-navbar.mjs
CHANGED
|
@@ -1,39 +1,68 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
|
|
3
|
-
import {
|
|
2
|
+
import { Injectable, Component, Input, ViewEncapsulation, HostBinding, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
|
|
3
|
+
import { BehaviorSubject } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/router';
|
|
5
|
-
import { RouterModule } from '@angular/router';
|
|
5
|
+
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
6
|
+
import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
|
|
6
7
|
import * as i2 from '@angular/common';
|
|
7
8
|
import { CommonModule } from '@angular/common';
|
|
8
|
-
import * as
|
|
9
|
-
import {
|
|
9
|
+
import * as i4 from '@angular/material/list';
|
|
10
|
+
import { MatListModule } from '@angular/material/list';
|
|
11
|
+
import * as i5 from '@angular/material/icon';
|
|
12
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
+
import * as i5$1 from '@angular/material/toolbar';
|
|
14
|
+
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
15
|
+
import * as i6 from '@angular/material/button';
|
|
16
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
17
|
+
import * as i7 from '@angular/material/input';
|
|
18
|
+
import { MatInputModule } from '@angular/material/input';
|
|
19
|
+
import * as i8 from '@angular/material/form-field';
|
|
10
20
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
11
21
|
import { HttpClientModule } from '@angular/common/http';
|
|
22
|
+
import { FormsModule } from '@angular/forms';
|
|
12
23
|
|
|
13
24
|
class SghNavbarService {
|
|
14
|
-
constructor() {
|
|
25
|
+
constructor(router) {
|
|
26
|
+
this.router = router;
|
|
27
|
+
// @ts-ignore
|
|
28
|
+
this.currentUrl = new BehaviorSubject(undefined);
|
|
29
|
+
this.router.events.subscribe((event) => {
|
|
30
|
+
if (event instanceof NavigationEnd) {
|
|
31
|
+
this.currentUrl.next(event.urlAfterRedirects);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
closeNav() {
|
|
36
|
+
this.appDrawer.close();
|
|
37
|
+
}
|
|
38
|
+
openNav() {
|
|
39
|
+
this.appDrawer.open();
|
|
40
|
+
}
|
|
41
|
+
toggleNav() {
|
|
42
|
+
this.appDrawer.toggle();
|
|
43
|
+
}
|
|
15
44
|
}
|
|
16
|
-
SghNavbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
17
|
-
SghNavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
45
|
+
SghNavbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
46
|
+
SghNavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarService, providedIn: 'root' });
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarService, decorators: [{
|
|
19
48
|
type: Injectable,
|
|
20
49
|
args: [{
|
|
21
50
|
providedIn: 'root'
|
|
22
51
|
}]
|
|
23
|
-
}], ctorParameters: function () { return []; } });
|
|
52
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; } });
|
|
24
53
|
|
|
25
54
|
class SghNavbarComponent {
|
|
26
55
|
constructor() { }
|
|
27
56
|
ngOnInit() {
|
|
28
57
|
}
|
|
29
58
|
}
|
|
30
|
-
SghNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
31
|
-
SghNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
59
|
+
SghNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
+
SghNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SghNavbarComponent, selector: "lib-sgh-navbar", ngImport: i0, template: `
|
|
32
61
|
<p>
|
|
33
62
|
sgh-navbar works!
|
|
34
63
|
</p>
|
|
35
64
|
`, isInline: true });
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarComponent, decorators: [{
|
|
37
66
|
type: Component,
|
|
38
67
|
args: [{ selector: 'lib-sgh-navbar', template: `
|
|
39
68
|
<p>
|
|
@@ -85,8 +114,8 @@ class SublevelMenuComponent {
|
|
|
85
114
|
: '';
|
|
86
115
|
}
|
|
87
116
|
}
|
|
88
|
-
SublevelMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
89
|
-
SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
117
|
+
SublevelMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SublevelMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
+
SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: { data: "data", collapsed: "collapsed", animating: "animating", expanded: "expanded", multiple: "multiple" }, ngImport: i0, template: `
|
|
90
119
|
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
91
120
|
[@submenu]="expanded
|
|
92
121
|
? {value: 'visible',
|
|
@@ -128,7 +157,7 @@ SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
128
157
|
</div>
|
|
129
158
|
</li>
|
|
130
159
|
</ul>
|
|
131
|
-
`, isInline: true, styles: ["
|
|
160
|
+
`, isInline: true, styles: ["mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mat-mdc-nav-list{margin:10px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: ["data", "collapsed", "animating", "expanded", "multiple"] }], animations: [
|
|
132
161
|
fadeInOut,
|
|
133
162
|
trigger('submenu', [
|
|
134
163
|
state('hidden', style({
|
|
@@ -143,7 +172,7 @@ SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
143
172
|
transition('void => *', animate(0))
|
|
144
173
|
])
|
|
145
174
|
] });
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SublevelMenuComponent, decorators: [{
|
|
147
176
|
type: Component,
|
|
148
177
|
args: [{ selector: 'app-sublevel-menu', template: `
|
|
149
178
|
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
@@ -201,7 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
201
230
|
animate('{{transitionParams}}')]),
|
|
202
231
|
transition('void => *', animate(0))
|
|
203
232
|
])
|
|
204
|
-
], styles: ["
|
|
233
|
+
], styles: ["mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mat-mdc-nav-list{margin:10px!important}\n"] }]
|
|
205
234
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { data: [{
|
|
206
235
|
type: Input
|
|
207
236
|
}], collapsed: [{
|
|
@@ -216,93 +245,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
216
245
|
|
|
217
246
|
const navbarData = [
|
|
218
247
|
{
|
|
219
|
-
|
|
220
|
-
icon:
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
{
|
|
224
|
-
routeLink: 'products',
|
|
225
|
-
icon: 'fal fa-box-open',
|
|
226
|
-
label: 'Products',
|
|
227
|
-
items: [
|
|
248
|
+
"label": "Dashboard",
|
|
249
|
+
"icon": "home",
|
|
250
|
+
"routeLink": "dashboard",
|
|
251
|
+
"items": [
|
|
228
252
|
{
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
253
|
+
"label": "Cards",
|
|
254
|
+
"icon": "dashboard_customize",
|
|
255
|
+
"routeLink": "dashboard/cards"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"label": "Charts",
|
|
259
|
+
"icon": "area_chart",
|
|
260
|
+
"routeLink": "dashboard/charts",
|
|
261
|
+
"items": [
|
|
262
|
+
{
|
|
263
|
+
"label": "Vertical bar chart",
|
|
264
|
+
"icon": "",
|
|
265
|
+
"routeLink": "dashboard/charts/pages/vertical-bar-chart"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"label": "Horizontal bar chart",
|
|
269
|
+
"icon": "",
|
|
270
|
+
"routeLink": "dashboard/charts/pages/horizontal-bar-chart"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"label": "Grouped horizontal bar chart",
|
|
274
|
+
"icon": "",
|
|
275
|
+
"routeLink": "dashboard/charts/pages/grouped-horizontal-bar-chart"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"label": "Grouped vertical bar chart",
|
|
279
|
+
"icon": "",
|
|
280
|
+
"routeLink": "dashboard/charts/pages/grouped-vertical-bar-chart"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"label": "Pie chart",
|
|
284
|
+
"icon": "",
|
|
285
|
+
"routeLink": "dashboard/charts/pages/pie-chart"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"label": "Advanced pie chart",
|
|
289
|
+
"icon": "",
|
|
290
|
+
"routeLink": "dashboard/charts/pages/advanced-pie-chart"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"label": "Pie grid chart",
|
|
294
|
+
"icon": "",
|
|
295
|
+
"routeLink": "dashboard/charts/pages/pie-grid-chart"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"label": "Line chart",
|
|
299
|
+
"icon": "",
|
|
300
|
+
"routeLink": "dashboard/charts/pages/line-chart"
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"label": "Number card chart",
|
|
304
|
+
"icon": "",
|
|
305
|
+
"routeLink": "dashboard/charts/pages/number-card-chart"
|
|
306
|
+
},
|
|
232
307
|
{
|
|
233
|
-
|
|
234
|
-
|
|
308
|
+
"label": "Linear gauge chart",
|
|
309
|
+
"icon": "",
|
|
310
|
+
"routeLink": "dashboard/charts/pages/linear-gauge-chart"
|
|
235
311
|
},
|
|
236
312
|
{
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
{
|
|
241
|
-
routeLink: 'products/level3.1',
|
|
242
|
-
label: 'Level 3.1'
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
routeLink: 'products/level3.2',
|
|
246
|
-
label: 'Level 3.2'
|
|
247
|
-
}
|
|
248
|
-
]
|
|
313
|
+
"label": "Combo chart",
|
|
314
|
+
"icon": "",
|
|
315
|
+
"routeLink": "dashboard/charts/pages/combo-chart"
|
|
249
316
|
}
|
|
250
317
|
]
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
routeLink: 'products/level1.2',
|
|
254
|
-
label: 'Level 1.2',
|
|
255
|
-
}
|
|
256
|
-
]
|
|
257
|
-
},
|
|
258
|
-
{
|
|
259
|
-
routeLink: 'statistics',
|
|
260
|
-
icon: 'fal fa-chart-bar',
|
|
261
|
-
label: 'Statistics'
|
|
262
|
-
},
|
|
263
|
-
{
|
|
264
|
-
routeLink: 'coupens',
|
|
265
|
-
icon: 'fal fa-tags',
|
|
266
|
-
label: 'Coupens',
|
|
267
|
-
items: [
|
|
268
|
-
{
|
|
269
|
-
routeLink: 'coupens/list',
|
|
270
|
-
label: 'List Coupens'
|
|
271
|
-
},
|
|
272
|
-
{
|
|
273
|
-
routeLink: 'coupens/create',
|
|
274
|
-
label: 'Create Coupens'
|
|
275
318
|
}
|
|
276
319
|
]
|
|
277
320
|
},
|
|
278
321
|
{
|
|
279
|
-
|
|
280
|
-
icon:
|
|
281
|
-
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
routeLink: 'media',
|
|
285
|
-
icon: 'fal fa-camera',
|
|
286
|
-
label: 'Media'
|
|
287
|
-
},
|
|
288
|
-
{
|
|
289
|
-
routeLink: 'settings',
|
|
290
|
-
icon: 'fal fa-cog',
|
|
291
|
-
label: 'Settings',
|
|
292
|
-
expanded: true,
|
|
293
|
-
items: [
|
|
294
|
-
{
|
|
295
|
-
routeLink: 'settings/profile',
|
|
296
|
-
label: 'Profile'
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
routeLink: 'settings/customize',
|
|
300
|
-
label: 'Customize'
|
|
301
|
-
}
|
|
302
|
-
]
|
|
322
|
+
"label": "Form elements",
|
|
323
|
+
"icon": "text_snippet",
|
|
324
|
+
"routeLink": "main"
|
|
303
325
|
},
|
|
304
326
|
];
|
|
305
327
|
|
|
328
|
+
class MenuListItemComponent {
|
|
329
|
+
constructor(router, navService) {
|
|
330
|
+
this.router = router;
|
|
331
|
+
this.navService = navService;
|
|
332
|
+
// @ts-ignore
|
|
333
|
+
this.ariaExpanded = this.expanded;
|
|
334
|
+
this.hideSublinkIcon = true;
|
|
335
|
+
}
|
|
336
|
+
ngOnInit() {
|
|
337
|
+
this.navService.currentUrl.subscribe((url) => {
|
|
338
|
+
if (this.item.routeLink && url) {
|
|
339
|
+
// console.log(`Checking '/${this.item.route}' against '${url}'`);
|
|
340
|
+
this.expanded = url.indexOf(`/${this.item.routeLink}`) === 0;
|
|
341
|
+
this.ariaExpanded = this.expanded;
|
|
342
|
+
// console.log(`${this.item.route} is expanded: ${this.expanded}`);
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
onItemSelected(item) {
|
|
347
|
+
if (!item.items || !item.items.length) {
|
|
348
|
+
this.router.navigate([item.routeLink]).then();
|
|
349
|
+
}
|
|
350
|
+
if (item.items && item.items.length) {
|
|
351
|
+
this.expanded = !this.expanded;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
MenuListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuListItemComponent, deps: [{ token: i1.Router }, { token: SghNavbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
356
|
+
MenuListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuListItemComponent, selector: "app-menu-list-item", inputs: { item: "item" }, host: { properties: { "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0, template: "<a mat-list-item [ngClass]=\"{'item-expanded':expanded && !(item.items == undefined)}\"\r\n (click)=\"onItemSelected(item)\" [routerLink]=\"[item.routeLink]\" routerLinkActive=\"item-active\">\r\n <div class=\"text-wrapper\">\r\n <div class=\"main-text\">\r\n <mat-icon class=\"material-icons-outlined\">{{item.icon}}</mat-icon>\r\n {{item.label}}\r\n <span fxFlex></span>\r\n </div>\r\n <mat-icon class=\"material-icons-outlined\" *ngIf=\"!(item.items == undefined)\"\r\n [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\">expand_more\r\n </mat-icon>\r\n </div>\r\n</a>\r\n<div class=\"sub-link-wrapper\" [ngClass]=\"{'hide-sublink-icon':hideSublinkIcon}\" *ngIf=\"expanded\">\r\n <app-menu-list-item *ngFor=\"let child of item.items\" [item]=\"child\">\r\n </app-menu-list-item>\r\n</div>\r\n", styles: ["::ng-deep .sub-link-wrapper span.mdc-list-item__content{padding-left:1.3rem!important}::ng-deep .sub-link-wrapper span.mdc-list-item__content span.mat-mdc-list-item-unscoped-content{white-space:normal!important}a.mdc-list-item.item-active{background:#26787f!important;border-radius:10px}a.mdc-list-item.item-active .mdc-list-item__primary-text{color:#fff!important;white-space:pre-line}a.mdc-list-item .mdc-list-item__primary-text{color:#005860!important;white-space:pre-line}.mdc-list-item:focus:before{background-color:transparent!important}a.mdc-list-item:hover{background:#26787f!important;border-radius:10px}a.mdc-list-item:hover .mdc-list-item__primary-text{color:#fff!important;white-space:pre-line}a.mdc-list-item.mdc-list-item__content{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;align-self:center!important;flex:1!important;pointer-events:none!important}.text-wrapper{display:flex!important;justify-content:space-between!important;font-size:12px!important}.text-wrapper .main-text{display:flex!important}.text-wrapper .main-text .mat-icon{padding-right:5px!important}.sub-link-wrapper a.mdc-list-item{padding:0 0 0 33px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MenuListItemComponent, selector: "app-menu-list-item", inputs: ["item"] }], animations: [
|
|
357
|
+
trigger('indicatorRotate', [
|
|
358
|
+
state('collapsed', style({ transform: 'rotate(0deg)' })),
|
|
359
|
+
state('expanded', style({ transform: 'rotate(180deg)' })),
|
|
360
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
|
|
361
|
+
])
|
|
362
|
+
], encapsulation: i0.ViewEncapsulation.None });
|
|
363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuListItemComponent, decorators: [{
|
|
364
|
+
type: Component,
|
|
365
|
+
args: [{ selector: 'app-menu-list-item', encapsulation: ViewEncapsulation.None, animations: [
|
|
366
|
+
trigger('indicatorRotate', [
|
|
367
|
+
state('collapsed', style({ transform: 'rotate(0deg)' })),
|
|
368
|
+
state('expanded', style({ transform: 'rotate(180deg)' })),
|
|
369
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
|
|
370
|
+
])
|
|
371
|
+
], template: "<a mat-list-item [ngClass]=\"{'item-expanded':expanded && !(item.items == undefined)}\"\r\n (click)=\"onItemSelected(item)\" [routerLink]=\"[item.routeLink]\" routerLinkActive=\"item-active\">\r\n <div class=\"text-wrapper\">\r\n <div class=\"main-text\">\r\n <mat-icon class=\"material-icons-outlined\">{{item.icon}}</mat-icon>\r\n {{item.label}}\r\n <span fxFlex></span>\r\n </div>\r\n <mat-icon class=\"material-icons-outlined\" *ngIf=\"!(item.items == undefined)\"\r\n [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\">expand_more\r\n </mat-icon>\r\n </div>\r\n</a>\r\n<div class=\"sub-link-wrapper\" [ngClass]=\"{'hide-sublink-icon':hideSublinkIcon}\" *ngIf=\"expanded\">\r\n <app-menu-list-item *ngFor=\"let child of item.items\" [item]=\"child\">\r\n </app-menu-list-item>\r\n</div>\r\n", styles: ["::ng-deep .sub-link-wrapper span.mdc-list-item__content{padding-left:1.3rem!important}::ng-deep .sub-link-wrapper span.mdc-list-item__content span.mat-mdc-list-item-unscoped-content{white-space:normal!important}a.mdc-list-item.item-active{background:#26787f!important;border-radius:10px}a.mdc-list-item.item-active .mdc-list-item__primary-text{color:#fff!important;white-space:pre-line}a.mdc-list-item .mdc-list-item__primary-text{color:#005860!important;white-space:pre-line}.mdc-list-item:focus:before{background-color:transparent!important}a.mdc-list-item:hover{background:#26787f!important;border-radius:10px}a.mdc-list-item:hover .mdc-list-item__primary-text{color:#fff!important;white-space:pre-line}a.mdc-list-item.mdc-list-item__content{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;align-self:center!important;flex:1!important;pointer-events:none!important}.text-wrapper{display:flex!important;justify-content:space-between!important;font-size:12px!important}.text-wrapper .main-text{display:flex!important}.text-wrapper .main-text .mat-icon{padding-right:5px!important}.sub-link-wrapper a.mdc-list-item{padding:0 0 0 33px!important}\n"] }]
|
|
372
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: SghNavbarService }]; }, propDecorators: { ariaExpanded: [{
|
|
373
|
+
type: HostBinding,
|
|
374
|
+
args: ['attr.aria-expanded']
|
|
375
|
+
}], item: [{
|
|
376
|
+
type: Input
|
|
377
|
+
}] } });
|
|
378
|
+
|
|
306
379
|
class SidenavComponent {
|
|
307
380
|
onResize(event) {
|
|
308
381
|
this.screenWidth = window.innerWidth;
|
|
@@ -316,14 +389,11 @@ class SidenavComponent {
|
|
|
316
389
|
this.onToggleSideNav = new EventEmitter();
|
|
317
390
|
this.collapsed = false;
|
|
318
391
|
this.screenWidth = 0;
|
|
319
|
-
this.navData = navbarData;
|
|
320
|
-
this.bgColor = "#33284e";
|
|
321
|
-
this.imgSm = "assets/favicon.ico";
|
|
322
|
-
this.imgLg = "assets/SPAY.png";
|
|
323
392
|
this.multiple = false;
|
|
324
393
|
}
|
|
325
394
|
ngOnInit() {
|
|
326
395
|
this.screenWidth = window.innerWidth;
|
|
396
|
+
this.sidenavData.navData = navbarData;
|
|
327
397
|
}
|
|
328
398
|
toggleCollapse() {
|
|
329
399
|
this.collapsed = !this.collapsed;
|
|
@@ -342,7 +412,7 @@ class SidenavComponent {
|
|
|
342
412
|
}
|
|
343
413
|
shrinkItems(item) {
|
|
344
414
|
if (!this.multiple) {
|
|
345
|
-
for (let modelItem of this.navData) {
|
|
415
|
+
for (let modelItem of this.sidenavData.navData) {
|
|
346
416
|
if (item !== modelItem && modelItem.expanded) {
|
|
347
417
|
modelItem.expanded = false;
|
|
348
418
|
}
|
|
@@ -350,8 +420,8 @@ class SidenavComponent {
|
|
|
350
420
|
}
|
|
351
421
|
}
|
|
352
422
|
}
|
|
353
|
-
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
354
|
-
SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
423
|
+
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SidenavComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
+
SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SidenavComponent, selector: "app-sidenav", inputs: { sidenavData: "sidenavData" }, outputs: { onToggleSideNav: "onToggleSideNav" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<mat-nav-list>\r\n <app-menu-list-item *ngFor=\"let item of sidenavData.navData\" [item]=\"item\"></app-menu-list-item>\r\n</mat-nav-list>\r\n", styles: ["mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mat-mdc-nav-list{margin:10px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MenuListItemComponent, selector: "app-menu-list-item", inputs: ["item"] }], animations: [
|
|
355
425
|
fadeInOut,
|
|
356
426
|
trigger('rotate', [
|
|
357
427
|
transition(':enter', [
|
|
@@ -362,7 +432,7 @@ SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
362
432
|
])
|
|
363
433
|
])
|
|
364
434
|
] });
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
366
436
|
type: Component,
|
|
367
437
|
args: [{ selector: 'app-sidenav', animations: [
|
|
368
438
|
fadeInOut,
|
|
@@ -374,16 +444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
374
444
|
]))
|
|
375
445
|
])
|
|
376
446
|
])
|
|
377
|
-
], template: "<
|
|
447
|
+
], template: "<mat-nav-list>\r\n <app-menu-list-item *ngFor=\"let item of sidenavData.navData\" [item]=\"item\"></app-menu-list-item>\r\n</mat-nav-list>\r\n", styles: ["mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mdc-list-item.mdc-list-item--with-one-line{height:40px!important}.mat-mdc-nav-list{margin:10px!important}\n"] }]
|
|
378
448
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { onToggleSideNav: [{
|
|
379
449
|
type: Output
|
|
380
|
-
}],
|
|
381
|
-
type: Input
|
|
382
|
-
}], bgColor: [{
|
|
383
|
-
type: Input
|
|
384
|
-
}], imgSm: [{
|
|
385
|
-
type: Input
|
|
386
|
-
}], imgLg: [{
|
|
450
|
+
}], sidenavData: [{
|
|
387
451
|
type: Input
|
|
388
452
|
}], onResize: [{
|
|
389
453
|
type: HostListener,
|
|
@@ -391,87 +455,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
391
455
|
}] } });
|
|
392
456
|
|
|
393
457
|
class ToolbarComponent {
|
|
394
|
-
constructor() {
|
|
395
|
-
this.
|
|
396
|
-
this.
|
|
397
|
-
this.bgColor = "#33284e";
|
|
398
|
-
this.searchInputEvent = new EventEmitter();
|
|
399
|
-
this.logOutEvent = new EventEmitter();
|
|
400
|
-
this.isNotifNavCollapsed = false;
|
|
401
|
-
this.searchInput = "";
|
|
458
|
+
constructor(navService) {
|
|
459
|
+
this.navService = navService;
|
|
460
|
+
this.showNotificationList = false;
|
|
402
461
|
}
|
|
403
|
-
|
|
404
|
-
this.
|
|
462
|
+
ngOnInit() {
|
|
463
|
+
this.navService.appDrawer = this.sidenav;
|
|
405
464
|
}
|
|
406
|
-
|
|
407
|
-
this.
|
|
465
|
+
toggleNotificationList() {
|
|
466
|
+
this.showNotificationList = !this.showNotificationList;
|
|
408
467
|
}
|
|
409
|
-
|
|
410
|
-
this.
|
|
468
|
+
closeNotificationList() {
|
|
469
|
+
this.showNotificationList = false;
|
|
411
470
|
}
|
|
412
471
|
}
|
|
413
|
-
ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
414
|
-
ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
472
|
+
ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarComponent, deps: [{ token: SghNavbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
473
|
+
ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToolbarComponent, selector: "app-toolbar", inputs: { toolbarData: "toolbarData" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "topbar", first: true, predicate: ToolbarComponent, descendants: true }], ngImport: i0, template: "<mat-toolbar [style.background-color]=\"toolbarData.bgColor\" class=\"mat-elevation-z1\">\r\n <div class=\"first-wrapper\">\r\n <div class=\"tool-bar-lft\">\r\n <div class=\"image-wrapper\">\r\n <img class=\"logo\" src=\"{{toolbarData.img}}\" />\r\n </div>\r\n <div>\r\n <button mat-icon-button id=\"menu\" (click)=\"navService.toggleNav();closeNotificationList()\">\r\n <mat-icon class=\"material-icons-outlined\">menu_open</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"search-wrp\" fxLayout=\"row\" fxLayoutAlign=\"start center\" >\r\n <mat-form-field appearance=\"fill\">\r\n <mat-label>Search</mat-label>\r\n <input matInput>\r\n </mat-form-field>\r\n <button mat-icon-button class=\"main-search-btn\">\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span fxFlex></span>\r\n <div class=\"icon-tray\">\r\n\r\n <button class=\"notification-btn\" [ngClass]=\"{'show-dropdown':showNotificationList}\" mat-icon-button (click)=\"toggleNotificationList()\">\r\n <mat-icon class=\"notifications-alert\">notifications<span class=\"dot\"></span></mat-icon>\r\n </button>\r\n <button mat-icon-button>\r\n <mat-icon>person</mat-icon>\r\n </button>\r\n <button mat-icon-button [routerLink]=\"'/user-login/login'\">\r\n <mat-icon>power_settings_new</mat-icon>\r\n </button>\r\n </div>\r\n <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n <div class=\"text\">\r\n <h4>Samso aliao</h4>\r\n <p>Samso Nagaro Like your home work</p>\r\n </div>\r\n </div>\r\n <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n <div class=\"text\">\r\n <h4>John Silvester</h4>\r\n <p>+20 vista badge earned</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n", styles: [".mat-toolbar{display:flex;justify-content:space-between;background-size:730px;background-position:0 -85px;position:relative;color:#006068;background-image:url(lib/assets/images/Synergen_Logo-Large2.png)!important;background-repeat:repeat-x!important;box-shadow:0 1px 0 -1px #0000,0 1px 1px #0003,0 1px 3px #0000001f;z-index:2}.mat-toolbar .mat-mdc-form-field :hover{background:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field{background:transparent!important;padding:0!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field :hover{background:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-floating-label{color:#006068!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field--filled .mdc-line-ripple:after{border-bottom-color:var(--mdc-theme-primary, #006068)!important}.mat-toolbar .first-wrapper{display:flex}.mat-toolbar .first-wrapper .tool-bar-lft{display:flex;align-items:center;width:35%!important;justify-content:space-between}.mat-toolbar .first-wrapper .tool-bar-lft .image-wrapper{display:contents!important}.mat-toolbar .first-wrapper .tool-bar-lft .image-wrapper img{width:50%!important}.mat-toolbar .icon-tray .show-dropdown{position:relative}.mat-toolbar .icon-tray .show-dropdown:after{content:\"\";position:absolute;left:11px;top:45px;border-bottom:8px solid white;border-right:8px solid transparent;border-left:8px solid transparent;z-index:3}.mat-toolbar .notification-btn:hover{animation:tada 1.5s ease infinite}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }], animations: [
|
|
415
474
|
fadeInOut
|
|
416
475
|
] });
|
|
417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
418
477
|
type: Component,
|
|
419
478
|
args: [{ selector: 'app-toolbar', animations: [
|
|
420
479
|
fadeInOut
|
|
421
|
-
], template: "<
|
|
422
|
-
}], propDecorators: {
|
|
423
|
-
type: Input
|
|
424
|
-
}], notificationShow: [{
|
|
480
|
+
], template: "<mat-toolbar [style.background-color]=\"toolbarData.bgColor\" class=\"mat-elevation-z1\">\r\n <div class=\"first-wrapper\">\r\n <div class=\"tool-bar-lft\">\r\n <div class=\"image-wrapper\">\r\n <img class=\"logo\" src=\"{{toolbarData.img}}\" />\r\n </div>\r\n <div>\r\n <button mat-icon-button id=\"menu\" (click)=\"navService.toggleNav();closeNotificationList()\">\r\n <mat-icon class=\"material-icons-outlined\">menu_open</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"search-wrp\" fxLayout=\"row\" fxLayoutAlign=\"start center\" >\r\n <mat-form-field appearance=\"fill\">\r\n <mat-label>Search</mat-label>\r\n <input matInput>\r\n </mat-form-field>\r\n <button mat-icon-button class=\"main-search-btn\">\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span fxFlex></span>\r\n <div class=\"icon-tray\">\r\n\r\n <button class=\"notification-btn\" [ngClass]=\"{'show-dropdown':showNotificationList}\" mat-icon-button (click)=\"toggleNotificationList()\">\r\n <mat-icon class=\"notifications-alert\">notifications<span class=\"dot\"></span></mat-icon>\r\n </button>\r\n <button mat-icon-button>\r\n <mat-icon>person</mat-icon>\r\n </button>\r\n <button mat-icon-button [routerLink]=\"'/user-login/login'\">\r\n <mat-icon>power_settings_new</mat-icon>\r\n </button>\r\n </div>\r\n <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n <div class=\"text\">\r\n <h4>Samso aliao</h4>\r\n <p>Samso Nagaro Like your home work</p>\r\n </div>\r\n </div>\r\n <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n <div class=\"text\">\r\n <h4>John Silvester</h4>\r\n <p>+20 vista badge earned</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n", styles: [".mat-toolbar{display:flex;justify-content:space-between;background-size:730px;background-position:0 -85px;position:relative;color:#006068;background-image:url(lib/assets/images/Synergen_Logo-Large2.png)!important;background-repeat:repeat-x!important;box-shadow:0 1px 0 -1px #0000,0 1px 1px #0003,0 1px 3px #0000001f;z-index:2}.mat-toolbar .mat-mdc-form-field :hover{background:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field{background:transparent!important;padding:0!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field :hover{background:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-floating-label{color:#006068!important}.mat-toolbar .mat-mdc-form-field ::ng-deep .mdc-text-field--filled .mdc-line-ripple:after{border-bottom-color:var(--mdc-theme-primary, #006068)!important}.mat-toolbar .first-wrapper{display:flex}.mat-toolbar .first-wrapper .tool-bar-lft{display:flex;align-items:center;width:35%!important;justify-content:space-between}.mat-toolbar .first-wrapper .tool-bar-lft .image-wrapper{display:contents!important}.mat-toolbar .first-wrapper .tool-bar-lft .image-wrapper img{width:50%!important}.mat-toolbar .icon-tray .show-dropdown{position:relative}.mat-toolbar .icon-tray .show-dropdown:after{content:\"\";position:absolute;left:11px;top:45px;border-bottom:8px solid white;border-right:8px solid transparent;border-left:8px solid transparent;z-index:3}.mat-toolbar .notification-btn:hover{animation:tada 1.5s ease infinite}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0)}}\n"] }]
|
|
481
|
+
}], ctorParameters: function () { return [{ type: SghNavbarService }]; }, propDecorators: { toolbarData: [{
|
|
425
482
|
type: Input
|
|
426
|
-
}],
|
|
427
|
-
type:
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
483
|
+
}], sidenav: [{
|
|
484
|
+
type: ViewChild,
|
|
485
|
+
args: ['drawer']
|
|
486
|
+
}], topbar: [{
|
|
487
|
+
type: ViewChild,
|
|
488
|
+
args: [ToolbarComponent]
|
|
432
489
|
}] } });
|
|
433
490
|
|
|
434
491
|
class SghNavbarModule {
|
|
435
492
|
}
|
|
436
|
-
SghNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
437
|
-
SghNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
493
|
+
SghNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
494
|
+
SghNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarModule, declarations: [SghNavbarComponent,
|
|
438
495
|
SublevelMenuComponent,
|
|
439
496
|
SidenavComponent,
|
|
440
|
-
ToolbarComponent
|
|
497
|
+
ToolbarComponent,
|
|
498
|
+
MenuListItemComponent], imports: [BrowserAnimationsModule,
|
|
441
499
|
CommonModule,
|
|
442
500
|
HttpClientModule,
|
|
443
501
|
RouterModule,
|
|
444
|
-
FormsModule
|
|
502
|
+
FormsModule,
|
|
503
|
+
MatListModule,
|
|
504
|
+
MatIconModule,
|
|
505
|
+
MatToolbarModule,
|
|
506
|
+
MatButtonModule,
|
|
507
|
+
MatInputModule], exports: [SghNavbarComponent,
|
|
445
508
|
SublevelMenuComponent,
|
|
446
509
|
SidenavComponent,
|
|
447
510
|
ToolbarComponent] });
|
|
448
|
-
SghNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
511
|
+
SghNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarModule, providers: [SghNavbarService], imports: [BrowserAnimationsModule,
|
|
449
512
|
CommonModule,
|
|
450
513
|
HttpClientModule,
|
|
451
514
|
RouterModule,
|
|
452
|
-
FormsModule
|
|
453
|
-
|
|
515
|
+
FormsModule,
|
|
516
|
+
MatListModule,
|
|
517
|
+
MatIconModule,
|
|
518
|
+
MatToolbarModule,
|
|
519
|
+
MatButtonModule,
|
|
520
|
+
MatInputModule] });
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SghNavbarModule, decorators: [{
|
|
454
522
|
type: NgModule,
|
|
455
523
|
args: [{
|
|
456
524
|
declarations: [
|
|
457
525
|
SghNavbarComponent,
|
|
458
526
|
SublevelMenuComponent,
|
|
459
527
|
SidenavComponent,
|
|
460
|
-
ToolbarComponent
|
|
528
|
+
ToolbarComponent,
|
|
529
|
+
MenuListItemComponent
|
|
461
530
|
],
|
|
462
531
|
imports: [
|
|
463
532
|
BrowserAnimationsModule,
|
|
464
533
|
CommonModule,
|
|
465
534
|
HttpClientModule,
|
|
466
535
|
RouterModule,
|
|
467
|
-
FormsModule
|
|
536
|
+
FormsModule,
|
|
537
|
+
MatListModule,
|
|
538
|
+
MatIconModule,
|
|
539
|
+
MatToolbarModule,
|
|
540
|
+
MatButtonModule,
|
|
541
|
+
MatInputModule
|
|
468
542
|
],
|
|
469
543
|
exports: [
|
|
470
544
|
SghNavbarComponent,
|
|
471
545
|
SublevelMenuComponent,
|
|
472
546
|
SidenavComponent,
|
|
473
547
|
ToolbarComponent
|
|
474
|
-
]
|
|
548
|
+
],
|
|
549
|
+
providers: [SghNavbarService],
|
|
475
550
|
}]
|
|
476
551
|
}] });
|
|
477
552
|
|