@wavelengthusaf/web-components 1.0.2 → 1.1.1

package/dist/esm/index.js

@@ -1,3 +1,61 @@
+// src/mixins/StylingMixin.ts
+function StylingMixin(mixinBaseClass) {
+  return class extends mixinBaseClass {
+    constructor() {
+      super(...arguments);
+      // Use a specific ID for the injected style tag
+      this._mixinStyleTagId = "custom-mixin-styles";
+    }
+    /**
+     * Public setter to apply a style object to the component.
+     */
+    set customStyles(styleObject) {
+      this.generateAndApplyStyles(styleObject);
+    }
+    toKebabCase(str) {
+      return str.replaceAll(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    createCssPropertiesString(ruleObject) {
+      return Object.entries(ruleObject).map(([prop, value]) => `${this.toKebabCase(prop)}: ${value};`).join(" ");
+    }
+    generateAndApplyStyles(styleObject) {
+      if (!this.shadowRoot) {
+        console.warn("StylingMixin: This component is missing a shadowRoot. Cannot apply nested styles.");
+        return;
+      }
+      const baseStyles = {};
+      const nestedRules = [];
+      for (const key in styleObject) {
+        const value = styleObject[key];
+        if (typeof value === "object" && /^[&.#[\]]/.test(key)) {
+          const finalSelector = key.replace(/^&/, ":host");
+          const properties = this.createCssPropertiesString(value);
+          nestedRules.push(`${finalSelector} { ${properties} }`);
+        } else if (typeof value === "string" || typeof value === "number") {
+          baseStyles[key] = value;
+        }
+      }
+      for (const prop in baseStyles) {
+        const kebabProp = this.toKebabCase(prop);
+        this.style.setProperty(kebabProp, baseStyles[prop]);
+      }
+      let cssString = "";
+      if (Object.keys(baseStyles).length > 0) {
+        cssString += `:host { ${this.createCssPropertiesString(baseStyles)} }
+`;
+      }
+      cssString += nestedRules.join("\n");
+      let styleEl = this.shadowRoot.getElementById(this._mixinStyleTagId);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.id = this._mixinStyleTagId;
+        this.shadowRoot.appendChild(styleEl);
+      }
+      styleEl.textContent = cssString;
+    }
+  };
+}
+
 // src/web-components/sample-component.ts
 var template = document.createElement("template");
 template.innerHTML = `
@@ -11,7 +69,7 @@ template.innerHTML = `
     <slot></slot> <!-- Enables user-defined inner HTML -->
   </div>
 `;
-var SampleComponent = class extends HTMLElement {
+var BaseSampleComponent = class extends HTMLElement {
   // List of attributes to observe for changes
   static get observedAttributes() {
     return ["test-prop"];
@@ -36,6 +94,8 @@ var SampleComponent = class extends HTMLElement {
     if (container) container.textContent = prop;
   }
 };
+var SampleComponent = class extends StylingMixin(BaseSampleComponent) {
+};
 if (!customElements.get("sample-component")) {
   customElements.define("sample-component", SampleComponent);
 }
@@ -1159,7 +1219,7 @@ function getAncestor(el) {
   const root = el.getRootNode();
   return root instanceof ShadowRoot ? root.host : null;
 }
-var WavelengthInput = class extends HTMLElement {
+var BaseWavelengthInput = class extends HTMLElement {
   constructor() {
     super();
     this.placeholderStyleEl = document.createElement("style");
@@ -1633,7 +1693,9 @@ var WavelengthInput = class extends HTMLElement {
     val ? this.setAttribute("clearable", "") : this.removeAttribute("clearable");
   }
 };
-WavelengthInput.formAssociated = true;
+BaseWavelengthInput.formAssociated = true;
+var WavelengthInput = class extends StylingMixin(BaseWavelengthInput) {
+};
 if (!customElements.get("wavelength-input")) {
   customElements.define("wavelength-input", WavelengthInput);
 }
@@ -1818,13 +1880,476 @@ var WavelengthDatePicker = class extends HTMLElement {
 if (!customElements.get("wavelength-date-picker")) {
   customElements.define("wavelength-date-picker", WavelengthDatePicker);
 }
+
+// src/web-components/wavelength-multi-select-autocomplete.ts
+var template4 = document.createElement("template");
+template4.innerHTML = `
+  <style>
+    .multi-select-container {
+      background-color: white;
+      border: 1px solid black;
+      display: block;
+      position: relative;
+      width: 320px;
+      min-height: 56px;
+      border-radius: 8px;
+      font-family: Inter, sans-serif;
+      font-size: 14px;
+    }
+
+    .multi-select-input-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: 8px;
+      cursor: text;
+      min-height: 56px;
+      height: auto;
+      align-items: center;
+      box-sizing: border-box;
+      border: none;
+      width: 100%;
+      padding: 8px 52px 8px 15px;
+      background-color: inherit;
+    }
+
+    .multi-select-input {
+      flex: 1;
+      border: none;
+      min-width: 75px;
+      outline: none;
+      font-size: 14px;
+      color: black;
+      border-radius: 8px;
+      align-self: stretch;
+      background-color: inherit;
+    }
+
+   .multi-select-input::placeholder {
+      opacity:0;
+   }
+   
+   .multi-select-input:focus::placeholder {
+      opacity: 50%;
+    }
+
+    .multi-select-label {
+      position: absolute;
+      font-size: 15px;
+      cursor: text;
+      pointer-events: none;
+      color: #9b9b9b;
+      font-family: montserrat, sans-serif;
+      background-color: inherit;
+    }
+
+
+    .multi-select-input:focus ~ .multi-select-label,
+    .multi-select-label.move-to-top {
+      position: absolute;
+      top: -8px;
+      left: 10px;
+      font-size: 12px;
+      color: black;
+      background-color: inherit;
+      height: 12px;
+      padding: 0 4px;
+      border-radius: 5px;
+    }
+
+    .multi-select-input:focus ~ .multi-select-label {
+      color: #009788;
+    }
+
+    .multi-select-chip {
+      display: flex;
+      align-items: center;
+      background-color: #D0EEF0;
+      color: black;
+      border-radius: 8px;
+      padding: 0 10px;
+      margin: 2px;
+    }
+
+    .multi-select-remove-button {
+      display: flex;
+      margin-left: 6px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-size: 16px;
+      border-radius: 50px;
+      padding: 2px 0;
+      line-height: 1;
+      color: #26BABE;
+    }
+    
+    .multi-select-remove-button:hover {
+      color: #7dcdcd;
+    }
+
+    .multi-select-dropdown {
+      position: absolute;
+      top: 102%;
+      left: 2%;
+      right: 0;
+      z-index: 10;
+      border: 1px solid black;
+      border-top: none;
+      max-height: 150px;
+      overflow-y: auto;
+      list-style: none;
+      margin: 0;
+      padding: 10px 0;
+      width: 96%;
+      background-color: #EFFEFF;
+      box-sizing: border-box;
+      display: none;
+    }
+   
+
+    .multi-select-dropdown::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .multi-select-dropdown::-webkit-scrollbar-track {
+      background-color: #EFFEFF;
+      height: 95%;
+      border-radius: 25px;
+    }
+
+    .multi-select-dropdown::-webkit-scrollbar-thumb {
+      background-color: gray;
+      width: 6px;
+      border-radius: 4px;
+      height: 15px;
+    }
+
+
+    .multi-select-dropdown::-webkit-scrollbar-thumb:hover {
+      background-color: darkgray;
+    }
+
+    .multi-select-option-container {
+      background-color: #EFFEFF;
+      color: #26BABE;
+      width: 100%;
+      border: none;
+      display: flex;
+      align-items: center;
+      column-gap: 15px;
+      padding: 0 15px;
+      cursor: pointer;
+    }
+
+    .multi-select-option-container:hover {
+      background-color: #cdfdff;
+    }
+
+    .multi-select-option {
+      padding: 2px 8px;
+      cursor: pointer;
+      font-family: Inter, sans-serif;
+      font-size: 14px;
+      color: black;
+    }
+
+    .multi-select-icon-container {
+      position: absolute;
+      right: 10px;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .multi-select-clear {
+      width: 20px;
+      height: 20px;
+      color: black;
+      cursor: pointer;
+      display: none;
+    }
+
+    .multi-select-clear:hover {
+      color: #615b5b;
+    }
+
+    .multi-select-arrow {
+      width: 24px;
+      height: 24px;
+      color: black;
+      border-radius: 25px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .multi-select-arrow.flipped {
+      transform: rotate(180deg);
+    }
+
+    .multi-select-arrow:hover {
+      background-color: #f3eeee;
+    }
+  </style>
+
+  <div class="multi-select-container" part="multi-select-container">
+    <div class="multi-select-input-wrapper" part="multi-select-input-wrapper">
+      <input type="text" class="multi-select-input" part="multi-select-input"/>
+      <label class="multi-select-label" part="multi-select-label"></label>
+    </div>
+    <ul class="multi-select-dropdown" part="multi-select-dropdown"></ul>
+    <div class="multi-select-icon-container">
+      <span class="multi-select-clear" part="multi-select-clear">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 17" fill="none">
+          <path d="M7.99967 1.8335C11.6863 1.8335 14.6663 4.8135 14.6663 8.50016C14.6663 12.1868 11.6863 15.1668 7.99967 15.1668C4.31301 15.1668 1.33301 12.1868 1.33301 8.50016C1.33301 4.8135 4.31301 1.8335 7.99967 1.8335ZM10.393 5.16683L7.99967 7.56016L5.60634 5.16683L4.66634 6.10683L7.05967 8.50016L4.66634 10.8935L5.60634 11.8335L7.99967 9.44016L10.393 11.8335L11.333 10.8935L8.93967 8.50016L11.333 6.10683L10.393 5.16683Z" fill="currentColor"/>
+        </svg>
+      </span>
+      <span class="multi-select-arrow" part="multi-select-arrow">
+        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9.5" viewBox="0 0 14 7" fill="none">
+          <path d="M7.00028 6.5C7.05852 6.5 13.0865 0.5 13.0003 0.5L1.00028 0.5C0.925699 0.5 6.94204 6.5 7.00028 6.5Z" fill="currentColor" stroke="black"/>
+        </svg>
+      </span>
+    </div>
+  </div>`;
+var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
+  constructor() {
+    super();
+    // Public properties that will be accessed and modified
+    this._options = [];
+    this._selectedOptions = [];
+    this._isOpen = false;
+    this._inputValue = "";
+    this._placeholder = "Select Options";
+    this._internals = this.attachInternals();
+    this._internals.role = "combobox";
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template4.content.cloneNode(true));
+    this._container = this.shadowRoot.querySelector(".multi-select-container");
+    this._inputWrapper = this.shadowRoot.querySelector(".multi-select-input-wrapper");
+    this._input = this.shadowRoot.querySelector(".multi-select-input");
+    this._label = this.shadowRoot.querySelector(".multi-select-label");
+    this._dropdown = this.shadowRoot.querySelector(".multi-select-dropdown");
+    this._clearBtn = this.shadowRoot.querySelector(".multi-select-clear");
+    this._arrowBtn = this.shadowRoot.querySelector(".multi-select-arrow");
+    this.addEventListeners();
+  }
+  // Define form-related properties
+  get form() {
+    return this._internals.form;
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  get type() {
+    return this.localName;
+  }
+  get value() {
+    return this._selectedOptions;
+  }
+  set value(options) {
+    this._selectedOptions = options || [];
+    this.dispatchEvent(new CustomEvent("change", { detail: { value: this._selectedOptions } }));
+    this.renderChips();
+    this.renderDropdown();
+    this.updateLabelPosition();
+    this.toggleClearButton();
+    this._internals.setFormValue(JSON.stringify(this._selectedOptions));
+  }
+  set autocompleteOptions(options) {
+    if (options) {
+      this._options = options;
+      this.render();
+    }
+  }
+  // Define which attributes to observe for changes
+  static get observedAttributes() {
+    return ["name", "placeholder", "label", "options"];
+  }
+  // React to attribute changes
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (newValue === null) return;
+    if (name === "name") {
+      this._input.name = newValue;
+      this._internals.ariaLabel = newValue;
+    } else if (name === "placeholder") {
+      this._placeholder = newValue;
+      this._input.placeholder = this._placeholder;
+    } else if (name === "label") {
+      this._placeholder = newValue;
+      this._label.textContent = this._placeholder;
+    } else if (name === "options") {
+      this._options = JSON.parse(newValue);
+      this.render();
+    }
+  }
+  // Fired when the component is added to the DOM
+  connectedCallback() {
+    this._placeholder = this.getAttribute("placeholder") || "Select Options";
+    this._label.textContent = this._placeholder;
+    this._input.placeholder = this._placeholder;
+    this.render();
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this.handleOutsideClick);
+  }
+  // --- Getter and Setter Methods ---
+  get isOpen() {
+    return this._isOpen;
+  }
+  set isOpen(value) {
+    this._isOpen = value;
+    if (value) {
+      this._dropdown.style.display = "block";
+      this._arrowBtn.classList.add("flipped");
+    } else {
+      this._dropdown.style.display = "none";
+      this._arrowBtn.classList.remove("flipped");
+    }
+  }
+  // --- Event Handlers ---
+  addEventListeners() {
+    this._input.addEventListener("input", this.handleInput.bind(this));
+    this._input.addEventListener("focus", () => {
+      this.isOpen = true;
+      this.updateLabelPosition();
+    });
+    this._arrowBtn.addEventListener("click", this.toggleDropdown.bind(this));
+    this._clearBtn.addEventListener("click", this.clearSelection.bind(this));
+    document.addEventListener("mousedown", this.handleOutsideClick.bind(this));
+    this._container.addEventListener("mousedown", this.handleContainerClick.bind(this));
+  }
+  handleInput(e) {
+    const target = e.target;
+    this._inputValue = target.value;
+    this.renderDropdown();
+    this.updateLabelPosition();
+    this.toggleClearButton();
+  }
+  toggleDropdown() {
+    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      this._input.focus();
+    }
+  }
+  handleContainerClick(e) {
+    e.preventDefault();
+    const target = e.target;
+    if (this._container.contains(target) && !target.closest(".multi-select-arrow")) {
+      this.isOpen = true;
+      this._input.focus();
+    }
+  }
+  handleOutsideClick(e) {
+    const path = e.composedPath();
+    if (!path.includes(this._container)) {
+      this.isOpen = false;
+    }
+  }
+  handleOptionClick(option) {
+    const isSelected = this._selectedOptions.some((opt) => opt.value === option.value);
+    if (isSelected) {
+      this.value = this._selectedOptions.filter((opt) => opt.value !== option.value);
+    } else {
+      this.value = [...this._selectedOptions, option];
+    }
+  }
+  handleRemoveChip(option) {
+    this.value = this._selectedOptions.filter((opt) => opt.value !== option.value);
+  }
+  toggleClearButton() {
+    if (this._selectedOptions.length > 0 || this._inputValue.length > 0) {
+      this._clearBtn.style.display = "block";
+    } else {
+      this._clearBtn.style.display = "none";
+    }
+  }
+  clearSelection() {
+    this.value = [];
+    this._inputValue = "";
+    this._input.value = "";
+    this.updateLabelPosition();
+    this.toggleClearButton();
+    this.renderDropdown();
+  }
+  updateLabelPosition() {
+    const shouldMoveLabel = this._input === document.activeElement || this._inputValue !== "" || this._selectedOptions.length > 0;
+    this._label.classList.toggle("move-to-top", shouldMoveLabel);
+  }
+  // --- Rendering Methods ---
+  renderChips() {
+    for (const chip of this._inputWrapper.querySelectorAll(".multi-select-chip")) {
+      chip.remove();
+    }
+    for (const opt of this._selectedOptions) {
+      const chip = document.createElement("div");
+      chip.className = "multi-select-chip";
+      chip.innerHTML = `
+      ${opt.label}
+        <span class="multi-select-remove-button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 13" fill="none">
+            <path d="M6 1.5C8.765 1.5 11 3.735 11 6.5C11 9.265 8.765 11.5 6 11.5C3.235 11.5 1 9.265 1 6.5C1 3.735 3.235 1.5 6 1.5ZM7.795 4L6 5.795L4.205 4L3.5 4.705L5.295 6.5L3.5 8.295L4.205 9L6 7.205L7.795 9L8.5 8.295L6.705 6.5L8.5 4.705L7.795 4Z" fill="currentColor"/>
+          </svg>
+        </span>
+    `;
+      chip.querySelector(".multi-select-remove-button")?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.handleRemoveChip(opt);
+      });
+      this._inputWrapper.insertBefore(chip, this._input);
+    }
+  }
+  renderDropdown() {
+    this._dropdown.innerHTML = "";
+    const filteredOptions = this._options.filter((option) => option.label.toLowerCase().includes(this._inputValue.toLowerCase()));
+    for (const option of filteredOptions) {
+      const optionEl = document.createElement("button");
+      optionEl.className = "multi-select-option-container";
+      optionEl.part = optionEl.className;
+      optionEl.type = "button";
+      const isSelected = this._selectedOptions.some((opt) => opt.value === option.value);
+      const checkboxSVG = `<svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      ${isSelected ? '<path d="M10 0C11.1046 1.28851e-07 12 0.895431 12 2V10C12 11.1046 11.1046 12 10 12H2C0.895431 12 3.22133e-08 11.1046 0 10V2C1.28853e-07 0.895431 0.895431 3.22128e-08 2 0H10ZM9.71484 1.90039C9.53032 1.90039 9.35197 1.96718 9.21387 2.08691L9.15723 2.1416L5.22168 6.33984C5.07629 6.4949 4.84861 6.54114 4.6543 6.45508L3.02246 5.72949C2.49487 5.49523 1.90067 5.88175 1.90039 6.45898C1.90039 6.69837 2.00809 6.92556 2.19336 7.07715L4.52148 8.98145C5.21201 9.54635 6.24003 9.38775 6.72754 8.64062L10.3535 3.08008C10.6632 2.60431 10.363 1.98415 9.8252 1.9082L9.71484 1.90039Z" fill="currentColor"/>' : '<rect x="0.5" y="0.5" width="11" height="11" rx="1.5" stroke="currentColor"/>'}
+    </svg>`;
+      optionEl.innerHTML = `
+        ${checkboxSVG}
+        <span class="multi-select-option" part="multi-select-option">${option.label}</span>
+      `;
+      optionEl.addEventListener("click", () => this.handleOptionClick(option));
+      this._dropdown.appendChild(optionEl);
+    }
+  }
+  render() {
+    this.renderChips();
+    this.renderDropdown();
+    this.updateLabelPosition();
+    this.toggleClearButton();
+    this._internals.setFormValue(JSON.stringify(this.value));
+  }
+};
+// Required for form association
+BaseWavelengthMultiSelectAutocomplete.formAssociated = true;
+var WavelengthMultiSelectAutocomplete = class extends StylingMixin(BaseWavelengthMultiSelectAutocomplete) {
+};
+if (!customElements.get("wavelength-multi-select-autocomplete")) {
+  customElements.define("wavelength-multi-select-autocomplete", WavelengthMultiSelectAutocomplete);
+}
 export {
+  BaseWavelengthInput,
+  BaseWavelengthMultiSelectAutocomplete,
   SampleComponent,
   WavelengthBanner,
   WavelengthButton,
   WavelengthDatePicker,
   WavelengthForm,
   WavelengthInput,
+  WavelengthMultiSelectAutocomplete,
   WavelengthProgressBar,
   WavelengthTitleBar
 };

package/package.json

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