@sondor-technology/sondor-components 1.0.7 → 1.0.8

package/src/components/pin-input/pin-input.ts

@@ -0,0 +1,249 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAll, state} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-pin-input")
+export class StPinInput extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+  @property({type: Number}) length = 6;
+  @property({type: String}) value = "";
+
+  // Obscures the input for secure PINs
+  @property({type: Boolean}) mask = false;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: String}) error = "";
+
+  @queryAll(".pin-box") private _inputs!: NodeListOf<HTMLInputElement>;
+
+  @state() private _touched = false;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: inherit;
+      }
+
+      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);
+      }
+
+      .pin-container {
+        display: flex;
+        gap: var(--st-spacing-sm);
+      }
+
+      .pin-box {
+        width: 48px;
+        height: 56px;
+        text-align: center;
+        font-size: var(--st-font-size-xl);
+        font-weight: var(--st-font-weight-semibold);
+        color: var(--st-color-text);
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-sizing: border-box;
+        transition:
+          border-color 0.2s,
+          box-shadow 0.2s,
+          background-color 0.2s;
+        /* iOS optimization for numeric pads */
+        caret-color: var(--st-color-primary);
+      }
+
+      .pin-box:focus {
+        outline: none;
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+      }
+
+      .pin-box:disabled {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        color: var(--st-color-text-muted);
+        cursor: not-allowed;
+      }
+
+      .is-invalid .pin-box {
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      .error-msg {
+        display: block;
+        margin-top: var(--st-spacing-xs);
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-danger, #dc2626);
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("required") ||
+      changedProperties.has("error")
+    ) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    this.invalid = false;
+
+    if (this.error) {
+      this._internals.setValidity({customError: true}, this.error);
+      this.invalid = true;
+      return;
+    }
+
+    if (this.required && (this.value.length < this.length || this.value.includes(" "))) {
+      this._internals.setValidity({valueMissing: true}, `Please enter all ${this.length} digits.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    this._internals.setValidity({});
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    this._touched = true;
+    this._syncValidity();
+    return this._internals.reportValidity();
+  }
+
+  private _updateValue() {
+    const chars = Array.from(this._inputs).map((input) => input.value || " ");
+    this.value = chars.join("");
+
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+
+    // Only fire 'change' if the pin is completely filled
+    if (!this.value.includes(" ")) {
+      this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    }
+  }
+
+  // Handle typing and auto-advancing
+  private _handleInput(e: InputEvent, index: number) {
+    this._touched = true;
+    const input = e.target as HTMLInputElement;
+
+    // If the user typed a character, move to the next input
+    if (input.value && index < this.length - 1) {
+      this._inputs[index + 1].focus();
+    }
+
+    this._updateValue();
+  }
+
+  // Handle backspace rewinding and arrow keys
+  private _handleKeyDown(e: KeyboardEvent, index: number) {
+    const input = e.target as HTMLInputElement;
+
+    if (e.key === "Backspace") {
+      // If current box is empty, jump to previous box and clear it
+      if (!input.value && index > 0) {
+        e.preventDefault();
+        this._inputs[index - 1].value = "";
+        this._inputs[index - 1].focus();
+        this._updateValue();
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      this._inputs[index - 1].focus();
+    } else if (e.key === "ArrowRight" && index < this.length - 1) {
+      e.preventDefault();
+      this._inputs[index + 1].focus();
+    }
+  }
+
+  // Handle cross-field pasting (e.g. pasting "123456" into the first box)
+  private _handlePaste(e: ClipboardEvent, startIndex: number) {
+    e.preventDefault();
+    this._touched = true;
+
+    const pasteData = e.clipboardData?.getData("text") || "";
+    // Clean the string (optional: restrict to numbers if you want strict numeric PINs)
+    const chars = pasteData.replace(/\s/g, "").split("");
+
+    if (!chars.length) return;
+
+    let currentIndex = startIndex;
+    for (const char of chars) {
+      if (currentIndex < this.length) {
+        this._inputs[currentIndex].value = char;
+        currentIndex++;
+      }
+    }
+
+    // Focus the last filled input (or the very last input if we filled them all)
+    const focusIndex = Math.min(currentIndex, this.length - 1);
+    this._inputs[focusIndex].focus();
+
+    this._updateValue();
+  }
+
+  render() {
+    // Break the current value into an array of characters for rendering
+    const values = this.value.padEnd(this.length, " ").split("");
+
+    const isInvalid = this.invalid || !!this.error;
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : ""}
+
+      <div class=${classMap({"pin-container": true, "is-invalid": isInvalid})}>
+        ${values
+          .slice(0, this.length)
+          .map(
+            (char, index) => html`
+              <input
+                class="pin-box"
+                aria-label="Digit ${index + 1}"
+                type=${this.mask ? "password" : "text"}
+                inputmode="numeric"
+                autocomplete="${"one-time-code" as any}"
+                maxlength="1"
+                .value=${char.trim()}
+                ?disabled=${this.disabled}
+                @input=${(e: InputEvent) => this._handleInput(e, index)}
+                @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}
+                @paste=${(e: ClipboardEvent) => this._handlePaste(e, index)}
+              />
+            `,
+          )}
+      </div>
+
+      ${isInvalid && this.error ? html`<span class="error-msg">${this.error}</span>` : ""}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pin-input": StPinInput;
+  }
+}

package/src/components/popover/popover.ts

@@ -0,0 +1,192 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query, state, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type PopoverPosition = "top" | "bottom" | "left" | "right";
+
+@customElement("st-popover")
+export class StPopover extends LitElement {
+  @property({type: String}) position: PopoverPosition = "bottom";
+  @property({type: Number}) offset = 8;
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @state() private _isOpen = false;
+
+  @query(".trigger-wrapper") private _triggerWrapper!: HTMLElement;
+  @query("#popover-content") private _popoverEl!: HTMLElement;
+
+  @queryAssignedElements({slot: "trigger"}) private _triggerElements!: HTMLElement[];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .trigger-wrapper {
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      /* Native popover styles */
+      [popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        overflow: visible;
+        /* 🚀 FIX: Erase the browser's native centering inset so our JS coordinates work */
+        inset: auto;
+      }
+
+      .popover-surface {
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-shadow:
+          0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        padding: var(--st-spacing-md);
+        color: var(--st-color-text);
+
+        opacity: 0;
+        transform: scale(0.95);
+        transition:
+          opacity 0.15s ease,
+          transform 0.15s ease;
+      }
+
+      [popover]:popover-open .popover-surface {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      [popover]::backdrop {
+        background: transparent;
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("_isOpen")) {
+      this._triggerElements?.forEach((el) => {
+        el.setAttribute("aria-expanded", String(this._isOpen));
+      });
+    }
+  }
+
+  private _handleTriggerSlotChange() {
+    this._triggerElements?.forEach((el) => {
+      el.setAttribute("aria-haspopup", "dialog");
+      el.setAttribute("aria-expanded", String(this._isOpen));
+    });
+  }
+
+  private _togglePopover() {
+    if (this.disabled) return;
+    this._isOpen ? this.hide() : this.show();
+  }
+
+  public show() {
+    if (this.disabled || this._isOpen) return;
+
+    // 🚀 FIX: Update state synchronously so the _reposition check passes instantly
+    this._isOpen = true;
+
+    this._popoverEl.showPopover();
+    this._reposition();
+
+    window.addEventListener("resize", this._reposition);
+    window.addEventListener("scroll", this._reposition, true);
+  }
+
+  public hide() {
+    if (!this._isOpen) return;
+
+    // 🚀 FIX: Update state synchronously
+    this._isOpen = false;
+
+    this._popoverEl.hidePopover();
+  }
+
+  private _handleNativeToggle(e: Event) {
+    const isOpening = (e as any).newState === "open";
+    this._isOpen = isOpening;
+
+    // This handles the cleanup when the user clicks outside or hits ESC
+    if (!isOpening) {
+      window.removeEventListener("resize", this._reposition);
+      window.removeEventListener("scroll", this._reposition, true);
+    }
+  }
+
+  private _reposition = () => {
+    if (!this._isOpen || !this._popoverEl || !this._triggerWrapper) return;
+
+    const triggerRect = this._triggerWrapper.getBoundingClientRect();
+    const popoverRect = this._popoverEl.getBoundingClientRect();
+
+    let top = 0;
+    let left = 0;
+
+    switch (this.position) {
+      case "bottom":
+        top = triggerRect.bottom + this.offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "top":
+        top = triggerRect.top - popoverRect.height - this.offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.right + this.offset;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.left - popoverRect.width - this.offset;
+        break;
+    }
+
+    const padding = 8;
+    if (left < padding) left = padding;
+    if (left + popoverRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - popoverRect.width - padding;
+    }
+    if (top < padding) top = padding;
+    if (top + popoverRect.height > window.innerHeight - padding) {
+      top = window.innerHeight - popoverRect.height - padding;
+    }
+
+    this._popoverEl.style.top = `${top}px`;
+    this._popoverEl.style.left = `${left}px`;
+  };
+
+  render() {
+    return html`
+      <div
+        class="trigger-wrapper"
+        @click=${this._togglePopover}
+        @keydown=${(e: KeyboardEvent) =>
+          e.key === "Enter" || e.key === " " ? this._togglePopover() : null}
+      >
+        <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
+      </div>
+
+      <div id="popover-content" popover="auto" @toggle=${this._handleNativeToggle}>
+        <div class="popover-surface">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-popover": StPopover;
+  }
+}

