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/esm/options-section/options-section.js ADDED Viewed

@@ -0,0 +1,245 @@
+import { OptionsSectionManager } from "./OptionsSectionManager.js";
+/**
+ * Injects CSS into the Shadow DOM.
+ * Priority:
+ * 1. OptionsSection.cssText (Bundler string injection)
+ * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
+ * 3. OptionsSection.defaultCssUrls (Global JS property)
+ *
+ * Example of Global HTML Declaration in the main document <head>:
+ * <head>
+ *   <meta name="select-component" content="OptionsSectionManager.css" />
+ * </head>
+ */
+export class OptionsSection extends HTMLElement {
+    /**
+     * Bundlers can inject raw CSS string here to avoid HTTP requests entirely.
+     * e.g., OptionsSection.cssText = import('./OptionsSectionManager.css?raw');
+     */
+    static cssText = "";
+    static defaultCssUrls = [];
+    _manager = null;
+    _options = {};
+    _stylesInjected = false;
+    _mountPoint;
+    static get observedAttributes() {
+        return ["options", "loading", "value", "label", "disabled", "max-height", "show-footer", "show-filter"];
+    }
+    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 = {
+            options: this._parseJSON(this.getAttribute("options")) ?? [],
+            loading: this.hasAttribute("loading"),
+            value: this.getAttribute("value") || "",
+            label: this.getAttribute("label") || "",
+            disabled: this.hasAttribute("disabled"),
+            maxHeight: this.getAttribute("max-height") || "",
+            showFooter: this.hasAttribute("show-footer"),
+            showFilter: this.hasAttribute("show-filter"),
+        };
+        this._manager = new OptionsSectionManager(this._mountPoint, this._options);
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this._manager)
+            return;
+        const isTrue = this.hasAttribute(name);
+        switch (name) {
+            case "options": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.setOptions(parsed);
+                }
+                break;
+            }
+            case "loading":
+                this._manager.setLoading(isTrue);
+                break;
+            case "value":
+                this._manager.setValue(newValue);
+                break;
+            case "label":
+                this._manager.setLabel(newValue);
+                break;
+            case "disabled":
+                this._manager.setDisabled(isTrue);
+                break;
+            case "max-height":
+                this._manager.setMaxHeight(newValue);
+                break;
+            case "show-footer":
+                this._manager.setShowFooter(isTrue);
+                break;
+            case "show-filter":
+                this._manager.setShowFilter(isTrue);
+                break;
+        }
+    }
+    _injectStyles() {
+        if (this._stylesInjected)
+            return;
+        this._stylesInjected = true;
+        const style = document.createElement("style");
+        // Scenario A: Bundler injected raw CSS string directly
+        if (OptionsSection.cssText) {
+            style.textContent = OptionsSection.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 = OptionsSection.defaultCssUrls;
+            }
+            urls.forEach((url) => {
+                if (!url)
+                    return;
+                style.textContent += `@import url("${url}");\n`;
+            });
+        }
+        // Remove existing injected CSS if updating dynamically (e.g. css-urls changed)
+        const existingStyle = this.shadowRoot.querySelector("style");
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+        this.shadowRoot.appendChild(style);
+    }
+    // Proxied methods
+    setMaxHeight(maxHeight) {
+        if (maxHeight)
+            this.setAttribute("max-height", maxHeight);
+        else
+            this.removeAttribute("max-height");
+    }
+    setDisabled(disabled) {
+        this.toggleAttribute("disabled", disabled);
+    }
+    setShowFooter(show) {
+        this.toggleAttribute("show-footer", show);
+    }
+    setShowFilter(show) {
+        this.toggleAttribute("show-filter", show);
+    }
+    setOptions(options) {
+        // we don't necessarily want to stringify options back to attribute for performance and avoiding circularity
+        // but we can if we want to stay in sync. SelectedSection doesn't seem to do it for 'list'.
+        // this.setAttribute("options", JSON.stringify(options));
+        this._manager?.setOptions(options);
+    }
+    setLoading(loading) {
+        this.toggleAttribute("loading", loading);
+    }
+    setValue(value) {
+        this.setAttribute("value", value);
+    }
+    setLabel(label) {
+        this.setAttribute("label", label);
+    }
+    setRenderEmpty(renderer) {
+        this._manager?.setRenderEmpty(renderer);
+    }
+    setRenderItem(renderer) {
+        this._manager?.setRenderItem(renderer);
+    }
+    setRenderList(renderer) {
+        this._manager?.setRenderList(renderer);
+    }
+    setFocus() {
+        this._manager?.setFocus();
+    }
+    setBlur() {
+        this._manager?.setBlur();
+    }
+    highlightAndScrollToElementOnTheList(id) {
+        this._manager?.highlightAndScrollToElementOnTheList(id);
+    }
+    render() {
+        this._manager?.render();
+    }
+    // Getters and setters
+    get options() {
+        return this._manager?.propOptions.options || [];
+    }
+    set options(val) {
+        this.setOptions(val);
+    }
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(val) {
+        this.setLoading(val);
+    }
+    get value() {
+        return this._manager?.propInputElement?.value ?? this.getAttribute("value") ?? "";
+    }
+    set value(val) {
+        this.setValue(val);
+    }
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        this.setLabel(val);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(val) {
+        this.setDisabled(val);
+    }
+    get maxHeight() {
+        return this.getAttribute("max-height") || "";
+    }
+    set maxHeight(val) {
+        this.setMaxHeight(val);
+    }
+    get footer() {
+        return this.hasAttribute("show-footer") ? this.getAttribute("show-footer") !== "false" : true;
+    }
+    set footer(val) {
+        this.setShowFooter(val);
+    }
+    get filter() {
+        return this.hasAttribute("show-filter") ? this.getAttribute("show-filter") !== "false" : true;
+    }
+    set filter(val) {
+        this.setShowFilter(val);
+    }
+    get highlight() {
+        return this._manager?.propHighlightedId ?? null;
+    }
+    set highlight(val) {
+        this.highlightAndScrollToElementOnTheList(val);
+    }
+    getManager() {
+        return this._manager;
+    }
+    _parseJSON(val) {
+        if (!val)
+            return undefined;
+        try {
+            return JSON.parse(val);
+        }
+        catch (e) {
+            console.error(`OptionsSection: failed to parse JSON:`, val, e);
+            return undefined;
+        }
+    }
+}
+customElements.define("options-section", OptionsSection);

