agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/Input/core/_Input.BACKUP.ts

@@ -1,710 +0,0 @@
-/**
- * AgnosticUI v2 Input - Canonical Implementation (Starting Simple)
- *
- * ⚠️  IMMUTABLE CANONICAL VERSION ⚠️
- *
- * Version: 2.0.0-dev
- * Last Updated: 2025-10-06
- */
-
-import { LitElement, html, css } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { generateUniqueId } from '../../../utils/unique-id';
-import { hasSlotContent } from '../../../utils/slot';
-
-// Props interface following INTERFACE_STANDARDS.md
-export interface InputProps {
-  // Label properties
-  label?: string;
-  labelHidden?: boolean;
-  noLabel?: boolean;
-  ariaLabel?: string;
-  labelledBy?: string;
-
-  // Input properties
-  type?: string;
-  value?: string;
-  placeholder?: string;
-
-  // Textarea properties
-  rows?: number;
-  cols?: number;
-
-  // Size variants
-  size?: 'small' | 'default' | 'large';
-
-  // Styling variants
-  capsule?: boolean;
-  rounded?: boolean;
-  underlined?: boolean;
-  underlinedWithBackground?: boolean;
-  inline?: boolean;
-
-  // Addon support - REMOVED: hasLeftAddon and hasRightAddon props
-  // Slots are now auto-detected via slotchange events
-
-  // Validation & state
-  required?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  invalid?: boolean;
-  errorMessage?: string;
-  helpText?: string;
-
-  // Event callbacks (native events only - no custom events)
-  onClick?: (event: MouseEvent) => void;
-  onInput?: (event: InputEvent) => void;
-  onChange?: (event: Event) => void;
-  onFocus?: (event: FocusEvent) => void;
-  onBlur?: (event: FocusEvent) => void;
-}
-
-/**
- * AgInput - Foundation input component (starting minimal)
- *
- * Starting with basic label + input functionality, will build up incrementally
- */
-export class AgInput extends LitElement implements InputProps {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    /* Label Above Input - BBC GEL Best Practice
-     *
-     * Why Label Above (BBC GEL):
-     * - Mobile-friendly: Labels above work better on small screens
-     * - Accessibility standard: Clear visual hierarchy
-     * - Cognitive accessibility: Easier to scan and understand
-     * - International: Works with various text lengths/languages
-     *
-     * Note: Labels below inputs are possible via customization:
-     * Use noLabel prop + external <ag-label> or <label> for custom positioning
-     */
-    .ag-input__label {
-      display: block;
-      margin-block-end: var(--ag-space-2);
-      font-size: var(--ag-font-size-base);
-      color: var(--ag-text-primary);
-    }
-
-    .ag-input__label--hidden {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      padding: 0 !important;
-      margin: -1px !important;
-      overflow: hidden !important;
-      clip: rect(0, 0, 0, 0) !important;
-      white-space: nowrap !important;
-      border: 0 !important;
-    }
-
-    .ag-input__input,
-    .ag-input__textarea {
-      box-sizing: border-box;
-      width: 100%;
-      padding: var(--ag-space-2) var(--ag-space-3);
-      font-size: var(--ag-font-size-base);
-      line-height: var(--ag-line-height-base);
-      color: var(--ag-text-primary);
-      background-color: var(--ag-background-primary);
-      border: 1px solid var(--ag-border-subtle);
-      border-radius: 0; /* Make it rectangular by default */
-      transition: all var(--ag-motion-medium);
-    }
-
-    .ag-input__input::placeholder,
-    .ag-input__textarea::placeholder {
-      color: var(--ag-text-muted);
-      opacity: 1;
-    }
-
-    .ag-input__input:focus-visible,
-    .ag-input__textarea:focus-visible {
-      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
-      outline-offset: var(--ag-focus-offset);
-      border-color: rgba(var(--ag-focus), 0.6);
-    }
-
-    .ag-input__textarea {
-      resize: vertical;
-    }
-
-    :host([inline]) {
-      display: inline-block;
-    }
-
-    /* Sizes */
-    :host([size="small"]) .ag-input__input,
-    :host([size="small"]) .ag-input__textarea {
-      padding: var(--ag-space-1) var(--ag-space-2);
-      font-size: var(--ag-font-size-sm);
-    }
-
-    :host([size="large"]) .ag-input__input,
-    :host([size="large"]) .ag-input__textarea {
-      padding: var(--ag-space-3) var(--ag-space-4);
-      font-size: var(--ag-font-size-lg);
-    }
-
-    /* Variants */
-    :host([capsule]) .ag-input__input,
-    :host([capsule]) .ag-input__textarea {
-      border-radius: var(--ag-radius-full);
-    }
-
-    :host([rounded]) .ag-input__input,
-    :host([rounded]) .ag-input__textarea {
-      border-radius: var(--ag-radius-md);
-    }
-
-    :host([underlined]) .ag-input__input,
-    :host([underlined]) .ag-input__textarea {
-      border-radius: 0;
-      border-width: 0 0 1px 0;
-    }
-
-    :host([underlined-with-background]) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__textarea {
-      border-radius: 0;
-      border-width: 0 0 1px 0;
-      background-color: var(--ag-background-secondary);
-    }
-
-    /* States */
-    :host([disabled]) .ag-input__input,
-    :host([disabled]) .ag-input__textarea {
-      background-color: var(--ag-background-disabled);
-      color: var(--ag-text-muted);
-      cursor: not-allowed;
-    }
-
-    :host([invalid]) .ag-input__input,
-    :host([invalid]) .ag-input__textarea {
-      border-color: var(--ag-danger);
-    }
-
-    :host([invalid]) .ag-input__input:focus-visible,
-    :host([invalid]) .ag-input__textarea:focus-visible {
-      border-color: rgba(var(--ag-danger-rgb), 0.6);
-      outline-color: rgba(var(--ag-danger-rgb), 0.5);
-    }
-
-    /* Addons */
-    .ag-input__field {
-      display: flex;
-      align-items: stretch;
-    }
-
-    .ag-input__addon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--ag-space-2) var(--ag-space-3);
-      font-size: var(--ag-font-size-base);
-      line-height: var(--ag-line-height-base);
-      color: var(--ag-text-primary);
-      /* background-color: var(--ag-background-secondary); */
-      border: 1px solid var(--ag-border-subtle);
-    }
-
-    .ag-input__addon--left {
-      border-inline-end: 0;
-      border-radius: var(--ag-radius-md) 0 0 var(--ag-radius-md);
-    }
-
-    .ag-input__addon--right {
-      border-inline-start: 0;
-      border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0;
-    }
-
-    /* When left addon is present */
-    .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-    }
-
-    /* When right addon is present */
-    .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-
-    .ag-input__field .ag-input__input,
-    .ag-input__field .ag-input__textarea {
-      flex: 1;
-    }
-
-    /* Capsule variant with addons */
-    :host([capsule]) .ag-input__addon--left {
-      border-radius: var(--ag-radius-full) 0 0 var(--ag-radius-full);
-      padding: var(--ag-space-2) var(--ag-space-4);
-    }
-
-    :host([capsule]) .ag-input__addon--right {
-      border-radius: 0 var(--ag-radius-full) var(--ag-radius-full) 0;
-      padding: var(--ag-space-2) var(--ag-space-4);
-    }
-
-    /* Remove border on INPUT where it meets the addon for capsule */
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-inline-start: 0;
-    }
-
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-inline-end: 0;
-    }
-
-    /* Underlined variant with addons */
-    :host([underlined]) .ag-input__addon,
-    :host([underlined-with-background]) .ag-input__addon {
-      border-top: 0;
-      border-radius: 0;
-      background: transparent;
-    }
-
-    :host([underlined]) .ag-input__addon--left,
-    :host([underlined-with-background]) .ag-input__addon--left {
-      border-inline-start: 0;
-      border-inline-end: 0;
-    }
-
-    :host([underlined]) .ag-input__addon--right,
-    :host([underlined-with-background]) .ag-input__addon--right {
-      border-inline-end: 0;
-      border-inline-start: 0;
-    }
-
-    /* Remove border on INPUT where it meets the addon for underlined */
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-inline-start: 0;
-    }
-
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-inline-end: 0;
-    }
-
-    /* Underlined with background variant - add background to addon */
-    :host([underlined-with-background]) .ag-input__addon {
-      background-color: var(--ag-background-secondary);
-    }
-
-    /* Help & Error Text */
-    .ag-input__help,
-    .ag-input__error {
-      margin-block-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-sm);
-    }
-
-    .ag-input__help {
-      color: var(--ag-text-secondary);
-    }
-
-    .ag-input__error {
-      color: var(--ag-danger);
-    }
-
-    .ag-input__error[hidden] {
-      display: none !important;
-    }
-
-    .ag-input__required {
-      color: var(--ag-danger);
-      margin-inline-start: var(--ag-space-1);
-    }
-  `;
-
-  // Core element ID for label association
-  private _inputId = generateUniqueId('ag-input');
-
-  /**
-   * Label Architecture - Flexible but Accessible by Default
-   */
-  @property({ type: String })
-  declare label: string;
-
-  @property({ type: Boolean, attribute: 'label-hidden' })
-  declare labelHidden: boolean;
-
-  @property({ type: Boolean, attribute: 'no-label' })
-  declare noLabel: boolean;
-
-  @property({ type: String, reflect: true, attribute: 'aria-label' })
-  declare ariaLabel: string;
-
-  @property({ type: String, attribute: 'labelled-by' })
-  declare labelledBy: string;
-
-  /**
-   * Input properties
-   */
-  @property({ type: String })
-  declare type: string;
-
-  @property({ type: String, reflect: true })
-  declare value: string;
-
-  @property({ type: String })
-  declare placeholder: string;
-
-  /**
-   * Textarea-specific properties (when type="textarea")
-   */
-  @property({ type: Number })
-  declare rows: number;
-
-  @property({ type: Number })
-  declare cols: number;
-
-  /**
-   * v1 Parity - Size Variants
-   */
-  @property({ type: String, reflect: true })
-  declare size: 'small' | 'default' | 'large';
-
-  /**
-   * v1 Parity - Styling Variants
-   */
-  @property({ type: Boolean, reflect: true })
-  declare capsule: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare rounded: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare underlined: boolean;
-
-  @property({ type: Boolean, reflect: true, attribute: 'underlined-with-background' })
-  declare underlinedWithBackground: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare inline: boolean;
-
-  /**
-   * v1 Parity - Addon Support
-   * REMOVED: hasLeftAddon and hasRightAddon props - now auto-detected
-   */
-  private _hasLeftAddon = false;
-  private _hasRightAddon = false;
-
-  /**
-   * Validation & State
-   */
-  @property({ type: Boolean, reflect: true })
-  declare required: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare disabled: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare readonly: boolean;
-
-  @property({ type: Boolean, reflect: true })
-  declare invalid: boolean;
-
-  @property({ type: String, attribute: 'error-message' })
-  declare errorMessage: string;
-
-  @property({ type: String, attribute: 'help-text' })
-  declare helpText: string;
-
-  /**
-   * Event callback props (not reflected as attributes)
-   * Following AgnosticUI v2 event conventions for native events
-   */
-  @property({ attribute: false })
-  declare onClick?: (event: MouseEvent) => void;
-
-  @property({ attribute: false })
-  declare onInput?: (event: InputEvent) => void;
-
-  @property({ attribute: false })
-  declare onChange?: (event: Event) => void;
-
-  @property({ attribute: false })
-  declare onFocus?: (event: FocusEvent) => void;
-
-  @property({ attribute: false })
-  declare onBlur?: (event: FocusEvent) => void;
-
-  constructor() {
-    super();
-    this.label = '';
-    this.labelHidden = false;
-    this.noLabel = false;
-    this.ariaLabel = '';
-    this.labelledBy = '';
-    this.type = 'text';
-    this.value = '';
-    this.placeholder = '';
-    this.rows = 4;
-    this.cols = 50;
-    this.size = 'default';
-    this.capsule = false;
-    this.rounded = false;
-    this.underlined = false;
-    this.underlinedWithBackground = false;
-    this.inline = false;
-    this.required = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.invalid = false;
-    this.errorMessage = '';
-    this.helpText = '';
-  }
-
-  /**
-   * Event Handlers
-   * Following AgnosticUI v2 event conventions:
-   * - Native composed events (input, change, click) just invoke callbacks
-   * - Native non-bubbling events (focus, blur) re-dispatch from host + invoke callbacks
-   */
-  private _handleClick(e: MouseEvent) {
-    // Native click is composed - just invoke callback if provided
-    if (this.onClick) {
-      this.onClick(e);
-    }
-  }
-
-  private _handleInput(e: Event) {
-    const target = e.target as HTMLInputElement;
-    this.value = target.value;
-
-    // Native input is composed - just invoke callback if provided
-    if (this.onInput) {
-      this.onInput(e as InputEvent);
-    }
-  }
-
-  private _handleChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    this.value = target.value;
-
-    // Native change is composed - just invoke callback if provided
-    if (this.onChange) {
-      this.onChange(e);
-    }
-  }
-
-  private _handleFocus(e: FocusEvent) {
-    // Focus doesn't bubble - re-dispatch from host so consumers can listen
-    this.dispatchEvent(new FocusEvent('focus', {
-      bubbles: true,
-      composed: true,
-      relatedTarget: e.relatedTarget,
-    }));
-
-    // Invoke callback if provided
-    if (this.onFocus) {
-      this.onFocus(e);
-    }
-  }
-
-  private _handleBlur(e: FocusEvent) {
-    // Blur doesn't bubble - re-dispatch from host so consumers can listen
-    this.dispatchEvent(new FocusEvent('blur', {
-      bubbles: true,
-      composed: true,
-      relatedTarget: e.relatedTarget,
-    }));
-
-    // Invoke callback if provided
-    if (this.onBlur) {
-      this.onBlur(e);
-    }
-  }
-
-  /**
-   * Handle slot changes to detect if addons are present
-   */
-  private _handleSlotChange(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    const slotName = slot.name;
-
-    if (slotName === 'addon-left') {
-      this._hasLeftAddon = hasSlotContent(slot);
-    } else if (slotName === 'addon-right') {
-      this._hasRightAddon = hasSlotContent(slot);
-    }
-
-    this.requestUpdate();
-  }
-
-  override firstUpdated() {
-    // Initial check for slot content
-    // We need to defer this check to avoid "change in update" warning
-    setTimeout(() => {
-      const leftAddonSlot = this.shadowRoot?.querySelector('slot[name="addon-left"]') as HTMLSlotElement;
-      const rightAddonSlot = this.shadowRoot?.querySelector('slot[name="addon-right"]') as HTMLSlotElement;
-
-      const hadLeftAddon = this._hasLeftAddon;
-      const hadRightAddon = this._hasRightAddon;
-
-      this._hasLeftAddon = hasSlotContent(leftAddonSlot);
-      this._hasRightAddon = hasSlotContent(rightAddonSlot);
-
-      // Only request update if something changed
-      if (hadLeftAddon !== this._hasLeftAddon || hadRightAddon !== this._hasRightAddon) {
-        this.requestUpdate();
-      }
-    }, 0);
-  }
-
-  render() {
-    const isTextarea = this.type === 'textarea';
-    const hasAddons = this._hasLeftAddon || this._hasRightAddon;
-
-    // Generate IDs for help and error text
-    const helpId = `${this._inputId}-help`;
-    const errorId = `${this._inputId}-error`;
-
-    // Build aria-describedby list
-    const describedByIds: string[] = [];
-    if (this.helpText) {
-      describedByIds.push(helpId);
-    }
-    if (this.errorMessage) {
-      describedByIds.push(errorId);
-    }
-    // Include any external labelledBy reference
-    if (this.labelledBy) {
-      describedByIds.push(this.labelledBy);
-    }
-
-    // Build class list for wrapper
-    const classes = ['ag-input'];
-
-    // Size variant
-    if (this.size !== 'default') {
-      classes.push(`ag-input--${this.size}`);
-    }
-
-    // Styling variants
-    if (this.rounded) {
-      classes.push('ag-input--rounded');
-    }
-    if (this.underlined) {
-      classes.push('ag-input--underlined');
-    }
-    if (this.underlinedWithBackground) {
-      classes.push('ag-input--underlined-with-background');
-    }
-
-    // Render the input/textarea element
-    const inputElement = isTextarea ? html`
-      <textarea
-        id="${this._inputId}"
-        part="ag-textarea"
-        class="ag-input__textarea"
-        .value="${this.value}"
-        placeholder="${ifDefined(this.placeholder || undefined)}"
-        rows="${this.rows}"
-        cols="${this.cols}"
-        ?required="${this.required}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        aria-required="${this.required ? 'true' : 'false'}"
-        aria-invalid="${this.invalid ? 'true' : 'false'}"
-        aria-label="${ifDefined(this.ariaLabel || undefined)}"
-        aria-labelledby="${ifDefined(this.labelledBy || undefined)}"
-        aria-describedby="${describedByIds.length > 0 ? describedByIds.join(' ') : ifDefined(undefined)}"
-        @click=${this._handleClick}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-      ></textarea>
-    ` : html`
-      <input
-        type="${this.type}"
-        id="${this._inputId}"
-        part="ag-input"
-        class="ag-input__input"
-        .value="${this.value}"
-        placeholder="${ifDefined(this.placeholder || undefined)}"
-        ?required="${this.required}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        aria-required="${this.required ? 'true' : 'false'}"
-        aria-invalid="${this.invalid ? 'true' : 'false'}"
-        aria-label="${ifDefined(this.ariaLabel || undefined)}"
-        aria-labelledby="${ifDefined(this.labelledBy || undefined)}"
-        aria-describedby="${describedByIds.length > 0 ? describedByIds.join(' ') : ifDefined(undefined)}"
-        @click=${this._handleClick}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-      />
-    `;
-
-    return html`
-      <div class="${classes.join(' ')}" part="ag-input-wrapper">
-        ${!this.noLabel ? html`
-          <label
-            for="${this._inputId}"
-            part="ag-input-label"
-            class="ag-input__label ${this.labelHidden ? 'ag-input__label--hidden' : ''}"
-          >
-            ${this.label}
-            ${this.required ? html`
-              <span class="ag-input__required" part="ag-input-required" aria-hidden="true">*</span>
-            ` : ''}
-          </label>
-        ` : ''}
-
-        ${this.helpText ? html`
-          <div class="ag-input__help" id="${helpId}" part="ag-input-help">
-            ${this.helpText}
-          </div>
-        ` : ''}
-
-        ${this.errorMessage ? html`
-          <div class="ag-input__error" id="${errorId}" part="ag-input-error">
-            ${this.errorMessage}
-          </div>
-        ` : html`
-          <div class="ag-input__error" id="${errorId}" part="ag-input-error" hidden></div>
-        `}
-
-        ${hasAddons ? html`
-          <div class="ag-input__field" part="ag-input-field-wrapper">
-            ${this._hasLeftAddon ? html`
-              <div class="ag-input__addon ag-input__addon--left" part="ag-input-addon-left">
-                <slot name="addon-left" @slotchange=${this._handleSlotChange}></slot>
-              </div>
-            ` : html`
-              <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-            `}
-
-            ${inputElement}
-
-            ${this._hasRightAddon ? html`
-              <div class="ag-input__addon ag-input__addon--right" part="ag-input-addon-right">
-                <slot name="addon-right" @slotchange=${this._handleSlotChange}></slot>
-              </div>
-            ` : html`
-              <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-            `}
-          </div>
-        ` : html`
-          ${inputElement}
-          <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-          <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-        `}
-      </div>
-    `;
-  }
-}