@lesterarte/sefin-ui 0.0.20-dev.12 → 0.0.20-dev.13

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -3637,10 +3637,15 @@ class ButtonGroupComponent {
         }
         return this.selectedValues.includes(option.value);
     }
-    onButtonClick(option) {
+    onButtonClick(option, event) {
         if (this.disabled || option.disabled) {
             return;
         }
+        // Prevent default if event is provided
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         this.buttonClick.emit(option);
         if (this.groupVariant === 'segmented') {
             // Toggle selection for segmented
@@ -3676,6 +3681,18 @@ class ButtonGroupComponent {
             }
         }
     }
+    handleButtonClick(option) {
+        return (event) => this.onButtonClick(option, event);
+    }
+    getButtonVariant(option) {
+        if (this.groupVariant === 'segmented') {
+            // In segmented variant, only selected buttons use the specified variant
+            // Non-selected buttons use 'ghost' for a subtle appearance
+            return this.isSelected(option) ? this.variant : 'ghost';
+        }
+        // In default variant, all buttons use the specified variant
+        return this.variant;
+    }
     getButtonClasses(option) {
         const classes = ['sefin-button-group__button-item'];
         // Size class
@@ -3711,11 +3728,11 @@ class ButtonGroupComponent {
         return this.sanitizer.sanitize(1, html) || '';
     }
     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 });
-    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 });
+    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  <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: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!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:32px!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:40px!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:48px!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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
-            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"] }]
+            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: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!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:32px!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:40px!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:48px!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"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
                 type: Input
             }], value: [{