package/dist/esm/options-section/react.js ADDED Viewed

@@ -0,0 +1,90 @@
+// @ts-ignore
+import React from "react";
+import "./options-section.js";
+export const OptionsSection = React.forwardRef((props, ref) => {
+    const { options: optionsOptions, loading, value, label, disabled, "max-height": maxHeight, "show-footer": setShowFooter, "show-filter": setShowFilter, children, onItemPick, onInputChange, onCancel, onOk, onHighlightChange, ...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 && optionsOptions !== undefined) {
+            if (el.getManager && el.getManager()) {
+                el.getManager().setOptions(typeof optionsOptions === "string" ? JSON.parse(optionsOptions) : optionsOptions);
+            }
+            else {
+                el.setAttribute("options", typeof optionsOptions === "string" ? optionsOptions : JSON.stringify(optionsOptions));
+            }
+        }
+    }, [optionsOptions]);
+    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 (onItemPick) {
+                    unbinds.push(sub.bind("onItemPick", (...args) => {
+                        return onItemPick?.(...args);
+                    }));
+                }
+                if (onInputChange) {
+                    unbinds.push(sub.bind("onInputChange", onInputChange));
+                }
+                if (onCancel) {
+                    unbinds.push(sub.bind("onCancel", onCancel));
+                }
+                if (onOk) {
+                    unbinds.push(sub.bind("onOk", onOk));
+                }
+                if (onHighlightChange) {
+                    unbinds.push(sub.bind("onHighlightChange", onHighlightChange));
+                }
+                return () => {
+                    unbinds.forEach((u) => u());
+                };
+            }
+        }
+    }, [onItemPick, onInputChange, onCancel, onOk, onHighlightChange]);
+    const wcProps = { ...rest, ref: setRef };
+    if (value !== undefined)
+        wcProps.value = value;
+    if (label !== undefined)
+        wcProps.label = label;
+    if (String(loading) === "true") {
+        wcProps.loading = "true";
+    }
+    else {
+        delete wcProps.loading;
+    }
+    if (String(disabled) === "true") {
+        wcProps.disabled = "true";
+    }
+    else {
+        delete wcProps.disabled;
+    }
+    if (maxHeight !== undefined)
+        wcProps["max-height"] = maxHeight;
+    if (String(setShowFooter) === "true") {
+        wcProps["show-footer"] = "true";
+    }
+    else {
+        delete wcProps["show-footer"];
+    }
+    if (String(setShowFilter) === "true") {
+        wcProps["show-filter"] = "true";
+    }
+    else {
+        delete wcProps["show-filter"];
+    }
+    return React.createElement("options-section", wcProps, children);
+});
+export default OptionsSection;

