@lesterarte/sefin-ui 0.0.62 → 0.0.64
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.
|
@@ -300,6 +300,7 @@ const LIGHT_THEME = {
|
|
|
300
300
|
text: COLOR_TOKENS.brand.darkGray,
|
|
301
301
|
'text-secondary': COLOR_TOKENS.secondary[600],
|
|
302
302
|
'text-disabled': COLOR_TOKENS.secondary[400],
|
|
303
|
+
placeholder: COLOR_TOKENS.secondary[300], // Soft gray for input placeholders
|
|
303
304
|
// Borders use Light Gray
|
|
304
305
|
border: COLOR_TOKENS.brand.lightGray,
|
|
305
306
|
'border-focus': COLOR_TOKENS.brand.lightBlue,
|
|
@@ -335,6 +336,7 @@ const DARK_THEME = {
|
|
|
335
336
|
text: COLOR_TOKENS.brand.white,
|
|
336
337
|
'text-secondary': COLOR_TOKENS.brand.lightGray,
|
|
337
338
|
'text-disabled': COLOR_TOKENS.secondary[500],
|
|
339
|
+
placeholder: COLOR_TOKENS.secondary[500], // Soft gray for placeholders on dark theme
|
|
338
340
|
// Borders use medium gray
|
|
339
341
|
border: COLOR_TOKENS.secondary[600],
|
|
340
342
|
'border-focus': COLOR_TOKENS.brand.lightBlue,
|
|
@@ -370,6 +372,7 @@ const BRAND_THEME = {
|
|
|
370
372
|
text: COLOR_TOKENS.brand.darkGray, // #383838
|
|
371
373
|
'text-secondary': COLOR_TOKENS.secondary[600],
|
|
372
374
|
'text-disabled': COLOR_TOKENS.secondary[400],
|
|
375
|
+
placeholder: COLOR_TOKENS.secondary[300], // Soft gray for input placeholders
|
|
373
376
|
// Border: Light Gray from brand guidelines
|
|
374
377
|
border: COLOR_TOKENS.brand.lightGray, // #cecece
|
|
375
378
|
'border-focus': COLOR_TOKENS.brand.lightBlue, // #55C3D8
|
|
@@ -963,6 +966,8 @@ class BadgeComponent {
|
|
|
963
966
|
max;
|
|
964
967
|
/** Badge value (number or text) */
|
|
965
968
|
value;
|
|
969
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
970
|
+
borderRadius = 'md';
|
|
966
971
|
/** Additional CSS classes */
|
|
967
972
|
class = '';
|
|
968
973
|
get badgeClasses() {
|
|
@@ -970,6 +975,7 @@ class BadgeComponent {
|
|
|
970
975
|
'sefin-badge',
|
|
971
976
|
`sefin-badge--${this.variant}`,
|
|
972
977
|
`sefin-badge--${this.size}`,
|
|
978
|
+
`sefin-badge--radius-${this.borderRadius}`,
|
|
973
979
|
this.dot ? 'sefin-badge--dot' : '',
|
|
974
980
|
this.class,
|
|
975
981
|
]
|
|
@@ -992,11 +998,11 @@ class BadgeComponent {
|
|
|
992
998
|
return String(this.value);
|
|
993
999
|
}
|
|
994
1000
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: BadgeComponent, isStandalone: true, selector: "sefin-badge", inputs: { variant: "variant", size: "size", dot: "dot", max: "max", value: "value", class: "class" }, ngImport: i0, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-radius-
|
|
1001
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: BadgeComponent, isStandalone: true, selector: "sefin-badge", inputs: { variant: "variant", size: "size", dot: "dot", max: "max", value: "value", borderRadius: "borderRadius", class: "class" }, ngImport: i0, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-radius-md);white-space:nowrap}.sefin-badge--radius-none{border-radius:var(--sefin-radius-none)}.sefin-badge--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-badge--radius-md{border-radius:var(--sefin-radius-md)}.sefin-badge--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-badge--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-badge--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-badge--radius-full{border-radius:var(--sefin-radius-full)}.sefin-badge{vertical-align:middle;box-sizing:border-box}.sefin-badge--sm{min-width:var(--sefin-control-size-sm);height:var(--sefin-control-size-sm);padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 10px)}.sefin-badge--sm:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-xs, 4px)}.sefin-badge--md{min-width:var(--sefin-control-size-md);height:var(--sefin-control-size-md);padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 11px)}.sefin-badge--md:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-sm, 6px)}.sefin-badge--lg{min-width:var(--sefin-control-size-lg);height:var(--sefin-control-size-lg);padding:0 var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-badge--lg:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-md, 8px)}.sefin-badge--dot{width:8px;height:8px;min-width:8px;padding:0;border-radius:50%!important}.sefin-badge--dot.sefin-badge--sm{width:6px;height:6px;min-width:6px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--md{width:8px;height:8px;min-width:8px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--lg{width:10px;height:10px;min-width:10px;border-radius:50%!important}.sefin-badge--default{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-badge--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-badge--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-badge--success{background-color:var(--sefin-color-success);color:#fff}.sefin-badge--warning{background-color:var(--sefin-color-warning);color:#fff}.sefin-badge--error{background-color:var(--sefin-color-error);color:#fff}.sefin-badge__content{display:inline-block;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
996
1002
|
}
|
|
997
1003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
998
1004
|
type: Component,
|
|
999
|
-
args: [{ selector: 'sefin-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-radius-
|
|
1005
|
+
args: [{ selector: 'sefin-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-radius-md);white-space:nowrap}.sefin-badge--radius-none{border-radius:var(--sefin-radius-none)}.sefin-badge--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-badge--radius-md{border-radius:var(--sefin-radius-md)}.sefin-badge--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-badge--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-badge--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-badge--radius-full{border-radius:var(--sefin-radius-full)}.sefin-badge{vertical-align:middle;box-sizing:border-box}.sefin-badge--sm{min-width:var(--sefin-control-size-sm);height:var(--sefin-control-size-sm);padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 10px)}.sefin-badge--sm:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-xs, 4px)}.sefin-badge--md{min-width:var(--sefin-control-size-md);height:var(--sefin-control-size-md);padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 11px)}.sefin-badge--md:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-sm, 6px)}.sefin-badge--lg{min-width:var(--sefin-control-size-lg);height:var(--sefin-control-size-lg);padding:0 var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-badge--lg:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-md, 8px)}.sefin-badge--dot{width:8px;height:8px;min-width:8px;padding:0;border-radius:50%!important}.sefin-badge--dot.sefin-badge--sm{width:6px;height:6px;min-width:6px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--md{width:8px;height:8px;min-width:8px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--lg{width:10px;height:10px;min-width:10px;border-radius:50%!important}.sefin-badge--default{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-badge--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-badge--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-badge--success{background-color:var(--sefin-color-success);color:#fff}.sefin-badge--warning{background-color:var(--sefin-color-warning);color:#fff}.sefin-badge--error{background-color:var(--sefin-color-error);color:#fff}.sefin-badge__content{display:inline-block;line-height:1}\n"] }]
|
|
1000
1006
|
}], propDecorators: { variant: [{
|
|
1001
1007
|
type: Input
|
|
1002
1008
|
}], size: [{
|
|
@@ -1007,6 +1013,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1007
1013
|
type: Input
|
|
1008
1014
|
}], value: [{
|
|
1009
1015
|
type: Input
|
|
1016
|
+
}], borderRadius: [{
|
|
1017
|
+
type: Input
|
|
1010
1018
|
}], class: [{
|
|
1011
1019
|
type: Input
|
|
1012
1020
|
}] } });
|
|
@@ -1022,6 +1030,12 @@ class ButtonComponent {
|
|
|
1022
1030
|
fullWidth = false;
|
|
1023
1031
|
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
1024
1032
|
type = 'button';
|
|
1033
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1034
|
+
borderRadius = 'md';
|
|
1035
|
+
/** @deprecated Use borderRadius instead. Kept for backward compatibility. */
|
|
1036
|
+
set rounded(value) {
|
|
1037
|
+
this.borderRadius = value;
|
|
1038
|
+
}
|
|
1025
1039
|
/** Additional CSS classes */
|
|
1026
1040
|
class = '';
|
|
1027
1041
|
clicked = new EventEmitter();
|
|
@@ -1035,6 +1049,7 @@ class ButtonComponent {
|
|
|
1035
1049
|
'sefin-button',
|
|
1036
1050
|
`sefin-button--${this.variant}`,
|
|
1037
1051
|
`sefin-button--${this.size}`,
|
|
1052
|
+
`sefin-button--radius-${this.borderRadius}`,
|
|
1038
1053
|
this.fullWidth ? 'sefin-button--full-width' : '',
|
|
1039
1054
|
this.disabled ? 'sefin-button--disabled' : '',
|
|
1040
1055
|
this.class,
|
|
@@ -1043,11 +1058,11 @@ class ButtonComponent {
|
|
|
1043
1058
|
.join(' ');
|
|
1044
1059
|
}
|
|
1045
1060
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);
|
|
1061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", fullWidth: "fullWidth", type: "type", borderRadius: "borderRadius", rounded: "rounded", 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:flex;align-items:center;justify-content:center;width:100%;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;cursor:pointer;outline:none;border:1px solid transparent;box-sizing:border-box}.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{height:var(--sefin-component-height-sm);padding:0 var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm)}.sefin-button--md{height:var(--sefin-component-height-md);padding:0 var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base)}.sefin-button--lg{height:var(--sefin-component-height-lg);padding:0 var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg)}.sefin-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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 });
|
|
1047
1062
|
}
|
|
1048
1063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1049
1064
|
type: Component,
|
|
1050
|
-
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:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);
|
|
1065
|
+
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:flex;align-items:center;justify-content:center;width:100%;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;cursor:pointer;outline:none;border:1px solid transparent;box-sizing:border-box}.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{height:var(--sefin-component-height-sm);padding:0 var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm)}.sefin-button--md{height:var(--sefin-component-height-md);padding:0 var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base)}.sefin-button--lg{height:var(--sefin-component-height-lg);padding:0 var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg)}.sefin-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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:var(--sefin-color-brand-white)}.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"] }]
|
|
1051
1066
|
}], propDecorators: { variant: [{
|
|
1052
1067
|
type: Input
|
|
1053
1068
|
}], size: [{
|
|
@@ -1058,6 +1073,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1058
1073
|
type: Input
|
|
1059
1074
|
}], type: [{
|
|
1060
1075
|
type: Input
|
|
1076
|
+
}], borderRadius: [{
|
|
1077
|
+
type: Input
|
|
1078
|
+
}], rounded: [{
|
|
1079
|
+
type: Input
|
|
1061
1080
|
}], class: [{
|
|
1062
1081
|
type: Input
|
|
1063
1082
|
}], clicked: [{
|
|
@@ -1078,6 +1097,8 @@ class IconTileComponent {
|
|
|
1078
1097
|
shape = 'rounded';
|
|
1079
1098
|
/** Tile size. Options: 'sm' | 'md' | 'lg' */
|
|
1080
1099
|
size = 'md';
|
|
1100
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md (applies when shape is 'rounded') */
|
|
1101
|
+
borderRadius = 'md';
|
|
1081
1102
|
/** Disabled state (reduces opacity, decorative only) */
|
|
1082
1103
|
disabled = false;
|
|
1083
1104
|
/** Additional CSS classes */
|
|
@@ -1087,6 +1108,7 @@ class IconTileComponent {
|
|
|
1087
1108
|
'sefin-icon-tile',
|
|
1088
1109
|
`sefin-icon-tile--${this.variant}`,
|
|
1089
1110
|
`sefin-icon-tile--${this.shape}`,
|
|
1111
|
+
`sefin-icon-tile--radius-${this.borderRadius}`,
|
|
1090
1112
|
`sefin-icon-tile--${this.size}`,
|
|
1091
1113
|
this.disabled ? 'sefin-icon-tile--disabled' : '',
|
|
1092
1114
|
this.class,
|
|
@@ -1103,11 +1125,11 @@ class IconTileComponent {
|
|
|
1103
1125
|
return map[this.size];
|
|
1104
1126
|
}
|
|
1105
1127
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconTileComponent, isStandalone: true, selector: "sefin-icon-tile", inputs: { icon: "icon", variant: "variant", shape: "shape", size: "size", disabled: "disabled", class: "class" }, ngImport: i0, template: "<div [class]=\"tileClasses\" role=\"img\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"icon\" [size]=\"iconSize\" color=\"#ffffff\" class=\"sefin-icon-tile__icon\"></sefin-icon>\n</div>\n", styles: [".sefin-icon-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background-color:var(--sefin-color-primary, #55C3D8);box-sizing:border-box;color:#fff}.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-
|
|
1128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconTileComponent, isStandalone: true, selector: "sefin-icon-tile", inputs: { icon: "icon", variant: "variant", shape: "shape", size: "size", borderRadius: "borderRadius", disabled: "disabled", class: "class" }, ngImport: i0, template: "<div [class]=\"tileClasses\" role=\"img\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"icon\" [size]=\"iconSize\" color=\"#ffffff\" class=\"sefin-icon-tile__icon\"></sefin-icon>\n</div>\n", styles: [".sefin-icon-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background-color:var(--sefin-color-primary, #55C3D8);box-sizing:border-box;color:#fff}.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-md)}.sefin-icon-tile--square{border-radius:0}.sefin-icon-tile--radius-none.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-none)}.sefin-icon-tile--radius-sm.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-sm)}.sefin-icon-tile--radius-md.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-md)}.sefin-icon-tile--radius-lg.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-lg)}.sefin-icon-tile--radius-xl.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-xl)}.sefin-icon-tile--radius-2xl.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-2xl)}.sefin-icon-tile--radius-full.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-full)}.sefin-icon-tile__icon{color:#fff}.sefin-icon-tile__icon ::ng-deep svg{color:#fff;stroke:currentColor}.sefin-icon-tile--sm{width:40px;height:40px}.sefin-icon-tile--md{width:56px;height:56px}.sefin-icon-tile--lg{width:72px;height:72px}.sefin-icon-tile--default{box-shadow:none}.sefin-icon-tile--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-icon-tile--disabled{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1107
1129
|
}
|
|
1108
1130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconTileComponent, decorators: [{
|
|
1109
1131
|
type: Component,
|
|
1110
|
-
args: [{ selector: 'sefin-icon-tile', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"tileClasses\" role=\"img\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"icon\" [size]=\"iconSize\" color=\"#ffffff\" class=\"sefin-icon-tile__icon\"></sefin-icon>\n</div>\n", styles: [".sefin-icon-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background-color:var(--sefin-color-primary, #55C3D8);box-sizing:border-box;color:#fff}.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-
|
|
1132
|
+
args: [{ selector: 'sefin-icon-tile', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"tileClasses\" role=\"img\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"icon\" [size]=\"iconSize\" color=\"#ffffff\" class=\"sefin-icon-tile__icon\"></sefin-icon>\n</div>\n", styles: [".sefin-icon-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background-color:var(--sefin-color-primary, #55C3D8);box-sizing:border-box;color:#fff}.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-md)}.sefin-icon-tile--square{border-radius:0}.sefin-icon-tile--radius-none.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-none)}.sefin-icon-tile--radius-sm.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-sm)}.sefin-icon-tile--radius-md.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-md)}.sefin-icon-tile--radius-lg.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-lg)}.sefin-icon-tile--radius-xl.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-xl)}.sefin-icon-tile--radius-2xl.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-2xl)}.sefin-icon-tile--radius-full.sefin-icon-tile--rounded{border-radius:var(--sefin-radius-full)}.sefin-icon-tile__icon{color:#fff}.sefin-icon-tile__icon ::ng-deep svg{color:#fff;stroke:currentColor}.sefin-icon-tile--sm{width:40px;height:40px}.sefin-icon-tile--md{width:56px;height:56px}.sefin-icon-tile--lg{width:72px;height:72px}.sefin-icon-tile--default{box-shadow:none}.sefin-icon-tile--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-icon-tile--disabled{opacity:.5}\n"] }]
|
|
1111
1133
|
}], propDecorators: { icon: [{
|
|
1112
1134
|
type: Input
|
|
1113
1135
|
}], variant: [{
|
|
@@ -1116,6 +1138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1116
1138
|
type: Input
|
|
1117
1139
|
}], size: [{
|
|
1118
1140
|
type: Input
|
|
1141
|
+
}], borderRadius: [{
|
|
1142
|
+
type: Input
|
|
1119
1143
|
}], disabled: [{
|
|
1120
1144
|
type: Input
|
|
1121
1145
|
}], class: [{
|
|
@@ -1135,8 +1159,12 @@ class IconButtonComponent {
|
|
|
1135
1159
|
class = '';
|
|
1136
1160
|
/** Accessibility label for the button */
|
|
1137
1161
|
ariaLabel = '';
|
|
1138
|
-
/**
|
|
1139
|
-
|
|
1162
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1163
|
+
borderRadius = 'md';
|
|
1164
|
+
/** @deprecated Use borderRadius="full" instead. Whether the button should be rounded (circular) */
|
|
1165
|
+
set rounded(value) {
|
|
1166
|
+
this.borderRadius = value ? 'full' : 'md';
|
|
1167
|
+
}
|
|
1140
1168
|
clicked = new EventEmitter();
|
|
1141
1169
|
onClick(event) {
|
|
1142
1170
|
if (!this.disabled) {
|
|
@@ -1148,19 +1176,19 @@ class IconButtonComponent {
|
|
|
1148
1176
|
'sefin-icon-button',
|
|
1149
1177
|
`sefin-icon-button--${this.variant}`,
|
|
1150
1178
|
`sefin-icon-button--${this.size}`,
|
|
1179
|
+
`sefin-icon-button--radius-${this.borderRadius}`,
|
|
1151
1180
|
this.disabled ? 'sefin-icon-button--disabled' : '',
|
|
1152
|
-
this.rounded ? 'sefin-icon-button--rounded' : '',
|
|
1153
1181
|
this.class,
|
|
1154
1182
|
]
|
|
1155
1183
|
.filter(Boolean)
|
|
1156
1184
|
.join(' ');
|
|
1157
1185
|
}
|
|
1158
1186
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out
|
|
1187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", borderRadius: "borderRadius", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-icon-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-icon-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-icon-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-icon-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-icon-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-icon-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-icon-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-icon-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-sizing:border-box}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm)}.sefin-icon-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md)}.sefin-icon-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg)}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:var(--sefin-color-brand-white)}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:var(--sefin-color-brand-white)}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-icon-button--md svg{width:var(--sefin-icon-size-md);height:var(--sefin-icon-size-md)}.sefin-icon-button--lg svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1160
1188
|
}
|
|
1161
1189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
1162
1190
|
type: Component,
|
|
1163
|
-
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out
|
|
1191
|
+
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-icon-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-icon-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-icon-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-icon-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-icon-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-icon-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-icon-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-icon-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-sizing:border-box}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm)}.sefin-icon-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md)}.sefin-icon-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg)}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:var(--sefin-color-brand-white)}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:var(--sefin-color-brand-white)}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:var(--sefin-color-brand-white)}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-icon-button--md svg{width:var(--sefin-icon-size-md);height:var(--sefin-icon-size-md)}.sefin-icon-button--lg svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}\n"] }]
|
|
1164
1192
|
}], propDecorators: { variant: [{
|
|
1165
1193
|
type: Input
|
|
1166
1194
|
}], size: [{
|
|
@@ -1173,6 +1201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1173
1201
|
type: Input
|
|
1174
1202
|
}], ariaLabel: [{
|
|
1175
1203
|
type: Input
|
|
1204
|
+
}], borderRadius: [{
|
|
1205
|
+
type: Input
|
|
1176
1206
|
}], rounded: [{
|
|
1177
1207
|
type: Input
|
|
1178
1208
|
}], clicked: [{
|
|
@@ -1192,6 +1222,8 @@ class FabButtonComponent {
|
|
|
1192
1222
|
class = '';
|
|
1193
1223
|
/** Accessibility label for the button */
|
|
1194
1224
|
ariaLabel = '';
|
|
1225
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1226
|
+
borderRadius = 'md';
|
|
1195
1227
|
clicked = new EventEmitter();
|
|
1196
1228
|
onClick(event) {
|
|
1197
1229
|
if (!this.disabled) {
|
|
@@ -1203,6 +1235,7 @@ class FabButtonComponent {
|
|
|
1203
1235
|
'sefin-fab-button',
|
|
1204
1236
|
`sefin-fab-button--${this.variant}`,
|
|
1205
1237
|
`sefin-fab-button--${this.size}`,
|
|
1238
|
+
`sefin-fab-button--radius-${this.borderRadius}`,
|
|
1206
1239
|
this.disabled ? 'sefin-fab-button--disabled' : '',
|
|
1207
1240
|
this.class,
|
|
1208
1241
|
]
|
|
@@ -1210,11 +1243,11 @@ class FabButtonComponent {
|
|
|
1210
1243
|
.join(' ');
|
|
1211
1244
|
}
|
|
1212
1245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1213
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: FabButtonComponent, isStandalone: true, selector: "sefin-fab-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:
|
|
1246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: FabButtonComponent, isStandalone: true, selector: "sefin-fab-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", borderRadius: "borderRadius" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-fab-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-fab-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-fab-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-fab-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-fab-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-fab-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-fab-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-fab-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-shadow:var(--sefin-shadow-lg);position:relative;box-sizing:border-box}.sefin-fab-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-fab-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-lg)}.sefin-fab-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg);box-shadow:var(--sefin-shadow-xl)}.sefin-fab-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-fab-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-fab-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff;box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--outline:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--ghost:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-fab-button--danger:hover:not(:disabled){opacity:.9;box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--danger:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button svg,.sefin-fab-button sefin-icon{display:block;flex-shrink:0}.sefin-fab-button--sm sefin-icon{width:20px;height:20px}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md sefin-icon{width:24px;height:24px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg sefin-icon{width:28px;height:28px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1214
1247
|
}
|
|
1215
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FabButtonComponent, decorators: [{
|
|
1216
1249
|
type: Component,
|
|
1217
|
-
args: [{ selector: 'sefin-fab-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:
|
|
1250
|
+
args: [{ selector: 'sefin-fab-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out}.sefin-fab-button--radius-none{border-radius:var(--sefin-radius-none)}.sefin-fab-button--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-fab-button--radius-md{border-radius:var(--sefin-radius-md)}.sefin-fab-button--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-fab-button--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-fab-button--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-fab-button--radius-full{border-radius:var(--sefin-radius-full)}.sefin-fab-button{cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-shadow:var(--sefin-shadow-lg);position:relative;box-sizing:border-box}.sefin-fab-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-fab-button--sm{width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);min-width:var(--sefin-component-height-sm);min-height:var(--sefin-component-height-sm);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--md{width:var(--sefin-component-height-md);height:var(--sefin-component-height-md);min-width:var(--sefin-component-height-md);min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-lg)}.sefin-fab-button--lg{width:var(--sefin-component-height-lg);height:var(--sefin-component-height-lg);min-width:var(--sefin-component-height-lg);min-height:var(--sefin-component-height-lg);box-shadow:var(--sefin-shadow-xl)}.sefin-fab-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-fab-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-fab-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff;box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--outline:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--ghost:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-fab-button--danger:hover:not(:disabled){opacity:.9;box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--danger:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button svg,.sefin-fab-button sefin-icon{display:block;flex-shrink:0}.sefin-fab-button--sm sefin-icon{width:20px;height:20px}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md sefin-icon{width:24px;height:24px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg sefin-icon{width:28px;height:28px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"] }]
|
|
1218
1251
|
}], propDecorators: { variant: [{
|
|
1219
1252
|
type: Input
|
|
1220
1253
|
}], size: [{
|
|
@@ -1227,6 +1260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1227
1260
|
type: Input
|
|
1228
1261
|
}], ariaLabel: [{
|
|
1229
1262
|
type: Input
|
|
1263
|
+
}], borderRadius: [{
|
|
1264
|
+
type: Input
|
|
1230
1265
|
}], clicked: [{
|
|
1231
1266
|
type: Output
|
|
1232
1267
|
}] } });
|
|
@@ -1242,6 +1277,8 @@ class ChipComponent {
|
|
|
1242
1277
|
removable = false;
|
|
1243
1278
|
/** Whether the chip is selected (for selectable chips) */
|
|
1244
1279
|
selected = false;
|
|
1280
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1281
|
+
borderRadius = 'md';
|
|
1245
1282
|
/** Additional CSS classes */
|
|
1246
1283
|
class = '';
|
|
1247
1284
|
removed = new EventEmitter();
|
|
@@ -1262,6 +1299,7 @@ class ChipComponent {
|
|
|
1262
1299
|
'sefin-chip',
|
|
1263
1300
|
`sefin-chip--${this.variant}`,
|
|
1264
1301
|
`sefin-chip--${this.size}`,
|
|
1302
|
+
`sefin-chip--radius-${this.borderRadius}`,
|
|
1265
1303
|
this.disabled ? 'sefin-chip--disabled' : '',
|
|
1266
1304
|
this.selected ? 'sefin-chip--selected' : '',
|
|
1267
1305
|
this.class,
|
|
@@ -1270,11 +1308,11 @@ class ChipComponent {
|
|
|
1270
1308
|
.join(' ');
|
|
1271
1309
|
}
|
|
1272
1310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ChipComponent, isStandalone: true, selector: "sefin-chip", inputs: { variant: "variant", size: "size", disabled: "disabled", removable: "removable", selected: "selected", class: "class" }, outputs: { removed: "removed", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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-
|
|
1311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ChipComponent, isStandalone: true, selector: "sefin-chip", inputs: { variant: "variant", size: "size", disabled: "disabled", removable: "removable", selected: "selected", borderRadius: "borderRadius", class: "class" }, outputs: { removed: "removed", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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}.sefin-chip--radius-none{border-radius:var(--sefin-radius-none)}.sefin-chip--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-chip--radius-md{border-radius:var(--sefin-radius-md)}.sefin-chip--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-chip--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-chip--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-chip--radius-full{border-radius:var(--sefin-radius-full)}.sefin-chip{cursor:pointer;outline:none;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-chip:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-chip--sm{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);font-size:var(--sefin-font-size-xs);min-height:var(--sefin-chip-height-sm)}.sefin-chip--md{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-chip-height-md)}.sefin-chip--lg{padding:var(--sefin-spacing-sm) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-chip-height-lg)}.sefin-chip--default{background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-chip--default:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--default.sefin-chip--selected,.sefin-chip--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-chip--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-chip--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-chip--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-chip--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-chip--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--outline.sefin-chip--selected{background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--ghost{background-color:transparent;color:var(--sefin-color-text)}.sefin-chip--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--ghost.sefin-chip--selected{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-chip--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-chip__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-chip__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out;border-radius:50%;width:16px;height:16px;flex-shrink:0}.sefin-chip__remove:hover{opacity:1;background-color:#0000001a}.sefin-chip__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-chip__remove svg{display:block;width:12px;height:12px}.sefin-chip ::ng-deep svg,.sefin-chip ::ng-deep sefin-icon{flex-shrink:0}.sefin-chip--sm ::ng-deep svg{width:12px;height:12px}.sefin-chip--md ::ng-deep svg{width:14px;height:14px}.sefin-chip--lg ::ng-deep svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1274
1312
|
}
|
|
1275
1313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChipComponent, decorators: [{
|
|
1276
1314
|
type: Component,
|
|
1277
|
-
args: [{ selector: 'sefin-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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-
|
|
1315
|
+
args: [{ selector: 'sefin-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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}.sefin-chip--radius-none{border-radius:var(--sefin-radius-none)}.sefin-chip--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-chip--radius-md{border-radius:var(--sefin-radius-md)}.sefin-chip--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-chip--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-chip--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-chip--radius-full{border-radius:var(--sefin-radius-full)}.sefin-chip{cursor:pointer;outline:none;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-chip:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-chip--sm{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);font-size:var(--sefin-font-size-xs);min-height:var(--sefin-chip-height-sm)}.sefin-chip--md{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-chip-height-md)}.sefin-chip--lg{padding:var(--sefin-spacing-sm) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-chip-height-lg)}.sefin-chip--default{background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-chip--default:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--default.sefin-chip--selected,.sefin-chip--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-chip--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-chip--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-chip--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-chip--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-chip--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--outline.sefin-chip--selected{background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--ghost{background-color:transparent;color:var(--sefin-color-text)}.sefin-chip--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--ghost.sefin-chip--selected{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-chip--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-chip__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-chip__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out;border-radius:50%;width:16px;height:16px;flex-shrink:0}.sefin-chip__remove:hover{opacity:1;background-color:#0000001a}.sefin-chip__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-chip__remove svg{display:block;width:12px;height:12px}.sefin-chip ::ng-deep svg,.sefin-chip ::ng-deep sefin-icon{flex-shrink:0}.sefin-chip--sm ::ng-deep svg{width:12px;height:12px}.sefin-chip--md ::ng-deep svg{width:14px;height:14px}.sefin-chip--lg ::ng-deep svg{width:16px;height:16px}\n"] }]
|
|
1278
1316
|
}], propDecorators: { variant: [{
|
|
1279
1317
|
type: Input
|
|
1280
1318
|
}], size: [{
|
|
@@ -1285,6 +1323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1285
1323
|
type: Input
|
|
1286
1324
|
}], selected: [{
|
|
1287
1325
|
type: Input
|
|
1326
|
+
}], borderRadius: [{
|
|
1327
|
+
type: Input
|
|
1288
1328
|
}], class: [{
|
|
1289
1329
|
type: Input
|
|
1290
1330
|
}], removed: [{
|
|
@@ -1304,6 +1344,8 @@ class TagComponent {
|
|
|
1304
1344
|
removable = false;
|
|
1305
1345
|
/** Whether the tag is disabled */
|
|
1306
1346
|
disabled = false;
|
|
1347
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1348
|
+
borderRadius = 'md';
|
|
1307
1349
|
/** Additional CSS classes */
|
|
1308
1350
|
class = '';
|
|
1309
1351
|
/** Event emitted when the tag is removed */
|
|
@@ -1319,6 +1361,7 @@ class TagComponent {
|
|
|
1319
1361
|
'sefin-tag',
|
|
1320
1362
|
`sefin-tag--${this.variant}`,
|
|
1321
1363
|
`sefin-tag--${this.size}`,
|
|
1364
|
+
`sefin-tag--radius-${this.borderRadius}`,
|
|
1322
1365
|
this.disabled ? 'sefin-tag--disabled' : '',
|
|
1323
1366
|
this.class,
|
|
1324
1367
|
]
|
|
@@ -1333,11 +1376,11 @@ class TagComponent {
|
|
|
1333
1376
|
return 'sm';
|
|
1334
1377
|
}
|
|
1335
1378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1336
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TagComponent, isStandalone: true, selector: "sefin-tag", inputs: { variant: "variant", size: "size", icon: "icon", removable: "removable", disabled: "disabled", class: "class" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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-
|
|
1379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TagComponent, isStandalone: true, selector: "sefin-tag", inputs: { variant: "variant", size: "size", icon: "icon", removable: "removable", disabled: "disabled", borderRadius: "borderRadius", class: "class" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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);white-space:nowrap}.sefin-tag--radius-none{border-radius:var(--sefin-radius-none)}.sefin-tag--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-tag--radius-md{border-radius:var(--sefin-radius-md)}.sefin-tag--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-tag--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-tag--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-tag--radius-full{border-radius:var(--sefin-radius-full)}.sefin-tag{vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sefin-tag--sm{padding:var(--sefin-spacing-xs, 2px) var(--sefin-spacing-sm, 6px);font-size:var(--sefin-font-size-xs, 10px);min-height:var(--sefin-helper-height)}.sefin-tag--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px);min-height:var(--sefin-chip-height-sm)}.sefin-tag--lg{padding:var(--sefin-spacing-sm, 6px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-base, 14px);min-height:28px}.sefin-tag--default{background-color:var(--sefin-color-surface-hover, #f0f0f0);color:var(--sefin-color-text, #333);border:1px solid var(--sefin-color-border, #e0e0e0)}.sefin-tag--primary{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-primary-dark, #0d47a1);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--secondary{background-color:var(--sefin-color-secondary-light, #fce4ec);color:var(--sefin-color-secondary-dark, #880e4f);border:1px solid var(--sefin-color-secondary, #dc004e)}.sefin-tag--success{background-color:var(--sefin-color-success-light, #e8f5e9);color:var(--sefin-color-success-dark, #2e7d32);border:1px solid var(--sefin-color-success, #4caf50)}.sefin-tag--warning{background-color:var(--sefin-color-warning-light, #fff3e0);color:var(--sefin-color-warning-dark, #e65100);border:1px solid var(--sefin-color-warning, #ff9800)}.sefin-tag--error{background-color:var(--sefin-color-error-light, #ffebee);color:var(--sefin-color-error-dark, #c62828);border:1px solid var(--sefin-color-error, #f44336)}.sefin-tag--info{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-text, #1a1a1a);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tag__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-tag__icon{flex-shrink:0;display:inline-flex;align-items:center}.sefin-tag__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--sefin-radius-sm);width:16px;height:16px;flex-shrink:0}.sefin-tag__remove:hover{opacity:1;background-color:#0000001a}.sefin-tag__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-tag__remove svg{display:block;width:12px;height:12px}.sefin-tag ::ng-deep svg,.sefin-tag ::ng-deep sefin-icon{flex-shrink:0}.sefin-tag--sm ::ng-deep svg{width:10px;height:10px}.sefin-tag--md ::ng-deep svg{width:12px;height:12px}.sefin-tag--lg ::ng-deep svg{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1337
1380
|
}
|
|
1338
1381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TagComponent, decorators: [{
|
|
1339
1382
|
type: Component,
|
|
1340
|
-
args: [{ selector: 'sefin-tag', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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-
|
|
1383
|
+
args: [{ selector: 'sefin-tag', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);width:100%;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);white-space:nowrap}.sefin-tag--radius-none{border-radius:var(--sefin-radius-none)}.sefin-tag--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-tag--radius-md{border-radius:var(--sefin-radius-md)}.sefin-tag--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-tag--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-tag--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-tag--radius-full{border-radius:var(--sefin-radius-full)}.sefin-tag{vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sefin-tag--sm{padding:var(--sefin-spacing-xs, 2px) var(--sefin-spacing-sm, 6px);font-size:var(--sefin-font-size-xs, 10px);min-height:var(--sefin-helper-height)}.sefin-tag--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px);min-height:var(--sefin-chip-height-sm)}.sefin-tag--lg{padding:var(--sefin-spacing-sm, 6px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-base, 14px);min-height:28px}.sefin-tag--default{background-color:var(--sefin-color-surface-hover, #f0f0f0);color:var(--sefin-color-text, #333);border:1px solid var(--sefin-color-border, #e0e0e0)}.sefin-tag--primary{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-primary-dark, #0d47a1);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--secondary{background-color:var(--sefin-color-secondary-light, #fce4ec);color:var(--sefin-color-secondary-dark, #880e4f);border:1px solid var(--sefin-color-secondary, #dc004e)}.sefin-tag--success{background-color:var(--sefin-color-success-light, #e8f5e9);color:var(--sefin-color-success-dark, #2e7d32);border:1px solid var(--sefin-color-success, #4caf50)}.sefin-tag--warning{background-color:var(--sefin-color-warning-light, #fff3e0);color:var(--sefin-color-warning-dark, #e65100);border:1px solid var(--sefin-color-warning, #ff9800)}.sefin-tag--error{background-color:var(--sefin-color-error-light, #ffebee);color:var(--sefin-color-error-dark, #c62828);border:1px solid var(--sefin-color-error, #f44336)}.sefin-tag--info{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-text, #1a1a1a);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tag__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-tag__icon{flex-shrink:0;display:inline-flex;align-items:center}.sefin-tag__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--sefin-radius-sm);width:16px;height:16px;flex-shrink:0}.sefin-tag__remove:hover{opacity:1;background-color:#0000001a}.sefin-tag__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-tag__remove svg{display:block;width:12px;height:12px}.sefin-tag ::ng-deep svg,.sefin-tag ::ng-deep sefin-icon{flex-shrink:0}.sefin-tag--sm ::ng-deep svg{width:10px;height:10px}.sefin-tag--md ::ng-deep svg{width:12px;height:12px}.sefin-tag--lg ::ng-deep svg{width:14px;height:14px}\n"] }]
|
|
1341
1384
|
}], propDecorators: { variant: [{
|
|
1342
1385
|
type: Input
|
|
1343
1386
|
}], size: [{
|
|
@@ -1348,6 +1391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1348
1391
|
type: Input
|
|
1349
1392
|
}], disabled: [{
|
|
1350
1393
|
type: Input
|
|
1394
|
+
}], borderRadius: [{
|
|
1395
|
+
type: Input
|
|
1351
1396
|
}], class: [{
|
|
1352
1397
|
type: Input
|
|
1353
1398
|
}], removed: [{
|
|
@@ -1792,6 +1837,8 @@ class SelectComponent {
|
|
|
1792
1837
|
errorMessage = '';
|
|
1793
1838
|
disabled = false;
|
|
1794
1839
|
size = 'md';
|
|
1840
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
1841
|
+
borderRadius = 'md';
|
|
1795
1842
|
class = '';
|
|
1796
1843
|
id = '';
|
|
1797
1844
|
value = null;
|
|
@@ -2010,6 +2057,7 @@ class SelectComponent {
|
|
|
2010
2057
|
return [
|
|
2011
2058
|
'sefin-select__button',
|
|
2012
2059
|
`sefin-select__button--${this.size}`,
|
|
2060
|
+
`sefin-select__button--radius-${this.borderRadius}`,
|
|
2013
2061
|
this.disabled ? 'sefin-select__button--disabled' : '',
|
|
2014
2062
|
this.isOpen ? 'sefin-select__button--open' : '',
|
|
2015
2063
|
this.hasErrorState ? 'sefin-select__button--error' : '',
|
|
@@ -2021,6 +2069,7 @@ class SelectComponent {
|
|
|
2021
2069
|
get containerClasses() {
|
|
2022
2070
|
return [
|
|
2023
2071
|
'sefin-select',
|
|
2072
|
+
`sefin-select--radius-${this.borderRadius}`,
|
|
2024
2073
|
this.isOpen ? 'sefin-select--open' : '',
|
|
2025
2074
|
this.hasErrorState ? 'sefin-select--error' : '',
|
|
2026
2075
|
]
|
|
@@ -2028,13 +2077,13 @@ class SelectComponent {
|
|
|
2028
2077
|
.join(' ');
|
|
2029
2078
|
}
|
|
2030
2079
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SelectComponent, isStandalone: true, selector: "sefin-select", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", class: "class", id: "id", value: "value" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown.escape": "onEscapeKey($event)" } }, providers: [
|
|
2080
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SelectComponent, isStandalone: true, selector: "sefin-select", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", borderRadius: "borderRadius", class: "class", id: "id", value: "value" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown.escape": "onEscapeKey($event)" } }, providers: [
|
|
2032
2081
|
{
|
|
2033
2082
|
provide: NG_VALUE_ACCESSOR,
|
|
2034
2083
|
useExisting: forwardRef(() => SelectComponent),
|
|
2035
2084
|
multi: true,
|
|
2036
2085
|
},
|
|
2037
|
-
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-select__helper\"\n [class.sefin-select__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-
|
|
2086
|
+
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-select__helper\"\n [class.sefin-select__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select--radius-none .sefin-select__button,.sefin-select--radius-none .sefin-select__dropdown{border-radius:var(--sefin-radius-none)}.sefin-select--radius-sm .sefin-select__button,.sefin-select--radius-sm .sefin-select__dropdown{border-radius:var(--sefin-radius-sm)}.sefin-select--radius-md .sefin-select__button,.sefin-select--radius-md .sefin-select__dropdown{border-radius:var(--sefin-radius-md)}.sefin-select--radius-lg .sefin-select__button,.sefin-select--radius-lg .sefin-select__dropdown{border-radius:var(--sefin-radius-lg)}.sefin-select--radius-xl .sefin-select__button,.sefin-select--radius-xl .sefin-select__dropdown{border-radius:var(--sefin-radius-xl)}.sefin-select--radius-2xl .sefin-select__button,.sefin-select--radius-2xl .sefin-select__dropdown{border-radius:var(--sefin-radius-2xl)}.sefin-select--radius-full .sefin-select__button,.sefin-select--radius-full .sefin-select__dropdown{border-radius:var(--sefin-radius-full)}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__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:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__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:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-placeholder)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\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 });
|
|
2038
2087
|
}
|
|
2039
2088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2040
2089
|
type: Component,
|
|
@@ -2044,7 +2093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2044
2093
|
useExisting: forwardRef(() => SelectComponent),
|
|
2045
2094
|
multi: true,
|
|
2046
2095
|
},
|
|
2047
|
-
], template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-select__helper\"\n [class.sefin-select__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-
|
|
2096
|
+
], template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-select__helper\"\n [class.sefin-select__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select--radius-none .sefin-select__button,.sefin-select--radius-none .sefin-select__dropdown{border-radius:var(--sefin-radius-none)}.sefin-select--radius-sm .sefin-select__button,.sefin-select--radius-sm .sefin-select__dropdown{border-radius:var(--sefin-radius-sm)}.sefin-select--radius-md .sefin-select__button,.sefin-select--radius-md .sefin-select__dropdown{border-radius:var(--sefin-radius-md)}.sefin-select--radius-lg .sefin-select__button,.sefin-select--radius-lg .sefin-select__dropdown{border-radius:var(--sefin-radius-lg)}.sefin-select--radius-xl .sefin-select__button,.sefin-select--radius-xl .sefin-select__dropdown{border-radius:var(--sefin-radius-xl)}.sefin-select--radius-2xl .sefin-select__button,.sefin-select--radius-2xl .sefin-select__dropdown{border-radius:var(--sefin-radius-2xl)}.sefin-select--radius-full .sefin-select__button,.sefin-select--radius-full .sefin-select__dropdown{border-radius:var(--sefin-radius-full)}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__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:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__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:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-placeholder)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
|
|
2048
2097
|
}], propDecorators: { containerRef: [{
|
|
2049
2098
|
type: ViewChild,
|
|
2050
2099
|
args: ['containerRef', { static: false }]
|
|
@@ -2068,6 +2117,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2068
2117
|
type: Input
|
|
2069
2118
|
}], size: [{
|
|
2070
2119
|
type: Input
|
|
2120
|
+
}], borderRadius: [{
|
|
2121
|
+
type: Input
|
|
2071
2122
|
}], class: [{
|
|
2072
2123
|
type: Input
|
|
2073
2124
|
}], id: [{
|
|
@@ -2309,6 +2360,8 @@ class ProgressBarComponent {
|
|
|
2309
2360
|
showLabel = false;
|
|
2310
2361
|
/** Whether the progress bar is in indeterminate state (animated) */
|
|
2311
2362
|
indeterminate = false;
|
|
2363
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
2364
|
+
borderRadius = 'md';
|
|
2312
2365
|
/** Additional CSS classes */
|
|
2313
2366
|
class = '';
|
|
2314
2367
|
get progressBarClasses() {
|
|
@@ -2316,6 +2369,7 @@ class ProgressBarComponent {
|
|
|
2316
2369
|
'sefin-progress-bar',
|
|
2317
2370
|
`sefin-progress-bar--${this.size}`,
|
|
2318
2371
|
`sefin-progress-bar--${this.variant}`,
|
|
2372
|
+
`sefin-progress-bar--radius-${this.borderRadius}`,
|
|
2319
2373
|
this.indeterminate ? 'sefin-progress-bar--indeterminate' : '',
|
|
2320
2374
|
this.class,
|
|
2321
2375
|
]
|
|
@@ -2329,11 +2383,11 @@ class ProgressBarComponent {
|
|
|
2329
2383
|
return `${Math.round(this.clampedValue)}%`;
|
|
2330
2384
|
}
|
|
2331
2385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2332
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ProgressBarComponent, isStandalone: true, selector: "sefin-progress-bar", inputs: { value: "value", variant: "variant", size: "size", showLabel: "showLabel", indeterminate: "indeterminate", class: "class" }, ngImport: i0, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-radius-
|
|
2386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ProgressBarComponent, isStandalone: true, selector: "sefin-progress-bar", inputs: { value: "value", variant: "variant", size: "size", showLabel: "showLabel", indeterminate: "indeterminate", borderRadius: "borderRadius", class: "class" }, ngImport: i0, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar--radius-none .sefin-progress-bar__track,.sefin-progress-bar--radius-none .sefin-progress-bar__fill{border-radius:var(--sefin-radius-none)}.sefin-progress-bar--radius-sm .sefin-progress-bar__track,.sefin-progress-bar--radius-sm .sefin-progress-bar__fill{border-radius:var(--sefin-radius-sm)}.sefin-progress-bar--radius-md .sefin-progress-bar__track,.sefin-progress-bar--radius-md .sefin-progress-bar__fill{border-radius:var(--sefin-radius-md)}.sefin-progress-bar--radius-lg .sefin-progress-bar__track,.sefin-progress-bar--radius-lg .sefin-progress-bar__fill{border-radius:var(--sefin-radius-lg)}.sefin-progress-bar--radius-xl .sefin-progress-bar__track,.sefin-progress-bar--radius-xl .sefin-progress-bar__fill{border-radius:var(--sefin-radius-xl)}.sefin-progress-bar--radius-2xl .sefin-progress-bar__track,.sefin-progress-bar--radius-2xl .sefin-progress-bar__fill{border-radius:var(--sefin-radius-2xl)}.sefin-progress-bar--radius-full .sefin-progress-bar__track,.sefin-progress-bar--radius-full .sefin-progress-bar__fill{border-radius:var(--sefin-radius-full)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-radius-md);overflow:hidden;box-sizing:border-box}.sefin-progress-bar__fill{height:100%;background-color:var(--sefin-color-primary, #1976d2);border-radius:var(--sefin-radius-md);transition:width .3s ease-in-out;box-sizing:border-box}.sefin-progress-bar--primary .sefin-progress-bar__fill{background-color:var(--sefin-color-primary, #1976d2)}.sefin-progress-bar--secondary .sefin-progress-bar__fill{background-color:var(--sefin-color-secondary, #dc004e)}.sefin-progress-bar--success .sefin-progress-bar__fill{background-color:var(--sefin-color-success, #4caf50)}.sefin-progress-bar--warning .sefin-progress-bar__fill{background-color:var(--sefin-color-warning, #ff9800)}.sefin-progress-bar--error .sefin-progress-bar__fill{background-color:var(--sefin-color-error, #f44336)}.sefin-progress-bar--indeterminate .sefin-progress-bar__fill{width:30%!important;animation:sefin-progress-bar-indeterminate 1.5s ease-in-out infinite}.sefin-progress-bar__label{font-family:var(--sefin-font-family-base, sans-serif);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #333);line-height:1;text-align:left}@keyframes sefin-progress-bar-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(400%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2333
2387
|
}
|
|
2334
2388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2335
2389
|
type: Component,
|
|
2336
|
-
args: [{ selector: 'sefin-progress-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-radius-
|
|
2390
|
+
args: [{ selector: 'sefin-progress-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar--radius-none .sefin-progress-bar__track,.sefin-progress-bar--radius-none .sefin-progress-bar__fill{border-radius:var(--sefin-radius-none)}.sefin-progress-bar--radius-sm .sefin-progress-bar__track,.sefin-progress-bar--radius-sm .sefin-progress-bar__fill{border-radius:var(--sefin-radius-sm)}.sefin-progress-bar--radius-md .sefin-progress-bar__track,.sefin-progress-bar--radius-md .sefin-progress-bar__fill{border-radius:var(--sefin-radius-md)}.sefin-progress-bar--radius-lg .sefin-progress-bar__track,.sefin-progress-bar--radius-lg .sefin-progress-bar__fill{border-radius:var(--sefin-radius-lg)}.sefin-progress-bar--radius-xl .sefin-progress-bar__track,.sefin-progress-bar--radius-xl .sefin-progress-bar__fill{border-radius:var(--sefin-radius-xl)}.sefin-progress-bar--radius-2xl .sefin-progress-bar__track,.sefin-progress-bar--radius-2xl .sefin-progress-bar__fill{border-radius:var(--sefin-radius-2xl)}.sefin-progress-bar--radius-full .sefin-progress-bar__track,.sefin-progress-bar--radius-full .sefin-progress-bar__fill{border-radius:var(--sefin-radius-full)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-radius-md);overflow:hidden;box-sizing:border-box}.sefin-progress-bar__fill{height:100%;background-color:var(--sefin-color-primary, #1976d2);border-radius:var(--sefin-radius-md);transition:width .3s ease-in-out;box-sizing:border-box}.sefin-progress-bar--primary .sefin-progress-bar__fill{background-color:var(--sefin-color-primary, #1976d2)}.sefin-progress-bar--secondary .sefin-progress-bar__fill{background-color:var(--sefin-color-secondary, #dc004e)}.sefin-progress-bar--success .sefin-progress-bar__fill{background-color:var(--sefin-color-success, #4caf50)}.sefin-progress-bar--warning .sefin-progress-bar__fill{background-color:var(--sefin-color-warning, #ff9800)}.sefin-progress-bar--error .sefin-progress-bar__fill{background-color:var(--sefin-color-error, #f44336)}.sefin-progress-bar--indeterminate .sefin-progress-bar__fill{width:30%!important;animation:sefin-progress-bar-indeterminate 1.5s ease-in-out infinite}.sefin-progress-bar__label{font-family:var(--sefin-font-family-base, sans-serif);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #333);line-height:1;text-align:left}@keyframes sefin-progress-bar-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(400%)}}\n"] }]
|
|
2337
2391
|
}], propDecorators: { value: [{
|
|
2338
2392
|
type: Input
|
|
2339
2393
|
}], variant: [{
|
|
@@ -2344,6 +2398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2344
2398
|
type: Input
|
|
2345
2399
|
}], indeterminate: [{
|
|
2346
2400
|
type: Input
|
|
2401
|
+
}], borderRadius: [{
|
|
2402
|
+
type: Input
|
|
2347
2403
|
}], class: [{
|
|
2348
2404
|
type: Input
|
|
2349
2405
|
}] } });
|
|
@@ -2360,6 +2416,8 @@ class TooltipComponent {
|
|
|
2360
2416
|
delay = 200;
|
|
2361
2417
|
/** Whether the tooltip is disabled */
|
|
2362
2418
|
disabled = false;
|
|
2419
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
2420
|
+
borderRadius = 'md';
|
|
2363
2421
|
/** Additional CSS classes */
|
|
2364
2422
|
class = '';
|
|
2365
2423
|
tooltipContent;
|
|
@@ -2452,6 +2510,7 @@ class TooltipComponent {
|
|
|
2452
2510
|
return [
|
|
2453
2511
|
'sefin-tooltip',
|
|
2454
2512
|
`sefin-tooltip--${this.position}`,
|
|
2513
|
+
`sefin-tooltip--radius-${this.borderRadius}`,
|
|
2455
2514
|
this.isVisible ? 'sefin-tooltip--visible' : '',
|
|
2456
2515
|
this.class,
|
|
2457
2516
|
]
|
|
@@ -2459,11 +2518,11 @@ class TooltipComponent {
|
|
|
2459
2518
|
.join(' ');
|
|
2460
2519
|
}
|
|
2461
2520
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2462
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "sefin-tooltip", inputs: { text: "text", position: "position", trigger: "trigger", delay: "delay", disabled: "disabled", class: "class" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "click": "onClick($event)", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: ["tooltipTrigger"], descendants: true }], ngImport: i0, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-
|
|
2521
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "sefin-tooltip", inputs: { text: "text", position: "position", trigger: "trigger", delay: "delay", disabled: "disabled", borderRadius: "borderRadius", class: "class" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "click": "onClick($event)", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: ["tooltipTrigger"], descendants: true }], ngImport: i0, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip--radius-none .sefin-tooltip__content{border-radius:var(--sefin-radius-none)}.sefin-tooltip--radius-sm .sefin-tooltip__content{border-radius:var(--sefin-radius-sm)}.sefin-tooltip--radius-md .sefin-tooltip__content{border-radius:var(--sefin-radius-md)}.sefin-tooltip--radius-lg .sefin-tooltip__content{border-radius:var(--sefin-radius-lg)}.sefin-tooltip--radius-xl .sefin-tooltip__content{border-radius:var(--sefin-radius-xl)}.sefin-tooltip--radius-2xl .sefin-tooltip__content{border-radius:var(--sefin-radius-2xl)}.sefin-tooltip--radius-full .sefin-tooltip__content{border-radius:var(--sefin-radius-full)}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2463
2522
|
}
|
|
2464
2523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
2465
2524
|
type: Component,
|
|
2466
|
-
args: [{ selector: 'sefin-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-
|
|
2525
|
+
args: [{ selector: 'sefin-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:block;width:100%;position:relative;box-sizing:border-box}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip--radius-none .sefin-tooltip__content{border-radius:var(--sefin-radius-none)}.sefin-tooltip--radius-sm .sefin-tooltip__content{border-radius:var(--sefin-radius-sm)}.sefin-tooltip--radius-md .sefin-tooltip__content{border-radius:var(--sefin-radius-md)}.sefin-tooltip--radius-lg .sefin-tooltip__content{border-radius:var(--sefin-radius-lg)}.sefin-tooltip--radius-xl .sefin-tooltip__content{border-radius:var(--sefin-radius-xl)}.sefin-tooltip--radius-2xl .sefin-tooltip__content{border-radius:var(--sefin-radius-2xl)}.sefin-tooltip--radius-full .sefin-tooltip__content{border-radius:var(--sefin-radius-full)}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"] }]
|
|
2467
2526
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
|
|
2468
2527
|
type: Input
|
|
2469
2528
|
}], position: [{
|
|
@@ -2474,6 +2533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2474
2533
|
type: Input
|
|
2475
2534
|
}], disabled: [{
|
|
2476
2535
|
type: Input
|
|
2536
|
+
}], borderRadius: [{
|
|
2537
|
+
type: Input
|
|
2477
2538
|
}], class: [{
|
|
2478
2539
|
type: Input
|
|
2479
2540
|
}], tooltipContent: [{
|
|
@@ -2512,6 +2573,8 @@ class AlertComponent {
|
|
|
2512
2573
|
showIcon = true;
|
|
2513
2574
|
/** Whether the alert is visible */
|
|
2514
2575
|
visible = true;
|
|
2576
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
2577
|
+
borderRadius = 'md';
|
|
2515
2578
|
/** Additional CSS classes */
|
|
2516
2579
|
class = '';
|
|
2517
2580
|
/** Event emitted when the alert is dismissed */
|
|
@@ -2525,6 +2588,7 @@ class AlertComponent {
|
|
|
2525
2588
|
'sefin-alert',
|
|
2526
2589
|
`sefin-alert--${this.variant}`,
|
|
2527
2590
|
`sefin-alert--${this.size}`,
|
|
2591
|
+
`sefin-alert--radius-${this.borderRadius}`,
|
|
2528
2592
|
!this.visible ? 'sefin-alert--hidden' : '',
|
|
2529
2593
|
this.class,
|
|
2530
2594
|
]
|
|
@@ -2556,11 +2620,11 @@ class AlertComponent {
|
|
|
2556
2620
|
return '#ffffff';
|
|
2557
2621
|
}
|
|
2558
2622
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AlertComponent, isStandalone: true, selector: "sefin-alert", inputs: { variant: "variant", size: "size", title: "title", dismissible: "dismissible", showIcon: "showIcon", visible: "visible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-radius-sm);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success{background-color:#4caf5026;border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__message{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--success .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning{background-color:#ff980026;border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--warning .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error{background-color:#f4433626;border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__message{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--error .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info{background-color:#55c3d826;border-color:var(--sefin-color-primary, #55C3D8);color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}[data-theme=dark] .sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}[data-theme=dark] .sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--info .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default{background-color:var(--sefin-color-surface-hover, #4f4f4f);border-color:var(--sefin-color-border, #686868);color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--default .sefin-alert__close:hover{background-color:#ffffff1a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AlertComponent, isStandalone: true, selector: "sefin-alert", inputs: { variant: "variant", size: "size", title: "title", dismissible: "dismissible", showIcon: "showIcon", visible: "visible", borderRadius: "borderRadius", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent}.sefin-alert--radius-none{border-radius:var(--sefin-radius-none)}.sefin-alert--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-alert--radius-md{border-radius:var(--sefin-radius-md)}.sefin-alert--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-alert--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-alert--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-alert--radius-full{border-radius:var(--sefin-radius-full)}.sefin-alert{font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-radius-sm);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success{background-color:#4caf5026;border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__message{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--success .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning{background-color:#ff980026;border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--warning .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error{background-color:#f4433626;border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__message{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--error .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info{background-color:#55c3d826;border-color:var(--sefin-color-primary, #55C3D8);color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}[data-theme=dark] .sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}[data-theme=dark] .sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--info .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default{background-color:var(--sefin-color-surface-hover, #4f4f4f);border-color:var(--sefin-color-border, #686868);color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--default .sefin-alert__close:hover{background-color:#ffffff1a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2560
2624
|
}
|
|
2561
2625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2562
2626
|
type: Component,
|
|
2563
|
-
args: [{ selector: 'sefin-alert', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-radius-sm);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success{background-color:#4caf5026;border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__message{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--success .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning{background-color:#ff980026;border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--warning .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error{background-color:#f4433626;border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__message{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--error .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info{background-color:#55c3d826;border-color:var(--sefin-color-primary, #55C3D8);color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}[data-theme=dark] .sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}[data-theme=dark] .sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--info .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default{background-color:var(--sefin-color-surface-hover, #4f4f4f);border-color:var(--sefin-color-border, #686868);color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--default .sefin-alert__close:hover{background-color:#ffffff1a}\n"] }]
|
|
2627
|
+
args: [{ selector: 'sefin-alert', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent}.sefin-alert--radius-none{border-radius:var(--sefin-radius-none)}.sefin-alert--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-alert--radius-md{border-radius:var(--sefin-radius-md)}.sefin-alert--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-alert--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-alert--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-alert--radius-full{border-radius:var(--sefin-radius-full)}.sefin-alert{font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-radius-sm);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success{background-color:#4caf5026;border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__message{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}[data-theme=dark] .sefin-alert--success .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--success .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--success .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning{background-color:#ff980026;border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}[data-theme=dark] .sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--warning .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--warning .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error{background-color:#f4433626;border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__message{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}[data-theme=dark] .sefin-alert--error .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--error .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--error .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info{background-color:#55c3d826;border-color:var(--sefin-color-primary, #55C3D8);color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}[data-theme=dark] .sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}[data-theme=dark] .sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}[data-theme=dark] .sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--info .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--info .sefin-alert__close:hover{background-color:#ffffff1a}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default{background-color:var(--sefin-color-surface-hover, #4f4f4f);border-color:var(--sefin-color-border, #686868);color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__title{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__message{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}[data-theme=dark] .sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #ffffff)}.sefin-alert--default .sefin-alert__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-alert--default .sefin-alert__close:hover{background-color:#ffffff1a}\n"] }]
|
|
2564
2628
|
}], propDecorators: { variant: [{
|
|
2565
2629
|
type: Input
|
|
2566
2630
|
}], size: [{
|
|
@@ -2573,6 +2637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2573
2637
|
type: Input
|
|
2574
2638
|
}], visible: [{
|
|
2575
2639
|
type: Input
|
|
2640
|
+
}], borderRadius: [{
|
|
2641
|
+
type: Input
|
|
2576
2642
|
}], class: [{
|
|
2577
2643
|
type: Input
|
|
2578
2644
|
}], dismissed: [{
|
|
@@ -2595,6 +2661,8 @@ class ToastComponent {
|
|
|
2595
2661
|
showIcon = true;
|
|
2596
2662
|
/** Whether the toast can be dismissed manually */
|
|
2597
2663
|
dismissible = true;
|
|
2664
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
2665
|
+
borderRadius = 'md';
|
|
2598
2666
|
/** Additional CSS classes */
|
|
2599
2667
|
class = '';
|
|
2600
2668
|
/** Event emitted when the toast is dismissed */
|
|
@@ -2694,6 +2762,7 @@ class ToastComponent {
|
|
|
2694
2762
|
'sefin-toast',
|
|
2695
2763
|
`sefin-toast--${this.variant}`,
|
|
2696
2764
|
`sefin-toast--${this.position}`,
|
|
2765
|
+
`sefin-toast--radius-${this.borderRadius}`,
|
|
2697
2766
|
this.isExiting ? 'sefin-toast--exiting' : '',
|
|
2698
2767
|
this.isVisible ? 'sefin-toast--visible' : '',
|
|
2699
2768
|
this.class,
|
|
@@ -2712,11 +2781,11 @@ class ToastComponent {
|
|
|
2712
2781
|
return iconMap[this.variant];
|
|
2713
2782
|
}
|
|
2714
2783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "sefin-toast", inputs: { variant: "variant", position: "position", title: "title", message: "message", duration: "duration", showIcon: "showIcon", dismissible: "dismissible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:100%;max-width:400px;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--sefin-radius-sm);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:10;pointer-events:auto}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "sefin-toast", inputs: { variant: "variant", position: "position", title: "title", message: "message", duration: "duration", showIcon: "showIcon", dismissible: "dismissible", borderRadius: "borderRadius", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:100%;max-width:400px;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent}.sefin-toast--radius-none{border-radius:var(--sefin-radius-none)}.sefin-toast--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-toast--radius-md{border-radius:var(--sefin-radius-md)}.sefin-toast--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-toast--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-toast--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-toast--radius-full{border-radius:var(--sefin-radius-full)}.sefin-toast{font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--sefin-radius-sm);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:10;pointer-events:auto}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2716
2785
|
}
|
|
2717
2786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2718
2787
|
type: Component,
|
|
2719
|
-
args: [{ selector: 'sefin-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:100%;max-width:400px;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--sefin-radius-sm);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:10;pointer-events:auto}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"] }]
|
|
2788
|
+
args: [{ selector: 'sefin-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:100%;max-width:400px;box-sizing:border-box;border-radius:var(--sefin-radius-md);border:1px solid transparent}.sefin-toast--radius-none{border-radius:var(--sefin-radius-none)}.sefin-toast--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-toast--radius-md{border-radius:var(--sefin-radius-md)}.sefin-toast--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-toast--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-toast--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-toast--radius-full{border-radius:var(--sefin-radius-full)}.sefin-toast{font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:var(--sefin-radius-sm);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:10;pointer-events:auto}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"] }]
|
|
2720
2789
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
|
|
2721
2790
|
type: Input
|
|
2722
2791
|
}], position: [{
|
|
@@ -2731,6 +2800,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2731
2800
|
type: Input
|
|
2732
2801
|
}], dismissible: [{
|
|
2733
2802
|
type: Input
|
|
2803
|
+
}], borderRadius: [{
|
|
2804
|
+
type: Input
|
|
2734
2805
|
}], class: [{
|
|
2735
2806
|
type: Input
|
|
2736
2807
|
}], dismissed: [{
|
|
@@ -2743,6 +2814,8 @@ class TextFieldComponent {
|
|
|
2743
2814
|
variant = 'outlined';
|
|
2744
2815
|
/** TextField size. Options: 'sm' | 'md' | 'lg' */
|
|
2745
2816
|
size = 'md';
|
|
2817
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
2818
|
+
borderRadius = 'md';
|
|
2746
2819
|
/** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' */
|
|
2747
2820
|
type = 'text';
|
|
2748
2821
|
/** Placeholder text */
|
|
@@ -2938,6 +3011,7 @@ class TextFieldComponent {
|
|
|
2938
3011
|
'sefin-textfield',
|
|
2939
3012
|
`sefin-textfield--${this.variant}`,
|
|
2940
3013
|
`sefin-textfield--${this.size}`,
|
|
3014
|
+
`sefin-textfield--radius-${this.borderRadius}`,
|
|
2941
3015
|
this.isFocused ? 'sefin-textfield--focused' : '',
|
|
2942
3016
|
this.hasErrorState ? 'sefin-textfield--error' : '',
|
|
2943
3017
|
this.disabled ? 'sefin-textfield--disabled' : '',
|
|
@@ -3039,7 +3113,7 @@ class TextFieldComponent {
|
|
|
3039
3113
|
return hasValidationErrors ? errors : null;
|
|
3040
3114
|
}
|
|
3041
3115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TextFieldComponent, isStandalone: true, selector: "sefin-textfield", inputs: { variant: "variant", size: "size", type: "type", placeholder: "placeholder", hint: "hint", error: "error", 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: [
|
|
3116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TextFieldComponent, isStandalone: true, selector: "sefin-textfield", inputs: { variant: "variant", size: "size", borderRadius: "borderRadius", type: "type", placeholder: "placeholder", hint: "hint", error: "error", 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: [
|
|
3043
3117
|
{
|
|
3044
3118
|
provide: NG_VALUE_ACCESSOR,
|
|
3045
3119
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
@@ -3050,7 +3124,7 @@ class TextFieldComponent {
|
|
|
3050
3124
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3051
3125
|
multi: true,
|
|
3052
3126
|
},
|
|
3053
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__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-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\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]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__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-textfield__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-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;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-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__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}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__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-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__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-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__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-textfield__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-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);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-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3127
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__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-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\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]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__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-textfield__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-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;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-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__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}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__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-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__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-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__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-textfield__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-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);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-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3054
3128
|
}
|
|
3055
3129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
3056
3130
|
type: Component,
|
|
@@ -3065,7 +3139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3065
3139
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3066
3140
|
multi: true,
|
|
3067
3141
|
},
|
|
3068
|
-
], template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__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-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\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]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__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-textfield__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-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;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-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__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}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__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-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__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-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__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-textfield__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-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);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-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
|
|
3142
|
+
], template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__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-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\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]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__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-textfield__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-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;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-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__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}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__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-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__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-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__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-textfield__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-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);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-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
|
|
3069
3143
|
}], propDecorators: { inputRef: [{
|
|
3070
3144
|
type: ViewChild,
|
|
3071
3145
|
args: ['inputRef', { static: false }]
|
|
@@ -3073,6 +3147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3073
3147
|
type: Input
|
|
3074
3148
|
}], size: [{
|
|
3075
3149
|
type: Input
|
|
3150
|
+
}], borderRadius: [{
|
|
3151
|
+
type: Input
|
|
3076
3152
|
}], type: [{
|
|
3077
3153
|
type: Input
|
|
3078
3154
|
}], placeholder: [{
|
|
@@ -3134,8 +3210,12 @@ class ImageComponent {
|
|
|
3134
3210
|
fit = 'cover';
|
|
3135
3211
|
/** Loading strategy. Options: 'lazy' | 'eager' */
|
|
3136
3212
|
loading = 'lazy';
|
|
3137
|
-
/**
|
|
3138
|
-
|
|
3213
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
3214
|
+
borderRadius = 'md';
|
|
3215
|
+
/** @deprecated Use borderRadius instead. Options: 'none' | 'sm' | 'md' | 'lg' | 'full' */
|
|
3216
|
+
set rounded(value) {
|
|
3217
|
+
this.borderRadius = value === 'full' ? 'full' : value;
|
|
3218
|
+
}
|
|
3139
3219
|
/** Aspect ratio (e.g., '16/9', '4/3', '1/1') */
|
|
3140
3220
|
aspectRatio;
|
|
3141
3221
|
/** Placeholder/fallback image URL to show if main image fails to load */
|
|
@@ -3185,7 +3265,7 @@ class ImageComponent {
|
|
|
3185
3265
|
return [
|
|
3186
3266
|
'sefin-image',
|
|
3187
3267
|
`sefin-image--fit-${this.fit}`,
|
|
3188
|
-
`sefin-image--
|
|
3268
|
+
`sefin-image--radius-${this.borderRadius}`,
|
|
3189
3269
|
this.disabled ? 'sefin-image--disabled' : '',
|
|
3190
3270
|
this.hasError ? 'sefin-image--error' : '',
|
|
3191
3271
|
this.class,
|
|
@@ -3207,11 +3287,11 @@ class ImageComponent {
|
|
|
3207
3287
|
return styles;
|
|
3208
3288
|
}
|
|
3209
3289
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3210
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ImageComponent, isStandalone: true, selector: "sefin-image", inputs: { src: "src", alt: "alt", width: "width", height: "height", fit: "fit", loading: "loading", rounded: "rounded", aspectRatio: "aspectRatio", fallback: "fallback", disabled: "disabled", class: "class", sizes: "sizes", srcset: "srcset" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:block;width:100%;overflow:hidden;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--
|
|
3290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ImageComponent, isStandalone: true, selector: "sefin-image", inputs: { src: "src", alt: "alt", width: "width", height: "height", fit: "fit", loading: "loading", borderRadius: "borderRadius", rounded: "rounded", aspectRatio: "aspectRatio", fallback: "fallback", disabled: "disabled", class: "class", sizes: "sizes", srcset: "srcset" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:block;width:100%;overflow:hidden;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--radius-none{border-radius:var(--sefin-radius-none)}.sefin-image--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-image--radius-md{border-radius:var(--sefin-radius-md)}.sefin-image--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-image--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-image--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-image--radius-full{border-radius:var(--sefin-radius-full)}.sefin-image--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-image--error{background-color:var(--sefin-color-surface, #f5f5f5);border:1px dashed var(--sefin-color-border, #e0e0e0);display:flex;align-items:center;justify-content:center;min-height:100px;color:var(--sefin-color-text-secondary, #666)}.sefin-image__img{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.sefin-image__error-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-xs, 4px);padding:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base)}.sefin-image__error-text{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm, 12px);color:var(--sefin-color-text-secondary, #666);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3211
3291
|
}
|
|
3212
3292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3213
3293
|
type: Component,
|
|
3214
|
-
args: [{ selector: 'sefin-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:block;width:100%;overflow:hidden;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--
|
|
3294
|
+
args: [{ selector: 'sefin-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:block;width:100%;overflow:hidden;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--radius-none{border-radius:var(--sefin-radius-none)}.sefin-image--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-image--radius-md{border-radius:var(--sefin-radius-md)}.sefin-image--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-image--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-image--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-image--radius-full{border-radius:var(--sefin-radius-full)}.sefin-image--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-image--error{background-color:var(--sefin-color-surface, #f5f5f5);border:1px dashed var(--sefin-color-border, #e0e0e0);display:flex;align-items:center;justify-content:center;min-height:100px;color:var(--sefin-color-text-secondary, #666)}.sefin-image__img{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.sefin-image__error-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-xs, 4px);padding:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base)}.sefin-image__error-text{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm, 12px);color:var(--sefin-color-text-secondary, #666);text-align:center}\n"] }]
|
|
3215
3295
|
}], propDecorators: { src: [{
|
|
3216
3296
|
type: Input
|
|
3217
3297
|
}], alt: [{
|
|
@@ -3224,6 +3304,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3224
3304
|
type: Input
|
|
3225
3305
|
}], loading: [{
|
|
3226
3306
|
type: Input
|
|
3307
|
+
}], borderRadius: [{
|
|
3308
|
+
type: Input
|
|
3227
3309
|
}], rounded: [{
|
|
3228
3310
|
type: Input
|
|
3229
3311
|
}], aspectRatio: [{
|
|
@@ -3249,6 +3331,8 @@ class TabComponent {
|
|
|
3249
3331
|
disabled = false;
|
|
3250
3332
|
/** Whether the tab is active */
|
|
3251
3333
|
active = false;
|
|
3334
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
3335
|
+
borderRadius = 'md';
|
|
3252
3336
|
/** Additional CSS classes */
|
|
3253
3337
|
class = '';
|
|
3254
3338
|
clicked = new EventEmitter();
|
|
@@ -3262,6 +3346,7 @@ class TabComponent {
|
|
|
3262
3346
|
'sefin-tab',
|
|
3263
3347
|
`sefin-tab--${this.variant}`,
|
|
3264
3348
|
`sefin-tab--${this.size}`,
|
|
3349
|
+
`sefin-tab--radius-${this.borderRadius}`,
|
|
3265
3350
|
this.disabled ? 'sefin-tab--disabled' : '',
|
|
3266
3351
|
this.active ? 'sefin-tab--active' : '',
|
|
3267
3352
|
this.class,
|
|
@@ -3270,11 +3355,11 @@ class TabComponent {
|
|
|
3270
3355
|
.join(' ');
|
|
3271
3356
|
}
|
|
3272
3357
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TabComponent, isStandalone: true, selector: "sefin-tab", inputs: { variant: "variant", size: "size", disabled: "disabled", active: "active", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center;box-sizing:border-box}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-component-height-sm)}.sefin-tab--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-component-height-md)}.sefin-tab--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:var(--sefin-component-height-lg)}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3358
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TabComponent, isStandalone: true, selector: "sefin-tab", inputs: { variant: "variant", size: "size", disabled: "disabled", active: "active", borderRadius: "borderRadius", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center;box-sizing:border-box}.sefin-tab--radius-none{border-radius:var(--sefin-radius-none)}.sefin-tab--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-tab--radius-md{border-radius:var(--sefin-radius-md)}.sefin-tab--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-tab--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-tab--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-tab--radius-full{border-radius:var(--sefin-radius-full)}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-component-height-sm)}.sefin-tab--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-component-height-md)}.sefin-tab--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:var(--sefin-component-height-lg)}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3274
3359
|
}
|
|
3275
3360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabComponent, decorators: [{
|
|
3276
3361
|
type: Component,
|
|
3277
|
-
args: [{ selector: 'sefin-tab', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center;box-sizing:border-box}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-component-height-sm)}.sefin-tab--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-component-height-md)}.sefin-tab--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:var(--sefin-component-height-lg)}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"] }]
|
|
3362
|
+
args: [{ selector: 'sefin-tab', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center;box-sizing:border-box}.sefin-tab--radius-none{border-radius:var(--sefin-radius-none)}.sefin-tab--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-tab--radius-md{border-radius:var(--sefin-radius-md)}.sefin-tab--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-tab--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-tab--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-tab--radius-full{border-radius:var(--sefin-radius-full)}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:var(--sefin-component-height-sm)}.sefin-tab--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:var(--sefin-component-height-md)}.sefin-tab--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:var(--sefin-component-height-lg)}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"] }]
|
|
3278
3363
|
}], propDecorators: { variant: [{
|
|
3279
3364
|
type: Input
|
|
3280
3365
|
}], size: [{
|
|
@@ -3283,6 +3368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3283
3368
|
type: Input
|
|
3284
3369
|
}], active: [{
|
|
3285
3370
|
type: Input
|
|
3371
|
+
}], borderRadius: [{
|
|
3372
|
+
type: Input
|
|
3286
3373
|
}], class: [{
|
|
3287
3374
|
type: Input
|
|
3288
3375
|
}], clicked: [{
|
|
@@ -3598,6 +3685,8 @@ class AutocompleteComponent {
|
|
|
3598
3685
|
errorMessage = '';
|
|
3599
3686
|
disabled = false;
|
|
3600
3687
|
size = 'md';
|
|
3688
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
3689
|
+
borderRadius = 'md';
|
|
3601
3690
|
class = '';
|
|
3602
3691
|
id = '';
|
|
3603
3692
|
value = null;
|
|
@@ -3819,6 +3908,7 @@ class AutocompleteComponent {
|
|
|
3819
3908
|
return [
|
|
3820
3909
|
'sefin-autocomplete__input',
|
|
3821
3910
|
`sefin-autocomplete__input--${this.size}`,
|
|
3911
|
+
`sefin-autocomplete__input--radius-${this.borderRadius}`,
|
|
3822
3912
|
this.disabled ? 'sefin-autocomplete__input--disabled' : '',
|
|
3823
3913
|
this.hasErrorState ? 'sefin-autocomplete__input--error' : '',
|
|
3824
3914
|
this.class,
|
|
@@ -3829,6 +3919,7 @@ class AutocompleteComponent {
|
|
|
3829
3919
|
get containerClasses() {
|
|
3830
3920
|
return [
|
|
3831
3921
|
'sefin-autocomplete',
|
|
3922
|
+
`sefin-autocomplete--radius-${this.borderRadius}`,
|
|
3832
3923
|
this.isOpen && this.filteredOptions.length > 0
|
|
3833
3924
|
? 'sefin-autocomplete--open'
|
|
3834
3925
|
: '',
|
|
@@ -3838,11 +3929,11 @@ class AutocompleteComponent {
|
|
|
3838
3929
|
.join(' ');
|
|
3839
3930
|
}
|
|
3840
3931
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3841
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3932
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", borderRadius: "borderRadius", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3842
3933
|
}
|
|
3843
3934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
3844
3935
|
type: Component,
|
|
3845
|
-
args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
|
|
3936
|
+
args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
|
|
3846
3937
|
}], propDecorators: { inputRef: [{
|
|
3847
3938
|
type: ViewChild,
|
|
3848
3939
|
args: ['inputRef', { static: false }]
|
|
@@ -3866,6 +3957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3866
3957
|
type: Input
|
|
3867
3958
|
}], size: [{
|
|
3868
3959
|
type: Input
|
|
3960
|
+
}], borderRadius: [{
|
|
3961
|
+
type: Input
|
|
3869
3962
|
}], class: [{
|
|
3870
3963
|
type: Input
|
|
3871
3964
|
}], id: [{
|
|
@@ -3981,6 +4074,8 @@ class ButtonGroupComponent {
|
|
|
3981
4074
|
disabled = false;
|
|
3982
4075
|
/** Whether buttons should take full width of the container */
|
|
3983
4076
|
fullWidth = false;
|
|
4077
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
4078
|
+
borderRadius = 'md';
|
|
3984
4079
|
/** Additional CSS classes */
|
|
3985
4080
|
class = '';
|
|
3986
4081
|
/** Event emitted when value changes (for segmented variant) */
|
|
@@ -3994,6 +4089,7 @@ class ButtonGroupComponent {
|
|
|
3994
4089
|
'sefin-button-group',
|
|
3995
4090
|
`sefin-button-group--${this.groupVariant}`,
|
|
3996
4091
|
`sefin-button-group--${this.size}`,
|
|
4092
|
+
`sefin-button-group--radius-${this.borderRadius}`,
|
|
3997
4093
|
this.groupVariant === 'default' ? `sefin-button-group--${this.variant}` : '',
|
|
3998
4094
|
this.fullWidth ? 'sefin-button-group--full-width' : '',
|
|
3999
4095
|
this.disabled ? 'sefin-button-group--disabled' : '',
|
|
@@ -4099,11 +4195,11 @@ class ButtonGroupComponent {
|
|
|
4099
4195
|
return this.sanitizer.sanitize(1, html) || '';
|
|
4100
4196
|
}
|
|
4101
4197
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
4102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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 <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\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 </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:flex;align-items:stretch;gap:0;width:100%;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;box-sizing:border-box}.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!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{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:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:var(--sefin-component-height-sm)!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:var(--sefin-component-height-md)!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:var(--sefin-component-height-lg)!important}.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 ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.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!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.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;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.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"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4198
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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", borderRadius: "borderRadius", 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 <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\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 </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:flex;align-items:stretch;gap:0;width:100%;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;box-sizing:border-box}.sefin-button-group--radius-none{border-radius:var(--sefin-radius-none)}.sefin-button-group--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-button-group--radius-md{border-radius:var(--sefin-radius-md)}.sefin-button-group--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-button-group--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-button-group--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-button-group--radius-full{border-radius:var(--sefin-radius-full)}.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!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{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:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:var(--sefin-component-height-sm)!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:var(--sefin-component-height-md)!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:var(--sefin-component-height-lg)!important}.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 ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.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!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.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;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.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"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "borderRadius", "rounded", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4103
4199
|
}
|
|
4104
4200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
4105
4201
|
type: Component,
|
|
4106
|
-
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\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 </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:flex;align-items:stretch;gap:0;width:100%;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;box-sizing:border-box}.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!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{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:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:var(--sefin-component-height-sm)!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:var(--sefin-component-height-md)!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:var(--sefin-component-height-lg)!important}.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 ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.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!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.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;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.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"] }]
|
|
4202
|
+
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\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 </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:flex;align-items:stretch;gap:0;width:100%;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;box-sizing:border-box}.sefin-button-group--radius-none{border-radius:var(--sefin-radius-none)}.sefin-button-group--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-button-group--radius-md{border-radius:var(--sefin-radius-md)}.sefin-button-group--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-button-group--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-button-group--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-button-group--radius-full{border-radius:var(--sefin-radius-full)}.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!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{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:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:var(--sefin-component-height-sm)!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:var(--sefin-component-height-md)!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:var(--sefin-component-height-lg)!important}.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 ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.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!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.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;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.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"] }]
|
|
4107
4203
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
4108
4204
|
type: Input
|
|
4109
4205
|
}], value: [{
|
|
@@ -4122,6 +4218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
4122
4218
|
type: Input
|
|
4123
4219
|
}], fullWidth: [{
|
|
4124
4220
|
type: Input
|
|
4221
|
+
}], borderRadius: [{
|
|
4222
|
+
type: Input
|
|
4125
4223
|
}], class: [{
|
|
4126
4224
|
type: Input
|
|
4127
4225
|
}], valueChange: [{
|
|
@@ -4136,8 +4234,12 @@ class CardComponent {
|
|
|
4136
4234
|
el;
|
|
4137
4235
|
/** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
|
|
4138
4236
|
variant = 'default';
|
|
4139
|
-
/** Border radius. Options: '
|
|
4140
|
-
|
|
4237
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
4238
|
+
borderRadius = 'md';
|
|
4239
|
+
/** @deprecated Use borderRadius instead. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' */
|
|
4240
|
+
set rounded(value) {
|
|
4241
|
+
this.borderRadius = value === 'xs' ? 'none' : value;
|
|
4242
|
+
}
|
|
4141
4243
|
/** Whether the card is clickable/interactive (enables smooth primary border on hover/focus) */
|
|
4142
4244
|
clickable = false;
|
|
4143
4245
|
/** Whether the card is disabled */
|
|
@@ -4161,7 +4263,7 @@ class CardComponent {
|
|
|
4161
4263
|
return [
|
|
4162
4264
|
'sefin-card',
|
|
4163
4265
|
`sefin-card--${this.variant}`,
|
|
4164
|
-
`sefin-card--
|
|
4266
|
+
`sefin-card--radius-${this.borderRadius}`,
|
|
4165
4267
|
this.clickable ? 'sefin-card--clickable' : '',
|
|
4166
4268
|
this.disabled ? 'sefin-card--disabled' : '',
|
|
4167
4269
|
`sefin-card--padding-${this.padding}`,
|
|
@@ -4171,13 +4273,15 @@ class CardComponent {
|
|
|
4171
4273
|
.join(' ');
|
|
4172
4274
|
}
|
|
4173
4275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", rounded: "rounded", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--
|
|
4276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", borderRadius: "borderRadius", rounded: "rounded", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--radius-none{border-radius:var(--sefin-radius-none)}.sefin-card--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-card--radius-md{border-radius:var(--sefin-radius-md)}.sefin-card--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-card--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-card--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-card--radius-full{border-radius:var(--sefin-radius-full)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4175
4277
|
}
|
|
4176
4278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, decorators: [{
|
|
4177
4279
|
type: Component,
|
|
4178
|
-
args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--
|
|
4280
|
+
args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--radius-none{border-radius:var(--sefin-radius-none)}.sefin-card--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-card--radius-md{border-radius:var(--sefin-radius-md)}.sefin-card--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-card--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-card--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-card--radius-full{border-radius:var(--sefin-radius-full)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
4179
4281
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
|
|
4180
4282
|
type: Input
|
|
4283
|
+
}], borderRadius: [{
|
|
4284
|
+
type: Input
|
|
4181
4285
|
}], rounded: [{
|
|
4182
4286
|
type: Input
|
|
4183
4287
|
}], clickable: [{
|
|
@@ -4765,7 +4869,7 @@ class DatepickerComponent {
|
|
|
4765
4869
|
return year === this.getCurrentYear();
|
|
4766
4870
|
}
|
|
4767
4871
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
4768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--range-start]=\"day && isRangeStart(day)\"\n [class.sefin-datepicker__day--range-end]=\"day && isRangeEnd(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--today.sefin-datepicker__day--in-range{color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--in-range:before{background-color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start,.sefin-datepicker__day--today.sefin-datepicker__day--range-end{color:var(--sefin-color-surface)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start:before,.sefin-datepicker__day--today.sefin-datepicker__day--range-end:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:2;cursor:pointer;border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:#55c3d826;color:var(--sefin-color-primary);border-radius:0;cursor:pointer;z-index:1;position:relative;font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--in-range:before{display:none}.sefin-datepicker__day--in-range:hover{background:#55c3d840}.sefin-datepicker__day--in-range.sefin-datepicker__day--range-start,.sefin-datepicker__day--in-range.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm);border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer}.sefin-datepicker__day--range-start:before{display:none}.sefin-datepicker__day--range-start:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm);border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.sefin-datepicker__day--range-end:before{display:none}.sefin-datepicker__day--range-end:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-start.sefin-datepicker__day--range-end{border-radius:var(--sefin-radius-sm);background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));background:transparent!important}.sefin-datepicker__day--disabled:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--today{color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--today:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--in-range{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled.sefin-datepicker__day--range-start,.sefin-datepicker__day--disabled.sefin-datepicker__day--range-end{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm);font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--selected{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled:hover{background:transparent!important;cursor:not-allowed!important}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\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"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "error", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
4872
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--range-start]=\"day && isRangeStart(day)\"\n [class.sefin-datepicker__day--range-end]=\"day && isRangeEnd(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--today.sefin-datepicker__day--in-range{color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--in-range:before{background-color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start,.sefin-datepicker__day--today.sefin-datepicker__day--range-end{color:var(--sefin-color-surface)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start:before,.sefin-datepicker__day--today.sefin-datepicker__day--range-end:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:2;cursor:pointer;border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:#55c3d826;color:var(--sefin-color-primary);border-radius:0;cursor:pointer;z-index:1;position:relative;font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--in-range:before{display:none}.sefin-datepicker__day--in-range:hover{background:#55c3d840}.sefin-datepicker__day--in-range.sefin-datepicker__day--range-start,.sefin-datepicker__day--in-range.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm);border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer}.sefin-datepicker__day--range-start:before{display:none}.sefin-datepicker__day--range-start:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm);border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.sefin-datepicker__day--range-end:before{display:none}.sefin-datepicker__day--range-end:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-start.sefin-datepicker__day--range-end{border-radius:var(--sefin-radius-sm);background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));background:transparent!important}.sefin-datepicker__day--disabled:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--today{color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--today:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--in-range{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled.sefin-datepicker__day--range-start,.sefin-datepicker__day--disabled.sefin-datepicker__day--range-end{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm);font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--selected{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled:hover{background:transparent!important;cursor:not-allowed!important}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\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"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "borderRadius", "type", "placeholder", "hint", "error", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
4769
4873
|
}
|
|
4770
4874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
4771
4875
|
type: Component,
|
|
@@ -4843,6 +4947,8 @@ class DropdownMenuComponent {
|
|
|
4843
4947
|
closeOnClick = true;
|
|
4844
4948
|
/** Custom trigger element template (via content projection) */
|
|
4845
4949
|
triggerTemplate;
|
|
4950
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
4951
|
+
borderRadius = 'md';
|
|
4846
4952
|
/** Additional CSS classes */
|
|
4847
4953
|
class = '';
|
|
4848
4954
|
/** Event emitted when menu opens */
|
|
@@ -5007,6 +5113,7 @@ class DropdownMenuComponent {
|
|
|
5007
5113
|
get containerClasses() {
|
|
5008
5114
|
return [
|
|
5009
5115
|
'sefin-dropdown-menu',
|
|
5116
|
+
`sefin-dropdown-menu--radius-${this.borderRadius}`,
|
|
5010
5117
|
this.isOpen ? 'sefin-dropdown-menu--open' : '',
|
|
5011
5118
|
this.disabled ? 'sefin-dropdown-menu--disabled' : '',
|
|
5012
5119
|
this.class,
|
|
@@ -5019,6 +5126,7 @@ class DropdownMenuComponent {
|
|
|
5019
5126
|
'sefin-dropdown-menu__menu',
|
|
5020
5127
|
`sefin-dropdown-menu__menu--${this.placement}`,
|
|
5021
5128
|
`sefin-dropdown-menu__menu--${this.size}`,
|
|
5129
|
+
`sefin-dropdown-menu__menu--radius-${this.borderRadius}`,
|
|
5022
5130
|
]
|
|
5023
5131
|
.filter(Boolean)
|
|
5024
5132
|
.join(' ');
|
|
@@ -5085,11 +5193,11 @@ class DropdownMenuComponent {
|
|
|
5085
5193
|
return isMenuItem(item) && !!item.disabled;
|
|
5086
5194
|
}
|
|
5087
5195
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DropdownMenuComponent, isStandalone: true, selector: "sefin-dropdown-menu", inputs: { items: "items", header: "header", disabled: "disabled", placement: "placement", size: "size", open: "open", closeOnClick: "closeOnClick", class: "class" }, outputs: { opened: "opened", closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <!-- Trigger -->\n <div\n #triggerRef\n class=\"sefin-dropdown-menu__trigger\"\n (click)=\"toggleMenu()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleMenu()\"\n (keydown.space)=\"toggleMenu(); $event.preventDefault()\"\n >\n <ng-container *ngIf=\"triggerTemplate; else defaultTrigger\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTrigger>\n <button\n type=\"button\"\n class=\"sefin-dropdown-menu__trigger-button\"\n [disabled]=\"disabled\"\n >\n Menu\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"isOpen\"\n class=\"sefin-dropdown-menu__trigger-icon\"\n ></sefin-icon>\n </button>\n </ng-template>\n </div>\n\n <!-- Menu -->\n <div\n *ngIf=\"isOpen && (header || (items && items.length > 0))\"\n #menuRef\n [class]=\"menuClasses\"\n role=\"menu\"\n [attr.aria-label]=\"'Dropdown menu'\"\n >\n <!-- Header Section -->\n <div *ngIf=\"header\" class=\"sefin-dropdown-menu__header\">\n <div class=\"sefin-dropdown-menu__header-content\">\n <sefin-icon\n *ngIf=\"header.icon\"\n [name]=\"header.icon\"\n size=\"md\"\n class=\"sefin-dropdown-menu__header-icon\"\n ></sefin-icon>\n <div class=\"sefin-dropdown-menu__header-text\">\n <div class=\"sefin-dropdown-menu__header-title\">\n {{ header.title }}\n </div>\n <div\n *ngIf=\"header.subtitle\"\n class=\"sefin-dropdown-menu__header-subtitle\"\n >\n {{ header.subtitle }}\n </div>\n </div>\n </div>\n </div>\n\n <ul *ngIf=\"items && items.length > 0\" class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let item of items; let i = index\"\n [attr.data-index]=\"i\"\n [class]=\"getItemClasses(item, i)\"\n [attr.role]=\"item.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(item) ? true : null\"\n (click)=\"handleItemClick(item)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <ng-container *ngIf=\"!item.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div *ngIf=\"getItemIcon(item)\" [class]=\"getIconWrapperClasses(item)\">\n <sefin-icon\n [name]=\"getItemIcon(item)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n item.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(item)\n }}</span>\n <sefin-icon\n *ngIf=\"hasSubmenu(item)\"\n name=\"chevron-right\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-arrow\"\n ></sefin-icon>\n </div>\n <!-- Submenu -->\n <div\n *ngIf=\"hasSubmenu(item) && activeSubmenuIndex === i\"\n [class]=\"getSubmenuClasses(item, i)\"\n role=\"menu\"\n >\n <ul class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let subItem of getItemSubmenu(item); let j = index\"\n [attr.data-index]=\"j\"\n [class]=\"getItemClasses(subItem, j)\"\n [attr.role]=\"subItem.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(subItem) ? true : null\"\n (click)=\"handleItemClick(subItem); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"!subItem.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div\n *ngIf=\"getItemIcon(subItem)\"\n [class]=\"getIconWrapperClasses(subItem)\"\n >\n <sefin-icon\n [name]=\"getItemIcon(subItem)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n subItem.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(subItem)\n }}</span>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".sefin-dropdown-menu{position:relative;display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}.sefin-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}.sefin-dropdown-menu__trigger:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-dropdown-menu__trigger-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sefin-spacing-sm);padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md);transform:translateY(-1px)}.sefin-dropdown-menu__trigger-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-dropdown-menu__trigger-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-dropdown-menu__trigger-icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary, #686868);flex-shrink:0}.sefin-dropdown-menu__menu{position:absolute;z-index:9999;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);overflow:hidden;animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__menu--bottom-start{top:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--bottom-end{top:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--top-start{bottom:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--top-end{bottom:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--left-start{right:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--left-end{right:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--right-start{left:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--right-end{left:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__menu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__menu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu__header{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);margin:0}.sefin-dropdown-menu__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px)}.sefin-dropdown-menu__header-icon{flex-shrink:0;color:var(--sefin-color-primary)}.sefin-dropdown-menu__header-text{flex:1;min-width:0}.sefin-dropdown-menu__header-title{font-family:var(--sefin-font-family-base);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, #383838);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__header-subtitle{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #686868);margin:var(--sefin-spacing-xs, 2px) 0 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs, 4px) 0}.sefin-dropdown-menu__item{position:relative;display:block;width:100%;margin:0;padding:0;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-dropdown-menu__item--divider{height:1px;margin:var(--sefin-spacing-xs, 4px) 0;padding:0;background-color:var(--sefin-color-border);cursor:default;pointer-events:none}.sefin-dropdown-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-text)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item--has-submenu .sefin-dropdown-menu__item-content{padding-right:var(--sefin-spacing-md)}.sefin-dropdown-menu__item--submenu-open{background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--danger .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled){background-color:#f443361a}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-arrow{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:active:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:focus-visible:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px;border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__item-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px);padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);width:100%;box-sizing:border-box;position:relative}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 12px);gap:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 20px);gap:var(--sefin-spacing-md, 16px)}.sefin-dropdown-menu__icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;transition:color .15s ease-in-out;background-color:transparent}.sefin-dropdown-menu__icon-wrapper--danger{background-color:transparent}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__icon-wrapper,.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__icon-wrapper{width:auto;height:auto}.sefin-dropdown-menu__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);transition:color .15s ease-in-out;opacity:.75}.sefin-dropdown-menu__item-icon--with-bg,.sefin-dropdown-menu__icon-wrapper--danger .sefin-dropdown-menu__item-icon{color:var(--sefin-color-error);opacity:1}.sefin-dropdown-menu__item-label{flex:1;font-family:var(--sefin-font-family-base);font-size:inherit;font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-align:left;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;transition:color .15s ease-in-out}.sefin-dropdown-menu__item-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);margin-left:auto;transition:color .15s ease-in-out;opacity:.6}.sefin-dropdown-menu__submenu{position:absolute;top:0;left:100%;margin-left:var(--sefin-spacing-sm, 8px);z-index:10000;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__submenu--right-start,.sefin-dropdown-menu__submenu--right-end{left:auto;right:100%;margin-left:0;margin-right:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__submenu--top-start,.sefin-dropdown-menu__submenu--top-end{top:auto;bottom:0}.sefin-dropdown-menu__submenu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__submenu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__submenu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu--open .sefin-dropdown-menu__trigger-button{border-color:var(--sefin-color-primary)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
5196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DropdownMenuComponent, isStandalone: true, selector: "sefin-dropdown-menu", inputs: { items: "items", header: "header", disabled: "disabled", placement: "placement", size: "size", open: "open", closeOnClick: "closeOnClick", borderRadius: "borderRadius", class: "class" }, outputs: { opened: "opened", closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <!-- Trigger -->\n <div\n #triggerRef\n class=\"sefin-dropdown-menu__trigger\"\n (click)=\"toggleMenu()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleMenu()\"\n (keydown.space)=\"toggleMenu(); $event.preventDefault()\"\n >\n <ng-container *ngIf=\"triggerTemplate; else defaultTrigger\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTrigger>\n <button\n type=\"button\"\n class=\"sefin-dropdown-menu__trigger-button\"\n [disabled]=\"disabled\"\n >\n Menu\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"isOpen\"\n class=\"sefin-dropdown-menu__trigger-icon\"\n ></sefin-icon>\n </button>\n </ng-template>\n </div>\n\n <!-- Menu -->\n <div\n *ngIf=\"isOpen && (header || (items && items.length > 0))\"\n #menuRef\n [class]=\"menuClasses\"\n role=\"menu\"\n [attr.aria-label]=\"'Dropdown menu'\"\n >\n <!-- Header Section -->\n <div *ngIf=\"header\" class=\"sefin-dropdown-menu__header\">\n <div class=\"sefin-dropdown-menu__header-content\">\n <sefin-icon\n *ngIf=\"header.icon\"\n [name]=\"header.icon\"\n size=\"md\"\n class=\"sefin-dropdown-menu__header-icon\"\n ></sefin-icon>\n <div class=\"sefin-dropdown-menu__header-text\">\n <div class=\"sefin-dropdown-menu__header-title\">\n {{ header.title }}\n </div>\n <div\n *ngIf=\"header.subtitle\"\n class=\"sefin-dropdown-menu__header-subtitle\"\n >\n {{ header.subtitle }}\n </div>\n </div>\n </div>\n </div>\n\n <ul *ngIf=\"items && items.length > 0\" class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let item of items; let i = index\"\n [attr.data-index]=\"i\"\n [class]=\"getItemClasses(item, i)\"\n [attr.role]=\"item.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(item) ? true : null\"\n (click)=\"handleItemClick(item)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <ng-container *ngIf=\"!item.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div *ngIf=\"getItemIcon(item)\" [class]=\"getIconWrapperClasses(item)\">\n <sefin-icon\n [name]=\"getItemIcon(item)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n item.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(item)\n }}</span>\n <sefin-icon\n *ngIf=\"hasSubmenu(item)\"\n name=\"chevron-right\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-arrow\"\n ></sefin-icon>\n </div>\n <!-- Submenu -->\n <div\n *ngIf=\"hasSubmenu(item) && activeSubmenuIndex === i\"\n [class]=\"getSubmenuClasses(item, i)\"\n role=\"menu\"\n >\n <ul class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let subItem of getItemSubmenu(item); let j = index\"\n [attr.data-index]=\"j\"\n [class]=\"getItemClasses(subItem, j)\"\n [attr.role]=\"subItem.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(subItem) ? true : null\"\n (click)=\"handleItemClick(subItem); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"!subItem.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div\n *ngIf=\"getItemIcon(subItem)\"\n [class]=\"getIconWrapperClasses(subItem)\"\n >\n <sefin-icon\n [name]=\"getItemIcon(subItem)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n subItem.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(subItem)\n }}</span>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".sefin-dropdown-menu{position:relative;display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}.sefin-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}.sefin-dropdown-menu__trigger:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-dropdown-menu__trigger-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sefin-spacing-sm);padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md);transform:translateY(-1px)}.sefin-dropdown-menu__trigger-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-dropdown-menu__trigger-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-dropdown-menu--radius-none .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-none)}.sefin-dropdown-menu--radius-sm .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu--radius-md .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-md)}.sefin-dropdown-menu--radius-lg .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-lg)}.sefin-dropdown-menu--radius-xl .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-xl)}.sefin-dropdown-menu--radius-2xl .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-2xl)}.sefin-dropdown-menu--radius-full .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-full)}.sefin-dropdown-menu__trigger-icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary, #686868);flex-shrink:0}.sefin-dropdown-menu__menu{position:absolute;z-index:9999;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);overflow:hidden;animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__menu--radius-none{border-radius:var(--sefin-radius-none)}.sefin-dropdown-menu__menu--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__menu--radius-md{border-radius:var(--sefin-radius-md)}.sefin-dropdown-menu__menu--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-dropdown-menu__menu--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-dropdown-menu__menu--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-dropdown-menu__menu--radius-full{border-radius:var(--sefin-radius-full)}.sefin-dropdown-menu__menu--bottom-start{top:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--bottom-end{top:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--top-start{bottom:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--top-end{bottom:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--left-start{right:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--left-end{right:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--right-start{left:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--right-end{left:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__menu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__menu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu__header{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);margin:0}.sefin-dropdown-menu__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px)}.sefin-dropdown-menu__header-icon{flex-shrink:0;color:var(--sefin-color-primary)}.sefin-dropdown-menu__header-text{flex:1;min-width:0}.sefin-dropdown-menu__header-title{font-family:var(--sefin-font-family-base);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, #383838);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__header-subtitle{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #686868);margin:var(--sefin-spacing-xs, 2px) 0 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs, 4px) 0}.sefin-dropdown-menu__item{position:relative;display:block;width:100%;margin:0;padding:0;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-dropdown-menu__item--divider{height:1px;margin:var(--sefin-spacing-xs, 4px) 0;padding:0;background-color:var(--sefin-color-border);cursor:default;pointer-events:none}.sefin-dropdown-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-text)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item--has-submenu .sefin-dropdown-menu__item-content{padding-right:var(--sefin-spacing-md)}.sefin-dropdown-menu__item--submenu-open{background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--danger .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled){background-color:#f443361a}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-arrow{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:active:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:focus-visible:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px;border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__item-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px);padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);width:100%;box-sizing:border-box;position:relative}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 12px);gap:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 20px);gap:var(--sefin-spacing-md, 16px)}.sefin-dropdown-menu__icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;transition:color .15s ease-in-out;background-color:transparent}.sefin-dropdown-menu__icon-wrapper--danger{background-color:transparent}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__icon-wrapper,.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__icon-wrapper{width:auto;height:auto}.sefin-dropdown-menu__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);transition:color .15s ease-in-out;opacity:.75}.sefin-dropdown-menu__item-icon--with-bg,.sefin-dropdown-menu__icon-wrapper--danger .sefin-dropdown-menu__item-icon{color:var(--sefin-color-error);opacity:1}.sefin-dropdown-menu__item-label{flex:1;font-family:var(--sefin-font-family-base);font-size:inherit;font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-align:left;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;transition:color .15s ease-in-out}.sefin-dropdown-menu__item-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);margin-left:auto;transition:color .15s ease-in-out;opacity:.6}.sefin-dropdown-menu__submenu{position:absolute;top:0;left:100%;margin-left:var(--sefin-spacing-sm, 8px);z-index:10000;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__submenu--right-start,.sefin-dropdown-menu__submenu--right-end{left:auto;right:100%;margin-left:0;margin-right:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__submenu--top-start,.sefin-dropdown-menu__submenu--top-end{top:auto;bottom:0}.sefin-dropdown-menu__submenu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__submenu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__submenu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu--open .sefin-dropdown-menu__trigger-button{border-color:var(--sefin-color-primary)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
5089
5197
|
}
|
|
5090
5198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
5091
5199
|
type: Component,
|
|
5092
|
-
args: [{ selector: 'sefin-dropdown-menu', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <!-- Trigger -->\n <div\n #triggerRef\n class=\"sefin-dropdown-menu__trigger\"\n (click)=\"toggleMenu()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleMenu()\"\n (keydown.space)=\"toggleMenu(); $event.preventDefault()\"\n >\n <ng-container *ngIf=\"triggerTemplate; else defaultTrigger\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTrigger>\n <button\n type=\"button\"\n class=\"sefin-dropdown-menu__trigger-button\"\n [disabled]=\"disabled\"\n >\n Menu\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"isOpen\"\n class=\"sefin-dropdown-menu__trigger-icon\"\n ></sefin-icon>\n </button>\n </ng-template>\n </div>\n\n <!-- Menu -->\n <div\n *ngIf=\"isOpen && (header || (items && items.length > 0))\"\n #menuRef\n [class]=\"menuClasses\"\n role=\"menu\"\n [attr.aria-label]=\"'Dropdown menu'\"\n >\n <!-- Header Section -->\n <div *ngIf=\"header\" class=\"sefin-dropdown-menu__header\">\n <div class=\"sefin-dropdown-menu__header-content\">\n <sefin-icon\n *ngIf=\"header.icon\"\n [name]=\"header.icon\"\n size=\"md\"\n class=\"sefin-dropdown-menu__header-icon\"\n ></sefin-icon>\n <div class=\"sefin-dropdown-menu__header-text\">\n <div class=\"sefin-dropdown-menu__header-title\">\n {{ header.title }}\n </div>\n <div\n *ngIf=\"header.subtitle\"\n class=\"sefin-dropdown-menu__header-subtitle\"\n >\n {{ header.subtitle }}\n </div>\n </div>\n </div>\n </div>\n\n <ul *ngIf=\"items && items.length > 0\" class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let item of items; let i = index\"\n [attr.data-index]=\"i\"\n [class]=\"getItemClasses(item, i)\"\n [attr.role]=\"item.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(item) ? true : null\"\n (click)=\"handleItemClick(item)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <ng-container *ngIf=\"!item.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div *ngIf=\"getItemIcon(item)\" [class]=\"getIconWrapperClasses(item)\">\n <sefin-icon\n [name]=\"getItemIcon(item)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n item.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(item)\n }}</span>\n <sefin-icon\n *ngIf=\"hasSubmenu(item)\"\n name=\"chevron-right\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-arrow\"\n ></sefin-icon>\n </div>\n <!-- Submenu -->\n <div\n *ngIf=\"hasSubmenu(item) && activeSubmenuIndex === i\"\n [class]=\"getSubmenuClasses(item, i)\"\n role=\"menu\"\n >\n <ul class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let subItem of getItemSubmenu(item); let j = index\"\n [attr.data-index]=\"j\"\n [class]=\"getItemClasses(subItem, j)\"\n [attr.role]=\"subItem.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(subItem) ? true : null\"\n (click)=\"handleItemClick(subItem); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"!subItem.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div\n *ngIf=\"getItemIcon(subItem)\"\n [class]=\"getIconWrapperClasses(subItem)\"\n >\n <sefin-icon\n [name]=\"getItemIcon(subItem)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n subItem.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(subItem)\n }}</span>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".sefin-dropdown-menu{position:relative;display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}.sefin-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}.sefin-dropdown-menu__trigger:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-dropdown-menu__trigger-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sefin-spacing-sm);padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md);transform:translateY(-1px)}.sefin-dropdown-menu__trigger-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-dropdown-menu__trigger-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-dropdown-menu__trigger-icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary, #686868);flex-shrink:0}.sefin-dropdown-menu__menu{position:absolute;z-index:9999;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);overflow:hidden;animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__menu--bottom-start{top:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--bottom-end{top:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--top-start{bottom:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--top-end{bottom:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--left-start{right:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--left-end{right:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--right-start{left:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--right-end{left:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__menu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__menu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu__header{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);margin:0}.sefin-dropdown-menu__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px)}.sefin-dropdown-menu__header-icon{flex-shrink:0;color:var(--sefin-color-primary)}.sefin-dropdown-menu__header-text{flex:1;min-width:0}.sefin-dropdown-menu__header-title{font-family:var(--sefin-font-family-base);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, #383838);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__header-subtitle{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #686868);margin:var(--sefin-spacing-xs, 2px) 0 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs, 4px) 0}.sefin-dropdown-menu__item{position:relative;display:block;width:100%;margin:0;padding:0;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-dropdown-menu__item--divider{height:1px;margin:var(--sefin-spacing-xs, 4px) 0;padding:0;background-color:var(--sefin-color-border);cursor:default;pointer-events:none}.sefin-dropdown-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-text)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item--has-submenu .sefin-dropdown-menu__item-content{padding-right:var(--sefin-spacing-md)}.sefin-dropdown-menu__item--submenu-open{background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--danger .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled){background-color:#f443361a}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-arrow{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:active:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:focus-visible:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px;border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__item-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px);padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);width:100%;box-sizing:border-box;position:relative}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 12px);gap:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 20px);gap:var(--sefin-spacing-md, 16px)}.sefin-dropdown-menu__icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;transition:color .15s ease-in-out;background-color:transparent}.sefin-dropdown-menu__icon-wrapper--danger{background-color:transparent}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__icon-wrapper,.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__icon-wrapper{width:auto;height:auto}.sefin-dropdown-menu__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);transition:color .15s ease-in-out;opacity:.75}.sefin-dropdown-menu__item-icon--with-bg,.sefin-dropdown-menu__icon-wrapper--danger .sefin-dropdown-menu__item-icon{color:var(--sefin-color-error);opacity:1}.sefin-dropdown-menu__item-label{flex:1;font-family:var(--sefin-font-family-base);font-size:inherit;font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-align:left;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;transition:color .15s ease-in-out}.sefin-dropdown-menu__item-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);margin-left:auto;transition:color .15s ease-in-out;opacity:.6}.sefin-dropdown-menu__submenu{position:absolute;top:0;left:100%;margin-left:var(--sefin-spacing-sm, 8px);z-index:10000;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__submenu--right-start,.sefin-dropdown-menu__submenu--right-end{left:auto;right:100%;margin-left:0;margin-right:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__submenu--top-start,.sefin-dropdown-menu__submenu--top-end{top:auto;bottom:0}.sefin-dropdown-menu__submenu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__submenu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__submenu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu--open .sefin-dropdown-menu__trigger-button{border-color:var(--sefin-color-primary)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
5200
|
+
args: [{ selector: 'sefin-dropdown-menu', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <!-- Trigger -->\n <div\n #triggerRef\n class=\"sefin-dropdown-menu__trigger\"\n (click)=\"toggleMenu()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-disabled]=\"disabled\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleMenu()\"\n (keydown.space)=\"toggleMenu(); $event.preventDefault()\"\n >\n <ng-container *ngIf=\"triggerTemplate; else defaultTrigger\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTrigger>\n <button\n type=\"button\"\n class=\"sefin-dropdown-menu__trigger-button\"\n [disabled]=\"disabled\"\n >\n Menu\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"isOpen\"\n class=\"sefin-dropdown-menu__trigger-icon\"\n ></sefin-icon>\n </button>\n </ng-template>\n </div>\n\n <!-- Menu -->\n <div\n *ngIf=\"isOpen && (header || (items && items.length > 0))\"\n #menuRef\n [class]=\"menuClasses\"\n role=\"menu\"\n [attr.aria-label]=\"'Dropdown menu'\"\n >\n <!-- Header Section -->\n <div *ngIf=\"header\" class=\"sefin-dropdown-menu__header\">\n <div class=\"sefin-dropdown-menu__header-content\">\n <sefin-icon\n *ngIf=\"header.icon\"\n [name]=\"header.icon\"\n size=\"md\"\n class=\"sefin-dropdown-menu__header-icon\"\n ></sefin-icon>\n <div class=\"sefin-dropdown-menu__header-text\">\n <div class=\"sefin-dropdown-menu__header-title\">\n {{ header.title }}\n </div>\n <div\n *ngIf=\"header.subtitle\"\n class=\"sefin-dropdown-menu__header-subtitle\"\n >\n {{ header.subtitle }}\n </div>\n </div>\n </div>\n </div>\n\n <ul *ngIf=\"items && items.length > 0\" class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let item of items; let i = index\"\n [attr.data-index]=\"i\"\n [class]=\"getItemClasses(item, i)\"\n [attr.role]=\"item.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(item) ? true : null\"\n (click)=\"handleItemClick(item)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <ng-container *ngIf=\"!item.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div *ngIf=\"getItemIcon(item)\" [class]=\"getIconWrapperClasses(item)\">\n <sefin-icon\n [name]=\"getItemIcon(item)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n item.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(item)\n }}</span>\n <sefin-icon\n *ngIf=\"hasSubmenu(item)\"\n name=\"chevron-right\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-arrow\"\n ></sefin-icon>\n </div>\n <!-- Submenu -->\n <div\n *ngIf=\"hasSubmenu(item) && activeSubmenuIndex === i\"\n [class]=\"getSubmenuClasses(item, i)\"\n role=\"menu\"\n >\n <ul class=\"sefin-dropdown-menu__list\">\n <li\n *ngFor=\"let subItem of getItemSubmenu(item); let j = index\"\n [attr.data-index]=\"j\"\n [class]=\"getItemClasses(subItem, j)\"\n [attr.role]=\"subItem.divider ? 'separator' : 'menuitem'\"\n [attr.aria-disabled]=\"isItemDisabled(subItem) ? true : null\"\n (click)=\"handleItemClick(subItem); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"!subItem.divider\">\n <div class=\"sefin-dropdown-menu__item-content\">\n <div\n *ngIf=\"getItemIcon(subItem)\"\n [class]=\"getIconWrapperClasses(subItem)\"\n >\n <sefin-icon\n [name]=\"getItemIcon(subItem)!\"\n [size]=\"getIconSize()\"\n class=\"sefin-dropdown-menu__item-icon\"\n [class.sefin-dropdown-menu__item-icon--with-bg]=\"\n subItem.class?.includes('danger')\n \"\n ></sefin-icon>\n </div>\n <span class=\"sefin-dropdown-menu__item-label\">{{\n getItemLabel(subItem)\n }}</span>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".sefin-dropdown-menu{position:relative;display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}.sefin-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}.sefin-dropdown-menu__trigger:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-dropdown-menu__trigger-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sefin-spacing-sm);padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;min-height:var(--sefin-component-height-md);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md);transform:translateY(-1px)}.sefin-dropdown-menu__trigger-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-dropdown-menu__trigger-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-dropdown-menu__trigger-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-dropdown-menu--radius-none .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-none)}.sefin-dropdown-menu--radius-sm .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu--radius-md .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-md)}.sefin-dropdown-menu--radius-lg .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-lg)}.sefin-dropdown-menu--radius-xl .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-xl)}.sefin-dropdown-menu--radius-2xl .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-2xl)}.sefin-dropdown-menu--radius-full .sefin-dropdown-menu__trigger-button{border-radius:var(--sefin-radius-full)}.sefin-dropdown-menu__trigger-icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary, #686868);flex-shrink:0}.sefin-dropdown-menu__menu{position:absolute;z-index:9999;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);overflow:hidden;animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__menu--radius-none{border-radius:var(--sefin-radius-none)}.sefin-dropdown-menu__menu--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__menu--radius-md{border-radius:var(--sefin-radius-md)}.sefin-dropdown-menu__menu--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-dropdown-menu__menu--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-dropdown-menu__menu--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-dropdown-menu__menu--radius-full{border-radius:var(--sefin-radius-full)}.sefin-dropdown-menu__menu--bottom-start{top:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--bottom-end{top:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--top-start{bottom:calc(100% + var(--sefin-spacing-xs, 4px));left:0}.sefin-dropdown-menu__menu--top-end{bottom:calc(100% + var(--sefin-spacing-xs, 4px));right:0}.sefin-dropdown-menu__menu--left-start{right:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--left-end{right:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--right-start{left:calc(100% + var(--sefin-spacing-xs, 4px));top:0}.sefin-dropdown-menu__menu--right-end{left:calc(100% + var(--sefin-spacing-xs, 4px));bottom:0}.sefin-dropdown-menu__menu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__menu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__menu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu__header{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);margin:0}.sefin-dropdown-menu__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px)}.sefin-dropdown-menu__header-icon{flex-shrink:0;color:var(--sefin-color-primary)}.sefin-dropdown-menu__header-text{flex:1;min-width:0}.sefin-dropdown-menu__header-title{font-family:var(--sefin-font-family-base);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, #383838);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__header-subtitle{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #686868);margin:var(--sefin-spacing-xs, 2px) 0 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sefin-dropdown-menu__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs, 4px) 0}.sefin-dropdown-menu__item{position:relative;display:block;width:100%;margin:0;padding:0;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sefin-dropdown-menu__item--divider{height:1px;margin:var(--sefin-spacing-xs, 4px) 0;padding:0;background-color:var(--sefin-color-border);cursor:default;pointer-events:none}.sefin-dropdown-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-text)}.sefin-dropdown-menu__item--selected:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item--has-submenu .sefin-dropdown-menu__item-content{padding-right:var(--sefin-spacing-md)}.sefin-dropdown-menu__item--submenu-open{background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item--danger .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled){background-color:#f443361a}.sefin-dropdown-menu__item--danger:hover:not(.sefin-dropdown-menu__item--danger--divider):not(.sefin-dropdown-menu__item--danger--disabled) .sefin-dropdown-menu__item-label{color:var(--sefin-color-error)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-icon{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:hover:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled) .sefin-dropdown-menu__item-arrow{color:var(--sefin-color-text-secondary)}.sefin-dropdown-menu__item:active:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-dropdown-menu__item:focus-visible:not(.sefin-dropdown-menu__item--divider):not(.sefin-dropdown-menu__item--disabled){outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px;border-radius:var(--sefin-radius-sm)}.sefin-dropdown-menu__item-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, 12px);padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);width:100%;box-sizing:border-box;position:relative}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 12px);gap:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__item-content{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 20px);gap:var(--sefin-spacing-md, 16px)}.sefin-dropdown-menu__icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;transition:color .15s ease-in-out;background-color:transparent}.sefin-dropdown-menu__icon-wrapper--danger{background-color:transparent}.sefin-dropdown-menu__menu--sm .sefin-dropdown-menu__icon-wrapper,.sefin-dropdown-menu__menu--lg .sefin-dropdown-menu__icon-wrapper{width:auto;height:auto}.sefin-dropdown-menu__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);transition:color .15s ease-in-out;opacity:.75}.sefin-dropdown-menu__item-icon--with-bg,.sefin-dropdown-menu__icon-wrapper--danger .sefin-dropdown-menu__item-icon{color:var(--sefin-color-error);opacity:1}.sefin-dropdown-menu__item-label{flex:1;font-family:var(--sefin-font-family-base);font-size:inherit;font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-align:left;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;transition:color .15s ease-in-out}.sefin-dropdown-menu__item-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);margin-left:auto;transition:color .15s ease-in-out;opacity:.6}.sefin-dropdown-menu__submenu{position:absolute;top:0;left:100%;margin-left:var(--sefin-spacing-sm, 8px);z-index:10000;min-width:200px;max-width:320px;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);animation:dropdownFadeIn .15s ease-out;box-sizing:border-box}.sefin-dropdown-menu__submenu--right-start,.sefin-dropdown-menu__submenu--right-end{left:auto;right:100%;margin-left:0;margin-right:var(--sefin-spacing-sm, 8px)}.sefin-dropdown-menu__submenu--top-start,.sefin-dropdown-menu__submenu--top-end{top:auto;bottom:0}.sefin-dropdown-menu__submenu--sm{min-width:160px;font-size:var(--sefin-font-size-sm)}.sefin-dropdown-menu__submenu--md{min-width:200px;font-size:var(--sefin-font-size-base)}.sefin-dropdown-menu__submenu--lg{min-width:240px;font-size:var(--sefin-font-size-lg)}.sefin-dropdown-menu--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-dropdown-menu--open .sefin-dropdown-menu__trigger-button{border-color:var(--sefin-color-primary)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
5093
5201
|
}], propDecorators: { containerRef: [{
|
|
5094
5202
|
type: ViewChild,
|
|
5095
5203
|
args: ['containerRef', { static: false }]
|
|
@@ -5116,6 +5224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5116
5224
|
}], triggerTemplate: [{
|
|
5117
5225
|
type: ContentChild,
|
|
5118
5226
|
args: ['triggerTemplate']
|
|
5227
|
+
}], borderRadius: [{
|
|
5228
|
+
type: Input
|
|
5119
5229
|
}], class: [{
|
|
5120
5230
|
type: Input
|
|
5121
5231
|
}], opened: [{
|
|
@@ -5141,6 +5251,8 @@ class FormFieldComponent {
|
|
|
5141
5251
|
variant = 'outlined';
|
|
5142
5252
|
/** FormField size. Options: 'sm' | 'md' | 'lg' */
|
|
5143
5253
|
size = 'md';
|
|
5254
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
5255
|
+
borderRadius = 'md';
|
|
5144
5256
|
/** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */
|
|
5145
5257
|
type = 'text';
|
|
5146
5258
|
/** Placeholder text */
|
|
@@ -5364,6 +5476,7 @@ class FormFieldComponent {
|
|
|
5364
5476
|
'sefin-form-field',
|
|
5365
5477
|
`sefin-form-field--${this.variant}`,
|
|
5366
5478
|
`sefin-form-field--${this.size}`,
|
|
5479
|
+
`sefin-form-field--radius-${this.borderRadius}`,
|
|
5367
5480
|
this.isFocused ? 'sefin-form-field--focused' : '',
|
|
5368
5481
|
this.hasErrorState ? 'sefin-form-field--error' : '',
|
|
5369
5482
|
this.disabled ? 'sefin-form-field--disabled' : '',
|
|
@@ -5475,7 +5588,7 @@ class FormFieldComponent {
|
|
|
5475
5588
|
return hasValidationErrors ? errors : null;
|
|
5476
5589
|
}
|
|
5477
5590
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "sefin-form-field", inputs: { label: "label", variant: "variant", size: "size", type: "type", placeholder: "placeholder", hint: "hint", error: "error", 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: [
|
|
5591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "sefin-form-field", inputs: { label: "label", variant: "variant", size: "size", borderRadius: "borderRadius", type: "type", placeholder: "placeholder", hint: "hint", error: "error", 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: [
|
|
5479
5592
|
{
|
|
5480
5593
|
provide: NG_VALUE_ACCESSOR,
|
|
5481
5594
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
@@ -5486,7 +5599,7 @@ class FormFieldComponent {
|
|
|
5486
5599
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
5487
5600
|
multi: true,
|
|
5488
5601
|
},
|
|
5489
|
-
], 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]=\"hasErrorState\"\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;align-items:flex-start;width:100%;min-width:0;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:var(--sefin-input-height-md);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;align-self:flex-start;text-align:left;width:100%;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-radius-md, 8px);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.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-radius-xl, 16px);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-sm, 8px) 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 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);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)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.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-radius-xl, 16px) var(--sefin-radius-xl, 16px) 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-sm, 8px) 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--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;transition:background-color .2s ease-in-out}.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--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:var(--sefin-input-height-sm)}.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:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.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 });
|
|
5602
|
+
], 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]=\"hasErrorState\"\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;align-items:flex-start;width:100%;min-width:0;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:var(--sefin-input-height-md);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;align-self:flex-start;text-align:left;width:100%;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-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;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-radius-md, 8px);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.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);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-sm, 8px) 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 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);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)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.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-radius-md) var(--sefin-radius-md) 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-sm, 8px) 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--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;transition:background-color .2s ease-in-out}.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--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:var(--sefin-input-height-sm)}.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:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.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 });
|
|
5490
5603
|
}
|
|
5491
5604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
5492
5605
|
type: Component,
|
|
@@ -5501,7 +5614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5501
5614
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
5502
5615
|
multi: true,
|
|
5503
5616
|
},
|
|
5504
|
-
], 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]=\"hasErrorState\"\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;align-items:flex-start;width:100%;min-width:0;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:var(--sefin-input-height-md);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;align-self:flex-start;text-align:left;width:100%;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-radius-md, 8px);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.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-radius-xl, 16px);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-sm, 8px) 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 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);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)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.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-radius-xl, 16px) var(--sefin-radius-xl, 16px) 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-sm, 8px) 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--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;transition:background-color .2s ease-in-out}.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--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:var(--sefin-input-height-sm)}.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:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.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"] }]
|
|
5617
|
+
], 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]=\"hasErrorState\"\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;align-items:flex-start;width:100%;min-width:0;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:var(--sefin-input-height-md);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;align-self:flex-start;text-align:left;width:100%;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-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;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-radius-md, 8px);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.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);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-sm, 8px) 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 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);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)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.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-radius-md) var(--sefin-radius-md) 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-sm, 8px) 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--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;transition:background-color .2s ease-in-out}.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--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:var(--sefin-input-height-sm)}.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:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.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"] }]
|
|
5505
5618
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputRef: [{
|
|
5506
5619
|
type: ViewChild,
|
|
5507
5620
|
args: ['inputRef', { static: false }]
|
|
@@ -5511,6 +5624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5511
5624
|
type: Input
|
|
5512
5625
|
}], size: [{
|
|
5513
5626
|
type: Input
|
|
5627
|
+
}], borderRadius: [{
|
|
5628
|
+
type: Input
|
|
5514
5629
|
}], type: [{
|
|
5515
5630
|
type: Input
|
|
5516
5631
|
}], placeholder: [{
|
|
@@ -5598,6 +5713,8 @@ class PaginationComponent {
|
|
|
5598
5713
|
size = 'md';
|
|
5599
5714
|
/** Pagination variant. Options: 'default' | 'compact' */
|
|
5600
5715
|
variant = 'default';
|
|
5716
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
5717
|
+
borderRadius = 'md';
|
|
5601
5718
|
/** Additional CSS classes */
|
|
5602
5719
|
class = '';
|
|
5603
5720
|
/** Event emitted when page changes */
|
|
@@ -5644,6 +5761,7 @@ class PaginationComponent {
|
|
|
5644
5761
|
'sefin-pagination',
|
|
5645
5762
|
`sefin-pagination--${this.size}`,
|
|
5646
5763
|
`sefin-pagination--${this.variant}`,
|
|
5764
|
+
`sefin-pagination--radius-${this.borderRadius}`,
|
|
5647
5765
|
this.class,
|
|
5648
5766
|
]
|
|
5649
5767
|
.filter(Boolean)
|
|
@@ -5695,11 +5813,11 @@ class PaginationComponent {
|
|
|
5695
5813
|
return this.isCurrentPage(page) ? 'page' : null;
|
|
5696
5814
|
}
|
|
5697
5815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5698
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:flex;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__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:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button--page{min-width:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button--page{min-width:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button--page{min-width:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\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.OnPush });
|
|
5816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", borderRadius: "borderRadius", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:flex;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__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:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);flex-shrink:0}.sefin-pagination--radius-none .sefin-pagination__button{border-radius:var(--sefin-radius-none)}.sefin-pagination--radius-sm .sefin-pagination__button{border-radius:var(--sefin-radius-sm)}.sefin-pagination--radius-md .sefin-pagination__button{border-radius:var(--sefin-radius-md)}.sefin-pagination--radius-lg .sefin-pagination__button{border-radius:var(--sefin-radius-lg)}.sefin-pagination--radius-xl .sefin-pagination__button{border-radius:var(--sefin-radius-xl)}.sefin-pagination--radius-2xl .sefin-pagination__button{border-radius:var(--sefin-radius-2xl)}.sefin-pagination--radius-full .sefin-pagination__button{border-radius:var(--sefin-radius-full)}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button--page{min-width:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button--page{min-width:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button--page{min-width:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\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.OnPush });
|
|
5699
5817
|
}
|
|
5700
5818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
5701
5819
|
type: Component,
|
|
5702
|
-
args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:flex;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__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:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button--page{min-width:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button--page{min-width:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button--page{min-width:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
|
|
5820
|
+
args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:flex;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__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:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);flex-shrink:0}.sefin-pagination--radius-none .sefin-pagination__button{border-radius:var(--sefin-radius-none)}.sefin-pagination--radius-sm .sefin-pagination__button{border-radius:var(--sefin-radius-sm)}.sefin-pagination--radius-md .sefin-pagination__button{border-radius:var(--sefin-radius-md)}.sefin-pagination--radius-lg .sefin-pagination__button{border-radius:var(--sefin-radius-lg)}.sefin-pagination--radius-xl .sefin-pagination__button{border-radius:var(--sefin-radius-xl)}.sefin-pagination--radius-2xl .sefin-pagination__button{border-radius:var(--sefin-radius-2xl)}.sefin-pagination--radius-full .sefin-pagination__button{border-radius:var(--sefin-radius-full)}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button--page{min-width:var(--sefin-component-height-sm)}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button--page{min-width:var(--sefin-component-height-md)}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button--page{min-width:var(--sefin-component-height-lg)}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
|
|
5703
5821
|
}], propDecorators: { currentPage: [{
|
|
5704
5822
|
type: Input
|
|
5705
5823
|
}], totalPages: [{
|
|
@@ -5718,6 +5836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5718
5836
|
type: Input
|
|
5719
5837
|
}], variant: [{
|
|
5720
5838
|
type: Input
|
|
5839
|
+
}], borderRadius: [{
|
|
5840
|
+
type: Input
|
|
5721
5841
|
}], class: [{
|
|
5722
5842
|
type: Input
|
|
5723
5843
|
}], pageChange: [{
|
|
@@ -5730,6 +5850,8 @@ class TextareaComponent {
|
|
|
5730
5850
|
variant = 'outlined';
|
|
5731
5851
|
/** Textarea size. Options: 'sm' | 'md' | 'lg' */
|
|
5732
5852
|
size = 'md';
|
|
5853
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
5854
|
+
borderRadius = 'md';
|
|
5733
5855
|
/** Placeholder text */
|
|
5734
5856
|
placeholder = '';
|
|
5735
5857
|
/** Helper text shown below the textarea */
|
|
@@ -5938,6 +6060,7 @@ class TextareaComponent {
|
|
|
5938
6060
|
'sefin-textarea',
|
|
5939
6061
|
`sefin-textarea--${this.variant}`,
|
|
5940
6062
|
`sefin-textarea--${this.size}`,
|
|
6063
|
+
`sefin-textarea--radius-${this.borderRadius}`,
|
|
5941
6064
|
this.isFocused ? 'sefin-textarea--focused' : '',
|
|
5942
6065
|
this.hasError ? 'sefin-textarea--error' : '',
|
|
5943
6066
|
this.disabled ? 'sefin-textarea--disabled' : '',
|
|
@@ -6025,7 +6148,7 @@ class TextareaComponent {
|
|
|
6025
6148
|
return hasValidationErrors ? errors : null;
|
|
6026
6149
|
}
|
|
6027
6150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6028
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TextareaComponent, isStandalone: true, selector: "sefin-textarea", inputs: { variant: "variant", size: "size", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", rows: "rows", cols: "cols", autoResize: "autoResize", minHeight: "minHeight", maxHeight: "maxHeight", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator", value: "value" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
6151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TextareaComponent, isStandalone: true, selector: "sefin-textarea", inputs: { variant: "variant", size: "size", borderRadius: "borderRadius", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", rows: "rows", cols: "cols", autoResize: "autoResize", minHeight: "minHeight", maxHeight: "maxHeight", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator", value: "value" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
6029
6152
|
{
|
|
6030
6153
|
provide: NG_VALUE_ACCESSOR,
|
|
6031
6154
|
useExisting: forwardRef(() => TextareaComponent),
|
|
@@ -6036,7 +6159,7 @@ class TextareaComponent {
|
|
|
6036
6159
|
useExisting: forwardRef(() => TextareaComponent),
|
|
6037
6160
|
multi: true,
|
|
6038
6161
|
},
|
|
6039
|
-
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textareaClasses\">\n <!-- Textarea Container -->\n <div class=\"sefin-textarea__container\">\n <!-- Textarea Wrapper -->\n <div class=\"sefin-textarea__wrapper\">\n <!-- Textarea -->\n <textarea\n #textareaRef\n [id]=\"id\"\n [name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n class=\"sefin-textarea__textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textarea__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textarea__helper\"\n [class.sefin-textarea__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textarea__counter\"\n [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{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;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__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-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
6162
|
+
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textareaClasses\">\n <!-- Textarea Container -->\n <div class=\"sefin-textarea__container\">\n <!-- Textarea Wrapper -->\n <div class=\"sefin-textarea__wrapper\">\n <!-- Textarea -->\n <textarea\n #textareaRef\n [id]=\"id\"\n [name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n class=\"sefin-textarea__textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textarea__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textarea__helper\"\n [class.sefin-textarea__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textarea__counter\"\n [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{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;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__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-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--radius-none.sefin-textarea--outlined .sefin-textarea__container,.sefin-textarea--radius-none.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-none)}.sefin-textarea--radius-sm.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-sm)}.sefin-textarea--radius-sm.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textarea--radius-md.sefin-textarea--outlined .sefin-textarea__container,.sefin-textarea--radius-md.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-md)}.sefin-textarea--radius-md.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textarea--radius-lg.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-lg)}.sefin-textarea--radius-lg.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textarea--radius-xl.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-xl)}.sefin-textarea--radius-xl.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textarea--radius-2xl.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-2xl)}.sefin-textarea--radius-2xl.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textarea--radius-full.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-full)}.sefin-textarea--radius-full.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
6040
6163
|
}
|
|
6041
6164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
6042
6165
|
type: Component,
|
|
@@ -6051,7 +6174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6051
6174
|
useExisting: forwardRef(() => TextareaComponent),
|
|
6052
6175
|
multi: true,
|
|
6053
6176
|
},
|
|
6054
|
-
], template: "<div [class]=\"textareaClasses\">\n <!-- Textarea Container -->\n <div class=\"sefin-textarea__container\">\n <!-- Textarea Wrapper -->\n <div class=\"sefin-textarea__wrapper\">\n <!-- Textarea -->\n <textarea\n #textareaRef\n [id]=\"id\"\n [name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n class=\"sefin-textarea__textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textarea__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textarea__helper\"\n [class.sefin-textarea__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textarea__counter\"\n [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{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;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__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-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"] }]
|
|
6177
|
+
], template: "<div [class]=\"textareaClasses\">\n <!-- Textarea Container -->\n <div class=\"sefin-textarea__container\">\n <!-- Textarea Wrapper -->\n <div class=\"sefin-textarea__wrapper\">\n <!-- Textarea -->\n <textarea\n #textareaRef\n [id]=\"id\"\n [name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n class=\"sefin-textarea__textarea\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textarea__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textarea__helper\"\n [class.sefin-textarea__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textarea__counter\"\n [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{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;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__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-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);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-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--radius-none.sefin-textarea--outlined .sefin-textarea__container,.sefin-textarea--radius-none.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-none)}.sefin-textarea--radius-sm.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-sm)}.sefin-textarea--radius-sm.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textarea--radius-md.sefin-textarea--outlined .sefin-textarea__container,.sefin-textarea--radius-md.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-md)}.sefin-textarea--radius-md.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textarea--radius-lg.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-lg)}.sefin-textarea--radius-lg.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textarea--radius-xl.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-xl)}.sefin-textarea--radius-xl.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textarea--radius-2xl.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-2xl)}.sefin-textarea--radius-2xl.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textarea--radius-full.sefin-textarea--outlined .sefin-textarea__container{border-radius:var(--sefin-radius-full)}.sefin-textarea--radius-full.sefin-textarea--filled .sefin-textarea__container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"] }]
|
|
6055
6178
|
}], propDecorators: { textareaRef: [{
|
|
6056
6179
|
type: ViewChild,
|
|
6057
6180
|
args: ['textareaRef', { static: false }]
|
|
@@ -6059,6 +6182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6059
6182
|
type: Input
|
|
6060
6183
|
}], size: [{
|
|
6061
6184
|
type: Input
|
|
6185
|
+
}], borderRadius: [{
|
|
6186
|
+
type: Input
|
|
6062
6187
|
}], placeholder: [{
|
|
6063
6188
|
type: Input
|
|
6064
6189
|
}], hint: [{
|
|
@@ -6127,6 +6252,8 @@ class ModalComponent {
|
|
|
6127
6252
|
showCloseButton = true;
|
|
6128
6253
|
/** Modal title (optional) */
|
|
6129
6254
|
title;
|
|
6255
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
6256
|
+
borderRadius = 'md';
|
|
6130
6257
|
/** Additional CSS classes */
|
|
6131
6258
|
class = '';
|
|
6132
6259
|
/** Event emitted when modal opens */
|
|
@@ -6181,6 +6308,7 @@ class ModalComponent {
|
|
|
6181
6308
|
'sefin-modal',
|
|
6182
6309
|
this.isOpen ? 'sefin-modal--open' : '',
|
|
6183
6310
|
`sefin-modal--${this.size}`,
|
|
6311
|
+
`sefin-modal--radius-${this.borderRadius}`,
|
|
6184
6312
|
this.class,
|
|
6185
6313
|
]
|
|
6186
6314
|
.filter(Boolean)
|
|
@@ -6196,11 +6324,11 @@ class ModalComponent {
|
|
|
6196
6324
|
.join(' ');
|
|
6197
6325
|
}
|
|
6198
6326
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ModalComponent, isStandalone: true, selector: "sefin-modal", inputs: { isOpen: "isOpen", size: "size", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape", showCloseButton: "showCloseButton", title: "title", class: "class" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;width:100%;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none;box-sizing:border-box}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ModalComponent, isStandalone: true, selector: "sefin-modal", inputs: { isOpen: "isOpen", size: "size", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape", showCloseButton: "showCloseButton", title: "title", borderRadius: "borderRadius", class: "class" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;width:100%;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none;box-sizing:border-box}.sefin-modal--radius-none{border-radius:var(--sefin-radius-none)}.sefin-modal--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-modal--radius-md{border-radius:var(--sefin-radius-md)}.sefin-modal--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-modal--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-modal--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-modal--radius-full{border-radius:var(--sefin-radius-full)}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6200
6328
|
}
|
|
6201
6329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, decorators: [{
|
|
6202
6330
|
type: Component,
|
|
6203
|
-
args: [{ selector: 'sefin-modal', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;width:100%;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none;box-sizing:border-box}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
6331
|
+
args: [{ selector: 'sefin-modal', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;width:100%;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none;box-sizing:border-box}.sefin-modal--radius-none{border-radius:var(--sefin-radius-none)}.sefin-modal--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-modal--radius-md{border-radius:var(--sefin-radius-md)}.sefin-modal--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-modal--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-modal--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-modal--radius-full{border-radius:var(--sefin-radius-full)}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:var(--sefin-component-height-sm);height:var(--sefin-component-height-sm);border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
6204
6332
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isOpen: [{
|
|
6205
6333
|
type: Input
|
|
6206
6334
|
}], size: [{
|
|
@@ -6215,6 +6343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6215
6343
|
type: Input
|
|
6216
6344
|
}], title: [{
|
|
6217
6345
|
type: Input
|
|
6346
|
+
}], borderRadius: [{
|
|
6347
|
+
type: Input
|
|
6218
6348
|
}], class: [{
|
|
6219
6349
|
type: Input
|
|
6220
6350
|
}], opened: [{
|
|
@@ -6292,6 +6422,8 @@ class TableComponent {
|
|
|
6292
6422
|
headerActionsTemplate;
|
|
6293
6423
|
/** Empty state icon template slot */
|
|
6294
6424
|
emptyIconTemplate;
|
|
6425
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
6426
|
+
borderRadius = 'md';
|
|
6295
6427
|
/** Row clicked event */
|
|
6296
6428
|
rowClicked = new EventEmitter();
|
|
6297
6429
|
/** Selection changed event */
|
|
@@ -6741,6 +6873,13 @@ class TableComponent {
|
|
|
6741
6873
|
}
|
|
6742
6874
|
return classes.join(' ');
|
|
6743
6875
|
}
|
|
6876
|
+
/** Gets CSS classes for the table container (includes border radius) */
|
|
6877
|
+
getContainerClasses() {
|
|
6878
|
+
return [
|
|
6879
|
+
'sefin-table__container',
|
|
6880
|
+
`sefin-table__container--radius-${this.borderRadius}`,
|
|
6881
|
+
].join(' ');
|
|
6882
|
+
}
|
|
6744
6883
|
/**
|
|
6745
6884
|
* Gets the width CSS value for a column
|
|
6746
6885
|
* All data columns get equal width percentage to ensure uniform sizing
|
|
@@ -6891,11 +7030,11 @@ class TableComponent {
|
|
|
6891
7030
|
return pages;
|
|
6892
7031
|
}
|
|
6893
7032
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"row\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <div class=\"sefin-table__empty-icon-wrapper\">\n <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultEmptyIcon>\n <svg\n class=\"sefin-table__empty-icon\"\n width=\"80\"\n height=\"80\"\n viewBox=\"0 0 80 80\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"38\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-opacity=\"0.2\"\n />\n <path\n d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.3\"\n />\n <path\n d=\"M30 35L40 42L50 35\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.4\"\n />\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"3\"\n fill=\"currentColor\"\n fill-opacity=\"0.15\"\n />\n </svg>\n </ng-template>\n </div>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background:linear-gradient(to bottom,#55c3d814,#55c3d80d);color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d81a,#55c3d80f)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value", "error", "errorMessage"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate", borderRadius: "borderRadius" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"row\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <div class=\"sefin-table__empty-icon-wrapper\">\n <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultEmptyIcon>\n <svg\n class=\"sefin-table__empty-icon\"\n width=\"80\"\n height=\"80\"\n viewBox=\"0 0 80 80\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"38\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-opacity=\"0.2\"\n />\n <path\n d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.3\"\n />\n <path\n d=\"M30 35L40 42L50 35\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.4\"\n />\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"3\"\n fill=\"currentColor\"\n fill-opacity=\"0.15\"\n />\n </svg>\n </ng-template>\n </div>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background:linear-gradient(to bottom,#55c3d814,#55c3d80d);color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d81a,#55c3d80f)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "borderRadius", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value", "error", "errorMessage"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "borderRadius", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6895
7034
|
}
|
|
6896
7035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, decorators: [{
|
|
6897
7036
|
type: Component,
|
|
6898
|
-
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"row\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <div class=\"sefin-table__empty-icon-wrapper\">\n <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultEmptyIcon>\n <svg\n class=\"sefin-table__empty-icon\"\n width=\"80\"\n height=\"80\"\n viewBox=\"0 0 80 80\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"38\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-opacity=\"0.2\"\n />\n <path\n d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.3\"\n />\n <path\n d=\"M30 35L40 42L50 35\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.4\"\n />\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"3\"\n fill=\"currentColor\"\n fill-opacity=\"0.15\"\n />\n </svg>\n </ng-template>\n </div>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background:linear-gradient(to bottom,#55c3d814,#55c3d80d);color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d81a,#55c3d80f)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\n"] }]
|
|
7037
|
+
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"getContainerClasses()\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"row\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <div class=\"sefin-table__empty-icon-wrapper\">\n <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultEmptyIcon>\n <svg\n class=\"sefin-table__empty-icon\"\n width=\"80\"\n height=\"80\"\n viewBox=\"0 0 80 80\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"38\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-opacity=\"0.2\"\n />\n <path\n d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.3\"\n />\n <path\n d=\"M30 35L40 42L50 35\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-opacity=\"0.4\"\n />\n <circle\n cx=\"40\"\n cy=\"40\"\n r=\"3\"\n fill=\"currentColor\"\n fill-opacity=\"0.15\"\n />\n </svg>\n </ng-template>\n </div>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background:linear-gradient(to bottom,#55c3d814,#55c3d80d);color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d81a,#55c3d80f)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\n"] }]
|
|
6899
7038
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
6900
7039
|
type: Input
|
|
6901
7040
|
}], data: [{
|
|
@@ -6934,6 +7073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6934
7073
|
type: Input
|
|
6935
7074
|
}], emptyIconTemplate: [{
|
|
6936
7075
|
type: Input
|
|
7076
|
+
}], borderRadius: [{
|
|
7077
|
+
type: Input
|
|
6937
7078
|
}], rowClicked: [{
|
|
6938
7079
|
type: Output
|
|
6939
7080
|
}], selectionChanged: [{
|
|
@@ -6970,6 +7111,8 @@ class SidebarComponent {
|
|
|
6970
7111
|
footerVersion = 'Versión 1.0.0';
|
|
6971
7112
|
/** Show footer */
|
|
6972
7113
|
showFooter = true;
|
|
7114
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
7115
|
+
borderRadius = 'md';
|
|
6973
7116
|
/** Toggle collapse event */
|
|
6974
7117
|
toggleCollapse = new EventEmitter();
|
|
6975
7118
|
/** Toggle open event (for mobile) */
|
|
@@ -7130,11 +7273,11 @@ class SidebarComponent {
|
|
|
7130
7273
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
7131
7274
|
}
|
|
7132
7275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
7133
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse", toggleOpen: "toggleOpen", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute) || (!hasChildren(item) && isActive(item.route || ''))\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
7276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter", borderRadius: "borderRadius" }, outputs: { toggleCollapse: "toggleCollapse", toggleOpen: "toggleOpen", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n [class.sefin-sidebar--radius-none]=\"borderRadius === 'none'\"\n [class.sefin-sidebar--radius-sm]=\"borderRadius === 'sm'\"\n [class.sefin-sidebar--radius-md]=\"borderRadius === 'md'\"\n [class.sefin-sidebar--radius-lg]=\"borderRadius === 'lg'\"\n [class.sefin-sidebar--radius-xl]=\"borderRadius === 'xl'\"\n [class.sefin-sidebar--radius-2xl]=\"borderRadius === '2xl'\"\n [class.sefin-sidebar--radius-full]=\"borderRadius === 'full'\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute) || (!hasChildren(item) && isActive(item.route || ''))\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar--radius-none{border-top-right-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-sidebar--radius-sm{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-sidebar--radius-md{border-top-right-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-sidebar--radius-lg{border-top-right-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-sidebar--radius-xl{border-top-right-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-sidebar--radius-2xl{border-top-right-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-sidebar--radius-full{border-top-right-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
7134
7277
|
}
|
|
7135
7278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
7136
7279
|
type: Component,
|
|
7137
|
-
args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute) || (!hasChildren(item) && isActive(item.route || ''))\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"] }]
|
|
7280
|
+
args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n [class.sefin-sidebar--radius-none]=\"borderRadius === 'none'\"\n [class.sefin-sidebar--radius-sm]=\"borderRadius === 'sm'\"\n [class.sefin-sidebar--radius-md]=\"borderRadius === 'md'\"\n [class.sefin-sidebar--radius-lg]=\"borderRadius === 'lg'\"\n [class.sefin-sidebar--radius-xl]=\"borderRadius === 'xl'\"\n [class.sefin-sidebar--radius-2xl]=\"borderRadius === '2xl'\"\n [class.sefin-sidebar--radius-full]=\"borderRadius === 'full'\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute) || (!hasChildren(item) && isActive(item.route || ''))\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar--radius-none{border-top-right-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-sidebar--radius-sm{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-sidebar--radius-md{border-top-right-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-sidebar--radius-lg{border-top-right-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-sidebar--radius-xl{border-top-right-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-sidebar--radius-2xl{border-top-right-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-sidebar--radius-full{border-top-right-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"] }]
|
|
7138
7281
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { navItems: [{
|
|
7139
7282
|
type: Input
|
|
7140
7283
|
}], isMobile: [{
|
|
@@ -7153,6 +7296,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
7153
7296
|
type: Input
|
|
7154
7297
|
}], showFooter: [{
|
|
7155
7298
|
type: Input
|
|
7299
|
+
}], borderRadius: [{
|
|
7300
|
+
type: Input
|
|
7156
7301
|
}], toggleCollapse: [{
|
|
7157
7302
|
type: Output
|
|
7158
7303
|
}], toggleOpen: [{
|
|
@@ -7180,6 +7325,8 @@ class DrawerComponent {
|
|
|
7180
7325
|
closeOnOverlayClick = true;
|
|
7181
7326
|
/** Whether to close on escape key */
|
|
7182
7327
|
closeOnEscape = true;
|
|
7328
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
7329
|
+
borderRadius = 'md';
|
|
7183
7330
|
/** Close event */
|
|
7184
7331
|
close = new EventEmitter();
|
|
7185
7332
|
/** Overlay click handler */
|
|
@@ -7203,6 +7350,7 @@ class DrawerComponent {
|
|
|
7203
7350
|
get drawerClasses() {
|
|
7204
7351
|
const classes = ['sefin-drawer'];
|
|
7205
7352
|
classes.push(`sefin-drawer--${this.position}`);
|
|
7353
|
+
classes.push(`sefin-drawer--radius-${this.borderRadius}`);
|
|
7206
7354
|
if (this.isOpen) {
|
|
7207
7355
|
classes.push('sefin-drawer--open');
|
|
7208
7356
|
}
|
|
@@ -7222,11 +7370,11 @@ class DrawerComponent {
|
|
|
7222
7370
|
return styles;
|
|
7223
7371
|
}
|
|
7224
7372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DrawerComponent, isStandalone: true, selector: "sefin-drawer", inputs: { isOpen: "isOpen", position: "position", minWidth: "minWidth", minHeight: "minHeight", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, ngImport: i0, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n <div\n class=\"sefin-drawer__overlay\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<aside\n [class]=\"drawerClasses\"\n [ngStyle]=\"drawerStyles\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n>\n <div class=\"sefin-drawer__content\">\n <ng-content></ng-content>\n </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:fit-content;min-width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:fit-content;min-width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%;width:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DrawerComponent, isStandalone: true, selector: "sefin-drawer", inputs: { isOpen: "isOpen", position: "position", minWidth: "minWidth", minHeight: "minHeight", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape", borderRadius: "borderRadius" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, ngImport: i0, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n <div\n class=\"sefin-drawer__overlay\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<aside\n [class]=\"drawerClasses\"\n [ngStyle]=\"drawerStyles\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n>\n <div class=\"sefin-drawer__content\">\n <ng-content></ng-content>\n </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-none{border-top-right-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-sm{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-md{border-top-right-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-lg{border-top-right-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-xl{border-top-right-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-2xl{border-top-right-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-full{border-top-right-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-none{border-top-left-radius:var(--sefin-radius-none);border-bottom-left-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-sm{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-md{border-top-left-radius:var(--sefin-radius-md);border-bottom-left-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-lg{border-top-left-radius:var(--sefin-radius-lg);border-bottom-left-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-xl{border-top-left-radius:var(--sefin-radius-xl);border-bottom-left-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-2xl{border-top-left-radius:var(--sefin-radius-2xl);border-bottom-left-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-full{border-top-left-radius:var(--sefin-radius-full);border-bottom-left-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-none{border-bottom-left-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-sm{border-bottom-left-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-md{border-bottom-left-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-lg{border-bottom-left-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-xl{border-bottom-left-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-2xl{border-bottom-left-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-full{border-bottom-left-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-none{border-top-left-radius:var(--sefin-radius-none);border-top-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-sm{border-top-left-radius:var(--sefin-radius-sm);border-top-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-md{border-top-left-radius:var(--sefin-radius-md);border-top-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-lg{border-top-left-radius:var(--sefin-radius-lg);border-top-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-xl{border-top-left-radius:var(--sefin-radius-xl);border-top-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-2xl{border-top-left-radius:var(--sefin-radius-2xl);border-top-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-full{border-top-left-radius:var(--sefin-radius-full);border-top-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:fit-content;min-width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:fit-content;min-width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%;width:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7226
7374
|
}
|
|
7227
7375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
7228
7376
|
type: Component,
|
|
7229
|
-
args: [{ selector: 'sefin-drawer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n <div\n class=\"sefin-drawer__overlay\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<aside\n [class]=\"drawerClasses\"\n [ngStyle]=\"drawerStyles\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n>\n <div class=\"sefin-drawer__content\">\n <ng-content></ng-content>\n </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:fit-content;min-width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:fit-content;min-width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%;width:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
7377
|
+
args: [{ selector: 'sefin-drawer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n <div\n class=\"sefin-drawer__overlay\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<aside\n [class]=\"drawerClasses\"\n [ngStyle]=\"drawerStyles\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n>\n <div class=\"sefin-drawer__content\">\n <ng-content></ng-content>\n </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-none{border-top-right-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-sm{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-md{border-top-right-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-lg{border-top-right-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-xl{border-top-right-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-2xl{border-top-right-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--left.sefin-drawer--radius-full{border-top-right-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-none{border-top-left-radius:var(--sefin-radius-none);border-bottom-left-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-sm{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-md{border-top-left-radius:var(--sefin-radius-md);border-bottom-left-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-lg{border-top-left-radius:var(--sefin-radius-lg);border-bottom-left-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-xl{border-top-left-radius:var(--sefin-radius-xl);border-bottom-left-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-2xl{border-top-left-radius:var(--sefin-radius-2xl);border-bottom-left-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--right.sefin-drawer--radius-full{border-top-left-radius:var(--sefin-radius-full);border-bottom-left-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-none{border-bottom-left-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-sm{border-bottom-left-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-md{border-bottom-left-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-lg{border-bottom-left-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-xl{border-bottom-left-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-2xl{border-bottom-left-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--top.sefin-drawer--radius-full{border-bottom-left-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-none{border-top-left-radius:var(--sefin-radius-none);border-top-right-radius:var(--sefin-radius-none)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-sm{border-top-left-radius:var(--sefin-radius-sm);border-top-right-radius:var(--sefin-radius-sm)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-md{border-top-left-radius:var(--sefin-radius-md);border-top-right-radius:var(--sefin-radius-md)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-lg{border-top-left-radius:var(--sefin-radius-lg);border-top-right-radius:var(--sefin-radius-lg)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-xl{border-top-left-radius:var(--sefin-radius-xl);border-top-right-radius:var(--sefin-radius-xl)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-2xl{border-top-left-radius:var(--sefin-radius-2xl);border-top-right-radius:var(--sefin-radius-2xl)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--radius-full{border-top-left-radius:var(--sefin-radius-full);border-top-right-radius:var(--sefin-radius-full)}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:fit-content;min-width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:fit-content;min-width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:fit-content;min-height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%;width:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
7230
7378
|
}], propDecorators: { isOpen: [{
|
|
7231
7379
|
type: Input
|
|
7232
7380
|
}], position: [{
|
|
@@ -7241,6 +7389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
7241
7389
|
type: Input
|
|
7242
7390
|
}], closeOnEscape: [{
|
|
7243
7391
|
type: Input
|
|
7392
|
+
}], borderRadius: [{
|
|
7393
|
+
type: Input
|
|
7244
7394
|
}], close: [{
|
|
7245
7395
|
type: Output
|
|
7246
7396
|
}], handleEscapeKey: [{
|
|
@@ -7270,6 +7420,8 @@ class AppBarComponent {
|
|
|
7270
7420
|
actions = [];
|
|
7271
7421
|
/** Elevation level (0-24) */
|
|
7272
7422
|
elevation = 1;
|
|
7423
|
+
/** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */
|
|
7424
|
+
borderRadius = 'md';
|
|
7273
7425
|
/** Menu button clicked event */
|
|
7274
7426
|
menuClicked = new EventEmitter();
|
|
7275
7427
|
/** Action clicked event */
|
|
@@ -7354,11 +7506,11 @@ class AppBarComponent {
|
|
|
7354
7506
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
7355
7507
|
}
|
|
7356
7508
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBarComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
7357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppBarComponent, isStandalone: true, selector: "sefin-app-bar", inputs: { title: "title", subtitle: "subtitle", logoIcon: "logoIcon", logoImage: "logoImage", showMenuButton: "showMenuButton", isMobile: "isMobile", actions: "actions", elevation: "elevation" }, outputs: { menuClicked: "menuClicked", actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\n [style.box-shadow]=\"'var(--sefin-shadow-' + elevation + ', 0 ' + elevation + 'px ' + (elevation * 2) + 'px rgba(0, 0, 0, 0.1))'\"\n>\n <div class=\"sefin-app-bar__container\">\n <!-- Left section: Menu button and logo/title -->\n <div class=\"sefin-app-bar__left\">\n @if (showMenuButton) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__menu-button\"\n (click)=\"handleMenuClick()\"\n aria-label=\"Toggle menu\"\n aria-expanded=\"false\"\n >\n <span class=\"sefin-app-bar__menu-icon\" [innerHTML]=\"getIconSvg('menu', 24)\"></span>\n </button>\n }\n\n <div class=\"sefin-app-bar__brand\">\n @if (logoImage) {\n <img\n [src]=\"logoImage\"\n [alt]=\"title\"\n class=\"sefin-app-bar__logo-image\"\n />\n }\n @if (logoIcon && !logoImage) {\n <div class=\"sefin-app-bar__logo-icon-container\">\n <span class=\"sefin-app-bar__logo-icon\" [innerHTML]=\"getIconSvg(logoIcon, 24)\"></span>\n </div>\n }\n <div class=\"sefin-app-bar__title-section\">\n <h1 class=\"sefin-app-bar__title\">{{ title }}</h1>\n @if (subtitle) {\n <span class=\"sefin-app-bar__subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n </div>\n\n <!-- Center section: Projected content -->\n <div class=\"sefin-app-bar__center\">\n <ng-content select=\"[slot=center]\"></ng-content>\n </div>\n\n <!-- Right section: Actions and projected content -->\n <div class=\"sefin-app-bar__right\">\n @if (actions.length > 0) {\n <div class=\"sefin-app-bar__actions\">\n @for (action of actions; track action.label) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__action-button\"\n [class.sefin-app-bar__action-button--disabled]=\"action.disabled\"\n [class]=\"action.class || ''\"\n [disabled]=\"action.disabled\"\n [attr.aria-label]=\"action.label\"\n (click)=\"!action.disabled && handleActionClick(action)\"\n >\n <span class=\"sefin-app-bar__action-icon\" [innerHTML]=\"getIconSvg(action.icon, 20)\"></span>\n </button>\n }\n </div>\n }\n <ng-content select=\"[slot=right]\"></ng-content>\n </div>\n </div>\n</header>\n", styles: [".sefin-app-bar{width:100%;height:64px;min-height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;z-index:10;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:box-shadow .3s ease-in-out}.sefin-app-bar__container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sefin-spacing-lg, 1.5rem);gap:var(--sefin-spacing-lg, 1.5rem)}.sefin-app-bar__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);flex:0 0 auto;min-width:0}.sefin-app-bar__menu-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:24px;height:24px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__menu-button:hover,.sefin-app-bar__menu-button:active{color:#55c3d8}.sefin-app-bar__menu-button:focus{outline:none}.sefin-app-bar__brand{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);min-width:0}.sefin-app-bar__logo-image{width:40px;height:40px;object-fit:contain;flex-shrink:0}.sefin-app-bar__logo-icon-container{width:40px;height:40px;border-radius:12px;background:linear-gradient(to right,#55c3d8,#4aafc4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-app-bar__title-section{display:flex;flex-direction:column;gap:0;min-width:0}.sefin-app-bar__title{color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__subtitle{color:#828282;font-size:var(--sefin-font-size-sm, .875rem);line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__center{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}.sefin-app-bar__right{display:flex;align-items:center;gap:var(--sefin-spacing-sm, .75rem);flex:0 0 auto;min-width:0}.sefin-app-bar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-xs, .5rem)}.sefin-app-bar__action-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__action-button:hover:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:active:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:focus{outline:none}.sefin-app-bar__action-button.sefin-app-bar__action-button--disabled{opacity:.5;cursor:not-allowed}.sefin-app-bar.sefin-app-bar--mobile{height:56px;min-height:56px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__container{padding:0 var(--sefin-spacing-md, 1rem);gap:var(--sefin-spacing-md, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__title{font-size:var(--sefin-font-size-base, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__subtitle{font-size:var(--sefin-font-size-xs, .75rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container{width:32px;height:32px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon svg,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon{width:18px;height:18px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
7509
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppBarComponent, isStandalone: true, selector: "sefin-app-bar", inputs: { title: "title", subtitle: "subtitle", logoIcon: "logoIcon", logoImage: "logoImage", showMenuButton: "showMenuButton", isMobile: "isMobile", actions: "actions", elevation: "elevation", borderRadius: "borderRadius" }, outputs: { menuClicked: "menuClicked", actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\n [class.sefin-app-bar--radius-none]=\"borderRadius === 'none'\"\n [class.sefin-app-bar--radius-sm]=\"borderRadius === 'sm'\"\n [class.sefin-app-bar--radius-md]=\"borderRadius === 'md'\"\n [class.sefin-app-bar--radius-lg]=\"borderRadius === 'lg'\"\n [class.sefin-app-bar--radius-xl]=\"borderRadius === 'xl'\"\n [class.sefin-app-bar--radius-2xl]=\"borderRadius === '2xl'\"\n [class.sefin-app-bar--radius-full]=\"borderRadius === 'full'\"\n [style.box-shadow]=\"'var(--sefin-shadow-' + elevation + ', 0 ' + elevation + 'px ' + (elevation * 2) + 'px rgba(0, 0, 0, 0.1))'\"\n>\n <div class=\"sefin-app-bar__container\">\n <!-- Left section: Menu button and logo/title -->\n <div class=\"sefin-app-bar__left\">\n @if (showMenuButton) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__menu-button\"\n (click)=\"handleMenuClick()\"\n aria-label=\"Toggle menu\"\n aria-expanded=\"false\"\n >\n <span class=\"sefin-app-bar__menu-icon\" [innerHTML]=\"getIconSvg('menu', 24)\"></span>\n </button>\n }\n\n <div class=\"sefin-app-bar__brand\">\n @if (logoImage) {\n <img\n [src]=\"logoImage\"\n [alt]=\"title\"\n class=\"sefin-app-bar__logo-image\"\n />\n }\n @if (logoIcon && !logoImage) {\n <div class=\"sefin-app-bar__logo-icon-container\">\n <span class=\"sefin-app-bar__logo-icon\" [innerHTML]=\"getIconSvg(logoIcon, 24)\"></span>\n </div>\n }\n <div class=\"sefin-app-bar__title-section\">\n <h1 class=\"sefin-app-bar__title\">{{ title }}</h1>\n @if (subtitle) {\n <span class=\"sefin-app-bar__subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n </div>\n\n <!-- Center section: Projected content -->\n <div class=\"sefin-app-bar__center\">\n <ng-content select=\"[slot=center]\"></ng-content>\n </div>\n\n <!-- Right section: Actions and projected content -->\n <div class=\"sefin-app-bar__right\">\n @if (actions.length > 0) {\n <div class=\"sefin-app-bar__actions\">\n @for (action of actions; track action.label) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__action-button\"\n [class.sefin-app-bar__action-button--disabled]=\"action.disabled\"\n [class]=\"action.class || ''\"\n [disabled]=\"action.disabled\"\n [attr.aria-label]=\"action.label\"\n (click)=\"!action.disabled && handleActionClick(action)\"\n >\n <span class=\"sefin-app-bar__action-icon\" [innerHTML]=\"getIconSvg(action.icon, 20)\"></span>\n </button>\n }\n </div>\n }\n <ng-content select=\"[slot=right]\"></ng-content>\n </div>\n </div>\n</header>\n", styles: [".sefin-app-bar{width:100%;height:64px;min-height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;z-index:10;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:box-shadow .3s ease-in-out}.sefin-app-bar--radius-none{border-bottom-left-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-app-bar--radius-sm{border-bottom-left-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-app-bar--radius-md{border-bottom-left-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-app-bar--radius-lg{border-bottom-left-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-app-bar--radius-xl{border-bottom-left-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-app-bar--radius-2xl{border-bottom-left-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-app-bar--radius-full{border-bottom-left-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-app-bar__container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sefin-spacing-lg, 1.5rem);gap:var(--sefin-spacing-lg, 1.5rem)}.sefin-app-bar__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);flex:0 0 auto;min-width:0}.sefin-app-bar__menu-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:24px;height:24px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__menu-button:hover,.sefin-app-bar__menu-button:active{color:#55c3d8}.sefin-app-bar__menu-button:focus{outline:none}.sefin-app-bar__brand{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);min-width:0}.sefin-app-bar__logo-image{width:40px;height:40px;object-fit:contain;flex-shrink:0}.sefin-app-bar__logo-icon-container{width:40px;height:40px;border-radius:12px;background:linear-gradient(to right,#55c3d8,#4aafc4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-app-bar__title-section{display:flex;flex-direction:column;gap:0;min-width:0}.sefin-app-bar__title{color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__subtitle{color:#828282;font-size:var(--sefin-font-size-sm, .875rem);line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__center{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}.sefin-app-bar__right{display:flex;align-items:center;gap:var(--sefin-spacing-sm, .75rem);flex:0 0 auto;min-width:0}.sefin-app-bar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-xs, .5rem)}.sefin-app-bar__action-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__action-button:hover:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:active:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:focus{outline:none}.sefin-app-bar__action-button.sefin-app-bar__action-button--disabled{opacity:.5;cursor:not-allowed}.sefin-app-bar.sefin-app-bar--mobile{height:56px;min-height:56px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__container{padding:0 var(--sefin-spacing-md, 1rem);gap:var(--sefin-spacing-md, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__title{font-size:var(--sefin-font-size-base, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__subtitle{font-size:var(--sefin-font-size-xs, .75rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container{width:32px;height:32px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon svg,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon{width:18px;height:18px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
7358
7510
|
}
|
|
7359
7511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
7360
7512
|
type: Component,
|
|
7361
|
-
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule, IconComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\n [style.box-shadow]=\"'var(--sefin-shadow-' + elevation + ', 0 ' + elevation + 'px ' + (elevation * 2) + 'px rgba(0, 0, 0, 0.1))'\"\n>\n <div class=\"sefin-app-bar__container\">\n <!-- Left section: Menu button and logo/title -->\n <div class=\"sefin-app-bar__left\">\n @if (showMenuButton) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__menu-button\"\n (click)=\"handleMenuClick()\"\n aria-label=\"Toggle menu\"\n aria-expanded=\"false\"\n >\n <span class=\"sefin-app-bar__menu-icon\" [innerHTML]=\"getIconSvg('menu', 24)\"></span>\n </button>\n }\n\n <div class=\"sefin-app-bar__brand\">\n @if (logoImage) {\n <img\n [src]=\"logoImage\"\n [alt]=\"title\"\n class=\"sefin-app-bar__logo-image\"\n />\n }\n @if (logoIcon && !logoImage) {\n <div class=\"sefin-app-bar__logo-icon-container\">\n <span class=\"sefin-app-bar__logo-icon\" [innerHTML]=\"getIconSvg(logoIcon, 24)\"></span>\n </div>\n }\n <div class=\"sefin-app-bar__title-section\">\n <h1 class=\"sefin-app-bar__title\">{{ title }}</h1>\n @if (subtitle) {\n <span class=\"sefin-app-bar__subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n </div>\n\n <!-- Center section: Projected content -->\n <div class=\"sefin-app-bar__center\">\n <ng-content select=\"[slot=center]\"></ng-content>\n </div>\n\n <!-- Right section: Actions and projected content -->\n <div class=\"sefin-app-bar__right\">\n @if (actions.length > 0) {\n <div class=\"sefin-app-bar__actions\">\n @for (action of actions; track action.label) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__action-button\"\n [class.sefin-app-bar__action-button--disabled]=\"action.disabled\"\n [class]=\"action.class || ''\"\n [disabled]=\"action.disabled\"\n [attr.aria-label]=\"action.label\"\n (click)=\"!action.disabled && handleActionClick(action)\"\n >\n <span class=\"sefin-app-bar__action-icon\" [innerHTML]=\"getIconSvg(action.icon, 20)\"></span>\n </button>\n }\n </div>\n }\n <ng-content select=\"[slot=right]\"></ng-content>\n </div>\n </div>\n</header>\n", styles: [".sefin-app-bar{width:100%;height:64px;min-height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;z-index:10;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:box-shadow .3s ease-in-out}.sefin-app-bar__container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sefin-spacing-lg, 1.5rem);gap:var(--sefin-spacing-lg, 1.5rem)}.sefin-app-bar__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);flex:0 0 auto;min-width:0}.sefin-app-bar__menu-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:24px;height:24px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__menu-button:hover,.sefin-app-bar__menu-button:active{color:#55c3d8}.sefin-app-bar__menu-button:focus{outline:none}.sefin-app-bar__brand{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);min-width:0}.sefin-app-bar__logo-image{width:40px;height:40px;object-fit:contain;flex-shrink:0}.sefin-app-bar__logo-icon-container{width:40px;height:40px;border-radius:12px;background:linear-gradient(to right,#55c3d8,#4aafc4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-app-bar__title-section{display:flex;flex-direction:column;gap:0;min-width:0}.sefin-app-bar__title{color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__subtitle{color:#828282;font-size:var(--sefin-font-size-sm, .875rem);line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__center{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}.sefin-app-bar__right{display:flex;align-items:center;gap:var(--sefin-spacing-sm, .75rem);flex:0 0 auto;min-width:0}.sefin-app-bar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-xs, .5rem)}.sefin-app-bar__action-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__action-button:hover:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:active:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:focus{outline:none}.sefin-app-bar__action-button.sefin-app-bar__action-button--disabled{opacity:.5;cursor:not-allowed}.sefin-app-bar.sefin-app-bar--mobile{height:56px;min-height:56px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__container{padding:0 var(--sefin-spacing-md, 1rem);gap:var(--sefin-spacing-md, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__title{font-size:var(--sefin-font-size-base, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__subtitle{font-size:var(--sefin-font-size-xs, .75rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container{width:32px;height:32px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon svg,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon{width:18px;height:18px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:18px;height:18px}\n"] }]
|
|
7513
|
+
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule, IconComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\n [class.sefin-app-bar--radius-none]=\"borderRadius === 'none'\"\n [class.sefin-app-bar--radius-sm]=\"borderRadius === 'sm'\"\n [class.sefin-app-bar--radius-md]=\"borderRadius === 'md'\"\n [class.sefin-app-bar--radius-lg]=\"borderRadius === 'lg'\"\n [class.sefin-app-bar--radius-xl]=\"borderRadius === 'xl'\"\n [class.sefin-app-bar--radius-2xl]=\"borderRadius === '2xl'\"\n [class.sefin-app-bar--radius-full]=\"borderRadius === 'full'\"\n [style.box-shadow]=\"'var(--sefin-shadow-' + elevation + ', 0 ' + elevation + 'px ' + (elevation * 2) + 'px rgba(0, 0, 0, 0.1))'\"\n>\n <div class=\"sefin-app-bar__container\">\n <!-- Left section: Menu button and logo/title -->\n <div class=\"sefin-app-bar__left\">\n @if (showMenuButton) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__menu-button\"\n (click)=\"handleMenuClick()\"\n aria-label=\"Toggle menu\"\n aria-expanded=\"false\"\n >\n <span class=\"sefin-app-bar__menu-icon\" [innerHTML]=\"getIconSvg('menu', 24)\"></span>\n </button>\n }\n\n <div class=\"sefin-app-bar__brand\">\n @if (logoImage) {\n <img\n [src]=\"logoImage\"\n [alt]=\"title\"\n class=\"sefin-app-bar__logo-image\"\n />\n }\n @if (logoIcon && !logoImage) {\n <div class=\"sefin-app-bar__logo-icon-container\">\n <span class=\"sefin-app-bar__logo-icon\" [innerHTML]=\"getIconSvg(logoIcon, 24)\"></span>\n </div>\n }\n <div class=\"sefin-app-bar__title-section\">\n <h1 class=\"sefin-app-bar__title\">{{ title }}</h1>\n @if (subtitle) {\n <span class=\"sefin-app-bar__subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n </div>\n\n <!-- Center section: Projected content -->\n <div class=\"sefin-app-bar__center\">\n <ng-content select=\"[slot=center]\"></ng-content>\n </div>\n\n <!-- Right section: Actions and projected content -->\n <div class=\"sefin-app-bar__right\">\n @if (actions.length > 0) {\n <div class=\"sefin-app-bar__actions\">\n @for (action of actions; track action.label) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__action-button\"\n [class.sefin-app-bar__action-button--disabled]=\"action.disabled\"\n [class]=\"action.class || ''\"\n [disabled]=\"action.disabled\"\n [attr.aria-label]=\"action.label\"\n (click)=\"!action.disabled && handleActionClick(action)\"\n >\n <span class=\"sefin-app-bar__action-icon\" [innerHTML]=\"getIconSvg(action.icon, 20)\"></span>\n </button>\n }\n </div>\n }\n <ng-content select=\"[slot=right]\"></ng-content>\n </div>\n </div>\n</header>\n", styles: [".sefin-app-bar{width:100%;height:64px;min-height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;z-index:10;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:box-shadow .3s ease-in-out}.sefin-app-bar--radius-none{border-bottom-left-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-app-bar--radius-sm{border-bottom-left-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-app-bar--radius-md{border-bottom-left-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-app-bar--radius-lg{border-bottom-left-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-app-bar--radius-xl{border-bottom-left-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-app-bar--radius-2xl{border-bottom-left-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-app-bar--radius-full{border-bottom-left-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-app-bar__container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sefin-spacing-lg, 1.5rem);gap:var(--sefin-spacing-lg, 1.5rem)}.sefin-app-bar__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);flex:0 0 auto;min-width:0}.sefin-app-bar__menu-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:24px;height:24px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__menu-button:hover,.sefin-app-bar__menu-button:active{color:#55c3d8}.sefin-app-bar__menu-button:focus{outline:none}.sefin-app-bar__brand{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);min-width:0}.sefin-app-bar__logo-image{width:40px;height:40px;object-fit:contain;flex-shrink:0}.sefin-app-bar__logo-icon-container{width:40px;height:40px;border-radius:12px;background:linear-gradient(to right,#55c3d8,#4aafc4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-app-bar__title-section{display:flex;flex-direction:column;gap:0;min-width:0}.sefin-app-bar__title{color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__subtitle{color:#828282;font-size:var(--sefin-font-size-sm, .875rem);line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__center{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}.sefin-app-bar__right{display:flex;align-items:center;gap:var(--sefin-spacing-sm, .75rem);flex:0 0 auto;min-width:0}.sefin-app-bar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-xs, .5rem)}.sefin-app-bar__action-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__action-button:hover:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:active:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:focus{outline:none}.sefin-app-bar__action-button.sefin-app-bar__action-button--disabled{opacity:.5;cursor:not-allowed}.sefin-app-bar.sefin-app-bar--mobile{height:56px;min-height:56px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__container{padding:0 var(--sefin-spacing-md, 1rem);gap:var(--sefin-spacing-md, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__title{font-size:var(--sefin-font-size-base, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__subtitle{font-size:var(--sefin-font-size-xs, .75rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container{width:32px;height:32px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon svg,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon{width:18px;height:18px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:18px;height:18px}\n"] }]
|
|
7362
7514
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { title: [{
|
|
7363
7515
|
type: Input
|
|
7364
7516
|
}], subtitle: [{
|
|
@@ -7375,6 +7527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
7375
7527
|
type: Input
|
|
7376
7528
|
}], elevation: [{
|
|
7377
7529
|
type: Input
|
|
7530
|
+
}], borderRadius: [{
|
|
7531
|
+
type: Input
|
|
7378
7532
|
}], menuClicked: [{
|
|
7379
7533
|
type: Output
|
|
7380
7534
|
}], actionClicked: [{
|