valtech-components 2.0.691 → 2.0.692

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

@@ -1,236 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { AccordionComponent } from './accordion.component';
-
-const meta: Meta<AccordionComponent> = {
-  title: 'Molecules/Accordion',
-  component: AccordionComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, AccordionComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Accordion configuration object',
-      control: 'object',
-    },
-    accordionChange: {
-      action: 'accordionChange',
-      description: 'Event emitted when accordion state changes',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-accordion
-
-An accordion component for collapsible content sections. Perfect for FAQs, settings panels, and expandable content areas.
-
-### Usage
-
-\`\`\`html
-<val-accordion [props]="{
-  items: [
-    { value: 'item1', header: 'Section 1', content: 'Content for section 1' },
-    { value: 'item2', header: 'Section 2', content: 'Content for section 2' }
-  ],
-  multiple: false
-}" (accordionChange)="onAccordionChange($event)"></val-accordion>
-\`\`\`
-
-### Features
-
-- Single or multiple expansion mode
-- Icons support for each item
-- Disabled items
-- Readonly mode support
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<AccordionComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'item1', header: 'First Section', content: 'This is the content of the first section.' },
-        { value: 'item2', header: 'Second Section', content: 'This is the content of the second section.' },
-        { value: 'item3', header: 'Third Section', content: 'This is the content of the third section.' },
-      ],
-      multiple: false,
-    },
-  },
-};
-
-export const WithIcons: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'help', header: 'Help & Support', content: 'Get help with your account and find answers to common questions.', icon: 'help-circle' },
-        { value: 'info', header: 'About Us', content: 'Learn more about our company and mission.', icon: 'information-circle' },
-        { value: 'docs', header: 'Documentation', content: 'Access technical documentation and guides.', icon: 'document-text' },
-      ],
-      multiple: false,
-      color: 'light',
-    },
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'faq1', header: 'What is this component?', content: 'This is a reusable accordion component built with Ionic.' },
-        { value: 'faq2', header: 'How do I use it?', content: 'Simply pass the props object with your items configuration.' },
-        { value: 'faq3', header: 'Can I have multiple open?', content: 'Yes! Set multiple: true to allow multiple sections to be open.' },
-      ],
-      multiple: true,
-      value: ['faq1', 'faq2'],
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'With `multiple: true`, users can expand multiple sections at once.',
-      },
-    },
-  },
-};
-
-export const WithDisabledItem: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'active1', header: 'Active Section', content: 'This section can be expanded.' },
-        { value: 'disabled', header: 'Disabled Section (Coming Soon)', content: 'This content is not available yet.', disabled: true },
-        { value: 'active2', header: 'Another Active Section', content: 'This section can also be expanded.' },
-      ],
-      multiple: false,
-    },
-  },
-};
-
-export const PreExpanded: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'intro', header: 'Introduction', content: 'Welcome to our application! This section is expanded by default.' },
-        { value: 'features', header: 'Features', content: 'Discover all the amazing features we offer.' },
-        { value: 'pricing', header: 'Pricing', content: 'Check out our competitive pricing plans.' },
-      ],
-      multiple: false,
-      value: 'intro',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Use the `value` prop to set initially expanded item(s).',
-      },
-    },
-  },
-};
-
-export const FAQStyle: Story = {
-  args: {
-    props: {
-      items: [
-        {
-          value: 'faq1',
-          header: 'How do I reset my password?',
-          content: 'Click on "Forgot Password" on the login page, enter your email, and follow the instructions sent to your inbox.',
-          icon: 'help-circle'
-        },
-        {
-          value: 'faq2',
-          header: 'Can I change my subscription plan?',
-          content: 'Yes, you can upgrade or downgrade your plan at any time from your account settings.',
-          icon: 'help-circle'
-        },
-        {
-          value: 'faq3',
-          header: 'What payment methods do you accept?',
-          content: 'We accept all major credit cards, PayPal, and bank transfers.',
-          icon: 'help-circle'
-        },
-        {
-          value: 'faq4',
-          header: 'How do I contact support?',
-          content: 'You can reach our support team via email at support@example.com or through the chat widget.',
-          icon: 'help-circle'
-        },
-      ],
-      multiple: false,
-      color: 'light',
-    },
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    props: {
-      items: [
-        { value: 'item1', header: 'Expanded Item', content: 'This accordion is in readonly mode - items cannot be collapsed or expanded.' },
-        { value: 'item2', header: 'Another Item', content: 'This item is also locked.' },
-      ],
-      multiple: true,
-      value: ['item1'],
-      readonly: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Readonly mode prevents users from expanding or collapsing items.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 600px;">
-        <h3 style="margin: 0; font-family: system-ui;">Basic Accordion</h3>
-        <val-accordion [props]="{
-          items: [
-            { value: 'basic1', header: 'Section One', content: 'Content for the first section goes here.' },
-            { value: 'basic2', header: 'Section Two', content: 'Content for the second section goes here.' },
-            { value: 'basic3', header: 'Section Three', content: 'Content for the third section goes here.' }
-          ],
-          multiple: false
-        }"></val-accordion>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Icons</h3>
-        <val-accordion [props]="{
-          items: [
-            { value: 'icon1', header: 'Settings', content: 'Configure your preferences here.', icon: 'settings' },
-            { value: 'icon2', header: 'Profile', content: 'Manage your profile information.', icon: 'person' },
-            { value: 'icon3', header: 'Notifications', content: 'Control your notification settings.', icon: 'notifications' }
-          ],
-          multiple: false,
-          color: 'light'
-        }"></val-accordion>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">FAQ Example</h3>
-        <val-accordion [props]="{
-          items: [
-            { value: 'q1', header: 'What is your return policy?', content: 'We offer a 30-day return policy on all items.', icon: 'help-circle' },
-            { value: 'q2', header: 'How long does shipping take?', content: 'Standard shipping takes 3-5 business days.', icon: 'help-circle' },
-            { value: 'q3', header: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.', icon: 'help-circle' }
-          ],
-          multiple: true,
-          color: 'light'
-        }"></val-accordion>
-      </div>
-    `,
-  }),
-};

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

