@sondor-technology/sondor-components 1.0.4 → 1.0.6

package/dist/components/select/select.js

@@ -4,169 +4,486 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 let StSelect = class StSelect extends LitElement {
     constructor() {
         super();
-        this.size = 'md';
-        this.variant = 'outline';
-        this.color = 'default';
-        // Internal state to handle the chevron animation when the slotted select is focused
-        this.focused = false;
-        // Track focus states to animate the chevron
-        this.addEventListener('focusin', () => this.focused = true);
-        this.addEventListener('focusout', () => this.focused = false);
+        this.name = "";
+        this.label = "";
+        this.value = "";
+        this.required = false;
+        this.multiple = false;
+        this.searchable = false;
+        this.options = [];
+        this.error = "";
+        this.disabled = false;
+        this.invalid = false;
+        this.autocomplete = "off";
+        this.open = false;
+        this.filterText = "";
+        this.nativeError = "";
+        this.touched = false;
+        this.internals = this.attachInternals();
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        const isValid = this.checkValidity();
+        this.touched = true;
+        this.invalid = !isValid;
+        return isValid;
+    }
+    focus(options) {
+        this.buttonElement?.focus(options);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("click", this.handleClickOutside);
+        this.addEventListener("invalid", () => {
+            this.touched = true;
+            this.invalid = true;
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener("click", this.handleClickOutside);
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("value") ||
+            changedProperties.has("required") ||
+            changedProperties.has("error")) {
+            this.validate();
+        }
+    }
+    get selectedValues() {
+        if (!this.value)
+            return [];
+        return this.value
+            .split(",")
+            .map((v) => v.trim())
+            .filter(Boolean);
+    }
+    validate() {
+        this.internals.setFormValue(this.value);
+        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;
+        }
+    }
+    formResetCallback() {
+        const initialValue = this.getAttribute("value") || "";
+        this.value = initialValue;
+        this.touched = false;
+        this.validate();
+    }
+    handleClickOutside(e) {
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            if (this.open) {
+                this.touched = true;
+            }
+            this.open = false;
+            this.filterText = "";
+        }
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        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");
+                    first?.focus();
+                }
+            }, 0);
+        }
+        else {
+            this.filterText = "";
+        }
+    }
+    handleOptionClick(optValue, e) {
+        e.stopPropagation();
+        this.touched = true;
+        if (this.multiple) {
+            const current = this.selectedValues;
+            const index = current.indexOf(optValue);
+            let updated;
+            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 }));
+    }
+    handleSearchInput(e) {
+        this.filterText = e.target.value;
+    }
+    handleButtonKeydown(e) {
+        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) => 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) => 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}"
+        ?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>
     `;
     }
 };
-StSelect.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
-
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
-
-      /* 
-        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;
-      }
-
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      /* ==========================================================
-         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;
-      }
-
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
-
-      /* ==========================================================
-         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);
-      }
-
-      :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;
-      }
-
-      /* 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);
-      }
-
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
-
-      /* ==========================================================
-         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;
-      }
-
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
-      }
-
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
-      }
-    `
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "variant", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "color", void 0);
+StSelect.formAssociated = true;
+StSelect.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;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Array })
+], StSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], StSelect.prototype, "focused", void 0);
+], StSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StSelect.prototype, "invalid", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "autocomplete", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "filterText", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "nativeError", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "touched", void 0);
+__decorate([
+    query(".combobox")
+], StSelect.prototype, "buttonElement", void 0);
+__decorate([
+    query(".search-input")
+], StSelect.prototype, "searchInputEl", void 0);
 StSelect = __decorate([
-    customElement('st-select')
+    customElement("st-select")
 ], StSelect);
 export { StSelect };
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"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"}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,10 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare class StSkeleton extends LitElement {
     variant: 'text' | 'circular' | 'rectangular';
     animation: 'shimmer' | 'pulse' | 'none';
     width: string;
     height: string;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    constructor();
+    updated(changedProperties: PropertyValues<this>): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }