valtech-components 2.0.794 → 2.0.795

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

@@ -0,0 +1,229 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,35 @@
+@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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,219 @@
+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,
+    },
+  }),
+};