@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Input-Text-Email/platforms/web/InputTextEmail.browser.ts

@@ -1,276 +0,0 @@
-/**
- * Input-Text-Email Browser Build
- * 
- * Standalone browser-compatible version of Input-Text-Email web component.
- * This file bundles all dependencies inline for direct browser usage.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Email
- */
-
-// Inline email validation
-const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-const DEFAULT_INVALID_EMAIL_MESSAGE = 'Please enter a valid email address';
-
-function isValidEmail(email: string): boolean {
-  if (!email || email.trim() === '') {
-    return true;
-  }
-  return EMAIL_REGEX.test(email.trim());
-}
-
-// Input-Text-Email Web Component
-class InputTextEmail extends HTMLElement {
-  private shadow: ShadowRoot;
-  private hasBeenValidated: boolean = false;
-  private isEmailValid: boolean = true;
-
-  constructor() {
-    super();
-    this.shadow = this.attachShadow({ mode: 'open' });
-  }
-
-  static get observedAttributes() {
-    return [
-      'label',
-      'value',
-      'placeholder',
-      'required',
-      'read-only',
-      'error-message',
-      'helper-text',
-      'is-success',
-      'show-info-icon',
-      'invalid-email-message'
-    ];
-  }
-
-  connectedCallback() {
-    this.render();
-    this.attachEventListeners();
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (oldValue !== newValue) {
-      if (name === 'value') {
-        this.hasBeenValidated = false;
-        this.isEmailValid = true;
-      }
-      this.render();
-    }
-  }
-
-  private render() {
-    const label = this.getAttribute('label') || '';
-    const value = this.getAttribute('value') || '';
-    const placeholder = this.getAttribute('placeholder') || '';
-    const required = this.hasAttribute('required');
-    const readOnly = this.hasAttribute('read-only');
-    const propsErrorMessage = this.getAttribute('error-message');
-    const helperText = this.getAttribute('helper-text');
-    const isSuccess = this.getAttribute('is-success') === 'true';
-    const showInfoIcon = this.getAttribute('show-info-icon') === 'true';
-    const invalidEmailMessage = this.getAttribute('invalid-email-message') || DEFAULT_INVALID_EMAIL_MESSAGE;
-
-    // Determine error message
-    let errorMessage = propsErrorMessage;
-    if (!errorMessage && this.hasBeenValidated && !this.isEmailValid) {
-      errorMessage = invalidEmailMessage;
-    }
-
-    const hasError = !!errorMessage;
-    const isFilled = value.length > 0;
-
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          position: relative;
-          font-family: var(--typography-input-font-family, system-ui);
-        }
-
-        .input-container {
-          position: relative;
-          display: flex;
-          align-items: center;
-          min-height: var(--tap-area-comfortable);
-          background: var(--color-structure-canvas);
-          border: var(--border-default) solid var(--color-structure-border);
-          border-radius: var(--radius-150);
-          padding-top: var(--space-inset-200);
-          padding-bottom: var(--space-inset-none);
-          padding-left: var(--space-inset-100);
-          padding-right: var(--space-inset-100);
-          transition: border-color var(--motion-float-label-duration) var(--motion-float-label-easing);
-        }
-
-        .input-container.focused {
-          border-color: var(--color-action-primary);
-        }
-
-        .input-container.error {
-          border-color: var(--color-error);
-          background: var(--color-error-background);
-        }
-
-        .input-container.success {
-          border-color: var(--color-success-strong);
-        }
-
-        input {
-          flex: 1;
-          border: none;
-          outline: none;
-          background: transparent;
-          font-family: var(--typography-input-font-family);
-          font-size: var(--typography-input-font-size);
-          line-height: var(--typography-input-line-height);
-          font-weight: var(--typography-input-font-weight);
-          color: var(--color-text-default);
-          padding: var(--space-grouped-tight) 0;
-        }
-
-        input::placeholder {
-          color: transparent;
-        }
-
-        label {
-          position: absolute;
-          left: var(--space-inset-100);
-          top: 50%;
-          transform: translateY(-50%);
-          font-family: var(--typography-label-md-font-family);
-          font-size: var(--typography-label-md-font-size);
-          line-height: var(--typography-label-md-line-height);
-          font-weight: var(--typography-label-md-font-weight);
-          color: var(--color-text-muted);
-          pointer-events: none;
-          transition: all var(--motion-float-label-duration) var(--motion-float-label-easing);
-        }
-
-        .input-container.focused label,
-        .input-container.filled label {
-          top: var(--space-grouped-minimal);
-          transform: translateY(0);
-          font-size: var(--typography-label-md-float-font-size);
-          line-height: var(--typography-label-md-float-line-height);
-          color: var(--color-action-primary);
-        }
-
-        .input-container.error label {
-          color: var(--color-error);
-        }
-
-        .icon {
-          margin-left: var(--space-grouped-tight);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .helper-text,
-        .error-message {
-          margin-top: var(--space-grouped-tight);
-          font-family: var(--typography-caption-font-family);
-          font-size: var(--typography-caption-font-size);
-          line-height: var(--typography-caption-line-height);
-          color: var(--color-text-muted);
-        }
-
-        .error-message {
-          color: var(--color-error);
-        }
-
-        :host(:focus-within) .input-container {
-          outline: var(--accessibility-focus-width) solid var(--accessibility-focus-color);
-          outline-offset: var(--accessibility-focus-offset);
-        }
-      </style>
-
-      <div class="input-container ${isFilled ? 'filled' : ''} ${hasError ? 'error' : ''} ${isSuccess ? 'success' : ''}">
-        <input
-          type="email"
-          autocomplete="email"
-          value="${value}"
-          placeholder="${placeholder}"
-          ${required ? 'required' : ''}
-          ${readOnly ? 'readonly' : ''}
-          aria-label="${label}"
-          ${hasError ? 'aria-invalid="true"' : ''}
-          ${errorMessage ? `aria-describedby="error-${this.id}"` : ''}
-        />
-        <label>${label}${required ? ' *' : ''}</label>
-        ${isSuccess ? '<span class="icon">✓</span>' : ''}
-        ${hasError ? '<span class="icon">!</span>' : ''}
-        ${showInfoIcon ? '<span class="icon">ℹ</span>' : ''}
-      </div>
-
-      ${helperText ? `<div class="helper-text">${helperText}</div>` : ''}
-      ${errorMessage ? `<div class="error-message" id="error-${this.id}">${errorMessage}</div>` : ''}
-    `;
-
-    this.attachEventListeners();
-  }
-
-  private attachEventListeners() {
-    const input = this.shadow.querySelector('input');
-    if (input) {
-      input.addEventListener('focus', () => {
-        const container = this.shadow.querySelector('.input-container');
-        container?.classList.add('focused');
-      });
-      
-      input.addEventListener('blur', () => {
-        const container = this.shadow.querySelector('.input-container');
-        container?.classList.remove('focused');
-        
-        // Validate on blur
-        const value = input.value;
-        this.hasBeenValidated = true;
-        this.isEmailValid = isValidEmail(value);
-        this.render();
-      });
-      
-      input.addEventListener('input', (e) => {
-        const target = e.target as HTMLInputElement;
-        this.setAttribute('value', target.value);
-        this.hasBeenValidated = false;
-        this.isEmailValid = true;
-      });
-    }
-  }
-
-  public validate(): { isValid: boolean; errorMessage?: string } {
-    const value = this.getAttribute('value') || '';
-    this.hasBeenValidated = true;
-    this.isEmailValid = isValidEmail(value);
-    this.render();
-    
-    return {
-      isValid: this.isEmailValid,
-      errorMessage: this.isEmailValid ? undefined : (this.getAttribute('invalid-email-message') || DEFAULT_INVALID_EMAIL_MESSAGE)
-    };
-  }
-
-  public get isValid(): boolean {
-    return this.isEmailValid;
-  }
-
-  public get value(): string {
-    return this.getAttribute('value') || '';
-  }
-
-  public set value(newValue: string) {
-    this.setAttribute('value', newValue);
-  }
-}
-
-// Register the custom element
-if (!customElements.get('input-text-email')) {
-  customElements.define('input-text-email', InputTextEmail);
-}
-
-// Export for module usage
-export { InputTextEmail };
-

package/src/components/core/Input-Text-Email/platforms/web/InputTextEmail.web.ts

@@ -1,319 +0,0 @@
-/**
- * Input-Text-Email Web Component
- * 
- * Web platform implementation of the Input-Text-Email component using Web Components.
- * Extends Input-Text-Base with email validation and autocomplete functionality.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Email
- * 
- * Features:
- * - Inherits all Input-Text-Base features (float label, validation states, etc.)
- * - Email format validation on blur
- * - Browser email autocomplete support
- * - Email keyboard type on mobile
- * - Custom validation function support
- * 
- * Behavioral Contracts:
- * - validates_email_format: Validates email against RFC 5322 pattern
- * - provides_email_autocomplete: Enables browser email autofill
- * - inherits_all_input_text_base_contracts: All base contracts apply
- * 
- * Requirements: R4.3 (Input-Text-Email validation and autocomplete)
- */
-
-import { InputTextBase } from '../../../Input-Text-Base/platforms/web/InputTextBase.web';
-import { validateEmail, DEFAULT_INVALID_EMAIL_MESSAGE } from '../../validation';
-
-/**
- * Input-Text-Email Web Component
- * 
- * Extends Input-Text-Base with email-specific functionality.
- * Uses composition pattern to wrap the base component.
- */
-export class InputTextEmail extends HTMLElement {
-  // Shadow DOM
-  private _shadowRoot: ShadowRoot;
-  
-  // Internal Input-Text-Base element
-  private _baseInput: InputTextBase | null = null;
-  
-  // Email validation state
-  private _hasBeenValidated: boolean = false;
-  private _isEmailValid: boolean = true;
-  
-  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',
-      'invalid-email-message'
-    ];
-  }
-  
-  /**
-   * Connected callback - called when element is added to DOM
-   */
-  connectedCallback(): void {
-    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;
-    
-    // Clear validation state when value changes
-    if (name === 'value') {
-      this._hasBeenValidated = false;
-      this._isEmailValid = 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 value = this.getAttribute('value') || '';
-    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 invalidEmailMessage = this.getAttribute('invalid-email-message') || DEFAULT_INVALID_EMAIL_MESSAGE;
-    
-    // Determine error message (props error takes precedence over validation error)
-    let errorMessage = propsErrorMessage;
-    if (!errorMessage && this._hasBeenValidated && !this._isEmailValid) {
-      errorMessage = invalidEmailMessage;
-    }
-    
-    // Build the base input element
-    const baseInputHTML = `
-      <input-text-base
-        id="${id}"
-        label="${label}"
-        value="${value}"
-        type="email"
-        autocomplete="email"
-        ${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 clear validation
-    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 email validation
-   */
-  private onBlur = (_event: Event): void => {
-    const value = this.getAttribute('value') || '';
-    const invalidEmailMessage = this.getAttribute('invalid-email-message') || DEFAULT_INVALID_EMAIL_MESSAGE;
-    
-    // Validate email on blur
-    const validationResult = validateEmail(value);
-    this._hasBeenValidated = true;
-    this._isEmailValid = 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._isEmailValid) {
-        this._baseInput.setAttribute('error-message', invalidEmailMessage);
-      } else if (!propsErrorMessage && this._isEmailValid) {
-        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._isEmailValid,
-        errorMessage: validationResult.errorMessage
-      },
-      bubbles: true,
-      composed: true
-    }));
-  };
-  
-  /**
-   * Handle change event - clears validation and updates value
-   */
-  private onChange = (event: Event): void => {
-    const customEvent = event as CustomEvent;
-    const newValue = customEvent.detail?.value || '';
-    
-    // Update value attribute (this will trigger attributeChangedCallback)
-    // But we DON'T want to re-render here as it would destroy focus
-    this.setAttribute('value', newValue);
-    
-    // Clear validation state when user types
-    this._hasBeenValidated = false;
-    this._isEmailValid = true;
-    
-    // Update the inner input's value attribute directly without re-rendering
-    if (this._baseInput) {
-      this._baseInput.setAttribute('value', newValue);
-    }
-    
-    // Forward change event
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: { value: newValue },
-      bubbles: true,
-      composed: true
-    }));
-  };
-  
-  /**
-   * Programmatic validation method
-   * 
-   * Allows external code to trigger validation without blur.
-   * 
-   * @returns Validation result with isValid and optional errorMessage
-   */
-  public validate(): { isValid: boolean; errorMessage?: string } {
-    const value = this.getAttribute('value') || '';
-    const validationResult = validateEmail(value);
-    
-    this._hasBeenValidated = true;
-    this._isEmailValid = validationResult.isValid;
-    
-    // Re-render to show validation state
-    this.render();
-    this.attachEventListeners();
-    
-    return validationResult;
-  }
-  
-  /**
-   * Check if the current value is a valid email
-   */
-  public get isValid(): boolean {
-    return this._isEmailValid;
-  }
-  
-  /**
-   * Get the current value
-   */
-  public get value(): string {
-    return this.getAttribute('value') || '';
-  }
-  
-  /**
-   * Set the current value
-   */
-  public set value(newValue: string) {
-    this.setAttribute('value', newValue);
-  }
-}
-
-// Register custom element
-if (!customElements.get('input-text-email')) {
-  customElements.define('input-text-email', InputTextEmail);
-}
-