@lesterarte/sefin-ui 0.0.20-dev.8 → 0.0.20-dev.9
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.
|
@@ -4405,6 +4405,423 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4405
4405
|
args: ['document:keydown', ['$event']]
|
|
4406
4406
|
}] } });
|
|
4407
4407
|
|
|
4408
|
+
class FormFieldComponent {
|
|
4409
|
+
cdr;
|
|
4410
|
+
inputRef;
|
|
4411
|
+
/** Label text for the field */
|
|
4412
|
+
label = '';
|
|
4413
|
+
/** FormField variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
4414
|
+
variant = 'outlined';
|
|
4415
|
+
/** FormField size. Options: 'sm' | 'md' | 'lg' */
|
|
4416
|
+
size = 'md';
|
|
4417
|
+
/** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */
|
|
4418
|
+
type = 'text';
|
|
4419
|
+
/** Placeholder text */
|
|
4420
|
+
placeholder = '';
|
|
4421
|
+
/** Helper text shown below the input */
|
|
4422
|
+
hint = '';
|
|
4423
|
+
/** Error message to display */
|
|
4424
|
+
errorMessage = '';
|
|
4425
|
+
/** Whether the field is required */
|
|
4426
|
+
required = false;
|
|
4427
|
+
/** Whether the field is disabled */
|
|
4428
|
+
disabled = false;
|
|
4429
|
+
/** Whether the field is readonly */
|
|
4430
|
+
readonly = false;
|
|
4431
|
+
/** Maximum length of the input */
|
|
4432
|
+
maxLength;
|
|
4433
|
+
/** Minimum length of the input */
|
|
4434
|
+
minLength;
|
|
4435
|
+
/** Pattern for validation (regex string) */
|
|
4436
|
+
pattern;
|
|
4437
|
+
/** Leading icon name */
|
|
4438
|
+
leadingIcon;
|
|
4439
|
+
/** Trailing icon name */
|
|
4440
|
+
trailingIcon;
|
|
4441
|
+
/** Whether to show character counter */
|
|
4442
|
+
showCounter = false;
|
|
4443
|
+
/** Autocomplete attribute */
|
|
4444
|
+
autocomplete;
|
|
4445
|
+
/** Input name attribute */
|
|
4446
|
+
name = '';
|
|
4447
|
+
/** Input id attribute */
|
|
4448
|
+
id = '';
|
|
4449
|
+
/** Additional CSS classes */
|
|
4450
|
+
class = '';
|
|
4451
|
+
/** Custom validation function */
|
|
4452
|
+
customValidator;
|
|
4453
|
+
/** Event emitted when the value changes */
|
|
4454
|
+
valueChange = new EventEmitter();
|
|
4455
|
+
/** Event emitted when the input is focused */
|
|
4456
|
+
focused = new EventEmitter();
|
|
4457
|
+
/** Event emitted when the input is blurred */
|
|
4458
|
+
blurred = new EventEmitter();
|
|
4459
|
+
/** Event emitted when trailing icon is clicked */
|
|
4460
|
+
trailingIconClick = new EventEmitter();
|
|
4461
|
+
value = '';
|
|
4462
|
+
isFocused = false;
|
|
4463
|
+
hasError = false;
|
|
4464
|
+
internalErrorMessage = '';
|
|
4465
|
+
internalId = '';
|
|
4466
|
+
onChange = (value) => { };
|
|
4467
|
+
onTouched = () => { };
|
|
4468
|
+
destroy$ = new Subject();
|
|
4469
|
+
control;
|
|
4470
|
+
constructor(cdr) {
|
|
4471
|
+
this.cdr = cdr;
|
|
4472
|
+
}
|
|
4473
|
+
ngOnInit() {
|
|
4474
|
+
this.generateIdIfNeeded();
|
|
4475
|
+
}
|
|
4476
|
+
ngAfterViewInit() {
|
|
4477
|
+
if (this.inputRef?.nativeElement) {
|
|
4478
|
+
const inputElement = this.inputRef.nativeElement;
|
|
4479
|
+
// Verificar si el input tiene un valor que no está sincronizado con el componente
|
|
4480
|
+
const inputValue = inputElement.value || '';
|
|
4481
|
+
if (inputValue && (!this.value || this.value !== inputValue)) {
|
|
4482
|
+
this.value = inputValue;
|
|
4483
|
+
}
|
|
4484
|
+
// Sincronizar el valor del componente con el input
|
|
4485
|
+
if (this.value) {
|
|
4486
|
+
inputElement.value = this.value;
|
|
4487
|
+
}
|
|
4488
|
+
if (this.type === 'password') {
|
|
4489
|
+
inputElement.style.setProperty('-webkit-appearance', 'none', 'important');
|
|
4490
|
+
inputElement.setAttribute('data-password-field', 'true');
|
|
4491
|
+
}
|
|
4492
|
+
}
|
|
4493
|
+
}
|
|
4494
|
+
ngOnDestroy() {
|
|
4495
|
+
this.destroy$.next();
|
|
4496
|
+
this.destroy$.complete();
|
|
4497
|
+
}
|
|
4498
|
+
generateIdIfNeeded() {
|
|
4499
|
+
if (!this.id) {
|
|
4500
|
+
this.internalId = `sefin-form-field-${Math.random()
|
|
4501
|
+
.toString(36)
|
|
4502
|
+
.substr(2, 9)}`;
|
|
4503
|
+
}
|
|
4504
|
+
else {
|
|
4505
|
+
this.internalId = this.id;
|
|
4506
|
+
}
|
|
4507
|
+
}
|
|
4508
|
+
get fieldId() {
|
|
4509
|
+
return this.internalId;
|
|
4510
|
+
}
|
|
4511
|
+
get labelId() {
|
|
4512
|
+
return `${this.fieldId}-label`;
|
|
4513
|
+
}
|
|
4514
|
+
get inputId() {
|
|
4515
|
+
return `${this.fieldId}-input`;
|
|
4516
|
+
}
|
|
4517
|
+
get hintId() {
|
|
4518
|
+
return `${this.fieldId}-hint`;
|
|
4519
|
+
}
|
|
4520
|
+
onInput(event) {
|
|
4521
|
+
const target = event.target;
|
|
4522
|
+
const newValue = target.value || '';
|
|
4523
|
+
if (this.value !== newValue) {
|
|
4524
|
+
this.value = newValue;
|
|
4525
|
+
this.onChange(this.value);
|
|
4526
|
+
this.valueChange.emit(this.value);
|
|
4527
|
+
this.validateField();
|
|
4528
|
+
}
|
|
4529
|
+
}
|
|
4530
|
+
onFocus(event) {
|
|
4531
|
+
this.isFocused = true;
|
|
4532
|
+
this.focused.emit(event);
|
|
4533
|
+
this.cdr.detectChanges();
|
|
4534
|
+
}
|
|
4535
|
+
onBlur(event) {
|
|
4536
|
+
this.isFocused = false;
|
|
4537
|
+
this.onTouched();
|
|
4538
|
+
this.blurred.emit(event);
|
|
4539
|
+
this.validateField();
|
|
4540
|
+
this.cdr.detectChanges();
|
|
4541
|
+
}
|
|
4542
|
+
onTrailingIconClick(event) {
|
|
4543
|
+
event.stopPropagation();
|
|
4544
|
+
if (!this.disabled) {
|
|
4545
|
+
this.trailingIconClick.emit(event);
|
|
4546
|
+
}
|
|
4547
|
+
}
|
|
4548
|
+
validateField() {
|
|
4549
|
+
this.hasError = false;
|
|
4550
|
+
this.internalErrorMessage = '';
|
|
4551
|
+
if (this.disabled || this.readonly) {
|
|
4552
|
+
return;
|
|
4553
|
+
}
|
|
4554
|
+
const value = this.value || '';
|
|
4555
|
+
// Required validation
|
|
4556
|
+
if (this.required && !value.trim()) {
|
|
4557
|
+
this.hasError = true;
|
|
4558
|
+
this.internalErrorMessage = 'Este campo es requerido';
|
|
4559
|
+
return;
|
|
4560
|
+
}
|
|
4561
|
+
// Skip other validations if field is empty and not required
|
|
4562
|
+
if (!value.trim()) {
|
|
4563
|
+
return;
|
|
4564
|
+
}
|
|
4565
|
+
// Min length validation
|
|
4566
|
+
if (this.minLength && value.length < this.minLength) {
|
|
4567
|
+
this.hasError = true;
|
|
4568
|
+
this.internalErrorMessage = `Mínimo ${this.minLength} caracteres`;
|
|
4569
|
+
return;
|
|
4570
|
+
}
|
|
4571
|
+
// Max length validation
|
|
4572
|
+
if (this.maxLength && value.length > this.maxLength) {
|
|
4573
|
+
this.hasError = true;
|
|
4574
|
+
this.internalErrorMessage = `Máximo ${this.maxLength} caracteres`;
|
|
4575
|
+
return;
|
|
4576
|
+
}
|
|
4577
|
+
// Pattern validation
|
|
4578
|
+
if (this.pattern) {
|
|
4579
|
+
try {
|
|
4580
|
+
const regex = new RegExp(this.pattern);
|
|
4581
|
+
if (!regex.test(value)) {
|
|
4582
|
+
this.hasError = true;
|
|
4583
|
+
this.internalErrorMessage = 'El formato no es válido';
|
|
4584
|
+
return;
|
|
4585
|
+
}
|
|
4586
|
+
}
|
|
4587
|
+
catch (e) {
|
|
4588
|
+
console.warn('Invalid pattern:', this.pattern);
|
|
4589
|
+
}
|
|
4590
|
+
}
|
|
4591
|
+
// Type-specific validation
|
|
4592
|
+
if (this.type === 'email' && value) {
|
|
4593
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4594
|
+
if (!emailRegex.test(value)) {
|
|
4595
|
+
this.hasError = true;
|
|
4596
|
+
this.internalErrorMessage = 'Ingresa un email válido';
|
|
4597
|
+
return;
|
|
4598
|
+
}
|
|
4599
|
+
}
|
|
4600
|
+
if (this.type === 'url' && value) {
|
|
4601
|
+
try {
|
|
4602
|
+
new URL(value);
|
|
4603
|
+
}
|
|
4604
|
+
catch {
|
|
4605
|
+
this.hasError = true;
|
|
4606
|
+
this.internalErrorMessage = 'Ingresa una URL válida';
|
|
4607
|
+
return;
|
|
4608
|
+
}
|
|
4609
|
+
}
|
|
4610
|
+
// Custom validator
|
|
4611
|
+
if (this.customValidator) {
|
|
4612
|
+
const customError = this.customValidator(value);
|
|
4613
|
+
if (customError) {
|
|
4614
|
+
this.hasError = true;
|
|
4615
|
+
this.internalErrorMessage = customError;
|
|
4616
|
+
return;
|
|
4617
|
+
}
|
|
4618
|
+
}
|
|
4619
|
+
}
|
|
4620
|
+
get displayError() {
|
|
4621
|
+
return this.hasError && (!!this.errorMessage || !!this.internalErrorMessage);
|
|
4622
|
+
}
|
|
4623
|
+
get displayErrorMessage() {
|
|
4624
|
+
return this.errorMessage || this.internalErrorMessage;
|
|
4625
|
+
}
|
|
4626
|
+
get characterCount() {
|
|
4627
|
+
return this.value?.length || 0;
|
|
4628
|
+
}
|
|
4629
|
+
get formFieldClasses() {
|
|
4630
|
+
return [
|
|
4631
|
+
'sefin-form-field',
|
|
4632
|
+
`sefin-form-field--${this.variant}`,
|
|
4633
|
+
`sefin-form-field--${this.size}`,
|
|
4634
|
+
this.isFocused ? 'sefin-form-field--focused' : '',
|
|
4635
|
+
this.hasError ? 'sefin-form-field--error' : '',
|
|
4636
|
+
this.disabled ? 'sefin-form-field--disabled' : '',
|
|
4637
|
+
this.readonly ? 'sefin-form-field--readonly' : '',
|
|
4638
|
+
this.leadingIcon ? 'sefin-form-field--with-leading-icon' : '',
|
|
4639
|
+
this.trailingIcon ? 'sefin-form-field--with-trailing-icon' : '',
|
|
4640
|
+
this.required ? 'sefin-form-field--required' : '',
|
|
4641
|
+
this.class,
|
|
4642
|
+
]
|
|
4643
|
+
.filter(Boolean)
|
|
4644
|
+
.join(' ');
|
|
4645
|
+
}
|
|
4646
|
+
// ControlValueAccessor implementation
|
|
4647
|
+
writeValue(value) {
|
|
4648
|
+
const newValue = value || '';
|
|
4649
|
+
if (this.value !== newValue) {
|
|
4650
|
+
this.value = newValue;
|
|
4651
|
+
if (this.inputRef?.nativeElement) {
|
|
4652
|
+
this.inputRef.nativeElement.value = this.value;
|
|
4653
|
+
}
|
|
4654
|
+
this.validateField();
|
|
4655
|
+
this.cdr.markForCheck();
|
|
4656
|
+
this.cdr.detectChanges();
|
|
4657
|
+
}
|
|
4658
|
+
else if (this.inputRef?.nativeElement && this.inputRef.nativeElement.value !== newValue) {
|
|
4659
|
+
// Asegurar que el input esté sincronizado incluso si el valor del componente no cambió
|
|
4660
|
+
this.inputRef.nativeElement.value = newValue;
|
|
4661
|
+
this.cdr.markForCheck();
|
|
4662
|
+
}
|
|
4663
|
+
}
|
|
4664
|
+
registerOnChange(fn) {
|
|
4665
|
+
this.onChange = fn;
|
|
4666
|
+
}
|
|
4667
|
+
registerOnTouched(fn) {
|
|
4668
|
+
this.onTouched = fn;
|
|
4669
|
+
}
|
|
4670
|
+
setDisabledState(isDisabled) {
|
|
4671
|
+
this.disabled = isDisabled;
|
|
4672
|
+
}
|
|
4673
|
+
// Validator implementation
|
|
4674
|
+
validate(control) {
|
|
4675
|
+
this.control = control;
|
|
4676
|
+
const value = control.value || '';
|
|
4677
|
+
if (this.disabled || this.readonly) {
|
|
4678
|
+
return null;
|
|
4679
|
+
}
|
|
4680
|
+
// Required validation
|
|
4681
|
+
if (this.required && !value.trim()) {
|
|
4682
|
+
return { required: true };
|
|
4683
|
+
}
|
|
4684
|
+
// Skip other validations if field is empty and not required
|
|
4685
|
+
if (!value.trim()) {
|
|
4686
|
+
return null;
|
|
4687
|
+
}
|
|
4688
|
+
const errors = {};
|
|
4689
|
+
// Min length validation
|
|
4690
|
+
if (this.minLength && value.length < this.minLength) {
|
|
4691
|
+
errors['minlength'] = {
|
|
4692
|
+
requiredLength: this.minLength,
|
|
4693
|
+
actualLength: value.length,
|
|
4694
|
+
};
|
|
4695
|
+
}
|
|
4696
|
+
// Max length validation
|
|
4697
|
+
if (this.maxLength && value.length > this.maxLength) {
|
|
4698
|
+
errors['maxlength'] = {
|
|
4699
|
+
requiredLength: this.maxLength,
|
|
4700
|
+
actualLength: value.length,
|
|
4701
|
+
};
|
|
4702
|
+
}
|
|
4703
|
+
// Pattern validation
|
|
4704
|
+
if (this.pattern) {
|
|
4705
|
+
try {
|
|
4706
|
+
const regex = new RegExp(this.pattern);
|
|
4707
|
+
if (!regex.test(value)) {
|
|
4708
|
+
errors['pattern'] = {
|
|
4709
|
+
requiredPattern: this.pattern,
|
|
4710
|
+
actualValue: value,
|
|
4711
|
+
};
|
|
4712
|
+
}
|
|
4713
|
+
}
|
|
4714
|
+
catch (e) {
|
|
4715
|
+
console.warn('Invalid pattern:', this.pattern);
|
|
4716
|
+
}
|
|
4717
|
+
}
|
|
4718
|
+
// Type-specific validation
|
|
4719
|
+
if (this.type === 'email' && value) {
|
|
4720
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4721
|
+
if (!emailRegex.test(value)) {
|
|
4722
|
+
errors['email'] = true;
|
|
4723
|
+
}
|
|
4724
|
+
}
|
|
4725
|
+
if (this.type === 'url' && value) {
|
|
4726
|
+
try {
|
|
4727
|
+
new URL(value);
|
|
4728
|
+
}
|
|
4729
|
+
catch {
|
|
4730
|
+
errors['url'] = true;
|
|
4731
|
+
}
|
|
4732
|
+
}
|
|
4733
|
+
// Custom validator
|
|
4734
|
+
if (this.customValidator) {
|
|
4735
|
+
const customError = this.customValidator(value);
|
|
4736
|
+
if (customError) {
|
|
4737
|
+
errors['custom'] = { message: customError };
|
|
4738
|
+
}
|
|
4739
|
+
}
|
|
4740
|
+
return Object.keys(errors).length > 0 ? errors : null;
|
|
4741
|
+
}
|
|
4742
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FormFieldComponent, isStandalone: true, selector: "sefin-form-field", inputs: { label: "label", variant: "variant", size: "size", type: "type", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred", trailingIconClick: "trailingIconClick" }, providers: [
|
|
4744
|
+
{
|
|
4745
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4746
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4747
|
+
multi: true,
|
|
4748
|
+
},
|
|
4749
|
+
{
|
|
4750
|
+
provide: NG_VALIDATORS,
|
|
4751
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4752
|
+
multi: true,
|
|
4753
|
+
},
|
|
4754
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:40px}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:56px}.sefin-form-field--lg .sefin-form-field__input-container{min-height:64px}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4755
|
+
}
|
|
4756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
4757
|
+
type: Component,
|
|
4758
|
+
args: [{ selector: 'sefin-form-field', standalone: true, imports: [CommonModule, FormsModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
4759
|
+
{
|
|
4760
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4761
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4762
|
+
multi: true,
|
|
4763
|
+
},
|
|
4764
|
+
{
|
|
4765
|
+
provide: NG_VALIDATORS,
|
|
4766
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4767
|
+
multi: true,
|
|
4768
|
+
},
|
|
4769
|
+
], template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:40px}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:56px}.sefin-form-field--lg .sefin-form-field__input-container{min-height:64px}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
|
|
4770
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputRef: [{
|
|
4771
|
+
type: ViewChild,
|
|
4772
|
+
args: ['inputRef', { static: false }]
|
|
4773
|
+
}], label: [{
|
|
4774
|
+
type: Input
|
|
4775
|
+
}], variant: [{
|
|
4776
|
+
type: Input
|
|
4777
|
+
}], size: [{
|
|
4778
|
+
type: Input
|
|
4779
|
+
}], type: [{
|
|
4780
|
+
type: Input
|
|
4781
|
+
}], placeholder: [{
|
|
4782
|
+
type: Input
|
|
4783
|
+
}], hint: [{
|
|
4784
|
+
type: Input
|
|
4785
|
+
}], errorMessage: [{
|
|
4786
|
+
type: Input
|
|
4787
|
+
}], required: [{
|
|
4788
|
+
type: Input
|
|
4789
|
+
}], disabled: [{
|
|
4790
|
+
type: Input
|
|
4791
|
+
}], readonly: [{
|
|
4792
|
+
type: Input
|
|
4793
|
+
}], maxLength: [{
|
|
4794
|
+
type: Input
|
|
4795
|
+
}], minLength: [{
|
|
4796
|
+
type: Input
|
|
4797
|
+
}], pattern: [{
|
|
4798
|
+
type: Input
|
|
4799
|
+
}], leadingIcon: [{
|
|
4800
|
+
type: Input
|
|
4801
|
+
}], trailingIcon: [{
|
|
4802
|
+
type: Input
|
|
4803
|
+
}], showCounter: [{
|
|
4804
|
+
type: Input
|
|
4805
|
+
}], autocomplete: [{
|
|
4806
|
+
type: Input
|
|
4807
|
+
}], name: [{
|
|
4808
|
+
type: Input
|
|
4809
|
+
}], id: [{
|
|
4810
|
+
type: Input
|
|
4811
|
+
}], class: [{
|
|
4812
|
+
type: Input
|
|
4813
|
+
}], customValidator: [{
|
|
4814
|
+
type: Input
|
|
4815
|
+
}], valueChange: [{
|
|
4816
|
+
type: Output
|
|
4817
|
+
}], focused: [{
|
|
4818
|
+
type: Output
|
|
4819
|
+
}], blurred: [{
|
|
4820
|
+
type: Output
|
|
4821
|
+
}], trailingIconClick: [{
|
|
4822
|
+
type: Output
|
|
4823
|
+
}] } });
|
|
4824
|
+
|
|
4408
4825
|
class PaginationComponent {
|
|
4409
4826
|
/** Current page (1-based) */
|
|
4410
4827
|
set currentPage(value) {
|
|
@@ -4959,5 +5376,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4959
5376
|
* Generated bundle index. Do not edit.
|
|
4960
5377
|
*/
|
|
4961
5378
|
|
|
4962
|
-
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
5379
|
+
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
4963
5380
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|