@everymatrix/general-multi-select 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const generalMultiSelect = require('./general-multi-select-c46368a0.js');
+require('./index-5b495c2d.js');
+
+
+
+exports.GeneralMultiSelect = generalMultiSelect.GeneralMultiSelect;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5b495c2d.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-multi-select.cjs",[[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/general-multi-select/general-multi-select.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/general-multi-select/general-multi-select.css

@@ -0,0 +1,144 @@
+/* --- Container --- */
+.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;
+}
+
+/* --- Main control (input-like area) --- */
+.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));
+}
+
+/* --- Chips --- */
+.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 --- */
+.overflow-chip {
+  background: var(--emw--color-gray-100, #e6e6e6);
+  color: var(--emw--color-gray-300, #333);
+  width: 20px;
+  text-align: center;
+  display: block;
+}
+
+/* --- Remove button inside chips --- */
+.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 text --- */
+.placeholder {
+  color: var(--emw--color-gray-150, #6f6f6f);
+  font-size: 0.875rem;
+  padding: 3px 8px;
+  line-height: 1.2;
+}
+
+/* --- Arrow indicator --- */
+.arrow {
+  margin-left: auto;
+  font-size: 0.8rem;
+  width: 20px;
+  color: var(--emw--color-gray-150, #6f6f6f);
+}
+
+/* --- Dropdown panel --- */
+.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 items --- */
+.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 --- */
+.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;
+}

package/dist/collection/components/general-multi-select/general-multi-select.js

@@ -0,0 +1,319 @@
+import { getAssetPath, h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+export class GeneralMultiSelect {
+    constructor() {
+        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`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            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 is() { return "general-multi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-multi-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-multi-select.css"]
+        };
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ text: string; value: any }>",
+                    "resolved": "{ text: string; value: any; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of available items. Each item has `text` and `value`."
+                },
+                "defaultValue": "[]"
+            },
+            "maxVisibleChips": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many chips to show before hiding extras"
+                },
+                "attribute": "max-visible-chips",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when nothing is selected, need to be translated when you use this property"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValues": {},
+            "dropdownOpen": {},
+            "overflowOpen": {},
+            "popoverStyle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when selection changes"
+                },
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/general-multi-select/index.js

@@ -0,0 +1 @@
+export { GeneralMultiSelect } from './general-multi-select';

package/dist/collection/components/static/dropdown.svg

@@ -0,0 +1,2 @@
+<!-- License: GPL. Made by Automattic: https://github.com/Automattic/gridicons -->
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 10l5 5 5-5"/></g></svg>

package/dist/collection/components/static/dropup.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/general-multi-select';

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };