@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Input-Text-PhoneNumber/platforms/web/InputTextPhoneNumber.web.ts

@@ -1,393 +0,0 @@
-/**
- * Input-Text-PhoneNumber Web Component
- * 
- * Web platform implementation of the Input-Text-PhoneNumber component using Web Components.
- * Extends Input-Text-Base with phone number formatting and validation functionality.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-PhoneNumber
- * 
- * Features:
- * - Inherits all Input-Text-Base features (float label, validation states, etc.)
- * - Phone number format validation on blur
- * - Auto-formatting as user types
- * - International format support
- * - Browser phone autocomplete support
- * - Phone keyboard type on mobile
- * - Custom validation function support
- * 
- * Behavioral Contracts:
- * - validates_phone_format: Validates phone against country-specific patterns
- * - provides_phone_formatting: Formats phone numbers as user types
- * - supports_international_formats: Handles multiple country formats
- * - inherits_all_input_text_base_contracts: All base contracts apply
- * 
- * Requirements: R4.5 (Input-Text-PhoneNumber formatting and validation)
- */
-
-import { InputTextBase } from '../../../Input-Text-Base/platforms/web/InputTextBase.web';
-import { 
-  validatePhoneNumber, 
-  parsePhoneInput,
-  formatPhoneNumber,
-  extractDigits,
-  DEFAULT_INVALID_PHONE_MESSAGE,
-  DEFAULT_COUNTRY_CODE 
-} from '../../validation';
-
-/**
- * Input-Text-PhoneNumber Web Component
- * 
- * Extends Input-Text-Base with phone number-specific functionality.
- * Uses composition pattern to wrap the base component.
- */
-export class InputTextPhoneNumber extends HTMLElement {
-  // Shadow DOM
-  private _shadowRoot: ShadowRoot;
-  
-  // Internal Input-Text-Base element
-  private _baseInput: InputTextBase | null = null;
-  
-  // Phone validation state
-  private _hasBeenValidated: boolean = false;
-  private _isPhoneValid: boolean = true;
-  private _currentCountryCode: string = DEFAULT_COUNTRY_CODE;
-  private _rawDigits: string = '';
-  private _formattedValue: string = '';
-  
-  constructor() {
-    super();
-    
-    // Initialize shadow DOM
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
-  }
-  
-  /**
-   * Get shadow root (for testing and external access)
-   */
-  get shadowRoot(): ShadowRoot {
-    return this._shadowRoot;
-  }
-  
-  /**
-   * Observed attributes for attribute change callbacks
-   */
-  static get observedAttributes(): string[] {
-    return [
-      'id',
-      'label',
-      'value',
-      'placeholder',
-      'helper-text',
-      'error-message',
-      'is-success',
-      'show-info-icon',
-      'read-only',
-      'required',
-      'max-length',
-      'country-code',
-      'auto-format',
-      'invalid-phone-message'
-    ];
-  }
-  
-  /**
-   * Connected callback - called when element is added to DOM
-   */
-  connectedCallback(): void {
-    this._currentCountryCode = this.getAttribute('country-code') || DEFAULT_COUNTRY_CODE;
-    const initialValue = this.getAttribute('value') || '';
-    this._rawDigits = extractDigits(initialValue);
-    this._formattedValue = formatPhoneNumber(this._rawDigits, this._currentCountryCode);
-    
-    this.render();
-    this.attachEventListeners();
-  }
-  
-  /**
-   * Disconnected callback - called when element is removed from DOM
-   */
-  disconnectedCallback(): void {
-    this.detachEventListeners();
-  }
-  
-  /**
-   * Attribute changed callback - called when observed attribute changes
-   */
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
-    if (oldValue === newValue) return;
-    
-    // Handle country code change
-    if (name === 'country-code' && newValue) {
-      this._currentCountryCode = newValue;
-      this._formattedValue = formatPhoneNumber(this._rawDigits, this._currentCountryCode);
-      this._hasBeenValidated = false;
-      this._isPhoneValid = true;
-    }
-    
-    // Clear validation state when value changes externally
-    if (name === 'value' && newValue !== null) {
-      this._rawDigits = extractDigits(newValue);
-      this._formattedValue = formatPhoneNumber(this._rawDigits, this._currentCountryCode);
-      this._hasBeenValidated = false;
-      this._isPhoneValid = true;
-      // Don't re-render for value changes - handled by onChange to preserve focus
-      return;
-    }
-    
-    if (this.isConnected) {
-      this.render();
-    }
-  }
-  
-  /**
-   * Render component
-   */
-  private render(): void {
-    const id = this.getAttribute('id') || '';
-    const label = this.getAttribute('label') || '';
-    const placeholder = this.getAttribute('placeholder') || '';
-    const helperText = this.getAttribute('helper-text') || '';
-    const propsErrorMessage = this.getAttribute('error-message') || '';
-    const isSuccess = this.getAttribute('is-success') === 'true';
-    const showInfoIcon = this.getAttribute('show-info-icon') === 'true';
-    const readOnly = this.hasAttribute('read-only');
-    const required = this.hasAttribute('required');
-    const maxLength = this.getAttribute('max-length');
-    const autoFormat = this.getAttribute('auto-format') !== 'false';
-    const invalidPhoneMessage = this.getAttribute('invalid-phone-message') || DEFAULT_INVALID_PHONE_MESSAGE;
-    
-    // Determine display value
-    const displayValue = autoFormat ? this._formattedValue : this._rawDigits;
-    
-    // Determine error message (props error takes precedence over validation error)
-    let errorMessage = propsErrorMessage;
-    if (!errorMessage && this._hasBeenValidated && !this._isPhoneValid) {
-      errorMessage = invalidPhoneMessage;
-    }
-    
-    // Build the base input element
-    const baseInputHTML = `
-      <input-text-base
-        id="${id}"
-        label="${label}"
-        value="${displayValue}"
-        type="tel"
-        autocomplete="tel"
-        ${placeholder ? `placeholder="${placeholder}"` : ''}
-        ${helperText ? `helper-text="${helperText}"` : ''}
-        ${errorMessage ? `error-message="${errorMessage}"` : ''}
-        ${isSuccess ? 'is-success="true"' : ''}
-        ${showInfoIcon ? 'show-info-icon="true"' : ''}
-        ${readOnly ? 'read-only' : ''}
-        ${required ? 'required' : ''}
-        ${maxLength ? `max-length="${maxLength}"` : ''}
-      ></input-text-base>
-    `;
-    
-    // Add styles (minimal - mostly inherited from base)
-    const style = document.createElement('style');
-    style.textContent = `
-      :host {
-        display: block;
-        width: 100%;
-      }
-    `;
-    
-    // Clear shadow root and append new content
-    this._shadowRoot.innerHTML = '';
-    this._shadowRoot.appendChild(style);
-    
-    const container = document.createElement('div');
-    container.innerHTML = baseInputHTML;
-    this._shadowRoot.appendChild(container);
-    
-    // Store reference to base input
-    this._baseInput = this._shadowRoot.querySelector('input-text-base');
-  }
-  
-  /**
-   * Attach event listeners
-   */
-  private attachEventListeners(): void {
-    // Listen for blur events to trigger validation
-    this._shadowRoot.addEventListener('blur', this.onBlur, true);
-    
-    // Listen for change events to format and update value
-    this._shadowRoot.addEventListener('change', this.onChange, true);
-    
-    // Forward focus events
-    this._shadowRoot.addEventListener('focus', this.onFocus, true);
-  }
-  
-  /**
-   * Detach event listeners
-   */
-  private detachEventListeners(): void {
-    this._shadowRoot.removeEventListener('blur', this.onBlur, true);
-    this._shadowRoot.removeEventListener('change', this.onChange, true);
-    this._shadowRoot.removeEventListener('focus', this.onFocus, true);
-  }
-  
-  /**
-   * Handle focus event
-   */
-  private onFocus = (_event: Event): void => {
-    this.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));
-  };
-  
-  /**
-   * Handle blur event - triggers phone validation
-   */
-  private onBlur = (_event: Event): void => {
-    const invalidPhoneMessage = this.getAttribute('invalid-phone-message') || DEFAULT_INVALID_PHONE_MESSAGE;
-    
-    // Validate phone on blur
-    const validationResult = validatePhoneNumber(this._rawDigits, this._currentCountryCode);
-    this._hasBeenValidated = true;
-    this._isPhoneValid = validationResult.isValid;
-    
-    // Update inner component's error-message attribute directly without re-rendering
-    // This preserves focus and avoids DOM destruction
-    if (this._baseInput) {
-      const propsErrorMessage = this.getAttribute('error-message') || '';
-      if (!propsErrorMessage && !this._isPhoneValid) {
-        this._baseInput.setAttribute('error-message', invalidPhoneMessage);
-      } else if (!propsErrorMessage && this._isPhoneValid) {
-        this._baseInput.removeAttribute('error-message');
-      }
-    }
-    
-    // Dispatch blur event
-    this.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));
-    
-    // Dispatch validation event
-    this.dispatchEvent(new CustomEvent('validate', {
-      detail: {
-        isValid: this._isPhoneValid,
-        errorMessage: validationResult.errorMessage,
-        formattedNumber: this._formattedValue,
-        rawDigits: this._rawDigits
-      },
-      bubbles: true,
-      composed: true
-    }));
-  };
-  
-  /**
-   * Handle change event - formats and updates value
-   */
-  private onChange = (event: Event): void => {
-    const customEvent = event as CustomEvent;
-    const newValue = customEvent.detail?.value || '';
-    const autoFormat = this.getAttribute('auto-format') !== 'false';
-    
-    // Parse and format the input
-    const { formatted, rawDigits } = parsePhoneInput(
-      newValue,
-      this._formattedValue,
-      this._currentCountryCode
-    );
-    
-    this._rawDigits = rawDigits;
-    this._formattedValue = formatted;
-    
-    // Clear validation state when user types
-    this._hasBeenValidated = false;
-    this._isPhoneValid = true;
-    
-    // Update value attribute with formatted or raw value
-    const displayValue = autoFormat ? formatted : rawDigits;
-    this.setAttribute('value', displayValue);
-    
-    // Update the inner input's value attribute directly without re-rendering
-    // This preserves focus while updating the displayed value
-    if (this._baseInput) {
-      this._baseInput.setAttribute('value', displayValue);
-    }
-    
-    // Forward change event with both formatted and raw values
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: { 
-        value: displayValue,
-        formattedValue: formatted,
-        rawDigits: rawDigits
-      },
-      bubbles: true,
-      composed: true
-    }));
-  };
-  
-  /**
-   * Programmatic validation method
-   * 
-   * Allows external code to trigger validation without blur.
-   * 
-   * @returns Validation result with isValid, errorMessage, and formatted number
-   */
-  public validate(): { isValid: boolean; errorMessage?: string; formattedNumber?: string; rawDigits?: string } {
-    const validationResult = validatePhoneNumber(this._rawDigits, this._currentCountryCode);
-    
-    this._hasBeenValidated = true;
-    this._isPhoneValid = validationResult.isValid;
-    
-    // Re-render to show validation state
-    this.render();
-    this.attachEventListeners();
-    
-    return {
-      ...validationResult,
-      formattedNumber: this._formattedValue,
-      rawDigits: this._rawDigits
-    };
-  }
-  
-  /**
-   * Check if the current value is a valid phone number
-   */
-  public get isValid(): boolean {
-    return this._isPhoneValid;
-  }
-  
-  /**
-   * Get the current formatted value
-   */
-  public get value(): string {
-    return this._formattedValue;
-  }
-  
-  /**
-   * Set the current value
-   */
-  public set value(newValue: string) {
-    this.setAttribute('value', newValue);
-  }
-  
-  /**
-   * Get the raw digits (no formatting)
-   */
-  public get rawDigits(): string {
-    return this._rawDigits;
-  }
-  
-  /**
-   * Get the current country code
-   */
-  public get countryCode(): string {
-    return this._currentCountryCode;
-  }
-  
-  /**
-   * Set the country code
-   */
-  public set countryCode(code: string) {
-    this.setAttribute('country-code', code);
-  }
-}
-
-// Register custom element
-if (!customElements.get('input-text-phone-number')) {
-  customElements.define('input-text-phone-number', InputTextPhoneNumber);
-}
-

package/src/components/core/Input-Text-PhoneNumber/stateManagement.ts

@@ -1,250 +0,0 @@
-/**
- * Input-Text-PhoneNumber State Management
- * 
- * Extends Input-Text-Base state management with phone number-specific functionality.
- * Handles phone number formatting and validation on blur.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-PhoneNumber
- * 
- * State Machine (extends Input-Text-Base):
- * - All Input-Text-Base states apply
- * - Phone number formatting as user types
- * - Phone number validation triggers on blur
- * - Error state set when phone number format is invalid
- * 
- * Behavioral Contracts:
- * - validates_phone_format: Validates phone number against country-specific patterns
- * - provides_phone_formatting: Formats phone numbers as user types
- * - supports_international_formats: Handles multiple country formats
- * - inherits_all_input_text_base_contracts: All base contracts apply
- * 
- * Requirements: R4.5
- */
-
-import { InputTextPhoneNumberProps, InputTextPhoneNumberState } from './types';
-import { 
-  validatePhoneNumber, 
-  parsePhoneInput,
-  DEFAULT_INVALID_PHONE_MESSAGE,
-  DEFAULT_COUNTRY_CODE,
-  extractDigits,
-  formatPhoneNumber
-} from './validation';
-import {
-  createInitialState as createBaseInitialState,
-  handleFocus as handleBaseFocus,
-  handleBlur as handleBaseBlur,
-  handleValueChange as handleBaseValueChange
-} from '../Input-Text-Base/stateManagement';
-
-/**
- * Create Initial State for Input-Text-PhoneNumber
- * 
- * Creates the initial component state based on props.
- * Extends Input-Text-Base initial state with phone number-specific fields.
- * 
- * @param props - Component props
- * @returns Initial state
- */
-export function createInitialState(props: InputTextPhoneNumberProps): InputTextPhoneNumberState {
-  const countryCode = props.countryCode || DEFAULT_COUNTRY_CODE;
-  const rawDigits = extractDigits(props.value || '');
-  const formattedValue = formatPhoneNumber(rawDigits, countryCode);
-  
-  const baseState = createBaseInitialState({
-    ...props,
-    type: 'tel',
-    autocomplete: 'tel',
-    value: formattedValue
-  });
-  
-  return {
-    ...baseState,
-    isPhoneValid: true, // Assume valid until validated
-    hasBeenValidated: false,
-    currentCountryCode: countryCode,
-    formattedValue,
-    rawDigits
-  };
-}
-
-/**
- * Handle Focus Event
- * 
- * Updates state when input receives focus.
- * Delegates to Input-Text-Base focus handler.
- * 
- * @param currentState - Current component state
- * @returns Updated state
- */
-export function handleFocus(currentState: InputTextPhoneNumberState): InputTextPhoneNumberState {
-  const baseState = handleBaseFocus(currentState);
-  
-  return {
-    ...currentState,
-    ...baseState
-  };
-}
-
-/**
- * Handle Blur Event with Phone Number Validation
- * 
- * Updates state when input loses focus.
- * Triggers phone number validation on blur.
- * 
- * @param currentState - Current component state
- * @param value - Current input value
- * @param customValidator - Optional custom validation function
- * @param invalidPhoneMessage - Optional custom error message
- * @returns Updated state with validation result
- */
-export function handleBlur(
-  currentState: InputTextPhoneNumberState,
-  value: string,
-  customValidator?: (phoneNumber: string, countryCode: string) => boolean,
-  invalidPhoneMessage?: string
-): InputTextPhoneNumberState {
-  const baseState = handleBaseBlur(currentState);
-  
-  // Validate phone number on blur
-  const validationResult = validatePhoneNumber(
-    value, 
-    currentState.currentCountryCode,
-    customValidator, 
-    invalidPhoneMessage
-  );
-  
-  return {
-    ...currentState,
-    ...baseState,
-    isPhoneValid: validationResult.isValid,
-    hasBeenValidated: true,
-    hasError: !validationResult.isValid || currentState.hasError
-  };
-}
-
-/**
- * Handle Value Change with Auto-Formatting
- * 
- * Updates state when input value changes.
- * Formats phone number as user types.
- * Clears validation error when user starts typing again.
- * 
- * @param currentState - Current component state
- * @param newValue - New input value
- * @param autoFormat - Whether to auto-format the phone number
- * @returns Updated state with formatted value
- */
-export function handleValueChange(
-  currentState: InputTextPhoneNumberState,
-  newValue: string,
-  autoFormat: boolean = true
-): InputTextPhoneNumberState {
-  const { formatted, rawDigits } = parsePhoneInput(
-    newValue,
-    currentState.formattedValue,
-    currentState.currentCountryCode
-  );
-  
-  const displayValue = autoFormat ? formatted : newValue;
-  const baseState = handleBaseValueChange(currentState, displayValue);
-  
-  // Clear phone validation error when user starts typing
-  // (will be re-validated on blur)
-  return {
-    ...currentState,
-    ...baseState,
-    formattedValue: formatted,
-    rawDigits,
-    // Keep hasBeenValidated but clear the error state while typing
-    hasError: false,
-    isPhoneValid: true
-  };
-}
-
-/**
- * Handle Country Code Change
- * 
- * Updates state when country code changes.
- * Re-formats the phone number for the new country.
- * 
- * @param currentState - Current component state
- * @param newCountryCode - New country code
- * @returns Updated state with new country and re-formatted number
- */
-export function handleCountryChange(
-  currentState: InputTextPhoneNumberState,
-  newCountryCode: string
-): InputTextPhoneNumberState {
-  const formatted = formatPhoneNumber(currentState.rawDigits, newCountryCode);
-  
-  return {
-    ...currentState,
-    currentCountryCode: newCountryCode,
-    formattedValue: formatted,
-    // Clear validation when country changes
-    hasBeenValidated: false,
-    isPhoneValid: true,
-    hasError: false
-  };
-}
-
-/**
- * Get Phone Number Error Message
- * 
- * Returns the appropriate error message based on validation state.
- * 
- * @param state - Current component state
- * @param propsErrorMessage - Error message from props (takes precedence)
- * @param invalidPhoneMessage - Custom invalid phone message
- * @returns Error message to display, or undefined if no error
- */
-export function getPhoneErrorMessage(
-  state: InputTextPhoneNumberState,
-  propsErrorMessage?: string,
-  invalidPhoneMessage?: string
-): string | undefined {
-  // Props error message takes precedence
-  if (propsErrorMessage) {
-    return propsErrorMessage;
-  }
-  
-  // Show phone validation error if validated and invalid
-  if (state.hasBeenValidated && !state.isPhoneValid) {
-    return invalidPhoneMessage || DEFAULT_INVALID_PHONE_MESSAGE;
-  }
-  
-  return undefined;
-}
-
-/**
- * Get Display Value
- * 
- * Returns the value to display in the input.
- * Uses formatted value if auto-format is enabled.
- * 
- * @param state - Current component state
- * @param autoFormat - Whether auto-format is enabled
- * @returns Display value
- */
-export function getDisplayValue(
-  state: InputTextPhoneNumberState,
-  autoFormat: boolean = true
-): string {
-  return autoFormat ? state.formattedValue : state.rawDigits;
-}
-
-/**
- * Get Raw Phone Number
- * 
- * Returns the raw digits without formatting.
- * 
- * @param state - Current component state
- * @returns Raw digits string
- */
-export function getRawPhoneNumber(state: InputTextPhoneNumberState): string {
-  return state.rawDigits;
-}
-

package/src/components/core/Input-Text-PhoneNumber/tokens.ts

@@ -1,33 +0,0 @@
-/**
- * Input-Text-PhoneNumber Component Token References
- * 
- * Inherits all tokens from Input-Text-Base.
- * Phone number-specific components use the same visual tokens as the base component.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-PhoneNumber
- * 
- * Token Inheritance:
- * Input-Text-PhoneNumber inherits ALL tokens from Input-Text-Base.
- * No additional tokens are required for phone number-specific functionality.
- * 
- * This file re-exports Input-Text-Base tokens for consistency and
- * to allow future phone number-specific token additions if needed.
- */
-
-// Re-export all tokens from Input-Text-Base
-export {
-  typographyTokens,
-  colorTokens,
-  spacingTokens,
-  motionTokens,
-  borderTokens,
-  accessibilityTokens,
-  blendTokens,
-  inputTextBaseTokens
-} from '../Input-Text-Base/tokens';
-
-// Alias for semantic naming
-export { inputTextBaseTokens as inputTextPhoneNumberTokens } from '../Input-Text-Base/tokens';
-