lightning-tec-br-angular-components 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, input, inject, Component, PLATFORM_ID, Inject
|
|
2
|
+
import { Injectable, input, inject, ViewChild, Component, PLATFORM_ID, Inject } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
4
|
+
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
3
5
|
import * as i1 from '@angular/forms';
|
|
4
6
|
import { FormsModule } from '@angular/forms';
|
|
5
7
|
import { Subject, takeUntil } from 'rxjs';
|
|
6
|
-
import * as i1$1 from '@angular/common';
|
|
7
|
-
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
8
8
|
import * as i3 from 'ngx-mask';
|
|
9
9
|
import * as i2 from '@angular/material/tooltip';
|
|
10
10
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -77,26 +77,6 @@ class FormFieldConfigModel {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
var AlertTypesEnum;
|
|
81
|
-
(function (AlertTypesEnum) {
|
|
82
|
-
AlertTypesEnum[AlertTypesEnum["Done"] = 0] = "Done";
|
|
83
|
-
AlertTypesEnum[AlertTypesEnum["Alert"] = 1] = "Alert";
|
|
84
|
-
AlertTypesEnum[AlertTypesEnum["NotDone"] = 2] = "NotDone";
|
|
85
|
-
})(AlertTypesEnum || (AlertTypesEnum = {}));
|
|
86
|
-
|
|
87
|
-
class AlertService {
|
|
88
|
-
constructor() {
|
|
89
|
-
this.wasOpenned = new Subject();
|
|
90
|
-
this.wasClosed = new Subject();
|
|
91
|
-
}
|
|
92
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
93
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, providedIn: 'root' }); }
|
|
94
|
-
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, decorators: [{
|
|
96
|
-
type: Injectable,
|
|
97
|
-
args: [{ providedIn: 'root' }]
|
|
98
|
-
}] });
|
|
99
|
-
|
|
100
80
|
var IconsEnum;
|
|
101
81
|
(function (IconsEnum) {
|
|
102
82
|
IconsEnum["Add"] = "fi fi-br-plus";
|
|
@@ -171,12 +151,28 @@ var IconsEnum;
|
|
|
171
151
|
IconsEnum["Wallet"] = "fi fi-rr-wallet";
|
|
172
152
|
})(IconsEnum || (IconsEnum = {}));
|
|
173
153
|
|
|
154
|
+
var AlertTypesEnum;
|
|
155
|
+
(function (AlertTypesEnum) {
|
|
156
|
+
AlertTypesEnum[AlertTypesEnum["Done"] = 0] = "Done";
|
|
157
|
+
AlertTypesEnum[AlertTypesEnum["Alert"] = 1] = "Alert";
|
|
158
|
+
AlertTypesEnum[AlertTypesEnum["NotDone"] = 2] = "NotDone";
|
|
159
|
+
})(AlertTypesEnum || (AlertTypesEnum = {}));
|
|
160
|
+
|
|
161
|
+
class AlertService {
|
|
162
|
+
constructor() {
|
|
163
|
+
this.wasOpenned = new Subject();
|
|
164
|
+
this.wasClosed = new Subject();
|
|
165
|
+
}
|
|
166
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
167
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, providedIn: 'root' }); }
|
|
168
|
+
}
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, decorators: [{
|
|
170
|
+
type: Injectable,
|
|
171
|
+
args: [{ providedIn: 'root' }]
|
|
172
|
+
}] });
|
|
173
|
+
|
|
174
174
|
class FormFieldComponent {
|
|
175
|
-
|
|
176
|
-
;
|
|
177
|
-
constructor(element, cd) {
|
|
178
|
-
this.element = element;
|
|
179
|
-
this.cd = cd;
|
|
175
|
+
constructor() {
|
|
180
176
|
this.Name = input.required();
|
|
181
177
|
this.cypressTestId = input();
|
|
182
178
|
this._placeHolderType = '';
|
|
@@ -202,20 +198,23 @@ class FormFieldComponent {
|
|
|
202
198
|
this.text = '';
|
|
203
199
|
this._AlertState = false;
|
|
204
200
|
this.Value = '';
|
|
205
|
-
//
|
|
206
|
-
this.
|
|
201
|
+
// Controle para impedir emissão quando a mudança vier de atualização interna
|
|
202
|
+
this.updatingInternally = false;
|
|
203
|
+
this.destroy$ = new Subject();
|
|
204
|
+
// ngxMask
|
|
205
|
+
this.Mask = '';
|
|
207
206
|
this.NumberMaskPrefix = '';
|
|
208
|
-
this.Sufixo =
|
|
207
|
+
this.Sufixo = '';
|
|
209
208
|
this.NumberMaskSufix = '';
|
|
210
209
|
this.showMaskTyped = false;
|
|
211
|
-
this.thousandSeparator =
|
|
210
|
+
this.thousandSeparator = '.';
|
|
212
211
|
this.NCasasDecimais = 0;
|
|
213
212
|
this.AlertTypesEnum = AlertTypesEnum;
|
|
214
213
|
this.IconsEnum = IconsEnum;
|
|
215
214
|
this.FormFieldTxtInputTypesEnum = FormFieldTxtInputTypesEnum;
|
|
216
215
|
this.FormFieldDataFormat = FormFieldCountryDataFormat;
|
|
217
216
|
this.FormFieldTypes = FormFieldTypes;
|
|
218
|
-
//Services
|
|
217
|
+
// Services
|
|
219
218
|
this.FormFieldService = inject(FormFieldService);
|
|
220
219
|
this.AlertService = inject(AlertService);
|
|
221
220
|
}
|
|
@@ -224,68 +223,133 @@ class FormFieldComponent {
|
|
|
224
223
|
this.startListenToStateChanged();
|
|
225
224
|
this.startListenToComboboxOpen();
|
|
226
225
|
}
|
|
226
|
+
ngOnDestroy() {
|
|
227
|
+
this.destroy$.next();
|
|
228
|
+
this.destroy$.complete();
|
|
229
|
+
}
|
|
230
|
+
// =========================================================
|
|
231
|
+
// CONTROLE DE VALOR
|
|
232
|
+
// =========================================================
|
|
233
|
+
/**
|
|
234
|
+
* Sincroniza apenas o valor local do componente.
|
|
235
|
+
* Não emite valueChanged.
|
|
236
|
+
* É chamado por ngModelChange no HTML.
|
|
237
|
+
*/
|
|
238
|
+
onModelChanged(value) {
|
|
239
|
+
this.Value = value;
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Emite somente quando houve interação real do usuário.
|
|
243
|
+
* É chamado pelo evento nativo (input) no HTML.
|
|
244
|
+
*/
|
|
245
|
+
onUserInput(event) {
|
|
246
|
+
if (this.updatingInternally)
|
|
247
|
+
return;
|
|
248
|
+
if (!event.isTrusted)
|
|
249
|
+
return;
|
|
250
|
+
this.emitValueChanged();
|
|
251
|
+
}
|
|
252
|
+
/**
|
|
253
|
+
* Mantido por compatibilidade com chamadas antigas.
|
|
254
|
+
* Use apenas quando quiser emitir explicitamente.
|
|
255
|
+
*/
|
|
227
256
|
onValueChanged() {
|
|
257
|
+
if (this.updatingInternally)
|
|
258
|
+
return;
|
|
259
|
+
this.emitValueChanged();
|
|
260
|
+
}
|
|
261
|
+
emitValueChanged() {
|
|
228
262
|
this.FormFieldService.valueChanged.next(new FormFieldConfigModel({
|
|
229
263
|
Name: this.Name(),
|
|
230
264
|
Value: this.Value,
|
|
231
|
-
ValueId: this.FieldType
|
|
265
|
+
ValueId: this.FieldType === FormFieldTypes.ComboBox
|
|
266
|
+
? this.getIDFromOption(this.Value ?? '')
|
|
267
|
+
: 0,
|
|
232
268
|
ignoreThisProp: true
|
|
233
269
|
}));
|
|
234
270
|
}
|
|
271
|
+
setValueSilently(value) {
|
|
272
|
+
this.Value = value ?? '';
|
|
273
|
+
}
|
|
235
274
|
startListenToExternalValueChanged() {
|
|
236
|
-
this.FormFieldService.valueChanged
|
|
237
|
-
|
|
238
|
-
|
|
275
|
+
this.FormFieldService.valueChanged
|
|
276
|
+
.pipe(takeUntil(this.destroy$))
|
|
277
|
+
.subscribe((model) => {
|
|
278
|
+
if (model.Name === this.Name() && !model.ignoreThisProp) {
|
|
279
|
+
this.updatingInternally = true;
|
|
280
|
+
this.setValueSilently(model.Value);
|
|
281
|
+
setTimeout(() => {
|
|
282
|
+
this.updatingInternally = false;
|
|
283
|
+
}, 0);
|
|
239
284
|
}
|
|
240
285
|
});
|
|
241
286
|
}
|
|
242
287
|
startListenToStateChanged() {
|
|
243
|
-
this.FormFieldService.stateChanged
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
this.
|
|
254
|
-
this.
|
|
255
|
-
this._IconColor = model.IconColor ?? this._IconColor;
|
|
256
|
-
this._FontSize = model.FontSize ?? this._FontSize;
|
|
257
|
-
this._FontColor = model.FontColor ?? this._FontColor;
|
|
258
|
-
this._FontWeight = model.FontWeight ?? this._FontWeight;
|
|
259
|
-
this._FontFamily = model.FontFamily ?? this._FontFamily;
|
|
260
|
-
this.TxtInputType = model.TxtInputType ?? this.TxtInputType;
|
|
261
|
-
this._placeHolderValue = model.PlaceHolderValue ?? this._placeHolderValue;
|
|
262
|
-
this.NumberMaskPrefix = model.NumberMaskPrefix ?? this.NumberMaskPrefix;
|
|
263
|
-
this.NumberMaskSufix = model.NumberMaskSufix ?? this.NumberMaskSufix;
|
|
264
|
-
this.NCasasDecimais = model.NCasasDecimais ?? this.NCasasDecimais;
|
|
265
|
-
this.CountryDataFormat = model.CountryDataFormat ?? this.CountryDataFormat;
|
|
266
|
-
this._Border = model.Border ?? this._Border;
|
|
267
|
-
this._BorderRadius = model.BorderRadius ?? this._BorderRadius;
|
|
268
|
-
this._BoxShadowsEnabled = model.BoxShadowsEnabled ?? this._BoxShadowsEnabled;
|
|
269
|
-
if (this.FieldType == FormFieldTypes.TxtBox)
|
|
270
|
-
this.configMask();
|
|
271
|
-
let elemento = document.getElementById('header33319987');
|
|
272
|
-
if (elemento != null) {
|
|
273
|
-
this._HeaderTopPosition = elemento.getBoundingClientRect().top;
|
|
274
|
-
this._HeaderLeftPosition = elemento.getBoundingClientRect().left;
|
|
275
|
-
}
|
|
288
|
+
this.FormFieldService.stateChanged
|
|
289
|
+
.pipe(takeUntil(this.destroy$))
|
|
290
|
+
.subscribe((model) => {
|
|
291
|
+
if (model.Name !== this.Name())
|
|
292
|
+
return;
|
|
293
|
+
this.updatingInternally = true;
|
|
294
|
+
this._Width = model.Width ?? this._Width;
|
|
295
|
+
this._Height = model.Height ?? this._Height;
|
|
296
|
+
this.FieldType = model.FieldType ?? this.FieldType;
|
|
297
|
+
if (model.ComboValues != null && model.ComboIds != null) {
|
|
298
|
+
this._Options = this.buildOptions(model.ComboValues, model.ComboIds);
|
|
299
|
+
this._OptionsFiltered = this._Options;
|
|
276
300
|
}
|
|
301
|
+
this.IconEnabled = model.IconEnabled ?? this.IconEnabled;
|
|
302
|
+
this._Icon = model.Icon ?? this._Icon;
|
|
303
|
+
this._IconColor = model.IconColor ?? this._IconColor;
|
|
304
|
+
this._FontSize = model.FontSize ?? this._FontSize;
|
|
305
|
+
this._FontColor = model.FontColor ?? this._FontColor;
|
|
306
|
+
this._FontWeight = model.FontWeight ?? this._FontWeight;
|
|
307
|
+
this._FontFamily = model.FontFamily ?? this._FontFamily;
|
|
308
|
+
this.TxtInputType = model.TxtInputType ?? this.TxtInputType;
|
|
309
|
+
this._placeHolderValue = model.PlaceHolderValue ?? this._placeHolderValue;
|
|
310
|
+
this.NumberMaskPrefix = model.NumberMaskPrefix ?? this.NumberMaskPrefix;
|
|
311
|
+
this.NumberMaskSufix = model.NumberMaskSufix ?? this.NumberMaskSufix;
|
|
312
|
+
this.NCasasDecimais = model.NCasasDecimais ?? this.NCasasDecimais;
|
|
313
|
+
this.CountryDataFormat = model.CountryDataFormat ?? this.CountryDataFormat;
|
|
314
|
+
this._Border = model.Border ?? this._Border;
|
|
315
|
+
this._BorderRadius = model.BorderRadius ?? this._BorderRadius;
|
|
316
|
+
this._BoxShadowsEnabled = model.BoxShadowsEnabled ?? this._BoxShadowsEnabled;
|
|
317
|
+
if (this.FieldType === FormFieldTypes.TxtBox) {
|
|
318
|
+
this.configMask();
|
|
319
|
+
}
|
|
320
|
+
if (model.Value !== undefined) {
|
|
321
|
+
this.setValueSilently(model.Value);
|
|
322
|
+
}
|
|
323
|
+
setTimeout(() => {
|
|
324
|
+
this.updatingInternally = false;
|
|
325
|
+
}, 0);
|
|
326
|
+
requestAnimationFrame(() => {
|
|
327
|
+
this.updateHeaderPosition();
|
|
328
|
+
});
|
|
277
329
|
});
|
|
278
330
|
}
|
|
279
331
|
startListenToComboboxOpen() {
|
|
280
332
|
this.FormFieldService.comboboxIsOpen
|
|
333
|
+
.pipe(takeUntil(this.destroy$))
|
|
281
334
|
.subscribe((model) => {
|
|
282
|
-
if (model.Name
|
|
335
|
+
if (model.Name === this.Name()) {
|
|
283
336
|
this.dropdownIsOpen = model.IsOpen ?? false;
|
|
284
337
|
}
|
|
285
338
|
});
|
|
286
339
|
}
|
|
340
|
+
updateHeaderPosition() {
|
|
341
|
+
const elemento = this.comboHeader?.nativeElement;
|
|
342
|
+
if (!elemento)
|
|
343
|
+
return;
|
|
344
|
+
const rect = elemento.getBoundingClientRect();
|
|
345
|
+
this._HeaderTopPosition = rect.top;
|
|
346
|
+
this._HeaderLeftPosition = rect.left;
|
|
347
|
+
}
|
|
348
|
+
// =========================================================
|
|
349
|
+
// AUXILIARES
|
|
350
|
+
// =========================================================
|
|
287
351
|
buildOptions(values, ids) {
|
|
288
|
-
|
|
352
|
+
const objs = [];
|
|
289
353
|
for (let i = 0; i < values.length; i++) {
|
|
290
354
|
objs.push({
|
|
291
355
|
value: values[i],
|
|
@@ -295,7 +359,7 @@ class FormFieldComponent {
|
|
|
295
359
|
return objs;
|
|
296
360
|
}
|
|
297
361
|
togglePasswordView() {
|
|
298
|
-
if (this._PasswordIcon
|
|
362
|
+
if (this._PasswordIcon === IconsEnum.EyeClose) {
|
|
299
363
|
this._PasswordIcon = IconsEnum.EyeOpen;
|
|
300
364
|
this._placeHolderType = 'password';
|
|
301
365
|
}
|
|
@@ -306,64 +370,65 @@ class FormFieldComponent {
|
|
|
306
370
|
}
|
|
307
371
|
configMask() {
|
|
308
372
|
switch (this.TxtInputType) {
|
|
309
|
-
case
|
|
373
|
+
case FormFieldTxtInputTypesEnum.Text:
|
|
310
374
|
this._placeHolderType = 'text';
|
|
311
|
-
this.Mask =
|
|
312
|
-
this.Sufixo =
|
|
375
|
+
this.Mask = '';
|
|
376
|
+
this.Sufixo = '';
|
|
313
377
|
this.showMaskTyped = false;
|
|
314
378
|
break;
|
|
315
|
-
case
|
|
379
|
+
case FormFieldTxtInputTypesEnum.Password:
|
|
316
380
|
this._placeHolderType = 'password';
|
|
317
|
-
this.Mask =
|
|
318
|
-
this.Sufixo =
|
|
381
|
+
this.Mask = '';
|
|
382
|
+
this.Sufixo = '';
|
|
319
383
|
this.showMaskTyped = false;
|
|
320
384
|
break;
|
|
321
|
-
case
|
|
385
|
+
case FormFieldTxtInputTypesEnum.Email:
|
|
322
386
|
this._placeHolderType = 'text';
|
|
323
|
-
this.Mask =
|
|
324
|
-
this.Sufixo =
|
|
387
|
+
this.Mask = '';
|
|
388
|
+
this.Sufixo = '';
|
|
325
389
|
this.showMaskTyped = false;
|
|
326
390
|
break;
|
|
327
|
-
case
|
|
391
|
+
case FormFieldTxtInputTypesEnum.Number:
|
|
328
392
|
this._placeHolderType = 'text';
|
|
329
|
-
this.Mask =
|
|
393
|
+
this.Mask = 'separator.' + this.NCasasDecimais.toString();
|
|
330
394
|
this.Sufixo = this.NumberMaskSufix;
|
|
331
395
|
this.showMaskTyped = false;
|
|
332
|
-
if (this.CountryDataFormat
|
|
333
|
-
this.thousandSeparator =
|
|
396
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Brasil) {
|
|
397
|
+
this.thousandSeparator = '.';
|
|
334
398
|
}
|
|
335
|
-
if (this.CountryDataFormat
|
|
336
|
-
this.thousandSeparator =
|
|
399
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Estados_Unidos) {
|
|
400
|
+
this.thousandSeparator = ',';
|
|
337
401
|
}
|
|
338
402
|
break;
|
|
339
|
-
case
|
|
403
|
+
case FormFieldTxtInputTypesEnum.Date:
|
|
340
404
|
this._placeHolderType = 'date';
|
|
341
|
-
this.Mask =
|
|
342
|
-
this.Sufixo =
|
|
405
|
+
this.Mask = '';
|
|
406
|
+
this.Sufixo = '';
|
|
343
407
|
this.showMaskTyped = true;
|
|
344
408
|
break;
|
|
345
|
-
case
|
|
409
|
+
case FormFieldTxtInputTypesEnum.DateTime:
|
|
346
410
|
this._placeHolderType = 'datetime-local';
|
|
347
|
-
this.Mask =
|
|
348
|
-
this.Sufixo =
|
|
411
|
+
this.Mask = '';
|
|
412
|
+
this.Sufixo = '';
|
|
349
413
|
this.showMaskTyped = true;
|
|
350
414
|
break;
|
|
351
|
-
case
|
|
415
|
+
case FormFieldTxtInputTypesEnum.CellPhone:
|
|
352
416
|
this._placeHolderType = 'tel';
|
|
353
417
|
this.showMaskTyped = true;
|
|
354
|
-
if (this.CountryDataFormat
|
|
355
|
-
this.Mask =
|
|
418
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Brasil) {
|
|
419
|
+
this.Mask = '(00) 0 0000-0000';
|
|
356
420
|
}
|
|
357
|
-
if (this.CountryDataFormat
|
|
358
|
-
this.Mask =
|
|
421
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Estados_Unidos) {
|
|
422
|
+
this.Mask = '(000) 000-0000';
|
|
359
423
|
}
|
|
360
424
|
break;
|
|
361
425
|
}
|
|
362
426
|
}
|
|
363
427
|
getIDFromOption(valueText) {
|
|
364
|
-
for (
|
|
365
|
-
if (valueText
|
|
428
|
+
for (let i = 0; i < this._Options.length; i++) {
|
|
429
|
+
if (valueText === this._Options[i].value) {
|
|
366
430
|
return this._Options[i].id;
|
|
431
|
+
}
|
|
367
432
|
}
|
|
368
433
|
return 0;
|
|
369
434
|
}
|
|
@@ -373,25 +438,30 @@ class FormFieldComponent {
|
|
|
373
438
|
Value: this.Value,
|
|
374
439
|
ignoreThisProp: true
|
|
375
440
|
}));
|
|
376
|
-
if (this.filtro !== '' &&
|
|
441
|
+
if (this.filtro !== '' &&
|
|
442
|
+
this.FieldType === FormFieldTypes.ComboBox &&
|
|
443
|
+
this._OptionsFiltered.length > 0) {
|
|
377
444
|
this.optionClicked(this._OptionsFiltered[0]);
|
|
378
445
|
}
|
|
379
446
|
}
|
|
380
|
-
//
|
|
447
|
+
// =========================================================
|
|
448
|
+
// COMBOBOX
|
|
449
|
+
// =========================================================
|
|
381
450
|
filtrarOpcoes() {
|
|
382
451
|
this._OptionsFiltered = this._Options.filter(o => o.value.toLowerCase().includes(this.filtro.toLowerCase()));
|
|
383
452
|
}
|
|
384
453
|
optionClicked(option) {
|
|
385
454
|
this.Value = option.value;
|
|
386
|
-
this.
|
|
455
|
+
this.emitValueChanged();
|
|
387
456
|
this.filtro = '';
|
|
388
457
|
this.filtrarOpcoes();
|
|
389
458
|
this.dropdownIsOpen = false;
|
|
390
459
|
}
|
|
391
460
|
onClick() {
|
|
392
461
|
this.dropdownIsOpen = !this.dropdownIsOpen;
|
|
393
|
-
if (this.dropdownIsOpen)
|
|
462
|
+
if (this.dropdownIsOpen) {
|
|
394
463
|
this.dropdownDisplayOn = true;
|
|
464
|
+
}
|
|
395
465
|
this.FormFieldService.comboboxIsOpen.next(new FormFieldConfigModel({
|
|
396
466
|
Name: this.Name(),
|
|
397
467
|
IsOpen: this.dropdownIsOpen
|
|
@@ -409,13 +479,16 @@ class FormFieldComponent {
|
|
|
409
479
|
this.dropdownDisplayOn = false;
|
|
410
480
|
}
|
|
411
481
|
}
|
|
412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, deps: [
|
|
413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: FormFieldComponent, isStandalone: true, selector: "app-form-field", inputs: { Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: true, transformFunction: null }, cypressTestId: { classPropertyName: "cypressTestId", publicName: "cypressTestId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(FieldType == FormFieldTypes.TxtBox){\r\n\r\n <div class=\"container\" \r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.border-radius]=\"
|
|
482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: FormFieldComponent, isStandalone: true, selector: "app-form-field", inputs: { Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: true, transformFunction: null }, cypressTestId: { classPropertyName: "cypressTestId", publicName: "cypressTestId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "comboHeader", first: true, predicate: ["comboHeader"], descendants: true }], ngImport: i0, template: "@if(FieldType == FormFieldTypes.TxtBox){\r\n\r\n <div class=\"container\" \r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.border-radius]=\"_BorderRadius +'px'\"\r\n [style.border]=\"_Border\"\r\n [ngStyle]=\"_BoxShadowsEnabled ?\r\n {'box-shadow':\r\n 'rgb(204, 219, 232) '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.375) + 'px 0px inset,' + \r\n 'rgba(255, 255, 255, 0.5) '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*0.375) + 'px '+ (_FontSize*0.0625) + 'px inset'\r\n } : {}\">\r\n\r\n <i class=\"{{_Icon}} icon\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"(_FontSize*1.25) +'px'\"\r\n [style.margin-left]=\"(_FontSize*0.5625) +'px'\"\r\n [style.display]=\"IconEnabled ? '' : 'none'\">\r\n </i>\r\n\r\n <input\r\n [ngModel]=\"Value\"\r\n (ngModelChange)=\"onModelChanged($event)\"\r\n (input)=\"onUserInput($event)\"\r\n prefix=\"{{NumberMaskPrefix}}\"\r\n suffix=\"{{Sufixo}}\"\r\n mask=\"{{Mask}}\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [allowNegativeNumbers]=\"TxtInputType == FormFieldTxtInputTypesEnum.Number ? true : false\"\r\n thousandSeparator=\"{{thousandSeparator}}\"\r\n (keydown.enter)=\"enterPressed()\"\r\n\r\n type=\"{{_placeHolderType}}\"\r\n name=\"{{Name()}}\"\r\n placeholder=\"{{_placeHolderValue}}\"\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\"\r\n [style.margin-left]=\"(_FontSize*0.500) +'px'\"\r\n [style.margin-right]=\"(_FontSize*0.500) +'px'\"\r\n >\r\n\r\n <i class=\"{{_PasswordIcon}}\"\r\n (click)=\"togglePasswordView()\"\r\n [style.cursor]=\"'pointer'\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"(_FontSize*1.25) +'px'\"\r\n [style.margin-right]=\"(_FontSize*0.5625) +'px'\"\r\n [style.display]=\"TxtInputType == FormFieldTxtInputTypesEnum.Password ? '' : 'none'\">\r\n </i>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div class=\"container\"\r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.background-color]=\"dropdownIsOpen ? 'rgba(161, 167, 172, 0.133)' : ''\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.padding]=\"(_FontSize*0.4) +'px' + ' ' + (_FontSize*0.8) +'px'\" \r\n [style.border-radius]=\"_BorderRadius +'px'\"\r\n [style.border]=\"_Border\"\r\n [ngStyle]=\"_BoxShadowsEnabled ?\r\n {'box-shadow':\r\n 'rgb(204, 219, 232) '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.375) + 'px 0px inset,' + \r\n 'rgba(255, 255, 255, 0.5) '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*0.375) + 'px '+ (_FontSize*0.0625) + 'px inset'\r\n } : {}\">\r\n\r\n <header\r\n #comboHeader\r\n (click)=\"onClick()\">\r\n <div\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\"\r\n class=\"selected-option\">\r\n {{ this.Value || 'Selecione...' }}\r\n </div>\r\n\r\n <i \r\n [style.transform]=\"dropdownIsOpen ? '' : 'rotate(90deg)'\"\r\n [style.font-size]=\"(_FontSize)+'px'\"\r\n class=\"{{IconsEnum.Arrow}}\">\r\n </i>\r\n </header>\r\n\r\n <div \r\n tabindex=\"0\"\r\n (blur)=\"onExit()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.padding]=\"(_FontSize*0.4) +'px' + ' ' + (_FontSize*0.8) +'px'\"\r\n [style.display]=\"dropdownIsOpen ? '' : 'none'\"\r\n class=\"dropdown\">\r\n\r\n <div class=\"search-cont\">\r\n <i class=\"{{IconsEnum.Search}}\"></i>\r\n\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filtro\"\r\n placeholder=\"Buscar...\"\r\n (ngModelChange)=\"filtrarOpcoes()\"\r\n (keydown.enter)=\"enterPressed()\" />\r\n </div>\r\n\r\n @for(option of this._OptionsFiltered; track $index){\r\n <div\r\n (click)=\"optionClicked(option)\" \r\n [style.padding]=\"(_FontSize*1) +'px' + ' ' + (0) +'px'\"\r\n class=\"option-cont\">\r\n <p\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\">\r\n {{option.value}}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}", styles: ["::-webkit-scrollbar{width:2px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#80808069;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#808080af;cursor:pointer}input:focus,select:focus,textarea:focus,button:focus{outline:none}:host{display:inline-block}.container{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;cursor:pointer;transition:1s;position:relative}.container>input{width:100%;height:80%;background-color:transparent}.container>header{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.container>header>.selected-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.container>header>i{line-height:0;transition:.2s}.container>.dropdown{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;background-color:#fff;left:0;top:100%;z-index:99999;border:1px solid rgba(128,128,128,.41);max-height:200px;overflow-y:auto}.container>.dropdown>.search-cont{display:flex;align-items:center;gap:5px;border:1px solid rgba(128,128,128,.41);box-sizing:border-box;padding:4px 2px;border-radius:3px}.container>.dropdown>.search-cont>i{font-size:12px;line-height:0}.container>.dropdown>.search-cont>input{width:calc(100% - 14px);border:none}.container>.dropdown>.option-cont{display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid rgba(128,128,128,.41)}.container>.dropdown>.option-cont>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block;margin:0}.container>.dropdown>.option-cont:hover{background-color:#a1a7ac22}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] }); }
|
|
414
484
|
}
|
|
415
485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
416
486
|
type: Component,
|
|
417
|
-
args: [{ selector: 'app-form-field', standalone: true, imports: [FormsModule, CommonModule, i3.NgxMaskDirective], template: "@if(FieldType == FormFieldTypes.TxtBox){\r\n\r\n <div class=\"container\" \r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.border-radius]=\"
|
|
418
|
-
}], ctorParameters: () => [
|
|
487
|
+
args: [{ selector: 'app-form-field', standalone: true, imports: [FormsModule, CommonModule, i3.NgxMaskDirective], template: "@if(FieldType == FormFieldTypes.TxtBox){\r\n\r\n <div class=\"container\" \r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.border-radius]=\"_BorderRadius +'px'\"\r\n [style.border]=\"_Border\"\r\n [ngStyle]=\"_BoxShadowsEnabled ?\r\n {'box-shadow':\r\n 'rgb(204, 219, 232) '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.375) + 'px 0px inset,' + \r\n 'rgba(255, 255, 255, 0.5) '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*0.375) + 'px '+ (_FontSize*0.0625) + 'px inset'\r\n } : {}\">\r\n\r\n <i class=\"{{_Icon}} icon\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"(_FontSize*1.25) +'px'\"\r\n [style.margin-left]=\"(_FontSize*0.5625) +'px'\"\r\n [style.display]=\"IconEnabled ? '' : 'none'\">\r\n </i>\r\n\r\n <input\r\n [ngModel]=\"Value\"\r\n (ngModelChange)=\"onModelChanged($event)\"\r\n (input)=\"onUserInput($event)\"\r\n prefix=\"{{NumberMaskPrefix}}\"\r\n suffix=\"{{Sufixo}}\"\r\n mask=\"{{Mask}}\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [allowNegativeNumbers]=\"TxtInputType == FormFieldTxtInputTypesEnum.Number ? true : false\"\r\n thousandSeparator=\"{{thousandSeparator}}\"\r\n (keydown.enter)=\"enterPressed()\"\r\n\r\n type=\"{{_placeHolderType}}\"\r\n name=\"{{Name()}}\"\r\n placeholder=\"{{_placeHolderValue}}\"\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\"\r\n [style.margin-left]=\"(_FontSize*0.500) +'px'\"\r\n [style.margin-right]=\"(_FontSize*0.500) +'px'\"\r\n >\r\n\r\n <i class=\"{{_PasswordIcon}}\"\r\n (click)=\"togglePasswordView()\"\r\n [style.cursor]=\"'pointer'\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"(_FontSize*1.25) +'px'\"\r\n [style.margin-right]=\"(_FontSize*0.5625) +'px'\"\r\n [style.display]=\"TxtInputType == FormFieldTxtInputTypesEnum.Password ? '' : 'none'\">\r\n </i>\r\n </div>\r\n\r\n}@else {\r\n\r\n <div class=\"container\"\r\n [attr.data-testid]=\"cypressTestId()\"\r\n [style.background-color]=\"dropdownIsOpen ? 'rgba(161, 167, 172, 0.133)' : ''\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.height]=\"_Height +'px'\"\r\n [style.padding]=\"(_FontSize*0.4) +'px' + ' ' + (_FontSize*0.8) +'px'\" \r\n [style.border-radius]=\"_BorderRadius +'px'\"\r\n [style.border]=\"_Border\"\r\n [ngStyle]=\"_BoxShadowsEnabled ?\r\n {'box-shadow':\r\n 'rgb(204, 219, 232) '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.1875) + 'px '+ (_FontSize*0.375) + 'px 0px inset,' + \r\n 'rgba(255, 255, 255, 0.5) '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*-0.1875) + 'px '+ (_FontSize*0.375) + 'px '+ (_FontSize*0.0625) + 'px inset'\r\n } : {}\">\r\n\r\n <header\r\n #comboHeader\r\n (click)=\"onClick()\">\r\n <div\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\"\r\n class=\"selected-option\">\r\n {{ this.Value || 'Selecione...' }}\r\n </div>\r\n\r\n <i \r\n [style.transform]=\"dropdownIsOpen ? '' : 'rotate(90deg)'\"\r\n [style.font-size]=\"(_FontSize)+'px'\"\r\n class=\"{{IconsEnum.Arrow}}\">\r\n </i>\r\n </header>\r\n\r\n <div \r\n tabindex=\"0\"\r\n (blur)=\"onExit()\"\r\n [style.width]=\"_Width +'px'\"\r\n [style.padding]=\"(_FontSize*0.4) +'px' + ' ' + (_FontSize*0.8) +'px'\"\r\n [style.display]=\"dropdownIsOpen ? '' : 'none'\"\r\n class=\"dropdown\">\r\n\r\n <div class=\"search-cont\">\r\n <i class=\"{{IconsEnum.Search}}\"></i>\r\n\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filtro\"\r\n placeholder=\"Buscar...\"\r\n (ngModelChange)=\"filtrarOpcoes()\"\r\n (keydown.enter)=\"enterPressed()\" />\r\n </div>\r\n\r\n @for(option of this._OptionsFiltered; track $index){\r\n <div\r\n (click)=\"optionClicked(option)\" \r\n [style.padding]=\"(_FontSize*1) +'px' + ' ' + (0) +'px'\"\r\n class=\"option-cont\">\r\n <p\r\n [style.color]=\"_FontColor\"\r\n [style.font-family]=\"_FontFamily\"\r\n [style.font-size]=\"_FontSize+'px'\"\r\n [style.font-weight]=\"_FontWeight\">\r\n {{option.value}}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}", styles: ["::-webkit-scrollbar{width:2px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#80808069;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#808080af;cursor:pointer}input:focus,select:focus,textarea:focus,button:focus{outline:none}:host{display:inline-block}.container{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;cursor:pointer;transition:1s;position:relative}.container>input{width:100%;height:80%;background-color:transparent}.container>header{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.container>header>.selected-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.container>header>i{line-height:0;transition:.2s}.container>.dropdown{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;background-color:#fff;left:0;top:100%;z-index:99999;border:1px solid rgba(128,128,128,.41);max-height:200px;overflow-y:auto}.container>.dropdown>.search-cont{display:flex;align-items:center;gap:5px;border:1px solid rgba(128,128,128,.41);box-sizing:border-box;padding:4px 2px;border-radius:3px}.container>.dropdown>.search-cont>i{font-size:12px;line-height:0}.container>.dropdown>.search-cont>input{width:calc(100% - 14px);border:none}.container>.dropdown>.option-cont{display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid rgba(128,128,128,.41)}.container>.dropdown>.option-cont>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block;margin:0}.container>.dropdown>.option-cont:hover{background-color:#a1a7ac22}\n"] }]
|
|
488
|
+
}], ctorParameters: () => [], propDecorators: { comboHeader: [{
|
|
489
|
+
type: ViewChild,
|
|
490
|
+
args: ['comboHeader']
|
|
491
|
+
}] } });
|
|
419
492
|
|
|
420
493
|
var ButtonTypeEnum;
|
|
421
494
|
(function (ButtonTypeEnum) {
|