valtech-components 2.0.690 → 2.0.691

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

@@ -0,0 +1,102 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Size options for action-card
+ */
+export type ActionCardSize = 'small' | 'medium' | 'large';
+
+/**
+ * Badge configuration for action-card
+ */
+export interface ActionCardBadge {
+  /** Badge text */
+  text: string;
+  /** Badge color (Ionic color name or CSS color) */
+  color?: Color | string;
+  /** Badge background color */
+  backgroundColor?: Color | string;
+}
+
+/**
+ * Icon configuration - supports multiple icon sources
+ */
+export interface ActionCardIcon {
+  /** Ionicon name (e.g., 'settings-outline', 'home') */
+  ionicon?: string;
+  /** SVG path data for custom icons */
+  svgPath?: string;
+  /** Image URL for custom images */
+  imageUrl?: string;
+  /** Icon color (Ionic color name or CSS color) */
+  color?: Color | string;
+  /** Icon background color */
+  backgroundColor?: Color | string;
+}
+
+/**
+ * Click event emitted by action-card
+ */
+export interface ActionCardClickEvent {
+  /** Token identifier for the card */
+  token?: string;
+  /** Whether navigation was triggered (if routerLink was set) */
+  navigated?: boolean;
+}
+
+/**
+ * Metadata for val-action-card component
+ */
+export interface ActionCardMetadata {
+  /** Unique token for identification */
+  token?: string;
+
+  /** Icon configuration object */
+  icon?: ActionCardIcon;
+
+  /** Card title (static text) */
+  title: string;
+  /** i18n key for title */
+  titleKey?: string;
+  /** Card description (static text) */
+  description?: string;
+  /** i18n key for description */
+  descriptionKey?: string;
+  /** i18n namespace for translations */
+  i18nNamespace?: string;
+
+  /** Card size variant */
+  size?: ActionCardSize;
+  /** Show border */
+  bordered?: boolean;
+  /** Border color */
+  borderColor?: Color | string;
+  /** Card background color */
+  backgroundColor?: Color | string;
+  /** Show shadow */
+  shadowed?: boolean;
+
+  /** Disabled state */
+  disabled?: boolean;
+  /** Router link for navigation */
+  routerLink?: string | any[];
+  /** External URL (opens in new tab/browser) */
+  href?: string;
+
+  /** Badge configuration */
+  badge?: ActionCardBadge;
+  /** Show chevron icon on the right */
+  showChevron?: boolean;
+}
+
+/**
+ * Default values for ActionCardMetadata
+ */
+export const ACTION_CARD_DEFAULTS: Required<
+  Pick<ActionCardMetadata, 'size' | 'bordered' | 'shadowed' | 'disabled' | 'showChevron'>
+> = {
+  size: 'medium',
+  bordered: false,
+  shadowed: true,
+  disabled: false,
+  showChevron: false,
+};

package/src/lib/components/molecules/action-header/action-header.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { DisplayComponent } from '../../atoms/display/display.component';
+import { ActionHeaderMetadata } from './types';
+
+@Component({
+  selector: 'val-action-header',
+  standalone: true,
+  imports: [CommonModule, DisplayComponent, ButtonComponent],
+  template: `
+    <section class="header-content-container">
+      <val-display [props]="props.title" />
+      <val-button [props]="props.action" />
+    </section>
+  `,
+  styles: `
+    .header-content-container {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  `,
+})
+export class ActionHeaderComponent {
+  @Input() props: ActionHeaderMetadata;
+}

package/src/lib/components/molecules/action-header/action-header.stories.ts

