valtech-components 2.0.795 → 2.0.797

package/src/lib/components/molecules/phone-input/phone-input.stories.ts

@@ -1,229 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { PhoneInputComponent } from './phone-input.component';
-import { PhoneInputMetadata, COMMON_COUNTRY_CODES } from './types';
-
-const createPhoneInputProps = (overrides: Partial<PhoneInputMetadata> = {}): PhoneInputMetadata => ({
-  control: new FormControl(''),
-  token: 'phone-input',
-  label: 'Phone Number',
-  placeholder: 'Enter phone number',
-  defaultCountry: 'US',
-  showCountrySelector: true,
-  showFlag: true,
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createPhoneInputProps();
-const mexicoProps = createPhoneInputProps({
-  defaultCountry: 'MX',
-  label: 'Teléfono',
-  placeholder: 'Ingresa tu teléfono',
-});
-const spainProps = createPhoneInputProps({
-  defaultCountry: 'ES',
-  label: 'Teléfono',
-  placeholder: 'Introduce tu teléfono',
-});
-const withHintProps = createPhoneInputProps({
-  label: 'Contact Phone',
-  hint: 'We will use this to contact you',
-  placeholder: 'Your phone number',
-});
-const noSelectorProps = createPhoneInputProps({
-  showCountrySelector: false,
-  defaultCountry: 'US',
-  label: 'Phone (US only)',
-});
-const latinAmericaProps = createPhoneInputProps({
-  label: 'Phone',
-  preferredCountries: ['MX', 'AR', 'CO', 'CL', 'PE', 'BR'],
-  defaultCountry: 'MX',
-});
-
-// Showcase props
-const showcaseUSProps = createPhoneInputProps({
-  label: 'US Phone',
-  defaultCountry: 'US',
-});
-const showcaseMXProps = createPhoneInputProps({
-  label: 'Mexico Phone',
-  defaultCountry: 'MX',
-});
-const showcaseEUProps = createPhoneInputProps({
-  label: 'Europe Phone',
-  defaultCountry: 'ES',
-  preferredCountries: ['ES', 'FR', 'DE', 'IT', 'GB'],
-});
-
-const meta: Meta<PhoneInputComponent> = {
-  title: 'Molecules/PhoneInput',
-  component: PhoneInputComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ReactiveFormsModule, PhoneInputComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Phone input configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'PhoneInputMetadata',
-          detail: `{
-  control: FormControl<string>;
-  label?: string;
-  placeholder?: string;
-  defaultCountry?: string;
-  showCountrySelector?: boolean;
-  showFlag?: boolean;
-  preferredCountries?: string[];
-  hint?: string;
-  showErrors?: boolean;
-  errors?: Record<string, string>;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-phone-input
-
-A phone number input with country code selector.
-
-### Features
-
-- **Country Selector**: Choose from common country codes
-- **Flag Display**: Shows country flag emoji
-- **Format Validation**: Validates phone number format
-- **Preferred Countries**: Prioritize certain countries in the list
-- **Form Integration**: Works with Angular Reactive Forms
-
-### Usage
-
-\`\`\`html
-<val-phone-input
-  [props]="{
-    control: phoneControl,
-    label: 'Phone Number',
-    defaultCountry: 'MX',
-    showCountrySelector: true
-  }"
-  (phoneChange)="onPhoneChange($event)"
-></val-phone-input>
-\`\`\`
-
-### Available Countries
-
-${COMMON_COUNTRY_CODES.map(c => `- ${c.flag} ${c.name} (${c.dialCode})`).join('\n')}
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PhoneInputComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: defaultProps },
-  }),
-};
-
-export const Mexico: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: mexicoProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Phone input with Mexico as default country.',
-      },
-    },
-  },
-};
-
-export const Spain: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: spainProps },
-  }),
-};
-
-export const WithHint: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: withHintProps },
-  }),
-};
-
-export const NoCountrySelector: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: noSelectorProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Phone input without country selector, showing only the dial code.',
-      },
-    },
-  },
-};
-
-export const LatinAmericaPreferred: Story = {
-  render: () => ({
-    template: `<div style="max-width: 350px;"><val-phone-input [props]="phoneProps"></val-phone-input></div>`,
-    props: { phoneProps: latinAmericaProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Phone input with Latin American countries prioritized in the selector.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
-        <h3 style="margin: 0; font-family: system-ui;">Phone Inputs by Region</h3>
-
-        <div style="display: flex; flex-direction: column; gap: 24px;">
-          <div>
-            <h4 style="margin: 0 0 8px; font-family: system-ui; font-size: 14px; color: #666;">United States</h4>
-            <val-phone-input [props]="us"></val-phone-input>
-          </div>
-
-          <div>
-            <h4 style="margin: 0 0 8px; font-family: system-ui; font-size: 14px; color: #666;">Mexico</h4>
-            <val-phone-input [props]="mx"></val-phone-input>
-          </div>
-
-          <div>
-            <h4 style="margin: 0 0 8px; font-family: system-ui; font-size: 14px; color: #666;">Europe</h4>
-            <val-phone-input [props]="eu"></val-phone-input>
-          </div>
-        </div>
-      </div>
-    `,
-    props: {
-      us: showcaseUSProps,
-      mx: showcaseMXProps,
-      eu: showcaseEUProps,
-    },
-  }),
-};

