sgh-navbar 0.0.2 → 0.0.4
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/README.md +24 -24
- package/esm2020/lib/sgh-navbar.component.mjs +11 -11
- 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.component.mjs +7 -6
- package/esm2020/lib/sidenav/sublevel-menu.component.mjs +89 -89
- package/esm2020/lib/toolbar/toolbar.component.mjs +33 -30
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/sgh-navbar.mjs +310 -222
- package/fesm2015/sgh-navbar.mjs.map +1 -1
- package/fesm2020/sgh-navbar.mjs +310 -222
- 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/toolbar/toolbar.component.d.ts +13 -11
- package/package.json +3 -3
package/fesm2020/sgh-navbar.mjs
CHANGED
|
@@ -1,44 +1,73 @@
|
|
|
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.
|
|
17
|
-
SghNavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.
|
|
45
|
+
SghNavbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
46
|
+
SghNavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarService, providedIn: 'root' });
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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.
|
|
31
|
-
SghNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
|
|
32
|
-
<p>
|
|
33
|
-
sgh-navbar works!
|
|
34
|
-
</p>
|
|
59
|
+
SghNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
+
SghNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SghNavbarComponent, selector: "lib-sgh-navbar", ngImport: i0, template: `
|
|
61
|
+
<p>
|
|
62
|
+
sgh-navbar works!
|
|
63
|
+
</p>
|
|
35
64
|
`, isInline: true });
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarComponent, decorators: [{
|
|
37
66
|
type: Component,
|
|
38
|
-
args: [{ selector: 'lib-sgh-navbar', template: `
|
|
39
|
-
<p>
|
|
40
|
-
sgh-navbar works!
|
|
41
|
-
</p>
|
|
67
|
+
args: [{ selector: 'lib-sgh-navbar', template: `
|
|
68
|
+
<p>
|
|
69
|
+
sgh-navbar works!
|
|
70
|
+
</p>
|
|
42
71
|
` }]
|
|
43
72
|
}], ctorParameters: function () { return []; } });
|
|
44
73
|
|
|
@@ -85,50 +114,50 @@ class SublevelMenuComponent {
|
|
|
85
114
|
: '';
|
|
86
115
|
}
|
|
87
116
|
}
|
|
88
|
-
SublevelMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.
|
|
89
|
-
SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
|
|
90
|
-
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
91
|
-
[@submenu]="expanded
|
|
92
|
-
? {value: 'visible',
|
|
93
|
-
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
|
|
94
|
-
: {value: 'hidden',
|
|
95
|
-
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
|
|
96
|
-
class="sublevel-nav"
|
|
97
|
-
>
|
|
98
|
-
<li *ngFor="let item of data.items" class="sublevel-nav-item">
|
|
99
|
-
<a class="sublevel-nav-link"
|
|
100
|
-
(click)="handleClick(item)"
|
|
101
|
-
*ngIf="item.items && item.items.length > 0"
|
|
102
|
-
[ngClass]="getActiveClass(item)"
|
|
103
|
-
>
|
|
104
|
-
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
105
|
-
<span class="sublevel-link-text" @fadeInOut
|
|
106
|
-
*ngIf="collapsed">{{item.label}}</span>
|
|
107
|
-
<i *ngIf="item.items && collapsed" class="menu-collapse-icon"
|
|
108
|
-
[ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
|
|
109
|
-
></i>
|
|
110
|
-
</a>
|
|
111
|
-
<a class="sublevel-nav-link"
|
|
112
|
-
*ngIf="!item.items || (item.items && item.items.length === 0)"
|
|
113
|
-
[routerLink]="[item.routeLink]"
|
|
114
|
-
routerLinkActive="active-sublevel"
|
|
115
|
-
[routerLinkActiveOptions]="{exact: true}"
|
|
116
|
-
>
|
|
117
|
-
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
118
|
-
<span class="sublevel-link-text" @fadeInOut
|
|
119
|
-
*ngIf="collapsed">{{item.label}}</span>
|
|
120
|
-
</a>
|
|
121
|
-
<div *ngIf="item.items && item.items.length > 0">
|
|
122
|
-
<app-sublevel-menu
|
|
123
|
-
[data]="item"
|
|
124
|
-
[collapsed]="collapsed"
|
|
125
|
-
[multiple]="multiple"
|
|
126
|
-
[expanded]="item.expanded"
|
|
127
|
-
></app-sublevel-menu>
|
|
128
|
-
</div>
|
|
129
|
-
</li>
|
|
130
|
-
</ul>
|
|
131
|
-
`, isInline: true, styles: ["
|
|
117
|
+
SublevelMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SublevelMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
+
SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: { data: "data", collapsed: "collapsed", animating: "animating", expanded: "expanded", multiple: "multiple" }, ngImport: i0, template: `
|
|
119
|
+
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
120
|
+
[@submenu]="expanded
|
|
121
|
+
? {value: 'visible',
|
|
122
|
+
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
|
|
123
|
+
: {value: 'hidden',
|
|
124
|
+
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
|
|
125
|
+
class="sublevel-nav"
|
|
126
|
+
>
|
|
127
|
+
<li *ngFor="let item of data.items" class="sublevel-nav-item">
|
|
128
|
+
<a class="sublevel-nav-link"
|
|
129
|
+
(click)="handleClick(item)"
|
|
130
|
+
*ngIf="item.items && item.items.length > 0"
|
|
131
|
+
[ngClass]="getActiveClass(item)"
|
|
132
|
+
>
|
|
133
|
+
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
134
|
+
<span class="sublevel-link-text" @fadeInOut
|
|
135
|
+
*ngIf="collapsed">{{item.label}}</span>
|
|
136
|
+
<i *ngIf="item.items && collapsed" class="menu-collapse-icon"
|
|
137
|
+
[ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
|
|
138
|
+
></i>
|
|
139
|
+
</a>
|
|
140
|
+
<a class="sublevel-nav-link"
|
|
141
|
+
*ngIf="!item.items || (item.items && item.items.length === 0)"
|
|
142
|
+
[routerLink]="[item.routeLink]"
|
|
143
|
+
routerLinkActive="active-sublevel"
|
|
144
|
+
[routerLinkActiveOptions]="{exact: true}"
|
|
145
|
+
>
|
|
146
|
+
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
147
|
+
<span class="sublevel-link-text" @fadeInOut
|
|
148
|
+
*ngIf="collapsed">{{item.label}}</span>
|
|
149
|
+
</a>
|
|
150
|
+
<div *ngIf="item.items && item.items.length > 0">
|
|
151
|
+
<app-sublevel-menu
|
|
152
|
+
[data]="item"
|
|
153
|
+
[collapsed]="collapsed"
|
|
154
|
+
[multiple]="multiple"
|
|
155
|
+
[expanded]="item.expanded"
|
|
156
|
+
></app-sublevel-menu>
|
|
157
|
+
</div>
|
|
158
|
+
</li>
|
|
159
|
+
</ul>
|
|
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,50 +172,50 @@ 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.
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SublevelMenuComponent, decorators: [{
|
|
147
176
|
type: Component,
|
|
148
|
-
args: [{ selector: 'app-sublevel-menu', template: `
|
|
149
|
-
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
150
|
-
[@submenu]="expanded
|
|
151
|
-
? {value: 'visible',
|
|
152
|
-
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
|
|
153
|
-
: {value: 'hidden',
|
|
154
|
-
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
|
|
155
|
-
class="sublevel-nav"
|
|
156
|
-
>
|
|
157
|
-
<li *ngFor="let item of data.items" class="sublevel-nav-item">
|
|
158
|
-
<a class="sublevel-nav-link"
|
|
159
|
-
(click)="handleClick(item)"
|
|
160
|
-
*ngIf="item.items && item.items.length > 0"
|
|
161
|
-
[ngClass]="getActiveClass(item)"
|
|
162
|
-
>
|
|
163
|
-
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
164
|
-
<span class="sublevel-link-text" @fadeInOut
|
|
165
|
-
*ngIf="collapsed">{{item.label}}</span>
|
|
166
|
-
<i *ngIf="item.items && collapsed" class="menu-collapse-icon"
|
|
167
|
-
[ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
|
|
168
|
-
></i>
|
|
169
|
-
</a>
|
|
170
|
-
<a class="sublevel-nav-link"
|
|
171
|
-
*ngIf="!item.items || (item.items && item.items.length === 0)"
|
|
172
|
-
[routerLink]="[item.routeLink]"
|
|
173
|
-
routerLinkActive="active-sublevel"
|
|
174
|
-
[routerLinkActiveOptions]="{exact: true}"
|
|
175
|
-
>
|
|
176
|
-
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
177
|
-
<span class="sublevel-link-text" @fadeInOut
|
|
178
|
-
*ngIf="collapsed">{{item.label}}</span>
|
|
179
|
-
</a>
|
|
180
|
-
<div *ngIf="item.items && item.items.length > 0">
|
|
181
|
-
<app-sublevel-menu
|
|
182
|
-
[data]="item"
|
|
183
|
-
[collapsed]="collapsed"
|
|
184
|
-
[multiple]="multiple"
|
|
185
|
-
[expanded]="item.expanded"
|
|
186
|
-
></app-sublevel-menu>
|
|
187
|
-
</div>
|
|
188
|
-
</li>
|
|
189
|
-
</ul>
|
|
177
|
+
args: [{ selector: 'app-sublevel-menu', template: `
|
|
178
|
+
<ul *ngIf="collapsed && data.items && data.items.length > 0"
|
|
179
|
+
[@submenu]="expanded
|
|
180
|
+
? {value: 'visible',
|
|
181
|
+
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
|
|
182
|
+
: {value: 'hidden',
|
|
183
|
+
params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
|
|
184
|
+
class="sublevel-nav"
|
|
185
|
+
>
|
|
186
|
+
<li *ngFor="let item of data.items" class="sublevel-nav-item">
|
|
187
|
+
<a class="sublevel-nav-link"
|
|
188
|
+
(click)="handleClick(item)"
|
|
189
|
+
*ngIf="item.items && item.items.length > 0"
|
|
190
|
+
[ngClass]="getActiveClass(item)"
|
|
191
|
+
>
|
|
192
|
+
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
193
|
+
<span class="sublevel-link-text" @fadeInOut
|
|
194
|
+
*ngIf="collapsed">{{item.label}}</span>
|
|
195
|
+
<i *ngIf="item.items && collapsed" class="menu-collapse-icon"
|
|
196
|
+
[ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
|
|
197
|
+
></i>
|
|
198
|
+
</a>
|
|
199
|
+
<a class="sublevel-nav-link"
|
|
200
|
+
*ngIf="!item.items || (item.items && item.items.length === 0)"
|
|
201
|
+
[routerLink]="[item.routeLink]"
|
|
202
|
+
routerLinkActive="active-sublevel"
|
|
203
|
+
[routerLinkActiveOptions]="{exact: true}"
|
|
204
|
+
>
|
|
205
|
+
<i class="sublevel-link-icon fa fa-circle"></i>
|
|
206
|
+
<span class="sublevel-link-text" @fadeInOut
|
|
207
|
+
*ngIf="collapsed">{{item.label}}</span>
|
|
208
|
+
</a>
|
|
209
|
+
<div *ngIf="item.items && item.items.length > 0">
|
|
210
|
+
<app-sublevel-menu
|
|
211
|
+
[data]="item"
|
|
212
|
+
[collapsed]="collapsed"
|
|
213
|
+
[multiple]="multiple"
|
|
214
|
+
[expanded]="item.expanded"
|
|
215
|
+
></app-sublevel-menu>
|
|
216
|
+
</div>
|
|
217
|
+
</li>
|
|
218
|
+
</ul>
|
|
190
219
|
`, animations: [
|
|
191
220
|
fadeInOut,
|
|
192
221
|
trigger('submenu', [
|
|
@@ -201,7 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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.1.5", 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": [
|
|
232
262
|
{
|
|
233
|
-
|
|
234
|
-
|
|
263
|
+
"label": "Vertical bar chart",
|
|
264
|
+
"icon": "",
|
|
265
|
+
"routeLink": "dashboard/charts/pages/vertical-bar-chart"
|
|
235
266
|
},
|
|
236
267
|
{
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
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
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"label": "Linear gauge chart",
|
|
309
|
+
"icon": "",
|
|
310
|
+
"routeLink": "dashboard/charts/pages/linear-gauge-chart"
|
|
311
|
+
},
|
|
312
|
+
{
|
|
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.8", 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.8", 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.8", 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;
|
|
@@ -350,8 +423,8 @@ class SidenavComponent {
|
|
|
350
423
|
}
|
|
351
424
|
}
|
|
352
425
|
}
|
|
353
|
-
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.
|
|
354
|
-
SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
|
|
426
|
+
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SidenavComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
+
SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SidenavComponent, selector: "app-sidenav", inputs: { navData: "navData", bgColor: "bgColor", imgSm: "imgSm", imgLg: "imgLg" }, 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 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
428
|
fadeInOut,
|
|
356
429
|
trigger('rotate', [
|
|
357
430
|
transition(':enter', [
|
|
@@ -362,7 +435,7 @@ SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
362
435
|
])
|
|
363
436
|
])
|
|
364
437
|
] });
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
366
439
|
type: Component,
|
|
367
440
|
args: [{ selector: 'app-sidenav', animations: [
|
|
368
441
|
fadeInOut,
|
|
@@ -374,7 +447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
374
447
|
]))
|
|
375
448
|
])
|
|
376
449
|
])
|
|
377
|
-
], template: "<
|
|
450
|
+
], template: "<mat-nav-list>\r\n <app-menu-list-item *ngFor=\"let item of 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
451
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { onToggleSideNav: [{
|
|
379
452
|
type: Output
|
|
380
453
|
}], navData: [{
|
|
@@ -391,87 +464,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
391
464
|
}] } });
|
|
392
465
|
|
|
393
466
|
class ToolbarComponent {
|
|
394
|
-
constructor() {
|
|
395
|
-
this.
|
|
396
|
-
this.
|
|
397
|
-
this.bgColor =
|
|
398
|
-
this.
|
|
399
|
-
this.logOutEvent = new EventEmitter();
|
|
400
|
-
this.isNotifNavCollapsed = false;
|
|
401
|
-
this.searchInput = "";
|
|
467
|
+
constructor(navService) {
|
|
468
|
+
this.navService = navService;
|
|
469
|
+
this.showNotificationList = false;
|
|
470
|
+
this.bgColor = 'primary';
|
|
471
|
+
this.img = "assets/images/Synergen_Logo-new.svgo";
|
|
402
472
|
}
|
|
403
|
-
|
|
404
|
-
this.
|
|
473
|
+
ngOnInit() {
|
|
474
|
+
this.navService.appDrawer = this.sidenav;
|
|
405
475
|
}
|
|
406
|
-
|
|
407
|
-
this.
|
|
476
|
+
toggleNotificationList() {
|
|
477
|
+
this.showNotificationList = !this.showNotificationList;
|
|
408
478
|
}
|
|
409
|
-
|
|
410
|
-
this.
|
|
479
|
+
closeNotificationList() {
|
|
480
|
+
this.showNotificationList = false;
|
|
411
481
|
}
|
|
412
482
|
}
|
|
413
|
-
ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.
|
|
414
|
-
ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
|
|
483
|
+
ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: SghNavbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
484
|
+
ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarComponent, selector: "app-toolbar", inputs: { bgColor: "bgColor", img: "img" }, 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]=\"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=\"{{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
485
|
fadeInOut
|
|
416
486
|
] });
|
|
417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.
|
|
487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
418
488
|
type: Component,
|
|
419
489
|
args: [{ selector: 'app-toolbar', animations: [
|
|
420
490
|
fadeInOut
|
|
421
|
-
], template: "<
|
|
422
|
-
}], propDecorators: {
|
|
491
|
+
], template: "<mat-toolbar [style.background-color]=\"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=\"{{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"] }]
|
|
492
|
+
}], ctorParameters: function () { return [{ type: SghNavbarService }]; }, propDecorators: { bgColor: [{
|
|
423
493
|
type: Input
|
|
424
|
-
}],
|
|
425
|
-
type: Input
|
|
426
|
-
}], bgColor: [{
|
|
494
|
+
}], img: [{
|
|
427
495
|
type: Input
|
|
428
|
-
}],
|
|
429
|
-
type:
|
|
430
|
-
|
|
431
|
-
|
|
496
|
+
}], sidenav: [{
|
|
497
|
+
type: ViewChild,
|
|
498
|
+
args: ['drawer']
|
|
499
|
+
}], topbar: [{
|
|
500
|
+
type: ViewChild,
|
|
501
|
+
args: [ToolbarComponent]
|
|
432
502
|
}] } });
|
|
433
503
|
|
|
434
504
|
class SghNavbarModule {
|
|
435
505
|
}
|
|
436
|
-
SghNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.
|
|
437
|
-
SghNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
|
|
506
|
+
SghNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
507
|
+
SghNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarModule, declarations: [SghNavbarComponent,
|
|
438
508
|
SublevelMenuComponent,
|
|
439
509
|
SidenavComponent,
|
|
440
|
-
ToolbarComponent
|
|
510
|
+
ToolbarComponent,
|
|
511
|
+
MenuListItemComponent], imports: [BrowserAnimationsModule,
|
|
441
512
|
CommonModule,
|
|
442
513
|
HttpClientModule,
|
|
443
514
|
RouterModule,
|
|
444
|
-
FormsModule
|
|
515
|
+
FormsModule,
|
|
516
|
+
MatListModule,
|
|
517
|
+
MatIconModule,
|
|
518
|
+
MatToolbarModule,
|
|
519
|
+
MatButtonModule,
|
|
520
|
+
MatInputModule], exports: [SghNavbarComponent,
|
|
445
521
|
SublevelMenuComponent,
|
|
446
522
|
SidenavComponent,
|
|
447
523
|
ToolbarComponent] });
|
|
448
|
-
SghNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.
|
|
524
|
+
SghNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarModule, providers: [SghNavbarService], imports: [BrowserAnimationsModule,
|
|
449
525
|
CommonModule,
|
|
450
526
|
HttpClientModule,
|
|
451
527
|
RouterModule,
|
|
452
|
-
FormsModule
|
|
453
|
-
|
|
528
|
+
FormsModule,
|
|
529
|
+
MatListModule,
|
|
530
|
+
MatIconModule,
|
|
531
|
+
MatToolbarModule,
|
|
532
|
+
MatButtonModule,
|
|
533
|
+
MatInputModule] });
|
|
534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SghNavbarModule, decorators: [{
|
|
454
535
|
type: NgModule,
|
|
455
536
|
args: [{
|
|
456
537
|
declarations: [
|
|
457
538
|
SghNavbarComponent,
|
|
458
539
|
SublevelMenuComponent,
|
|
459
540
|
SidenavComponent,
|
|
460
|
-
ToolbarComponent
|
|
541
|
+
ToolbarComponent,
|
|
542
|
+
MenuListItemComponent
|
|
461
543
|
],
|
|
462
544
|
imports: [
|
|
463
545
|
BrowserAnimationsModule,
|
|
464
546
|
CommonModule,
|
|
465
547
|
HttpClientModule,
|
|
466
548
|
RouterModule,
|
|
467
|
-
FormsModule
|
|
549
|
+
FormsModule,
|
|
550
|
+
MatListModule,
|
|
551
|
+
MatIconModule,
|
|
552
|
+
MatToolbarModule,
|
|
553
|
+
MatButtonModule,
|
|
554
|
+
MatInputModule
|
|
468
555
|
],
|
|
469
556
|
exports: [
|
|
470
557
|
SghNavbarComponent,
|
|
471
558
|
SublevelMenuComponent,
|
|
472
559
|
SidenavComponent,
|
|
473
560
|
ToolbarComponent
|
|
474
|
-
]
|
|
561
|
+
],
|
|
562
|
+
providers: [SghNavbarService],
|
|
475
563
|
}]
|
|
476
564
|
}] });
|
|
477
565
|
|