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