npm - composite-select - Versions diffs - 1.0.0 - Mend

composite-select 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/README.md +5 -0
package/commitlint.config.js +3 -0
package/composition/composite-select/CompositeManager.js +43 -0
package/composition/composite-select/composite-select.js +199 -0
package/composition/composite-select/debounce.js +10 -0
package/composition/composite-select/helpers.js +96 -0
package/composition/composite-select/react.js +189 -0
package/composition/container/ContainerManager.js +76 -0
package/composition/img/ai.png +0 -0
package/composition/img/chatgpt.png +0 -0
package/composition/img/claude.png +0 -0
package/composition/img/gemini.png +0 -0
package/composition/img/gmail.png +0 -0
package/composition/img/google_calendar.png +0 -0
package/composition/img/google_drive.png +0 -0
package/composition/img/google_keep.png +0 -0
package/composition/img/img.json +5 -0
package/composition/img/perplexity.png +0 -0
package/composition/img/t3chat.png +0 -0
package/composition/img/timeanddate.png +0 -0
package/composition/img/tools.png +0 -0
package/composition/img/youtube.png +0 -0
package/composition/options-section/OptionsSectionManager.css +263 -0
package/composition/options-section/OptionsSectionManager.js +486 -0
package/composition/options-section/options-section.js +245 -0
package/composition/options-section/react.js +90 -0
package/composition/selected-section/SelectedSectionManager.css +214 -0
package/composition/selected-section/SelectedSectionManager.js +336 -0
package/composition/selected-section/react.js +91 -0
package/composition/selected-section/selected-section.js +207 -0
package/composition/unbind/clickOutside.js +17 -0
package/diff/coreBundle.patch +13 -0
package/diff/recorderApp.patch +13 -0
package/dist/cjs/Module.cjs +15 -0
package/dist/cjs/composite-select/CompositeManager.js +43 -0
package/dist/cjs/composite-select/composite-select.js +199 -0
package/dist/cjs/composite-select/debounce.js +10 -0
package/dist/cjs/composite-select/helpers.js +96 -0
package/dist/cjs/composite-select/react.js +189 -0
package/dist/cjs/container/ContainerManager.js +76 -0
package/dist/cjs/createSubscriber.cjs +48 -0
package/dist/cjs/options-section/OptionsSectionManager.js +486 -0
package/dist/cjs/options-section/options-section.js +245 -0
package/dist/cjs/options-section/react.js +90 -0
package/dist/cjs/selected-section/SelectedSectionManager.js +336 -0
package/dist/cjs/selected-section/react.js +91 -0
package/dist/cjs/selected-section/selected-section.js +207 -0
package/dist/cjs/types.cjs +1 -0
package/dist/cjs/unbind/clickOutside.js +17 -0
package/dist/esm/Module.js +15 -0
package/dist/esm/composite-select/CompositeManager.js +43 -0
package/dist/esm/composite-select/composite-select.js +199 -0
package/dist/esm/composite-select/debounce.js +10 -0
package/dist/esm/composite-select/helpers.js +96 -0
package/dist/esm/composite-select/react.js +189 -0
package/dist/esm/container/ContainerManager.js +76 -0
package/dist/esm/createSubscriber.js +48 -0
package/dist/esm/options-section/OptionsSectionManager.js +486 -0
package/dist/esm/options-section/options-section.js +245 -0
package/dist/esm/options-section/react.js +90 -0
package/dist/esm/selected-section/SelectedSectionManager.js +336 -0
package/dist/esm/selected-section/react.js +91 -0
package/dist/esm/selected-section/selected-section.js +207 -0
package/dist/esm/types.js +1 -0
package/dist/esm/unbind/clickOutside.js +17 -0
package/dist/types/Module.d.ts +15 -0
package/dist/types/composite-select/CompositeManager.d.ts +21 -0
package/dist/types/composite-select/ContainerManager.html.d.ts +1 -0
package/dist/types/composite-select/composite-select.d.ts +26 -0
package/dist/types/composite-select/composite-select.html.d.ts +1 -0
package/dist/types/composite-select/debounce.d.ts +1 -0
package/dist/types/composite-select/helpers.d.ts +38 -0
package/dist/types/composite-select/namesSource.d.ts +4 -0
package/dist/types/composite-select/react.d.ts +61 -0
package/dist/types/composite-select/urlManager.d.ts +49 -0
package/dist/types/composite-select/urlManagerWc.d.ts +44 -0
package/dist/types/container/ContainerManager.d.ts +33 -0
package/dist/types/createSubscriber.d.ts +26 -0
package/dist/types/options-section/OptionsSectionManager.d.ts +117 -0
package/dist/types/options-section/OptionsSectionManager.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/options-section/options-section.d.ts +67 -0
package/dist/types/options-section/react.d.ts +27 -0
package/dist/types/options-section/urlManager.d.ts +28 -0
package/dist/types/selected-section/SelectedSectionManager.d.ts +89 -0
package/dist/types/selected-section/SelectedSectionManager.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManager.templates.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/selected-section/react.d.ts +32 -0
package/dist/types/selected-section/selected-section.d.ts +54 -0
package/dist/types/selected-section/urlManager.d.ts +25 -0
package/dist/types/types.d.ts +9 -0
package/dist/types/unbind/clickOutside.d.ts +1 -0
package/floating-label-pattern.css +502 -0
package/js/CenterAndHeightResizer.js +263 -0
package/js/CenterResizer.js +190 -0
package/madooei.tar.gz +0 -0
package/package.json +28 -0
package/release.config.js +3 -0
package/test/lib.d.ts +6 -0
package/test/lib.js +30 -0

