Input Components

/**
 * Base text input field component
 * Provides foundation for all text-based input controls
 */
interface TextField extends HTMLElement {
  /** Current field value */
  value: string;
  /** Field label displayed above input */
  label: string;
  /** Placeholder text when field is empty */
  placeholder: string;
  /** Field is required for form submission */
  required: boolean;
  /** Field is read-only (not editable) */
  readonly: boolean;
  /** Field is disabled (not interactive) */
  disabled: boolean;
  /** Field has validation errors */
  invalid: boolean;
  /** Error message displayed when invalid */
  errorMessage: string;
  /** Helper text displayed below field */
  helperText: string;
  /** HTML input type attribute */
  type: string;
  /** Regular expression pattern for validation */
  pattern: string;
  /** Minimum text length */
  minlength: number;
  /** Maximum text length */
  maxlength: number;
  /** Autocomplete behavior hint */
  autocomplete: string;
  /** Automatic capitalization behavior */
  autocapitalize: string;
  /** Automatic text correction behavior */
  autocorrect: string;

  /** Validate field value against constraints */
  validate(): boolean;
  /** Check HTML5 validity constraints */
  checkValidity(): boolean;
  /** Focus the input field */
  focus(): void;
  /** Select all text in the field */
  select(): void;
  /** Clear the field value */
  clear(): void;
}

import '@vaadin/text-field';

const textField = document.createElement('vaadin-text-field');
textField.label = 'Full Name';
textField.placeholder = 'Enter your full name';
textField.required = true;
textField.helperText = 'First and last name';

// Validation
textField.addEventListener('input', () => {
  if (textField.value.length < 2) {
    textField.invalid = true;
    textField.errorMessage = 'Name must be at least 2 characters';
  } else {
    textField.invalid = false;
  }
});

// Form submission
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  if (!textField.validate()) {
    e.preventDefault();
  }
});

/**
 * Password input field with reveal/hide functionality
 * Extends TextField with password-specific features
 */
interface PasswordField extends TextField {
  /** Controls password visibility (show/hide) */
  passwordVisible: boolean;
  /** Title for the reveal button */
  revealButtonTitle: string;
  /** Hidden title for the reveal button */
  revealButtonHiddenTitle: string;
}

/**
 * Email input field with automatic email validation
 * Validates input against standard email format
 */
interface EmailField extends TextField {
  /** Inherits all TextField properties with email validation */
}

/**
 * Numeric input field with stepper controls
 * Supports integer and decimal number input with validation
 */
interface NumberField extends TextField {
  /** Minimum allowed value */
  min: number;
  /** Maximum allowed value */
  max: number;
  /** Step increment for +/- controls */
  step: number;

  /** Increase value by step amount */
  stepUp(increment?: number): void;
  /** Decrease value by step amount */
  stepDown(decrement?: number): void;
}

import '@vaadin/number-field';

const priceField = document.createElement('vaadin-number-field');
priceField.label = 'Price';
priceField.min = 0;
priceField.max = 10000;
priceField.step = 0.01; // Two decimal places
priceField.value = '99.99';

// Format value display
priceField.addEventListener('blur', () => {
  const value = parseFloat(priceField.value);
  if (!isNaN(value)) {
    priceField.value = value.toFixed(2);
  }
});

/**
 * Integer input field restricting decimal values
 * Only allows whole number input
 */
interface IntegerField extends NumberField {
  /** Inherits NumberField properties, restricted to integers */
}

/**
 * Multi-line text input area
 * Supports automatic resizing and character limits
 */
interface TextArea extends TextField {
  /** Minimum character length */
  minlength: number;
  /** Maximum character length */
  maxlength: number;
  /** Number of visible text rows */
  rows: number;
  /** Maximum number of rows before scrolling */
  maxRows: number;
}

import '@vaadin/text-area';

const descriptionArea = document.createElement('vaadin-text-area');
descriptionArea.label = 'Description';
descriptionArea.placeholder = 'Enter a detailed description...';
descriptionArea.maxlength = 500;
descriptionArea.rows = 4;
descriptionArea.maxRows = 10;

// Character counter
descriptionArea.addEventListener('input', () => {
  const remaining = descriptionArea.maxlength - descriptionArea.value.length;
  descriptionArea.helperText = `${remaining} characters remaining`;
});

/**
 * Checkbox input for boolean values
 * Supports checked, unchecked, and indeterminate states
 */
interface Checkbox extends HTMLElement {
  /** Current checked state */
  checked: boolean;
  /** Indeterminate state (partially checked) */
  indeterminate: boolean;
  /** Checkbox is disabled */
  disabled: boolean;
  /** Checkbox is read-only */
  readonly: boolean;
  /** Form name attribute */
  name: string;
  /** Form value when checked */
  value: string;
  /** Label text */
  label: string;

