@kolektor/nucleus-material 0.0.12-pre.7931 → 0.1.130-pre.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.
- package/README.md +7 -0
- package/esm2022/index.mjs +24 -0
- package/esm2022/kolektor-nucleus-material.mjs +5 -0
- package/esm2022/lib/dialog/dialog.component.mjs +22 -0
- package/esm2022/lib/dialog/dialog.module.mjs +19 -0
- package/esm2022/lib/dialog/dialog.service.mjs +45 -0
- package/esm2022/lib/dialog/models.mjs +10 -0
- package/esm2022/lib/loaded-content/loaded-content-component.mjs +72 -0
- package/esm2022/lib/loaded-content/loaded-content-directive.mjs +78 -0
- package/esm2022/lib/loaded-content/loaded-content-module.mjs +33 -0
- package/esm2022/lib/loaded-content/loading-state.mjs +105 -0
- package/esm2022/lib/snackbar/models.mjs +9 -0
- package/esm2022/lib/snackbar/progress-snackbar/progress-snackbar.component.mjs +31 -0
- package/esm2022/lib/snackbar/snackbar.module.mjs +20 -0
- package/esm2022/lib/snackbar/snackbar.service.mjs +51 -0
- package/esm2022/lib/swipe-tabs/swipe-tabs-directive.mjs +58 -0
- package/esm2022/lib/swipe-tabs/swipe-tabs-module.mjs +18 -0
- package/esm2022/lib/user-avatar/user-avatar-component.mjs +52 -0
- package/esm2022/lib/user-avatar/user-avatar-module.mjs +18 -0
- package/fesm2022/kolektor-nucleus-material.mjs +598 -0
- package/fesm2022/kolektor-nucleus-material.mjs.map +1 -0
- package/index.d.ts +17 -5
- package/lib/dialog/dialog.component.d.ts +10 -10
- package/lib/dialog/dialog.module.d.ts +10 -10
- package/lib/dialog/dialog.service.d.ts +17 -17
- package/lib/dialog/models.d.ts +24 -24
- package/lib/loaded-content/loaded-content-component.d.ts +22 -22
- package/lib/loaded-content/loaded-content-directive.d.ts +23 -23
- package/lib/loaded-content/loaded-content-module.d.ts +12 -12
- package/lib/loaded-content/loading-state.d.ts +32 -32
- package/lib/snackbar/models.d.ts +7 -7
- package/lib/snackbar/progress-snackbar/progress-snackbar.component.d.ts +10 -10
- package/lib/snackbar/snackbar.module.d.ts +10 -10
- package/lib/snackbar/snackbar.service.d.ts +13 -13
- package/lib/swipe-tabs/swipe-tabs-directive.d.ts +11 -11
- package/lib/swipe-tabs/swipe-tabs-module.d.ts +8 -8
- package/lib/user-avatar/user-avatar-component.d.ts +13 -14
- package/lib/user-avatar/user-avatar-module.d.ts +8 -8
- package/package.json +24 -29
- package/esm2020/kolektor-nucleus-material.mjs +0 -5
- package/esm2020/lib/dialog/dialog.component.mjs +0 -22
- package/esm2020/lib/dialog/dialog.module.mjs +0 -29
- package/esm2020/lib/dialog/dialog.service.mjs +0 -40
- package/esm2020/lib/dialog/models.mjs +0 -10
- package/esm2020/lib/loaded-content/loaded-content-component.mjs +0 -71
- package/esm2020/lib/loaded-content/loaded-content-directive.mjs +0 -79
- package/esm2020/lib/loaded-content/loaded-content-module.mjs +0 -39
- package/esm2020/lib/loaded-content/loading-state.mjs +0 -107
- package/esm2020/lib/native-styling/models.mjs +0 -9
- package/esm2020/lib/native-styling/native-styling.service.mjs +0 -67
- package/esm2020/lib/snackbar/models.mjs +0 -9
- package/esm2020/lib/snackbar/progress-snackbar/progress-snackbar.component.mjs +0 -29
- package/esm2020/lib/snackbar/snackbar.module.mjs +0 -33
- package/esm2020/lib/snackbar/snackbar.service.mjs +0 -50
- package/esm2020/lib/swipe-tabs/swipe-tabs-directive.mjs +0 -54
- package/esm2020/lib/swipe-tabs/swipe-tabs-module.mjs +0 -24
- package/esm2020/lib/user-avatar/user-avatar-component.mjs +0 -50
- package/esm2020/lib/user-avatar/user-avatar-module.mjs +0 -24
- package/esm2020/public-api.mjs +0 -30
- package/fesm2015/kolektor-nucleus-material.mjs +0 -712
- package/fesm2015/kolektor-nucleus-material.mjs.map +0 -1
- package/fesm2020/kolektor-nucleus-material.mjs +0 -704
- package/fesm2020/kolektor-nucleus-material.mjs.map +0 -1
- package/lib/native-styling/models.d.ts +0 -7
- package/lib/native-styling/native-styling.service.d.ts +0 -14
- package/public-api.d.ts +0 -19
|
@@ -0,0 +1,598 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Component, Inject, Injectable, NgModule, Input, Directive, ViewEncapsulation } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/material/dialog';
|
|
4
|
+
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
5
|
+
import * as i1$1 from '@angular/common';
|
|
6
|
+
import { CommonModule } from '@angular/common';
|
|
7
|
+
import * as i3 from '@angular/material/button';
|
|
8
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
+
import { tap } from 'rxjs/operators';
|
|
10
|
+
import * as i2 from '@angular/material/progress-spinner';
|
|
11
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
12
|
+
import * as i4 from '@angular/material/icon';
|
|
13
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
14
|
+
import * as i1$2 from '@angular/material/tabs';
|
|
15
|
+
import * as Hammer from 'hammerjs';
|
|
16
|
+
import * as i1$3 from '@angular/material/snack-bar';
|
|
17
|
+
import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
18
|
+
|
|
19
|
+
class NucDialogComponent {
|
|
20
|
+
constructor(dialogRef, dialogData) {
|
|
21
|
+
this.dialogRef = dialogRef;
|
|
22
|
+
this.dialogData = dialogData;
|
|
23
|
+
}
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NucDialogComponent, selector: "nuc-dialog", ngImport: i0, template: "<ng-container *ngIf=\"dialogData\">\n <h2 mat-dialog-title *ngIf=\"dialogData.title\">\n {{ dialogData.title }}\n </h2>\n <mat-dialog-content>{{ dialogData.message }}</mat-dialog-content>\n <mat-dialog-actions>\n <ng-container *ngFor=\"let action of dialogData.actions\">\n <button\n color=\"{{ action.color || 'primary' }}\"\n *ngIf=\"action.value === undefined\"\n mat-button\n mat-dialog-close\n >\n {{ action.text }}\n </button>\n <button\n color=\"{{ action.color || 'primary' }}\"\n *ngIf=\"action.value !== undefined\"\n mat-button\n [mat-dialog-close]=\"action.value\"\n >\n {{ action.text }}\n </button>\n </ng-container>\n </mat-dialog-actions>\n</ng-container>\n", styles: ["mat-dialog-actions{justify-content:flex-end}mat-dialog-content{white-space:pre-wrap}button{text-transform:uppercase;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
26
|
+
}
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogComponent, decorators: [{
|
|
28
|
+
type: Component,
|
|
29
|
+
args: [{ selector: 'nuc-dialog', template: "<ng-container *ngIf=\"dialogData\">\n <h2 mat-dialog-title *ngIf=\"dialogData.title\">\n {{ dialogData.title }}\n </h2>\n <mat-dialog-content>{{ dialogData.message }}</mat-dialog-content>\n <mat-dialog-actions>\n <ng-container *ngFor=\"let action of dialogData.actions\">\n <button\n color=\"{{ action.color || 'primary' }}\"\n *ngIf=\"action.value === undefined\"\n mat-button\n mat-dialog-close\n >\n {{ action.text }}\n </button>\n <button\n color=\"{{ action.color || 'primary' }}\"\n *ngIf=\"action.value !== undefined\"\n mat-button\n [mat-dialog-close]=\"action.value\"\n >\n {{ action.text }}\n </button>\n </ng-container>\n </mat-dialog-actions>\n</ng-container>\n", styles: ["mat-dialog-actions{justify-content:flex-end}mat-dialog-content{white-space:pre-wrap}button{text-transform:uppercase;font-weight:700}\n"] }]
|
|
30
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
31
|
+
type: Inject,
|
|
32
|
+
args: [MAT_DIALOG_DATA]
|
|
33
|
+
}] }]; } });
|
|
34
|
+
|
|
35
|
+
class NucDialogService {
|
|
36
|
+
constructor(_matDialog) {
|
|
37
|
+
this._matDialog = _matDialog;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Opens a NucDialog with content from dialogData.
|
|
41
|
+
*
|
|
42
|
+
* @param dialogData NucDialogData containing title, message and possible actions.
|
|
43
|
+
* @param dialogConfig Extra configuration options. Data property is ignored, since it will be set to dialogData.
|
|
44
|
+
* @returns a promise with value that was specified inside pressed Nucleus action.
|
|
45
|
+
*/
|
|
46
|
+
async open(dialogData, dialogConfig
|
|
47
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
48
|
+
) {
|
|
49
|
+
if (dialogData.actions && dialogData.actions.length > 0) {
|
|
50
|
+
if (dialogConfig) {
|
|
51
|
+
dialogConfig.data = dialogData;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
dialogConfig = { data: dialogData };
|
|
55
|
+
}
|
|
56
|
+
return await this._matDialog
|
|
57
|
+
.open(NucDialogComponent, dialogConfig)
|
|
58
|
+
.beforeClosed()
|
|
59
|
+
.toPromise();
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
console.error('Nucleus.AppCore: NucDialogData requires at least one action.');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
66
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogService, providedIn: 'root' }); }
|
|
67
|
+
}
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogService, decorators: [{
|
|
69
|
+
type: Injectable,
|
|
70
|
+
args: [{
|
|
71
|
+
providedIn: 'root',
|
|
72
|
+
}]
|
|
73
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
|
|
74
|
+
|
|
75
|
+
class NucDialogModule {
|
|
76
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
77
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NucDialogModule, declarations: [NucDialogComponent], imports: [CommonModule, MatDialogModule, MatButtonModule] }); }
|
|
78
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogModule, imports: [CommonModule, MatDialogModule, MatButtonModule] }); }
|
|
79
|
+
}
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucDialogModule, decorators: [{
|
|
81
|
+
type: NgModule,
|
|
82
|
+
args: [{
|
|
83
|
+
declarations: [NucDialogComponent],
|
|
84
|
+
imports: [CommonModule, MatDialogModule, MatButtonModule],
|
|
85
|
+
}]
|
|
86
|
+
}] });
|
|
87
|
+
|
|
88
|
+
var NucColor;
|
|
89
|
+
(function (NucColor) {
|
|
90
|
+
/** Primary color of the theme. */
|
|
91
|
+
NucColor["primary"] = "primary";
|
|
92
|
+
/** Accent color of the theme. */
|
|
93
|
+
NucColor["accent"] = "accent";
|
|
94
|
+
/** Warning color of the theme. */
|
|
95
|
+
NucColor["warn"] = "warn";
|
|
96
|
+
})(NucColor || (NucColor = {}));
|
|
97
|
+
|
|
98
|
+
var LoadingStatus;
|
|
99
|
+
(function (LoadingStatus) {
|
|
100
|
+
LoadingStatus[LoadingStatus["completed"] = 0] = "completed";
|
|
101
|
+
LoadingStatus[LoadingStatus["inProgress"] = 1] = "inProgress";
|
|
102
|
+
LoadingStatus[LoadingStatus["failed"] = 2] = "failed";
|
|
103
|
+
LoadingStatus[LoadingStatus["undefined"] = 3] = "undefined";
|
|
104
|
+
})(LoadingStatus || (LoadingStatus = {}));
|
|
105
|
+
class LoadingState {
|
|
106
|
+
constructor() {
|
|
107
|
+
this._status = LoadingStatus.undefined;
|
|
108
|
+
}
|
|
109
|
+
get status() {
|
|
110
|
+
return this._status;
|
|
111
|
+
}
|
|
112
|
+
get message() {
|
|
113
|
+
return this._message;
|
|
114
|
+
}
|
|
115
|
+
get errorDetails() {
|
|
116
|
+
return this._errorDetails;
|
|
117
|
+
}
|
|
118
|
+
load(observable, resultFunction, errorFunction, completeFunction) {
|
|
119
|
+
return this._load(true, undefined, observable, resultFunction, errorFunction, completeFunction);
|
|
120
|
+
}
|
|
121
|
+
loadWithMessage(observable, message, resultFunction, errorFunction, completeFunction) {
|
|
122
|
+
this._initialMessage = message;
|
|
123
|
+
return this._load(true, message, observable, resultFunction, errorFunction, completeFunction);
|
|
124
|
+
}
|
|
125
|
+
invoke(observable, resultFunction, errorFunction, completeFunction) {
|
|
126
|
+
return this._load(false, undefined, observable, resultFunction, errorFunction, completeFunction);
|
|
127
|
+
}
|
|
128
|
+
invokeWithMessage(observable, message, resultFunction, errorFunction, completeFunction) {
|
|
129
|
+
this._initialMessage = message;
|
|
130
|
+
return this._load(false, message, observable, resultFunction, errorFunction, completeFunction);
|
|
131
|
+
}
|
|
132
|
+
retry() {
|
|
133
|
+
if (this._lastSubscription) {
|
|
134
|
+
this._lastSubscription.unsubscribe();
|
|
135
|
+
}
|
|
136
|
+
this.setInProgress(this._initialMessage);
|
|
137
|
+
this._lastSubscription = this._loadObservable.subscribe({
|
|
138
|
+
next: this._resultFunction,
|
|
139
|
+
error: this._errorFunction,
|
|
140
|
+
complete: this._completeFunction,
|
|
141
|
+
});
|
|
142
|
+
return this._lastSubscription;
|
|
143
|
+
}
|
|
144
|
+
setInProgress(message) {
|
|
145
|
+
this._status = LoadingStatus.inProgress;
|
|
146
|
+
this._message = message;
|
|
147
|
+
}
|
|
148
|
+
setCompleted() {
|
|
149
|
+
this._status = LoadingStatus.completed;
|
|
150
|
+
}
|
|
151
|
+
setFailed(message, error) {
|
|
152
|
+
this._status = LoadingStatus.failed;
|
|
153
|
+
this._message = message;
|
|
154
|
+
this._errorDetails = error;
|
|
155
|
+
}
|
|
156
|
+
_load(saveAsLoadObservable, progressMessage, observable, resultFunction, errorFunction, completeFunction) {
|
|
157
|
+
if (this._lastSubscription) {
|
|
158
|
+
this._lastSubscription.unsubscribe();
|
|
159
|
+
}
|
|
160
|
+
this.setInProgress(progressMessage);
|
|
161
|
+
const obs = observable.pipe(tap({
|
|
162
|
+
next: () => {
|
|
163
|
+
if (!saveAsLoadObservable && this.message) {
|
|
164
|
+
// if message was used one time we clear it
|
|
165
|
+
this._message = undefined;
|
|
166
|
+
}
|
|
167
|
+
this.setCompleted();
|
|
168
|
+
},
|
|
169
|
+
error: (err) => {
|
|
170
|
+
this.setFailed(undefined, LoadingState.getErrorDetails(err));
|
|
171
|
+
},
|
|
172
|
+
}));
|
|
173
|
+
if (saveAsLoadObservable) {
|
|
174
|
+
this._loadObservable = obs;
|
|
175
|
+
this._resultFunction = resultFunction;
|
|
176
|
+
this._errorFunction = errorFunction;
|
|
177
|
+
this._completeFunction = completeFunction;
|
|
178
|
+
}
|
|
179
|
+
this._lastSubscription = obs.subscribe({
|
|
180
|
+
next: resultFunction,
|
|
181
|
+
error: errorFunction,
|
|
182
|
+
complete: completeFunction,
|
|
183
|
+
});
|
|
184
|
+
return this._lastSubscription;
|
|
185
|
+
}
|
|
186
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
187
|
+
static getErrorDetails(error) {
|
|
188
|
+
// this routine tries to get the best error details from:
|
|
189
|
+
// - standard rfc7807 http error: https://datatracker.ietf.org/doc/html/rfc7807
|
|
190
|
+
// - angular HttpError
|
|
191
|
+
// - JS Error object
|
|
192
|
+
const problem = error?.error;
|
|
193
|
+
if (problem?.title && problem?.detail) {
|
|
194
|
+
return `${problem.title}: ${problem.detail}`;
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
return problem?.title || problem?.detail || error.message || error;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
203
|
+
class NucLoadedContentComponent {
|
|
204
|
+
constructor() {
|
|
205
|
+
this._errorDetailsVisible = false;
|
|
206
|
+
this.errorMessage = 'We are having trouble loading the data.';
|
|
207
|
+
this.showRetry = true;
|
|
208
|
+
}
|
|
209
|
+
get message() {
|
|
210
|
+
if (this.state.message != null) {
|
|
211
|
+
return this.state.message;
|
|
212
|
+
}
|
|
213
|
+
else {
|
|
214
|
+
if (this.state.status === LoadingStatus.failed) {
|
|
215
|
+
return this.errorMessage;
|
|
216
|
+
}
|
|
217
|
+
else if (this.state.status === LoadingStatus.inProgress) {
|
|
218
|
+
return this.inProgressMessage;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
return null;
|
|
222
|
+
}
|
|
223
|
+
get showRetryButton() {
|
|
224
|
+
return this.showRetry;
|
|
225
|
+
}
|
|
226
|
+
get inProgress() {
|
|
227
|
+
const inProgress = this.state.status === LoadingStatus.inProgress;
|
|
228
|
+
if (inProgress) {
|
|
229
|
+
this._errorDetailsVisible = false;
|
|
230
|
+
}
|
|
231
|
+
return inProgress;
|
|
232
|
+
}
|
|
233
|
+
get failed() {
|
|
234
|
+
return this.state.status === LoadingStatus.failed;
|
|
235
|
+
}
|
|
236
|
+
get completed() {
|
|
237
|
+
return this.state.status === LoadingStatus.completed;
|
|
238
|
+
}
|
|
239
|
+
get errorDetailsVisible() {
|
|
240
|
+
return this._errorDetailsVisible;
|
|
241
|
+
}
|
|
242
|
+
showErrorDetails() {
|
|
243
|
+
this._errorDetailsVisible = true;
|
|
244
|
+
}
|
|
245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NucLoadedContentComponent, selector: "nuc-loaded-content-component", inputs: { completedTemplate: "completedTemplate", errorTemplate: "errorTemplate", inProgressTemplate: "inProgressTemplate", state: "state", inProgressMessage: "inProgressMessage", errorMessage: "errorMessage", showRetry: "showRetry" }, ngImport: i0, template: "<ng-container *ngIf=\"completed\">\n <ng-container *ngTemplateOutlet=\"completedTemplate\"></ng-container>\n</ng-container>\n\n<div class=\"indicators-container\" *ngIf=\"inProgress || failed\">\n <ng-container *ngIf=\"inProgress\">\n <ng-container\n *ngTemplateOutlet=\"inProgressTemplate ? inProgressTemplate: defaultInProgressTemplate\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"failed\">\n <ng-container\n *ngTemplateOutlet=\"errorTemplate ? errorTemplate: defaultErrorTemplate\"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template #defaultInProgressTemplate>\n <div class=\"spinner\">\n <mat-spinner [diameter]=\"45\"></mat-spinner>\n </div>\n <p>{{message}}</p>\n</ng-template>\n\n<ng-template #defaultErrorTemplate>\n <div>\n <p class=\"message\">\n <span>{{message}}</span>\n <mat-icon\n *ngIf=\"state.errorDetails && !errorDetailsVisible\"\n class=\"info-button\"\n color=\"warn\"\n (click)=\"showErrorDetails()\"\n >info</mat-icon\n >\n </p>\n\n <p *ngIf=\"errorDetailsVisible\" class=\"error-details mat-small\">\n {{state.errorDetails}}\n </p>\n\n <p *ngIf=\"showRetryButton\">\n <button mat-mini-fab color=\"primary\" (click)=\"state.retry()\">\n <mat-icon>refresh</mat-icon>\n </button>\n </p>\n </div>\n</ng-template>\n", styles: [".indicators-container{text-align:center;margin:0 auto;padding-top:4rem}.error-details{margin-top:1rem}.spinner{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.message{display:flex;justify-content:center;align-items:center}.info-button{cursor:pointer;margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
247
|
+
}
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentComponent, decorators: [{
|
|
249
|
+
type: Component,
|
|
250
|
+
args: [{ selector: 'nuc-loaded-content-component', template: "<ng-container *ngIf=\"completed\">\n <ng-container *ngTemplateOutlet=\"completedTemplate\"></ng-container>\n</ng-container>\n\n<div class=\"indicators-container\" *ngIf=\"inProgress || failed\">\n <ng-container *ngIf=\"inProgress\">\n <ng-container\n *ngTemplateOutlet=\"inProgressTemplate ? inProgressTemplate: defaultInProgressTemplate\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"failed\">\n <ng-container\n *ngTemplateOutlet=\"errorTemplate ? errorTemplate: defaultErrorTemplate\"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template #defaultInProgressTemplate>\n <div class=\"spinner\">\n <mat-spinner [diameter]=\"45\"></mat-spinner>\n </div>\n <p>{{message}}</p>\n</ng-template>\n\n<ng-template #defaultErrorTemplate>\n <div>\n <p class=\"message\">\n <span>{{message}}</span>\n <mat-icon\n *ngIf=\"state.errorDetails && !errorDetailsVisible\"\n class=\"info-button\"\n color=\"warn\"\n (click)=\"showErrorDetails()\"\n >info</mat-icon\n >\n </p>\n\n <p *ngIf=\"errorDetailsVisible\" class=\"error-details mat-small\">\n {{state.errorDetails}}\n </p>\n\n <p *ngIf=\"showRetryButton\">\n <button mat-mini-fab color=\"primary\" (click)=\"state.retry()\">\n <mat-icon>refresh</mat-icon>\n </button>\n </p>\n </div>\n</ng-template>\n", styles: [".indicators-container{text-align:center;margin:0 auto;padding-top:4rem}.error-details{margin-top:1rem}.spinner{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.message{display:flex;justify-content:center;align-items:center}.info-button{cursor:pointer;margin-left:.5rem}\n"] }]
|
|
251
|
+
}], propDecorators: { completedTemplate: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], errorTemplate: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], inProgressTemplate: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}], state: [{
|
|
258
|
+
type: Input
|
|
259
|
+
}], inProgressMessage: [{
|
|
260
|
+
type: Input
|
|
261
|
+
}], errorMessage: [{
|
|
262
|
+
type: Input
|
|
263
|
+
}], showRetry: [{
|
|
264
|
+
type: Input
|
|
265
|
+
}] } });
|
|
266
|
+
|
|
267
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
268
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
269
|
+
class NucLoadedContentDirective {
|
|
270
|
+
constructor(_viewContainer, templateRef, _componentResolver) {
|
|
271
|
+
this._viewContainer = _viewContainer;
|
|
272
|
+
this.templateRef = templateRef;
|
|
273
|
+
this._componentResolver = _componentResolver;
|
|
274
|
+
this._errorTemplateRef = null;
|
|
275
|
+
this._inProgressTemplateRef = null;
|
|
276
|
+
this._completedTemplateRef = templateRef;
|
|
277
|
+
}
|
|
278
|
+
set nucLoadedContent(state) {
|
|
279
|
+
// add some error handling if state is null, etc.
|
|
280
|
+
this._state = state;
|
|
281
|
+
this._updateView();
|
|
282
|
+
}
|
|
283
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
284
|
+
set errorTemplate(templateRef) {
|
|
285
|
+
this._errorTemplateRef = templateRef;
|
|
286
|
+
this._updateView();
|
|
287
|
+
}
|
|
288
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
289
|
+
set inProgressTemplate(templateRef) {
|
|
290
|
+
this._inProgressTemplateRef = templateRef;
|
|
291
|
+
this._updateView();
|
|
292
|
+
}
|
|
293
|
+
set inProgressMessage(inProgressMessage) {
|
|
294
|
+
this._component.instance.inProgressMessage = inProgressMessage;
|
|
295
|
+
}
|
|
296
|
+
set errorMessage(errorMessage) {
|
|
297
|
+
this._component.instance.errorMessage = errorMessage;
|
|
298
|
+
}
|
|
299
|
+
set showRetry(showRetry) {
|
|
300
|
+
this._component.instance.showRetry = showRetry;
|
|
301
|
+
}
|
|
302
|
+
_updateView() {
|
|
303
|
+
if (this._component == null) {
|
|
304
|
+
const fac = this._componentResolver.resolveComponentFactory(NucLoadedContentComponent);
|
|
305
|
+
this._component = this._viewContainer.createComponent(fac);
|
|
306
|
+
}
|
|
307
|
+
this._component.instance.state = this._state;
|
|
308
|
+
this._component.instance.completedTemplate = this._completedTemplateRef;
|
|
309
|
+
if (this._inProgressTemplateRef) {
|
|
310
|
+
this._component.instance.inProgressTemplate = this._inProgressTemplateRef;
|
|
311
|
+
}
|
|
312
|
+
if (this._errorTemplateRef) {
|
|
313
|
+
this._component.instance.errorTemplate = this._errorTemplateRef;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
317
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NucLoadedContentDirective, selector: "[nucLoadedContent]", inputs: { nucLoadedContent: "nucLoadedContent", errorTemplate: ["nucLoadedContentError", "errorTemplate"], inProgressTemplate: ["nucLoadedContentInProgress", "inProgressTemplate"], inProgressMessage: ["nucLoadedContentInProgressMessage", "inProgressMessage"], errorMessage: ["nucLoadedContentErrorMessage", "errorMessage"], showRetry: ["nucLoadedContentShowRetry", "showRetry"] }, ngImport: i0 }); }
|
|
318
|
+
}
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentDirective, decorators: [{
|
|
320
|
+
type: Directive,
|
|
321
|
+
args: [{ selector: '[nucLoadedContent]' }]
|
|
322
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { nucLoadedContent: [{
|
|
323
|
+
type: Input
|
|
324
|
+
}], errorTemplate: [{
|
|
325
|
+
type: Input,
|
|
326
|
+
args: ['nucLoadedContentError']
|
|
327
|
+
}], inProgressTemplate: [{
|
|
328
|
+
type: Input,
|
|
329
|
+
args: ['nucLoadedContentInProgress']
|
|
330
|
+
}], inProgressMessage: [{
|
|
331
|
+
type: Input,
|
|
332
|
+
args: ['nucLoadedContentInProgressMessage']
|
|
333
|
+
}], errorMessage: [{
|
|
334
|
+
type: Input,
|
|
335
|
+
args: ['nucLoadedContentErrorMessage']
|
|
336
|
+
}], showRetry: [{
|
|
337
|
+
type: Input,
|
|
338
|
+
args: ['nucLoadedContentShowRetry']
|
|
339
|
+
}] } });
|
|
340
|
+
|
|
341
|
+
class NucLoadedContentModule {
|
|
342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
343
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentModule, declarations: [NucLoadedContentDirective, NucLoadedContentComponent], imports: [CommonModule,
|
|
344
|
+
MatProgressSpinnerModule,
|
|
345
|
+
MatButtonModule,
|
|
346
|
+
MatIconModule], exports: [NucLoadedContentDirective] }); }
|
|
347
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentModule, imports: [CommonModule,
|
|
348
|
+
MatProgressSpinnerModule,
|
|
349
|
+
MatButtonModule,
|
|
350
|
+
MatIconModule] }); }
|
|
351
|
+
}
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucLoadedContentModule, decorators: [{
|
|
353
|
+
type: NgModule,
|
|
354
|
+
args: [{
|
|
355
|
+
declarations: [NucLoadedContentDirective, NucLoadedContentComponent],
|
|
356
|
+
imports: [
|
|
357
|
+
CommonModule,
|
|
358
|
+
MatProgressSpinnerModule,
|
|
359
|
+
MatButtonModule,
|
|
360
|
+
MatIconModule,
|
|
361
|
+
],
|
|
362
|
+
exports: [NucLoadedContentDirective],
|
|
363
|
+
}]
|
|
364
|
+
}] });
|
|
365
|
+
|
|
366
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
367
|
+
class NucSwipeTabsDirective {
|
|
368
|
+
constructor(element, tabGroup) {
|
|
369
|
+
this.element = element;
|
|
370
|
+
this.tabGroup = tabGroup;
|
|
371
|
+
}
|
|
372
|
+
ngOnInit() {
|
|
373
|
+
const hammerJs = new Hammer.Manager(this.element.nativeElement, {
|
|
374
|
+
inputClass: Hammer.TouchInput,
|
|
375
|
+
});
|
|
376
|
+
hammerJs.add(new Hammer.Pan({
|
|
377
|
+
direction: Hammer.DIRECTION_HORIZONTAL,
|
|
378
|
+
threshold: 30,
|
|
379
|
+
}));
|
|
380
|
+
hammerJs.on('panleft panright', (event) => {
|
|
381
|
+
if (event.isFinal) {
|
|
382
|
+
const tabs = this.tabGroup._tabs.map((x) => x.disabled);
|
|
383
|
+
const currentIndex = this.tabGroup.selectedIndex ?? 0;
|
|
384
|
+
let nextIndex = currentIndex;
|
|
385
|
+
if (event.type === 'panright' &&
|
|
386
|
+
event.direction === 4 &&
|
|
387
|
+
currentIndex > 0) {
|
|
388
|
+
// if user pans right, go to the left
|
|
389
|
+
for (let i = currentIndex - 1; i >= 0; i--) {
|
|
390
|
+
if (!tabs[i]) {
|
|
391
|
+
nextIndex = i;
|
|
392
|
+
break;
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
else if (event.type === 'panleft' &&
|
|
397
|
+
event.direction === 2 &&
|
|
398
|
+
currentIndex < this.tabGroup._tabs.length - 1) {
|
|
399
|
+
// if user pans left, go to the right
|
|
400
|
+
for (let i = currentIndex + 1; i < tabs.length; i++) {
|
|
401
|
+
if (!tabs[i]) {
|
|
402
|
+
nextIndex = i;
|
|
403
|
+
break;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
this.tabGroup.selectedIndex = nextIndex;
|
|
408
|
+
}
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
412
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NucSwipeTabsDirective, selector: "[nucSwipe]", ngImport: i0 }); }
|
|
413
|
+
}
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsDirective, decorators: [{
|
|
415
|
+
type: Directive,
|
|
416
|
+
args: [{ selector: '[nucSwipe]' }]
|
|
417
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.MatTabGroup }]; } });
|
|
418
|
+
|
|
419
|
+
class NucSwipeTabsModule {
|
|
420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
421
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsModule, declarations: [NucSwipeTabsDirective], imports: [CommonModule], exports: [NucSwipeTabsDirective] }); }
|
|
422
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsModule, imports: [CommonModule] }); }
|
|
423
|
+
}
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSwipeTabsModule, decorators: [{
|
|
425
|
+
type: NgModule,
|
|
426
|
+
args: [{
|
|
427
|
+
declarations: [NucSwipeTabsDirective],
|
|
428
|
+
imports: [CommonModule],
|
|
429
|
+
exports: [NucSwipeTabsDirective],
|
|
430
|
+
}]
|
|
431
|
+
}] });
|
|
432
|
+
|
|
433
|
+
var NucSnackbarType;
|
|
434
|
+
(function (NucSnackbarType) {
|
|
435
|
+
NucSnackbarType["Info"] = "info";
|
|
436
|
+
NucSnackbarType["Warning"] = "warning";
|
|
437
|
+
NucSnackbarType["Danger"] = "danger";
|
|
438
|
+
NucSnackbarType["Success"] = "success";
|
|
439
|
+
NucSnackbarType["Progress"] = "progress";
|
|
440
|
+
})(NucSnackbarType || (NucSnackbarType = {}));
|
|
441
|
+
|
|
442
|
+
class ProgressSnackbarComponent {
|
|
443
|
+
constructor(
|
|
444
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
445
|
+
data, elem) {
|
|
446
|
+
this.data = data;
|
|
447
|
+
this.elem = elem;
|
|
448
|
+
}
|
|
449
|
+
ngAfterViewInit() {
|
|
450
|
+
const element = this.elem.nativeElement;
|
|
451
|
+
const circle = element.querySelector('circle');
|
|
452
|
+
const message = element.querySelector('.message');
|
|
453
|
+
const color = window.getComputedStyle(message).color;
|
|
454
|
+
circle.style.stroke = color;
|
|
455
|
+
}
|
|
456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressSnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
457
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressSnackbarComponent, selector: "lib-progress-snackbar", host: { classAttribute: "mat-simple-snackbar" }, ngImport: i0, template: "<div class=\"mat-simple-snack-bar-content message\">\n <mat-spinner\n style=\"vertical-align: middle; display: inline-flex; margin-right: 8px\"\n diameter=\"16\"\n strokeWidth=\"1.5\"\n mode=\"indeterminate\"\n class=\"spinner\"\n color=\"red\"\n ></mat-spinner>\n {{ data.message }}\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
458
|
+
}
|
|
459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressSnackbarComponent, decorators: [{
|
|
460
|
+
type: Component,
|
|
461
|
+
args: [{ selector: 'lib-progress-snackbar', encapsulation: ViewEncapsulation.None, host: {
|
|
462
|
+
class: 'mat-simple-snackbar',
|
|
463
|
+
}, template: "<div class=\"mat-simple-snack-bar-content message\">\n <mat-spinner\n style=\"vertical-align: middle; display: inline-flex; margin-right: 8px\"\n diameter=\"16\"\n strokeWidth=\"1.5\"\n mode=\"indeterminate\"\n class=\"spinner\"\n color=\"red\"\n ></mat-spinner>\n {{ data.message }}\n</div>\n" }]
|
|
464
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
465
|
+
type: Inject,
|
|
466
|
+
args: [MAT_SNACK_BAR_DATA]
|
|
467
|
+
}] }, { type: i0.ElementRef }]; } });
|
|
468
|
+
|
|
469
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
470
|
+
class NucSnackbarService {
|
|
471
|
+
constructor(matSnackBar, zone) {
|
|
472
|
+
this.matSnackBar = matSnackBar;
|
|
473
|
+
this.zone = zone;
|
|
474
|
+
}
|
|
475
|
+
openSnackbar(type, message, action, duration) {
|
|
476
|
+
let ref;
|
|
477
|
+
this.zone.run(() => {
|
|
478
|
+
const panelClass = `${type}-snackbar`;
|
|
479
|
+
if (type === NucSnackbarType.Progress) {
|
|
480
|
+
this.matSnackBar.openFromComponent(ProgressSnackbarComponent, {
|
|
481
|
+
duration,
|
|
482
|
+
panelClass,
|
|
483
|
+
data: {
|
|
484
|
+
message,
|
|
485
|
+
},
|
|
486
|
+
});
|
|
487
|
+
}
|
|
488
|
+
else {
|
|
489
|
+
this.matSnackBar.open(message, action, {
|
|
490
|
+
duration,
|
|
491
|
+
panelClass,
|
|
492
|
+
});
|
|
493
|
+
}
|
|
494
|
+
});
|
|
495
|
+
return ref; //TODO: this is not OK, ref might not be available to consumer of the method
|
|
496
|
+
}
|
|
497
|
+
openSnackbarWithConfig(message, action, config) {
|
|
498
|
+
let ref;
|
|
499
|
+
this.zone.run(() => {
|
|
500
|
+
ref = this.matSnackBar.open(message, action, config);
|
|
501
|
+
});
|
|
502
|
+
return ref; //TODO: this is not OK, ref might not be available to consumer of the method
|
|
503
|
+
}
|
|
504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarService, deps: [{ token: i1$3.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
505
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarService, providedIn: 'root' }); }
|
|
506
|
+
}
|
|
507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarService, decorators: [{
|
|
508
|
+
type: Injectable,
|
|
509
|
+
args: [{
|
|
510
|
+
providedIn: 'root',
|
|
511
|
+
}]
|
|
512
|
+
}], ctorParameters: function () { return [{ type: i1$3.MatSnackBar }, { type: i0.NgZone }]; } });
|
|
513
|
+
|
|
514
|
+
class NucSnackbarModule {
|
|
515
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
516
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarModule, declarations: [ProgressSnackbarComponent], imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule] }); }
|
|
517
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarModule, imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule] }); }
|
|
518
|
+
}
|
|
519
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucSnackbarModule, decorators: [{
|
|
520
|
+
type: NgModule,
|
|
521
|
+
args: [{
|
|
522
|
+
declarations: [ProgressSnackbarComponent],
|
|
523
|
+
imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule],
|
|
524
|
+
exports: [],
|
|
525
|
+
}]
|
|
526
|
+
}] });
|
|
527
|
+
|
|
528
|
+
class NucUserAvatarComponent {
|
|
529
|
+
constructor() {
|
|
530
|
+
this.size = 'medium';
|
|
531
|
+
this.background = false;
|
|
532
|
+
}
|
|
533
|
+
getUserInitials() {
|
|
534
|
+
const nameParts = this.name.split(' ');
|
|
535
|
+
return (nameParts[0].charAt(0).toUpperCase() +
|
|
536
|
+
'' +
|
|
537
|
+
nameParts[nameParts.length - 1].charAt(0).toUpperCase());
|
|
538
|
+
}
|
|
539
|
+
getHslString() {
|
|
540
|
+
if (!this.background) {
|
|
541
|
+
return `hsl(${0},${0}%,${100}%)`;
|
|
542
|
+
}
|
|
543
|
+
let hash = 0;
|
|
544
|
+
for (let i = 0; i < this.name.length; i++) {
|
|
545
|
+
/*
|
|
546
|
+
* Javascript uses double precision floating-point format for all numerical datatypes.
|
|
547
|
+
* Except when using bitwise operations, where operators are converted to 32-bit signed integers.
|
|
548
|
+
* Result of bitwise operations are then converted back to double precision floating-point format.
|
|
549
|
+
*
|
|
550
|
+
* We make a bitwise OR operation between the new hash and 0.
|
|
551
|
+
* This keeps only the lower 32 bits in the new hash value.
|
|
552
|
+
*/
|
|
553
|
+
// eslint-disable-next-line no-bitwise
|
|
554
|
+
hash = (this.name.charCodeAt(i) + ((hash << 15) - hash)) | 0;
|
|
555
|
+
}
|
|
556
|
+
const hue = Math.abs(hash % 360);
|
|
557
|
+
const lightness = 49.2;
|
|
558
|
+
const saturation = 42.6;
|
|
559
|
+
return `hsl(${hue},${saturation}%,${lightness}%)`;
|
|
560
|
+
}
|
|
561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NucUserAvatarComponent, selector: "nuc-user-avatar", inputs: { name: "name", image: "image", size: "size", background: "background" }, ngImport: i0, template: "<ng-container *ngIf=\"image\">\n <div class=\"user-avatar size-{{size}}\">\n <img src=\"{{image}}\" />\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!image\">\n <div\n class=\"user-avatar size-{{size}} unselectable\"\n [style.background-color]=\"getHslString()\"\n [ngClass]=\"{'white-text': background, 'black-text border': !background}\"\n >\n {{getUserInitials()}}\n </div>\n</ng-container>\n", styles: [".user-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;text-align:center;font-weight:400}.user-avatar img{object-fit:contain;width:inherit;height:inherit;border-radius:50%}.white-text{color:#fff}.black-text{color:#333}.unselectable{-webkit-user-select:none;user-select:none}.border{border:2px solid #333333}.user-avatar.size-small{height:24px;width:24px;font-size:.8em;line-height:24px}.user-avatar.size-medium{height:40px;width:40px;font-size:1.2em;line-height:40px}.user-avatar.size-large{height:64px;width:64px;font-size:2em;line-height:64px}.user-avatar.size-xlarge{height:90px;width:90px;font-size:3em;line-height:90px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
563
|
+
}
|
|
564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarComponent, decorators: [{
|
|
565
|
+
type: Component,
|
|
566
|
+
args: [{ selector: 'nuc-user-avatar', template: "<ng-container *ngIf=\"image\">\n <div class=\"user-avatar size-{{size}}\">\n <img src=\"{{image}}\" />\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!image\">\n <div\n class=\"user-avatar size-{{size}} unselectable\"\n [style.background-color]=\"getHslString()\"\n [ngClass]=\"{'white-text': background, 'black-text border': !background}\"\n >\n {{getUserInitials()}}\n </div>\n</ng-container>\n", styles: [".user-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;text-align:center;font-weight:400}.user-avatar img{object-fit:contain;width:inherit;height:inherit;border-radius:50%}.white-text{color:#fff}.black-text{color:#333}.unselectable{-webkit-user-select:none;user-select:none}.border{border:2px solid #333333}.user-avatar.size-small{height:24px;width:24px;font-size:.8em;line-height:24px}.user-avatar.size-medium{height:40px;width:40px;font-size:1.2em;line-height:40px}.user-avatar.size-large{height:64px;width:64px;font-size:2em;line-height:64px}.user-avatar.size-xlarge{height:90px;width:90px;font-size:3em;line-height:90px}\n"] }]
|
|
567
|
+
}], propDecorators: { name: [{
|
|
568
|
+
type: Input
|
|
569
|
+
}], image: [{
|
|
570
|
+
type: Input
|
|
571
|
+
}], size: [{
|
|
572
|
+
type: Input
|
|
573
|
+
}], background: [{
|
|
574
|
+
type: Input
|
|
575
|
+
}] } });
|
|
576
|
+
|
|
577
|
+
class NucUserAvatarModule {
|
|
578
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
579
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarModule, declarations: [NucUserAvatarComponent], imports: [CommonModule], exports: [NucUserAvatarComponent] }); }
|
|
580
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarModule, imports: [CommonModule] }); }
|
|
581
|
+
}
|
|
582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NucUserAvatarModule, decorators: [{
|
|
583
|
+
type: NgModule,
|
|
584
|
+
args: [{
|
|
585
|
+
declarations: [NucUserAvatarComponent],
|
|
586
|
+
imports: [CommonModule],
|
|
587
|
+
exports: [NucUserAvatarComponent],
|
|
588
|
+
}]
|
|
589
|
+
}] });
|
|
590
|
+
|
|
591
|
+
// dialog
|
|
592
|
+
|
|
593
|
+
/**
|
|
594
|
+
* Generated bundle index. Do not edit.
|
|
595
|
+
*/
|
|
596
|
+
|
|
597
|
+
export { LoadingState, LoadingStatus, NucColor, NucDialogModule, NucDialogService, NucLoadedContentComponent, NucLoadedContentDirective, NucLoadedContentModule, NucSnackbarModule, NucSnackbarService, NucSnackbarType, NucSwipeTabsDirective, NucSwipeTabsModule, NucUserAvatarComponent, NucUserAvatarModule };
|
|
598
|
+
//# sourceMappingURL=kolektor-nucleus-material.mjs.map
|