@everymatrix/general-multi-select 0.0.1

package/dist/esm/general-multi-select-1ba05f04.js

@@ -0,0 +1,206 @@
+import { r as registerInstance, c as createEvent, g as getAssetPath, h } from './index-4b050939.js';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-typography, #555);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-gray-100, #f4f5f7)}.dropdown-item.selected{background:var(--emw--color-primary-variant, #bae7ff);color:var(--emw--color-primary, #0050b3);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
+const GeneralMultiSelectStyle0 = generalMultiSelectCss;
+
+const GeneralMultiSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        this.handleOutsideClick = (e) => {
+            // If click happens outside our component root, close both panels
+            const path = e.composedPath();
+            if (!path.includes(this.el)) {
+                this.dropdownOpen = false;
+                this.overflowOpen = false;
+            }
+        };
+        this.toggleDropdown = (e) => {
+            e.stopPropagation();
+            this.dropdownOpen = !this.dropdownOpen;
+            this.overflowOpen = false; // close overflow if open
+        };
+        this.isSelected = (value) => this.selectedValues.includes(value);
+        this.selectItem = (item) => {
+            if (!this.isSelected(item.value)) {
+                this.selectedValues = [...this.selectedValues, item.value];
+                this.change.emit(this.selectedValues);
+            }
+        };
+        this.toggleItem = (item) => {
+            if (this.isSelected(item.value)) {
+                this.removeItem(item.value);
+            }
+            else {
+                this.selectItem(item);
+            }
+        };
+        this.removeItem = (value, e) => {
+            e && e.stopPropagation();
+            this.selectedValues = this.selectedValues.filter((v) => v !== value);
+            this.change.emit(this.selectedValues);
+        };
+        this.downIcon = getAssetPath('../static/dropdown.svg');
+        this.upIcon = getAssetPath('../static/dropup.svg');
+        /** Touch-capable device? */
+        this.isTouch = 'ontouchstart' in window;
+        /** Open overflow popover */
+        this.openOverflow = () => {
+            if (!this.isTouch) {
+                // hover only on non-touch
+                this.computePopoverPosition();
+                this.overflowOpen = true;
+            }
+        };
+        /** Close overflow popover */
+        this.closeOverflow = () => {
+            if (!this.isTouch) {
+                this.overflowOpen = false;
+            }
+        };
+        this.toggleOverflow = (e) => {
+            e.stopPropagation();
+            this.computePopoverPosition();
+            this.overflowOpen = !this.overflowOpen;
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.options = [];
+        this.maxVisibleChips = 2;
+        this.placeholder = '';
+        this.selectedValues = [];
+        this.dropdownOpen = false;
+        this.overflowOpen = false;
+        this.popoverStyle = { top: '0px', left: '0px' };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    async clear() {
+        this.selectedValues = [];
+        this.change.emit(this.selectedValues);
+    }
+    componentWillLoad() {
+        // Listen for clicks anywhere to close panels on outside click
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    get selectedOptions() {
+        return this.options.filter((o) => this.isSelected(o.value));
+    }
+    get visibleChips() {
+        return this.selectedOptions.slice(0, this.maxVisibleChips);
+    }
+    get hiddenChips() {
+        return this.selectedOptions.slice(this.maxVisibleChips);
+    }
+    computePopoverPosition() {
+        if (this.overflowChipEl && this.el) {
+            const { left: overflowChipElLeft } = this.overflowChipEl.getBoundingClientRect();
+            const { left: elLeft, height } = this.el.getBoundingClientRect();
+            this.popoverStyle = {
+                top: `${height - 10}px`,
+                left: `${overflowChipElLeft - elLeft}px`
+            };
+        }
+    }
+    render() {
+        var _a;
+        return (h("div", { key: '50b48397be3ede1907ab2c2abcd1cf2f43f69c13', class: "general-multi-select-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '696a1bb1f221f8f5cf290fac040af10e2e5a115e', class: "multi-select-container", ref: (el) => (this.el = el) }, h("div", { key: '9ea92f01787b26d43054573a11896cf65065b073', class: "flex-row", onClick: this.toggleDropdown }, h("div", { key: 'f79720ca3ec383ee7f95b09483698ee18119c79a', class: "control" }, this.visibleChips.map((opt) => (h("span", { class: "chip" }, h("div", { class: "chip-text", title: opt.text }, opt.text), h("div", { class: "remove-btn", onClick: (e) => this.removeItem(opt.value, e) }, "\u00D7")))), this.hiddenChips.length > 0 && (h("span", { key: '25e9e527c33dd7a315dacb10cc51084fe69b9b7e', class: "chip overflow-chip", ref: (el) => (this.overflowChipEl = el), onMouseEnter: this.openOverflow, onMouseLeave: this.closeOverflow, onClick: this.toggleOverflow }, "\u2022\u2022\u2022")), this.selectedValues.length === 0 && h("span", { key: 'b061de660a55f7a0d41ce9aa650108d3f38a9dc0', class: "placeholder" }, this.placeholder)), h("div", { key: 'f83b6517e88b3976cdc18590f8f1233cb2515230', class: "arrow" }, h("img", { key: '1b61a49090237057b98e5ce8a4f7c1e3bfc9d4ba', class: "info-icon", src: this.dropdownOpen ? this.upIcon : this.downIcon, style: { width: '18px' } }))), this.dropdownOpen && (h("div", { key: 'e5b081007bcbdd251ce5ac235c1f19f17852c420', class: "dropdown" }, this.options.map((opt) => (h("div", { class: {
+                'dropdown-item': true,
+                selected: this.isSelected(opt.value)
+            }, onClick: () => this.toggleItem(opt) }, opt.text))))), this.overflowOpen && !!((_a = this.hiddenChips) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { key: 'f8e3289042c69c569bebcd0a40d90f31261c6c12', class: "overflow-popover", style: { top: this.popoverStyle.top, left: this.popoverStyle.left }, onMouseEnter: this.openOverflow, onMouseLeave: this.closeOverflow }, this.hiddenChips.map((opt) => (h("span", { class: "chip" }, h("span", { class: "chip-text", title: opt.text }, opt.text), h("span", { class: "remove-btn", onClick: (e) => this.removeItem(opt.value, e) }, "\u00D7")))))))));
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+GeneralMultiSelect.style = GeneralMultiSelectStyle0;
+
+export { GeneralMultiSelect as G };

package/dist/esm/general-multi-select.entry.js

@@ -0,0 +1,2 @@
+export { G as general_multi_select } from './general-multi-select-1ba05f04.js';
+import './index-4b050939.js';

package/dist/esm/general-multi-select.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-4b050939.js';
+export { s as setNonce } from './index-4b050939.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["general-multi-select",[[1,"general-multi-select",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"options":[16],"maxVisibleChips":[2,"max-visible-chips"],"placeholder":[1],"selectedValues":[32],"dropdownOpen":[32],"overflowOpen":[32],"popoverStyle":[32],"clear":[64]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});