package/dist/cjs/selected-section/react.js ADDED Viewed

@@ -0,0 +1,91 @@
+// @ts-ignore
+import React from "react";
+import "./selected-section.js";
+export const SelectedSection = React.forwardRef((props, ref) => {
+    const { label, "show-input": showInput, value, disabled, error, loading, selected: selectedSelected, children, onDelete, onClear, onChange, onInputChange, onFocus, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && selectedSelected !== undefined) {
+            if (el.getManager && el.getManager()) {
+                el.getManager().setSelected(typeof selectedSelected === "string" ? JSON.parse(selectedSelected) : selectedSelected);
+            }
+            else {
+                el.setAttribute("selected", typeof selectedSelected === "string" ? selectedSelected : JSON.stringify(selectedSelected));
+            }
+        }
+    }, [selectedSelected]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager && el.getManager()) {
+            const mgr = el.getManager();
+            const sub = mgr.getSubscriber();
+            if (sub) {
+                const unbinds = [];
+                if (onDelete) {
+                    unbinds.push(sub.bind("onDelete", (id) => onDelete(id)));
+                }
+                if (onClear) {
+                    unbinds.push(sub.bind("onClear", () => onClear()));
+                }
+                if (onChange) {
+                    unbinds.push(sub.bind("onChange", (s) => onChange(s)));
+                }
+                if (onInputChange) {
+                    unbinds.push(sub.bind("onInputChange", (e, previousValue) => onInputChange({
+                        originalEvent: e,
+                        value: e.target.value,
+                        key: e.key || "",
+                        previousValue,
+                    })));
+                }
+                if (onFocus) {
+                    unbinds.push(sub.bind("onFocus", (e) => onFocus({ originalEvent: e })));
+                }
+                return () => {
+                    unbinds.forEach((u) => u());
+                };
+            }
+        }
+    }, [onDelete, onClear, onChange, onInputChange, onFocus]);
+    const wcProps = { ...rest, ref: setRef };
+    if (label !== undefined)
+        wcProps.label = label;
+    if (value !== undefined)
+        wcProps.value = value;
+    if (String(showInput) === "true") {
+        wcProps["show-input"] = "true";
+    }
+    else {
+        delete wcProps["show-input"];
+    }
+    if (String(disabled) === "true") {
+        wcProps.disabled = "true";
+    }
+    else {
+        delete wcProps.disabled;
+    }
+    if (String(error) === "true") {
+        wcProps.error = "true";
+    }
+    else {
+        delete wcProps.error;
+    }
+    if (String(loading) === "true") {
+        wcProps.loading = "true";
+    }
+    else {
+        delete wcProps.loading;
+    }
+    return React.createElement("selected-section", wcProps, children);
+});
+export default SelectedSection;

package/dist/cjs/selected-section/selected-section.js ADDED Viewed

