@xsmusices/ui 1.41.0 → 1.42.0

package/fesm2022/xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs

@@ -0,0 +1,199 @@
+import * as i0 from '@angular/core';
+import { input, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { XSModalService, XSModalImageSearchComponent, XSButtonComponent } from './xsmusices-ui.mjs';
+
+class ModalExampleComponent {
+    activeModal = input(...(ngDevMode ? [undefined, { debugName: "activeModal" }] : []));
+    modalService = inject(XSModalService);
+    openConfirm() {
+        this.modalService
+            .openConfirm({
+            title: 'Confirmar eliminación',
+            subTitle: '¿Estás seguro de que quieres eliminar este elemento?',
+            labelAccept: 'Sí, eliminar',
+            labelCancel: 'Cancelar',
+            type: 'centered',
+        })
+            .subscribe((_result) => { });
+    }
+    openInfo() {
+        this.modalService
+            .openInfo({
+            title: 'Información importante',
+            info: '<p>Este es un mensaje <strong>importante</strong> que el usuario debe leer.</p><p>Contiene información crítica sobre el sistema.</p>',
+            labelClose: 'Entendido',
+            type: 'centered',
+        })
+            .subscribe(() => { });
+    }
+    openInput() {
+        this.modalService
+            .openInput({
+            title: 'Ingrese su nombre',
+            subTitle: 'Necesitamos su nombre para continuar',
+            placeholder: 'Escriba su nombre aquí...',
+            minLength: 2,
+            maxLength: 50,
+            labelAccept: 'Guardar',
+            labelCancel: 'Cancelar',
+            type: 'centered',
+        })
+            .subscribe((_result) => { });
+    }
+    openClaim() {
+        this.modalService
+            .openClaim({
+            title: 'Reclamar elemento',
+            subTitle: 'Esta acción requiere justificación',
+            warningMsg: '¿Estás seguro de que quieres reclamar este elemento?',
+            enterReason: 'Por favor explica el motivo de la reclamación',
+            labelAccept: 'Reclamar',
+            labelCancel: 'Cancelar',
+            type: 'centered',
+        })
+            .subscribe((_result) => { });
+    }
+    openImageSearch() {
+        this.modalService
+            .open(XSModalImageSearchComponent, {
+            type: 'bottom-sheet',
+            title: 'Scraping de imágenes',
+            subTitle: 'Busca y selecciona una imagen',
+            data: {
+                q: 'music',
+                searchImages: async (query, limit) => {
+                    const images = Array.from({ length: limit }, (_, i) => `https://picsum.photos/seed/${encodeURIComponent(query)}${i}/300/300`);
+                    return { images };
+                },
+            },
+        })
+            .subscribe((_result) => { });
+    }
+    openImageSearchWithSources() {
+        const mockSoundcloudSearch = async (query) => {
+            return {
+                images: [
+                    `https://picsum.photos/seed/soundcloud-${encodeURIComponent(query)}/300/300`,
+                ],
+            };
+        };
+        const mockGoogleSearch = async (query, limit, start) => {
+            const totalResults = 15;
+            const offset = start ?? 1;
+            const images = Array.from({ length: Math.min(limit, totalResults - offset + 1) }, (_, i) => `https://picsum.photos/seed/${encodeURIComponent(query)}-g-${offset + i}/300/300`);
+            return { images, totalResults };
+        };
+        this.modalService
+            .open(XSModalImageSearchComponent, {
+            type: 'bottom-sheet',
+            title: 'Scraping de imágenes',
+            subTitle: 'Busca en Google Images y SoundCloud',
+            data: {
+                q: 'music',
+                sources: [
+                    {
+                        id: 'google',
+                        label: 'Google Images',
+                        searchImages: mockGoogleSearch,
+                    },
+                    {
+                        id: 'soundcloud',
+                        label: 'SoundCloud',
+                        searchImages: mockSoundcloudSearch,
+                    },
+                ],
+            },
+        })
+            .subscribe((_result) => { });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: ModalExampleComponent, isStandalone: true, selector: "modal-example", inputs: { activeModal: { classPropertyName: "activeModal", publicName: "activeModal", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "modal-example-host": "" } }, ngImport: i0, template: "    <div class=\"p-4\">\n      <div class=\"grid grid-cols-1 gap-4\">\n        @if (activeModal() === 'confirm' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Confirmaci\u00F3n'\"\n            (onClick)=\"openConfirm()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'info' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Informaci\u00F3n'\"\n            (onClick)=\"openInfo()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'input' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Input'\"\n            (onClick)=\"openInput()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'claim' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Reclamo'\"\n            (onClick)=\"openClaim()\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearch' || !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de B\u00FAsqueda de Im\u00E1genes'\"\n            (onClick)=\"openImageSearch()\"\n            class=\"mb-2\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearchSources' ||\n          !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir con Google + SoundCloud'\"\n            (onClick)=\"openImageSearchWithSources()\"\n          ></xs-button>\n        }\n      </div>\n    </div>\n", dependencies: [{ 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ModalExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-example', host: { 'modal-example-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XSButtonComponent], template: "    <div class=\"p-4\">\n      <div class=\"grid grid-cols-1 gap-4\">\n        @if (activeModal() === 'confirm' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Confirmaci\u00F3n'\"\n            (onClick)=\"openConfirm()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'info' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Informaci\u00F3n'\"\n            (onClick)=\"openInfo()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'input' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Input'\"\n            (onClick)=\"openInput()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'claim' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Reclamo'\"\n            (onClick)=\"openClaim()\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearch' || !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de B\u00FAsqueda de Im\u00E1genes'\"\n            (onClick)=\"openImageSearch()\"\n            class=\"mb-2\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearchSources' ||\n          !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir con Google + SoundCloud'\"\n            (onClick)=\"openImageSearchWithSources()\"\n          ></xs-button>\n        }\n      </div>\n    </div>\n" }]
+        }], propDecorators: { activeModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeModal", required: false }] }] } });
+
+const story = {
+    id: 'modal',
+    name: 'Modal',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-05-30T12:00:00.000Z',
+    created: '2025-07-29T15:06:52.383Z',
+    description: 'Componente Modal con diferentes tipos predefinidos y soporte multi-idioma automático con traducciones expandidas.',
+    component: ModalExampleComponent,
+    selector: 'xs-modal',
+    multilanguage: true,
+    inputs: [
+        {
+            key: 'activeModal',
+            label: 'Modal activo',
+            type: 'select',
+            options: [
+                'confirm',
+                'info',
+                'input',
+                'claim',
+                'imageSearch',
+                'imageSearchSources',
+            ],
+            default: null,
+        },
+    ],
+    examples: [
+        {
+            name: 'Confirm Modal',
+            description: 'Modal de confirmación para acciones del usuario',
+            inputs: {
+                activeModal: 'confirm',
+            },
+        },
+        {
+            name: 'Info Modal',
+            description: 'Modal de información para mostrar mensajes al usuario',
+            inputs: {
+                activeModal: 'info',
+            },
+        },
+        {
+            name: 'Input Modal',
+            description: 'Modal para solicitar entrada de datos del usuario',
+            inputs: {
+                activeModal: 'input',
+            },
+        },
+        {
+            name: 'Claim Modal',
+            description: 'Modal de reclamación con campo de justificación',
+            inputs: {
+                activeModal: 'claim',
+            },
+        },
+        {
+            name: 'Image Search Modal',
+            description: 'Modal de búsqueda de imágenes con input y resultados en grid',
+            inputs: {
+                activeModal: 'imageSearch',
+            },
+        },
+        {
+            name: 'Image Search con Google + SoundCloud',
+            description: 'Modal de búsqueda de imágenes con múltiples fuentes: Google Images y SoundCloud',
+            inputs: {
+                activeModal: 'imageSearchSources',
+            },
+        },
+    ],
+    coverage: {
+        statements: 38,
+        branches: 11,
+        functions: 45,
+        lines: 38,
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs.map

package/fesm2022/xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/modal/modal-example.component.ts","../../../projects/xs-ui/src/lib/components/base/modal/modal-example.component.html","../../../projects/xs-ui/src/lib/components/base/modal/xs-modal.xsstory.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  inject,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { XSModalService } from './xs-modal.service';\nimport { XSButtonComponent } from '../button/xs-button.component';\nimport { XSModalImageSearchComponent } from './types/image-search/xs-modal-image-search.component';\n\n@Component({\n  selector: 'modal-example',\n  host: { 'modal-example-host': '' },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [XSButtonComponent],\n  templateUrl: './modal-example.component.html',\n})\nexport class ModalExampleComponent {\n  activeModal = input<\n    | 'confirm'\n    | 'info'\n    | 'input'\n    | 'claim'\n    | 'imageSearch'\n    | 'imageSearchSources'\n    | null\n  >();\n\n  private modalService = inject(XSModalService);\n\n  openConfirm(): void {\n    this.modalService\n      .openConfirm({\n        title: 'Confirmar eliminación',\n        subTitle:\n          '¿Estás seguro de que quieres eliminar este elemento?',\n        labelAccept: 'Sí, eliminar',\n        labelCancel: 'Cancelar',\n        type: 'centered',\n      })\n      .subscribe((_result) => {});\n  }\n\n  openInfo(): void {\n    this.modalService\n      .openInfo({\n        title: 'Información importante',\n        info: '<p>Este es un mensaje <strong>importante</strong> que el usuario debe leer.</p><p>Contiene información crítica sobre el sistema.</p>',\n        labelClose: 'Entendido',\n        type: 'centered',\n      })\n      .subscribe(() => {});\n  }\n\n  openInput(): void {\n    this.modalService\n      .openInput({\n        title: 'Ingrese su nombre',\n        subTitle: 'Necesitamos su nombre para continuar',\n        placeholder: 'Escriba su nombre aquí...',\n        minLength: 2,\n        maxLength: 50,\n        labelAccept: 'Guardar',\n        labelCancel: 'Cancelar',\n        type: 'centered',\n      })\n      .subscribe((_result) => {});\n  }\n\n  openClaim(): void {\n    this.modalService\n      .openClaim({\n        title: 'Reclamar elemento',\n        subTitle: 'Esta acción requiere justificación',\n        warningMsg:\n          '¿Estás seguro de que quieres reclamar este elemento?',\n        enterReason:\n          'Por favor explica el motivo de la reclamación',\n        labelAccept: 'Reclamar',\n        labelCancel: 'Cancelar',\n        type: 'centered',\n      })\n      .subscribe((_result) => {});\n  }\n\n  openImageSearch(): void {\n    this.modalService\n      .open(XSModalImageSearchComponent, {\n        type: 'bottom-sheet',\n        title: 'Scraping de imágenes',\n        subTitle: 'Busca y selecciona una imagen',\n        data: {\n          q: 'music',\n          searchImages: async (query: string, limit: number) => {\n            const images = Array.from(\n              { length: limit },\n              (_, i) =>\n                `https://picsum.photos/seed/${encodeURIComponent(query)}${i}/300/300`,\n            );\n            return { images };\n          },\n        },\n      })\n      .subscribe((_result) => {});\n  }\n\n  openImageSearchWithSources(): void {\n    const mockSoundcloudSearch = async (query: string) => {\n      return {\n        images: [\n          `https://picsum.photos/seed/soundcloud-${encodeURIComponent(query)}/300/300`,\n        ],\n      };\n    };\n\n    const mockGoogleSearch = async (\n      query: string,\n      limit: number,\n      start?: number,\n    ) => {\n      const totalResults = 15;\n      const offset = start ?? 1;\n      const images = Array.from(\n        { length: Math.min(limit, totalResults - offset + 1) },\n        (_, i) =>\n          `https://picsum.photos/seed/${encodeURIComponent(query)}-g-${offset + i}/300/300`,\n      );\n      return { images, totalResults };\n    };\n\n    this.modalService\n      .open(XSModalImageSearchComponent, {\n        type: 'bottom-sheet',\n        title: 'Scraping de imágenes',\n        subTitle: 'Busca en Google Images y SoundCloud',\n        data: {\n          q: 'music',\n          sources: [\n            {\n              id: 'google',\n              label: 'Google Images',\n              searchImages: mockGoogleSearch,\n            },\n            {\n              id: 'soundcloud',\n              label: 'SoundCloud',\n              searchImages: mockSoundcloudSearch,\n            },\n          ],\n        },\n      })\n      .subscribe((_result) => {});\n  }\n}\n","    <div class=\"p-4\">\n      <div class=\"grid grid-cols-1 gap-4\">\n        @if (activeModal() === 'confirm' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Confirmación'\"\n            (onClick)=\"openConfirm()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'info' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Información'\"\n            (onClick)=\"openInfo()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'input' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Input'\"\n            (onClick)=\"openInput()\"\n          ></xs-button>\n        }\n        @if (activeModal() === 'claim' || !activeModal()) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Reclamo'\"\n            (onClick)=\"openClaim()\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearch' || !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir Modal de Búsqueda de Imágenes'\"\n            (onClick)=\"openImageSearch()\"\n            class=\"mb-2\"\n          ></xs-button>\n        }\n        @if (\n          activeModal() === 'imageSearchSources' ||\n          !activeModal()\n        ) {\n          <xs-button\n            variant=\"primary\"\n            [label]=\"'Abrir con Google + SoundCloud'\"\n            (onClick)=\"openImageSearchWithSources()\"\n          ></xs-button>\n        }\n      </div>\n    </div>\n","import { StoryMeta } from '../../../story.types';\nimport { ModalExampleComponent } from './modal-example.component';\n\nexport const story: StoryMeta = {\n  id: 'modal',\n  name: 'Modal',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-05-30T12:00:00.000Z',\n  created: '2025-07-29T15:06:52.383Z',\n  description:\n    'Componente Modal con diferentes tipos predefinidos y soporte multi-idioma automático con traducciones expandidas.',\n  component: ModalExampleComponent,\n  selector: 'xs-modal',\n  multilanguage: true,\n  inputs: [\n    {\n      key: 'activeModal',\n      label: 'Modal activo',\n      type: 'select',\n      options: [\n        'confirm',\n        'info',\n        'input',\n        'claim',\n        'imageSearch',\n        'imageSearchSources',\n      ],\n      default: null,\n    },\n  ],\n  examples: [\n    {\n      name: 'Confirm Modal',\n      description:\n        'Modal de confirmación para acciones del usuario',\n      inputs: {\n        activeModal: 'confirm',\n      },\n    },\n    {\n      name: 'Info Modal',\n      description:\n        'Modal de información para mostrar mensajes al usuario',\n      inputs: {\n        activeModal: 'info',\n      },\n    },\n    {\n      name: 'Input Modal',\n      description:\n        'Modal para solicitar entrada de datos del usuario',\n      inputs: {\n        activeModal: 'input',\n      },\n    },\n    {\n      name: 'Claim Modal',\n      description:\n        'Modal de reclamación con campo de justificación',\n      inputs: {\n        activeModal: 'claim',\n      },\n    },\n    {\n      name: 'Image Search Modal',\n      description:\n        'Modal de búsqueda de imágenes con input y resultados en grid',\n      inputs: {\n        activeModal: 'imageSearch',\n      },\n    },\n    {\n      name: 'Image Search con Google + SoundCloud',\n      description:\n        'Modal de búsqueda de imágenes con múltiples fuentes: Google Images y SoundCloud',\n      inputs: {\n        activeModal: 'imageSearchSources',\n      },\n    },\n  ],\n  coverage: {\n    statements: 38,\n    branches: 11,\n    functions: 45,\n    lines: 38,\n  },\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs

@@ -0,0 +1,122 @@
+import { XSNavbarSidebarComponent } from './xsmusices-ui.mjs';
+
+const menuItems = [
+    {
+        name: 'Dashboard',
+        icon: 'chart-pie',
+        action: '/dashboard',
+    },
+    {
+        name: 'Contenido',
+        icon: 'layer-group',
+        subItems: [
+            { name: 'Artistas', action: '/artists' },
+            { name: 'Musica', action: '/music' },
+            { name: 'Eventos', action: '/events' },
+            { name: 'Sitios', action: '/sites' },
+        ],
+    },
+    {
+        name: 'Interacciones',
+        icon: 'comments',
+        subItems: [
+            { name: 'Comentarios', action: '/comments' },
+            { name: 'Likes', action: '/likes' },
+            { name: 'Playlists', action: '/playlists' },
+        ],
+    },
+    { divider: true, name: 'divider' },
+    {
+        name: 'Sistema',
+        icon: 'cog',
+        subItems: [
+            { name: 'Usuarios', action: '/users' },
+            { name: 'Configuración', action: '/settings' },
+            { name: 'Toggles', action: '/toggles' },
+        ],
+    },
+];
+const story = {
+    id: 'navbar-sidebar',
+    name: 'Navbar Sidebar',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['admin'],
+    updated: '2026-05-17T12:00:00.000Z',
+    created: '2026-05-17T12:00:00.000Z',
+    description: 'Menú lateral de navegación para el panel de administración. Colapsable en desktop y overlay en móvil. Se usa junto con xs-navbar.',
+    component: XSNavbarSidebarComponent,
+    selector: 'xs-navbar-sidebar',
+    inputs: [
+        {
+            key: 'items',
+            label: 'Items del menú',
+            type: 'json',
+            default: menuItems,
+        },
+        {
+            key: 'collapsed',
+            label: 'Colapsado (desktop)',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'open',
+            label: 'Abierto (móvil)',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'activeRoute',
+            label: 'Ruta activa',
+            type: 'text',
+            default: '/dashboard',
+        },
+    ],
+    examples: [
+        {
+            name: 'Admin: Sidebar expandido',
+            description: 'Sidebar expandido en desktop con todas las secciones visibles. La ruta activa es /dashboard.',
+            inputs: {
+                items: menuItems,
+                collapsed: false,
+                open: true,
+                activeRoute: '/dashboard',
+            },
+        },
+        {
+            name: 'Admin: Sidebar colapsado',
+            description: 'Sidebar colapsado en desktop, solo muestra iconos. Al hacer hover sobre un item se expande temporalmente (lo gestiona el padre).',
+            inputs: {
+                items: menuItems,
+                collapsed: true,
+                open: true,
+                activeRoute: '/users',
+            },
+        },
+        {
+            name: 'Admin: Sidebar en móvil',
+            description: 'Sidebar en móvil con overlay semitransparente detrás. Al hacer click en un item se navega y se cierra automáticamente.',
+            inputs: {
+                items: menuItems,
+                collapsed: false,
+                open: true,
+                activeRoute: '/artists',
+            },
+        },
+        {
+            name: 'Admin: Submenú expandido',
+            description: 'Sidebar con la sección "Sistema" expandida mostrando sus sub-items.',
+            inputs: {
+                items: menuItems,
+                collapsed: false,
+                open: true,
+                activeRoute: '/users',
+            },
+        },
+    ],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs.map

package/fesm2022/xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/navbar-sidebar/xs-navbar-sidebar.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSNavbarSidebarComponent } from './xs-navbar-sidebar.component';\n\nconst menuItems = [\n  {\n    name: 'Dashboard',\n    icon: 'chart-pie',\n    action: '/dashboard',\n  },\n  {\n    name: 'Contenido',\n    icon: 'layer-group',\n    subItems: [\n      { name: 'Artistas', action: '/artists' },\n      { name: 'Musica', action: '/music' },\n      { name: 'Eventos', action: '/events' },\n      { name: 'Sitios', action: '/sites' },\n    ],\n  },\n  {\n    name: 'Interacciones',\n    icon: 'comments',\n    subItems: [\n      { name: 'Comentarios', action: '/comments' },\n      { name: 'Likes', action: '/likes' },\n      { name: 'Playlists', action: '/playlists' },\n    ],\n  },\n  { divider: true, name: 'divider' },\n  {\n    name: 'Sistema',\n    icon: 'cog',\n    subItems: [\n      { name: 'Usuarios', action: '/users' },\n      { name: 'Configuración', action: '/settings' },\n      { name: 'Toggles', action: '/toggles' },\n    ],\n  },\n];\n\nexport const story: StoryMeta = {\n  id: 'navbar-sidebar',\n  name: 'Navbar Sidebar',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin'],\n  updated: '2026-05-17T12:00:00.000Z',\n  created: '2026-05-17T12:00:00.000Z',\n  description:\n    'Menú lateral de navegación para el panel de administración. Colapsable en desktop y overlay en móvil. Se usa junto con xs-navbar.',\n  component: XSNavbarSidebarComponent,\n  selector: 'xs-navbar-sidebar',\n  inputs: [\n    {\n      key: 'items',\n      label: 'Items del menú',\n      type: 'json',\n      default: menuItems,\n    },\n    {\n      key: 'collapsed',\n      label: 'Colapsado (desktop)',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'open',\n      label: 'Abierto (móvil)',\n      type: 'boolean',\n      default: true,\n    },\n    {\n      key: 'activeRoute',\n      label: 'Ruta activa',\n      type: 'text',\n      default: '/dashboard',\n    },\n  ],\n  examples: [\n    {\n      name: 'Admin: Sidebar expandido',\n      description:\n        'Sidebar expandido en desktop con todas las secciones visibles. La ruta activa es /dashboard.',\n      inputs: {\n        items: menuItems,\n        collapsed: false,\n        open: true,\n        activeRoute: '/dashboard',\n      },\n    },\n    {\n      name: 'Admin: Sidebar colapsado',\n      description:\n        'Sidebar colapsado en desktop, solo muestra iconos. Al hacer hover sobre un item se expande temporalmente (lo gestiona el padre).',\n      inputs: {\n        items: menuItems,\n        collapsed: true,\n        open: true,\n        activeRoute: '/users',\n      },\n    },\n    {\n      name: 'Admin: Sidebar en móvil',\n      description:\n        'Sidebar en móvil con overlay semitransparente detrás. Al hacer click en un item se navega y se cierra automáticamente.',\n      inputs: {\n        items: menuItems,\n        collapsed: false,\n        open: true,\n        activeRoute: '/artists',\n      },\n    },\n    {\n      name: 'Admin: Submenú expandido',\n      description:\n        'Sidebar con la sección \"Sistema\" expandida mostrando sus sub-items.',\n      inputs: {\n        items: menuItems,\n        collapsed: false,\n        open: true,\n        activeRoute: '/users',\n      },\n    },\n  ],\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs

@@ -0,0 +1,203 @@
+import { XSNavbarComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'navbar',
+    name: 'Navbar',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['app', 'admin'],
+    updated: '2026-05-17T12:00:00.000Z',
+    created: '2026-04-25T12:00:00.000Z',
+    description: 'Barra de navegación superior reutilizable. Usada tanto en App (top bar con título + acciones) como en Admin (top bar + sidebar toggle).',
+    component: XSNavbarComponent,
+    selector: 'xs-navbar',
+    inputs: [
+        { key: 'title', label: 'Título', type: 'text', default: '' },
+        {
+            key: 'subtitle',
+            label: 'Subtítulo',
+            type: 'text',
+            default: '',
+        },
+        {
+            key: 'showBorder',
+            label: 'Mostrar borde inferior',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'transparent',
+            label: 'Fondo transparente',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'sticky',
+            label: 'Encabezado sticky',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'showBack',
+            label: 'Mostrar botón retroceso',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'showMenu',
+            label: 'Mostrar botón menú lateral',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'menuIcon',
+            label: 'Icono del botón menú',
+            type: 'text',
+            default: 'bars',
+        },
+        {
+            key: 'showLanguage',
+            label: 'Mostrar selector de idioma',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'showNotifications',
+            label: 'Mostrar campanita notificaciones',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'hideEnvBadge',
+            label: 'Ocultar badge de entorno (dev/uat)',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'currentLang',
+            label: 'Idioma actual',
+            type: 'select',
+            options: ['es', 'en'],
+            default: 'es',
+        },
+    ],
+    slots: [
+        {
+            name: 'actions',
+            description: 'Contenido proyectado en el lado derecho (botones, avatar, notificaciones)',
+        },
+        {
+            name: 'leading',
+            description: 'Contenido contextual junto al botón de retroceso, solo visible en móvil (XS-770: miniatura de perfil en navbars contextuales)',
+        },
+        {
+            name: 'bottom',
+            description: 'Contenido proyectado debajo de la barra principal (tabs, buscador)',
+        },
+    ],
+    examples: [
+        {
+            name: 'App: Pantalla de inicio',
+            description: 'Navbar usada en la app principal. Título "XSMusic", subtítulo, botón de retroceso, selector de idioma y campanita de notificaciones.',
+            inputs: {
+                title: 'XSMusic',
+                subtitle: 'Descubre',
+                showBack: true,
+                showLanguage: true,
+                showNotifications: true,
+                currentLang: 'es',
+            },
+        },
+        {
+            name: 'App: Pantalla con tabs',
+            description: 'Navbar en la app con contenido adicional en el slot bottom (tabs de navegación).',
+            inputs: {
+                title: 'XSMusic',
+                subtitle: 'Artistas',
+                showBack: true,
+                showLanguage: true,
+                showNotifications: true,
+                currentLang: 'en',
+            },
+            template: `<xs-navbar title="XSMusic" subtitle="Artistas" [showBack]="true" [showLanguage]="true" [showNotifications]="true" currentLang="en">
+  <div bottom>
+    <div class="flex gap-4 text-sm text-zinc-400">
+      <span class="text-white font-semibold">Todos</span>
+      <span>Populares</span>
+      <span>Nuevos</span>
+    </div>
+  </div>
+</xs-navbar>`,
+        },
+        {
+            name: 'Admin: Dashboard',
+            description: 'Navbar usada en el panel de administración. Sin retroceso, con botón de menú lateral (hamburguesa) para abrir el sidebar. Las acciones (búsqueda, perfil) van en el slot actions.',
+            inputs: {
+                title: 'XSADMIN',
+                showBack: false,
+                showMenu: true,
+                menuIcon: 'bars',
+                showLanguage: false,
+                showNotifications: false,
+            },
+        },
+        {
+            name: 'Admin: Menú colapsado',
+            description: 'Navbar en admin con el sidebar colapsado. El icono del menú cambia a "chevron-right" para indicar que se puede expandir.',
+            inputs: {
+                title: 'XSADMIN',
+                showBack: false,
+                showMenu: true,
+                menuIcon: 'chevron-right',
+                showLanguage: false,
+                showNotifications: false,
+            },
+        },
+        {
+            name: 'Admin: Detalle con retroceso',
+            description: 'Navbar en admin cuando se navega a una página de detalle. El botón de menú se reemplaza por el de retroceso.',
+            inputs: {
+                title: 'XSADMIN',
+                subtitle: 'Editar Usuario',
+                showBack: true,
+                showMenu: false,
+                showLanguage: false,
+                showNotifications: false,
+            },
+        },
+        {
+            name: 'Transparente sin sticky',
+            description: 'Navbar con fondo transparente y sin sticky, ideal para landing pages o perfiles.',
+            inputs: {
+                title: 'XSMusic',
+                subtitle: 'Perfil',
+                showBack: true,
+                transparent: true,
+                sticky: false,
+                showLanguage: true,
+                currentLang: 'es',
+            },
+        },
+        {
+            name: 'App: Navbar contextual de perfil (móvil)',
+            description: 'XS-770: navbar compacta de perfil en móvil. El slot leading lleva la miniatura (32px) y mobileTitle/mobileSubtitle el nombre y el país. En desktop se muestra el título normal.',
+            inputs: {
+                title: 'XSMusic',
+                mobileTitle: 'Nombre del artista',
+                mobileSubtitle: 'España',
+                showBack: true,
+                showLanguage: true,
+                currentLang: 'es',
+            },
+            template: `<xs-navbar title="XSMusic" mobileTitle="Nombre del artista" mobileSubtitle="España" [showBack]="true" [showLanguage]="true" currentLang="es">
+  <div leading>
+    <img src="https://api-v2.xsmusic.es/uploads/artist/small/artist.webp" alt="Nombre del artista" class="w-8 h-8 rounded-xl object-cover" />
+  </div>
+</xs-navbar>`,
+        },
+    ],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs.map

package/fesm2022/xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/navbar/xs-navbar.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSNavbarComponent } from './xs-navbar.component';\n\nexport const story: StoryMeta = {\n  id: 'navbar',\n  name: 'Navbar',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['app', 'admin'],\n  updated: '2026-05-17T12:00:00.000Z',\n  created: '2026-04-25T12:00:00.000Z',\n  description:\n    'Barra de navegación superior reutilizable. Usada tanto en App (top bar con título + acciones) como en Admin (top bar + sidebar toggle).',\n  component: XSNavbarComponent,\n  selector: 'xs-navbar',\n  inputs: [\n    { key: 'title', label: 'Título', type: 'text', default: '' },\n    {\n      key: 'subtitle',\n      label: 'Subtítulo',\n      type: 'text',\n      default: '',\n    },\n    {\n      key: 'showBorder',\n      label: 'Mostrar borde inferior',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'transparent',\n      label: 'Fondo transparente',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'sticky',\n      label: 'Encabezado sticky',\n      type: 'boolean',\n      default: true,\n    },\n    {\n      key: 'showBack',\n      label: 'Mostrar botón retroceso',\n      type: 'boolean',\n      default: true,\n    },\n    {\n      key: 'showMenu',\n      label: 'Mostrar botón menú lateral',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'menuIcon',\n      label: 'Icono del botón menú',\n      type: 'text',\n      default: 'bars',\n    },\n    {\n      key: 'showLanguage',\n      label: 'Mostrar selector de idioma',\n      type: 'boolean',\n      default: true,\n    },\n    {\n      key: 'showNotifications',\n      label: 'Mostrar campanita notificaciones',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'hideEnvBadge',\n      label: 'Ocultar badge de entorno (dev/uat)',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'currentLang',\n      label: 'Idioma actual',\n      type: 'select',\n      options: ['es', 'en'],\n      default: 'es',\n    },\n  ],\n  slots: [\n    {\n      name: 'actions',\n      description:\n        'Contenido proyectado en el lado derecho (botones, avatar, notificaciones)',\n    },\n    {\n      name: 'leading',\n      description:\n        'Contenido contextual junto al botón de retroceso, solo visible en móvil (XS-770: miniatura de perfil en navbars contextuales)',\n    },\n    {\n      name: 'bottom',\n      description:\n        'Contenido proyectado debajo de la barra principal (tabs, buscador)',\n    },\n  ],\n  examples: [\n    {\n      name: 'App: Pantalla de inicio',\n      description:\n        'Navbar usada en la app principal. Título \"XSMusic\", subtítulo, botón de retroceso, selector de idioma y campanita de notificaciones.',\n      inputs: {\n        title: 'XSMusic',\n        subtitle: 'Descubre',\n        showBack: true,\n        showLanguage: true,\n        showNotifications: true,\n        currentLang: 'es',\n      },\n    },\n    {\n      name: 'App: Pantalla con tabs',\n      description:\n        'Navbar en la app con contenido adicional en el slot bottom (tabs de navegación).',\n      inputs: {\n        title: 'XSMusic',\n        subtitle: 'Artistas',\n        showBack: true,\n        showLanguage: true,\n        showNotifications: true,\n        currentLang: 'en',\n      },\n      template: `<xs-navbar title=\"XSMusic\" subtitle=\"Artistas\" [showBack]=\"true\" [showLanguage]=\"true\" [showNotifications]=\"true\" currentLang=\"en\">\n  <div bottom>\n    <div class=\"flex gap-4 text-sm text-zinc-400\">\n      <span class=\"text-white font-semibold\">Todos</span>\n      <span>Populares</span>\n      <span>Nuevos</span>\n    </div>\n  </div>\n</xs-navbar>`,\n    },\n    {\n      name: 'Admin: Dashboard',\n      description:\n        'Navbar usada en el panel de administración. Sin retroceso, con botón de menú lateral (hamburguesa) para abrir el sidebar. Las acciones (búsqueda, perfil) van en el slot actions.',\n      inputs: {\n        title: 'XSADMIN',\n        showBack: false,\n        showMenu: true,\n        menuIcon: 'bars',\n        showLanguage: false,\n        showNotifications: false,\n      },\n    },\n    {\n      name: 'Admin: Menú colapsado',\n      description:\n        'Navbar en admin con el sidebar colapsado. El icono del menú cambia a \"chevron-right\" para indicar que se puede expandir.',\n      inputs: {\n        title: 'XSADMIN',\n        showBack: false,\n        showMenu: true,\n        menuIcon: 'chevron-right',\n        showLanguage: false,\n        showNotifications: false,\n      },\n    },\n    {\n      name: 'Admin: Detalle con retroceso',\n      description:\n        'Navbar en admin cuando se navega a una página de detalle. El botón de menú se reemplaza por el de retroceso.',\n      inputs: {\n        title: 'XSADMIN',\n        subtitle: 'Editar Usuario',\n        showBack: true,\n        showMenu: false,\n        showLanguage: false,\n        showNotifications: false,\n      },\n    },\n    {\n      name: 'Transparente sin sticky',\n      description:\n        'Navbar con fondo transparente y sin sticky, ideal para landing pages o perfiles.',\n      inputs: {\n        title: 'XSMusic',\n        subtitle: 'Perfil',\n        showBack: true,\n        transparent: true,\n        sticky: false,\n        showLanguage: true,\n        currentLang: 'es',\n      },\n    },\n    {\n      name: 'App: Navbar contextual de perfil (móvil)',\n      description:\n        'XS-770: navbar compacta de perfil en móvil. El slot leading lleva la miniatura (32px) y mobileTitle/mobileSubtitle el nombre y el país. En desktop se muestra el título normal.',\n      inputs: {\n        title: 'XSMusic',\n        mobileTitle: 'Nombre del artista',\n        mobileSubtitle: 'España',\n        showBack: true,\n        showLanguage: true,\n        currentLang: 'es',\n      },\n      template: `<xs-navbar title=\"XSMusic\" mobileTitle=\"Nombre del artista\" mobileSubtitle=\"España\" [showBack]=\"true\" [showLanguage]=\"true\" currentLang=\"es\">\n  <div leading>\n    <img src=\"https://api-v2.xsmusic.es/uploads/artist/small/artist.webp\" alt=\"Nombre del artista\" class=\"w-8 h-8 rounded-xl object-cover\" />\n  </div>\n</xs-navbar>`,\n    },\n  ],\n};\n"],"names":[],"mappings":"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"}