package/dist/esm/selected-section/SelectedSectionManager.js ADDED Viewed

@@ -0,0 +1,336 @@
+import createSubscriber from "../createSubscriber.js";
+export class SelectedSectionManager {
+    propParentElement;
+    propContainer;
+    propFlexList;
+    propButtonsContainer;
+    propOptions;
+    propInputElement = null;
+    propClearButton;
+    propLoaderElement = null;
+    propLabelElement = null;
+    _skipNextFocusEvent = false;
+    _subscriber = createSubscriber();
+    constructor(parentElement, options = {}) {
+        this.propParentElement = parentElement;
+        const { selected = [], showInput = true, value = "", renderItem = (item, def) => def(item), renderList = (selected, def) => def(selected), onDelete = (id) => { }, onClear = () => { }, onInputChange = (e, previousValue) => { }, onChange = (selected) => { }, onComponentChange = (s, reason) => { }, disabled = false, error = false, loading = false, renderEmpty = (def) => def(), label = "", showDelete = true, ...rest } = options;
+        this.propOptions = {
+            selected,
+            showInput,
+            value,
+            renderItem,
+            renderList,
+            onDelete,
+            onClear,
+            onInputChange,
+            onChange,
+            onComponentChange,
+            disabled,
+            error,
+            loading,
+            renderEmpty,
+            label,
+            showDelete,
+            ...rest,
+        };
+        this.render();
+        Promise.resolve().then(() => {
+            this._bindEvents();
+        });
+    }
+    getSubscriber() {
+        return this._subscriber;
+    }
+    _bindEvents() {
+        this.propParentElement.addEventListener("click", (e) => {
+            const target = e.target;
+            // Handle Clear Button
+            const clearBtn = target.closest(".clear-btn");
+            if (clearBtn && this.propParentElement.contains(clearBtn)) {
+                e.preventDefault();
+                this.clearSearch();
+                return;
+            }
+            // Handle Delete Item
+            const delBtn = target.closest("[data-remove]");
+            if (delBtn && this.propParentElement.contains(delBtn)) {
+                e.preventDefault();
+                const id = delBtn.getAttribute("data-remove");
+                if (this.propOptions.onDelete) {
+                    this.propOptions.onDelete.call(this, id);
+                }
+                this._subscriber.trigger("onDelete", id);
+                return;
+            }
+        });
+        this.propParentElement.addEventListener("input", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                const previousValue = this.propOptions.value;
+                this.propOptions.value = this.propInputElement.value;
+                if (this.propOptions.onInputChange) {
+                    this.propOptions.onInputChange.call(this, e, previousValue);
+                }
+                this._subscriber.trigger("onInputChange", e, previousValue);
+            }
+        });
+        this.propParentElement.addEventListener("focusin", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                if (this._skipNextFocusEvent) {
+                    this._skipNextFocusEvent = false;
+                    return;
+                }
+                if (this.propOptions.onFocus) {
+                    this.propOptions.onFocus.call(this, e);
+                }
+                this._subscriber.trigger("onFocus", e);
+            }
+        });
+        this.propParentElement.addEventListener("keydown", (e) => {
+            const target = e.target;
+            if (target === this.propInputElement) {
+                const isBackspaceOnEmpty = e.key === "Backspace" && this.propInputElement.value === "";
+                const isEnter = e.key === "Enter";
+                if (isEnter || isBackspaceOnEmpty) {
+                    const previousValue = this.propOptions.value;
+                    if (this.propOptions.onInputChange) {
+                        this.propOptions.onInputChange.call(this, e, previousValue);
+                    }
+                    this._subscriber.trigger("onInputChange", e, previousValue);
+                }
+            }
+        });
+    }
+    _triggerOnComponentChange(reason) {
+        if (this.propOptions.onComponentChange) {
+            this.propOptions.onComponentChange.call(this, this.propOptions, reason);
+        }
+        this._subscriber.trigger("onComponentChange", this.propOptions, reason);
+    }
+    _updateDeleteDisplay() {
+        if (this.propContainer) {
+            this.propContainer.classList.toggle("hide-delete", this.propOptions.showDelete === false);
+        }
+    }
+    _defaultRenderList(selected) {
+        return selected.map((item) => this.propOptions.renderItem(item, this._defaultRenderItem.bind(this)));
+    }
+    _defaultRenderItem(item) {
+        const el = document.createElement("div");
+        el.className = "element";
+        el.dataset.id = String(item.id);
+        const label = document.createElement("label");
+        label.textContent = item.label;
+        const del = document.createElement("div");
+        del.dataset.remove = String(item.id);
+        el.appendChild(label);
+        el.appendChild(del);
+        return el;
+    }
+    setSelected(list, triggerOnChange = true) {
+        this.propOptions.selected = list.map((s) => {
+            s.selected = true;
+            return s;
+        });
+        this.render();
+        if (triggerOnChange) {
+            if (this.propOptions.onChange) {
+                this.propOptions.onChange.call(this, this.getSelected());
+            }
+            this._subscriber.trigger("onChange", this.getSelected());
+        }
+        this._triggerOnComponentChange("setSelected");
+    }
+    setShowInput(show) {
+        this.propOptions.showInput = show = String(show) === "true" || show === true;
+        this.propInputElement.style.display = show ? "" : "none";
+        this.propInputElement.disabled = Boolean(this.propOptions.disabled);
+        this._triggerOnComponentChange("setShowInput");
+    }
+    setValue(value, triggerOnChange = true) {
+        const previousValue = this.propOptions.value;
+        this.propOptions.value = value;
+        this.propInputElement.value = value;
+        if (triggerOnChange) {
+            const e = new Event("input");
+            Object.defineProperty(e, "target", { writable: false, value: this.propInputElement });
+            if (this.propOptions.onInputChange) {
+                this.propOptions.onInputChange.call(this, e, previousValue);
+            }
+            this._subscriber.trigger("onInputChange", e, previousValue);
+        }
+        this._triggerOnComponentChange("setValue");
+    }
+    setFocus(triggerOnFocus = true) {
+        if (!triggerOnFocus) {
+            this._skipNextFocusEvent = true;
+        }
+        this.propInputElement.focus();
+    }
+    clearSearch(triggerOnClear = true, triggerOnChange = true) {
+        this.setValue("", triggerOnChange);
+        if (triggerOnClear) {
+            if (this.propOptions.onClear) {
+                this.propOptions.onClear.call(this);
+            }
+            this._subscriber.trigger("onClear");
+        }
+        this._triggerOnComponentChange("onClear");
+    }
+    setLabel(label) {
+        this.propOptions.label = label;
+        if (label) {
+            if (!this.propLabelElement) {
+                this.propLabelElement = document.createElement("label");
+                this.propLabelElement.className = "floating-label";
+            }
+            if (this.propLabelElement.parentNode !== this.propContainer) {
+                this.propContainer.insertBefore(this.propLabelElement, this.propContainer.firstChild);
+            }
+            this.propLabelElement.textContent = label;
+        }
+        else {
+            if (this.propLabelElement && this.propLabelElement.parentNode === this.propContainer) {
+                this.propContainer.removeChild(this.propLabelElement);
+            }
+        }
+        this._triggerOnComponentChange("setLabel");
+    }
+    setError(isError) {
+        this.propOptions.error = Boolean(isError);
+        this.propContainer.classList.toggle("error", isError);
+        this._triggerOnComponentChange("setError");
+    }
+    setDisabled(disabled) {
+        this.propOptions.disabled = Boolean(disabled);
+        this.propInputElement.disabled = disabled;
+        this.propClearButton.disabled = disabled;
+        this.propContainer.classList.toggle("disabled", disabled);
+        this._triggerOnComponentChange("setDisabled");
+    }
+    /**
+     * show/hide delete icon
+     * @param show
+     */
+    setShowDelete(show) {
+        this.propOptions.showDelete = Boolean(show);
+        this._updateDeleteDisplay();
+        this._triggerOnComponentChange("setShowDelete");
+    }
+    setLoading(loading) {
+        this.propOptions.loading = Boolean(loading);
+        if (loading) {
+            if (!this.propLoaderElement) {
+                this.propLoaderElement = document.createElement("div");
+                this.propLoaderElement.className = "loader";
+            }
+            if (this.propClearButton.parentNode) {
+                this.propButtonsContainer.replaceChild(this.propLoaderElement, this.propClearButton);
+            }
+        }
+        else {
+            if (this.propLoaderElement && this.propLoaderElement.parentNode) {
+                this.propButtonsContainer.replaceChild(this.propClearButton, this.propLoaderElement);
+            }
+        }
+        this._triggerOnComponentChange("setLoading");
+    }
+    render() {
+        if (!this.propContainer) {
+            this.propContainer = document.createElement("div");
+            this.propContainer.className = "selected-section";
+            this.propFlexList = document.createElement("div");
+            this.propFlexList.className = "flex-list";
+            this.propButtonsContainer = document.createElement("div");
+            this.propButtonsContainer.className = "buttons-container";
+            this.propClearButton = document.createElement("button");
+            this.propClearButton.className = "clear-btn";
+            this.propClearButton.textContent = "✕";
+            this.propButtonsContainer.appendChild(this.propClearButton);
+            this.propContainer.appendChild(this.propFlexList);
+            this.propContainer.appendChild(this.propButtonsContainer);
+            this.propParentElement.appendChild(this.propContainer);
+            const input = document.createElement("input");
+            input.type = "text";
+            input.value = this.propOptions.value || "";
+            input.placeholder = " ";
+            input.size = 1;
+            this.propInputElement = input;
+            this.propFlexList.appendChild(this.propInputElement);
+        }
+        this.setLabel(this.propOptions.label || "");
+        this.setShowDelete(this.propOptions.showDelete !== false);
+        this.setError(Boolean(this.propOptions.error));
+        this.setDisabled(Boolean(this.propOptions.disabled));
+        this.setLoading(Boolean(this.propOptions.loading));
+        this.setShowInput(Boolean(this.propOptions.showInput));
+        const elements = this.propOptions.renderList(this.getSelected(), this._defaultRenderList.bind(this));
+        if (!Array.isArray(elements)) {
+            throw new Error("renderList must return an array of HTMLElements");
+        }
+        // clear the list (except touching input)
+        const children = Array.from(this.propFlexList.childNodes);
+        for (const child of children) {
+            if (child instanceof HTMLElement && child.tagName === "INPUT") {
+                continue;
+            }
+            this.propFlexList.removeChild(child);
+        }
+        // rendering elements in order before input
+        for (const el of elements) {
+            if (!(el instanceof HTMLElement)) {
+                throw new Error("each element returned from renderList must be an HTMLElement");
+            }
+            if (this.propInputElement && this.propInputElement.parentNode === this.propFlexList) {
+                this.propFlexList.insertBefore(el, this.propInputElement);
+            }
+            else {
+                this.propFlexList.appendChild(el);
+            }
+        }
+    }
+    setRenderItem(renderItem) {
+        this.propOptions.renderItem = renderItem || ((item, def) => def(item));
+        this.render();
+        this._triggerOnComponentChange("setRenderItem");
+    }
+    setRenderList(renderList) {
+        this.propOptions.renderList = renderList || ((selected, def) => def(selected));
+        this.render();
+        this._triggerOnComponentChange("setRenderList");
+    }
+    setRenderEmpty(renderEmpty) {
+        this.propOptions.renderEmpty = renderEmpty || ((def) => def());
+        this.render();
+        this._triggerOnComponentChange("setRenderEmpty");
+    }
+    // getters
+    getSelected() {
+        return this.propOptions.selected || [];
+    }
+    getShowInput() {
+        return this.propOptions.showInput;
+    }
+    getValue() {
+        return this.propOptions.value;
+    }
+    getLabel() {
+        return this.propOptions.label;
+    }
+    getDisabled() {
+        return this.propOptions.disabled;
+    }
+    getError() {
+        return this.propOptions.error;
+    }
+    getLoading() {
+        return this.propOptions.loading;
+    }
+    getShowDelete() {
+        return this.propOptions.showDelete;
+    }
+    destroy() {
+        this._subscriber.destroy();
+    }
+}