@nuvia-ui/components 4.0.1

package/src/ds-input/ds-input.js

@@ -0,0 +1,645 @@
+import { LitElement, html, css } from 'lit';
+import { FieldMessageMixin, fieldMessageStyles } from '../mixins/field-message.mixin.js';
+import { fieldLabelStyles } from '../mixins/field-label.mixin.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-tooltip/ds-tooltip.js';
+import { clampValue } from '../utils/number-input.utils.js';
+
+/**
+ * Input component for forms with label, help text, and validation states
+ * 
+ * @element ds-input
+ * 
+ * @prop {string} label - Label text (optional)
+ * @prop {string} info - Info tooltip text for info button
+ * @prop {string} labelPosition - Label position: 'top' | 'inline-start' (default: 'top')
+ * @prop {string} labelWidth - Fixed label width for inline layout (e.g., '100px')
+ * @prop {string} placeholder - Placeholder text
+ * @prop {string} value - Input value
+ * @prop {string} type - Input type: 'text' | 'email' | 'password' | 'number' (default: 'text')
+ * @prop {string} helper - Help text below field
+ * @prop {string} validationStatus - Validation state: 'error' | 'success' | undefined
+ * @prop {string} validationMessage - Validation message to display
+ * @prop {boolean} disabled - Disabled state
+ * @prop {boolean} readonly - Read-only state
+ * @prop {boolean} required - Required field
+ * @prop {boolean} showPasswordToggle - Show password visibility toggle for password inputs
+ * @prop {boolean} clearable - Show clear button when input is focused and has value
+ * @prop {boolean} hideSteppers - Hide increment/decrement buttons for number inputs
+ * @prop {number} step - Step increment for number inputs (default: 1)
+ * @prop {string} autocomplete - Autocomplete attribute for native input
+ * @prop {string} width - Width of the input (CSS value, e.g. '60px', '100%')
+ * @prop {string} textAlign - Text alignment within input ('left' | 'center' | 'right')
+ * @prop {number} min - Minimum value for number inputs
+ * @prop {number} max - Maximum value for number inputs
+ * @prop {boolean} clamp - Enable auto-clamping on blur/Enter for number inputs
+ * 
+ * @slot prefix - Custom content before input field
+ * @slot suffix - Custom content after input field
+ * @slot action - Custom icon/button inside field (right side)
+ * 
+ * @fires input - Fired when input value changes
+ * @fires change - Fired when input loses focus
+ * @fires info-click - Fired when info button is clicked
+ */
+export class DsInput extends FieldMessageMixin(LitElement) {
+  static properties = {
+    label: { type: String },
+    info: { type: String },
+    labelPosition: { type: String, attribute: 'label-position' },
+    labelWidth: { type: String, attribute: 'label-width' },
+    placeholder: { type: String },
+    value: { type: String },
+    type: { type: String },
+    helper: { type: String },
+    validationStatus: { type: String, reflect: true, attribute: 'validation-status' },
+    validationMessage: { type: String, attribute: 'validation-message' },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    showPasswordToggle: { type: Boolean, attribute: 'show-password-toggle' },
+    clearable: { type: Boolean },
+    hideSteppers: { type: Boolean, attribute: 'hide-steppers' },
+    step: { type: Number },
+    autocomplete: { type: String },
+    width: { type: String },
+    textAlign: { type: String, attribute: 'text-align' },
+    min: { type: Number },
+    max: { type: Number },
+    clamp: { type: Boolean },
+    _hasPrefix: { state: true },
+    _hasSuffix: { state: true },
+    _isPasswordVisible: { state: true },
+    _isFocused: { state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: var(--ds-input-computed-width, var(--ds-input-width, 100%));
+      box-sizing: border-box;
+      min-width: 0; /* Enable flex shrinking by default */
+      --input-height: 32px;
+      --input-padding-y: 5px;
+      --input-padding-x: var(--ds-space-sm);
+    }
+
+    .field-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-xs); /* 4px gap between sections */
+    }
+
+    /* Label styles from mixin */
+    ${fieldLabelStyles}
+
+    /* Input container */
+    .input-container {
+      display: flex;
+      align-items: center;
+    }
+
+    /* Field wrapper with border */
+    .input-field {
+      flex: 1;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      gap: var(--ds-space-xs);
+      
+      /* Height calculation: 20px (line-height) + 10px (padding) + 2px (border) = 32px */
+      height: var(--input-height);
+      padding: var(--input-padding-y) var(--input-padding-x);
+      border: 1px solid var(--ds-color-border-strong);
+      border-radius: var(--ds-radius-input);
+      background: var(--ds-color-bg-default);
+      
+      box-sizing: border-box;
+      transition: background-color 0.2s, border-color 0.2s;
+    }
+
+    /* Input element */
+    input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      outline: none;
+      
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+      min-width: 0; /* Allow input to shrink */
+      height: 100%;
+      -moz-appearance: textfield; /* Firefox */
+    }
+
+    /* Hide native spin buttons */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input::placeholder {
+      color: var(--ds-color-text-secondary);
+    }
+
+    /* Prefix/Suffix text slots - Hidden by default unless content detected */
+    .prefix-wrapper,
+    .suffix-wrapper {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-secondary);
+      white-space: nowrap;
+      display: none;
+    }
+    
+    .prefix-wrapper.has-content {
+      display: block;
+      margin-right: var(--ds-space-sm);
+    }
+    
+    .suffix-wrapper.has-content {
+      display: block;
+      margin-left: var(--ds-space-sm);
+    }
+
+    /* Slotted action content - constrain size */
+    ::slotted([slot="action"]) {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      max-height: calc(var(--input-height) - 10px);
+      max-width: calc(var(--input-height) - 10px);
+    }
+
+    /* States */
+    
+    /* Hover */
+    :host(:not([disabled]):not([readonly])) .input-field:hover {
+      background: var(--ds-color-bg-hover);
+    }
+
+    /* Focus */
+    :host(:not([disabled]):not([readonly])) .input-field:focus-within {
+      border-color: var(--ds-color-border-focus);
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: -1px;
+    }
+
+    /* Disabled - no visible border */
+    :host([disabled]) .input-field {
+      background: var(--ds-color-bg-disabled);
+      border: 1px solid transparent;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) input {
+      color: var(--ds-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    /* Read-only - no visible border, no background */
+    :host([readonly]) .input-field {
+      background: transparent;
+      border: 1px solid transparent;
+    }
+
+    :host([readonly]) input {
+      cursor: default;
+    }
+
+    /* Validation states */
+    :host([validation-status="error"]) .input-field {
+      border-color: var(--ds-color-border-error);
+    }
+
+    :host([validation-status="success"]) .input-field {
+      border-color: var(--ds-color-border-success, var(--ds-color-border-strong));
+    }
+
+    /* Message styles from mixin */
+    ${fieldMessageStyles}
+  `;
+
+  constructor() {
+    super();
+    this.label = '';
+    this.info = '';
+    this.labelPosition = 'top';
+    this.labelWidth = '';
+    this.placeholder = '';
+    this.value = '';
+    this.type = 'text';
+    this.helper = '';
+    this.validationStatus = undefined;
+    this.validationMessage = '';
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.showPasswordToggle = false;
+    this.clearable = false;
+    this.hideSteppers = false;
+    this.step = 1;
+    this.autocomplete = undefined;
+    this.width = undefined;
+    this.textAlign = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.clamp = false;
+    this._hasPrefix = false;
+    this._hasSuffix = false;
+    this._isPasswordVisible = false;
+    this._isFocused = false;
+  }
+
+  /**
+   * Select all text in the input field.
+   * @public
+   */
+  selectAll() {
+    const input = this.shadowRoot?.querySelector('input');
+    input?.select();
+  }
+
+  /**
+   * Force-set the value, bypassing reactive update detection.
+   * Used when external logic clamps/transforms the value.
+   * @param {string} value - The value to set
+   * @public
+   */
+  forceValue(value) {
+    this.value = value;
+    const input = this.shadowRoot?.querySelector('input');
+    if (input) input.value = value;
+    this.requestUpdate();
+  }
+
+  updated(changedProperties) {
+    super.updated?.(changedProperties);
+
+    // Handle width prop
+    if (changedProperties.has('width')) {
+      if (this.width) {
+        this.style.setProperty('--ds-input-computed-width', this.width);
+      } else {
+        this.style.removeProperty('--ds-input-computed-width');
+      }
+    }
+
+    // Handle textAlign prop
+    if (changedProperties.has('textAlign')) {
+      const input = this.shadowRoot?.querySelector('input');
+      if (input) {
+        input.style.textAlign = this.textAlign || '';
+      }
+    }
+  }
+
+  _handleSlotChange(e) {
+    const name = e.target.getAttribute('name');
+    const nodes = e.target.assignedNodes({ flatten: true });
+    // Check if there are any non-text nodes or non-empty text nodes
+    const hasContent = nodes.some(node =>
+      node.nodeType !== Node.TEXT_NODE || node.textContent.trim() !== ''
+    );
+
+    if (name === 'prefix') this._hasPrefix = hasContent;
+    if (name === 'suffix') this._hasSuffix = hasContent;
+
+    this.requestUpdate();
+  }
+
+  _togglePassword() {
+    this._isPasswordVisible = !this._isPasswordVisible;
+  }
+
+  _incrementNumber() {
+    if (this.readonly || this.disabled) return;
+    const input = this.shadowRoot.querySelector('input');
+    const currentValue = parseFloat(input.value) || 0;
+    const step = this.step || 1;
+    let newValue = currentValue + step;
+
+    // Clamp to max if defined
+    if (this.max !== undefined && newValue > this.max) {
+      newValue = this.max;
+    }
+
+    // Don't update if already at max
+    if (this.max !== undefined && currentValue >= this.max) return;
+
+    // Preserve decimal precision based on step
+    const decimalPlaces = (step.toString().split('.')[1] || '').length;
+    const formattedValue = decimalPlaces > 0 ? newValue.toFixed(decimalPlaces) : newValue.toString();
+
+    input.value = formattedValue;
+    this.value = formattedValue;
+    this._dispatchInputEvent();
+  }
+
+  _decrementNumber() {
+    if (this.readonly || this.disabled) return;
+    const input = this.shadowRoot.querySelector('input');
+    const currentValue = parseFloat(input.value) || 0;
+    const step = this.step || 1;
+    let newValue = currentValue - step;
+
+    // Clamp to min if defined
+    if (this.min !== undefined && newValue < this.min) {
+      newValue = this.min;
+    }
+
+    // Don't update if already at min
+    if (this.min !== undefined && currentValue <= this.min) return;
+
+    // Preserve decimal precision based on step
+    const decimalPlaces = (step.toString().split('.')[1] || '').length;
+    const formattedValue = decimalPlaces > 0 ? newValue.toFixed(decimalPlaces) : newValue.toString();
+
+    input.value = formattedValue;
+    this.value = formattedValue;
+    this._dispatchInputEvent();
+  }
+
+  _dispatchInputEvent() {
+    this.dispatchEvent(new CustomEvent('input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleClear() {
+    this.value = '';
+    const input = this.shadowRoot.querySelector('input');
+    if (input) {
+      input.value = '';
+      input.focus();
+    }
+    this._dispatchInputEvent();
+  }
+
+  _handleInputFocus(e) {
+    this._isFocused = true;
+    if (this.value && e.target.value) {
+      e.target.select();
+    }
+  }
+
+  _handleInputBlur() {
+    this._isFocused = false;
+    this._applyClampingIfNeeded();
+  }
+
+  _handleKeyDown(e) {
+    if (e.key === 'Escape' && this.value && this.clearable) {
+      this._handleClear();
+      e.preventDefault();
+    }
+    // Apply clamping on Enter for number inputs
+    if (e.key === 'Enter' && this.type === 'number' && this.clamp) {
+      this._applyClampingIfNeeded();
+    }
+    // Handle Arrow Up/Down for number inputs with min/max constraints
+    if (this.type === 'number' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      // Always prevent default to override browser's native number input behavior
+      e.preventDefault();
+
+      const currentValue = parseFloat(this.value) || 0;
+      const step = this.step || 1;
+      let newValue;
+
+      if (e.key === 'ArrowUp') {
+        // Already at max, do nothing
+        if (this.max !== undefined && currentValue >= this.max) return;
+
+        newValue = currentValue + step;
+        // Clamp to max if defined
+        if (this.max !== undefined && newValue > this.max) {
+          newValue = this.max;
+        }
+      } else {
+        // Already at min, do nothing
+        if (this.min !== undefined && currentValue <= this.min) return;
+
+        newValue = currentValue - step;
+        // Clamp to min if defined
+        if (this.min !== undefined && newValue < this.min) {
+          newValue = this.min;
+        }
+      }
+
+      // Preserve decimal precision
+      const decimalPlaces = (step.toString().split('.')[1] || '').length;
+      const formattedValue = decimalPlaces > 0 ? newValue.toFixed(decimalPlaces) : newValue.toString();
+
+      const input = this.shadowRoot.querySelector('input');
+      input.value = formattedValue;
+      this.value = formattedValue;
+      this._dispatchInputEvent();
+    }
+  }
+
+  /**
+   * Apply clamping logic for number inputs with min/max.
+   * @private
+   */
+  _applyClampingIfNeeded() {
+    if (this.type !== 'number' || !this.clamp) return;
+    if (this.min === undefined && this.max === undefined) return;
+
+    const min = this.min ?? -Infinity;
+    const max = this.max ?? Infinity;
+    const fallback = this.min ?? 0;
+
+    const clamped = clampValue(this.value, min, max, fallback);
+    const clampedStr = clamped.toString();
+
+    if (clampedStr !== this.value) {
+      this.forceValue(clampedStr);
+    }
+  }
+
+  render() {
+    const hasError = this.validationStatus === 'error';
+    const errorMessage = hasError ? this.validationMessage : '';
+    const inputId = 'input-field';
+    const messageId = 'field-message';
+    const isInline = this.labelPosition === 'inline-start';
+    const wrapperClass = isInline ? 'field-wrapper inline-label' : 'field-wrapper';
+    const labelStyle = isInline && this.labelWidth ? `width: ${this.labelWidth}` : '';
+
+    // Determine input type (handle password toggle)
+    let inputType = this.type;
+    if (this.type === 'password' && this._isPasswordVisible) {
+      inputType = 'text';
+    }
+
+    const inputContent = html`
+      <div class="input-container">
+        <div class="prefix-wrapper ${this._hasPrefix ? 'has-content' : ''}">
+          <slot name="prefix" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        
+        <div class="input-field" part="field">
+          <input
+            id="${inputId}"
+            type=${inputType}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            autocomplete=${this.autocomplete || 'off'}
+            min=${this.min !== undefined ? this.min : ''}
+            max=${this.max !== undefined ? this.max : ''}
+            style="text-align: ${this.textAlign || 'left'}"
+            aria-invalid=${hasError ? 'true' : 'false'}
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-describedby=${this.helper || errorMessage ? messageId : ''}
+            aria-label=${!this.label ? this.placeholder || 'Input' : ''}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @focus=${this._handleInputFocus}
+            @blur=${this._handleInputBlur}
+            @keydown=${this._handleKeyDown}
+            part="input"
+          />
+          
+          ${this.clearable && this.value && this._isFocused ? html`
+            <ds-icon-button
+              icon="close"
+              variant="action"
+              size="s"
+              aria-label="Clear input"
+              tabindex="-1"
+              @mousedown=${(e) => e.preventDefault()}
+              @click=${this._handleClear}
+            ></ds-icon-button>
+          ` : ''}
+          
+          ${this.type === 'password' && this.showPasswordToggle ? html`
+            <ds-icon-button
+              icon="${this._isPasswordVisible ? 'visibility-off' : 'visibility'}"
+              variant="action"
+              size="s"
+              aria-label="${this._isPasswordVisible ? 'Hide password' : 'Show password'}"
+              @click=${this._togglePassword}
+            ></ds-icon-button>
+          ` : ''}
+          
+          ${this.type === 'number' && !this.hideSteppers ? html`
+            <ds-icon-button
+              icon="remove"
+              variant="action"
+              size="s"
+              aria-label="Decrease value"
+              @click=${this._decrementNumber}
+              ?disabled=${this.disabled || this.readonly || (this.min !== undefined && parseFloat(this.value) <= this.min)}
+            ></ds-icon-button>
+            <ds-icon-button
+              icon="add"
+              variant="action"
+              size="s"
+              aria-label="Increase value"
+              @click=${this._incrementNumber}
+              ?disabled=${this.disabled || this.readonly || (this.max !== undefined && parseFloat(this.value) >= this.max)}
+            ></ds-icon-button>
+          ` : ''}
+
+          <slot name="action"></slot>
+        </div>
+        
+        <div class="suffix-wrapper ${this._hasSuffix ? 'has-content' : ''}">
+          <slot name="suffix" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+      
+      ${this.helper || errorMessage ? html`
+        <div id="${messageId}">
+          ${this.renderFieldMessage(this.helper, errorMessage)}
+        </div>
+      ` : ''}
+    `;
+
+    if (isInline) {
+      return html`
+        <div class="${wrapperClass}">
+          <div class="label-row" part="label-row" style="${labelStyle}">
+            ${this.label ? html`<label for="${inputId}">${this.label}</label>` : ''}
+            ${this.info ? html`
+              <ds-tooltip content="${this.info}" placement="top">
+                <ds-icon-button 
+                  icon="info" 
+                  variant="action"
+                  size="s"
+                  aria-label="More information"
+                  @click=${this._handleInfoClick}
+                ></ds-icon-button>
+              </ds-tooltip>
+            ` : ''}
+          </div>
+          <div class="field-content">
+            ${inputContent}
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="field-wrapper">
+        ${this.label ? html`
+          <div class="label-row" part="label-row">
+            <label for="${inputId}">${this.label}</label>
+            ${this.info ? html`
+              <ds-tooltip content="${this.info}" placement="top">
+                <ds-icon-button 
+                  icon="info" 
+                  variant="action"
+                  size="s"
+                  aria-label="More information"
+                  @click=${this._handleInfoClick}
+                ></ds-icon-button>
+              </ds-tooltip>
+            ` : ''}
+          </div>
+        ` : ''}
+        ${inputContent}
+      </div>
+    `;
+  }
+
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+
+  _handleInput(e) {
+    this.value = e.target.value;
+
+    this.dispatchEvent(new CustomEvent('input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleChange(e) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+
+customElements.define('ds-input', DsInput);