@xsmusices/ui 1.44.7 → 1.44.9

package/fesm2022/{xsmusices-ui-xs-buttons-group.xsstory-H1pcuFtx.mjs → xsmusices-ui-xs-buttons-group.xsstory-Cgmflzcs.mjs}

@@ -69,6 +69,28 @@ const story = {
                 ],
             },
         },
+        {
+            name: 'Control segmentado',
+            description: 'Un botón marcado como selected queda activo y no emite clic, como en un conmutador de vistas',
+            inputs: {
+                buttonsInput: [
+                    { label: 'Lista', selected: true },
+                    { label: 'Stats' },
+                    { label: 'Opciones' },
+                ],
+            },
+        },
+        {
+            name: 'Control segmentado con iconos',
+            description: 'Sin label el layout cae a iconOnly automáticamente',
+            inputs: {
+                buttonsInput: [
+                    { icon: { name: 'list' }, selected: true },
+                    { icon: { name: 'chart-simple' } },
+                    { icon: { name: 'gear' } },
+                ],
+            },
+        },
     ],
     multilanguage: false,
     notes: [
@@ -86,12 +108,12 @@ const story = {
         },
     ],
     coverage: {
-        "statements": 97,
-        "branches": 100,
-        "functions": 92,
-        "lines": 97
+        statements: 97,
+        branches: 100,
+        functions: 92,
+        lines: 97,
     },
 };
 
 export { story };
-//# sourceMappingURL=xsmusices-ui-xs-buttons-group.xsstory-H1pcuFtx.mjs.map
+//# sourceMappingURL=xsmusices-ui-xs-buttons-group.xsstory-Cgmflzcs.mjs.map

