valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/card/card.component.ts

@@ -0,0 +1,300 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCheckbox,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { AvatarComponent } from '../../atoms/avatar/avatar.component';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { ImageComponent } from '../../atoms/image/image.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { ToolbarActionType } from '../../types';
+import { CardClickEvent, CardMetadata, CardSection, CardType } from './types';
+
+@Component({
+  selector: 'val-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    AvatarComponent,
+    ImageComponent,
+    TextComponent,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCheckbox,
+    IonButtons,
+    IonButton,
+    IonIcon,
+  ],
+  template: `
+    <ion-card *ngIf="resolvedProps.type === types.native">
+      @if (resolvedProps.image) {
+        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
+      }
+      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
+        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
+
+      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
+        <div class="card-actions">
+          <val-button
+            *ngFor="let b of resolvedProps.footerActions"
+            [props]="b"
+            (onClick)="clickHandler(sections.footer, b.token)"
+          ></val-button>
+        </div>
+      }
+    </ion-card>
+
+    <ion-card
+      *ngIf="resolvedProps.type === types.tappable"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      class="tapable"
+    >
+      @if (resolvedProps.image) {
+        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
+      }
+      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
+        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card
+      *ngIf="resolvedProps.type === types.checker"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      class="tapable"
+    >
+      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
+        <div>
+          <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
+          <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
+        </div>
+        <div>
+          <ion-checkbox [checked]="resolvedProps.selected"></ion-checkbox>
+        </div>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card *ngIf="resolvedProps.type === types.complex" class="complex">
+      <ion-card-header class="complex-header">
+        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.leftActions?.length > 0">
+          <ng-container *ngFor="let action of resolvedProps.leftActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerLeft, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+            <div *ngIf="resolvedProps.headerText">
+              <val-text [props]="{ content: resolvedProps.headerText, color: 'dark', bold: true, size: 'medium' }" />
+            </div>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.rightActions?.length > 0">
+          <ng-container *ngFor="let action of resolvedProps.rightActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerRight, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ion-card-header>
+
+      <div class="tapable" (click)="clickHandler(sections.content, resolvedProps.token)">
+        <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="complex-header">
+          <div>
+            <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
+            <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
+          </div>
+        </ion-card-header>
+
+        @if (resolvedProps.image) {
+          <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
+        }
+        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
+      </div>
+      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
+        <div class="card-actions">
+          <val-button
+            *ngFor="let b of resolvedProps.footerActions"
+            [props]="b"
+            (onClick)="clickHandler(sections.footer, b.token)"
+          ></val-button>
+        </div>
+      }
+      <ion-buttons
+        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
+        *ngIf="resolvedProps.footerComplexActions?.length > 0"
+      >
+        <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
+          <ion-button
+            *ngIf="action.type === actionTypes.ICON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          >
+            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+          </ion-button>
+          <val-avatar
+            style="margin-right: 4px; cursor: pointer"
+            *ngIf="action.type === actionTypes.AVATAR"
+            [props]="{ size: 'small', image: action.description, default: '' }"
+            (onClick)="clickHandler(sections.footerExtra, action.token)"
+          ></val-avatar>
+          <val-image
+            *ngIf="action.type === actionTypes.IMAGE"
+            [props]="action.image"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          ></val-image>
+          <ion-button
+            *ngIf="action.type === actionTypes.BUTTON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+            color="dark"
+          >
+            {{ action.description }}
+          </ion-button>
+        </ng-container>
+      </ion-buttons>
+    </ion-card>
+  `,
+  styleUrls: ['./card.component.scss'],
+})
+/**
+ * val-card
+ *
+ * A flexible card component supporting images, titles, content, actions, and custom sections.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-card preset="feature" [props]="{ title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
+ *
+ * @example Static (backwards compatible):
+ * <val-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'feature', 'compact')
+ * @input props: CardMetadata - Configuration for the card (overrides preset values)
+ * @output onClick - Emits a CardClickEvent when the card or an action is clicked
+ */
+export class CardComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable card configurations
+   * (type, variant, padding, etc.) that can be registered at app level.
+   *
+   * @example
+   * <val-card preset="feature" [props]="{ title: 'My Card' }"></val-card>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Card configuration object. Values here override preset values.
+   * @type {CardMetadata}
+   * @property type - The card type (see CardType).
+   * @property title - The card title.
+   * @property image - The card image URL.
+   * @property content - The card content.
+   * @property actions - Array of action buttons (optional).
+   * @property sections - Custom card sections (optional).
+   * @property overtitle - Subtitle or overtitle (optional).
+   */
+  @Input() props: Partial<CardMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: CardMetadata = {} as CardMetadata;
+
+  /**
+   * Event emitted when the card or an action is clicked.
+   */
+  @Output()
+  onClick = new EventEmitter<CardClickEvent>();
+
+  types = CardType;
+  actionTypes = ToolbarActionType;
+  sections = CardSection;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset ? (this.presets.get('card', this.preset) as Partial<CardMetadata>) : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as CardMetadata;
+  }
+
+  clickHandler(section: CardSection, token?: string) {
+    this.onClick.emit({ section, token });
+  }
+}