@@ -0,0 +1,207 @@
+import { SelectedSectionManager } from "./SelectedSectionManager.js";
+/**
+ * Injects CSS into the Shadow DOM.
+ * Priority:
+ * 1. SelectedSection.cssText (Bundler string injection)
+ * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
+ * 3. SelectedSection.defaultCssUrls (Global JS property)
+ *
+ * Example of Global HTML Declaration in the main document <head>:
+ * <head>
+ *   <meta name="select-component" content="SelectedSectionManager.css">
+ * </head>
+ */
+export class SelectedSection extends HTMLElement {
+    _manager = null;
+    _options = {};
+    _mountPoint;
+    _stylesInjected = false;
+    // 1. For Bundlers: Assign CSS string directly (e.g. import css from './style.css?raw')
+    static cssText = "";
+    // 2. For Vanilla JS: Default URLs (Vite/Webpack5 will also process import.meta.url)
+    static defaultCssUrls = [];
+    static get observedAttributes() {
+        return ["label", "show-input", "value", "disabled", "error", "loading", "selected"];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `<style></style><div></div>`;
+        this._mountPoint = this.shadowRoot.querySelector("div");
+    }
+    connectedCallback() {
+        this._injectStyles();
+        if (this._manager)
+            return;
+        this._options = {
+            label: this.getAttribute("label") || "",
+            showInput: this.hasAttribute("show-input"),
+            value: this.getAttribute("value") || "",
+            disabled: this.hasAttribute("disabled"),
+            error: this.hasAttribute("error"),
+            loading: this.hasAttribute("loading"),
+            selected: this._parseJSON(this.getAttribute("selected")) ?? [],
+        };
+        this._manager = new SelectedSectionManager(this._mountPoint, this._options);
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+        this._manager = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this._manager)
+            return;
+        const isTrue = this.hasAttribute(name);
+        switch (name) {
+            case "label":
+                this._manager.setLabel(newValue);
+                break;
+            case "show-input":
+                this._manager.setShowInput(isTrue);
+                break;
+            case "value":
+                this._manager.setValue(newValue);
+                break;
+            case "disabled":
+                this._manager.setDisabled(isTrue);
+                break;
+            case "error":
+                this._manager.setError(isTrue);
+                break;
+            case "loading":
+                this._manager.setLoading(isTrue);
+                break;
+            case "selected": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.setSelected(parsed);
+                }
+                break;
+            }
+        }
+    }
+    _injectStyles() {
+        if (this._stylesInjected)
+            return;
+        this._stylesInjected = true;
+        const style = document.createElement("style");
+        // Scenario A: Bundler injected raw CSS string directly
+        if (SelectedSection.cssText) {
+            style.textContent = SelectedSection.cssText;
+        }
+        // Scenario B: Load from URLs (Global Meta Tag > Default Static Property)
+        else {
+            let urls = [];
+            const metaTag = document.querySelector('meta[name="select-component"]');
+            if (metaTag && metaTag.getAttribute("content")) {
+                urls = metaTag
+                    .getAttribute("content")
+                    .split(",")
+                    .map((s) => s.trim());
+            }
+            else {
+                urls = SelectedSection.defaultCssUrls;
+            }
+            urls.forEach((url) => {
+                if (!url)
+                    return;
+                style.textContent += `@import url("${url}");\n`;
+            });
+        }
+        // Remove existing injected CSS if updating dynamically
+        const existingStyle = this.shadowRoot.querySelector("style");
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+        this.shadowRoot.appendChild(style);
+    }
+    // Proxied methods
+    setSelected(list) {
+        this._manager?.setSelected(list);
+    }
+    setValue(value) {
+        this._manager?.setValue(value);
+    }
+    clearSearch(triggerOnChange = true) {
+        this._manager?.clearSearch(triggerOnChange);
+    }
+    setError(state) {
+        this.toggleAttribute("error", state);
+    }
+    setDisabled(state) {
+        this.toggleAttribute("disabled", state);
+    }
+    setLoading(state) {
+        this.toggleAttribute("loading", state);
+    }
+    setLabel(text) {
+        this.setAttribute("label", text);
+    }
+    setShowInput(state) {
+        this.toggleAttribute("show-input", state);
+    }
+    setRenderItem(renderer) {
+        this._manager?.setRenderItem(renderer);
+    }
+    setRenderList(renderer) {
+        this._manager?.setRenderList(renderer);
+    }
+    render() {
+        this._manager?.render();
+    }
+    // Getters and setters for properties
+    get selected() {
+        return this._manager?.getSelected() || [];
+    }
+    set selected(val) {
+        this.setSelected(val);
+    }
+    get value() {
+        return this._manager?.propInputElement?.value || "";
+    }
+    set value(val) {
+        this.setValue(val);
+    }
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        this.setLabel(val);
+    }
+    get error() {
+        return this.hasAttribute("error");
+    }
+    set error(val) {
+        this.setError(val);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(val) {
+        this.setDisabled(val);
+    }
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(val) {
+        this.setLoading(val);
+    }
+    setFocus() {
+        this._manager?.setFocus();
+    }
+    getManager() {
+        return this._manager;
+    }
+    _parseJSON(val) {
+        if (!val)
+            return undefined;
+        try {
+            return JSON.parse(val);
+        }
+        catch (e) {
+            console.error(`SelectedSection: failed to parse JSON:`, val, e);
+            return undefined;
+        }
+    }
+}
+customElements.define("selected-section", SelectedSection);

