flexiselect-js/dist/index.es.js

Advanced TomSelect wrapper with groups, checkboxes, images

var g = Object.defineProperty;
var d = (n, e, t) => e in n ? g(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var p = (n, e, t) => d(n, typeof e != "symbol" ? e + "" : e, t);
import h from "tom-select";
class m {
  constructor(e, t = {}) {
    p(this, "instance");
    var c, r;
    const l = {};
    t.showRemoveButton && (l.remove_button = { title: "Remove" }), t.clearAll && (l.clear_button = { title: "Clear All" });
    const o = {
      create: t.allowAdd ?? !1,
      placeholder: t.placeholder ?? "Select an option",
      valueField: "value",
      labelField: "text",
      searchField: "text",
      optgroupField: "group",
      optgroupLabelField: "label",
      optgroupValueField: "value",
      plugins: l,
      ...t
    };
    (c = t.options) != null && c.length && (o.options = t.options), (r = t.optgroups) != null && r.length && (o.optgroups = t.optgroups), this.instance = new h(e, o), t.onInitialize && t.onInitialize.call(this.instance), t.onChange && this.instance.on("change", () => {
      var u;
      (u = t.onChange) == null || u.call(t, this.instance.getValue());
    });
  }
  get value() {
    return this.instance.getValue();
  }
  set value(e) {
    this.instance.setValue(e);
  }
  destroy() {
    this.instance.destroy();
  }
}
function v(n = {}) {
  return {
    ...n,
    render: {
      option: (e, t) => e.image ? `<div class="fs-option-with-img" data-value="${t(e.value)}">
               <img src="${t(e.image)}" class="fs-option-img" />
               <span>${t(e.text || e.label || "")}</span>
             </div>` : `<div>${t(e.text || e.label || "")}</div>`,
      item: (e, t) => `<div class="fs-item-with-img">${e.image ? `<img src="${t(e.image)}" class="fs-item-img" />` : ""}<span>${t(
        e.text || e.label || ""
      )}</span></div>`
    }
  };
}
function x(n = {}) {
  const e = n.groupSelectable ?? !1;
  return {
    ...n,
    render: {
      optgroup_header: (t, l) => e ? `
            <div class="fs-optgroup-header">
              <input type="checkbox" class="fs-group-checkbox" data-group="${l(
        t.label
      )}" />
              <span>${l(t.label)}</span>
            </div>
          ` : `<div class="fs-optgroup-header"><span>${l(
        t.label
      )}</span></div>`,
      option: (t, l) => `
          <div class="fs-option-with-checkbox" data-value="${l(
        t.value
      )}">
            <input type="checkbox" class="fs-option-checkbox" />
            <span>${l(t.text || t.label || "")}</span>
          </div>
        `,
      item: (t, l) => `
          <div class="fs-item-with-checkbox">
            <span>${l(t.text || t.label || "")}</span>
          </div>
        `
    }
  };
}
function $(n) {
  return {
    ...n,
    render: {
      optgroup_header: (e, t) => `
          <div class="fs-optgroup-header">
            <input type="checkbox" class="fs-group-checkbox" data-group="${t(
        e.label
      )}" />
            <span>${t(e.label)}</span>
          </div>
        `,
      item: (e, t) => e.isGroup ? `
            <div class="fs-item-with-group">
              ${t(e.text)}
            </div>
          ` : `<div>${t(e.text)}</div>`
    },
    onInitialize() {
      const e = this;
      e.on("dropdown_open", () => {
        console.log("[GroupCheckbox] Dropdown opened"), e.dropdown.addEventListener("click", (t) => {
          const l = t.target;
          if (!l.classList.contains("fs-group-checkbox")) return;
          t.stopPropagation();
          const o = l, c = o.getAttribute("data-group"), r = o.checked;
          if (!c) return;
          const u = o.closest(".optgroup");
          if (!u) return;
          const s = u.querySelectorAll(".option"), i = Array.from(s).map((a) => a.getAttribute("data-value")).filter(Boolean);
          console.log(
            `[GroupCheckbox] Clicked group=${c}, checked=${r}, children=`,
            i
          ), r ? (e.addItems(i, !0), console.log(`[GroupCheckbox] ${c} → SELECT ALL`, i)) : (i.forEach((a) => e.removeItem(a, !0)), console.log(`[GroupCheckbox] ${c} → UNSELECT ALL`, i)), e.refreshOptions(!1), console.log(
            "[FlexiSelect] Current selected after group click:",
            e.getValue()
          );
        });
      }), e.on("change", () => {
        const t = e.getValue();
        console.log("[FlexiSelect] Change fired, current selected:", t), Object.keys(e.optgroups).forEach((l) => {
          const o = e.optgroups[l], r = Object.values(e.options).filter(
            (i) => i.optgroup === l
          ).map((i) => i.value), u = r.filter((i) => e.items.includes(i));
          console.log(
            `[Sync] Group=${o.label}, selected=${u.length}/${r.length}`
          );
          const s = `__group_${o.label}`;
          u.length === r.length && r.length > 0 ? (console.log(
            `[Collapse] Collapsing ${o.label} into pill (${r.length})`
          ), r.forEach((i) => e.removeItem(i, !0)), e.updateOption(s, {
            value: s,
            text: `${o.label} (${r.length})`,
            isGroup: !0
          }), e.items.includes(s) || e.addItem(s, !0)) : e.items.includes(s) && (console.log(`[Expand] Removing pill for ${o.label}`), e.removeItem(s, !0));
        }), console.log("[FlexiSelect] After change, items:", e.getValue());
      }), e.on("item_remove", (t) => {
        if (t.startsWith("__group_")) {
          const l = t.replace("__group_", ""), o = Object.entries(e.optgroups).find(
            ([, r]) => r.label === l
          ), c = o ? o[0] : null;
          if (c) {
            const u = Object.values(e.options).filter(
              (s) => s.optgroup === c
            ).map((s) => s.value);
            e.addItems(u, !0), console.log(
              `[Expand] Group pill ${l} removed → restored children`,
              u
            );
          }
        }
      });
    }
  };
}
export {
  m as FlexiSelect,
  m as default,
  x as withCheckboxes,
  $ as withGroupCheckboxes,
  v as withImages
};