@@ -1,49 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Single accordion item configuration.
- */
-export interface AccordionItemMetadata {
-  /** Unique value identifier */
-  value: string;
-  /** Header text (static) */
-  header?: string;
-  /** Header icon */
-  icon?: string;
-  /** Content text */
-  content?: string;
-  /** Whether the item is disabled */
-  disabled?: boolean;
-  /** Reactive content key for header */
-  headerKey?: string;
-  /** Reactive content key for content */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback for header */
-  headerFallback?: string;
-  /** Fallback for content */
-  contentFallback?: string;
-}
-
-/**
- * Metadata for the accordion component.
- */
-export interface AccordionMetadata {
-  /** Accordion items */
-  items: AccordionItemMetadata[];
-  /** Allow multiple items open at once */
-  multiple?: boolean;
-  /** Currently expanded item value(s) */
-  value?: string | string[];
-  /** Accordion color */
-  color?: Color;
-  /** Expand icon position */
-  expandIconSlot?: 'start' | 'end';
-  /** Readonly mode (no expand/collapse) */
-  readonly?: boolean;
-  /** Unique token identifier */
-  token?: string;
-  /** Mode style */
-  mode?: 'ios' | 'md';
-}

package/src/lib/components/molecules/action-card/action-card.component.scss

@@ -1,226 +0,0 @@
-:host {
-  display: block;
-}
-
-.action-card {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: var(--card-bg, var(--ion-card-background, var(--ion-background-color)));
-  border-radius: 12px;
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-  text-decoration: none;
-  overflow: hidden;
-
-  // Ripple effect container
-  --ripple-color: var(--ion-color-primary);
-
-  // Size variants
-  &--small {
-    padding: 0.75rem;
-    gap: 0.75rem;
-
-    .action-card__icon {
-      width: 36px;
-      height: 36px;
-      font-size: 18px;
-      border-radius: 8px;
-
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-    }
-
-    .action-card__title {
-      font-size: 0.9rem;
-    }
-
-    .action-card__description {
-      font-size: 0.8rem;
-    }
-  }
-
-  &--medium {
-    padding: 1rem;
-    gap: 1rem;
-
-    .action-card__icon {
-      width: 48px;
-      height: 48px;
-      font-size: 24px;
-      border-radius: 10px;
-
-      svg {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .action-card__title {
-      font-size: 1rem;
-    }
-
-    .action-card__description {
-      font-size: 0.875rem;
-    }
-  }
-
-  &--large {
-    padding: 1.25rem;
-    gap: 1.25rem;
-
-    .action-card__icon {
-      width: 56px;
-      height: 56px;
-      font-size: 28px;
-      border-radius: 12px;
-
-      svg {
-        width: 28px;
-        height: 28px;
-      }
-    }
-
-    .action-card__title {
-      font-size: 1.1rem;
-    }
-
-    .action-card__description {
-      font-size: 0.9rem;
-    }
-  }
-
-  // Bordered variant
-  &--bordered {
-    border: 1px solid var(--card-border-color, var(--ion-color-light-shade));
-  }
-
-  // Shadow variant
-  &--shadowed {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  }
-
-  // Clickable (hover/focus states)
-  &--clickable {
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--ion-color-primary);
-      outline-offset: 2px;
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Badge
-  &__badge {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    padding: 2px 8px;
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    border-radius: 10px;
-    z-index: 1;
-  }
-
-  // Icon container
-  &__icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ion-icon {
-      font-size: inherit;
-    }
-
-    svg {
-      display: block;
-    }
-
-    &-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 8px;
-    }
-  }
-
-  // Content area
-  &__content {
-    flex: 1;
-    min-width: 0; // Allow text truncation
-  }
-
-  &__title {
-    margin: 0 0 0.25rem;
-    font-weight: 600;
-    color: var(--ion-text-color);
-    line-height: 1.3;
-  }
-
-  &__description {
-    margin: 0;
-    color: var(--ion-color-medium);
-    line-height: 1.4;
-  }
-
-  // Chevron
-  &__chevron {
-    flex-shrink: 0;
-    font-size: 1.25rem;
-    color: var(--ion-color-medium);
-    transition: transform 0.2s ease;
-  }
-
-  &--clickable:hover &__chevron {
-    transform: translateX(4px);
-  }
-}
-
-// Dark mode support
-@media (prefers-color-scheme: dark) {
-  .action-card {
-    &--shadowed {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    &--clickable:hover {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-    }
-  }
-}
-
-// Ionic dark mode class support
-:host-context(.dark),
-:host-context(body.dark),
-:host-context([data-theme="dark"]) {
-  .action-card {
-    &--shadowed {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    &--clickable:hover {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-    }
-  }
-}