@xsmusices/ui 1.41.0 → 1.42.0

package/fesm2022/xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs

@@ -0,0 +1,147 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { XSFullImageService, XSFullImageComponent } from './xsmusices-ui.mjs';
+
+class XSFullImageDemoComponent {
+    fullImage = inject(XSFullImageService);
+    open(url) {
+        this.fullImage.show({
+            remoteUrl: url,
+            item: { _id: 'demo' },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFullImageDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.33", type: XSFullImageDemoComponent, isStandalone: true, selector: "xs-full-image-demo", ngImport: i0, template: `
+    <div
+      style="display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:1rem"
+    >
+      <p style="color:white;font-size:0.875rem;margin:0">
+        Pincha la imagen para abrir el visor. En móvil: haz zoom
+        con dos dedos, doble tap para ampliar, swipe abajo para
+        cerrar. En desktop: scroll para zoom.
+      </p>
+      <img
+        src="https://picsum.photos/seed/full-image-thumb/200/120"
+        alt="thumbnail"
+        style="cursor:pointer;border-radius:6px;max-width:200px;height:auto"
+        (click)="
+          open('https://picsum.photos/seed/full-image/1200/800')
+        "
+      />
+      <button
+        (click)="
+          open(
+            'https://picsum.photos/seed/full-image-2/800/1200'
+          )
+        "
+        class="xs-btn"
+      >
+        Imagen vertical (retrato)
+      </button>
+      <button
+        (click)="
+          open('https://picsum.photos/seed/full-image-3/400/400')
+        "
+        class="xs-btn"
+      >
+        Imagen cuadrada
+      </button>
+    </div>
+    <xs-full-image></xs-full-image>
+  `, isInline: true, dependencies: [{ kind: "component", type: XSFullImageComponent, selector: "xs-full-image", inputs: ["ariaLabel"], outputs: ["downloadItem", "shareItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFullImageDemoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [XSFullImageComponent],
+                    selector: 'xs-full-image-demo',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      style="display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:1rem"
+    >
+      <p style="color:white;font-size:0.875rem;margin:0">
+        Pincha la imagen para abrir el visor. En móvil: haz zoom
+        con dos dedos, doble tap para ampliar, swipe abajo para
+        cerrar. En desktop: scroll para zoom.
+      </p>
+      <img
+        src="https://picsum.photos/seed/full-image-thumb/200/120"
+        alt="thumbnail"
+        style="cursor:pointer;border-radius:6px;max-width:200px;height:auto"
+        (click)="
+          open('https://picsum.photos/seed/full-image/1200/800')
+        "
+      />
+      <button
+        (click)="
+          open(
+            'https://picsum.photos/seed/full-image-2/800/1200'
+          )
+        "
+        class="xs-btn"
+      >
+        Imagen vertical (retrato)
+      </button>
+      <button
+        (click)="
+          open('https://picsum.photos/seed/full-image-3/400/400')
+        "
+        class="xs-btn"
+      >
+        Imagen cuadrada
+      </button>
+    </div>
+    <xs-full-image></xs-full-image>
+  `,
+                }]
+        }] });
+
+const story = {
+    id: 'full-image',
+    name: 'Full Image',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-07-23T12:00:00.000Z',
+    created: '2026-01-16T07:39:20.801Z',
+    description: 'Visor de imagen fullscreen con zoom (pinch/doble tap/scroll), swipe-to-dismiss, descarga y compartir.',
+    component: XSFullImageDemoComponent,
+    selector: 'xs-full-image-demo',
+    inputs: [],
+    examples: [
+        {
+            name: 'Example',
+            description: 'Demo con tres formatos de imagen (horizontal, vertical, cuadrada).',
+            inputs: {},
+        },
+    ],
+    multilanguage: false,
+    notes: [
+        { text: 'Pinch-to-zoom y doble tap en móvil', type: 'info' },
+        { text: 'Swipe vertical para cerrar', type: 'info' },
+        { text: 'Scroll wheel para zoom en desktop', type: 'info' },
+        {
+            text: 'Botones de descarga y compartir en la esquina superior derecha',
+            type: 'info',
+        },
+        {
+            text: 'iOS: la app padre debe escuchar downloadItem/shareItem para usar Capacitor',
+            type: 'warning',
+        },
+        {
+            text: 'Badge de nivel de zoom actual cuando >1x',
+            type: 'info',
+        },
+    ],
+    coverage: {
+        statements: 71,
+        branches: 0,
+        functions: 75,
+        lines: 71,
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs.map

package/fesm2022/xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/full-image/xs-full-image.demo.component.ts","../../../projects/xs-ui/src/lib/components/ui/full-image/xs-full-image.xsstory.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  inject,\n} from '@angular/core';\nimport { XSFullImageService } from './xs-full-image.service';\nimport { XSFullImageComponent } from './xs-full-image.component';\n\n@Component({\n  imports: [XSFullImageComponent],\n  selector: 'xs-full-image-demo',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      style=\"display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:1rem\"\n    >\n      <p style=\"color:white;font-size:0.875rem;margin:0\">\n        Pincha la imagen para abrir el visor. En móvil: haz zoom\n        con dos dedos, doble tap para ampliar, swipe abajo para\n        cerrar. En desktop: scroll para zoom.\n      </p>\n      <img\n        src=\"https://picsum.photos/seed/full-image-thumb/200/120\"\n        alt=\"thumbnail\"\n        style=\"cursor:pointer;border-radius:6px;max-width:200px;height:auto\"\n        (click)=\"\n          open('https://picsum.photos/seed/full-image/1200/800')\n        \"\n      />\n      <button\n        (click)=\"\n          open(\n            'https://picsum.photos/seed/full-image-2/800/1200'\n          )\n        \"\n        class=\"xs-btn\"\n      >\n        Imagen vertical (retrato)\n      </button>\n      <button\n        (click)=\"\n          open('https://picsum.photos/seed/full-image-3/400/400')\n        \"\n        class=\"xs-btn\"\n      >\n        Imagen cuadrada\n      </button>\n    </div>\n    <xs-full-image></xs-full-image>\n  `,\n})\nexport class XSFullImageDemoComponent {\n  private fullImage = inject(XSFullImageService);\n\n  open(url: string) {\n    this.fullImage.show({\n      remoteUrl: url,\n      item: { _id: 'demo' },\n    });\n  }\n}\n","import { StoryMeta } from '../../../story.types';\nimport { XSFullImageDemoComponent } from './xs-full-image.demo.component';\n\nexport const story: StoryMeta = {\n  id: 'full-image',\n  name: 'Full Image',\n  type: 'component',\n  subtype: 'UI',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-07-23T12:00:00.000Z',\n  created: '2026-01-16T07:39:20.801Z',\n  description:\n    'Visor de imagen fullscreen con zoom (pinch/doble tap/scroll), swipe-to-dismiss, descarga y compartir.',\n  component: XSFullImageDemoComponent,\n  selector: 'xs-full-image-demo',\n  inputs: [],\n  examples: [\n    {\n      name: 'Example',\n      description:\n        'Demo con tres formatos de imagen (horizontal, vertical, cuadrada).',\n      inputs: {},\n    },\n  ],\n  multilanguage: false,\n  notes: [\n    { text: 'Pinch-to-zoom y doble tap en móvil', type: 'info' },\n    { text: 'Swipe vertical para cerrar', type: 'info' },\n    { text: 'Scroll wheel para zoom en desktop', type: 'info' },\n    {\n      text: 'Botones de descarga y compartir en la esquina superior derecha',\n      type: 'info',\n    },\n    {\n      text: 'iOS: la app padre debe escuchar downloadItem/shareItem para usar Capacitor',\n      type: 'warning',\n    },\n    {\n      text: 'Badge de nivel de zoom actual cuando >1x',\n      type: 'info',\n    },\n  ],\n  coverage: {\n    statements: 71,\n    branches: 0,\n    functions: 75,\n    lines: 71,\n  },\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs

@@ -0,0 +1,97 @@
+import { XSIconComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'icon',
+    name: 'Icon',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2025-01-27T21:45:00.000Z',
+    created: '2026-01-01T12:12:55.705Z',
+    description: 'Componente Icon que maneja iconos de FontAwesome de forma segura. Convierte automáticamente strings y arrays a IconProp válidos, con fallback a icono por defecto si no existe.',
+    component: XSIconComponent,
+    selector: 'xs-icon',
+    inputs: [
+        {
+            key: 'icon',
+            label: 'Icono (string, array o IconProp)',
+            type: 'json',
+            default: 'circle-question',
+        },
+        {
+            key: 'size',
+            label: 'Tamaño del icono',
+            type: 'select',
+            options: [
+                'xs',
+                'sm',
+                'normal',
+                'lg',
+                'xl',
+                '2xl',
+                '3xl',
+                '4xl',
+                '5xl',
+                '6xl',
+                '7xl',
+            ],
+            default: 'normal',
+        },
+        {
+            key: 'class',
+            label: 'Clases CSS adicionales',
+            type: 'text',
+            default: '',
+        },
+    ],
+    examples: [
+        {
+            name: 'Icono básico (string)',
+            description: 'Icono usando un string simple',
+            inputs: {
+                icon: 'user',
+            },
+        },
+        {
+            name: 'Icono con array',
+            description: 'Icono usando un array [prefix, name]',
+            inputs: {
+                icon: ['fas', 'user'],
+            },
+        },
+        {
+            name: 'Icono de marca (brand)',
+            description: 'Icono de una marca usando array',
+            inputs: {
+                icon: ['fab', 'github'],
+            },
+        },
+        {
+            name: 'Icono inexistente (fallback)',
+            description: 'Icono que no existe - muestra el fallback',
+            inputs: {
+                icon: 'icono-inexistente',
+            },
+        },
+        {
+            name: 'Diferentes tamaños',
+            description: 'Iconos con diferentes tamaños',
+            inputs: {
+                icon: 'star',
+                size: '3xl',
+            },
+        },
+        {
+            name: 'Con clases personalizadas',
+            description: 'Icono con clases CSS adicionales',
+            inputs: {
+                icon: 'heart',
+                class: 'text-red-500',
+            },
+        },
+    ],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs.map

package/fesm2022/xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/icon/xs-icon.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSIconComponent } from './';\n\nexport const story: StoryMeta = {\n  id: 'icon',\n  name: 'Icon',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2025-01-27T21:45:00.000Z',\n  created: '2026-01-01T12:12:55.705Z',\n  description:\n    'Componente Icon que maneja iconos de FontAwesome de forma segura. Convierte automáticamente strings y arrays a IconProp válidos, con fallback a icono por defecto si no existe.',\n  component: XSIconComponent,\n  selector: 'xs-icon',\n  inputs: [\n    {\n      key: 'icon',\n      label: 'Icono (string, array o IconProp)',\n      type: 'json',\n      default: 'circle-question',\n    },\n    {\n      key: 'size',\n      label: 'Tamaño del icono',\n      type: 'select',\n      options: [\n        'xs',\n        'sm',\n        'normal',\n        'lg',\n        'xl',\n        '2xl',\n        '3xl',\n        '4xl',\n        '5xl',\n        '6xl',\n        '7xl',\n      ],\n      default: 'normal',\n    },\n    {\n      key: 'class',\n      label: 'Clases CSS adicionales',\n      type: 'text',\n      default: '',\n    },\n  ],\n  examples: [\n    {\n      name: 'Icono básico (string)',\n      description: 'Icono usando un string simple',\n      inputs: {\n        icon: 'user',\n      },\n    },\n    {\n      name: 'Icono con array',\n      description: 'Icono usando un array [prefix, name]',\n      inputs: {\n        icon: ['fas', 'user'],\n      },\n    },\n    {\n      name: 'Icono de marca (brand)',\n      description: 'Icono de una marca usando array',\n      inputs: {\n        icon: ['fab', 'github'],\n      },\n    },\n    {\n      name: 'Icono inexistente (fallback)',\n      description: 'Icono que no existe - muestra el fallback',\n      inputs: {\n        icon: 'icono-inexistente',\n      },\n    },\n    {\n      name: 'Diferentes tamaños',\n      description: 'Iconos con diferentes tamaños',\n      inputs: {\n        icon: 'star',\n        size: '3xl',\n      },\n    },\n    {\n      name: 'Con clases personalizadas',\n      description: 'Icono con clases CSS adicionales',\n      inputs: {\n        icon: 'heart',\n        class: 'text-red-500',\n      },\n    },\n  ],\n};\n"],"names":[],"mappings":";;AAGO,MAAM,KAAK,GAAc;AAC9B,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC;AAClC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,WAAW,EACT,iLAAiL;AACnL,IAAA,SAAS,EAAE,eAAe;AAC1B,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,kCAAkC;AACzC,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,iBAAiB;AAC3B,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,QAAQ;gBACR,IAAI;gBACJ,IAAI;gBACJ,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;AACN,aAAA;AACD,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,OAAO;AACZ,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA;AACE,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,WAAW,EAAE,+BAA+B;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,MAAM;AACb,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,iBAAiB;AACvB,YAAA,WAAW,EAAE,sCAAsC;AACnD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;AACtB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,wBAAwB;AAC9B,YAAA,WAAW,EAAE,iCAAiC;AAC9C,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;AACxB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,8BAA8B;AACpC,YAAA,WAAW,EAAE,2CAA2C;AACxD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,mBAAmB;AAC1B,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,WAAW,EAAE,+BAA+B;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,IAAI,EAAE,KAAK;AACZ,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,2BAA2B;AACjC,YAAA,WAAW,EAAE,kCAAkC;AAC/C,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,cAAc;AACtB,aAAA;AACF,SAAA;AACF,KAAA;;;;;"}

package/fesm2022/xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs

@@ -0,0 +1,142 @@
+import { XSImageComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'image',
+    name: 'Image',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-02-10T15:19:36.105Z',
+    created: '2026-01-01T12:12:55.709Z',
+    description: 'Componente para mostrar imágenes con manejo automático de errores, mostrando avatar con iniciales cuando falla la carga.',
+    component: XSImageComponent,
+    selector: 'xs-image',
+    inputs: [
+        {
+            key: 'src',
+            label: 'Source URL',
+            type: 'text',
+            default: '',
+        },
+        {
+            key: 'alt',
+            label: 'Alt Text',
+            type: 'text',
+            default: '',
+        },
+        {
+            key: 'width',
+            label: 'Width',
+            type: 'text',
+        },
+        {
+            key: 'height',
+            label: 'Height',
+            type: 'text',
+        },
+        {
+            key: 'size',
+            label: 'Size',
+            type: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
+            default: 'md',
+        },
+        {
+            key: 'rounded',
+            label: 'Rounded',
+            type: 'select',
+            options: [
+                'none',
+                'sm',
+                'md',
+                'lg',
+                'xl',
+                '2xl',
+                '3xl',
+                'full',
+            ],
+            default: 'md',
+        },
+        {
+            key: 'objectFit',
+            label: 'Object Fit',
+            type: 'select',
+            options: [
+                'contain',
+                'cover',
+                'fill',
+                'none',
+                'scale-down',
+            ],
+            default: 'cover',
+        },
+        {
+            key: 'customClass',
+            label: 'Custom CSS Classes',
+            type: 'text',
+            default: '',
+        },
+    ],
+    examples: [
+        {
+            name: 'Imagen básica',
+            description: 'Imagen básica con configuración por defecto',
+            inputs: {
+                src: 'https://picsum.photos/200/200',
+                alt: 'Imagen de ejemplo',
+                size: 'md',
+            },
+        },
+        {
+            name: 'Imagen con error (fallback)',
+            description: 'Imagen que no existe, muestra avatar con iniciales como fallback',
+            inputs: {
+                src: 'https://example.com/nonexistent-image.jpg',
+                alt: 'Imagen que falla',
+                size: 'md',
+            },
+        },
+        {
+            name: 'Imagen redondeada',
+            description: 'Imagen con bordes completamente redondeados',
+            inputs: {
+                src: 'https://picsum.photos/150/150',
+                alt: 'Imagen redondeada',
+                size: 'lg',
+                rounded: 'full',
+            },
+        },
+        {
+            name: 'Imagen cuadrada grande',
+            description: 'Imagen grande con object-fit cover',
+            inputs: {
+                src: 'https://picsum.photos/300/300',
+                alt: 'Imagen grande',
+                size: 'xl',
+                objectFit: 'cover',
+            },
+        },
+        {
+            name: 'Imagen banner full width',
+            description: 'Imagen que ocupa todo el ancho disponible, ideal para banners o headers',
+            inputs: {
+                src: 'https://picsum.photos/800/200',
+                alt: 'Imagen banner',
+                size: 'full',
+                rounded: 'none',
+                objectFit: 'cover',
+            },
+        },
+    ],
+    multilanguage: true,
+    coverage: {
+        "statements": 81,
+        "branches": 81,
+        "functions": 87,
+        "lines": 82
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs.map

package/fesm2022/xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/image/xs-image.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSImageComponent } from './xs-image.component';\n\nexport const story: StoryMeta = {\n  id: 'image',\n  name: 'Image',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-02-10T15:19:36.105Z',\n  created: '2026-01-01T12:12:55.709Z',\n  description:\n    'Componente para mostrar imágenes con manejo automático de errores, mostrando avatar con iniciales cuando falla la carga.',\n  component: XSImageComponent,\n  selector: 'xs-image',\n  inputs: [\n    {\n      key: 'src',\n      label: 'Source URL',\n      type: 'text',\n      default: '',\n    },\n    {\n      key: 'alt',\n      label: 'Alt Text',\n      type: 'text',\n      default: '',\n    },\n    {\n      key: 'width',\n      label: 'Width',\n      type: 'text',\n    },\n    {\n      key: 'height',\n      label: 'Height',\n      type: 'text',\n    },\n    {\n      key: 'size',\n      label: 'Size',\n      type: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],\n      default: 'md',\n    },\n    {\n      key: 'rounded',\n      label: 'Rounded',\n      type: 'select',\n      options: [\n        'none',\n        'sm',\n        'md',\n        'lg',\n        'xl',\n        '2xl',\n        '3xl',\n        'full',\n      ],\n      default: 'md',\n    },\n    {\n      key: 'objectFit',\n      label: 'Object Fit',\n      type: 'select',\n      options: [\n        'contain',\n        'cover',\n        'fill',\n        'none',\n        'scale-down',\n      ],\n      default: 'cover',\n    },\n    {\n      key: 'customClass',\n      label: 'Custom CSS Classes',\n      type: 'text',\n      default: '',\n    },\n  ],\n  examples: [\n    {\n      name: 'Imagen básica',\n      description: 'Imagen básica con configuración por defecto',\n      inputs: {\n        src: 'https://picsum.photos/200/200',\n        alt: 'Imagen de ejemplo',\n        size: 'md',\n      },\n    },\n    {\n      name: 'Imagen con error (fallback)',\n      description:\n        'Imagen que no existe, muestra avatar con iniciales como fallback',\n      inputs: {\n        src: 'https://example.com/nonexistent-image.jpg',\n        alt: 'Imagen que falla',\n        size: 'md',\n      },\n    },\n    {\n      name: 'Imagen redondeada',\n      description: 'Imagen con bordes completamente redondeados',\n      inputs: {\n        src: 'https://picsum.photos/150/150',\n        alt: 'Imagen redondeada',\n        size: 'lg',\n        rounded: 'full',\n      },\n    },\n    {\n      name: 'Imagen cuadrada grande',\n      description: 'Imagen grande con object-fit cover',\n      inputs: {\n        src: 'https://picsum.photos/300/300',\n        alt: 'Imagen grande',\n        size: 'xl',\n        objectFit: 'cover',\n      },\n    },\n    {\n      name: 'Imagen banner full width',\n      description:\n        'Imagen que ocupa todo el ancho disponible, ideal para banners o headers',\n      inputs: {\n        src: 'https://picsum.photos/800/200',\n        alt: 'Imagen banner',\n        size: 'full',\n        rounded: 'none',\n        objectFit: 'cover',\n      },\n    },\n  ],\n  multilanguage: true,\n  coverage: {\n  \"statements\": 81,\n  \"branches\": 81,\n  \"functions\": 87,\n  \"lines\": 82\n},\n};\n"],"names":[],"mappings":"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"}