@nuvia-ui/components 4.0.1

package/src/ds-textarea/ds-textarea.js

@@ -0,0 +1,505 @@
+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-button/ds-icon-button.js';
+import '../ds-tooltip/ds-tooltip.js';
+
+/**
+ * Textarea component for multi-line text input with label, counter, and validation
+ * 
+ * @element ds-textarea
+ * 
+ * @prop {string} label - Label text (optional)
+ * @prop {string} info - Info tooltip text for info button
+ * @prop {string} placeholder - Placeholder text
+ * @prop {string} value - Textarea value
+ * @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 {number} rows - Number of visible text lines (default: 3)
+ * @prop {number} minlength - Minimum character length
+ * @prop {number} maxlength - Maximum character length
+ * @prop {boolean} showCounter - Show character counter (requires maxlength)
+ * @prop {string} resize - Resize behavior: 'none' | 'vertical' (default: 'vertical')
+ * @prop {boolean} autoResize - Auto-grow with content
+ * @prop {boolean} clearable - Show clear button when textarea is focused and has value
+ * @prop {string} labelPosition - Label position: 'top' | 'inline-start' (default: 'top')
+ * @prop {string} labelWidth - Fixed label width for inline layout (e.g., '100px')
+ * 
+ * @fires input - Fired when textarea value changes
+ * @fires change - Fired when textarea loses focus
+ * @fires info-click - Fired when info button is clicked
+ */
+export class DsTextarea 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 },
+    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 },
+    rows: { type: Number },
+    minlength: { type: Number },
+    maxlength: { type: Number },
+    showCounter: { type: Boolean, attribute: 'show-counter' },
+    resize: { type: String, reflect: true },
+    autoResize: { type: Boolean, attribute: 'auto-resize' },
+    clearable: { type: Boolean },
+    _isFocused: { type: Boolean, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .field-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-xs); /* 4px gap between sections */
+    }
+
+    /* Label styles from mixin with counter support */
+    ${fieldLabelStyles}
+
+    .label-row {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ds-space-xs);
+      justify-content: space-between; /* Push counter to the right */
+    }
+
+    .label-content {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ds-space-xs);
+    }
+
+    .label-row label {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+      line-height: 24px;
+      cursor: pointer;
+    }
+
+    .label-row ds-icon-button {
+      flex-shrink: 0;
+    }
+
+    .counter {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-secondary);
+      line-height: 24px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .counter.over-limit {
+      color: var(--ds-color-text-error);
+    }
+
+    /* Inline label layout */
+    .field-wrapper.inline-label {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--ds-space-sm, 8px);
+    }
+
+    .field-wrapper.inline-label .label-row {
+      flex-shrink: 0;
+      padding-top: 4px; /* Align label text with first line of textarea */
+      justify-content: flex-end;
+    }
+
+    .field-wrapper.inline-label .field-content {
+      flex: 1;
+      min-width: 0; /* Allow shrinking */
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-xs);
+    }
+
+    /* Textarea field wrapper */
+    .textarea-field {
+      display: flex;
+      flex-direction: column;
+      padding: var(--ds-space-xs) var(--ds-space-sm); /* 4px vertical, 8px horizontal */
+      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;
+      position: relative; /* For clear button positioning */
+    }
+
+    /* Action container for clear button */
+    .action-container {
+      position: absolute;
+      top: var(--ds-space-xs);
+      right: var(--ds-space-xs);
+      display: flex;
+      gap: var(--ds-space-2xs);
+      pointer-events: none; /* Let clicks pass through to textarea */
+    }
+
+    .action-container ds-icon-button {
+      pointer-events: auto; /* But buttons should be clickable */
+    }
+
+    /* Textarea element */
+    textarea {
+      border: none;
+      background: transparent;
+      outline: none;
+      resize: vertical; /* Default */
+      
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      line-height: 20px; /* Match body line-height */
+      
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      
+      /* Minimum height to ensure field total is at least 32px (24px + 8px padding) */
+      min-height: 24px;
+    }
+
+    textarea::placeholder {
+      color: var(--ds-color-text-secondary);
+    }
+
+    /* Resize variants */
+    :host([resize="none"]) textarea {
+      resize: none;
+    }
+
+    :host([resize="vertical"]) textarea {
+      resize: vertical;
+    }
+
+    /* Auto-resize: disable manual resize and scroll */
+    :host([auto-resize]) textarea {
+      resize: none;
+      overflow-y: hidden;
+    }
+
+    /* States */
+    
+    /* Hover */
+    :host(:not([disabled]):not([readonly])) .textarea-field:hover {
+      background: var(--ds-color-bg-hover);
+    }
+
+    /* Focus */
+    :host(:not([disabled]):not([readonly])) .textarea-field:has(textarea:focus) {
+      border-color: var(--ds-color-border-focus);
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: -1px;
+    }
+
+    /* Disabled */
+    :host([disabled]) .textarea-field {
+      background: var(--ds-color-bg-disabled);
+      border: 1px solid transparent;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) textarea {
+      color: var(--ds-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    /* Read-only */
+    :host([readonly]) .textarea-field {
+      background: transparent;
+      border: 1px solid transparent;
+    }
+
+    :host([readonly]) textarea {
+      cursor: default;
+    }
+
+    /* Validation states */
+    :host([validation-status="error"]) .textarea-field {
+      border-color: var(--ds-color-border-error);
+    }
+
+    :host([validation-status="success"]) .textarea-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.helper = '';
+    this.validationStatus = undefined;
+    this.validationMessage = '';
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.rows = 3;
+    this.minlength = undefined;
+    this.maxlength = undefined;
+    this.showCounter = false;
+    this.resize = 'vertical';
+    this.autoResize = false;
+    this.clearable = false;
+    this._isFocused = false;
+  }
+
+  firstUpdated() {
+    // Adjust height on initial render if auto-resize is enabled
+    if (this.autoResize) {
+      this._adjustHeight();
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    // Handle auto-resize on value or autoResize property change
+    if (this.autoResize && (changedProperties.has('value') || changedProperties.has('autoResize'))) {
+      this._adjustHeight();
+    }
+  }
+
+  _adjustHeight() {
+    if (!this.autoResize) return;
+
+    const textarea = this.shadowRoot.querySelector('textarea');
+    if (!textarea) return;
+
+    // Store the current scroll position
+    const scrollTop = textarea.scrollTop;
+
+    // Reset height to get the true scrollHeight
+    const previousHeight = textarea.style.height;
+    textarea.style.height = '0px';
+
+    // Calculate the minimum height based on rows
+    const lineHeight = 20; // px - from CSS
+    const minHeight = this.rows * lineHeight;
+
+    // Get the scroll height (content height)
+    const scrollHeight = textarea.scrollHeight;
+
+    // Set height to the larger of minHeight or scrollHeight
+    const newHeight = Math.max(minHeight, scrollHeight);
+    textarea.style.height = `${newHeight}px`;
+
+    // Restore scroll position if needed
+    textarea.scrollTop = scrollTop;
+  }
+
+  _handleInput(e) {
+    this.value = e.target.value;
+
+    if (this.autoResize) {
+      this._adjustHeight();
+    }
+
+    this._dispatchInputEvent();
+  }
+
+  _dispatchInputEvent() {
+    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
+    }));
+  }
+
+  _handleFocus() {
+    this._isFocused = true;
+  }
+
+  _handleBlur() {
+    this._isFocused = false;
+  }
+
+  _handleKeyDown(e) {
+    // Clear on Escape key
+    if (e.key === 'Escape' && this.value && this.clearable) {
+      e.preventDefault();
+      this._handleClear();
+    }
+  }
+
+  _handleClear() {
+    this.value = '';
+    const textarea = this.shadowRoot.querySelector('textarea');
+    if (textarea) {
+      textarea.value = '';
+      textarea.focus();
+    }
+    this._dispatchInputEvent();
+  }
+
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+
+  _getCharacterCount() {
+    return this.value ? this.value.length : 0;
+  }
+
+  _isOverLimit() {
+    if (!this.maxlength) return false;
+    return this._getCharacterCount() > this.maxlength;
+  }
+
+  render() {
+    const hasError = this.validationStatus === 'error';
+    const errorMessage = hasError ? this.validationMessage : '';
+    const textareaId = 'textarea-field';
+    const messageId = 'field-message';
+    const showCounter = this.showCounter && this.maxlength;
+    const charCount = this._getCharacterCount();
+    const overLimit = this._isOverLimit();
+    const isInline = this.labelPosition === 'inline-start';
+    const wrapperClass = isInline ? 'field-wrapper inline-label' : 'field-wrapper';
+    const labelStyle = isInline && this.labelWidth ? `width: ${this.labelWidth}` : '';
+
+    const textareaFieldContent = html`
+      <div class="textarea-field" part="field">
+        <textarea
+          id="${textareaId}"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          rows=${this.rows}
+          minlength=${this.minlength || undefined}
+          maxlength=${this.maxlength || undefined}
+          aria-invalid=${hasError ? 'true' : 'false'}
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-describedby=${this.helper || errorMessage ? messageId : ''}
+          aria-label=${!this.label ? this.placeholder || 'Textarea' : ''}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          @keydown=${this._handleKeyDown}
+          part="textarea"
+        ></textarea>
+        
+        ${this.clearable && this.value && this._isFocused ? html`
+          <div class="action-container">
+            <ds-icon-button
+              icon="close"
+              variant="action"
+              size="s"
+              aria-label="Clear textarea"
+              tabindex="-1"
+              @mousedown=${(e) => e.preventDefault()}
+              @click=${this._handleClear}
+            ></ds-icon-button>
+          </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}">
+            <div class="label-content">
+              ${this.label ? html`<label for="${textareaId}">${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>
+          <div class="field-content">
+            ${showCounter ? html`
+              <div style="text-align: right;">
+                <span class="counter ${overLimit ? 'over-limit' : ''}">${charCount}/${this.maxlength}</span>
+              </div>
+            ` : ''}
+            ${textareaFieldContent}
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="field-wrapper">
+        ${this.label || showCounter ? html`
+          <div class="label-row" part="label-row">
+            <div class="label-content">
+              ${this.label ? html`<label for="${textareaId}">${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>
+            ${showCounter ? html`
+              <span class="counter ${overLimit ? 'over-limit' : ''}">${charCount}/${this.maxlength}</span>
+            ` : ''}
+          </div>
+        ` : ''}
+        ${textareaFieldContent}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-textarea', DsTextarea);