package/src/lib/components/molecules/phone-input/types.ts

@@ -1,126 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-/**
- * Country code option for phone input.
- */
-export interface CountryCode {
-  /** ISO country code (e.g., 'US', 'MX', 'ES') */
-  code: string;
-  /** Country name */
-  name: string;
-  /** Dial code (e.g., '+1', '+52', '+34') */
-  dialCode: string;
-  /** Flag emoji (optional) */
-  flag?: string;
-  /** Phone number format pattern (optional) */
-  format?: string;
-}
-
-/**
- * Common country codes for quick access.
- */
-export const COMMON_COUNTRY_CODES: CountryCode[] = [
-  { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', format: '(XXX) XXX-XXXX' },
-  { code: 'MX', name: 'México', dialCode: '+52', flag: '🇲🇽', format: 'XX XXXX XXXX' },
-  { code: 'ES', name: 'España', dialCode: '+34', flag: '🇪🇸', format: 'XXX XXX XXX' },
-  { code: 'AR', name: 'Argentina', dialCode: '+54', flag: '🇦🇷', format: 'XX XXXX XXXX' },
-  { code: 'CO', name: 'Colombia', dialCode: '+57', flag: '🇨🇴', format: 'XXX XXX XXXX' },
-  { code: 'CL', name: 'Chile', dialCode: '+56', flag: '🇨🇱', format: 'X XXXX XXXX' },
-  { code: 'PE', name: 'Perú', dialCode: '+51', flag: '🇵🇪', format: 'XXX XXX XXX' },
-  { code: 'BR', name: 'Brasil', dialCode: '+55', flag: '🇧🇷', format: 'XX XXXXX XXXX' },
-  { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧', format: 'XXXX XXXXXX' },
-  { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪', format: 'XXX XXXXXXX' },
-  { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷', format: 'X XX XX XX XX' },
-  { code: 'IT', name: 'Italy', dialCode: '+39', flag: '🇮🇹', format: 'XXX XXX XXXX' },
-  { code: 'CA', name: 'Canada', dialCode: '+1', flag: '🇨🇦', format: '(XXX) XXX-XXXX' },
-];
-
-/**
- * Metadata for the phone input component.
- */
-export interface PhoneInputMetadata {
-  /** Form control for the complete phone number (with country code) */
-  control: FormControl<string>;
-  /** Separate control for just the number (without country code) */
-  numberControl?: FormControl<string>;
-  /** Separate control for country code selection */
-  countryControl?: FormControl<string>;
-  /** Unique token for the input */
-  token?: string;
-  /** Display label */
-  label?: string;
-  /** Field name */
-  name?: string;
-  /** Help text */
-  hint?: string;
-  /** Input placeholder for phone number */
-  placeholder?: string;
-  /** Field state */
-  state?: ComponentState;
-
-  // === Country code options ===
-  /** Available country codes */
-  countryCodes?: CountryCode[];
-  /** Default country code (ISO code, e.g., 'MX') */
-  defaultCountry?: string;
-  /** Show country selector */
-  showCountrySelector?: boolean;
-  /** Show country flag */
-  showFlag?: boolean;
-  /** Allow searching countries */
-  searchableCountries?: boolean;
-  /** Preferred countries to show at top */
-  preferredCountries?: string[];
-
-  // === Validation ===
-  /** Validate phone format */
-  validateFormat?: boolean;
-  /** Custom validation pattern */
-  pattern?: string;
-  /** Minimum digits */
-  minDigits?: number;
-  /** Maximum digits */
-  maxDigits?: number;
-
-  // === Styling ===
-  /** Component color */
-  color?: Color;
-  /** Fill style */
-  fill?: 'outline' | 'solid';
-  /** Label placement */
-  labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
-  /** Custom CSS class */
-  cssClass?: string;
-
-  // === Reactive content ===
-  /** Content key for reactive label */
-  labelContentKey?: string;
-  /** Content key for reactive placeholder */
-  placeholderContentKey?: string;
-  /** Content key for reactive hint */
-  hintContentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-
-  // === Validation display ===
-  /** Custom error messages */
-  errors?: Record<string, string>;
-  /** Show validation errors */
-  showErrors?: boolean;
-}
-
-/**
- * Event emitted when phone input changes.
- */
-export interface PhoneInputChangeEvent {
-  /** Complete phone number with country code */
-  fullNumber: string;
-  /** Phone number without country code */
-  number: string;
-  /** Selected country */
-  country: CountryCode | null;
-  /** Whether the number is valid */
-  isValid: boolean;
-}

package/src/lib/components/molecules/pill/pill.component.scss

@@ -1,35 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.fun-card {
-  z-index: 0;
-  position: relative;
-  margin-bottom: 8px;
-  cursor: pointer;
-  background: var(
-    --ion-card-background,
-    var(--ion-item-background, var(--ion-background-color, #fff))
-  );
-  display: flex;
-  border-radius: 48px;
-  align-items: start;
-  padding: 8px;
-  padding-left: 24px;
-  flex-direction: column;
-
-  &.hoverable {
-    transition:
-      transform 0.3s ease,
-      box-shadow 0.3s ease;
-
-    &:hover {
-      transform: scale(1.01);
-      @include box-shadow-medium;
-    }
-  }
-
-  @include box-shadow-small;
-}
-
-.bordered {
-  border: pxToRem(1) solid var(--ion-color-medium);
-}

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

@@ -1,89 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { PresetService } from '../../../services/presets';
-import { ThemeService } from '../../../services/theme.service';
-import { ActionHeaderComponent } from '../action-header/action-header.component';
-import { PillMetadata } from './types';
-
-@Component({
-  selector: 'val-pill',
-  standalone: true,
-  imports: [CommonModule, ActionHeaderComponent],
-  template: `
-    <div
-      [id]="resolvedProps.token"
-      class="fun-card"
-      [class.bordered]="resolvedProps.bordered"
-      [class.hoverable]="resolvedProps.hoverable"
-      [ngStyle]="{
-        background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
-      }"
-    >
-      <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
-    </div>
-  `,
-  styleUrls: ['./pill.component.scss'],
-})
-/**
- * val-pill
- *
- * A pill/card component with customizable background and content.
- * Supports presets for reusable configurations.
- *
- * @example With preset (recommended):
- * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
- *
- * @example Static (backwards compatible):
- * <val-pill [props]="{ background: '#fff', bordered: true, content: {...} }"></val-pill>
- *
- * @input preset: string - Name of preset to apply
- * @input props: PillMetadata - Configuration for the pill
- */
-export class PillComponent implements OnInit, OnChanges {
-  theme = inject(ThemeService);
-  private presets = inject(PresetService);
-
-  /**
-   * Preset name to apply. Presets define reusable pill configurations
-   * that can be registered at app level via provideValtechPresets().
-   *
-   * @example
-   * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
-   */
-  @Input() preset?: string;
-
-  /**
-   * Pill configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<PillMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: PillMetadata = {} as PillMetadata;
-
-  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('pill', this.preset) as Partial<PillMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as PillMetadata;
-  }
-}

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

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { PillComponent } from './pill.component';
-import { PillMetadata } from './types';
-
-const createPillProps = (overrides: Partial<PillMetadata> = {}) => ({
-  content: {
-    title: { content: 'Pill Title', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  ...overrides,
-} as PillMetadata);
-
-// Pre-create all props at module level
-const defaultProps = createPillProps();
-
-const borderedProps = createPillProps({
-  content: {
-    title: { content: 'Bordered Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  bordered: true,
-});
-
-const hoverableProps = createPillProps({
-  content: {
-    title: { content: 'Hoverable Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  hoverable: true,
-});
-
-const withBackgroundProps = createPillProps({
-  content: {
-    title: { content: 'Custom Background', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  background: '#e3f2fd',
-});
-
-const borderedHoverableProps = createPillProps({
-  content: {
-    title: { content: 'Interactive Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const withActionProps = createPillProps({
-  content: {
-    title: { content: 'Actionable Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: 'Learn More', color: 'primary', fill: 'clear', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-});
-
-// Showcase props
-const showcaseFeatureProps = createPillProps({
-  content: {
-    title: { content: 'New Feature', size: 'medium' as const, color: 'primary' },
-    action: { text: 'Explore', color: 'primary', fill: 'solid', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const showcaseInfoProps = createPillProps({
-  content: {
-    title: { content: 'Quick Tip', size: 'medium' as const, color: 'warning' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  background: '#fff8e1',
-  bordered: true,
-});
-
-const showcaseActionProps = createPillProps({
-  content: {
-    title: { content: 'Upgrade Available', size: 'medium' as const, color: 'dark' },
-    action: { text: 'Upgrade', color: 'success', fill: 'solid', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const meta: Meta<PillComponent> = {
-  title: 'Molecules/Pill',
-  component: PillComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, PillComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Pill configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'PillMetadata',
-          detail: `{
-  token?: string;
-  content: ActionHeaderMetadata;
-  bordered?: boolean;
-  background?: string;
-  hoverable?: boolean;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-pill
-
-A compact card-like component for displaying condensed information.
-
-### Features
-
-- **Action Header**: Title and action button
-- **Bordered**: Optional border styling
-- **Hoverable**: Optional hover effects
-- **Custom Background**: Customizable background color
-- **Dark Mode**: Automatic dark mode support
-
-### Usage
-
-\`\`\`html
-<val-pill
-  [props]="{
-    content: {
-      title: { content: 'Pill Title', size: 'medium', color: 'dark' },
-      action: { text: 'Action', color: 'primary' }
-    },
-    bordered: true,
-    hoverable: true
-  }"
-></val-pill>
-\`\`\`
-
-### Use Cases
-
-- Feature highlights
-- Quick tips
-- Notification items
-- List items with actions
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PillComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: defaultProps },
-  }),
-};
-
-export const Bordered: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: borderedProps },
-  }),
-};
-
-export const Hoverable: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: hoverableProps },
-  }),
-};
-
-export const CustomBackground: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: withBackgroundProps },
-  }),
-};
-
-export const BorderedHoverable: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: borderedHoverableProps },
-  }),
-};
-
-export const WithAction: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: withActionProps },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-        <h3 style="margin: 0; font-family: system-ui;">Pill Variants</h3>
-
-        <val-pill [props]="feature"></val-pill>
-        <val-pill [props]="info"></val-pill>
-        <val-pill [props]="action"></val-pill>
-      </div>
-    `,
-    props: {
-      feature: showcaseFeatureProps,
-      info: showcaseInfoProps,
-      action: showcaseActionProps,
-    },
-  }),
-};