@@ -0,0 +1,481 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ActionHeaderComponent } from './action-header.component';
+import { ComponentStates } from '../../types';
+import { ActionHeaderMetadata } from './types';
+
+const meta: Meta<ActionHeaderComponent> = {
+  title: 'Molecules/Action Header',
+  component: ActionHeaderComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ActionHeaderComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Action header configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-action-header
+
+A header component that displays a title with an action button. Commonly used at the top of pages or sections to provide a heading with a related action.
+
+### Usage
+
+\`\`\`html
+<val-action-header [props]="actionHeaderConfig"></val-action-header>
+\`\`\`
+
+### Features
+
+- Flexible title sizing (small, medium, large, xlarge)
+- Customizable colors using Ionic color palette
+- Action button with full ButtonMetadata support
+- Responsive layout with space-between alignment
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ActionHeaderComponent>;
+
+const createProps = (overrides: Partial<ActionHeaderMetadata> = {}): ActionHeaderMetadata => ({
+  title: {
+    size: 'large',
+    color: 'dark',
+    content: 'Page Title',
+  },
+  action: {
+    text: 'Action',
+    color: 'primary',
+    state: ComponentStates.ENABLED,
+    type: 'button',
+    fill: 'solid',
+    size: 'default',
+  },
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const WithSmallTitle: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'small',
+        color: 'medium',
+        content: 'Small Section Title',
+      },
+      action: {
+        text: 'View All',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'clear',
+        size: 'small',
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with a small title, useful for subsections.',
+      },
+    },
+  },
+};
+
+export const WithMediumTitle: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'medium',
+        color: 'dark',
+        content: 'Medium Section',
+      },
+      action: {
+        text: 'Edit',
+        color: 'secondary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'outline',
+        size: 'small',
+      },
+    }),
+  },
+};
+
+export const WithLargeTitle: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Dashboard',
+      },
+      action: {
+        text: 'Add New',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'solid',
+        size: 'default',
+        icon: {
+          name: 'add-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large title with an action button that includes an icon.',
+      },
+    },
+  },
+};
+
+export const WithXLargeTitle: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'xlarge',
+        color: 'primary',
+        content: 'Welcome Back',
+      },
+      action: {
+        text: 'Settings',
+        color: 'medium',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'clear',
+        size: 'default',
+        icon: {
+          name: 'settings-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Extra large title for main page headers.',
+      },
+    },
+  },
+};
+
+export const DisabledAction: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Locked Section',
+      },
+      action: {
+        text: 'Locked',
+        color: 'medium',
+        state: ComponentStates.DISABLED,
+        type: 'button',
+        fill: 'solid',
+        size: 'default',
+        icon: {
+          name: 'lock-closed-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with a disabled button, useful when an action is temporarily unavailable.',
+      },
+    },
+  },
+};
+
+export const WorkingState: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Syncing Data',
+      },
+      action: {
+        text: 'Syncing...',
+        color: 'primary',
+        state: ComponentStates.WORKING,
+        type: 'button',
+        fill: 'solid',
+        size: 'default',
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with a button in working/loading state.',
+      },
+    },
+  },
+};
+
+export const DangerAction: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Danger Zone',
+      },
+      action: {
+        text: 'Delete All',
+        color: 'danger',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'solid',
+        size: 'default',
+        icon: {
+          name: 'trash-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header for dangerous or destructive actions.',
+      },
+    },
+  },
+};
+
+export const SuccessAction: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Completed Tasks',
+      },
+      action: {
+        text: 'Mark Done',
+        color: 'success',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'solid',
+        size: 'default',
+        icon: {
+          name: 'checkmark-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+};
+
+export const OutlineButton: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'My Profile',
+      },
+      action: {
+        text: 'Edit Profile',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'outline',
+        size: 'default',
+      },
+    }),
+  },
+};
+
+export const ClearButton: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Recent Activity',
+      },
+      action: {
+        text: 'See All',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'clear',
+        size: 'default',
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with a clear/text-only button style.',
+      },
+    },
+  },
+};
+
+export const IconOnlyButton: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'dark',
+        content: 'Notifications',
+      },
+      action: {
+        text: '',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'clear',
+        size: 'default',
+        icon: {
+          name: 'refresh-outline',
+          slot: 'start',
+        },
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with an icon-only action button.',
+      },
+    },
+  },
+};
+
+export const ColoredTitle: Story = {
+  args: {
+    props: createProps({
+      title: {
+        size: 'large',
+        color: 'primary',
+        content: 'Featured Content',
+      },
+      action: {
+        text: 'Explore',
+        color: 'primary',
+        state: ComponentStates.ENABLED,
+        type: 'button',
+        fill: 'outline',
+        size: 'default',
+      },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Action header with a colored title to draw attention.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Size Variants</h3>
+
+        <val-action-header [props]="smallProps"></val-action-header>
+        <val-action-header [props]="mediumProps"></val-action-header>
+        <val-action-header [props]="largeProps"></val-action-header>
+        <val-action-header [props]="xlargeProps"></val-action-header>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Button Variants</h3>
+
+        <val-action-header [props]="solidProps"></val-action-header>
+        <val-action-header [props]="outlineProps"></val-action-header>
+        <val-action-header [props]="clearProps"></val-action-header>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Color Variants</h3>
+
+        <val-action-header [props]="primaryProps"></val-action-header>
+        <val-action-header [props]="secondaryProps"></val-action-header>
+        <val-action-header [props]="successProps"></val-action-header>
+        <val-action-header [props]="dangerProps"></val-action-header>
+      </div>
+    `,
+    props: {
+      smallProps: createProps({
+        title: { size: 'small', color: 'medium', content: 'Small Title' },
+        action: { text: 'Action', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'clear', size: 'small' },
+      }),
+      mediumProps: createProps({
+        title: { size: 'medium', color: 'dark', content: 'Medium Title' },
+        action: { text: 'Action', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'clear', size: 'small' },
+      }),
+      largeProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Large Title' },
+        action: { text: 'Action', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      xlargeProps: createProps({
+        title: { size: 'xlarge', color: 'dark', content: 'Extra Large Title' },
+        action: { text: 'Action', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      solidProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Solid Button' },
+        action: { text: 'Solid', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      outlineProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Outline Button' },
+        action: { text: 'Outline', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'outline', size: 'default' },
+      }),
+      clearProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Clear Button' },
+        action: { text: 'Clear', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'clear', size: 'default' },
+      }),
+      primaryProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Primary Action' },
+        action: { text: 'Primary', color: 'primary', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      secondaryProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Secondary Action' },
+        action: { text: 'Secondary', color: 'secondary', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      successProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Success Action' },
+        action: { text: 'Success', color: 'success', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+      dangerProps: createProps({
+        title: { size: 'large', color: 'dark', content: 'Danger Action' },
+        action: { text: 'Danger', color: 'danger', state: ComponentStates.ENABLED, type: 'button', fill: 'solid', size: 'default' },
+      }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of all action header variants including sizes, button styles, and colors.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/action-header/types.ts

@@ -0,0 +1,7 @@
+import { DisplayMetadata } from '../../atoms/display/types';
+import { ButtonMetadata } from '../../types';
+
+export type ActionHeaderMetadata = {
+  title: DisplayMetadata;
+  action: ButtonMetadata;
+};