package/src/components/select/select.ts

@@ -1,71 +1,14 @@
 import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, state, query} from "lit/decorators.js";
 import {classMap} from "lit/directives/class-map.js";
+import {ifDefined} from "lit/directives/if-defined.js";
 
 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 & {});
+export type SelectAutocomplete = "on" | "off" | "name" | "email" | (string & {});
 
 @customElement("st-select")
 export class StSelect extends LitElement {
@@ -74,6 +17,7 @@ export class StSelect extends LitElement {
 
   @property({type: String}) name = "";
   @property({type: String}) label = "";
+  @property({type: Boolean, attribute: "hide-label"}) hideLabel = false;
   @property({type: String}) value = "";
   @property({type: Boolean}) required = false;
   @property({type: Boolean}) multiple = false;
@@ -93,6 +37,9 @@ export class StSelect extends LitElement {
   @query(".combobox") private buttonElement!: HTMLElement;
   @query(".search-input") private searchInputEl?: HTMLInputElement;
 
+  private _labelId = `select-label-${Math.random().toString(36).substring(2, 9)}`;
+  private _listboxId = `select-listbox-${Math.random().toString(36).substring(2, 9)}`;
+
   static styles = css`
     :host {
       display: block;
@@ -108,6 +55,17 @@ export class StSelect extends LitElement {
       margin-bottom: var(--st-spacing-xs);
     }
 
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    }
+
     .combobox {
       display: flex;
       justify-content: space-between;
@@ -413,7 +371,11 @@ export class StSelect extends LitElement {
       : this.options;
 
     return html`
-      ${this.label ? html`<label id="select-label">${this.label}</label>` : ""}
+      ${this.label
+        ? html`<label id=${this._labelId} class=${classMap({"sr-only": this.hideLabel})}
+            >${this.label}</label
+          >`
+        : ""}
 
       <button
         type="button"
@@ -426,8 +388,8 @@ export class StSelect extends LitElement {
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded="${this.open}"
-        aria-labelledby="select-label"
-        aria-controls="select-listbox"
+        aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}
+        aria-controls=${this._listboxId}
         @click=${this.toggleOpen}
         @keydown=${this.handleButtonKeydown}
       >
@@ -470,7 +432,7 @@ export class StSelect extends LitElement {
                 : ""}
 
               <ul
-                id="select-listbox"
+                id=${this._listboxId}
                 class="listbox"
                 role="listbox"
                 aria-multiselectable="${this.multiple}"