package/src/lib/components/molecules/card/card.stories.ts

@@ -0,0 +1,360 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CardComponent } from './card.component';
+import { CardMetadata, CardType } from './types';
+import { createButtonProps } from '../../../../stories/helpers/storybook-helpers';
+
+const SAMPLE_IMAGE = 'https://picsum.photos/seed/card/400/200';
+const SAMPLE_AVATAR = 'https://i.pravatar.cc/150?img=3';
+
+/**
+ * Helper to create CardMetadata with defaults
+ */
+const createCardProps = (overrides: Partial<CardMetadata> = {}): CardMetadata => ({
+  type: CardType.native,
+  title: 'Card Title',
+  overtitle: '',
+  content: 'Card content goes here.',
+  image: '',
+  headerText: '',
+  token: '',
+  footerActions: [],
+  footerComplexActions: [],
+  leftActions: [],
+  rightActions: [],
+  selected: false,
+  ...overrides,
+});
+
+// Pre-create button props
+const learnMoreBtn = createButtonProps({ text: 'Learn More', color: 'primary', fill: 'clear', token: 'learn-more' });
+const shareBtn = createButtonProps({ text: 'Share', color: 'primary', fill: 'clear', token: 'share' });
+const actionBtn = createButtonProps({ text: 'Action', color: 'primary', fill: 'clear', token: 'action' });
+const blockBtn = createButtonProps({ text: 'Block button', color: 'primary', expand: 'block', token: 'block' });
+
+// Pre-create card props
+const nativeCardProps = createCardProps({
+  title: 'Card Title',
+  overtitle: 'Subtitle',
+  content: 'This is the card content. It can contain any text description.',
+  image: SAMPLE_IMAGE,
+});
+
+const nativeWithActionsProps = createCardProps({
+  title: 'Card With Actions',
+  overtitle: 'Interactive',
+  content: 'This card has footer action buttons.',
+  image: SAMPLE_IMAGE,
+  footerActions: [learnMoreBtn, shareBtn],
+});
+
+const tappableCardProps = createCardProps({
+  type: CardType.tappable,
+  title: 'Tappable Card',
+  overtitle: 'Click me',
+  content: 'This entire card is clickable. Try clicking anywhere on it.',
+  image: SAMPLE_IMAGE,
+  token: 'tappable-card',
+});
+
+const checkerCardProps = createCardProps({
+  type: CardType.checker,
+  title: 'Selectable Card',
+  overtitle: 'Option 1',
+  content: 'Click to select this card. A checkbox will show the selection state.',
+  token: 'checker-card',
+});
+
+const checkerSelectedProps = createCardProps({
+  type: CardType.checker,
+  title: 'Selected Card',
+  overtitle: 'Option 2',
+  content: 'This card is pre-selected.',
+  token: 'checker-selected',
+  selected: true,
+});
+
+const complexCardProps = createCardProps({
+  type: CardType.complex,
+  title: 'Complex Card',
+  overtitle: 'Advanced Layout',
+  content: 'This card has header actions on both sides and footer actions.',
+  image: SAMPLE_IMAGE,
+  headerText: 'John Doe',
+  token: 'complex-card',
+  footerComplexActions: [
+    { type: 'ICON', description: 'heart-outline', token: 'like', position: 'right' },
+    { type: 'ICON', description: 'chatbubble-outline', token: 'comment', position: 'right' },
+    { type: 'ICON', description: 'share-outline', token: 'share', position: 'right' },
+  ],
+  leftActions: [
+    { type: 'AVATAR', description: SAMPLE_AVATAR, token: 'avatar', position: 'left' },
+  ],
+  rightActions: [
+    { type: 'ICON', description: 'ellipsis-vertical', token: 'menu', position: 'right' },
+  ],
+});
+
+const complexWithImageProps = createCardProps({
+  type: CardType.complex,
+  title: 'Complex title',
+  overtitle: 'Over title example',
+  content: 'Simple content is amazing. Embrace the change and be pioneer in the modern era',
+  image: 'https://picsum.photos/seed/sunset/400/300',
+  headerText: 'Usuariocool903993',
+  token: 'photo-post',
+  footerActions: [blockBtn],
+  footerComplexActions: [
+    { type: 'ICON', description: 'heart-outline', token: 'like', position: 'right' },
+    { type: 'ICON', description: 'chatbubble-outline', token: 'comment', position: 'right' },
+    { type: 'ICON', description: 'share-outline', token: 'save', position: 'right' },
+  ],
+  leftActions: [
+    { type: 'AVATAR', description: 'https://i.pravatar.cc/150?img=5', token: 'avatar', position: 'left' },
+  ],
+  rightActions: [
+    { type: 'ICON', description: 'ellipsis-horizontal', token: 'menu', position: 'right' },
+  ],
+});
+
+// Showcase props
+const showcaseNativeProps = createCardProps({
+  title: 'Native Card',
+  overtitle: 'Standard',
+  content: 'Basic card with optional actions',
+  image: SAMPLE_IMAGE,
+  footerActions: [actionBtn],
+});
+
+const showcaseTappableProps = createCardProps({
+  type: CardType.tappable,
+  title: 'Tappable Card',
+  overtitle: 'Clickable',
+  content: 'Click anywhere to interact',
+  image: 'https://picsum.photos/seed/tap/400/200',
+  token: 'tap-demo',
+});
+
+const showcaseCheckerAProps = createCardProps({
+  type: CardType.checker,
+  title: 'Option A',
+  content: 'Select this option',
+  token: 'option-a',
+});
+
+const showcaseCheckerBProps = createCardProps({
+  type: CardType.checker,
+  title: 'Option B',
+  content: 'Or select this one',
+  token: 'option-b',
+  selected: true,
+});
+
+const showcaseComplexProps = createCardProps({
+  type: CardType.complex,
+  title: 'Amazing Photo',
+  content: 'Check out this awesome view!',
+  image: 'https://picsum.photos/seed/social/400/250',
+  headerText: 'PhotoPro',
+  token: 'social-post',
+  footerComplexActions: [
+    { type: 'ICON', description: 'heart-outline', token: 'like', position: 'right' },
+    { type: 'ICON', description: 'chatbubble-outline', token: 'comment', position: 'right' },
+    { type: 'ICON', description: 'share-outline', token: 'share', position: 'right' },
+  ],
+  leftActions: [
+    { type: 'AVATAR', description: SAMPLE_AVATAR, token: 'avatar', position: 'left' },
+  ],
+  rightActions: [
+    { type: 'ICON', description: 'ellipsis-vertical', token: 'menu', position: 'right' },
+  ],
+});
+
+const meta: Meta<CardComponent> = {
+  title: 'Molecules/Card',
+  component: CardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, CardComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Card configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Event emitted when the card or action is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-card
+
+A flexible card component supporting multiple layouts: native, tappable, checker (with checkbox), and complex (with header actions).
+
+### Usage
+
+\`\`\`html
+<val-card
+  [props]="{
+    type: 'native',
+    title: 'Card Title',
+    content: 'Card content goes here',
+    image: 'image-url.jpg',
+    footerActions: []
+  }"
+  (onClick)="handleClick($event)"
+></val-card>
+\`\`\`
+
+### Card Types
+
+- \`native\`: Standard card with optional footer actions
+- \`tappable\`: Clickable card that emits events
+- \`checker\`: Card with checkbox for selection
+- \`complex\`: Advanced card with header/footer actions
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CardComponent>;
+
+export const Native: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: nativeCardProps,
+    },
+  }),
+};
+
+export const NativeWithActions: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: nativeWithActionsProps,
+    },
+  }),
+};
+
+export const Tappable: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: tappableCardProps,
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A tappable card that emits a click event when clicked anywhere on the card.',
+      },
+    },
+  },
+};
+
+export const Checker: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: checkerCardProps,
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A card with a checkbox for selection. Useful for multi-select scenarios.',
+      },
+    },
+  },
+};
+
+export const CheckerSelected: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: checkerSelectedProps,
+    },
+  }),
+};
+
+export const Complex: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: complexCardProps,
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complex card with avatar, header text, action icons in header and footer.',
+      },
+    },
+  },
+};
+
+export const ComplexWithImage: Story = {
+  render: () => ({
+    template: `<val-card [props]="cardProps"></val-card>`,
+    props: {
+      cardProps: complexWithImageProps,
+    },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">Card Types</h3>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Native Card</p>
+          <val-card [props]="nativeCard"></val-card>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Tappable Card</p>
+          <val-card [props]="tappableCard"></val-card>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Checker Cards</p>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <val-card [props]="checkerA"></val-card>
+            <val-card [props]="checkerB"></val-card>
+          </div>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Complex Card (Social Post)</p>
+          <val-card [props]="complexCard"></val-card>
+        </div>
+      </div>
+    `,
+    props: {
+      nativeCard: showcaseNativeProps,
+      tappableCard: showcaseTappableProps,
+      checkerA: showcaseCheckerAProps,
+      checkerB: showcaseCheckerBProps,
+      complexCard: showcaseComplexProps,
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete showcase of all card types.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/card/types.ts

@@ -0,0 +1,36 @@
+import { ButtonMetadata, ToolbarAction } from '../../types';
+
+export enum CardType {
+  native = 'native',
+  checker = 'checker',
+  tappable = 'tappable',
+  complex = 'complex',
+}
+
+export interface CardClickEvent {
+  section: CardSection;
+  token?: string;
+}
+
+export enum CardSection {
+  headerLeft,
+  headerRight,
+  content,
+  footer,
+  footerExtra,
+}
+
+export interface CardMetadata {
+  token?: string;
+  type: CardType;
+  title?: string;
+  overtitle?: string;
+  content?: string;
+  image?: string;
+  footerActions: ButtonMetadata[];
+  footerComplexActions: ToolbarAction[];
+  leftActions: ToolbarAction[];
+  rightActions: ToolbarAction[];
+  selected: boolean;
+  headerText?: string;
+}