package/fesm2022/xsmusices-ui-xs-buttons-group.xsstory-Cgmflzcs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-buttons-group.xsstory-Cgmflzcs.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/buttons-group/xs-buttons-group.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSButtonsGroupComponent } from './xs-buttons-group.component';\n\nexport const story: StoryMeta = {\n  id: 'buttons-group',\n  name: 'Buttons Group',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: [],\n  updated: '2026-01-16T11:57:36.415Z',\n  created: '2025-08-15T21:04:25.954Z',\n  description:\n    'Componente contenedor para crear grupos de botones con estilos conectados. Facilita la creación de barras de herramientas y controles segmentados.',\n  component: XSButtonsGroupComponent,\n  selector: 'xs-buttons-group',\n  inputs: [\n    {\n      key: 'buttonsInput',\n      label: 'Botones (Array)',\n      type: 'json',\n      default: [],\n    },\n    {\n      key: 'buttonClick',\n      label: 'Función de Click',\n      type: 'json',\n      default: undefined,\n    },\n  ],\n  examples: [\n    {\n      name: 'Grupo Básico con Array',\n      description:\n        'Grupo de botones creado desde un array de configuración',\n      inputs: {\n        buttonsInput: [\n          { label: 'Guardar', variant: 'success' },\n          { label: 'Cancelar', variant: 'secondary' },\n          { label: 'Eliminar', variant: 'error' },\n        ],\n      },\n    },\n    {\n      name: 'Grupo con Iconos',\n      description: 'Botones agrupados con iconos FontAwesome',\n      inputs: {\n        buttonsInput: [\n          { label: 'Editar', icon: { name: 'edit' } },\n          { label: 'Copiar', icon: { name: 'copy' } },\n          {\n            label: 'Eliminar',\n            icon: { name: 'trash' },\n            variant: 'error',\n          },\n        ],\n      },\n    },\n    {\n      name: 'Grupo con Contenido Proyectado',\n      description:\n        'Usando ng-content para botones personalizados',\n      inputs: {},\n    },\n    {\n      name: 'Grupo con Estados',\n      description:\n        'Botones con diferentes estados (disabled, loading)',\n      inputs: {\n        buttonsInput: [\n          { label: 'Activo' },\n          { label: 'Cargando', loading: true },\n          { label: 'Deshabilitado', disabled: true },\n        ],\n      },\n    },\n    {\n      name: 'Control segmentado',\n      description:\n        'Un botón marcado como selected queda activo y no emite clic, como en un conmutador de vistas',\n      inputs: {\n        buttonsInput: [\n          { label: 'Lista', selected: true },\n          { label: 'Stats' },\n          { label: 'Opciones' },\n        ],\n      },\n    },\n    {\n      name: 'Control segmentado con iconos',\n      description:\n        'Sin label el layout cae a iconOnly automáticamente',\n      inputs: {\n        buttonsInput: [\n          { icon: { name: 'list' }, selected: true },\n          { icon: { name: 'chart-simple' } },\n          { icon: { name: 'gear' } },\n        ],\n      },\n    },\n  ],\n  multilanguage: false,\n  notes: [\n    {\n      text: 'Los botones se conectan automáticamente con bordes y radios apropiados.',\n      type: 'info',\n    },\n    {\n      text: 'Soporta tanto configuración declarativa (buttonsInput) como proyección de contenido (ng-content).',\n      type: 'info',\n    },\n    {\n      text: 'Para eventos de click, usa buttonClickOutput o configura buttonClick.',\n      type: 'info',\n    },\n  ],\n  coverage: {\n    statements: 97,\n    branches: 100,\n    functions: 92,\n    lines: 97,\n  },\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui.mjs

@@ -15779,12 +15779,22 @@ class XSButtonsGroupComponent {
         return button.icon ?? null;
     }
     getButtonVariant(button) {
-        return button.variant || 'primary';
+        if (button.variant)
+            return button.variant;
+        if (button.selected)
+            return 'tertiary';
+        return 'primary';
     }
     getButtonLayout(button) {
-        return button.layout || 'base';
+        if (button.layout)
+            return button.layout;
+        if (button.icon && !button.label)
+            return 'iconOnly';
+        return 'base';
     }
     onButtonClick(button, index) {
+        if (button.selected || button.disabled)
+            return;
         const callback = this.buttonClick();
         if (callback) {
             callback(button, index);
@@ -15802,22 +15812,6 @@ class XSButtonsGroupComponent {
         else {
             button.groupPosition.set('middle');
         }
-        const buttonElement = button.elementRef
-            .nativeElement;
-        buttonElement.classList.add('button-grouped');
-        buttonElement.classList.remove('border-l', 'border-zinc-700');
-        if (index > 0) {
-            buttonElement.classList.add('border-l', 'border-zinc-700');
-        }
-        if (index === 0) {
-            buttonElement.style.borderRadius = '0.5rem 0 0 0.5rem';
-        }
-        else if (index === totalButtons - 1) {
-            buttonElement.style.borderRadius = '0 0.5rem 0.5rem 0';
-        }
-        else {
-            buttonElement.style.borderRadius = '0';
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSButtonsGroupComponent, isStandalone: true, selector: "xs-buttons-group", inputs: { buttonsInput: { classPropertyName: "buttonsInput", publicName: "buttonsInput", isSignal: true, isRequired: false, transformFunction: null }, buttonClick: { classPropertyName: "buttonClick", publicName: "buttonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickOutput: "buttonClickOutput" }, host: { attributes: { "xs-buttons-group-host": "" } }, queries: [{ propertyName: "contentButtons", predicate: XSButtonComponent, isSignal: true }], viewQueries: [{ propertyName: "viewButtons", predicate: XSButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inline-flex w-full\">\n  @for (\n    button of buttonsInput();\n    track $index\n  ) {\n    <xs-button\n      [label]=\"button.label || ''\"\n      [icon]=\"getButtonIcon(button)\"\n      [variant]=\"getButtonVariant(button)\"\n      [layout]=\"getButtonLayout(button)\"\n      [disabled]=\"button.disabled || false\"\n      [loading]=\"button.loading || false\"\n      [customClass]=\"button.customClass || ''\"\n      (click)=\"onButtonClick(button, $index)\"\n      (keydown.enter)=\"onButtonClick(button, $index)\"\n    ></xs-button>\n  }\n\n  @if (buttonsInput().length === 0) {\n    <ng-content></ng-content>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -23220,7 +23214,7 @@ const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-action-sheet.xsstory-CBpZBlfx.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-block.xsstory-GXV6UFJo.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-button.xsstory-DqECZuZF.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-buttons-group.xsstory-H1pcuFtx.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-buttons-group.xsstory-Cgmflzcs.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-chart.xsstory--iUHj7bv.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-formly.xsstory-Bjne7mpZ.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-empty-state.xsstory-CCOJ4b9_.mjs').then((m) => m.story),