package/dist/cjs/types.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/cjs/unbind/clickOutside.js ADDED Viewed

@@ -0,0 +1,17 @@
+export function clickOutside(targets, callback) {
+    const targetList = Array.isArray(targets) ? targets : [targets];
+    const handler = (e) => {
+        const node = e.target;
+        const isInside = targetList.some((target) => target && target.contains(node));
+        if (!isInside) {
+            callback(e);
+        }
+    };
+    // Use capturing phase so we don't miss events if some child stops propagation
+    document.addEventListener("click", handler, true);
+    document.addEventListener("touchstart", handler, { capture: true, passive: true });
+    return function unbind() {
+        document.removeEventListener("click", handler, true);
+        document.removeEventListener("touchstart", handler, true);
+    };
+}

package/dist/esm/Module.js ADDED Viewed

@@ -0,0 +1,15 @@
+/** @es.ts
+{
+   mode: "bundle",
+   extension: ".js",
+   options: {
+   }
+}
+@es.ts */
+export * from "./container/ContainerManager.js";
+export * from "./options-section/OptionsSectionManager.js";
+export * from "./selected-section/SelectedSectionManager.js";
+export * from "./unbind/clickOutside.js";
+export * from "./composite-select/helpers.js";
+export * from "./composite-select/CompositeManager.js";
+export * from "./types.js";

package/dist/esm/composite-select/CompositeManager.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { ContainerManager } from "../container/ContainerManager.js";
+import { OptionsSectionManager } from "../options-section/OptionsSectionManager.js";
+import { SelectedSectionManager } from "../selected-section/SelectedSectionManager.js";
+import { clickOutside } from "../unbind/clickOutside.js";
+export class CompositeManager {
+    container;
+    selected;
+    options;
+    _unbindClickOutside;
+    _parent;
+    constructor(parent, options = {}) {
+        this._parent = parent;
+        this.container = new ContainerManager(this._parent, options.container);
+        {
+            const target = this.container.getTarget();
+            const div = document.createElement("div");
+            target.appendChild(div);
+            this.selected = new SelectedSectionManager(div, options.select);
+            this.selected.getSubscriber().bind("onFocus", (e) => {
+                this.container.show();
+                this.options.setFocus();
+            });
+        }
+        {
+            const popover = this.container.getPopover();
+            const div = document.createElement("div");
+            popover.appendChild(div);
+            this.options = new OptionsSectionManager(div, options.options);
+        }
+        this._unbindClickOutside = clickOutside([this.container.getParent()], () => {
+            this.container.hide();
+        });
+    }
+    destroy() {
+        this._unbindClickOutside();
+        this.options.destroy();
+        if (typeof this.selected.destroy === "function") {
+            this.selected.destroy();
+        }
+        this.container.destroy();
+        this._parent.innerHTML = "";
+    }
+}

package/dist/esm/composite-select/composite-select.js ADDED Viewed

