@tillsc/progressive-web-components 0.1.0

package/dist/multiselect-dual-list-bs5.js

@@ -0,0 +1,368 @@
+// src/core/pwc-element.js
+var PwcElement = class extends HTMLElement {
+  /**
+   * List of DOM event types to bind on the host element.
+   * Subclasses may override.
+   *
+   * Example:
+   *   static events = ["click", "input"];
+   */
+  static events = [];
+  static registerCss(cssText) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(cssText);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  }
+  connectedCallback() {
+    if (this._connected) return;
+    this._connected = true;
+    this._bindEvents();
+  }
+  disconnectedCallback() {
+    if (!this._connected) return;
+    this._connected = false;
+    this._unbindEvents();
+    this.onDisconnect();
+  }
+  /**
+   * Optional cleanup hook for subclasses.
+   */
+  onDisconnect() {
+  }
+  /**
+   * Bind declared events using the handleEvent pattern.
+   */
+  _bindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.addEventListener(type, this);
+    }
+  }
+  /**
+   * Unbind all previously declared events.
+   */
+  _unbindEvents() {
+    const events = this.constructor.events ?? [];
+    for (const type of events) {
+      this.removeEventListener(type, this);
+    }
+  }
+  /**
+   * Default event handler.
+   * Subclasses are expected to override this method
+   * and route events as needed.
+   */
+  handleEvent(_event) {
+  }
+};
+
+// src/core/pwc-children-observer-element.js
+var PwcChildrenObserverElement = class extends PwcElement {
+  static observeMode = "children";
+  // "children" | "tree"
+  connectedCallback() {
+    if (this._connected) return;
+    super.connectedCallback();
+    this._startChildrenObserver();
+  }
+  disconnectedCallback() {
+    this._stopChildrenObserver();
+    super.disconnectedCallback();
+  }
+  onChildrenChanged(_mutations) {
+  }
+  /** Run fn() without triggering onChildrenChanged for the resulting DOM mutations. */
+  _withoutChildrenChangedNotification(fn) {
+    fn();
+    this._childrenObserver?.takeRecords();
+  }
+  _startChildrenObserver() {
+    const mode = this.constructor.observeMode || "children";
+    const subtree = mode === "tree";
+    this._childrenObserver = new MutationObserver((mutations) => {
+      if (!this._connected) return;
+      this.onChildrenChanged(mutations);
+    });
+    this._childrenObserver.observe(this, { childList: true, subtree });
+    this.onChildrenChanged([]);
+  }
+  _stopChildrenObserver() {
+    if (!this._childrenObserver) return;
+    this._childrenObserver.disconnect();
+    this._childrenObserver = null;
+  }
+};
+
+// src/multiselect-dual-list/base.js
+var MultiselectDualListBase = class extends PwcChildrenObserverElement {
+  static observeMode = "tree";
+  static events = ["click", "input"];
+  get _selectedClass() {
+    return "pwc-msdl-item--selected";
+  }
+  onChildrenChanged() {
+    const select = this.querySelector("select");
+    if (!select) return;
+    this._select = select;
+    const items = this._parseOptions(select);
+    this._items = items;
+    this._itemsByValue = new Map(items.map((item) => [item.value, item]));
+    this._withoutChildrenChangedNotification(() => {
+      if (!this._availableList) {
+        const ui = this._buildUI();
+        this._availableList = ui.availableList;
+        this._selectedList = ui.selectedList;
+        this._filterInput = ui.filterInput;
+      }
+      this._populateLists(items);
+      select.style.display = "none";
+      const filterText = this._filterInput?.value;
+      if (filterText) this._applyFilter(filterText);
+    });
+  }
+  _populateLists(items) {
+    this._availableList.replaceChildren();
+    this._selectedList.replaceChildren();
+    for (const item of items) {
+      this._availableList.appendChild(this._createAvailableEntry(item));
+    }
+    for (const item of items) {
+      if (item.selected) {
+        this._selectedList.appendChild(this._createSelectedEntry(item));
+      }
+    }
+  }
+  _parseOptions(select) {
+    const options = Array.from(select.options);
+    const parentMap = /* @__PURE__ */ new Map();
+    for (const opt of options) {
+      const parent = opt.dataset.parent;
+      if (parent) parentMap.set(opt.value, parent);
+    }
+    return options.map((opt) => ({
+      value: opt.value,
+      label: opt.textContent,
+      parent: opt.dataset.parent || null,
+      depth: this._calculateDepth(opt.value, parentMap),
+      selected: opt.selected,
+      disabled: opt.disabled,
+      warnOnUnselect: opt.dataset.warnOnUnselect || null
+    }));
+  }
+  _calculateDepth(value, parentMap) {
+    let depth = 0;
+    let current = value;
+    const visited = /* @__PURE__ */ new Set();
+    while (parentMap.has(current)) {
+      if (visited.has(current)) break;
+      visited.add(current);
+      current = parentMap.get(current);
+      depth++;
+    }
+    return depth;
+  }
+  handleEvent(e) {
+    if (e.type === "click") {
+      const actionEl = e.target.closest("[data-action]");
+      if (!actionEl || !this.contains(actionEl)) return;
+      const action = actionEl.dataset.action;
+      const value = actionEl.closest("[data-value]")?.dataset.value;
+      if (!value) return;
+      if (action === "add") this._addItem(value);
+      else if (action === "remove") this._removeItem(value);
+      return;
+    }
+    if (e.type === "input") {
+      if (this._filterInput && e.target === this._filterInput) {
+        this._applyFilter(this._filterInput.value);
+      }
+    }
+  }
+  _addItem(value) {
+    const item = this._itemsByValue.get(value);
+    if (!item || item.disabled) return;
+    if (!this.select.hasAttribute("multiple")) {
+      for (const opt2 of this._select.options) {
+        if (opt2.selected) opt2.selected = false;
+      }
+      for (const el of this._availableList.querySelectorAll(`.${this._selectedClass}`)) {
+        el.classList.remove(this._selectedClass);
+        el.setAttribute("aria-selected", "false");
+        const btn = el.querySelector("[data-action='add']");
+        if (btn) btn.style.display = "";
+      }
+    }
+    const opt = this._select.querySelector(`option[value="${CSS.escape(value)}"]`);
+    if (opt) opt.selected = true;
+    const availEl = this._availableList.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    if (availEl) {
+      availEl.classList.add(this._selectedClass);
+      availEl.setAttribute("aria-selected", "true");
+      const btn = availEl.querySelector("[data-action='add']");
+      if (btn) btn.style.display = "none";
+    }
+    this._withoutChildrenChangedNotification(() => {
+      if (!this.select.hasAttribute("multiple")) this._selectedList.replaceChildren();
+      this._selectedList.appendChild(this._createSelectedEntry(item));
+    });
+  }
+  _removeItem(value) {
+    const item = this._itemsByValue.get(value);
+    if (!item) return;
+    if (item.warnOnUnselect && !confirm(item.warnOnUnselect)) return;
+    const opt = this._select.querySelector(`option[value="${CSS.escape(value)}"]`);
+    if (opt) opt.selected = false;
+    const availEl = this._availableList.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    if (availEl) {
+      availEl.classList.remove(this._selectedClass);
+      availEl.setAttribute("aria-selected", "false");
+      const btn = availEl.querySelector("[data-action='add']");
+      if (btn) btn.style.display = "";
+    }
+    const selEl = this._selectedList.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    if (selEl) this._withoutChildrenChangedNotification(() => selEl.remove());
+  }
+  get select() {
+    return this._select;
+  }
+  get selectedLabel() {
+    return this.getAttribute("selected-label") || "Selected";
+  }
+  get availableLabel() {
+    return this.getAttribute("available-label") || "Available";
+  }
+  get addLabel() {
+    return this.getAttribute("add-label") || "\u2190";
+  }
+  get removeLabel() {
+    return this.getAttribute("remove-label") || "\xD7";
+  }
+  get filterText() {
+    return this._filterInput?.value ?? "";
+  }
+  set filterText(text) {
+    if (this._filterInput) this._filterInput.value = text;
+    this._applyFilter(text);
+  }
+  _applyFilter(text) {
+    const { matchCount, totalCount } = this._filterAvailable(text);
+    this.dispatchEvent(new CustomEvent("pwc-multiselect-dual-list:filter", {
+      bubbles: true,
+      detail: { filterText: text, matchCount, totalCount }
+    }));
+  }
+  _buildFilterRegex(text) {
+    if (!text) return null;
+    try {
+      return new RegExp(text, "i");
+    } catch {
+      return new RegExp(text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+    }
+  }
+};
+
+// src/core/utils.js
+function defineOnce(name, classDef) {
+  if (customElements.get(name)) return;
+  customElements.define(name, classDef);
+}
+
+// src/multiselect-dual-list/bs5/multiselect-dual-list.js
+var PwcMultiselectDualListBs5 = class extends MultiselectDualListBase {
+  get _selectedClass() {
+    return "list-group-item-secondary";
+  }
+  _buildUI() {
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <div class="col">
+        <h6>${this.selectedLabel}</h6>
+        <div class="list-group" style="max-height:20em;overflow-y:auto" role="listbox" aria-label="${this.selectedLabel}" data-role="selected"></div>
+      </div>
+      <div class="col">
+        <h6>${this.availableLabel}</h6>
+        <input type="search" class="form-control form-control-sm mb-2" placeholder="Filter\u2026" aria-label="Filter ${this.availableLabel}" />
+        <div class="list-group" style="max-height:20em;overflow-y:auto" role="listbox" aria-label="${this.availableLabel}" data-role="available"></div>
+      </div>
+    `;
+    container.className = "row g-3";
+    this.select.after(container);
+    return {
+      selectedList: container.querySelector("[data-role='selected']"),
+      availableList: container.querySelector("[data-role='available']"),
+      filterInput: container.querySelector("input[type='search']")
+    };
+  }
+  _createEntry(item) {
+    const el = document.createElement("div");
+    el.className = "list-group-item d-flex justify-content-between align-items-center";
+    el.role = "option";
+    el.dataset.value = item.value;
+    const label = document.createElement("span");
+    label.textContent = item.label;
+    el.appendChild(label);
+    return el;
+  }
+  _createAvailableEntry(item) {
+    const el = this._createEntry(item);
+    el.setAttribute("aria-selected", String(item.selected));
+    if (item.disabled) {
+      el.classList.add("disabled");
+      el.setAttribute("aria-disabled", "true");
+    }
+    if (item.selected) el.classList.add("list-group-item-secondary");
+    if (item.depth > 0) el.style.paddingLeft = `${item.depth * 1.5 + 0.75}em`;
+    if (!item.disabled) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "btn btn-sm btn-outline-primary";
+      btn.dataset.action = "add";
+      btn.textContent = this.addLabel;
+      btn.setAttribute("aria-label", `${this.addLabel} ${item.label}`);
+      if (item.selected) btn.style.display = "none";
+      el.appendChild(btn);
+    }
+    return el;
+  }
+  _createSelectedEntry(item) {
+    const el = this._createEntry(item);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "btn btn-sm btn-outline-danger";
+    btn.dataset.action = "remove";
+    btn.textContent = this.removeLabel;
+    btn.setAttribute("aria-label", `${this.removeLabel} ${item.label}`);
+    el.appendChild(btn);
+    return el;
+  }
+  _filterAvailable(text) {
+    const items = this._availableList.querySelectorAll("[data-value]");
+    const totalCount = items.length;
+    const regex = this._buildFilterRegex(text);
+    if (!regex) {
+      for (const el of items) el.classList.remove("d-none");
+      return { matchCount: totalCount, totalCount };
+    }
+    let matchCount = 0;
+    for (const el of items) {
+      const label = el.querySelector("span")?.textContent || "";
+      const match = regex.test(label);
+      el.classList.toggle("d-none", !match);
+      if (match) matchCount++;
+    }
+    return { matchCount, totalCount };
+  }
+};
+var define = () => defineOnce("pwc-multiselect-dual-list-bs5", PwcMultiselectDualListBs5);
+
+// src/multiselect-dual-list/bs5/index.js
+function register() {
+  PwcMultiselectDualListBs5.registerCss(
+    "pwc-multiselect-dual-list-bs5[hide-selected] .list-group-item-secondary { display: none; }"
+  );
+  define();
+}
+register();
+export {
+  register
+};