@wavelengthusaf/web-components 1.9.0 → 1.10.0

package/dist/cjs/index.cjs

@@ -6227,6 +6227,125 @@ if (!customElements.get("wavelength-tooltip")) {
   customElements.define("wavelength-tooltip", WavelengthToolTip);
 }
 
+// src/web-components/wavelength-menu.template.html
+var wavelength_menu_template_default = '<style>\n  :host {\n    display: block;\n    --background-color: white;\n    --text-color: black;\n    --font: Arial, Helvetica, sans-serif;\n    --font-size: 12px;\n    --border: 0px solid #ccc;\n    --padding: 5px;\n    --border-radius: 3px;\n    --selected-color: #5799ea;\n    --disabled-color: #d1d1d1;\n  }\n  .flex-container {\n    overflow-y: scroll;\n    height: 125px;\n    width: 175px;\n    flex-direction: column;\n    background-color: var(--background-color);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    margin: 5px;\n    box-shadow: 4px 5px 7px 4px rgba(0, 0, 0, 0.1);\n  }\n  .menu-item {\n    display: block;\n    padding: var(--padding);\n    margin: 5px;\n    font-size: var(--font-size);\n    font-family: var(--font);\n    color: var(--text-color);\n    background-color: var(--background-color);\n    cursor: pointer;\n    transition: background-color 0.1s ease;\n    border-radius: var(--border-radius);\n  }\n  .menu-item:hover {\n    background-color: #f0f0f0;\n  }\n  .menu-item.selected {\n    background-color: var(--selected-color) !important;\n    color: white !important;\n  }\n  .menu-item:focus {\n    background-color: #d1d1d1;\n  }\n  .menu-item:active {\n    background-color: #d1d1d1;\n  }\n  .menu-item.disabled {\n    color: var(--disabled-color);\n    background-color: var(--background-color);\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.6;\n  }\n</style>\n<div class="flex-container"></div>\n';
+
+// src/web-components/wavelength-menu.ts
+var WavelengthMenu = class extends HTMLElement {
+  constructor() {
+    super();
+    this._items = [];
+    this._selectedIndex = -1;
+    this._selectedId = null;
+    this._onItemClick = (e) => {
+      const menuItem = e.target.closest(".menu-item");
+      if (!menuItem || menuItem.classList.contains("disabled")) return;
+      const index = parseInt(menuItem.getAttribute("data-index") || "-1");
+      const isAlreadySelected = menuItem.classList.contains("selected");
+      const menuItems = this._shadow.querySelectorAll(".menu-item");
+      menuItems.forEach((item) => item.classList.remove("selected"));
+      if (!isAlreadySelected) {
+        menuItem.classList.add("selected");
+        this._selectedIndex = index;
+        this._selectedId = menuItem.getAttribute("data-id");
+      } else {
+        this._selectedIndex = -1;
+        this._selectedId = null;
+      }
+      this._dispatchSelectEvent();
+    };
+    this._shadow = this.attachShadow({ mode: "open" });
+    this._shadow.innerHTML = wavelength_menu_template_default;
+    this._flexContainer = this._shadow.querySelector(".flex-container");
+    try {
+      this._items = JSON.parse(this.getAttribute("items") || "[]");
+    } catch (e) {
+      this._items = [];
+    }
+  }
+  static get observedAttributes() {
+    return ["background-color", "text-color", "font", "font-size", "border", "padding", "border-radius", "selected-color", "items", "disabled-color"];
+  }
+  // Getter for items array.
+  get items() {
+    return this._items;
+  }
+  set items(value) {
+    this._items = Array.isArray(value) ? value : [];
+    this.render();
+  }
+  get value() {
+    return _nullishCoalesce(this._items[this._selectedIndex], () => ( null));
+  }
+  connectedCallback() {
+    this.render();
+    this._flexContainer.addEventListener("click", this._onItemClick);
+  }
+  disconnectedCallback() {
+    this._flexContainer.removeEventListener("click", this._onItemClick);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "items") {
+      try {
+        this._items = JSON.parse(newValue || "[]");
+      } catch (e) {
+        this._items = [];
+      }
+    }
+    this.render();
+  }
+  render() {
+    this._syncStyles();
+    this._renderItems();
+  }
+  _syncStyles() {
+    const styleAttributes = ["background-color", "text-color", "font", "font-size", "border", "padding", "border-radius", "selected-color", "disabled-color"];
+    styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        this.style.setProperty(`--${attr}`, value);
+      }
+    });
+  }
+  _renderItems() {
+    if (!this._flexContainer) return;
+    this._flexContainer.innerHTML = "";
+    this._items.forEach((item, index) => {
+      const itemEl = document.createElement("div");
+      itemEl.classList.add("menu-item");
+      itemEl.textContent = item.label || item.toString();
+      const isSelected = this._selectedId ? item.id === this._selectedId : this._selectedIndex === index;
+      if (isSelected) {
+        itemEl.classList.add("selected");
+      }
+      if (item.disabled) {
+        itemEl.classList.add("disabled");
+        itemEl.setAttribute("disabled", "");
+      }
+      if (item.id) {
+        itemEl.id = item.id;
+        itemEl.setAttribute("data-id", item.id);
+      }
+      itemEl.setAttribute("data-index", index.toString());
+      this._flexContainer.appendChild(itemEl);
+    });
+  }
+  _dispatchSelectEvent() {
+    this.dispatchEvent(
+      new CustomEvent("wavelength-menu-select", {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+if (!customElements.get("wavelength-menu")) {
+  customElements.define("wavelength-menu", WavelengthMenu);
+}
+
+
 
 
 
@@ -6248,7 +6367,7 @@ if (!customElements.get("wavelength-tooltip")) {
 
 
 
-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.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
+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.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -2265,4 +2265,25 @@ declare class WavelengthToolTip extends HTMLElement {
     updateComponent(): void;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthMenu extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    private _selectedIndex;
+    private _selectedId;
+    private _flexContainer;
+    private _shadow;
+    constructor();
+    get items(): any[];
+    set items(value: any[]);
+    get value(): any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    render(): void;
+    private _syncStyles;
+    private _renderItems;
+    private _onItemClick;
+    private _dispatchSelectEvent;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.d.ts

@@ -2265,4 +2265,25 @@ declare class WavelengthToolTip extends HTMLElement {
     updateComponent(): void;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthMenu extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    private _selectedIndex;
+    private _selectedId;
+    private _flexContainer;
+    private _shadow;
+    constructor();
+    get items(): any[];
+    set items(value: any[]);
+    get value(): any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    render(): void;
+    private _syncStyles;
+    private _renderItems;
+    private _onItemClick;
+    private _dispatchSelectEvent;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.js

@@ -6226,6 +6226,124 @@ var WavelengthToolTip = class extends HTMLElement {
 if (!customElements.get("wavelength-tooltip")) {
   customElements.define("wavelength-tooltip", WavelengthToolTip);
 }
+
+// src/web-components/wavelength-menu.template.html
+var wavelength_menu_template_default = '<style>\n  :host {\n    display: block;\n    --background-color: white;\n    --text-color: black;\n    --font: Arial, Helvetica, sans-serif;\n    --font-size: 12px;\n    --border: 0px solid #ccc;\n    --padding: 5px;\n    --border-radius: 3px;\n    --selected-color: #5799ea;\n    --disabled-color: #d1d1d1;\n  }\n  .flex-container {\n    overflow-y: scroll;\n    height: 125px;\n    width: 175px;\n    flex-direction: column;\n    background-color: var(--background-color);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    margin: 5px;\n    box-shadow: 4px 5px 7px 4px rgba(0, 0, 0, 0.1);\n  }\n  .menu-item {\n    display: block;\n    padding: var(--padding);\n    margin: 5px;\n    font-size: var(--font-size);\n    font-family: var(--font);\n    color: var(--text-color);\n    background-color: var(--background-color);\n    cursor: pointer;\n    transition: background-color 0.1s ease;\n    border-radius: var(--border-radius);\n  }\n  .menu-item:hover {\n    background-color: #f0f0f0;\n  }\n  .menu-item.selected {\n    background-color: var(--selected-color) !important;\n    color: white !important;\n  }\n  .menu-item:focus {\n    background-color: #d1d1d1;\n  }\n  .menu-item:active {\n    background-color: #d1d1d1;\n  }\n  .menu-item.disabled {\n    color: var(--disabled-color);\n    background-color: var(--background-color);\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.6;\n  }\n</style>\n<div class="flex-container"></div>\n';
+
+// src/web-components/wavelength-menu.ts
+var WavelengthMenu = class extends HTMLElement {
+  constructor() {
+    super();
+    this._items = [];
+    this._selectedIndex = -1;
+    this._selectedId = null;
+    this._onItemClick = (e) => {
+      const menuItem = e.target.closest(".menu-item");
+      if (!menuItem || menuItem.classList.contains("disabled")) return;
+      const index = parseInt(menuItem.getAttribute("data-index") || "-1");
+      const isAlreadySelected = menuItem.classList.contains("selected");
+      const menuItems = this._shadow.querySelectorAll(".menu-item");
+      menuItems.forEach((item) => item.classList.remove("selected"));
+      if (!isAlreadySelected) {
+        menuItem.classList.add("selected");
+        this._selectedIndex = index;
+        this._selectedId = menuItem.getAttribute("data-id");
+      } else {
+        this._selectedIndex = -1;
+        this._selectedId = null;
+      }
+      this._dispatchSelectEvent();
+    };
+    this._shadow = this.attachShadow({ mode: "open" });
+    this._shadow.innerHTML = wavelength_menu_template_default;
+    this._flexContainer = this._shadow.querySelector(".flex-container");
+    try {
+      this._items = JSON.parse(this.getAttribute("items") || "[]");
+    } catch (e) {
+      this._items = [];
+    }
+  }
+  static get observedAttributes() {
+    return ["background-color", "text-color", "font", "font-size", "border", "padding", "border-radius", "selected-color", "items", "disabled-color"];
+  }
+  // Getter for items array.
+  get items() {
+    return this._items;
+  }
+  set items(value) {
+    this._items = Array.isArray(value) ? value : [];
+    this.render();
+  }
+  get value() {
+    return this._items[this._selectedIndex] ?? null;
+  }
+  connectedCallback() {
+    this.render();
+    this._flexContainer.addEventListener("click", this._onItemClick);
+  }
+  disconnectedCallback() {
+    this._flexContainer.removeEventListener("click", this._onItemClick);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "items") {
+      try {
+        this._items = JSON.parse(newValue || "[]");
+      } catch (e) {
+        this._items = [];
+      }
+    }
+    this.render();
+  }
+  render() {
+    this._syncStyles();
+    this._renderItems();
+  }
+  _syncStyles() {
+    const styleAttributes = ["background-color", "text-color", "font", "font-size", "border", "padding", "border-radius", "selected-color", "disabled-color"];
+    styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        this.style.setProperty(`--${attr}`, value);
+      }
+    });
+  }
+  _renderItems() {
+    if (!this._flexContainer) return;
+    this._flexContainer.innerHTML = "";
+    this._items.forEach((item, index) => {
+      const itemEl = document.createElement("div");
+      itemEl.classList.add("menu-item");
+      itemEl.textContent = item.label || item.toString();
+      const isSelected = this._selectedId ? item.id === this._selectedId : this._selectedIndex === index;
+      if (isSelected) {
+        itemEl.classList.add("selected");
+      }
+      if (item.disabled) {
+        itemEl.classList.add("disabled");
+        itemEl.setAttribute("disabled", "");
+      }
+      if (item.id) {
+        itemEl.id = item.id;
+        itemEl.setAttribute("data-id", item.id);
+      }
+      itemEl.setAttribute("data-index", index.toString());
+      this._flexContainer.appendChild(itemEl);
+    });
+  }
+  _dispatchSelectEvent() {
+    this.dispatchEvent(
+      new CustomEvent("wavelength-menu-select", {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+if (!customElements.get("wavelength-menu")) {
+  customElements.define("wavelength-menu", WavelengthMenu);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -6240,6 +6358,7 @@ export {
   WavelengthForm,
   WavelengthInput,
   WavelengthManyPlanes,
+  WavelengthMenu,
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
   WavelengthNotificationPanel,

package/package.json

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