lightning-tec-br-angular-components 3.1.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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';
|
|
@@ -117,6 +117,7 @@ var IconsEnum;
|
|
|
117
117
|
IconsEnum["Close"] = "fi fi-br-cross";
|
|
118
118
|
IconsEnum["Close_02"] = "fi fi-sc-cross";
|
|
119
119
|
IconsEnum["Company"] = "fi fi-rs-building";
|
|
120
|
+
IconsEnum["Copy"] = "fi fi-tr-clone";
|
|
120
121
|
IconsEnum["Customize"] = "fi fi-ss-customize";
|
|
121
122
|
IconsEnum["Dashboard"] = "fi fi-sr-chart-simple";
|
|
122
123
|
IconsEnum["Delete"] = "fi fi-sr-trash";
|
|
@@ -171,11 +172,7 @@ var IconsEnum;
|
|
|
171
172
|
})(IconsEnum || (IconsEnum = {}));
|
|
172
173
|
|
|
173
174
|
class FormFieldComponent {
|
|
174
|
-
|
|
175
|
-
;
|
|
176
|
-
constructor(element, cd) {
|
|
177
|
-
this.element = element;
|
|
178
|
-
this.cd = cd;
|
|
175
|
+
constructor() {
|
|
179
176
|
this.Name = input.required();
|
|
180
177
|
this.cypressTestId = input();
|
|
181
178
|
this._placeHolderType = '';
|
|
@@ -201,20 +198,23 @@ class FormFieldComponent {
|
|
|
201
198
|
this.text = '';
|
|
202
199
|
this._AlertState = false;
|
|
203
200
|
this.Value = '';
|
|
204
|
-
//
|
|
205
|
-
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 = '';
|
|
206
206
|
this.NumberMaskPrefix = '';
|
|
207
|
-
this.Sufixo =
|
|
207
|
+
this.Sufixo = '';
|
|
208
208
|
this.NumberMaskSufix = '';
|
|
209
209
|
this.showMaskTyped = false;
|
|
210
|
-
this.thousandSeparator =
|
|
210
|
+
this.thousandSeparator = '.';
|
|
211
211
|
this.NCasasDecimais = 0;
|
|
212
212
|
this.AlertTypesEnum = AlertTypesEnum;
|
|
213
213
|
this.IconsEnum = IconsEnum;
|
|
214
214
|
this.FormFieldTxtInputTypesEnum = FormFieldTxtInputTypesEnum;
|
|
215
215
|
this.FormFieldDataFormat = FormFieldCountryDataFormat;
|
|
216
216
|
this.FormFieldTypes = FormFieldTypes;
|
|
217
|
-
//Services
|
|
217
|
+
// Services
|
|
218
218
|
this.FormFieldService = inject(FormFieldService);
|
|
219
219
|
this.AlertService = inject(AlertService);
|
|
220
220
|
}
|
|
@@ -223,68 +223,114 @@ class FormFieldComponent {
|
|
|
223
223
|
this.startListenToStateChanged();
|
|
224
224
|
this.startListenToComboboxOpen();
|
|
225
225
|
}
|
|
226
|
-
|
|
226
|
+
ngOnDestroy() {
|
|
227
|
+
this.destroy$.next();
|
|
228
|
+
this.destroy$.complete();
|
|
229
|
+
}
|
|
230
|
+
// =========================================================
|
|
231
|
+
// CONTROLE DE VALOR
|
|
232
|
+
// =========================================================
|
|
233
|
+
onInputChange(value) {
|
|
234
|
+
this.Value = value;
|
|
235
|
+
if (this.updatingInternally)
|
|
236
|
+
return;
|
|
237
|
+
this.emitValueChanged();
|
|
238
|
+
}
|
|
239
|
+
emitValueChanged() {
|
|
227
240
|
this.FormFieldService.valueChanged.next(new FormFieldConfigModel({
|
|
228
241
|
Name: this.Name(),
|
|
229
242
|
Value: this.Value,
|
|
230
|
-
ValueId: this.FieldType
|
|
243
|
+
ValueId: this.FieldType === FormFieldTypes.ComboBox
|
|
244
|
+
? this.getIDFromOption(this.Value ?? '')
|
|
245
|
+
: 0,
|
|
231
246
|
ignoreThisProp: true
|
|
232
247
|
}));
|
|
233
248
|
}
|
|
249
|
+
setValueSilently(value) {
|
|
250
|
+
this.updatingInternally = true;
|
|
251
|
+
this.Value = value ?? '';
|
|
252
|
+
queueMicrotask(() => {
|
|
253
|
+
this.updatingInternally = false;
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
// Mantive este nome para compatibilidade caso você já chame em outro lugar
|
|
257
|
+
onValueChanged() {
|
|
258
|
+
if (this.updatingInternally)
|
|
259
|
+
return;
|
|
260
|
+
this.emitValueChanged();
|
|
261
|
+
}
|
|
234
262
|
startListenToExternalValueChanged() {
|
|
235
|
-
this.FormFieldService.valueChanged
|
|
236
|
-
|
|
237
|
-
|
|
263
|
+
this.FormFieldService.valueChanged
|
|
264
|
+
.pipe(takeUntil(this.destroy$))
|
|
265
|
+
.subscribe((model) => {
|
|
266
|
+
if (model.Name === this.Name() && !model.ignoreThisProp) {
|
|
267
|
+
this.setValueSilently(model.Value);
|
|
238
268
|
}
|
|
239
269
|
});
|
|
240
270
|
}
|
|
241
271
|
startListenToStateChanged() {
|
|
242
|
-
this.FormFieldService.stateChanged
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
this.
|
|
253
|
-
this.
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
this.
|
|
257
|
-
this._FontWeight = model.FontWeight ?? this._FontWeight;
|
|
258
|
-
this._FontFamily = model.FontFamily ?? this._FontFamily;
|
|
259
|
-
this.TxtInputType = model.TxtInputType ?? this.TxtInputType;
|
|
260
|
-
this._placeHolderValue = model.PlaceHolderValue ?? this._placeHolderValue;
|
|
261
|
-
this.NumberMaskPrefix = model.NumberMaskPrefix ?? this.NumberMaskPrefix;
|
|
262
|
-
this.NumberMaskSufix = model.NumberMaskSufix ?? this.NumberMaskSufix;
|
|
263
|
-
this.NCasasDecimais = model.NCasasDecimais ?? this.NCasasDecimais;
|
|
264
|
-
this.CountryDataFormat = model.CountryDataFormat ?? this.CountryDataFormat;
|
|
265
|
-
this._Border = model.Border ?? this._Border;
|
|
266
|
-
this._BorderRadius = model.BorderRadius ?? this._BorderRadius;
|
|
267
|
-
this._BoxShadowsEnabled = model.BoxShadowsEnabled ?? this._BoxShadowsEnabled;
|
|
268
|
-
if (this.FieldType == FormFieldTypes.TxtBox)
|
|
269
|
-
this.configMask();
|
|
270
|
-
let elemento = document.getElementById('header33319987');
|
|
271
|
-
if (elemento != null) {
|
|
272
|
-
this._HeaderTopPosition = elemento.getBoundingClientRect().top;
|
|
273
|
-
this._HeaderLeftPosition = elemento.getBoundingClientRect().left;
|
|
274
|
-
}
|
|
272
|
+
this.FormFieldService.stateChanged
|
|
273
|
+
.pipe(takeUntil(this.destroy$))
|
|
274
|
+
.subscribe((model) => {
|
|
275
|
+
if (model.Name !== this.Name())
|
|
276
|
+
return;
|
|
277
|
+
this._Width = model.Width ?? this._Width;
|
|
278
|
+
this._Height = model.Height ?? this._Height;
|
|
279
|
+
this.FieldType = model.FieldType ?? this.FieldType;
|
|
280
|
+
if (model.ComboValues != null &&
|
|
281
|
+
model.ComboIds != null) {
|
|
282
|
+
this._Options = this.buildOptions(model.ComboValues, model.ComboIds);
|
|
283
|
+
this._OptionsFiltered = this._Options;
|
|
284
|
+
}
|
|
285
|
+
if (model.Value !== undefined && model.Value !== this.Value) {
|
|
286
|
+
this.setValueSilently(model.Value);
|
|
275
287
|
}
|
|
288
|
+
this.IconEnabled = model.IconEnabled ?? this.IconEnabled;
|
|
289
|
+
this._Icon = model.Icon ?? this._Icon;
|
|
290
|
+
this._IconColor = model.IconColor ?? this._IconColor;
|
|
291
|
+
this._FontSize = model.FontSize ?? this._FontSize;
|
|
292
|
+
this._FontColor = model.FontColor ?? this._FontColor;
|
|
293
|
+
this._FontWeight = model.FontWeight ?? this._FontWeight;
|
|
294
|
+
this._FontFamily = model.FontFamily ?? this._FontFamily;
|
|
295
|
+
this.TxtInputType = model.TxtInputType ?? this.TxtInputType;
|
|
296
|
+
this._placeHolderValue = model.PlaceHolderValue ?? this._placeHolderValue;
|
|
297
|
+
this.NumberMaskPrefix = model.NumberMaskPrefix ?? this.NumberMaskPrefix;
|
|
298
|
+
this.NumberMaskSufix = model.NumberMaskSufix ?? this.NumberMaskSufix;
|
|
299
|
+
this.NCasasDecimais = model.NCasasDecimais ?? this.NCasasDecimais;
|
|
300
|
+
this.CountryDataFormat = model.CountryDataFormat ?? this.CountryDataFormat;
|
|
301
|
+
this._Border = model.Border ?? this._Border;
|
|
302
|
+
this._BorderRadius = model.BorderRadius ?? this._BorderRadius;
|
|
303
|
+
this._BoxShadowsEnabled = model.BoxShadowsEnabled ?? this._BoxShadowsEnabled;
|
|
304
|
+
if (this.FieldType === FormFieldTypes.TxtBox) {
|
|
305
|
+
this.configMask();
|
|
306
|
+
}
|
|
307
|
+
requestAnimationFrame(() => {
|
|
308
|
+
this.updateHeaderPosition();
|
|
309
|
+
});
|
|
276
310
|
});
|
|
277
311
|
}
|
|
278
312
|
startListenToComboboxOpen() {
|
|
279
313
|
this.FormFieldService.comboboxIsOpen
|
|
314
|
+
.pipe(takeUntil(this.destroy$))
|
|
280
315
|
.subscribe((model) => {
|
|
281
|
-
if (model.Name
|
|
316
|
+
if (model.Name === this.Name()) {
|
|
282
317
|
this.dropdownIsOpen = model.IsOpen ?? false;
|
|
283
318
|
}
|
|
284
319
|
});
|
|
285
320
|
}
|
|
321
|
+
updateHeaderPosition() {
|
|
322
|
+
const elemento = this.comboHeader?.nativeElement;
|
|
323
|
+
if (!elemento)
|
|
324
|
+
return;
|
|
325
|
+
const rect = elemento.getBoundingClientRect();
|
|
326
|
+
this._HeaderTopPosition = rect.top;
|
|
327
|
+
this._HeaderLeftPosition = rect.left;
|
|
328
|
+
}
|
|
329
|
+
// =========================================================
|
|
330
|
+
// AUXILIARES
|
|
331
|
+
// =========================================================
|
|
286
332
|
buildOptions(values, ids) {
|
|
287
|
-
|
|
333
|
+
const objs = [];
|
|
288
334
|
for (let i = 0; i < values.length; i++) {
|
|
289
335
|
objs.push({
|
|
290
336
|
value: values[i],
|
|
@@ -294,7 +340,7 @@ class FormFieldComponent {
|
|
|
294
340
|
return objs;
|
|
295
341
|
}
|
|
296
342
|
togglePasswordView() {
|
|
297
|
-
if (this._PasswordIcon
|
|
343
|
+
if (this._PasswordIcon === IconsEnum.EyeClose) {
|
|
298
344
|
this._PasswordIcon = IconsEnum.EyeOpen;
|
|
299
345
|
this._placeHolderType = 'password';
|
|
300
346
|
}
|
|
@@ -305,64 +351,65 @@ class FormFieldComponent {
|
|
|
305
351
|
}
|
|
306
352
|
configMask() {
|
|
307
353
|
switch (this.TxtInputType) {
|
|
308
|
-
case
|
|
354
|
+
case FormFieldTxtInputTypesEnum.Text:
|
|
309
355
|
this._placeHolderType = 'text';
|
|
310
|
-
this.Mask =
|
|
311
|
-
this.Sufixo =
|
|
356
|
+
this.Mask = '';
|
|
357
|
+
this.Sufixo = '';
|
|
312
358
|
this.showMaskTyped = false;
|
|
313
359
|
break;
|
|
314
|
-
case
|
|
360
|
+
case FormFieldTxtInputTypesEnum.Password:
|
|
315
361
|
this._placeHolderType = 'password';
|
|
316
|
-
this.Mask =
|
|
317
|
-
this.Sufixo =
|
|
362
|
+
this.Mask = '';
|
|
363
|
+
this.Sufixo = '';
|
|
318
364
|
this.showMaskTyped = false;
|
|
319
365
|
break;
|
|
320
|
-
case
|
|
366
|
+
case FormFieldTxtInputTypesEnum.Email:
|
|
321
367
|
this._placeHolderType = 'text';
|
|
322
|
-
this.Mask =
|
|
323
|
-
this.Sufixo =
|
|
368
|
+
this.Mask = '';
|
|
369
|
+
this.Sufixo = '';
|
|
324
370
|
this.showMaskTyped = false;
|
|
325
371
|
break;
|
|
326
|
-
case
|
|
372
|
+
case FormFieldTxtInputTypesEnum.Number:
|
|
327
373
|
this._placeHolderType = 'text';
|
|
328
|
-
this.Mask =
|
|
374
|
+
this.Mask = 'separator.' + this.NCasasDecimais.toString();
|
|
329
375
|
this.Sufixo = this.NumberMaskSufix;
|
|
330
376
|
this.showMaskTyped = false;
|
|
331
|
-
if (this.CountryDataFormat
|
|
332
|
-
this.thousandSeparator =
|
|
377
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Brasil) {
|
|
378
|
+
this.thousandSeparator = '.';
|
|
333
379
|
}
|
|
334
|
-
if (this.CountryDataFormat
|
|
335
|
-
this.thousandSeparator =
|
|
380
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Estados_Unidos) {
|
|
381
|
+
this.thousandSeparator = ',';
|
|
336
382
|
}
|
|
337
383
|
break;
|
|
338
|
-
case
|
|
384
|
+
case FormFieldTxtInputTypesEnum.Date:
|
|
339
385
|
this._placeHolderType = 'date';
|
|
340
|
-
this.Mask =
|
|
341
|
-
this.Sufixo =
|
|
386
|
+
this.Mask = '';
|
|
387
|
+
this.Sufixo = '';
|
|
342
388
|
this.showMaskTyped = true;
|
|
343
389
|
break;
|
|
344
|
-
case
|
|
390
|
+
case FormFieldTxtInputTypesEnum.DateTime:
|
|
345
391
|
this._placeHolderType = 'datetime-local';
|
|
346
|
-
this.Mask =
|
|
347
|
-
this.Sufixo =
|
|
392
|
+
this.Mask = '';
|
|
393
|
+
this.Sufixo = '';
|
|
348
394
|
this.showMaskTyped = true;
|
|
349
395
|
break;
|
|
350
|
-
case
|
|
396
|
+
case FormFieldTxtInputTypesEnum.CellPhone:
|
|
351
397
|
this._placeHolderType = 'tel';
|
|
352
398
|
this.showMaskTyped = true;
|
|
353
|
-
if (this.CountryDataFormat
|
|
354
|
-
this.Mask =
|
|
399
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Brasil) {
|
|
400
|
+
this.Mask = '(00) 0 0000-0000';
|
|
355
401
|
}
|
|
356
|
-
if (this.CountryDataFormat
|
|
357
|
-
this.Mask =
|
|
402
|
+
if (this.CountryDataFormat === FormFieldCountryDataFormat.Estados_Unidos) {
|
|
403
|
+
this.Mask = '(000) 000-0000';
|
|
358
404
|
}
|
|
359
405
|
break;
|
|
360
406
|
}
|
|
361
407
|
}
|
|
362
408
|
getIDFromOption(valueText) {
|
|
363
|
-
for (
|
|
364
|
-
if (valueText
|
|
409
|
+
for (let i = 0; i < this._Options.length; i++) {
|
|
410
|
+
if (valueText === this._Options[i].value) {
|
|
365
411
|
return this._Options[i].id;
|
|
412
|
+
}
|
|
366
413
|
}
|
|
367
414
|
return 0;
|
|
368
415
|
}
|
|
@@ -372,25 +419,28 @@ class FormFieldComponent {
|
|
|
372
419
|
Value: this.Value,
|
|
373
420
|
ignoreThisProp: true
|
|
374
421
|
}));
|
|
375
|
-
if (this.filtro !== '' && this.FieldType
|
|
422
|
+
if (this.filtro !== '' && this.FieldType === FormFieldTypes.ComboBox && this._OptionsFiltered.length > 0) {
|
|
376
423
|
this.optionClicked(this._OptionsFiltered[0]);
|
|
377
424
|
}
|
|
378
425
|
}
|
|
379
|
-
//
|
|
426
|
+
// =========================================================
|
|
427
|
+
// COMBOBOX
|
|
428
|
+
// =========================================================
|
|
380
429
|
filtrarOpcoes() {
|
|
381
430
|
this._OptionsFiltered = this._Options.filter(o => o.value.toLowerCase().includes(this.filtro.toLowerCase()));
|
|
382
431
|
}
|
|
383
432
|
optionClicked(option) {
|
|
384
433
|
this.Value = option.value;
|
|
385
|
-
this.
|
|
434
|
+
this.emitValueChanged();
|
|
386
435
|
this.filtro = '';
|
|
387
436
|
this.filtrarOpcoes();
|
|
388
437
|
this.dropdownIsOpen = false;
|
|
389
438
|
}
|
|
390
439
|
onClick() {
|
|
391
440
|
this.dropdownIsOpen = !this.dropdownIsOpen;
|
|
392
|
-
if (this.dropdownIsOpen)
|
|
441
|
+
if (this.dropdownIsOpen) {
|
|
393
442
|
this.dropdownDisplayOn = true;
|
|
443
|
+
}
|
|
394
444
|
this.FormFieldService.comboboxIsOpen.next(new FormFieldConfigModel({
|
|
395
445
|
Name: this.Name(),
|
|
396
446
|
IsOpen: this.dropdownIsOpen
|
|
@@ -408,13 +458,16 @@ class FormFieldComponent {
|
|
|
408
458
|
this.dropdownDisplayOn = false;
|
|
409
459
|
}
|
|
410
460
|
}
|
|
411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, deps: [
|
|
412
|
-
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]=\"
|
|
461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
462
|
+
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)=\"onInputChange($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"] }] }); }
|
|
413
463
|
}
|
|
414
464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
415
465
|
type: Component,
|
|
416
|
-
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]=\"
|
|
417
|
-
}], ctorParameters: () => [
|
|
466
|
+
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)=\"onInputChange($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"] }]
|
|
467
|
+
}], ctorParameters: () => [], propDecorators: { comboHeader: [{
|
|
468
|
+
type: ViewChild,
|
|
469
|
+
args: ['comboHeader']
|
|
470
|
+
}] } });
|
|
418
471
|
|
|
419
472
|
var ButtonTypeEnum;
|
|
420
473
|
(function (ButtonTypeEnum) {
|