@wavelengthusaf/web-components 1.6.1 → 1.6.2

package/dist/cjs/index.cjs

@@ -2317,7 +2317,7 @@ var WavelengthBanner = class extends HTMLElement {
     this.updateAttributes();
   }
   updateAttributes() {
-    const classificationRaw = _optionalChain([this, 'access', _ => _.getAttribute, 'call', _2 => _2("classification"), 'optionalAccess', _3 => _3.toLowerCase, 'call', _4 => _4()]) || "";
+    const classificationRaw = _optionalChain([this, 'access', _2 => _2.getAttribute, 'call', _3 => _3("classification"), 'optionalAccess', _4 => _4.toLowerCase, 'call', _5 => _5()]) || "";
     const controlRaw = this.getAttribute("control") || "";
     const controlList = controlRaw.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
     let bannerText = this.getAttribute("banner-text");
@@ -2569,9 +2569,9 @@ function unwrap(t) {
 }
 function isZodType(core, type) {
   const anyCore = core;
-  const typeName = _optionalChain([anyCore, 'optionalAccess', _5 => _5._def, 'optionalAccess', _6 => _6.typeName]);
+  const typeName = _optionalChain([anyCore, 'optionalAccess', _6 => _6._def, 'optionalAccess', _7 => _7.typeName]);
   if (typeof typeName === "string" && typeName === type) return true;
-  const ctorName = _optionalChain([anyCore, 'optionalAccess', _7 => _7.constructor, 'optionalAccess', _8 => _8.name]);
+  const ctorName = _optionalChain([anyCore, 'optionalAccess', _8 => _8.constructor, 'optionalAccess', _9 => _9.name]);
   return ctorName === type;
 }
 function zodToFields(schema) {
@@ -2591,14 +2591,14 @@ function zodToFields(schema) {
         type,
         required: typeof anyZt.isOptional === "function" ? !anyZt.isOptional() : true
       };
-      const placeholder = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce((typeof anyZt.meta === "function" ? _optionalChain([anyZt, 'access', _9 => _9.meta, 'call', _10 => _10(), 'optionalAccess', _11 => _11.placeholder]) : void 0), () => ( _optionalChain([anyZt, 'optionalAccess', _12 => _12.description]))), () => ( _optionalChain([anyZt, 'optionalAccess', _13 => _13._def, 'optionalAccess', _14 => _14.description]))), () => ( (typeof core.meta === "function" ? _optionalChain([core, 'access', _15 => _15.meta, 'call', _16 => _16(), 'optionalAccess', _17 => _17.placeholder]) : void 0))), () => ( _optionalChain([core, 'optionalAccess', _18 => _18.description]))), () => ( _optionalChain([core, 'optionalAccess', _19 => _19._def, 'optionalAccess', _20 => _20.description]))), () => ( field.label));
+      const placeholder = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce((typeof anyZt.meta === "function" ? _optionalChain([anyZt, 'access', _10 => _10.meta, 'call', _11 => _11(), 'optionalAccess', _12 => _12.placeholder]) : void 0), () => ( _optionalChain([anyZt, 'optionalAccess', _13 => _13.description]))), () => ( _optionalChain([anyZt, 'optionalAccess', _14 => _14._def, 'optionalAccess', _15 => _15.description]))), () => ( (typeof core.meta === "function" ? _optionalChain([core, 'access', _16 => _16.meta, 'call', _17 => _17(), 'optionalAccess', _18 => _18.placeholder]) : void 0))), () => ( _optionalChain([core, 'optionalAccess', _19 => _19.description]))), () => ( _optionalChain([core, 'optionalAccess', _20 => _20._def, 'optionalAccess', _21 => _21.description]))), () => ( field.label));
       field.placeholder = placeholder;
       if (type === "text") {
-        const checks = _nullishCoalesce(_optionalChain([core, 'optionalAccess', _21 => _21._def, 'optionalAccess', _22 => _22.checks]), () => ( []));
+        const checks = _nullishCoalesce(_optionalChain([core, 'optionalAccess', _22 => _22._def, 'optionalAccess', _23 => _23.checks]), () => ( []));
         for (const chk of checks) {
-          const kind = chk.kind || _optionalChain([chk, 'access', _23 => _23._zod, 'optionalAccess', _24 => _24.def, 'optionalAccess', _25 => _25.check]);
-          const min = _nullishCoalesce(chk.value, () => ( _optionalChain([chk, 'access', _26 => _26._zod, 'optionalAccess', _27 => _27.def, 'optionalAccess', _28 => _28.minimum])));
-          const max = _nullishCoalesce(chk.value, () => ( _optionalChain([chk, 'access', _29 => _29._zod, 'optionalAccess', _30 => _30.def, 'optionalAccess', _31 => _31.maximum])));
+          const kind = chk.kind || _optionalChain([chk, 'access', _24 => _24._zod, 'optionalAccess', _25 => _25.def, 'optionalAccess', _26 => _26.check]);
+          const min = _nullishCoalesce(chk.value, () => ( _optionalChain([chk, 'access', _27 => _27._zod, 'optionalAccess', _28 => _28.def, 'optionalAccess', _29 => _29.minimum])));
+          const max = _nullishCoalesce(chk.value, () => ( _optionalChain([chk, 'access', _30 => _30._zod, 'optionalAccess', _31 => _31.def, 'optionalAccess', _32 => _32.maximum])));
           if ((kind === "min" || kind === "min_length") && typeof min === "number") {
             field.minLength = min;
           }
@@ -2670,7 +2670,7 @@ var WavelengthForm = class extends HTMLElement {
     // --- Event handlers ---
     this.onInputChange = (name, rawValue) => {
       this._value = { ...this._value, [name]: rawValue };
-      const res = _optionalChain([this, 'access', _32 => _32._validator, 'optionalAccess', _33 => _33.validate, 'call', _34 => _34(this._value)]);
+      const res = _optionalChain([this, 'access', _33 => _33._validator, 'optionalAccess', _34 => _34.validate, 'call', _35 => _35(this._value)]);
       const issues = res && !res.isValid ? _nullishCoalesce(res.issues, () => ( [])) : [];
       this.dispatchEvent(
         new CustomEvent("form-change", {
@@ -2899,7 +2899,7 @@ var WavelengthForm = class extends HTMLElement {
     if (res.isValid) {
       this.setFieldError(name, void 0);
     } else {
-      const issues = _nullishCoalesce(_optionalChain([res, 'access', _35 => _35.issues, 'optionalAccess', _36 => _36.filter, 'call', _37 => _37((i) => _optionalChain([i, 'access', _38 => _38.path, 'optionalAccess', _39 => _39[0]]) === name)]), () => ( []));
+      const issues = _nullishCoalesce(_optionalChain([res, 'access', _36 => _36.issues, 'optionalAccess', _37 => _37.filter, 'call', _38 => _38((i) => _optionalChain([i, 'access', _39 => _39.path, 'optionalAccess', _40 => _40[0]]) === name)]), () => ( []));
       const messages = issues.map((i) => i.message).join("\n");
       this.setFieldError(name, issues.length > 0 ? messages : "Invalid value");
     }
@@ -2915,7 +2915,7 @@ var WavelengthForm = class extends HTMLElement {
       return { isValid: true, value: res.value, issues: [] };
     }
     for (const f of this._fields) {
-      const issues = _nullishCoalesce(_optionalChain([res, 'access', _40 => _40.issues, 'optionalAccess', _41 => _41.filter, 'call', _42 => _42((i) => _optionalChain([i, 'access', _43 => _43.path, 'optionalAccess', _44 => _44[0]]) === f.name)]), () => ( []));
+      const issues = _nullishCoalesce(_optionalChain([res, 'access', _41 => _41.issues, 'optionalAccess', _42 => _42.filter, 'call', _43 => _43((i) => _optionalChain([i, 'access', _44 => _44.path, 'optionalAccess', _45 => _45[0]]) === f.name)]), () => ( []));
       if (issues.length > 0) {
         const messages = issues.map((i) => i.message).join("\n");
         this.setFieldError(f.name, messages);
@@ -3045,7 +3045,7 @@ var WavelengthForm = class extends HTMLElement {
     rightSlot.className = "right";
     const buildButton = (cfg, defaultEvent) => {
       const btn = document.createElement("wavelength-button");
-      const requestedType = _nullishCoalesce(_optionalChain([cfg, 'access', _45 => _45.buttonProps, 'optionalAccess', _46 => _46.type]), () => ( ""));
+      const requestedType = _nullishCoalesce(_optionalChain([cfg, 'access', _46 => _46.buttonProps, 'optionalAccess', _47 => _47.type]), () => ( ""));
       const type = requestedType === "submit" ? "submit" : "button";
       if (cfg.buttonProps) {
         for (const [key, value] of Object.entries(cfg.buttonProps)) {
@@ -3313,7 +3313,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     this._applyAttributes();
     this._setupDebouncedValidation();
     const maxLengthAttr = this.getAttribute("max-length");
-    const value = _optionalChain([this, 'access', _47 => _47.inputEl, 'optionalAccess', _48 => _48.value, 'optionalAccess', _49 => _49.trim, 'optionalCall', _50 => _50()]) || "";
+    const value = _optionalChain([this, 'access', _48 => _48.inputEl, 'optionalAccess', _49 => _49.value, 'optionalAccess', _50 => _50.trim, 'optionalCall', _51 => _51()]) || "";
     this.inputEl.addEventListener("input", this._onInput);
     this.inputEl.addEventListener("blur", this._onBlur);
     this.inputEl.addEventListener("focus", this._onFocus);
@@ -3794,8 +3794,8 @@ var WavelengthTitleBar = class extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
-    const titleElement = _optionalChain([this, 'access', _51 => _51.shadowRoot, 'optionalAccess', _52 => _52.querySelector, 'call', _53 => _53(".title")]);
-    const subtitleElement = _optionalChain([this, 'access', _54 => _54.shadowRoot, 'optionalAccess', _55 => _55.querySelector, 'call', _56 => _56(".subtitle")]);
+    const titleElement = _optionalChain([this, 'access', _52 => _52.shadowRoot, 'optionalAccess', _53 => _53.querySelector, 'call', _54 => _54(".title")]);
+    const subtitleElement = _optionalChain([this, 'access', _55 => _55.shadowRoot, 'optionalAccess', _56 => _56.querySelector, 'call', _57 => _57(".subtitle")]);
     switch (name) {
       case "title-text":
         if (titleElement) titleElement.textContent = newValue;
@@ -4541,7 +4541,7 @@ var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
           </svg>
         </span>
     `;
-      _optionalChain([chip, 'access', _57 => _57.querySelector, 'call', _58 => _58(".multi-select-remove-button"), 'optionalAccess', _59 => _59.addEventListener, 'call', _60 => _60("click", (e) => {
+      _optionalChain([chip, 'access', _58 => _58.querySelector, 'call', _59 => _59(".multi-select-remove-button"), 'optionalAccess', _60 => _60.addEventListener, 'call', _61 => _61("click", (e) => {
         e.stopPropagation();
         this.handleRemoveChip(opt);
       })]);
@@ -4739,7 +4739,7 @@ var WavelengthNavBar = class extends HTMLElement {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     shadow.appendChild(template4.content.cloneNode(true));
-    _optionalChain([shadow, 'access', _61 => _61.querySelector, 'call', _62 => _62("#logo"), 'optionalAccess', _63 => _63.addEventListener, 'call', _64 => _64("click", () => {
+    _optionalChain([shadow, 'access', _62 => _62.querySelector, 'call', _63 => _63("#logo"), 'optionalAccess', _64 => _64.addEventListener, 'call', _65 => _65("click", () => {
       this.dispatchEvent(new CustomEvent("home-click"));
     })]);
   }
@@ -4759,7 +4759,7 @@ var WavelengthNavBar = class extends HTMLElement {
     this.style.setProperty("--border", this.getAttribute("border") || "1px solid #ddd");
   }
   renderTabs() {
-    const container = _optionalChain([this, 'access', _65 => _65.shadowRoot, 'optionalAccess', _66 => _66.querySelector, 'call', _67 => _67(".middle-tab-group")]);
+    const container = _optionalChain([this, 'access', _66 => _66.shadowRoot, 'optionalAccess', _67 => _67.querySelector, 'call', _68 => _68(".middle-tab-group")]);
     if (!container) return;
     container.innerHTML = "";
     const itemsAttr = this.getAttribute("items");
@@ -5662,26 +5662,26 @@ var WavelengthFileDropZone = class extends HTMLElement {
     if (!this.dropZone || !this.fileInput) return;
     this.dropZone.addEventListener("dragover", (e) => {
       e.preventDefault();
-      _optionalChain([this, 'access', _68 => _68.dropZone, 'optionalAccess', _69 => _69.classList, 'access', _70 => _70.add, 'call', _71 => _71("dragover")]);
+      _optionalChain([this, 'access', _69 => _69.dropZone, 'optionalAccess', _70 => _70.classList, 'access', _71 => _71.add, 'call', _72 => _72("dragover")]);
     });
     this.dropZone.addEventListener("dragleave", (e) => {
       e.preventDefault();
-      _optionalChain([this, 'access', _72 => _72.dropZone, 'optionalAccess', _73 => _73.classList, 'access', _74 => _74.remove, 'call', _75 => _75("dragover")]);
+      _optionalChain([this, 'access', _73 => _73.dropZone, 'optionalAccess', _74 => _74.classList, 'access', _75 => _75.remove, 'call', _76 => _76("dragover")]);
     });
     this.dropZone.addEventListener("drop", (e) => {
       e.preventDefault();
-      _optionalChain([this, 'access', _76 => _76.dropZone, 'optionalAccess', _77 => _77.classList, 'access', _78 => _78.remove, 'call', _79 => _79("dragover")]);
-      const files = _optionalChain([e, 'access', _80 => _80.dataTransfer, 'optionalAccess', _81 => _81.files]);
-      if (_optionalChain([files, 'optionalAccess', _82 => _82.length])) {
+      _optionalChain([this, 'access', _77 => _77.dropZone, 'optionalAccess', _78 => _78.classList, 'access', _79 => _79.remove, 'call', _80 => _80("dragover")]);
+      const files = _optionalChain([e, 'access', _81 => _81.dataTransfer, 'optionalAccess', _82 => _82.files]);
+      if (_optionalChain([files, 'optionalAccess', _83 => _83.length])) {
         this.validateAndProcessFiles(files);
       }
     });
     this.dropZone.addEventListener("click", () => {
-      _optionalChain([this, 'access', _83 => _83.fileInput, 'optionalAccess', _84 => _84.click, 'call', _85 => _85()]);
+      _optionalChain([this, 'access', _84 => _84.fileInput, 'optionalAccess', _85 => _85.click, 'call', _86 => _86()]);
     });
     this.fileInput.addEventListener("change", (event) => {
       const input = event.target;
-      if (_optionalChain([input, 'access', _86 => _86.files, 'optionalAccess', _87 => _87.length])) {
+      if (_optionalChain([input, 'access', _87 => _87.files, 'optionalAccess', _88 => _88.length])) {
         this.validateAndProcessFiles(input.files);
       }
     });
@@ -5689,7 +5689,7 @@ var WavelengthFileDropZone = class extends HTMLElement {
   validateAndProcessFiles(files) {
     const fileList = Array.from(files);
     let errorMessage = "";
-    const acceptedTypes = _optionalChain([this, 'access', _88 => _88.getAttribute, 'call', _89 => _89("accepted-types"), 'optionalAccess', _90 => _90.split, 'call', _91 => _91(",")]) || [];
+    const acceptedTypes = _optionalChain([this, 'access', _89 => _89.getAttribute, 'call', _90 => _90("accepted-types"), 'optionalAccess', _91 => _91.split, 'call', _92 => _92(",")]) || [];
     if (acceptedTypes.length) {
       const invalidFiles = fileList.filter((file) => !acceptedTypes.some((type) => file.name.toLowerCase().endsWith(type.toLowerCase().replace("*", ""))));
       if (invalidFiles.length) {
@@ -5732,6 +5732,247 @@ var WavelengthFileDropZone = class extends HTMLElement {
 };
 customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
+// src/web-components/wavelength-dropdown.ts
+var template6 = document.createElement("template");
+template6.innerHTML = `
+  <style>
+    :host {
+        display: inline-block;
+        position: relative;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .dropdown-box{
+        width: 100%;
+        height: 100%;
+    }
+        
+    .dropdown-field {
+        user-select: none;
+        height: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        border: 1px solid black;
+        gap: 4px;
+        padding: 0 8px;
+    }
+
+    .selected {
+        display: flex;
+        height: inherit;
+        width: inherit;
+        overflow: hidden;
+        white-space: nowrap;
+        align-items: center;
+    }
+
+    .arrow {
+        width: 10px;
+        height: 1px;
+        background: black;
+        margin: 8px;
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        transform: rotate(180deg);
+        }
+
+    .arrow.active {
+        transform: rotate(0deg);
+    }
+
+    .options-list {
+        position: relative;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        overflow-y: auto;
+        display: none;
+        z-index: 10;
+        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+      }
+      
+    .options-list.show {
+        display: inline-block;
+    }
+  </style>
+
+  <div class="dropdown-box" tabindex="0">
+    <div class="dropdown-field">
+      <span class="selected"></span>
+      <i class="arrow"></i>
+    </div>
+    <ul class="options-list"></ul>
+  </div>
+`;
+var WavelengthDropdown = class extends HTMLElement {
+  constructor() {
+    super();
+    this._options = [];
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template6.content.cloneNode(true));
+    this.dropdownField = shadow.querySelector(".dropdown-field");
+    this.dropdownBox = shadow.querySelector(".dropdown-box");
+    this.selectedSpan = shadow.querySelector(".selected");
+    this.arrow = shadow.querySelector(".arrow");
+    this.optionsList = shadow.querySelector(".options-list");
+    this._selectedValue = this.getAttribute("default-value");
+  }
+  static get observedAttributes() {
+    return ["options", "default-value", "color", "font-size", "font-family", "border-radius", "width", "height", "arrow-size", "popup-radius", "popup-align", "popup-selected-color"];
+  }
+  connectedCallback() {
+    this.parseOptionsAttribute();
+    this.applyStyles();
+    this.dropdownField.addEventListener("click", () => {
+      this.optionsList.classList.toggle("show");
+      this.arrow.classList.toggle("active");
+    });
+    document.addEventListener("click", (e) => {
+      if (!this.contains(e.target)) {
+        this.optionsList.classList.remove("show");
+        this.arrow.classList.remove("active");
+      }
+    });
+  }
+  attributeChangedCallback() {
+    this.parseOptionsAttribute();
+    this.setDefaultValue();
+    this.applyStyles();
+  }
+  parseOptionsAttribute() {
+    const attr = this.getAttribute("options");
+    if (!attr) return;
+    this._options = JSON.parse(attr);
+    this.renderOptions();
+  }
+  setDefaultValue() {
+    const defaultValue = this.getAttribute("default-value");
+    if (defaultValue) {
+      const match = this._options.find((o) => o.value === defaultValue);
+      this.setSelected(match || this._options[0]);
+    } else {
+      this.setSelected(this._options[0]);
+    }
+  }
+  renderOptions() {
+    this.optionsList.innerHTML = "";
+    this._options.forEach((opt) => {
+      const li = document.createElement("li");
+      li.textContent = opt.value;
+      li.style.padding = "8px";
+      li.style.whiteSpace = "nowrap";
+      li.style.overflow = "visible";
+      li.style.textOverflow = "clip";
+      li.style.fontSize = this.getAttribute("font-size") || this.style.fontSize || "inherit";
+      li.style.fontFamily = this.getAttribute("font-family") || this.style.fontFamily || "inherit";
+      li.style.color = "#000";
+      const originalBg = li.style.backgroundColor;
+      li.addEventListener("mouseenter", () => {
+        li.style.backgroundColor = "#eee";
+      });
+      li.addEventListener("mouseleave", () => {
+        if (this._selectedValue === opt.value) {
+          li.style.backgroundColor = this.getAttribute("popup-selected-color") || "";
+        } else {
+          li.style.backgroundColor = originalBg;
+        }
+      });
+      li.addEventListener("click", () => {
+        this.setSelected(opt);
+        this.optionsList.classList.remove("show");
+        this.arrow.classList.remove("active");
+        const event = new CustomEvent("change", {
+          detail: { value: opt.value },
+          bubbles: true,
+          composed: true
+        });
+        this.dispatchEvent(event);
+      });
+      this.optionsList.appendChild(li);
+    });
+  }
+  setSelected(opt) {
+    if (!opt) return;
+    if (opt.label) {
+      this.selectedSpan.textContent = opt.label;
+    } else {
+      this.selectedSpan.textContent = opt.value;
+    }
+    this.dropdownField.style.backgroundColor = opt.color || "";
+    const children = Array.from(this.optionsList.childNodes.entries(), ([_, child]) => child);
+    children.map((child) => {
+      if (child.textContent === opt.value) {
+        child.style.backgroundColor = this.getAttribute("popup-selected-color") || "";
+      } else {
+        child.style.backgroundColor = this.optionsList.style.backgroundColor;
+      }
+    });
+  }
+  applyStyles() {
+    const style = this.style;
+    Object.assign(this.dropdownBox.style, {
+      width: this.getAttribute("width") || style.width,
+      height: this.getAttribute("height") || style.height
+    });
+    Object.assign(this.dropdownField.style, {
+      borderRadius: this.getAttribute("border-radius") || style.borderRadius,
+      fontSize: this.getAttribute("font-size") || style.fontSize,
+      fontFamily: this.getAttribute("font-family") || style.fontFamily,
+      color: this.getAttribute("color") || "#000"
+    });
+    this.dropdownBox.style.minWidth = this.getAttribute("width") || "auto";
+    const arrow = this.dropdownField.querySelector(".arrow");
+    arrow.style.padding = this.getAttribute("arrow-size") || "2px";
+    this.optionsList.style.minWidth = "auto";
+    const popupAlign = this.getAttribute("popup-align") || "left";
+    switch (popupAlign) {
+      case "center":
+        this.optionsList.style.left = "50%";
+        this.optionsList.style.transform = "translateX(-50%)";
+        this.optionsList.style.right = "auto";
+        break;
+      case "right":
+        this.optionsList.style.left = "auto";
+        this.optionsList.style.right = "0";
+        this.optionsList.style.transform = "none";
+        break;
+      case "left":
+      default:
+        this.optionsList.style.left = "0";
+        this.optionsList.style.right = "auto";
+        this.optionsList.style.transform = "none";
+        break;
+    }
+    this.optionsList.style.backgroundColor = "white";
+    this.optionsList.style.borderRadius = this.getAttribute("popup-radius") || this.getAttribute("border-radius") || "4px";
+  }
+  get value() {
+    return this._selectedValue;
+  }
+  set value(val) {
+    const opt = this._options.find((o) => o.value === val);
+    if (opt) {
+      this._selectedValue = opt.value;
+      this.setSelected(opt);
+    }
+  }
+  get color() {
+    return this.selectedSpan.style.backgroundColor || "";
+  }
+  set color(col) {
+    const opt = this._options.find((o) => o.color === col);
+    if (opt) this.setSelected(opt);
+  }
+};
+if (!customElements.get("wavelength-dropdown")) {
+  customElements.define("wavelength-dropdown", WavelengthDropdown);
+}
+
+
 
 
 
@@ -5748,7 +5989,7 @@ customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -1829,4 +1829,27 @@ declare class WavelengthFileDropZone extends HTMLElement {
     private formatFileSize;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthDropdown extends HTMLElement {
+    private dropdownBox;
+    private dropdownField;
+    private selectedSpan;
+    private arrow;
+    private optionsList;
+    private _options;
+    private _selectedValue;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseOptionsAttribute;
+    private setDefaultValue;
+    private renderOptions;
+    private setSelected;
+    private applyStyles;
+    get value(): string | null;
+    set value(val: string);
+    get color(): string;
+    set color(col: string);
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.d.ts

@@ -1829,4 +1829,27 @@ declare class WavelengthFileDropZone extends HTMLElement {
     private formatFileSize;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthDropdown extends HTMLElement {
+    private dropdownBox;
+    private dropdownField;
+    private selectedSpan;
+    private arrow;
+    private optionsList;
+    private _options;
+    private _selectedValue;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseOptionsAttribute;
+    private setDefaultValue;
+    private renderOptions;
+    private setSelected;
+    private applyStyles;
+    get value(): string | null;
+    set value(val: string);
+    get color(): string;
+    set color(col: string);
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.js

@@ -5731,6 +5731,246 @@ var WavelengthFileDropZone = class extends HTMLElement {
   }
 };
 customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
+
+// src/web-components/wavelength-dropdown.ts
+var template6 = document.createElement("template");
+template6.innerHTML = `
+  <style>
+    :host {
+        display: inline-block;
+        position: relative;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .dropdown-box{
+        width: 100%;
+        height: 100%;
+    }
+        
+    .dropdown-field {
+        user-select: none;
+        height: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        border: 1px solid black;
+        gap: 4px;
+        padding: 0 8px;
+    }
+
+    .selected {
+        display: flex;
+        height: inherit;
+        width: inherit;
+        overflow: hidden;
+        white-space: nowrap;
+        align-items: center;
+    }
+
+    .arrow {
+        width: 10px;
+        height: 1px;
+        background: black;
+        margin: 8px;
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        transform: rotate(180deg);
+        }
+
+    .arrow.active {
+        transform: rotate(0deg);
+    }
+
+    .options-list {
+        position: relative;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        overflow-y: auto;
+        display: none;
+        z-index: 10;
+        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+      }
+      
+    .options-list.show {
+        display: inline-block;
+    }
+  </style>
+
+  <div class="dropdown-box" tabindex="0">
+    <div class="dropdown-field">
+      <span class="selected"></span>
+      <i class="arrow"></i>
+    </div>
+    <ul class="options-list"></ul>
+  </div>
+`;
+var WavelengthDropdown = class extends HTMLElement {
+  constructor() {
+    super();
+    this._options = [];
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template6.content.cloneNode(true));
+    this.dropdownField = shadow.querySelector(".dropdown-field");
+    this.dropdownBox = shadow.querySelector(".dropdown-box");
+    this.selectedSpan = shadow.querySelector(".selected");
+    this.arrow = shadow.querySelector(".arrow");
+    this.optionsList = shadow.querySelector(".options-list");
+    this._selectedValue = this.getAttribute("default-value");
+  }
+  static get observedAttributes() {
+    return ["options", "default-value", "color", "font-size", "font-family", "border-radius", "width", "height", "arrow-size", "popup-radius", "popup-align", "popup-selected-color"];
+  }
+  connectedCallback() {
+    this.parseOptionsAttribute();
+    this.applyStyles();
+    this.dropdownField.addEventListener("click", () => {
+      this.optionsList.classList.toggle("show");
+      this.arrow.classList.toggle("active");
+    });
+    document.addEventListener("click", (e) => {
+      if (!this.contains(e.target)) {
+        this.optionsList.classList.remove("show");
+        this.arrow.classList.remove("active");
+      }
+    });
+  }
+  attributeChangedCallback() {
+    this.parseOptionsAttribute();
+    this.setDefaultValue();
+    this.applyStyles();
+  }
+  parseOptionsAttribute() {
+    const attr = this.getAttribute("options");
+    if (!attr) return;
+    this._options = JSON.parse(attr);
+    this.renderOptions();
+  }
+  setDefaultValue() {
+    const defaultValue = this.getAttribute("default-value");
+    if (defaultValue) {
+      const match = this._options.find((o) => o.value === defaultValue);
+      this.setSelected(match || this._options[0]);
+    } else {
+      this.setSelected(this._options[0]);
+    }
+  }
+  renderOptions() {
+    this.optionsList.innerHTML = "";
+    this._options.forEach((opt) => {
+      const li = document.createElement("li");
+      li.textContent = opt.value;
+      li.style.padding = "8px";
+      li.style.whiteSpace = "nowrap";
+      li.style.overflow = "visible";
+      li.style.textOverflow = "clip";
+      li.style.fontSize = this.getAttribute("font-size") || this.style.fontSize || "inherit";
+      li.style.fontFamily = this.getAttribute("font-family") || this.style.fontFamily || "inherit";
+      li.style.color = "#000";
+      const originalBg = li.style.backgroundColor;
+      li.addEventListener("mouseenter", () => {
+        li.style.backgroundColor = "#eee";
+      });
+      li.addEventListener("mouseleave", () => {
+        if (this._selectedValue === opt.value) {
+          li.style.backgroundColor = this.getAttribute("popup-selected-color") || "";
+        } else {
+          li.style.backgroundColor = originalBg;
+        }
+      });
+      li.addEventListener("click", () => {
+        this.setSelected(opt);
+        this.optionsList.classList.remove("show");
+        this.arrow.classList.remove("active");
+        const event = new CustomEvent("change", {
+          detail: { value: opt.value },
+          bubbles: true,
+          composed: true
+        });
+        this.dispatchEvent(event);
+      });
+      this.optionsList.appendChild(li);
+    });
+  }
+  setSelected(opt) {
+    if (!opt) return;
+    if (opt.label) {
+      this.selectedSpan.textContent = opt.label;
+    } else {
+      this.selectedSpan.textContent = opt.value;
+    }
+    this.dropdownField.style.backgroundColor = opt.color || "";
+    const children = Array.from(this.optionsList.childNodes.entries(), ([_, child]) => child);
+    children.map((child) => {
+      if (child.textContent === opt.value) {
+        child.style.backgroundColor = this.getAttribute("popup-selected-color") || "";
+      } else {
+        child.style.backgroundColor = this.optionsList.style.backgroundColor;
+      }
+    });
+  }
+  applyStyles() {
+    const style = this.style;
+    Object.assign(this.dropdownBox.style, {
+      width: this.getAttribute("width") || style.width,
+      height: this.getAttribute("height") || style.height
+    });
+    Object.assign(this.dropdownField.style, {
+      borderRadius: this.getAttribute("border-radius") || style.borderRadius,
+      fontSize: this.getAttribute("font-size") || style.fontSize,
+      fontFamily: this.getAttribute("font-family") || style.fontFamily,
+      color: this.getAttribute("color") || "#000"
+    });
+    this.dropdownBox.style.minWidth = this.getAttribute("width") || "auto";
+    const arrow = this.dropdownField.querySelector(".arrow");
+    arrow.style.padding = this.getAttribute("arrow-size") || "2px";
+    this.optionsList.style.minWidth = "auto";
+    const popupAlign = this.getAttribute("popup-align") || "left";
+    switch (popupAlign) {
+      case "center":
+        this.optionsList.style.left = "50%";
+        this.optionsList.style.transform = "translateX(-50%)";
+        this.optionsList.style.right = "auto";
+        break;
+      case "right":
+        this.optionsList.style.left = "auto";
+        this.optionsList.style.right = "0";
+        this.optionsList.style.transform = "none";
+        break;
+      case "left":
+      default:
+        this.optionsList.style.left = "0";
+        this.optionsList.style.right = "auto";
+        this.optionsList.style.transform = "none";
+        break;
+    }
+    this.optionsList.style.backgroundColor = "white";
+    this.optionsList.style.borderRadius = this.getAttribute("popup-radius") || this.getAttribute("border-radius") || "4px";
+  }
+  get value() {
+    return this._selectedValue;
+  }
+  set value(val) {
+    const opt = this._options.find((o) => o.value === val);
+    if (opt) {
+      this._selectedValue = opt.value;
+      this.setSelected(opt);
+    }
+  }
+  get color() {
+    return this.selectedSpan.style.backgroundColor || "";
+  }
+  set color(col) {
+    const opt = this._options.find((o) => o.color === col);
+    if (opt) this.setSelected(opt);
+  }
+};
+if (!customElements.get("wavelength-dropdown")) {
+  customElements.define("wavelength-dropdown", WavelengthDropdown);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -5740,6 +5980,7 @@ export {
   WavelengthButton,
   WavelengthCheckbox,
   WavelengthDatePicker,
+  WavelengthDropdown,
   WavelengthFileDropZone,
   WavelengthForm,
   WavelengthInput,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",