@lesterarte/sefin-ui 0.0.20-dev.5 → 0.0.20-dev.6
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.
|
@@ -3551,6 +3551,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3551
3551
|
type: Input
|
|
3552
3552
|
}] } });
|
|
3553
3553
|
|
|
3554
|
+
class ButtonGroupComponent {
|
|
3555
|
+
sanitizer;
|
|
3556
|
+
constructor(sanitizer) {
|
|
3557
|
+
this.sanitizer = sanitizer;
|
|
3558
|
+
}
|
|
3559
|
+
/** Array of button options */
|
|
3560
|
+
options = [];
|
|
3561
|
+
/** Selected value (for segmented variant) */
|
|
3562
|
+
value = null;
|
|
3563
|
+
/** Whether multiple selection is allowed (for default variant) */
|
|
3564
|
+
multiple = false;
|
|
3565
|
+
/** Selected values (for multiple selection) */
|
|
3566
|
+
selectedValues = [];
|
|
3567
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
3568
|
+
variant = 'primary';
|
|
3569
|
+
/** Button size. Options: 'sm' | 'md' | 'lg' */
|
|
3570
|
+
size = 'md';
|
|
3571
|
+
/** Button group variant. Options: 'default' | 'segmented' */
|
|
3572
|
+
groupVariant = 'default';
|
|
3573
|
+
/** Whether the button group is disabled */
|
|
3574
|
+
disabled = false;
|
|
3575
|
+
/** Additional CSS classes */
|
|
3576
|
+
class = '';
|
|
3577
|
+
/** Event emitted when value changes (for segmented variant) */
|
|
3578
|
+
valueChange = new EventEmitter();
|
|
3579
|
+
/** Event emitted when selected values change (for multiple selection) */
|
|
3580
|
+
selectedValuesChange = new EventEmitter();
|
|
3581
|
+
/** Event emitted when a button is clicked */
|
|
3582
|
+
buttonClick = new EventEmitter();
|
|
3583
|
+
get buttonGroupClasses() {
|
|
3584
|
+
return [
|
|
3585
|
+
'sefin-button-group',
|
|
3586
|
+
`sefin-button-group--${this.groupVariant}`,
|
|
3587
|
+
`sefin-button-group--${this.size}`,
|
|
3588
|
+
this.disabled ? 'sefin-button-group--disabled' : '',
|
|
3589
|
+
this.class,
|
|
3590
|
+
]
|
|
3591
|
+
.filter(Boolean)
|
|
3592
|
+
.join(' ');
|
|
3593
|
+
}
|
|
3594
|
+
isSelected(option) {
|
|
3595
|
+
if (this.groupVariant === 'segmented') {
|
|
3596
|
+
return this.value === option.value;
|
|
3597
|
+
}
|
|
3598
|
+
return this.selectedValues.includes(option.value);
|
|
3599
|
+
}
|
|
3600
|
+
onButtonClick(option) {
|
|
3601
|
+
if (this.disabled || option.disabled) {
|
|
3602
|
+
return;
|
|
3603
|
+
}
|
|
3604
|
+
this.buttonClick.emit(option);
|
|
3605
|
+
if (this.groupVariant === 'segmented') {
|
|
3606
|
+
// Toggle selection for segmented
|
|
3607
|
+
const newValue = this.value === option.value ? null : option.value;
|
|
3608
|
+
this.value = newValue;
|
|
3609
|
+
this.valueChange.emit(newValue);
|
|
3610
|
+
}
|
|
3611
|
+
else {
|
|
3612
|
+
// Multiple selection logic
|
|
3613
|
+
const index = this.selectedValues.indexOf(option.value);
|
|
3614
|
+
if (this.multiple) {
|
|
3615
|
+
if (index >= 0) {
|
|
3616
|
+
// Deselect
|
|
3617
|
+
this.selectedValues = this.selectedValues.filter((v) => v !== option.value);
|
|
3618
|
+
}
|
|
3619
|
+
else {
|
|
3620
|
+
// Select
|
|
3621
|
+
this.selectedValues = [...this.selectedValues, option.value];
|
|
3622
|
+
}
|
|
3623
|
+
this.selectedValuesChange.emit([...this.selectedValues]);
|
|
3624
|
+
}
|
|
3625
|
+
else {
|
|
3626
|
+
// Single selection (even in default variant)
|
|
3627
|
+
if (index >= 0) {
|
|
3628
|
+
// Deselect if already selected
|
|
3629
|
+
this.selectedValues = [];
|
|
3630
|
+
}
|
|
3631
|
+
else {
|
|
3632
|
+
// Select only this one
|
|
3633
|
+
this.selectedValues = [option.value];
|
|
3634
|
+
}
|
|
3635
|
+
this.selectedValuesChange.emit([...this.selectedValues]);
|
|
3636
|
+
}
|
|
3637
|
+
}
|
|
3638
|
+
}
|
|
3639
|
+
getButtonVariant(option) {
|
|
3640
|
+
// For default variant, always use primary to create unified look
|
|
3641
|
+
if (this.groupVariant === 'default') {
|
|
3642
|
+
return 'primary';
|
|
3643
|
+
}
|
|
3644
|
+
// For segmented variant, use outline for non-selected
|
|
3645
|
+
if (this.isSelected(option)) {
|
|
3646
|
+
return this.variant;
|
|
3647
|
+
}
|
|
3648
|
+
return 'outline';
|
|
3649
|
+
}
|
|
3650
|
+
sanitizeHtml(html) {
|
|
3651
|
+
if (!html)
|
|
3652
|
+
return '';
|
|
3653
|
+
// For simple text, return as is
|
|
3654
|
+
if (html.length <= 2 && !html.includes('<')) {
|
|
3655
|
+
return html;
|
|
3656
|
+
}
|
|
3657
|
+
// Use sanitize for user-provided HTML (icons)
|
|
3658
|
+
return this.sanitizer.sanitize(1, html) || '';
|
|
3659
|
+
}
|
|
3660
|
+
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 [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\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)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.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, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{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:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-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{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.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}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\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", "type", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3662
|
+
}
|
|
3663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3664
|
+
type: Component,
|
|
3665
|
+
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\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)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.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, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{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:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-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{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.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}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\n"] }]
|
|
3666
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
3667
|
+
type: Input
|
|
3668
|
+
}], value: [{
|
|
3669
|
+
type: Input
|
|
3670
|
+
}], multiple: [{
|
|
3671
|
+
type: Input
|
|
3672
|
+
}], selectedValues: [{
|
|
3673
|
+
type: Input
|
|
3674
|
+
}], variant: [{
|
|
3675
|
+
type: Input
|
|
3676
|
+
}], size: [{
|
|
3677
|
+
type: Input
|
|
3678
|
+
}], groupVariant: [{
|
|
3679
|
+
type: Input
|
|
3680
|
+
}], disabled: [{
|
|
3681
|
+
type: Input
|
|
3682
|
+
}], class: [{
|
|
3683
|
+
type: Input
|
|
3684
|
+
}], valueChange: [{
|
|
3685
|
+
type: Output
|
|
3686
|
+
}], selectedValuesChange: [{
|
|
3687
|
+
type: Output
|
|
3688
|
+
}], buttonClick: [{
|
|
3689
|
+
type: Output
|
|
3690
|
+
}] } });
|
|
3691
|
+
|
|
3554
3692
|
class CardComponent {
|
|
3555
3693
|
/** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
|
|
3556
3694
|
variant = 'default';
|
|
@@ -4766,5 +4904,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4766
4904
|
* Generated bundle index. Do not edit.
|
|
4767
4905
|
*/
|
|
4768
4906
|
|
|
4769
|
-
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, 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 };
|
|
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 };
|
|
4770
4908
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|