@wavelengthusaf/web-components 1.6.1 → 1.7.0

package/dist/esm/index.js

@@ -5731,6 +5731,290 @@ 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);
+}
+
+// src/web-components/wavelength-planetrail.template.html
+var wavelength_planetrail_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  .flex-container {\n    display: flex;\n    align-items: center;\n  }\n\n  #inner {\n    border-radius: 25px;\n    height: 2px;\n    flex-grow: 1;\n    background-color: var(--color);\n  }\n\n  #path {\n    fill: var(--color);\n  }\n</style>\n\n<div id="outer" class="flex-container" >\n  <div id="inner">\n  </div>\n  <div>\n  <svg id="plane" width="40" height="40">\n    <path\n      d="M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"\n      id="path"\n    />\n  </svg>\n  </div>\n</div>\n';
+
+// src/web-components/wavelength-planetrail.ts
+var BasePlaneTrail = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["traildir", "color"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_planetrail_template_default;
+    this.plane = this.shadow.querySelector("#plane");
+    this.outer = this.shadow.querySelector("#outer");
+    this.inner = this.shadow.querySelector("#inner");
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  updateComponent() {
+    const trailDir = this.getAttribute("traildir") || "right";
+    const color = this.getAttribute("color") || "#00308F";
+    this.style.setProperty("--color", color);
+    this.plane.style.setProperty("transform", trailDir === "right" ? "" : "matrix(-1, 0, 0, 1, 0, 0)");
+    this.outer.style.setProperty("flex-direction", trailDir === "right" ? "row" : "row-reverse");
+    this.outer.style.setProperty("justify-content", trailDir === "right" ? "right" : "left");
+    if (trailDir === "right") {
+      this.inner.style.setProperty("margin-right", "10px");
+      this.inner.style.setProperty("margin-left", "0px");
+    } else {
+      this.inner.style.setProperty("margin-left", "10px");
+      this.inner.style.setProperty("margin-right", "0px");
+    }
+  }
+};
+var WavelengthPlaneTrail = class extends StylingMixin(BasePlaneTrail) {
+};
+if (!customElements.get("wavelength-planetrail")) {
+  customElements.define("wavelength-planetrail", WavelengthPlaneTrail);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -5740,12 +6024,14 @@ export {
   WavelengthButton,
   WavelengthCheckbox,
   WavelengthDatePicker,
+  WavelengthDropdown,
   WavelengthFileDropZone,
   WavelengthForm,
   WavelengthInput,
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
   WavelengthNotificationPanel,
+  WavelengthPlaneTrail,
   WavelengthProgressBar,
   WavelengthTitleBar
 };

package/package.json

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