@lesterarte/sefin-ui 0.0.20-dev.7 → 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.
|
@@ -939,6 +939,8 @@ class ButtonComponent {
|
|
|
939
939
|
size = 'md';
|
|
940
940
|
/** Whether the button is disabled */
|
|
941
941
|
disabled = false;
|
|
942
|
+
/** Whether the button should take full width of the container */
|
|
943
|
+
fullWidth = false;
|
|
942
944
|
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
943
945
|
type = 'button';
|
|
944
946
|
/** Additional CSS classes */
|
|
@@ -954,6 +956,7 @@ class ButtonComponent {
|
|
|
954
956
|
'sefin-button',
|
|
955
957
|
`sefin-button--${this.variant}`,
|
|
956
958
|
`sefin-button--${this.size}`,
|
|
959
|
+
this.fullWidth ? 'sefin-button--full-width' : '',
|
|
957
960
|
this.disabled ? 'sefin-button--disabled' : '',
|
|
958
961
|
this.class,
|
|
959
962
|
]
|
|
@@ -961,17 +964,19 @@ class ButtonComponent {
|
|
|
961
964
|
.join(' ');
|
|
962
965
|
}
|
|
963
966
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
964
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
967
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", fullWidth: "fullWidth", type: "type", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button--full-width{display:flex;width:100%}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
965
968
|
}
|
|
966
969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
967
970
|
type: Component,
|
|
968
|
-
args: [{ selector: 'sefin-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
971
|
+
args: [{ selector: 'sefin-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button--full-width{display:flex;width:100%}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
969
972
|
}], propDecorators: { variant: [{
|
|
970
973
|
type: Input
|
|
971
974
|
}], size: [{
|
|
972
975
|
type: Input
|
|
973
976
|
}], disabled: [{
|
|
974
977
|
type: Input
|
|
978
|
+
}], fullWidth: [{
|
|
979
|
+
type: Input
|
|
975
980
|
}], type: [{
|
|
976
981
|
type: Input
|
|
977
982
|
}], class: [{
|
|
@@ -3145,6 +3150,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3145
3150
|
type: Output
|
|
3146
3151
|
}] } });
|
|
3147
3152
|
|
|
3153
|
+
class SpacerComponent {
|
|
3154
|
+
/** Size of the spacer. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' */
|
|
3155
|
+
size = 'md';
|
|
3156
|
+
/** Orientation of the spacer. Options: 'vertical' | 'horizontal' */
|
|
3157
|
+
orientation = 'vertical';
|
|
3158
|
+
/** Additional CSS classes */
|
|
3159
|
+
class = '';
|
|
3160
|
+
get spacerClasses() {
|
|
3161
|
+
return [
|
|
3162
|
+
'sefin-spacer',
|
|
3163
|
+
`sefin-spacer--${this.orientation}`,
|
|
3164
|
+
`sefin-spacer--${this.size}`,
|
|
3165
|
+
this.class,
|
|
3166
|
+
]
|
|
3167
|
+
.filter(Boolean)
|
|
3168
|
+
.join(' ');
|
|
3169
|
+
}
|
|
3170
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SpacerComponent, isStandalone: true, selector: "sefin-spacer", inputs: { size: "size", orientation: "orientation", class: "class" }, ngImport: i0, template: "<div [class]=\"spacerClasses\" aria-hidden=\"true\"></div>\n\n", styles: [".sefin-spacer{flex-shrink:0}.sefin-spacer--vertical{display:block;width:100%;height:0}.sefin-spacer--horizontal{display:inline-block;width:0;height:100%;vertical-align:middle}.sefin-spacer--xs.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xs)}.sefin-spacer--xs.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xs)}.sefin-spacer--sm.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-sm)}.sefin-spacer--sm.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-sm)}.sefin-spacer--md.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-md)}.sefin-spacer--md.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-md)}.sefin-spacer--lg.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-lg)}.sefin-spacer--lg.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-lg)}.sefin-spacer--xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xl)}.sefin-spacer--xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xl)}.sefin-spacer--2xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-2xl)}.sefin-spacer--2xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-2xl)}.sefin-spacer--3xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-3xl)}.sefin-spacer--3xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-3xl)}.sefin-spacer--4xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-4xl)}.sefin-spacer--4xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-4xl)}.sefin-spacer--5xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-5xl)}.sefin-spacer--5xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-5xl)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3172
|
+
}
|
|
3173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
3174
|
+
type: Component,
|
|
3175
|
+
args: [{ selector: 'sefin-spacer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"spacerClasses\" aria-hidden=\"true\"></div>\n\n", styles: [".sefin-spacer{flex-shrink:0}.sefin-spacer--vertical{display:block;width:100%;height:0}.sefin-spacer--horizontal{display:inline-block;width:0;height:100%;vertical-align:middle}.sefin-spacer--xs.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xs)}.sefin-spacer--xs.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xs)}.sefin-spacer--sm.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-sm)}.sefin-spacer--sm.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-sm)}.sefin-spacer--md.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-md)}.sefin-spacer--md.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-md)}.sefin-spacer--lg.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-lg)}.sefin-spacer--lg.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-lg)}.sefin-spacer--xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xl)}.sefin-spacer--xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xl)}.sefin-spacer--2xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-2xl)}.sefin-spacer--2xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-2xl)}.sefin-spacer--3xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-3xl)}.sefin-spacer--3xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-3xl)}.sefin-spacer--4xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-4xl)}.sefin-spacer--4xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-4xl)}.sefin-spacer--5xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-5xl)}.sefin-spacer--5xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-5xl)}\n"] }]
|
|
3176
|
+
}], propDecorators: { size: [{
|
|
3177
|
+
type: Input
|
|
3178
|
+
}], orientation: [{
|
|
3179
|
+
type: Input
|
|
3180
|
+
}], class: [{
|
|
3181
|
+
type: Input
|
|
3182
|
+
}] } });
|
|
3183
|
+
|
|
3148
3184
|
/**
|
|
3149
3185
|
* Atoms index
|
|
3150
3186
|
*/
|
|
@@ -3572,6 +3608,8 @@ class ButtonGroupComponent {
|
|
|
3572
3608
|
groupVariant = 'default';
|
|
3573
3609
|
/** Whether the button group is disabled */
|
|
3574
3610
|
disabled = false;
|
|
3611
|
+
/** Whether buttons should take full width of the container */
|
|
3612
|
+
fullWidth = false;
|
|
3575
3613
|
/** Additional CSS classes */
|
|
3576
3614
|
class = '';
|
|
3577
3615
|
/** Event emitted when value changes (for segmented variant) */
|
|
@@ -3585,6 +3623,8 @@ class ButtonGroupComponent {
|
|
|
3585
3623
|
'sefin-button-group',
|
|
3586
3624
|
`sefin-button-group--${this.groupVariant}`,
|
|
3587
3625
|
`sefin-button-group--${this.size}`,
|
|
3626
|
+
this.groupVariant === 'default' ? `sefin-button-group--${this.variant}` : '',
|
|
3627
|
+
this.fullWidth ? 'sefin-button-group--full-width' : '',
|
|
3588
3628
|
this.disabled ? 'sefin-button-group--disabled' : '',
|
|
3589
3629
|
this.class,
|
|
3590
3630
|
]
|
|
@@ -3636,16 +3676,29 @@ class ButtonGroupComponent {
|
|
|
3636
3676
|
}
|
|
3637
3677
|
}
|
|
3638
3678
|
}
|
|
3639
|
-
|
|
3640
|
-
|
|
3679
|
+
getButtonClasses(option) {
|
|
3680
|
+
const classes = ['sefin-button-group__button-item'];
|
|
3681
|
+
// Size class
|
|
3682
|
+
classes.push(`sefin-button-group__button-item--${this.size}`);
|
|
3683
|
+
// Selected state
|
|
3684
|
+
if (this.isSelected(option)) {
|
|
3685
|
+
classes.push('sefin-button-group__button-item--selected');
|
|
3686
|
+
}
|
|
3687
|
+
// Variant classes
|
|
3641
3688
|
if (this.groupVariant === 'default') {
|
|
3642
|
-
|
|
3689
|
+
classes.push('sefin-button-group__button-item--default');
|
|
3690
|
+
// In default variant, all buttons use the variant style
|
|
3691
|
+
classes.push(`sefin-button-group__button-item--${this.variant}`);
|
|
3643
3692
|
}
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3693
|
+
else {
|
|
3694
|
+
// Segmented variant
|
|
3695
|
+
classes.push('sefin-button-group__button-item--segmented');
|
|
3696
|
+
if (this.isSelected(option)) {
|
|
3697
|
+
// Selected buttons use the variant style
|
|
3698
|
+
classes.push(`sefin-button-group__button-item--${this.variant}`);
|
|
3699
|
+
}
|
|
3647
3700
|
}
|
|
3648
|
-
return '
|
|
3701
|
+
return classes.join(' ');
|
|
3649
3702
|
}
|
|
3650
3703
|
sanitizeHtml(html) {
|
|
3651
3704
|
if (!html)
|
|
@@ -3658,11 +3711,11 @@ class ButtonGroupComponent {
|
|
|
3658
3711
|
return this.sanitizer.sanitize(1, html) || '';
|
|
3659
3712
|
}
|
|
3660
3713
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "sefin-button-group", inputs: { options: "options", value: "value", multiple: "multiple", selectedValues: "selectedValues", variant: "variant", size: "size", groupVariant: "groupVariant", disabled: "disabled", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div
|
|
3714
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "sefin-button-group", inputs: { options: "options", value: "value", multiple: "multiple", selectedValues: "selectedValues", variant: "variant", size: "size", groupVariant: "groupVariant", disabled: "disabled", fullWidth: "fullWidth", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"disabled || option.disabled\"\n (click)=\"onButtonClick(option)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0;margin:0;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;box-shadow:none;-webkit-user-select:none;user-select:none}.sefin-button-group__button-item:first-child,.sefin-button-group__button-item:last-child{border-radius:0}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2;outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:32px}.sefin-button-group__button-item--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:40px}.sefin-button-group__button-item--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:48px}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item:first-child,.sefin-button-group--segmented .sefin-button-group__button-item:last-child{border-radius:var(--sefin-radius-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary-dark);border-color:var(--sefin-color-secondary-dark)}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none;border-radius:0;background-color:transparent;color:#fff;margin:0;box-shadow:none}.sefin-button-group--default .sefin-button-group__button-item--selected,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:transparent;color:#fff}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled){background-color:#ffffff26}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled){background-color:#fff3;transform:translateY(0)}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none}.sefin-button-group--default .sefin-button-group__button-item--primary,.sefin-button-group--default .sefin-button-group__button-item--secondary,.sefin-button-group--default .sefin-button-group__button-item--outline{background-color:transparent}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3662
3715
|
}
|
|
3663
3716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3664
3717
|
type: Component,
|
|
3665
|
-
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule
|
|
3718
|
+
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"disabled || option.disabled\"\n (click)=\"onButtonClick(option)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0;margin:0;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;box-shadow:none;-webkit-user-select:none;user-select:none}.sefin-button-group__button-item:first-child,.sefin-button-group__button-item:last-child{border-radius:0}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2;outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:32px}.sefin-button-group__button-item--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:40px}.sefin-button-group__button-item--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:48px}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item:first-child,.sefin-button-group--segmented .sefin-button-group__button-item:last-child{border-radius:var(--sefin-radius-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary-dark);border-color:var(--sefin-color-secondary-dark)}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none;border-radius:0;background-color:transparent;color:#fff;margin:0;box-shadow:none}.sefin-button-group--default .sefin-button-group__button-item--selected,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:transparent;color:#fff}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled){background-color:#ffffff26}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled){background-color:#fff3;transform:translateY(0)}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none}.sefin-button-group--default .sefin-button-group__button-item--primary,.sefin-button-group--default .sefin-button-group__button-item--secondary,.sefin-button-group--default .sefin-button-group__button-item--outline{background-color:transparent}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\n"] }]
|
|
3666
3719
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
3667
3720
|
type: Input
|
|
3668
3721
|
}], value: [{
|
|
@@ -3679,6 +3732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3679
3732
|
type: Input
|
|
3680
3733
|
}], disabled: [{
|
|
3681
3734
|
type: Input
|
|
3735
|
+
}], fullWidth: [{
|
|
3736
|
+
type: Input
|
|
3682
3737
|
}], class: [{
|
|
3683
3738
|
type: Input
|
|
3684
3739
|
}], valueChange: [{
|
|
@@ -4350,6 +4405,423 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4350
4405
|
args: ['document:keydown', ['$event']]
|
|
4351
4406
|
}] } });
|
|
4352
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
|
+
|
|
4353
4825
|
class PaginationComponent {
|
|
4354
4826
|
/** Current page (1-based) */
|
|
4355
4827
|
set currentPage(value) {
|
|
@@ -4904,5 +5376,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4904
5376
|
* Generated bundle index. Do not edit.
|
|
4905
5377
|
*/
|
|
4906
5378
|
|
|
4907
|
-
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, 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 };
|
|
4908
5380
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|