valtech-components 2.0.691 → 2.0.692

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

@@ -1,354 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { ReactiveFormsModule, FormControl } from '@angular/forms';
-import {
-  IonSelect,
-  IonSelectOption,
-  IonNote,
-  IonIcon,
-} from '@ionic/angular/standalone';
-import { Subscription } from 'rxjs';
-import { addIcons } from 'ionicons';
-import { callOutline, chevronDownOutline } from 'ionicons/icons';
-import { PresetService } from '../../../services/presets';
-import { ComponentStates } from '../../types';
-import { PhoneInputMetadata, PhoneInputChangeEvent, CountryCode, COMMON_COUNTRY_CODES } from './types';
-
-addIcons({ callOutline, chevronDownOutline });
-
-@Component({
-  selector: 'val-phone-input',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, IonSelect, IonSelectOption, IonNote, IonIcon],
-  template: `
-    <div class="phone-input-container" [class]="resolvedProps.cssClass" [class.has-error]="hasError">
-      @if (resolvedProps.label) {
-        <label class="phone-label">{{ getLabel() }}</label>
-      }
-
-      <div class="phone-input-wrapper" [class.disabled]="resolvedProps.state === states.DISABLED">
-        @if (resolvedProps.showCountrySelector !== false) {
-          <div class="country-selector">
-            <ion-select
-              [formControl]="internalCountryControl"
-              interface="popover"
-              [interfaceOptions]="{ cssClass: 'country-select-popover' }"
-              [disabled]="resolvedProps.state === states.DISABLED"
-              (ionChange)="onCountryChange($event)"
-            >
-              @for (country of getCountryList(); track country.code) {
-                <ion-select-option [value]="country.code">
-                  @if (resolvedProps.showFlag !== false) {
-                    <span class="flag">{{ country.flag }}</span>
-                  }
-                  {{ country.dialCode }}
-                </ion-select-option>
-              }
-            </ion-select>
-          </div>
-        } @else {
-          <div class="dial-code-display">
-            {{ getSelectedCountry()?.dialCode || '+1' }}
-          </div>
-        }
-
-        <div class="number-input">
-          <ion-icon name="call-outline" aria-hidden="true" class="phone-icon"></ion-icon>
-          <input
-            type="tel"
-            inputmode="tel"
-            [formControl]="internalNumberControl"
-            [placeholder]="getPlaceholder()"
-            [attr.disabled]="resolvedProps.state === states.DISABLED ? true : null"
-            [attr.readonly]="resolvedProps.state === states.WORKING ? true : null"
-            [maxLength]="resolvedProps.maxDigits || 15"
-            (input)="onNumberInputNative($event)"
-            (blur)="onBlur()"
-            class="phone-native-input"
-          />
-        </div>
-      </div>
-
-      @if (resolvedProps.hint && !hasError) {
-        <ion-note class="hint">{{ getHint() }}</ion-note>
-      }
-
-      @if (hasError && resolvedProps.showErrors) {
-        <ion-note class="error-message" color="danger">
-          {{ getErrorMessage() }}
-        </ion-note>
-      }
-    </div>
-  `,
-  styleUrls: ['./phone-input.component.scss'],
-})
-/**
- * val-phone-input
- *
- * A phone number input with country code selector.
- *
- * @example Basic usage
- * ```html
- * <val-phone-input
- *   [props]="{
- *     control: phoneControl,
- *     placeholder: 'Phone number',
- *     defaultCountry: 'MX'
- *   }"
- * ></val-phone-input>
- * ```
- *
- * @example With custom countries
- * ```html
- * <val-phone-input
- *   [props]="{
- *     control: phoneControl,
- *     label: 'Phone',
- *     countryCodes: myCountryCodes,
- *     preferredCountries: ['MX', 'US', 'ES'],
- *     showErrors: true
- *   }"
- *   (phoneChange)="onPhoneChange($event)"
- * ></val-phone-input>
- * ```
- */
-export class PhoneInputComponent implements OnInit, OnChanges, OnDestroy {
-  private presets = inject(PresetService);
-
-  /**
-   * Preset name to apply. Presets define reusable phone input configurations
-   * that can be registered at app level via provideValtechPresets().
-   *
-   * @example
-   * <val-phone-input preset="form-field" [props]="{ control: ctrl }"></val-phone-input>
-   */
-  @Input() preset?: string;
-
-  /**
-   * Phone input configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<PhoneInputMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: PhoneInputMetadata = {} as PhoneInputMetadata;
-
-  @Output() phoneChange = new EventEmitter<PhoneInputChangeEvent>();
-
-  states = ComponentStates;
-
-  internalCountryControl = new FormControl<string>('');
-  internalNumberControl = new FormControl<string>('');
-
-  private valueSubscription: Subscription | null = null;
-  private isInternalUpdate = false;
-
-  ngOnInit(): void {
-    this.resolveProps();
-    this.setupComponent();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['preset'] || changes['props']) {
-      this.resolveProps();
-      this.setupComponent();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.valueSubscription?.unsubscribe();
-  }
-
-  /**
-   * Merge preset configuration with explicit props.
-   * Explicit props take precedence over preset values.
-   */
-  private resolveProps(): void {
-    const presetProps = this.preset
-      ? (this.presets.get('phoneInput', this.preset) as Partial<PhoneInputMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as PhoneInputMetadata;
-  }
-
-  private setupComponent(): void {
-    // Set default country
-    const defaultCountry = this.resolvedProps.defaultCountry || 'US';
-    this.internalCountryControl.setValue(defaultCountry);
-
-    // Sync with external controls if provided
-    if (this.resolvedProps.countryControl) {
-      this.internalCountryControl = this.resolvedProps.countryControl;
-    }
-    if (this.resolvedProps.numberControl) {
-      this.internalNumberControl = this.resolvedProps.numberControl;
-    }
-
-    // Parse initial value from main control
-    if (this.resolvedProps.control?.value) {
-      this.parsePhoneNumber(this.resolvedProps.control.value);
-    }
-
-    // Subscribe to main control changes
-    this.valueSubscription?.unsubscribe();
-    this.valueSubscription = this.resolvedProps.control?.valueChanges.subscribe(value => {
-      if (value && !this.isInternalUpdate) {
-        this.parsePhoneNumber(value);
-      }
-    }) || null;
-  }
-
-  private parsePhoneNumber(value: string): void {
-    if (!value) return;
-
-    // Try to extract country code
-    const countries = this.getCountryList();
-    for (const country of countries) {
-      if (value.startsWith(country.dialCode)) {
-        this.internalCountryControl.setValue(country.code);
-        this.internalNumberControl.setValue(value.substring(country.dialCode.length).trim());
-        return;
-      }
-    }
-
-    // If no country code found, just set the number
-    this.internalNumberControl.setValue(value);
-  }
-
-  getLabel(): string {
-    return this.resolvedProps.label || '';
-  }
-
-  getPlaceholder(): string {
-    // Use format from selected country if available
-    const country = this.getSelectedCountry();
-    if (country?.format && !this.resolvedProps.placeholder) {
-      return country.format;
-    }
-    return this.resolvedProps.placeholder || '';
-  }
-
-  getHint(): string {
-    return this.resolvedProps.hint || '';
-  }
-
-  getCountryList(): CountryCode[] {
-    const countries = this.resolvedProps.countryCodes || COMMON_COUNTRY_CODES;
-
-    // Sort by preferred countries first
-    if (this.resolvedProps.preferredCountries?.length) {
-      const preferred = this.resolvedProps.preferredCountries;
-      return [
-        ...countries.filter(c => preferred.includes(c.code)),
-        ...countries.filter(c => !preferred.includes(c.code)),
-      ];
-    }
-
-    return countries;
-  }
-
-  getSelectedCountry(): CountryCode | null {
-    const code = this.internalCountryControl.value;
-    return this.getCountryList().find(c => c.code === code) || null;
-  }
-
-  get hasError(): boolean {
-    return !!(this.resolvedProps.control?.touched && this.resolvedProps.control?.invalid);
-  }
-
-  getErrorMessage(): string {
-    if (!this.resolvedProps.control?.errors || !this.resolvedProps.errors) {
-      return '';
-    }
-
-    const errorKeys = Object.keys(this.resolvedProps.control.errors);
-    for (const key of errorKeys) {
-      if (this.resolvedProps.errors[key]) {
-        return this.resolvedProps.errors[key];
-      }
-    }
-
-    return '';
-  }
-
-  onCountryChange(event: CustomEvent): void {
-    this.updateMainControl();
-  }
-
-  onNumberInput(event: CustomEvent): void {
-    // Filter non-numeric characters except spaces and dashes
-    let value = (event.detail.value || '').replace(/[^\d\s\-]/g, '');
-
-    // Apply max digits limit
-    if (this.resolvedProps.maxDigits) {
-      const digitsOnly = value.replace(/\D/g, '');
-      if (digitsOnly.length > this.resolvedProps.maxDigits) {
-        value = digitsOnly.substring(0, this.resolvedProps.maxDigits);
-      }
-    }
-
-    this.internalNumberControl.setValue(value);
-    this.updateMainControl();
-  }
-
-  onNumberInputNative(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    // Filter non-numeric characters except spaces and dashes
-    let value = (input.value || '').replace(/[^\d\s\-]/g, '');
-
-    // Apply max digits limit
-    if (this.resolvedProps.maxDigits) {
-      const digitsOnly = value.replace(/\D/g, '');
-      if (digitsOnly.length > this.resolvedProps.maxDigits) {
-        value = digitsOnly.substring(0, this.resolvedProps.maxDigits);
-      }
-    }
-
-    this.internalNumberControl.setValue(value);
-    this.updateMainControl();
-  }
-
-  onBlur(): void {
-    this.resolvedProps.control?.markAsTouched();
-  }
-
-  private updateMainControl(): void {
-    const country = this.getSelectedCountry();
-    const number = this.internalNumberControl.value || '';
-    const fullNumber = country ? `${country.dialCode}${number}` : number;
-
-    this.isInternalUpdate = true;
-    this.resolvedProps.control?.setValue(fullNumber);
-    this.isInternalUpdate = false;
-
-    // Emit change event
-    const digitsOnly = number.replace(/\D/g, '');
-    const isValid = this.validateNumber(digitsOnly);
-
-    this.phoneChange.emit({
-      fullNumber,
-      number,
-      country,
-      isValid,
-    });
-  }
-
-  private validateNumber(digitsOnly: string): boolean {
-    if (this.resolvedProps.minDigits && digitsOnly.length < this.resolvedProps.minDigits) {
-      return false;
-    }
-    if (this.resolvedProps.maxDigits && digitsOnly.length > this.resolvedProps.maxDigits) {
-      return false;
-    }
-    if (this.resolvedProps.pattern) {
-      const regex = new RegExp(this.resolvedProps.pattern);
-      return regex.test(digitsOnly);
-    }
-    // Default: at least 7 digits
-    return digitsOnly.length >= 7;
-  }
-}

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;
-}