@@ -0,0 +1,199 @@
+import { CompositeManager } from "./CompositeManager.js";
+/**
+ * CompositeSelect web component — wraps CompositeManager.
+ *
+ * Does NOT use shadow DOM because ContainerManager creates a <div popover>
+ * whose positioning CSS classes (cover-bottom, bottom, etc. from popover.css)
+ * are global and cannot penetrate shadow DOM boundaries.
+ * The host page must load the required CSS via <link> tags, exactly as ContainerManager.html does.
+ *
+ * Attribute prefixes:
+ *   selected-*   →  SelectedSectionManager properties / events
+ *   options-*    →  OptionsSectionManager properties / events
+ *   container-*  →  ContainerManager properties / events
+ */
+export class CompositeSelect extends HTMLElement {
+    _manager = null;
+    _mountPoint;
+    static get observedAttributes() {
+        return [
+            // selected-* attributes
+            "selected-selected",
+            "selected-show-input",
+            "selected-value",
+            "selected-label",
+            "selected-disabled",
+            "selected-error",
+            "selected-loading",
+            "selected-show-delete",
+            // options-* attributes
+            "options-options",
+            "options-loading",
+            "options-value",
+            "options-label",
+            "options-disabled",
+            "options-max-height",
+            "options-show-footer",
+            "options-show-filter",
+            // container-* attributes
+            "container-position",
+            "container-offset",
+        ];
+    }
+    constructor() {
+        super();
+        // Light DOM — no shadow DOM (popover CSS must be global)
+        this._mountPoint = document.createElement("div");
+    }
+    connectedCallback() {
+        if (!this._mountPoint.parentNode) {
+            this.appendChild(this._mountPoint);
+        }
+        if (this._manager)
+            return;
+        const hasBoolAttr = (name, defaultVal) => this.hasAttribute(name) ? this.getAttribute(name) !== "false" : defaultVal;
+        // ── DEBUG: dump all boolean attrs at init time ────────────────────────────
+        const _bools = {
+            "selected-disabled": { hasAttr: this.hasAttribute("selected-disabled"), attrVal: this.getAttribute("selected-disabled"), resolved: hasBoolAttr("selected-disabled", false) },
+            "selected-error": { hasAttr: this.hasAttribute("selected-error"), attrVal: this.getAttribute("selected-error"), resolved: hasBoolAttr("selected-error", false) },
+            "selected-loading": { hasAttr: this.hasAttribute("selected-loading"), attrVal: this.getAttribute("selected-loading"), resolved: hasBoolAttr("selected-loading", false) },
+            "selected-show-input": { hasAttr: this.hasAttribute("selected-show-input"), attrVal: this.getAttribute("selected-show-input"), resolved: hasBoolAttr("selected-show-input", true) },
+            "selected-show-delete": { hasAttr: this.hasAttribute("selected-show-delete"), attrVal: this.getAttribute("selected-show-delete"), resolved: hasBoolAttr("selected-show-delete", true) },
+            "options-loading": { hasAttr: this.hasAttribute("options-loading"), attrVal: this.getAttribute("options-loading"), resolved: hasBoolAttr("options-loading", false) },
+            "options-disabled": { hasAttr: this.hasAttribute("options-disabled"), attrVal: this.getAttribute("options-disabled"), resolved: hasBoolAttr("options-disabled", false) },
+            "options-show-footer": { hasAttr: this.hasAttribute("options-show-footer"), attrVal: this.getAttribute("options-show-footer"), resolved: hasBoolAttr("options-show-footer", true) },
+            "options-show-filter": { hasAttr: this.hasAttribute("options-show-filter"), attrVal: this.getAttribute("options-show-filter"), resolved: hasBoolAttr("options-show-filter", true) },
+        };
+        for (const [attr, info] of Object.entries(_bools)) {
+            console.log(`[composite-select][connectedCallback] ${attr}: hasAttr=type >${typeof info.hasAttr}< value >${info.hasAttr}<  attrVal=type >${typeof info.attrVal}< value >${info.attrVal}<  resolved=type >${typeof info.resolved}< value >${info.resolved}<`);
+        }
+        // ─────────────────────────────────────────────────────────────────────────
+        this._manager = new CompositeManager(this._mountPoint, {
+            select: {
+                selected: this._parseJSON(this.getAttribute("selected-selected")) ?? [],
+                showInput: hasBoolAttr("selected-show-input", true),
+                value: this.getAttribute("selected-value") || "",
+                label: this.getAttribute("selected-label") || "",
+                disabled: hasBoolAttr("selected-disabled", false),
+                error: hasBoolAttr("selected-error", false),
+                loading: hasBoolAttr("selected-loading", false),
+                showDelete: hasBoolAttr("selected-show-delete", true),
+            },
+            options: {
+                options: this._parseJSON(this.getAttribute("options-options")) ?? [],
+                loading: hasBoolAttr("options-loading", false),
+                value: this.getAttribute("options-value") || "",
+                label: this.getAttribute("options-label") || "",
+                disabled: hasBoolAttr("options-disabled", false),
+                maxHeight: this.getAttribute("options-max-height") || undefined,
+                showFooter: hasBoolAttr("options-show-footer", true),
+                showFilter: hasBoolAttr("options-show-filter", true),
+            },
+            container: {},
+        });
+        if (this.getAttribute("container-position")) {
+            this._manager.container.setPosition(this.getAttribute("container-position"));
+        }
+        if (this.getAttribute("container-offset")) {
+            this._manager.container.setOffset(this.getAttribute("container-offset"));
+        }
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+        this._manager = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this._manager)
+            return;
+        const isTrue = newValue !== null && newValue !== "false";
+        // ── DEBUG: dump bool attrs as they change ─────────────────────────────────
+        const _boolAttrs = new Set(["selected-disabled", "selected-error", "selected-loading", "selected-show-input", "selected-show-delete", "options-loading", "options-disabled", "options-show-footer", "options-show-filter"]);
+        if (_boolAttrs.has(name)) {
+            console.log(`[composite-select][attributeChangedCallback] ${name}: isTrue=type >${typeof isTrue}< value >${isTrue}<  newValue=type >${typeof newValue}< value >${newValue}<  oldValue=type >${typeof _oldValue}< value >${_oldValue}<`);
+        }
+        // ─────────────────────────────────────────────────────────────────────────
+        switch (name) {
+            // ── selected ─────────────────────────────────────────────────────────
+            case "selected-selected": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.selected.setSelected(parsed);
+                }
+                break;
+            }
+            case "selected-show-input":
+                this._manager.selected.setShowInput(isTrue);
+                break;
+            case "selected-value":
+                this._manager.selected.setValue(newValue);
+                break;
+            case "selected-label":
+                this._manager.selected.setLabel(newValue);
+                break;
+            case "selected-disabled":
+                this._manager.selected.setDisabled(isTrue);
+                break;
+            case "selected-error":
+                this._manager.selected.setError(isTrue);
+                break;
+            case "selected-loading":
+                this._manager.selected.setLoading(isTrue);
+                break;
+            case "selected-show-delete":
+                this._manager.selected.setShowDelete(isTrue);
+                break;
+            // ── options ──────────────────────────────────────────────────────────
+            case "options-options": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.options.setOptions(parsed);
+                }
+                break;
+            }
+            case "options-loading":
+                this._manager.options.setLoading(isTrue);
+                break;
+            case "options-value":
+                this._manager.options.setValue(newValue);
+                break;
+            case "options-label":
+                this._manager.options.setLabel(newValue);
+                break;
+            case "options-disabled":
+                this._manager.options.setDisabled(isTrue);
+                break;
+            case "options-max-height":
+                this._manager.options.setMaxHeight(newValue);
+                break;
+            case "options-show-footer":
+                this._manager.options.setShowFooter(isTrue);
+                break;
+            case "options-show-filter":
+                this._manager.options.setShowFilter(isTrue);
+                break;
+            // ── container ────────────────────────────────────────────────────────
+            case "container-position":
+                this._manager.container.setPosition(newValue);
+                break;
+            case "container-offset":
+                this._manager.container.setOffset(newValue);
+                break;
+        }
+    }
+    // ─── Accessor ─────────────────────────────────────────────────────────────
+    getManager() {
+        return this._manager;
+    }
+    _parseJSON(val) {
+        if (!val)
+            return undefined;
+        try {
+            return JSON.parse(val);
+        }
+        catch (e) {
+            console.error(`CompositeSelect: failed to parse JSON:`, val, e);
+            return undefined;
+        }
+    }
+}
+customElements.define("composite-select", CompositeSelect);

package/dist/esm/composite-select/debounce.js ADDED Viewed

@@ -0,0 +1,10 @@
+export default function debounce(fn, delay) {
+    var timer = null;
+    return function (...args) {
+        var context = this;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            fn.apply(context, args);
+        }, delay);
+    };
+}