composite-select 1.0.8 → 1.0.10

package/dist/cjs/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.cjs

@@ -0,0 +1,345 @@
+import "../CenterAndHeightResizer.js";
+import { OptionsSection } from "./options-section.js";
+import { urlStateConfig, getNextId, setNextId } from "./urlManager.js";
+import { getSafeFreeOffset } from "../composite-select/namesSource.js";
+const css2 = await fetch("./OptionsSectionManager.css").then((r) => r.text());
+OptionsSection.cssText = css2;
+const reloadLink = document.getElementById("reload-link");
+if (reloadLink) {
+    reloadLink.href = window.location.pathname;
+}
+let instanceCounter = 0;
+const updateUrlDisplay = (url = window.location.href) => {
+    const el = document.getElementById("url-display");
+    if (el)
+        el.textContent = url;
+};
+const init = (initialOptions = [], states = {}) => {
+    instanceCounter++;
+    const id = instanceCounter;
+    const resizerLeft = states.left || "50px";
+    const resizerCenter = states.center || "350px";
+    const resizerHeight = states.height || "";
+    const section = document.createElement("div");
+    section.className = "demo-section";
+    section.innerHTML = `
+    <h2>Instance #${id} (No CSS Request)</h2>
+    <button class="gcp-css white destroy-btn" data-role="destroy">Destroy</button>
+
+    <div class="resizer-container">
+      <center-and-height-resizer data-role="resizer" left="${resizerLeft}" center="${resizerCenter}" ${resizerHeight ? `height="${resizerHeight}"` : ""}>
+        <options-section
+          label="${states.label || "Search via attrs..."}"
+          value="${states.value || ""}"
+          max-height="${states.maxHeight || ""}"
+          ${states.loading ? "loading" : ""}
+          ${states.disabled ? "disabled" : ""}
+          ${states.setShowFooter !== false ? "show-footer" : ""}
+          ${states.setShowFilter !== false ? "show-filter" : ""}
+        ></options-section>
+      </center-and-height-resizer>
+    </div>
+
+    <div class="controls gcp-css" style="margin-bottom: 8px;">
+      <div class="controls-label">OptionsSectionManager (No CSS Request)</div>
+
+      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <div class="gcp-css checkbox-wrapper">
+          <div class="checkbox-row">
+            <input type="checkbox" id="disabled-opt-${id}" data-role="disabled-opt" ${states.disabled ? "checked" : ""}>
+            <div class="content-cell"><label for="disabled-opt-${id}">Disabled</label></div>
+          </div>
+        </div>
+
+        <div class="gcp-css checkbox-wrapper">
+          <div class="checkbox-row">
+            <input type="checkbox" id="loading-opt-${id}" data-role="loading-opt" ${states.loading ? "checked" : ""}>
+            <div class="content-cell"><label for="loading-opt-${id}">Loading</label></div>
+          </div>
+        </div>
+
+        <div class="gcp-css checkbox-wrapper">
+          <div class="checkbox-row">
+            <input type="checkbox" id="footer-opt-${id}" data-role="footer-opt" ${states.setShowFooter !== false ? "checked" : ""}>
+            <div class="content-cell"><label for="footer-opt-${id}">Show Footer</label></div>
+          </div>
+        </div>
+
+        <div class="gcp-css checkbox-wrapper">
+          <div class="checkbox-row">
+            <input type="checkbox" id="filter-opt-${id}" data-role="filter-opt" ${states.setShowFilter !== false ? "checked" : ""}>
+            <div class="content-cell"><label for="filter-opt-${id}">Show Filter</label></div>
+          </div>
+        </div>
+
+        <div class="gcp-css checkbox-wrapper">
+          <div class="checkbox-row">
+            <input type="checkbox" id="empty-list-${id}" data-role="empty-list-cb" ${states.emptyList ? "checked" : ""}>
+            <div class="content-cell"><label for="empty-list-${id}">Empty list (sim search)</label></div>
+          </div>
+        </div>
+      </div>
+
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;">
+        <div class="gcp-css input-wrapper">
+          <input type="text" id="label-input-opt-${id}" data-role="label-input-opt" placeholder="&nbsp;" value="${states.label || ""}">
+          <label for="label-input-opt-${id}">Label</label>
+        </div>
+        <div class="gcp-css input-wrapper">
+          <input type="text" id="value-input-opt-${id}" data-role="value-input-opt" placeholder="&nbsp;" value="${states.value || ""}">
+          <label for="value-input-opt-${id}">Value</label>
+        </div>
+        <button class="gcp-css white" data-role="focus-btn">Focus</button>
+        <button class="gcp-css white" data-role="add-btn">Add Random</button>
+        <button class="gcp-css white" data-role="clear-btn">Clear All</button>
+      </div>
+
+      <div style="display: flex; gap: 5px; align-items: center; width: 100%; margin-top: 10px; flex-wrap: wrap;">
+        <span style="min-width: 120px;">📏 <strong>Max Height</strong>:</span>
+        <div style="display: flex; gap: 2px;">
+          <button class="gcp-css white" data-role="mh-down" style="padding: 0 8px; min-width: auto;">▼</button>
+          <div class="gcp-css input-wrapper" style="max-width: 100px; margin-bottom: 0;">
+            <input type="text" id="mh-input-${id}" data-role="mh-input" placeholder="&nbsp;" value="${states.maxHeight || ""}">
+            <label for="mh-input-${id}">Height</label>
+          </div>
+          <button class="gcp-css white" data-role="mh-up" style="padding: 0 8px; min-width: auto;">▲</button>
+        </div>
+        <button class="gcp-css white" data-role="mh-set-btn">Set</button>
+        <button class="gcp-css white" data-role="mh-preset" data-value="200px">200px</button>
+        <button class="gcp-css white" data-role="mh-preset" data-value="300px">300px</button>
+        <button class="gcp-css white" data-role="mh-preset" data-value="400px">400px</button>
+        <button class="gcp-css white" data-role="mh-preset" data-value="600px">600px</button>
+        <button class="gcp-css white" data-role="mh-preset" data-value="">Reset</button>
+      </div>
+
+      <div style="display: flex; gap: 5px; align-items: center; width: 100%; margin-top: 10px; flex-wrap: wrap;">
+        <span style="min-width: 120px;">🎨 <strong>Render</strong>:</span>
+        <button class="gcp-css white" data-role="opt-render-btn">Set Custom Render</button>
+        <button class="gcp-css white" data-role="opt-string-render-btn">Set String Render</button>
+        <button class="gcp-css white" data-role="opt-default-render-btn">Set Default Render</button>
+        <button class="gcp-css white" data-role="opt-empty-btn">Set Custom Empty</button>
+        <button class="gcp-css white" data-role="opt-default-empty-btn">Set Default Empty</button>
+      </div>
+
+      <div style="width: 100%; margin-top: 10px;">
+        (onInputChange triggers: <span data-role="onchange-count" style="font-weight: bold;">0</span>,
+        onItemPick: <span data-role="onpick-count" style="font-weight: bold;">0</span>,
+        onOk: <span data-role="onok-count" style="font-weight: bold;">0</span>,
+        onCancel: <span data-role="oncancel-count" style="font-weight: bold;">0</span>,
+        onHighlightChange: <span data-role="onhighlight-count" style="font-weight: bold;">0</span>)
+      </div>
+    </div>
+
+    <pre data-role="dump" style="background:#f8f8f8;padding:10px;border:1px solid #eee;border-radius:4px;font-size:12px;margin:0;overflow:auto;"></pre>
+  `;
+    document.getElementById("instances-area").appendChild(section);
+    const wc = section.querySelector("options-section");
+    const resizer = section.querySelector('[data-role="resizer"]');
+    const destroyBtn = section.querySelector('[data-role="destroy"]');
+    const dump = section.querySelector('[data-role="dump"]');
+    const disabledOptCb = section.querySelector('[data-role="disabled-opt"]');
+    const loadingOptCb = section.querySelector('[data-role="loading-opt"]');
+    const footerOptCb = section.querySelector('[data-role="footer-opt"]');
+    const filterOptCb = section.querySelector('[data-role="filter-opt"]');
+    const emptyListCb = section.querySelector('[data-role="empty-list-cb"]');
+    const labelInputOpt = section.querySelector('[data-role="label-input-opt"]');
+    const valueInputOpt = section.querySelector('[data-role="value-input-opt"]');
+    const focusBtn = section.querySelector('[data-role="focus-btn"]');
+    const addBtn = section.querySelector('[data-role="add-btn"]');
+    const clearBtn = section.querySelector('[data-role="clear-btn"]');
+    const mhInput = section.querySelector('[data-role="mh-input"]');
+    const mhSetBtn = section.querySelector('[data-role="mh-set-btn"]');
+    const mhUp = section.querySelector('[data-role="mh-up"]');
+    const mhDown = section.querySelector('[data-role="mh-down"]');
+    const optRenderBtn = section.querySelector('[data-role="opt-render-btn"]');
+    const optStringRenderBtn = section.querySelector('[data-role="opt-string-render-btn"]');
+    const optDefaultRenderBtn = section.querySelector('[data-role="opt-default-render-btn"]');
+    const optEmptyBtn = section.querySelector('[data-role="opt-empty-btn"]');
+    const optDefaultEmptyBtn = section.querySelector('[data-role="opt-default-empty-btn"]');
+    const inc = (role) => {
+        const el = section.querySelector(`[data-role="${role}"]`);
+        if (el) {
+            el.textContent = String(parseInt(el.textContent || "0", 10) + 1);
+        }
+    };
+    const updateDump = (options) => {
+        dump.textContent = JSON.stringify(options.filter((o) => o.selected), null, 2);
+    };
+    const syncUrl = () => {
+        const url = new URL(window.location.href);
+        urlStateConfig.toUrl(url, id, {
+            options: wc.options,
+            left: resizer.getAttribute("left") || "50px",
+            center: resizer.getAttribute("center") || "350px",
+            height: resizer.getAttribute("height") || "",
+            disabled: disabledOptCb.checked,
+            loading: loadingOptCb.checked,
+            setShowFooter: footerOptCb.checked,
+            setShowFilter: filterOptCb.checked,
+            emptyList: emptyListCb.checked,
+            label: labelInputOpt.value || "",
+            value: valueInputOpt.value || "",
+            maxHeight: mhInput.value || "",
+            highlight: String(wc.highlight || ""),
+        });
+        window.history.replaceState({}, "", url);
+        updateUrlDisplay(url.toString());
+    };
+    wc.options = initialOptions;
+    const mgr = wc.getManager();
+    mgr.getSubscriber().bind("onInputChange", (e) => {
+        inc("onchange-count");
+        valueInputOpt.value = e.target.value;
+        syncUrl();
+    });
+    mgr.getSubscriber().bind("onItemPick", (item) => {
+        inc("onpick-count");
+        const nextOptions = wc.options.map((o) => {
+            if (String(o.id) === String(item.id))
+                return { ...o, selected: !o.selected };
+            return o;
+        });
+        wc.options = nextOptions;
+        updateDump(nextOptions);
+        syncUrl();
+    });
+    mgr.getSubscriber().bind("onCancel", () => inc("oncancel-count"));
+    mgr.getSubscriber().bind("onOk", () => inc("onok-count"));
+    mgr.getSubscriber().bind("onHighlightChange", (id) => {
+        inc("onhighlight-count");
+        syncUrl();
+    });
+    if (states.highlight) {
+        mgr.highlightAndScrollToElementOnTheList(states.highlight);
+    }
+    updateDump(wc.options);
+    disabledOptCb.addEventListener("change", () => {
+        wc.setDisabled(disabledOptCb.checked);
+        syncUrl();
+    });
+    loadingOptCb.addEventListener("change", () => {
+        wc.setLoading(loadingOptCb.checked);
+        syncUrl();
+    });
+    footerOptCb.addEventListener("change", () => {
+        wc.setShowFooter(footerOptCb.checked);
+        syncUrl();
+    });
+    filterOptCb.addEventListener("change", () => {
+        wc.setShowFilter(filterOptCb.checked);
+        syncUrl();
+    });
+    emptyListCb.addEventListener("change", () => {
+        wc.setValue(wc.value); // Trigger re-search
+        syncUrl();
+    });
+    labelInputOpt.addEventListener("input", () => {
+        wc.setLabel(labelInputOpt.value);
+        syncUrl();
+    });
+    valueInputOpt.addEventListener("input", () => {
+        wc.setValue(valueInputOpt.value);
+        syncUrl();
+    });
+    focusBtn.addEventListener("click", () => wc.setFocus());
+    addBtn.addEventListener("click", () => {
+        const id = getNextId();
+        setNextId(id + 1);
+        const next = [...wc.options, { id, label: `NoCSS Option ${id}` }];
+        wc.options = next;
+        syncUrl();
+    });
+    clearBtn.addEventListener("click", () => {
+        wc.options = [];
+        syncUrl();
+    });
+    const setMH = (val) => {
+        mhInput.value = val;
+        wc.maxHeight = val;
+        syncUrl();
+    };
+    mhSetBtn.addEventListener("click", () => setMH(mhInput.value));
+    mhUp.addEventListener("click", () => {
+        const val = parseInt(mhInput.value) || 200;
+        setMH(val + 10 + "px");
+    });
+    mhDown.addEventListener("click", () => {
+        const val = parseInt(mhInput.value) || 200;
+        setMH(Math.max(0, val - 10) + "px");
+    });
+    section.querySelectorAll('[data-role="mh-preset"]').forEach((btn) => {
+        btn.addEventListener("click", () => setMH(btn.dataset.value || ""));
+    });
+    optRenderBtn.addEventListener("click", () => {
+        wc.setRenderItem((item) => {
+            const el = document.createElement("div");
+            el.className = "element";
+            el.dataset.id = String(item.id);
+            el.style.padding = "8px";
+            el.style.borderLeft = item.selected ? "4px solid orange" : "4px solid transparent";
+            el.innerHTML = `<strong>NOCSS: ${item.label}</strong> ${item.selected ? "✅" : ""}`;
+            return el;
+        });
+    });
+    optStringRenderBtn.addEventListener("click", () => {
+        wc.setRenderItem((item) => `<div class="element" data-id="${item.id}" style="color: orange;">STRING NOCSS: ${item.label}</div>`);
+    });
+    optDefaultRenderBtn.addEventListener("click", () => {
+        wc.setRenderItem();
+    });
+    optEmptyBtn.addEventListener("click", () => {
+        wc.setRenderEmpty(() => `<div style="color: orange; padding: 20px;">NOCSS: NOTHING FOUND!</div>`);
+    });
+    optDefaultEmptyBtn.addEventListener("click", () => {
+        wc.setRenderEmpty();
+    });
+    resizer.addEventListener("onLeft", () => syncUrl());
+    resizer.addEventListener("onCenter", () => syncUrl());
+    resizer.addEventListener("onHeight", () => syncUrl());
+    destroyBtn.addEventListener("click", () => {
+        wc.getManager()?.destroy();
+        section.remove();
+    });
+    return wc;
+};
+const initBtn = document.getElementById("init-btn");
+if (initBtn) {
+    initBtn.addEventListener("click", () => {
+        init([
+            { id: 401, label: "NoCSS Item 1" },
+            { id: 402, label: "NoCSS Item 2", selected: true },
+        ]);
+    });
+}
+const loadFromUrl = () => {
+    const instancesArea = document.getElementById("instances-area");
+    if (!instancesArea)
+        return;
+    instancesArea.innerHTML = "";
+    instanceCounter = 0;
+    setNextId(getSafeFreeOffset());
+    const urlParams = new URLSearchParams(window.location.search);
+    const allIds = urlStateConfig.getAllIds(urlParams);
+    if (allIds.length === 0) {
+        init([
+            { id: 1, label: "Initial NoCSS 1" },
+            { id: 2, label: "Initial NoCSS 2" },
+        ], {});
+    }
+    else {
+        allIds.forEach((id) => {
+            const state = urlStateConfig.fromUrl(urlParams, id);
+            if (state.options) {
+                state.options.forEach((o) => {
+                    const numId = typeof o.id === "number" ? o.id : parseInt(String(o.id), 10);
+                    if (!isNaN(numId) && numId >= getNextId())
+                        setNextId(numId + 1);
+                });
+            }
+            init(state.options || [], state);
+        });
+    }
+    updateUrlDisplay();
+};
+window.addEventListener("popstate", loadFromUrl);
+loadFromUrl();