@xsmusices/ui 1.41.0 → 1.42.0

package/fesm2022/xsmusices-ui-xs-chart.xsstory--iUHj7bv.mjs

@@ -0,0 +1,239 @@
+import { XSChartComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'chart',
+    name: 'Chart',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-03-12T12:00:00.000Z',
+    created: '2025-08-27T21:28:04.640Z',
+    description: 'Componente de gráficos interactivos moderno basado en Chart.js (v4). Soporta múltiples tipos de gráficos con animaciones fluidas, temas oscuros nativos y tooltips avanzados. Configuración muy similar a la API anterior para facilitar migraciones.',
+    component: XSChartComponent,
+    selector: 'xs-chart',
+    inputs: [
+        {
+            key: 'config',
+            label: 'Configuración del Gráfico',
+            type: 'json',
+            default: {},
+        },
+        {
+            key: 'loading',
+            label: 'Estado de Carga',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'error',
+            label: 'Mensaje de Error',
+            type: 'text',
+            default: null,
+        },
+        {
+            key: 'chartId',
+            label: 'ID del Canvas',
+            type: 'text',
+            default: 'auto-generated',
+        },
+    ],
+    examples: [
+        {
+            name: 'Gráfico de Barras',
+            description: 'Gráfico de barras verticales básico',
+            inputs: {
+                config: {
+                    type: 'bar',
+                    data: {
+                        labels: [
+                            'Enero',
+                            'Febrero',
+                            'Marzo',
+                            'Abril',
+                            'Mayo',
+                        ],
+                        datasets: [
+                            {
+                                label: 'Ventas',
+                                data: [65, 59, 80, 81, 56],
+                                backgroundColor: '#3B82F6',
+                            },
+                        ],
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                title: { display: true, text: 'Ventas ($)' },
+                            },
+                        },
+                        plugins: { legend: { position: 'bottom' } },
+                    },
+                    height: 300,
+                },
+            },
+        },
+        {
+            name: 'Gráfico de Líneas',
+            description: 'Gráfico de líneas con múltiples datasets',
+            inputs: {
+                config: {
+                    type: 'line',
+                    data: {
+                        labels: [
+                            'Enero',
+                            'Febrero',
+                            'Marzo',
+                            'Abril',
+                            'Mayo',
+                            'Junio',
+                        ],
+                        datasets: [
+                            {
+                                label: 'Ingresos',
+                                data: [12000, 19000, 15000, 25000, 22000, 30000],
+                                borderColor: '#10B981',
+                                fill: false,
+                            },
+                            {
+                                label: 'Gastos',
+                                data: [10000, 15000, 12000, 18000, 17000, 20000],
+                                borderColor: '#EF4444',
+                                fill: false,
+                            },
+                        ],
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                title: { display: true, text: 'Monto ($)' },
+                            },
+                        },
+                        elements: { line: { tension: 0.4, borderWidth: 3 } },
+                        plugins: { legend: { position: 'bottom' } },
+                    },
+                    height: 300,
+                },
+            },
+        },
+        {
+            name: 'Gráfico Circular',
+            description: 'Gráfico de pastel con porcentajes',
+            inputs: {
+                config: {
+                    type: 'pie',
+                    data: {
+                        labels: ['Desktop', 'Mobile', 'Tablet'],
+                        datasets: [
+                            {
+                                data: [45, 35, 20],
+                                backgroundColor: [
+                                    '#3B82F6',
+                                    '#10B981',
+                                    '#F59E0B',
+                                ],
+                            },
+                        ],
+                    },
+                    options: {
+                        plugins: { legend: { position: 'bottom' } },
+                    },
+                    height: 300,
+                },
+            },
+        },
+        {
+            name: 'Gráfico de Área',
+            description: 'Gráfico de área con gradientes',
+            inputs: {
+                config: {
+                    type: 'line',
+                    data: {
+                        labels: [
+                            'Lun',
+                            'Mar',
+                            'Mié',
+                            'Jue',
+                            'Vie',
+                            'Sáb',
+                            'Dom',
+                        ],
+                        datasets: [
+                            {
+                                label: 'Visitas',
+                                data: [120, 190, 300, 500, 200, 300, 450],
+                                borderColor: '#8B5CF6',
+                                fill: true,
+                                backgroundColor: 'rgba(139,92,246,0.4)',
+                            },
+                        ],
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                title: { display: true, text: 'Visitas' },
+                            },
+                        },
+                        elements: { line: { tension: 0.4, borderWidth: 3 } },
+                    },
+                    height: 300,
+                },
+            },
+        },
+        {
+            name: 'Estado de Carga',
+            description: 'Gráfico mostrando estado de carga',
+            inputs: {
+                loading: true,
+                config: {
+                    type: 'bar',
+                    data: {
+                        labels: ['A', 'B', 'C'],
+                        datasets: [
+                            {
+                                label: 'Datos',
+                                data: [1, 2, 3],
+                            },
+                        ],
+                    },
+                    height: 300,
+                },
+            },
+        },
+    ],
+    multilanguage: false,
+    notes: [
+        {
+            text: 'Basado en Chart.js: ligero, popular y fácilmente personalizable.',
+            type: 'info',
+        },
+        {
+            text: 'Compatible con Chart.js: Mantiene la misma API de configuración para migración sencilla.',
+            type: 'info',
+        },
+        {
+            text: 'Incluye skeleton loader automático durante la carga de datos.',
+            type: 'info',
+        },
+        {
+            text: 'Tema oscuro nativo con colores optimizados para la interfaz XS.',
+            type: 'info',
+        },
+        {
+            text: 'Emite eventos chartClick, chartHover y chartReady para interacciones.',
+            type: 'info',
+        },
+    ],
+    coverage: {
+        statements: 100,
+        branches: 100,
+        functions: 100,
+        lines: 100,
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-chart.xsstory--iUHj7bv.mjs.map

package/fesm2022/xsmusices-ui-xs-chart.xsstory--iUHj7bv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-chart.xsstory--iUHj7bv.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/chart/xs-chart.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSChartComponent } from './xs-chart.component';\n\nexport const story: StoryMeta = {\n  id: 'chart',\n  name: 'Chart',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-03-12T12:00:00.000Z',\n  created: '2025-08-27T21:28:04.640Z',\n  description:\n    'Componente de gráficos interactivos moderno basado en Chart.js (v4). Soporta múltiples tipos de gráficos con animaciones fluidas, temas oscuros nativos y tooltips avanzados. Configuración muy similar a la API anterior para facilitar migraciones.',\n  component: XSChartComponent,\n  selector: 'xs-chart',\n  inputs: [\n    {\n      key: 'config',\n      label: 'Configuración del Gráfico',\n      type: 'json',\n      default: {},\n    },\n    {\n      key: 'loading',\n      label: 'Estado de Carga',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'error',\n      label: 'Mensaje de Error',\n      type: 'text',\n      default: null,\n    },\n    {\n      key: 'chartId',\n      label: 'ID del Canvas',\n      type: 'text',\n      default: 'auto-generated',\n    },\n  ],\n  examples: [\n    {\n      name: 'Gráfico de Barras',\n      description: 'Gráfico de barras verticales básico',\n      inputs: {\n        config: {\n          type: 'bar',\n          data: {\n            labels: [\n              'Enero',\n              'Febrero',\n              'Marzo',\n              'Abril',\n              'Mayo',\n            ],\n            datasets: [\n              {\n                label: 'Ventas',\n                data: [65, 59, 80, 81, 56],\n                backgroundColor: '#3B82F6',\n              },\n            ],\n          },\n          options: {\n            scales: {\n              y: {\n                beginAtZero: true,\n                title: { display: true, text: 'Ventas ($)' },\n              },\n            },\n            plugins: { legend: { position: 'bottom' } },\n          },\n          height: 300,\n        },\n      },\n    },\n    {\n      name: 'Gráfico de Líneas',\n      description: 'Gráfico de líneas con múltiples datasets',\n      inputs: {\n        config: {\n          type: 'line',\n          data: {\n            labels: [\n              'Enero',\n              'Febrero',\n              'Marzo',\n              'Abril',\n              'Mayo',\n              'Junio',\n            ],\n            datasets: [\n              {\n                label: 'Ingresos',\n                data: [12000, 19000, 15000, 25000, 22000, 30000],\n                borderColor: '#10B981',\n                fill: false,\n              },\n              {\n                label: 'Gastos',\n                data: [10000, 15000, 12000, 18000, 17000, 20000],\n                borderColor: '#EF4444',\n                fill: false,\n              },\n            ],\n          },\n          options: {\n            scales: {\n              y: {\n                beginAtZero: true,\n                title: { display: true, text: 'Monto ($)' },\n              },\n            },\n            elements: { line: { tension: 0.4, borderWidth: 3 } },\n            plugins: { legend: { position: 'bottom' } },\n          },\n          height: 300,\n        },\n      },\n    },\n    {\n      name: 'Gráfico Circular',\n      description: 'Gráfico de pastel con porcentajes',\n      inputs: {\n        config: {\n          type: 'pie',\n          data: {\n            labels: ['Desktop', 'Mobile', 'Tablet'],\n            datasets: [\n              {\n                data: [45, 35, 20],\n                backgroundColor: [\n                  '#3B82F6',\n                  '#10B981',\n                  '#F59E0B',\n                ],\n              },\n            ],\n          },\n          options: {\n            plugins: { legend: { position: 'bottom' } },\n          },\n          height: 300,\n        },\n      },\n    },\n    {\n      name: 'Gráfico de Área',\n      description: 'Gráfico de área con gradientes',\n      inputs: {\n        config: {\n          type: 'line',\n          data: {\n            labels: [\n              'Lun',\n              'Mar',\n              'Mié',\n              'Jue',\n              'Vie',\n              'Sáb',\n              'Dom',\n            ],\n            datasets: [\n              {\n                label: 'Visitas',\n                data: [120, 190, 300, 500, 200, 300, 450],\n                borderColor: '#8B5CF6',\n                fill: true,\n                backgroundColor: 'rgba(139,92,246,0.4)',\n              },\n            ],\n          },\n          options: {\n            scales: {\n              y: {\n                beginAtZero: true,\n                title: { display: true, text: 'Visitas' },\n              },\n            },\n            elements: { line: { tension: 0.4, borderWidth: 3 } },\n          },\n          height: 300,\n        },\n      },\n    },\n    {\n      name: 'Estado de Carga',\n      description: 'Gráfico mostrando estado de carga',\n      inputs: {\n        loading: true,\n        config: {\n          type: 'bar',\n          data: {\n            labels: ['A', 'B', 'C'],\n            datasets: [\n              {\n                label: 'Datos',\n                data: [1, 2, 3],\n              },\n            ],\n          },\n          height: 300,\n        },\n      },\n    },\n  ],\n  multilanguage: false,\n  notes: [\n    {\n      text: 'Basado en Chart.js: ligero, popular y fácilmente personalizable.',\n      type: 'info',\n    },\n    {\n      text: 'Compatible con Chart.js: Mantiene la misma API de configuración para migración sencilla.',\n      type: 'info',\n    },\n    {\n      text: 'Incluye skeleton loader automático durante la carga de datos.',\n      type: 'info',\n    },\n    {\n      text: 'Tema oscuro nativo con colores optimizados para la interfaz XS.',\n      type: 'info',\n    },\n    {\n      text: 'Emite eventos chartClick, chartHover y chartReady para interacciones.',\n      type: 'info',\n    },\n  ],\n  coverage: {\n    statements: 100,\n    branches: 100,\n    functions: 100,\n    lines: 100,\n  },\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui-xs-chat-alert.xsstory-rdpQcMgJ.mjs

@@ -0,0 +1,40 @@
+import { XSChatAlertComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'chat-alert',
+    name: 'Chat Alert',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: [],
+    updated: '2026-05-30T20:00:00.000Z',
+    created: '2026-05-30T20:00:00.000Z',
+    description: 'Alerta de conexion para el chat (reconectando, error).',
+    component: XSChatAlertComponent,
+    selector: 'xs-chat-alert',
+    inputs: [
+        {
+            key: 'type',
+            label: 'Tipo de alerta',
+            type: 'select',
+            options: ['connection', 'error'],
+            default: null,
+        },
+        { key: 'message', label: 'Mensaje', type: 'text' },
+    ],
+    examples: [
+        {
+            name: 'Conexion',
+            inputs: { type: 'connection', message: 'Reconectando...' },
+        },
+        {
+            name: 'Error',
+            inputs: { type: 'error', message: 'Error de conexion' },
+        },
+    ],
+    multilanguage: false,
+    notes: [],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-chat-alert.xsstory-rdpQcMgJ.mjs.map

package/fesm2022/xsmusices-ui-xs-chat-alert.xsstory-rdpQcMgJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-chat-alert.xsstory-rdpQcMgJ.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/chat/alert/xs-chat-alert.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../../story.types';\nimport { XSChatAlertComponent } from './xs-chat-alert.component';\n\nexport const story: StoryMeta = {\n  id: 'chat-alert',\n  name: 'Chat Alert',\n  type: 'component',\n  subtype: 'UI',\n  status: 'active',\n  usage: [],\n  updated: '2026-05-30T20:00:00.000Z',\n  created: '2026-05-30T20:00:00.000Z',\n  description:\n    'Alerta de conexion para el chat (reconectando, error).',\n  component: XSChatAlertComponent,\n  selector: 'xs-chat-alert',\n  inputs: [\n    {\n      key: 'type',\n      label: 'Tipo de alerta',\n      type: 'select',\n      options: ['connection', 'error'],\n      default: null,\n    },\n    { key: 'message', label: 'Mensaje', type: 'text' },\n  ],\n  examples: [\n    {\n      name: 'Conexion',\n      inputs: { type: 'connection', message: 'Reconectando...' },\n    },\n    {\n      name: 'Error',\n      inputs: { type: 'error', message: 'Error de conexion' },\n    },\n  ],\n  multilanguage: false,\n  notes: [],\n};\n"],"names":[],"mappings":";;AAGO,MAAM,KAAK,GAAc;AAC9B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,WAAW,EACT,wDAAwD;AAC1D,IAAA,SAAS,EAAE,oBAAoB;AAC/B,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,gBAAgB;AACvB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC;AAChC,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;QACD,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AACnD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA;AACE,YAAA,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,iBAAiB,EAAE;AAC3D,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE;AACxD,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,KAAK,EAAE,EAAE;;;;;"}

package/fesm2022/xsmusices-ui-xs-chat-conversation-info.xsstory-BQjdjpbB.mjs

@@ -0,0 +1,157 @@
+import { XSChatConversationInfoComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'chat-conversation-info',
+    name: 'Chat Conversation Info',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: [],
+    updated: '2026-06-02T20:00:00.000Z',
+    created: '2026-05-30T20:00:00.000Z',
+    description: 'Cabecera de conversacion con avatar, nombre, online, typing y acciones.',
+    component: XSChatConversationInfoComponent,
+    selector: 'xs-chat-conversation-info',
+    inputs: [
+        {
+            key: 'userId',
+            label: 'ID del usuario actual',
+            type: 'text',
+        },
+        {
+            key: 'typingUserId',
+            label: 'ID del usuario escribiendo',
+            type: 'text',
+        },
+        {
+            key: 'roleLabel',
+            label: 'Rol (traducción)',
+            type: 'text',
+        },
+    ],
+    examples: [
+        {
+            name: 'Chat con usuario',
+            inputs: {
+                userId: 'current-user',
+                currentChatInfo: {
+                    type: 'infoChat',
+                    itemType: 'user',
+                    item: {
+                        _id: 'other-user',
+                        name: 'Manolo Pérez',
+                    },
+                    sender: {
+                        _id: 'current-user',
+                        name: 'Tú',
+                        image: true,
+                        type: 'NORMAL',
+                    },
+                    receiver: {
+                        _id: 'other-user',
+                        name: 'Manolo Pérez',
+                        image: true,
+                        type: 'PRO',
+                    },
+                    online: { sender: false, receiver: true },
+                    blockedBy: [],
+                },
+                buttons: [
+                    {
+                        icon: 'list',
+                        action: 'viewChatList',
+                        label: 'Ir al listado',
+                    },
+                    {
+                        icon: 'user',
+                        action: 'viewProfile',
+                        label: 'Ver perfil',
+                    },
+                    { icon: 'ban', action: 'block', label: 'Bloquear' },
+                ],
+            },
+        },
+        {
+            name: 'Chat con artista',
+            inputs: {
+                userId: 'fan-user',
+                currentChatInfo: {
+                    type: 'infoChat',
+                    itemType: 'artist',
+                    item: {
+                        _id: '635ffb27c3deba83ead64486',
+                        name: 'Fátima Hajji',
+                        image: true,
+                        slug: 'fatima-hajji',
+                        type: 'artist',
+                    },
+                    sender: { _id: 'fan-user', name: 'Tú', image: false },
+                    receiver: {
+                        _id: '635ffb27c3deba83ead64486',
+                        name: 'Fátima Hajji',
+                        image: false,
+                    },
+                    online: { sender: true, receiver: true },
+                    blockedBy: [],
+                },
+                buttons: [
+                    {
+                        icon: 'list',
+                        action: 'viewChatList',
+                        label: 'Ir al listado',
+                    },
+                    {
+                        icon: 'user',
+                        action: 'viewProfile',
+                        label: 'Ver perfil',
+                    },
+                    { icon: 'ban', action: 'block', label: 'Bloquear' },
+                ],
+            },
+        },
+        {
+            name: 'Chat con organización',
+            inputs: {
+                userId: 'fan-user',
+                currentChatInfo: {
+                    type: 'infoChat',
+                    itemType: 'organization',
+                    item: {
+                        _id: 'org-001',
+                        name: 'Groove S.L.',
+                        image: false,
+                        slug: 'groove-sl',
+                        type: 'promoter',
+                        types: ['promoter', 'label', 'venue'],
+                    },
+                    sender: { _id: 'fan-user', name: 'Tú', image: false },
+                    receiver: {
+                        _id: 'org-001',
+                        name: 'Groove S.L.',
+                        image: false,
+                    },
+                    online: { sender: true, receiver: false },
+                    blockedBy: [],
+                },
+                buttons: [
+                    {
+                        icon: 'list',
+                        action: 'viewChatList',
+                        label: 'Ir al listado',
+                    },
+                    {
+                        icon: 'user',
+                        action: 'viewProfile',
+                        label: 'Ver perfil',
+                    },
+                    { icon: 'ban', action: 'block', label: 'Bloquear' },
+                ],
+            },
+        },
+    ],
+    multilanguage: false,
+    notes: [],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-chat-conversation-info.xsstory-BQjdjpbB.mjs.map

package/fesm2022/xsmusices-ui-xs-chat-conversation-info.xsstory-BQjdjpbB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-chat-conversation-info.xsstory-BQjdjpbB.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/chat/conversation-info/xs-chat-conversation-info.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../../story.types';\nimport { XSChatConversationInfoComponent } from './xs-chat-conversation-info.component';\n\nexport const story: StoryMeta = {\n  id: 'chat-conversation-info',\n  name: 'Chat Conversation Info',\n  type: 'component',\n  subtype: 'UI',\n  status: 'active',\n  usage: [],\n  updated: '2026-06-02T20:00:00.000Z',\n  created: '2026-05-30T20:00:00.000Z',\n  description:\n    'Cabecera de conversacion con avatar, nombre, online, typing y acciones.',\n  component: XSChatConversationInfoComponent,\n  selector: 'xs-chat-conversation-info',\n  inputs: [\n    {\n      key: 'userId',\n      label: 'ID del usuario actual',\n      type: 'text',\n    },\n    {\n      key: 'typingUserId',\n      label: 'ID del usuario escribiendo',\n      type: 'text',\n    },\n    {\n      key: 'roleLabel',\n      label: 'Rol (traducción)',\n      type: 'text',\n    },\n  ],\n  examples: [\n    {\n      name: 'Chat con usuario',\n      inputs: {\n        userId: 'current-user',\n        currentChatInfo: {\n          type: 'infoChat',\n          itemType: 'user',\n          item: {\n            _id: 'other-user',\n            name: 'Manolo Pérez',\n          },\n          sender: {\n            _id: 'current-user',\n            name: 'Tú',\n            image: true,\n            type: 'NORMAL',\n          },\n          receiver: {\n            _id: 'other-user',\n            name: 'Manolo Pérez',\n            image: true,\n            type: 'PRO',\n          },\n          online: { sender: false, receiver: true },\n          blockedBy: [],\n        },\n        buttons: [\n          {\n            icon: 'list',\n            action: 'viewChatList',\n            label: 'Ir al listado',\n          },\n          {\n            icon: 'user',\n            action: 'viewProfile',\n            label: 'Ver perfil',\n          },\n          { icon: 'ban', action: 'block', label: 'Bloquear' },\n        ],\n      },\n    },\n    {\n      name: 'Chat con artista',\n      inputs: {\n        userId: 'fan-user',\n        currentChatInfo: {\n          type: 'infoChat',\n          itemType: 'artist',\n          item: {\n            _id: '635ffb27c3deba83ead64486',\n            name: 'Fátima Hajji',\n            image: true,\n            slug: 'fatima-hajji',\n            type: 'artist',\n          },\n          sender: { _id: 'fan-user', name: 'Tú', image: false },\n          receiver: {\n            _id: '635ffb27c3deba83ead64486',\n            name: 'Fátima Hajji',\n            image: false,\n          },\n          online: { sender: true, receiver: true },\n          blockedBy: [],\n        },\n        buttons: [\n          {\n            icon: 'list',\n            action: 'viewChatList',\n            label: 'Ir al listado',\n          },\n          {\n            icon: 'user',\n            action: 'viewProfile',\n            label: 'Ver perfil',\n          },\n          { icon: 'ban', action: 'block', label: 'Bloquear' },\n        ],\n      },\n    },\n    {\n      name: 'Chat con organización',\n      inputs: {\n        userId: 'fan-user',\n        currentChatInfo: {\n          type: 'infoChat',\n          itemType: 'organization',\n          item: {\n            _id: 'org-001',\n            name: 'Groove S.L.',\n            image: false,\n            slug: 'groove-sl',\n            type: 'promoter',\n            types: ['promoter', 'label', 'venue'],\n          },\n          sender: { _id: 'fan-user', name: 'Tú', image: false },\n          receiver: {\n            _id: 'org-001',\n            name: 'Groove S.L.',\n            image: false,\n          },\n          online: { sender: true, receiver: false },\n          blockedBy: [],\n        },\n        buttons: [\n          {\n            icon: 'list',\n            action: 'viewChatList',\n            label: 'Ir al listado',\n          },\n          {\n            icon: 'user',\n            action: 'viewProfile',\n            label: 'Ver perfil',\n          },\n          { icon: 'ban', action: 'block', label: 'Bloquear' },\n        ],\n      },\n    },\n  ],\n  multilanguage: false,\n  notes: [],\n};\n"],"names":[],"mappings":"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"}