  /** Programmatically click checkbox */
  click(): void;
  /** Focus the checkbox */
  focus(): void;
}

/**
 * Group of checkboxes for multiple selection
 * Manages collection of related boolean choices
 */
interface CheckboxGroup extends HTMLElement {
  /** Array of selected values */
  value: string[];
  /** Group label */
  label: string;
  /** Group is disabled */
  disabled: boolean;
  /** Group is read-only */
  readonly: boolean;
  /** Group is required (at least one must be selected) */
  required: boolean;
  /** Group has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;

  /** Validate group selection */
  validate(): boolean;
  /** Check validity of selection */
  checkValidity(): boolean;
}

import '@vaadin/checkbox-group';

const interestsGroup = document.createElement('vaadin-checkbox-group');
interestsGroup.label = 'Interests';
interestsGroup.innerHTML = `
  <vaadin-checkbox value="sports" label="Sports"></vaadin-checkbox>
  <vaadin-checkbox value="music" label="Music"></vaadin-checkbox>
  <vaadin-checkbox value="travel" label="Travel"></vaadin-checkbox>
`;

// Handle selection changes
interestsGroup.addEventListener('value-changed', (e) => {
  console.log('Selected interests:', e.detail.value);
});

/**
 * Group of radio buttons for single selection
 * Manages mutually exclusive choices
 */
interface RadioGroup extends HTMLElement {
  /** Selected value */
  value: string;
  /** Group label */
  label: string;
  /** Group is disabled */
  disabled: boolean;
  /** Group is read-only */
  readonly: boolean;
  /** Group is required */
  required: boolean;
  /** Group has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;

  /** Validate group selection */
  validate(): boolean;
  /** Check validity of selection */
  checkValidity(): boolean;
}

/**
 * Individual radio button within RadioGroup
 */
interface RadioButton extends HTMLElement {
  /** Radio button value */
  value: string;
  /** Radio button is checked */
  checked: boolean;
  /** Radio button label */
  label: string;
  /** Radio button is disabled */
  disabled: boolean;
}

/**
 * Container for creating custom composite fields
 * Combines multiple input components into single field
 */
interface CustomField extends HTMLElement {
  /** Combined field value */
  value: string;
  /** Field label */
  label: string;
  /** Field is required */
  required: boolean;
  /** Field is disabled */
  disabled: boolean;
  /** Field is read-only */
  readonly: boolean;
  /** Field has validation errors */
  invalid: boolean;
  /** Error message when invalid */
  errorMessage: string;
  /** Helper text */
  helperText: string;

  /** Child input elements */
  readonly inputs: Element[];
  /** Validate all child inputs */
  checkValidity(): boolean;
  /** Validate custom field logic */
  validate(): boolean;
}

import '@vaadin/custom-field';

// Create phone number field with separate inputs
const phoneField = document.createElement('vaadin-custom-field');
phoneField.label = 'Phone Number';

const areaCode = document.createElement('vaadin-text-field');
areaCode.placeholder = '123';
areaCode.maxlength = 3;
areaCode.style.width = '80px';

const exchange = document.createElement('vaadin-text-field');
exchange.placeholder = '456';
exchange.maxlength = 3;
exchange.style.width = '80px';

const number = document.createElement('vaadin-text-field');
number.placeholder = '7890';
number.maxlength = 4;
number.style.width = '100px';

phoneField.appendChild(areaCode);
phoneField.appendChild(exchange);
phoneField.appendChild(number);

// Custom validation and value handling
phoneField.addEventListener('change', () => {
  const fullNumber = `${areaCode.value}-${exchange.value}-${number.value}`;
  phoneField.value = fullNumber;
});

// Standard field validation
const validateField = (field: TextField) => {
  let isValid = true;

  // Required validation
  if (field.required && !field.value.trim()) {
    field.errorMessage = 'This field is required';
    field.invalid = true;
    isValid = false;
  }

  // Length validation
  else if (field.minlength && field.value.length < field.minlength) {
    field.errorMessage = `Minimum ${field.minlength} characters required`;
    field.invalid = true;
    isValid = false;
  }

  // Pattern validation
  else if (field.pattern && !new RegExp(field.pattern).test(field.value)) {
    field.errorMessage = 'Invalid format';
    field.invalid = true;
    isValid = false;
  }

  else {
    field.invalid = false;
  }

  return isValid;
};

// Complete form validation
const validateForm = (form: HTMLFormElement) => {
  const fields = form.querySelectorAll('vaadin-text-field, vaadin-email-field, vaadin-password-field');
  let formValid = true;

  fields.forEach(field => {
    if (!field.validate()) {
      formValid = false;
    }
  });

  return formValid;
};