valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/item-list/item-list.stories.ts

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ItemListComponent } from './item-list.component';
+import { ComponentStates } from '../../types';
+
+const meta: Meta<ItemListComponent> = {
+  title: 'Organisms/ItemList',
+  component: ItemListComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ItemListComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'ItemList configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'Event emitted when an item is clicked',
+    },
+    onActionClick: {
+      action: 'onActionClick',
+      description: 'Event emitted when an item action is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-item-list
+
+A reusable list component for displaying a collection of items with various display modes (text, subtitle, avatar, icon, route, actionable).
+
+### Usage
+
+\`\`\`html
+<val-item-list [props]="{
+  title: 'Users',
+  items: [
+    { text: 'John Doe', mode: 'avatar', image: 'avatar.jpg', token: 'user1' },
+    { text: 'Jane Smith', mode: 'avatar', image: 'avatar2.jpg', token: 'user2' }
+  ],
+  color: 'primary',
+  bordered: true,
+  rounded: false,
+  shadowed: false
+}" (onClick)="handleClick($event)"></val-item-list>
+\`\`\`
+
+### Item Modes
+
+- \`justext\`: Simple text display
+- \`subtitule\`: Text with subtitle
+- \`avatar\`: Item with avatar image
+- \`icon\`: Item with icon
+- \`route\`: Navigatable item with router link
+- \`actionable\`: Item with action buttons
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ItemListComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Item 1', mode: 'justext', token: 'item1', clickable: true, lines: 'full' },
+        { text: 'Item 2', mode: 'justext', token: 'item2', clickable: true, lines: 'full' },
+        { text: 'Item 3', mode: 'justext', token: 'item3', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithTitle: Story = {
+  args: {
+    props: {
+      title: 'My List',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'First Item', mode: 'justext', token: 'item1', clickable: true, lines: 'full' },
+        { text: 'Second Item', mode: 'justext', token: 'item2', clickable: true, lines: 'full' },
+        { text: 'Third Item', mode: 'justext', token: 'item3', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithSubtitles: Story = {
+  args: {
+    props: {
+      title: 'Contacts',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'John Doe', subtitle: 'Software Engineer', mode: 'subtitule', token: 'john', clickable: true, lines: 'full' },
+        { text: 'Jane Smith', subtitle: 'Product Manager', mode: 'subtitule', token: 'jane', clickable: true, lines: 'full' },
+        { text: 'Bob Johnson', subtitle: 'Designer', mode: 'subtitule', token: 'bob', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithAvatars: Story = {
+  args: {
+    props: {
+      title: 'Team Members',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Alice', image: 'https://ionicframework.com/docs/img/demos/avatar.svg', mode: 'avatar', token: 'alice', clickable: true, lines: 'full' },
+        { text: 'Bob', image: 'https://ionicframework.com/docs/img/demos/avatar.svg', mode: 'avatar', token: 'bob', clickable: true, lines: 'full' },
+        { text: 'Charlie', image: 'https://ionicframework.com/docs/img/demos/avatar.svg', mode: 'avatar', token: 'charlie', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    props: {
+      title: 'Settings',
+      color: 'medium',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Profile', icon: 'person', mode: 'icon', token: 'profile', clickable: true, lines: 'full' },
+        { text: 'Notifications', icon: 'notifications', mode: 'icon', token: 'notifications', clickable: true, lines: 'full' },
+        { text: 'Privacy', icon: 'lock-closed', mode: 'icon', token: 'privacy', clickable: true, lines: 'full' },
+        { text: 'Help', icon: 'help-circle', mode: 'icon', token: 'help', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithComments: Story = {
+  args: {
+    props: {
+      title: 'Recent Messages',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Meeting Tomorrow', comments: 'Don\'t forget to prepare the slides', mode: 'justext', token: 'msg1', clickable: true, lines: 'full' },
+        { text: 'Project Update', comments: 'The deadline has been extended', mode: 'justext', token: 'msg2', clickable: true, lines: 'full' },
+        { text: 'Quick Question', comments: 'Can you review my PR?', mode: 'justext', token: 'msg3', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithEndNotes: Story = {
+  args: {
+    props: {
+      title: 'Orders',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Order #1234', endNote: '$99.99', mode: 'justext', token: 'order1', clickable: true, lines: 'full' },
+        { text: 'Order #1235', endNote: '$149.99', mode: 'justext', token: 'order2', clickable: true, lines: 'full' },
+        { text: 'Order #1236', endNote: '$79.99', mode: 'justext', token: 'order3', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    props: {
+      title: 'Pending Tasks',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        {
+          text: 'Review Code',
+          subtitle: 'PR #123 needs review',
+          mode: 'actionable',
+          token: 'task1',
+          lines: 'full',
+          actions: [
+            { token: 'approve', description: 'Approve', icon: 'checkmark', state: ComponentStates.ENABLED },
+            { token: 'reject', description: 'Reject', icon: 'close', state: ComponentStates.ENABLED },
+          ],
+        },
+        {
+          text: 'Update Documentation',
+          subtitle: 'API docs are outdated',
+          mode: 'actionable',
+          token: 'task2',
+          lines: 'full',
+          actions: [
+            { token: 'complete', description: 'Complete', state: ComponentStates.ENABLED },
+          ],
+        },
+        {
+          text: 'Deploy to Production',
+          subtitle: 'v2.0 ready for release',
+          mode: 'actionable',
+          token: 'task3',
+          lines: 'none',
+          actions: [
+            { token: 'deploy', description: 'Deploy', icon: 'rocket', state: ComponentStates.ENABLED },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const WithUnreadIndicator: Story = {
+  args: {
+    props: {
+      title: 'Notifications',
+      color: 'primary',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'New message from John', mode: 'justext', token: 'notif1', clickable: true, lines: 'full', unreadIndicator: true },
+        { text: 'Your order has shipped', mode: 'justext', token: 'notif2', clickable: true, lines: 'full', unreadIndicator: true },
+        { text: 'Meeting reminder', mode: 'justext', token: 'notif3', clickable: true, lines: 'full', unreadIndicator: false },
+        { text: 'Weekly digest', mode: 'justext', token: 'notif4', clickable: true, lines: 'none', unreadIndicator: false },
+      ],
+    },
+  },
+};
+
+export const RoundedAndShadowed: Story = {
+  args: {
+    props: {
+      title: 'Featured Items',
+      color: 'primary',
+      bordered: true,
+      rounded: true,
+      shadowed: true,
+      items: [
+        { text: 'Premium Feature', subtitle: 'Unlock advanced tools', mode: 'subtitule', token: 'premium', clickable: true, lines: 'full' },
+        { text: 'Pro Plan', subtitle: 'Best for professionals', mode: 'subtitule', token: 'pro', clickable: true, lines: 'full' },
+        { text: 'Enterprise', subtitle: 'Custom solutions', mode: 'subtitule', token: 'enterprise', clickable: true, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const DisabledItems: Story = {
+  args: {
+    props: {
+      color: 'medium',
+      bordered: true,
+      rounded: false,
+      shadowed: false,
+      items: [
+        { text: 'Available Option', mode: 'justext', token: 'opt1', clickable: true, disabled: false, lines: 'full' },
+        { text: 'Disabled Option', mode: 'justext', token: 'opt2', clickable: true, disabled: true, lines: 'full' },
+        { text: 'Another Available', mode: 'justext', token: 'opt3', clickable: true, disabled: false, lines: 'none' },
+      ],
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
+        <h3 style="margin: 0; font-family: system-ui;">Simple List</h3>
+        <val-item-list [props]="{
+          color: 'primary',
+          bordered: true,
+          rounded: false,
+          shadowed: false,
+          items: [
+            { text: 'Item One', mode: 'justext', token: 'i1', clickable: true, lines: 'full' },
+            { text: 'Item Two', mode: 'justext', token: 'i2', clickable: true, lines: 'full' },
+            { text: 'Item Three', mode: 'justext', token: 'i3', clickable: true, lines: 'none' }
+          ]
+        }"></val-item-list>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Avatars</h3>
+        <val-item-list [props]="{
+          title: 'Team',
+          color: 'primary',
+          bordered: true,
+          rounded: false,
+          shadowed: false,
+          items: [
+            { text: 'Alice', image: 'https://ionicframework.com/docs/img/demos/avatar.svg', mode: 'avatar', token: 'alice', clickable: true, lines: 'full' },
+            { text: 'Bob', image: 'https://ionicframework.com/docs/img/demos/avatar.svg', mode: 'avatar', token: 'bob', clickable: true, lines: 'none' }
+          ]
+        }"></val-item-list>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Settings Menu</h3>
+        <val-item-list [props]="{
+          title: 'Settings',
+          color: 'medium',
+          bordered: true,
+          rounded: true,
+          shadowed: true,
+          items: [
+            { text: 'Profile', icon: 'person', mode: 'icon', token: 'profile', clickable: true, lines: 'full' },
+            { text: 'Notifications', icon: 'notifications', mode: 'icon', token: 'notif', clickable: true, lines: 'full' },
+            { text: 'Privacy', icon: 'lock-closed', mode: 'icon', token: 'privacy', clickable: true, lines: 'none' }
+          ]
+        }"></val-item-list>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Actions</h3>
+        <val-item-list [props]="{
+          title: 'Tasks',
+          color: 'primary',
+          bordered: true,
+          rounded: false,
+          shadowed: false,
+          items: [
+            {
+              text: 'Review PR',
+              subtitle: 'Waiting for approval',
+              mode: 'actionable',
+              token: 'task1',
+              lines: 'full',
+              actions: [
+                { token: 'approve', description: 'Approve', state: 'ENABLED' }
+              ]
+            },
+            {
+              text: 'Deploy',
+              subtitle: 'Ready for production',
+              mode: 'actionable',
+              token: 'task2',
+              lines: 'none',
+              actions: [
+                { token: 'deploy', description: 'Deploy', state: 'ENABLED' }
+              ]
+            }
+          ]
+        }"></val-item-list>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/organisms/item-list/types.ts

@@ -0,0 +1,130 @@
+/**
+ * Tipos y metadatos para el componente ItemListComponent.
+ * Permiten definir la estructura de los elementos de la lista, acciones y estilos.
+ */
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+/**
+ * Representa una acción disponible en un elemento de la lista.
+ * Ahora soporta contenido reactivo para la descripción.
+ * @property token Identificador único de la acción.
+ * @property icon (opcional) Icono a mostrar.
+ * @property description (opcional) Descripción estática de la acción.
+ * @property descriptionConfig (opcional) Configuración de contenido reactivo para la descripción.
+ * @property state Estado de la acción (habilitado, deshabilitado, trabajando, etc).
+ */
+export type ItemAction = {
+  token: string;
+  icon?: string;
+  description?: string;
+  descriptionConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  state: ComponentState;
+};
+
+/**
+ * Metadatos de un elemento individual de la lista.
+ * Ahora soporta contenido reactivo para todos los campos de texto.
+ * @property token (opcional) Identificador único del elemento.
+ * @property mode Modo de visualización ('justext', 'subtitule', 'avatar', 'icon', 'route', 'actionable').
+ * @property text (opcional) Texto estático principal del elemento.
+ * @property textConfig (opcional) Configuración de contenido reactivo para el texto principal.
+ * @property image (opcional) Imagen para modo avatar.
+ * @property icon (opcional) Icono para modo icon.
+ * @property comments (opcional) Comentarios estáticos.
+ * @property commentsConfig (opcional) Configuración de contenido reactivo para comentarios.
+ * @property subtitle (opcional) Subtítulo estático.
+ * @property subtitleConfig (opcional) Configuración de contenido reactivo para subtítulo.
+ * @property endNote (opcional) Nota estática al final del elemento.
+ * @property endNoteConfig (opcional) Configuración de contenido reactivo para la nota final.
+ * @property actions (opcional) Acciones disponibles para el elemento.
+ * @property color (opcional) Color personalizado.
+ * @property lines (opcional) Tipo de líneas ('full', 'inset', 'none').
+ * @property button (opcional) Si el elemento es un botón.
+ * @property detail (opcional) Si muestra detalles.
+ * @property clickable (opcional) Si es clicable.
+ * @property detailIcon (opcional) Icono de detalle.
+ * @property disabled (opcional) Si está deshabilitado.
+ * @property ellipsis (opcional) Si el texto debe cortarse con puntos suspensivos.
+ * @property href (opcional) Enlace externo.
+ * @property routerLink (opcional) Enlace de router Angular.
+ * @property unreadIndicator (opcional) Indicador de no leído.
+ */
+export interface ItemMetadata {
+  token?: string;
+  mode: 'justext' | 'subtitule' | 'avatar' | 'icon' | 'route' | 'actionable';
+  text?: string;
+  textConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  image?: string;
+  icon?: string;
+  comments?: string;
+  commentsConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  subtitle?: string;
+  subtitleConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  endNote?: string;
+  endNoteConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  actions?: ItemAction[];
+
+  color?: string;
+  lines?: 'full' | 'inset' | 'none';
+  button?: boolean;
+  detail?: boolean;
+  clickable?: boolean;
+  detailIcon?: string;
+  disabled?: boolean;
+  ellipsis?: boolean;
+  href?: string;
+  routerLink?: string | any[];
+  unreadIndicator?: boolean;
+}
+
+/**
+ * Metadatos de la lista de elementos.
+ * Ahora soporta contenido reactivo para el título.
+ * @property color Color principal de la lista.
+ * @property bordered Si la lista tiene borde.
+ * @property rounded Si la lista tiene bordes redondeados.
+ * @property shadowed Si la lista tiene sombra.
+ * @property title (opcional) Título estático de la lista.
+ * @property titleConfig (opcional) Configuración de contenido reactivo para el título.
+ * @property items Elementos a mostrar en la lista.
+ */
+export interface ListMetadata {
+  color: Color;
+  bordered: boolean;
+  rounded: boolean;
+  shadowed: boolean;
+  title?: string;
+  titleConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  items: ItemMetadata[];
+}