@wizco/fenixds-ngx 17.0.20 → 17.1.0
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/esm2022/lib/smart-select/smart-select.component.mjs +3 -3
- package/esm2022/lib/timeline/timeline.component.mjs +2 -2
- package/esm2022/lib/upload/upload.component.mjs +90 -84
- package/esm2022/lib/user-avatar/user-avatar.component.mjs +3 -3
- package/fesm2022/wizco-fenixds-ngx.mjs +93 -87
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/upload/upload.component.d.ts +67 -67
- package/lib/upload/upload.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -146,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
146
146
|
class UploadComponent {
|
|
147
147
|
http;
|
|
148
148
|
/* Texto de descrição do arquivo */
|
|
149
|
-
description =
|
|
149
|
+
description = '(XX MB de tamanho máximo e é permitido qualquer tipo de arquivos)';
|
|
150
150
|
/* config <AngularFileUploaderConfig> configuração do componente principais parâmetros */
|
|
151
151
|
config = {
|
|
152
152
|
uploadAPI: {
|
|
@@ -157,127 +157,127 @@ class UploadComponent {
|
|
|
157
157
|
},
|
|
158
158
|
responseType: 'json',
|
|
159
159
|
withCredentials: false,
|
|
160
|
-
}
|
|
160
|
+
},
|
|
161
161
|
};
|
|
162
162
|
/*
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
* Opção de resetar o componente
|
|
164
|
+
*/
|
|
165
165
|
resetUpload = false;
|
|
166
166
|
/*
|
|
167
|
-
|
|
168
|
-
|
|
167
|
+
* Evento Resposta da requisição sendo sucesso ou erro
|
|
168
|
+
*/
|
|
169
169
|
ApiResponse = new EventEmitter();
|
|
170
170
|
/*
|
|
171
|
-
|
|
172
|
-
|
|
171
|
+
* Evento javascript puro para retorno do arquivo
|
|
172
|
+
*/
|
|
173
173
|
fileSelected = new EventEmitter();
|
|
174
174
|
/**
|
|
175
|
-
|
|
176
|
-
|
|
175
|
+
* @ignore
|
|
176
|
+
*/
|
|
177
177
|
theme = '';
|
|
178
178
|
/**
|
|
179
|
-
|
|
180
|
-
|
|
179
|
+
* @ignore
|
|
180
|
+
*/
|
|
181
181
|
id = 0;
|
|
182
182
|
/**
|
|
183
|
-
|
|
184
|
-
|
|
183
|
+
* @ignore
|
|
184
|
+
*/
|
|
185
185
|
hideProgressBar = false;
|
|
186
186
|
/**
|
|
187
|
-
|
|
188
|
-
|
|
187
|
+
* @ignore
|
|
188
|
+
*/
|
|
189
189
|
maxSize = 20 * 1024000; // mb to bytes.
|
|
190
190
|
/**
|
|
191
|
-
|
|
192
|
-
|
|
191
|
+
* @ignore
|
|
192
|
+
*/
|
|
193
193
|
uploadAPI = '';
|
|
194
194
|
/**
|
|
195
|
-
|
|
196
|
-
|
|
195
|
+
* @ignore
|
|
196
|
+
*/
|
|
197
197
|
method = 'POST';
|
|
198
198
|
/**
|
|
199
|
-
|
|
200
|
-
|
|
199
|
+
* @ignore
|
|
200
|
+
*/
|
|
201
201
|
formatsAllowed = '*';
|
|
202
202
|
/**
|
|
203
|
-
|
|
204
|
-
|
|
203
|
+
* @ignore
|
|
204
|
+
*/
|
|
205
205
|
formatsAllowedText = '';
|
|
206
206
|
/**
|
|
207
|
-
|
|
208
|
-
|
|
207
|
+
* @ignore
|
|
208
|
+
*/
|
|
209
209
|
multiple = false;
|
|
210
210
|
/**
|
|
211
|
-
|
|
212
|
-
|
|
211
|
+
* @ignore
|
|
212
|
+
*/
|
|
213
213
|
headers = {};
|
|
214
214
|
/**
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
* @ignore
|
|
216
|
+
*/
|
|
217
217
|
params = {};
|
|
218
218
|
/**
|
|
219
|
-
|
|
220
|
-
|
|
219
|
+
* @ignore
|
|
220
|
+
*/
|
|
221
221
|
responseType = 'blob';
|
|
222
222
|
/**
|
|
223
|
-
|
|
224
|
-
|
|
223
|
+
* @ignore
|
|
224
|
+
*/
|
|
225
225
|
hideResetBtn = false;
|
|
226
226
|
/**
|
|
227
|
-
|
|
228
|
-
|
|
227
|
+
* @ignore
|
|
228
|
+
*/
|
|
229
229
|
hideSelectBtn = false;
|
|
230
230
|
/**
|
|
231
|
-
|
|
232
|
-
|
|
231
|
+
* @ignore
|
|
232
|
+
*/
|
|
233
233
|
allowedFiles = [];
|
|
234
234
|
/**
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
* @ignore
|
|
236
|
+
*/
|
|
237
237
|
notAllowedFiles = [];
|
|
238
238
|
/**
|
|
239
|
-
|
|
240
|
-
|
|
239
|
+
* @ignore
|
|
240
|
+
*/
|
|
241
241
|
Caption = [];
|
|
242
242
|
/**
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
* @ignore
|
|
244
|
+
*/
|
|
245
245
|
isAllowedFileSingle = true;
|
|
246
246
|
/**
|
|
247
|
-
|
|
248
|
-
|
|
247
|
+
* @ignore
|
|
248
|
+
*/
|
|
249
249
|
progressBarShow = false;
|
|
250
250
|
/**
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
* @ignore
|
|
252
|
+
*/
|
|
253
253
|
enableUploadBtn = false;
|
|
254
254
|
/**
|
|
255
|
-
|
|
256
|
-
|
|
255
|
+
* @ignore
|
|
256
|
+
*/
|
|
257
257
|
uploadMsg = false;
|
|
258
258
|
/**
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
* @ignore
|
|
260
|
+
*/
|
|
261
261
|
afterUpload = false;
|
|
262
262
|
/**
|
|
263
|
-
|
|
264
|
-
|
|
263
|
+
* @ignore
|
|
264
|
+
*/
|
|
265
265
|
uploadStarted = false;
|
|
266
266
|
/**
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
uploadMsgText =
|
|
267
|
+
* @ignore
|
|
268
|
+
*/
|
|
269
|
+
uploadMsgText = '';
|
|
270
270
|
/**
|
|
271
|
-
|
|
272
|
-
|
|
271
|
+
* @ignore
|
|
272
|
+
*/
|
|
273
273
|
uploadMsgClass = 'text-success';
|
|
274
274
|
/**
|
|
275
|
-
|
|
276
|
-
|
|
275
|
+
* @ignore
|
|
276
|
+
*/
|
|
277
277
|
uploadPercent = 0;
|
|
278
278
|
/**
|
|
279
|
-
|
|
280
|
-
|
|
279
|
+
* @ignore
|
|
280
|
+
*/
|
|
281
281
|
replaceTexts = {
|
|
282
282
|
selectFileBtn: 'Selecionar Arquivo',
|
|
283
283
|
resetBtn: 'Resetar',
|
|
@@ -289,31 +289,31 @@ class UploadComponent {
|
|
|
289
289
|
sizeLimit: 'Tamanho máximo',
|
|
290
290
|
};
|
|
291
291
|
/**
|
|
292
|
-
|
|
293
|
-
|
|
292
|
+
* @ignore
|
|
293
|
+
*/
|
|
294
294
|
currentUploads = [];
|
|
295
295
|
/**
|
|
296
|
-
|
|
297
|
-
|
|
296
|
+
* @ignore
|
|
297
|
+
*/
|
|
298
298
|
fileNameIndex = true;
|
|
299
299
|
/**
|
|
300
|
-
|
|
301
|
-
|
|
300
|
+
* @ignore
|
|
301
|
+
*/
|
|
302
302
|
withCredentials = false;
|
|
303
303
|
/**
|
|
304
|
-
|
|
305
|
-
|
|
304
|
+
* @ignore
|
|
305
|
+
*/
|
|
306
306
|
autoUpload = true;
|
|
307
307
|
/**
|
|
308
|
-
|
|
309
|
-
|
|
308
|
+
* @ignore
|
|
309
|
+
*/
|
|
310
310
|
idDate = +new Date();
|
|
311
311
|
constructor(http) {
|
|
312
312
|
this.http = http;
|
|
313
313
|
}
|
|
314
314
|
/**
|
|
315
|
-
|
|
316
|
-
|
|
315
|
+
* @ignore
|
|
316
|
+
*/
|
|
317
317
|
ngOnChanges(changes) {
|
|
318
318
|
// Track changes in Configuration and see if user has even provided Configuration.
|
|
319
319
|
if (changes.config && this.config) {
|
|
@@ -337,7 +337,8 @@ class UploadComponent {
|
|
|
337
337
|
this.responseType = this.config.uploadAPI.responseType || 'json';
|
|
338
338
|
this.withCredentials = this.config.uploadAPI.withCredentials || false;
|
|
339
339
|
}
|
|
340
|
-
this.formatsAllowedText =
|
|
340
|
+
this.formatsAllowedText =
|
|
341
|
+
this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
|
|
341
342
|
this.fileNameIndex = this.config.fileNameIndex === false ? false : true;
|
|
342
343
|
this.autoUpload = this.config.autoUpload || false;
|
|
343
344
|
if (this.config.replaceTexts) {
|
|
@@ -383,7 +384,9 @@ class UploadComponent {
|
|
|
383
384
|
// tslint:disable-next-line: for-of
|
|
384
385
|
for (let i = 0; i < fileList.length; i++) {
|
|
385
386
|
const _currentFileExt = fileExtRegExp.exec(fileList[i].name);
|
|
386
|
-
const currentFileExt = typeof _currentFileExt[1] === 'string'
|
|
387
|
+
const currentFileExt = typeof _currentFileExt[1] === 'string'
|
|
388
|
+
? _currentFileExt[1].toLowerCase()
|
|
389
|
+
: '';
|
|
387
390
|
const isFormatValid = this.formatsAllowed.includes('*')
|
|
388
391
|
? true
|
|
389
392
|
: this.formatsAllowed.includes(currentFileExt);
|
|
@@ -453,7 +456,9 @@ class UploadComponent {
|
|
|
453
456
|
this.uploadMsg = true;
|
|
454
457
|
this.afterUpload = true;
|
|
455
458
|
if (!isError) {
|
|
456
|
-
this.uploadMsgText =
|
|
459
|
+
this.uploadMsgText =
|
|
460
|
+
this.replaceTexts.afterUploadMsg_success ||
|
|
461
|
+
'Successfully Uploaded !';
|
|
457
462
|
this.uploadMsgClass = 'text-success lead';
|
|
458
463
|
}
|
|
459
464
|
}
|
|
@@ -479,7 +484,8 @@ class UploadComponent {
|
|
|
479
484
|
this.enableUploadBtn = false;
|
|
480
485
|
this.uploadMsg = true;
|
|
481
486
|
this.afterUpload = true;
|
|
482
|
-
this.uploadMsgText =
|
|
487
|
+
this.uploadMsgText =
|
|
488
|
+
this.replaceTexts.afterUploadMsg_error || 'Error in uploading files';
|
|
483
489
|
this.uploadMsgClass = 'text-danger lead';
|
|
484
490
|
}
|
|
485
491
|
removeFile(i, sf_na) {
|
|
@@ -516,11 +522,11 @@ class UploadComponent {
|
|
|
516
522
|
event.dataTransfer.dropEffect = 'copy';
|
|
517
523
|
}
|
|
518
524
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1$1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
519
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-
|
|
525
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <div class=\"wco-form-upload__info\">\n <span>Arraste-os aqui ou</span>\n <span>\n <span class=\"material-icons\">cloud_upload</span>\n <span>{{replaceTexts.selectFileBtn}}</span>\n </span>\n </div>\n <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n <ng-container *ngIf=\"allowedFiles.length\">\n <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n </span>\n </ng-container>\n <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: HttpClientModule }] });
|
|
520
526
|
}
|
|
521
527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
|
|
522
528
|
type: Component,
|
|
523
|
-
args: [{ selector:
|
|
529
|
+
args: [{ selector: 'wco-file-upload', standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <div class=\"wco-form-upload__info\">\n <span>Arraste-os aqui ou</span>\n <span>\n <span class=\"material-icons\">cloud_upload</span>\n <span>{{replaceTexts.selectFileBtn}}</span>\n </span>\n </div>\n <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n <ng-container *ngIf=\"allowedFiles.length\">\n <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n </span>\n </ng-container>\n <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>" }]
|
|
524
530
|
}], ctorParameters: function () { return [{ type: i1$1.HttpClient, decorators: [{
|
|
525
531
|
type: SkipSelf
|
|
526
532
|
}] }]; }, propDecorators: { description: [{
|
|
@@ -908,11 +914,11 @@ class UserAvatarComponent {
|
|
|
908
914
|
this.userNameLetters = capitalizeLetters.toUpperCase();
|
|
909
915
|
}
|
|
910
916
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserAvatarComponent, isStandalone: true, selector: "wco-avatar", inputs: { userName: ["name", "userName"], userAvatar: ["image", "userAvatar"], size: "size", theme: "theme", solid: "solid" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar
|
|
917
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserAvatarComponent, isStandalone: true, selector: "wco-avatar", inputs: { userName: ["name", "userName"], userAvatar: ["image", "userAvatar"], size: "size", theme: "theme", solid: "solid" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
912
918
|
}
|
|
913
919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAvatarComponent, decorators: [{
|
|
914
920
|
type: Component,
|
|
915
|
-
args: [{ selector: 'wco-avatar', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar
|
|
921
|
+
args: [{ selector: 'wco-avatar', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"] }]
|
|
916
922
|
}], ctorParameters: function () { return []; }, propDecorators: { userName: [{
|
|
917
923
|
type: Input,
|
|
918
924
|
args: ['name']
|
|
@@ -1288,7 +1294,7 @@ class SmartSelectComponent {
|
|
|
1288
1294
|
useExisting: SmartSelectComponent,
|
|
1289
1295
|
multi: true,
|
|
1290
1296
|
},
|
|
1291
|
-
], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1297
|
+
], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [":host{width:100%}.wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1292
1298
|
}
|
|
1293
1299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, decorators: [{
|
|
1294
1300
|
type: Component,
|
|
@@ -1303,7 +1309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1303
1309
|
useExisting: SmartSelectComponent,
|
|
1304
1310
|
multi: true,
|
|
1305
1311
|
},
|
|
1306
|
-
], template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
|
|
1312
|
+
], template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [":host{width:100%}.wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
|
|
1307
1313
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
1308
1314
|
type: ContentChildren,
|
|
1309
1315
|
args: [SmartSelectOptionComponent]
|
|
@@ -1340,11 +1346,11 @@ class TimelineComponent {
|
|
|
1340
1346
|
error: 'priority_high'
|
|
1341
1347
|
};
|
|
1342
1348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1343
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-
|
|
1349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1344
1350
|
}
|
|
1345
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
1346
1352
|
type: Component,
|
|
1347
|
-
args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-
|
|
1353
|
+
args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"] }]
|
|
1348
1354
|
}], propDecorators: { timelineItems: [{
|
|
1349
1355
|
type: Input
|
|
1350
1356
|
}] } });
|