@sondor-technology/sondor-components 1.0.4 → 1.0.6

package/src/components/select/select.ts

@@ -1,162 +1,533 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state, query} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
 
-@customElement('st-select')
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export type SelectAutocomplete =
+  | "on"
+  | "off"
+  | "name"
+  | "honorific-prefix"
+  | "given-name"
+  | "additional-name"
+  | "family-name"
+  | "honorific-suffix"
+  | "nickname"
+  | "email"
+  | "username"
+  | "new-password"
+  | "current-password"
+  | "one-time-code"
+  | "organization"
+  | "organization-title"
+  | "url"
+  | "photo"
+  | "webauthn"
+  | "street-address"
+  | "address-line1"
+  | "address-line2"
+  | "address-line3"
+  | "address-level1"
+  | "address-level2"
+  | "address-level3"
+  | "address-level4"
+  | "country"
+  | "country-name"
+  | "postal-code"
+  | "cc-name"
+  | "cc-given-name"
+  | "cc-additional-name"
+  | "cc-family-name"
+  | "cc-number"
+  | "cc-exp"
+  | "cc-exp-month"
+  | "cc-exp-year"
+  | "cc-csc"
+  | "cc-type"
+  | "transaction-currency"
+  | "transaction-amount"
+  | "language"
+  | "bday"
+  | "bday-day"
+  | "bday-month"
+  | "bday-year"
+  | "sex"
+  | "tel"
+  | "tel-country-code"
+  | "tel-national"
+  | "tel-area-code"
+  | "tel-local"
+  | "tel-local-prefix"
+  | "tel-local-suffix"
+  | "tel-extension"
+  | "impp"
+  | (string & {});
+
+@customElement("st-select")
 export class StSelect extends LitElement {
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
-  @property({ type: String, reflect: true }) variant: 'outline' | 'filled' = 'outline';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'error' = 'default';
-  
-  // Internal state to handle the chevron animation when the slotted select is focused
-  @property({ type: Boolean, reflect: true }) focused = false;
+  static formAssociated = true;
+  private internals: ElementInternals;
+
+  @property({type: String}) name = "";
+  @property({type: String}) label = "";
+  @property({type: String}) value = "";
+  @property({type: Boolean}) required = false;
+  @property({type: Boolean}) multiple = false;
+  @property({type: Boolean}) searchable = false;
+  @property({type: Array}) options: SelectOption[] = [];
+  @property({type: String}) error = "";
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: String}) autocomplete: SelectAutocomplete = "off";
+
+  @state() private open = false;
+  @state() private filterText = "";
+  @state() private nativeError = "";
+  @state() private touched = false;
+
+  @query(".combobox") private buttonElement!: HTMLElement;
+  @query(".search-input") private searchInputEl?: HTMLInputElement;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: inherit;
+      position: relative;
+    }
+
+    label {
+      display: block;
+      font-size: var(--st-font-size-sm);
+      font-weight: 500;
+      color: var(--st-color-text-muted);
+      margin-bottom: var(--st-spacing-xs);
+    }
+
+    .combobox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      min-height: 42px;
+      padding: var(--st-spacing-xs) var(--st-spacing-md);
+      background: var(--st-color-surface);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-md);
+      font-size: var(--st-font-size-base);
+      color: var(--st-color-text);
+      cursor: pointer;
+      text-align: left;
+      box-sizing: border-box;
+      transition:
+        border-color 0.2s,
+        box-shadow 0.2s,
+        background-color 0.2s;
+    }
+
+    .combobox:disabled {
+      background: var(--st-color-surface-muted);
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    .combobox.is-invalid {
+      border-color: var(--st-color-danger, #dc2626);
+    }
+
+    .combobox:focus-visible {
+      outline: none;
+      border-color: var(--st-color-primary);
+      box-shadow: 0 0 0 2px var(--st-color-primary-muted);
+    }
+
+    .combobox.is-placeholder {
+      color: var(--st-color-text-muted);
+    }
+
+    .selection-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      align-items: center;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      background: var(--st-color-surface-muted);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      padding: 2px 6px;
+      font-size: var(--st-font-size-xs);
+      color: var(--st-color-text);
+    }
+
+    .listbox-container {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      z-index: 10;
+      background: var(--st-color-surface);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-md);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+    }
+
+    .search-wrapper {
+      padding: var(--st-spacing-xs);
+      border-bottom: 1px solid var(--st-color-border);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: var(--st-spacing-xs) var(--st-spacing-sm);
+      background: var(--st-color-surface-muted);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      font-size: var(--st-font-size-sm);
+      color: var(--st-color-text);
+      box-sizing: border-box;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--st-color-primary);
+    }
+
+    .listbox {
+      margin: 0;
+      padding: var(--st-spacing-xs) 0;
+      max-height: 220px;
+      overflow-y: auto;
+      list-style: none;
+    }
+
+    .option {
+      padding: var(--st-spacing-sm) var(--st-spacing-md);
+      cursor: pointer;
+      color: var(--st-color-text);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .option:hover {
+      background: var(--st-color-surface-muted);
+    }
+
+    .option[aria-selected="true"] {
+      font-weight: 500;
+      color: var(--st-color-primary);
+    }
+
+    .error-msg {
+      display: block;
+      margin-top: var(--st-spacing-xs);
+      font-size: var(--st-font-size-xs);
+      color: var(--st-color-danger, #dc2626);
+    }
+
+    .hidden-native {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    }
+  `;
 
   constructor() {
     super();
-    // Track focus states to animate the chevron
-    this.addEventListener('focusin', () => this.focused = true);
-    this.addEventListener('focusout', () => this.focused = false);
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
+    this.internals = this.attachInternals();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
 
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
+  public checkValidity(): boolean {
+    return this.internals.checkValidity();
+  }
 
-      /* 
-        Target the native select provided by the user in the Light DOM.
-        This completely bypasses the browser rendering bug.
-      */
-      ::slotted(select) {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 100%;
-        font-family: inherit;
-        background-color: transparent;
-        border-radius: var(--st-radius-md, 0.5rem);
-        color: var(--st-color-text);
-        cursor: pointer;
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-      }
+  public reportValidity(): boolean {
+    const isValid = this.checkValidity();
+    this.touched = true;
+    this.invalid = !isValid;
+    return isValid;
+  }
 
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
+  public override focus(options?: FocusOptions) {
+    this.buttonElement?.focus(options);
+  }
 
-      /* ==========================================================
-         Sizes
-         ========================================================== */
-      :host([size="sm"]) ::slotted(select) {
-        padding: 0.25rem 2rem 0.25rem 0.75rem;
-        font-size: 0.875rem;
-        height: 2rem;
-      }
-      :host([size="md"]) ::slotted(select) {
-        padding: 0.5rem 2.5rem 0.5rem 1rem;
-        font-size: 1rem;
-        height: 2.5rem;
-      }
-      :host([size="lg"]) ::slotted(select) {
-        padding: 0.75rem 3rem 0.75rem 1.25rem;
-        font-size: 1.125rem;
-        height: 3rem;
-      }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleClickOutside);
 
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
+    this.addEventListener("invalid", () => {
+      this.touched = true;
+      this.invalid = true;
+    });
+  }
 
-      /* ==========================================================
-         Variants & Colors
-         ========================================================== */
-      :host([variant="outline"]) ::slotted(select) {
-        border: 1px solid var(--st-color-border);
-      }
-      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
-      }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.handleClickOutside);
+    super.disconnectedCallback();
+  }
 
-      :host([variant="filled"]) ::slotted(select) {
-        border: 1px solid transparent;
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
-      }
-      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
-        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
-      }
-      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        background-color: transparent;
-      }
+  override willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("required") ||
+      changedProperties.has("error")
+    ) {
+      this.validate();
+    }
+  }
 
-      /* Error Color State */
-      :host([color="error"]) ::slotted(select) {
-        border-color: var(--st-color-error, #ef4444);
-      }
-      :host([color="error"]) ::slotted(select:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-      }
+  private get selectedValues(): string[] {
+    if (!this.value) return [];
+    return this.value
+      .split(",")
+      .map((v) => v.trim())
+      .filter(Boolean);
+  }
 
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
+  private validate() {
+    this.internals.setFormValue(this.value);
 
-      /* ==========================================================
-         Chevron Icon
-         ========================================================== */
-      .chevron {
-        position: absolute;
-        right: 0.75rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        pointer-events: none;
-        color: var(--st-color-text-muted);
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
+    const isMissing = this.required && this.selectedValues.length === 0;
+
+    if (this.error) {
+      this.internals.setValidity({customError: true}, this.error);
+      this.nativeError = this.error;
+    } else if (isMissing) {
+      const msg = "Please make a selection.";
+      this.internals.setValidity({valueMissing: true}, msg);
+      this.nativeError = msg;
+    } else {
+      this.internals.setValidity({});
+      this.nativeError = "";
+      this.invalid = false;
+    }
+  }
 
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
+  formResetCallback() {
+    const initialValue = this.getAttribute("value") || "";
+    this.value = initialValue;
+    this.touched = false;
+    this.validate();
+  }
+
+  private handleClickOutside(e: Event) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      if (this.open) {
+        this.touched = true;
       }
+      this.open = false;
+      this.filterText = "";
+    }
+  }
+
+  private toggleOpen() {
+    if (this.disabled) return;
 
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
+    if (this.open) {
+      this.touched = true;
+    }
+
+    this.open = !this.open;
+    if (this.open) {
+      setTimeout(() => {
+        if (this.searchable && this.searchInputEl) {
+          this.searchInputEl.focus();
+        } else {
+          const first = this.shadowRoot?.querySelector(".option") as HTMLElement;
+          first?.focus();
+        }
+      }, 0);
+    } else {
+      this.filterText = "";
+    }
+  }
+
+  private handleOptionClick(optValue: string, e: MouseEvent) {
+    e.stopPropagation();
+    this.touched = true;
+
+    if (this.multiple) {
+      const current = this.selectedValues;
+      const index = current.indexOf(optValue);
+      let updated: string[];
+      if (index > -1) {
+        updated = current.filter((v) => v !== optValue);
+      } else {
+        updated = [...current, optValue];
       }
-    `
-  ];
+      this.value = updated.join(",");
+    } else {
+      this.value = optValue;
+      this.open = false;
+      this.buttonElement?.focus();
+    }
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  private handleSearchInput(e: InputEvent) {
+    this.filterText = (e.target as HTMLInputElement).value;
+  }
+
+  private handleButtonKeydown(e: KeyboardEvent) {
+    if (this.disabled) return;
+
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      this.toggleOpen();
+    }
+  }
 
   render() {
+    const currentValues = this.selectedValues;
+    const selectedOptions = this.options.filter((opt) => currentValues.includes(opt.value));
+
+    const isInvalid =
+      this.invalid || (this.touched && !this.internals.validity.valid) || !!this.error;
+    const displayError = isInvalid ? this.error || this.nativeError : "";
+
+    const filteredOptions = this.searchable
+      ? this.options.filter((opt) =>
+          opt.label.toLowerCase().includes(this.filterText.toLowerCase()),
+        )
+      : this.options;
+
     return html`
-      <div class="select-wrapper">
-        <slot></slot>
-        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      ${this.label ? html`<label id="select-label">${this.label}</label>` : ""}
+
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        class=${classMap({
+          combobox: true,
+          "is-placeholder": selectedOptions.length === 0,
+          "is-invalid": isInvalid,
+        })}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded="${this.open}"
+        aria-labelledby="select-label"
+        aria-controls="select-listbox"
+        @click=${this.toggleOpen}
+        @keydown=${this.handleButtonKeydown}
+      >
+        <div class="selection-container">
+          ${selectedOptions.length > 0
+            ? this.multiple
+              ? selectedOptions.map((opt) => html`<span class="chip">${opt.label}</span>`)
+              : html`<span>${selectedOptions[0].label}</span>`
+            : html`<span>Select option...</span>`}
+        </div>
+        <svg
+          style="width:16px;height:16px;flex-shrink:0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
-      </div>
+      </button>
+
+      ${this.open
+        ? html`
+            <div class="listbox-container">
+              ${this.searchable
+                ? html`
+                    <div class="search-wrapper" @click=${(e: Event) => e.stopPropagation()}>
+                      <input
+                        type="text"
+                        class="search-input"
+                        placeholder="Search options..."
+                        autocomplete="off"
+                        spellcheck="false"
+                        autocapitalize="none"
+                        .value=${this.filterText}
+                        @input=${this.handleSearchInput}
+                      />
+                    </div>
+                  `
+                : ""}
+
+              <ul
+                id="select-listbox"
+                class="listbox"
+                role="listbox"
+                aria-multiselectable="${this.multiple}"
+              >
+                ${filteredOptions.length > 0
+                  ? filteredOptions.map((opt) => {
+                      const isSelected = currentValues.includes(opt.value);
+                      return html`
+                        <li
+                          class="option"
+                          role="option"
+                          aria-selected="${isSelected}"
+                          @click=${(e: MouseEvent) => this.handleOptionClick(opt.value, e)}
+                        >
+                          <span>${opt.label}</span>
+                          ${this.multiple && isSelected ? html`<span>✓</span>` : ""}
+                        </li>
+                      `;
+                    })
+                  : html`<li
+                      class="option"
+                      role="option"
+                      aria-disabled="true"
+                      style="color:var(--st-color-text-muted); cursor:default;"
+                    >
+                      No options found
+                    </li>`}
+              </ul>
+            </div>
+          `
+        : ""}
+      ${displayError ? html`<span class="error-msg">${displayError}</span>` : ""}
+
+      <select
+        class="hidden-native"
+        name="${this.name}"
+        .autocomplete="${this.autocomplete as any}"
+        ?multiple=${this.multiple}
+        tabindex="-1"
+        aria-hidden="true"
+        ?disabled=${this.disabled}
+      >
+        <option value=""></option>
+        ${this.options.map(
+          (opt) => html`
+            <option value="${opt.value}" ?selected=${currentValues.includes(opt.value)}>
+              ${opt.label}
+            </option>
+          `,
+        )}
+      </select>
     `;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-select': StSelect;
+    "st-select": StSelect;
   }
-}
+}