@ptcwebops/ptcw-design 7.0.3-upgrade → 7.0.5-upgrade

package/dist/cjs/ptc-multi-select.cjs.entry.js

@@ -0,0 +1,326 @@
+'use strict';
+
+var index = require('./index-ByQUzqQb.js');
+var index$1 = require('./index-QQdgqPAW.js');
+
+const ptcMultiSelectCss = ".ptc-multi-select{position:relative;display:block;margin-bottom:var(--ptc-element-spacing-04)}.ptc-multi-select.invalid::before{content:\"\";position:absolute;width:calc(100% + 16px);height:calc(100% + 8px);background:#fef3f3;display:flex;flex-direction:column;justify-content:center;z-index:0;left:50%;top:50%;transform:translate(-50%, -50%)}.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg{z-index:2;opacity:1;position:relative;color:#af3231;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-style:normal;font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-densest);opacity:1;height:auto;margin-left:8px;margin-top:var(--ptc-element-spacing-02)}.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg svg{transform:translate(-8px, 3px)}.ptc-multi-select .multi-select-label{display:block;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);line-height:normal;margin-bottom:var(--ptc-element-spacing-01);z-index:1;position:relative;color:#40434a}.ptc-multi-select .selected-items{cursor:pointer;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.38);padding:8px;border-radius:0px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color-gray-12);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-regular);max-width:100%;max-height:34px;overflow:hidden;line-height:24px;display:flex;align-items:center}.ptc-multi-select .selected-items:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);outline-offset:-4px}.ptc-multi-select .selected-items:focus{border:2px solid var(--color-blue-07)}.ptc-multi-select .selected-items[aria-expanded]{border:2px solid var(--color-blue-07)}.ptc-multi-select .selected-items .input-text{width:calc(100% - 18px);display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis}.ptc-multi-select .multi-select-icon{fill:rgba(0, 0, 0, 0.54);position:absolute;right:var(--ptc-element-spacing-02);width:18px;height:18px;margin:0 auto}.ptc-multi-select .multi-select-icon .multi-arrow-svg{transform:translate(-50%, 25%);position:relative;left:50%;bottom:25%}.ptc-multi-select .dropdown{display:none;list-style:none;padding:0;margin:0;border:1px solid #ccc;max-height:350px;overflow-y:auto;position:absolute;width:100%;background-color:#fff;z-index:1000}.ptc-multi-select .dropdown.show{display:block}.ptc-multi-select .dropdown li{display:flex;align-items:center;padding:5px 8px;cursor:pointer;color:var(--color-gray-10);position:relative}.ptc-multi-select .dropdown li:hover,.ptc-multi-select .dropdown li:focus-within{background-color:var(--color-gray-02)}.ptc-multi-select .dropdown li.selected{background-color:var(--color-gray-02)}.ptc-multi-select .dropdown li.selected:hover{background-color:var(--color-gray-04)}.ptc-multi-select .dropdown li label{display:-webkit-box;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);position:relative;padding-left:22px;cursor:pointer;width:100%;overflow:hidden;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;text-overflow:ellipsis;line-height:24px}.ptc-multi-select .dropdown li{}.ptc-multi-select .dropdown li:focus-within{background-color:var(--color-gray-02);outline:none}.ptc-multi-select .dropdown li:last-child{border-bottom:none}.ptc-multi-select .dropdown input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.ptc-multi-select .dropdown input[type=checkbox]:checked{background-color:var(--color-green-07)}.ptc-multi-select .dropdown{}.ptc-multi-select .dropdown label::before{content:\"\";position:absolute;left:0;top:5px;width:14px;height:14px;background-color:#fff;border:1px solid #ccc;box-sizing:border-box}.ptc-multi-select .dropdown{}.ptc-multi-select .dropdown input[type=checkbox]:checked+label::before{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ptc-multi-select .dropdown input[type=checkbox]:checked+label::after{content:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15341 1.14134C7.0572 1.04719 6.94024 1 6.80262 1C6.66499 1 6.54771 1.04719 6.45158 1.14134L3.06571 4.45979L1.5485 2.96965C1.45197 2.8755 1.33501 2.82831 1.19738 2.82831C1.05976 2.82831 0.942797 2.8755 0.846348 2.96965L0.144437 3.65645C0.0482247 3.75091 0 3.86528 0 4.00004C0 4.13472 0.0482247 4.2494 0.144437 4.34355L2.01277 6.17186L2.71492 6.85866C2.81113 6.95312 2.92809 7 3.06571 7C3.20334 7 3.3203 6.95312 3.41675 6.85866L4.11866 6.17186L7.85556 2.51525C7.95177 2.42086 8 2.30641 8 2.17173C8 2.03705 7.95177 1.9226 7.85556 1.82814L7.15341 1.14134Z' fill='white'/%3E%3C/svg%3E\");position:absolute;left:3px;top:0px;color:white;width:8px;height:24px}.ptc-multi-select button.ddl-click-text{all:unset;cursor:pointer;color:var(--color-gray-7);text-decoration:underline;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold)}.ptc-multi-select .tooltip{position:absolute;transform:translate(0, -12px);z-index:1001;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:2px;width:auto;height:-moz-fit-content;height:fit-content;text-align:left;text-shadow:none;white-space:normal}.ptc-multi-select .tooltip::after{position:absolute;content:\"\";bottom:0px;border:8px solid transparent;border-top:8px solid var(--color-gray-09);left:50%;transform:translate(-50%, 100%)}@media only screen and (min-width: 992px){.ptc-multi-select .tooltip{width:273px;transform:translate(-100%, 80%)}.ptc-multi-select .tooltip::after{right:8px;left:auto;transform:translateY(100%)}}.ptc-multi-select .tooltip span{word-break:initial}";
+
+const PtcMultiSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ptcMultiSelectLoaded = index.createEvent(this, "ptcMultiSelectLoaded");
+    }
+    get el() { return index.getElement(this); }
+    items = [
+        // Initialize with your items, setting 'selected' to false
+        {
+            text: "Lorem Ipsum dolor sit amet",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "Consectetur adipiscing elit",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "Sed do eiusmod tempor",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "Incididunt ut labore",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "Et dolore magna aliqua",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "Duis aute irure dolor",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+        {
+            text: "In reprehenderit in voluptate",
+            selected: false,
+            ptcDataEloquaName: "data-eloqua-name",
+            ptcDataTargetEloquaName: "data-target-eloqua-name",
+        },
+    ];
+    label = "label";
+    selectAllText = "Select All";
+    clearAllText = "Clear Selected Items";
+    isRequired = false;
+    helpertext = "This field is required";
+    placeholderText = "Please select a company";
+    showDropdown = false;
+    language = "en";
+    isValid = true;
+    selectedItemsCount = 0;
+    hasInteracted = false;
+    tooltipText = "";
+    tooltipVisible = false;
+    tooltipPosition = {
+        top: 0,
+        left: 0,
+    };
+    ptcMultiSelectLoaded;
+    // To track the index of the focused item
+    focusedItemIndex = -1;
+    componentWillLoad() {
+        this.language = index$1.getLanguageFromURL();
+        // Initialize selectedItemsCount based on initial selections
+        this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+    }
+    componentDidLoad() {
+        this.ptcMultiSelectLoaded.emit();
+    }
+    handleDocumentClick(event) {
+        const clickedInside = this.el.contains(event.target);
+        if (!clickedInside) {
+            this.showDropdown = false;
+            this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+            this.updateValidity();
+            this.focusedItemIndex = -1;
+        }
+    }
+    toggleDropdown() {
+        this.showDropdown = !this.showDropdown;
+        this.hasInteracted = true;
+        if (this.showDropdown) {
+            requestAnimationFrame(() => {
+                this.focusFirstItem();
+            });
+        }
+        else {
+            this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+            this.updateValidity();
+            this.focusedItemIndex = -1;
+        }
+    }
+    async focusToggleButton() {
+        const toggleButton = this.el.querySelector(".selected-items");
+        if (toggleButton) {
+            toggleButton.focus();
+        }
+    }
+    handleBlur = () => {
+        this.hasInteracted = true;
+        this.updateValidity();
+    };
+    toggleItemSelection(index) {
+        this.items = [
+            ...this.items.slice(0, index),
+            { ...this.items[index], selected: !this.items[index].selected },
+            ...this.items.slice(index + 1),
+        ];
+        this.selectedItemsCount = this.items.filter((item) => item.selected).length;
+        this.updateValidity();
+    }
+    updateValidity = () => {
+        if (this.hasInteracted && this.isRequired && !this.showDropdown) {
+            this.isValid = this.selectedItemsCount > 0;
+            this.setHelperText();
+        }
+        else {
+            this.isValid = true;
+            this.setHelperText();
+        }
+    };
+    selectAllItems = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.items = this.items.map((item) => ({ ...item, selected: true }));
+        this.selectedItemsCount = this.items.length;
+        this.updateValidity();
+    };
+    clearSelectedItems = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.items = this.items.map((item) => ({ ...item, selected: false }));
+        this.selectedItemsCount = 0;
+        this.updateValidity();
+    };
+    getValidationMessage(type) {
+        return index.ValidationMessages[this.language][type];
+    }
+    setHelperText() {
+        this.helpertext = this.getValidationMessage("select");
+    }
+    showTooltip(event, text) {
+        this.tooltipText = text;
+        // this.tooltipPosition = {
+        //   top: 100, // Adjust as necessary to position above the item
+        //   left: -rect.left + 624.1,
+        // };
+        this.tooltipVisible = true;
+    }
+    hideTooltip() {
+        this.tooltipVisible = false;
+    }
+    // Keyboard Accessibility Handlers
+    handleKeyDownToggle(event) {
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                this.toggleDropdown();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this.showDropdown) {
+                    this.toggleDropdown();
+                }
+                else {
+                    this.focusNextItem();
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!this.showDropdown) {
+                    this.toggleDropdown();
+                }
+                else {
+                    this.focusPreviousItem();
+                }
+                break;
+        }
+    }
+    handleKeyDownItem(event, index) {
+        const isAllSelected = this.selectedItemsCount === this.items.length &&
+            this.items.length > 0;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                this.focusNextItem();
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                this.focusPreviousItem();
+                break;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (index === 0) {
+                    // First item is "Select All/Clear Selected Items"
+                    if (isAllSelected) {
+                        this.clearSelectedItems(event);
+                    }
+                    else {
+                        this.selectAllItems(event);
+                    }
+                }
+                else {
+                    this.toggleItemSelection(index - 1);
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                this.showDropdown = false;
+                this.focusToggleButton();
+                break;
+        }
+    }
+    focusFirstItem() {
+        if (this.items.length + 1 > 0) {
+            this.focusedItemIndex = 0;
+            this.focusItem(this.focusedItemIndex);
+        }
+    }
+    focusLastItem() {
+        if (this.items.length + 1 > 0) {
+            this.focusedItemIndex = this.items.length;
+            this.focusItem(this.focusedItemIndex);
+        }
+    }
+    focusNextItem() {
+        if (this.focusedItemIndex < this.items.length) {
+            this.focusedItemIndex += 1;
+        }
+        else {
+            this.focusedItemIndex = 0;
+        }
+        this.focusItem(this.focusedItemIndex);
+    }
+    focusPreviousItem() {
+        if (this.focusedItemIndex > 0) {
+            this.focusedItemIndex -= 1;
+        }
+        else {
+            this.focusedItemIndex = this.items.length; // Loop to last
+        }
+        this.focusItem(this.focusedItemIndex);
+    }
+    focusItem(index) {
+        if (index === 0) {
+            const selectAllButton = this.el.querySelector(`#multi-select-item-0 > button`);
+            if (selectAllButton) {
+                selectAllButton.focus();
+            }
+        }
+        else {
+            const checkbox = this.el.querySelector(`#multi-select-item-${index} input[type="checkbox"]`);
+            if (checkbox) {
+                checkbox.focus();
+            }
+        }
+    }
+    render() {
+        const selectedItems = this.items.filter((item) => item.selected);
+        const selectedItemsCount = selectedItems.length;
+        const isAllSelected = selectedItemsCount === this.items.length && this.items.length > 0;
+        const buttonLabel = isAllSelected
+            ? this.clearAllText
+            : this.selectAllText;
+        const buttonAction = isAllSelected
+            ? this.clearSelectedItems
+            : this.selectAllItems;
+        let displayText = `${selectedItemsCount} selected`;
+        if (selectedItemsCount === 0) {
+            displayText = this.placeholderText;
+        }
+        if (selectedItemsCount === 1) {
+            displayText = selectedItems[0].text;
+        }
+        return (index.h(index.Host, { key: '8de6eea9194b0ce0d3e5da4d833cdb27702afcac', class: {
+                "ptc-multi-select": true,
+                invalid: !this.isValid,
+                "mf-listen": true,
+            } }, index.h("label", { key: '3fc69c9626bf733cd1d3c03291bd82ea7852c56c', class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), index.h("div", { key: '549d752ae8d127096a8512858fa07ad9e8950fc3', class: "selected-items multi-selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, index.h("div", { key: 'd2edd3be98022ddde774ce6c1f14ba70b1f393e8', class: "input-text" }, displayText), index.h("span", { key: '6d287f1409fd76b5e317983b140015c6cd180d3b', class: "multi-select-icon" }, index.h("svg", { key: 'e1141e611b39f7de2723c29d8faecbef69a96d8a', class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e20dd52b64e757d4fac42f82a63c2fbbd4eb9fd2', d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), index.h("ul", { key: '8d920bf39f083c74c4b567a25983c4a281ad6c43', class: "dropdown" + (this.showDropdown ? " show" : ""), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, index.h("li", { key: 'fdcc2f4c76094b1a191896685bfad12cdb386186', id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, index.h("button", { key: '3aeff2dde4b50d979783a64437bbf2309e817f19', onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                buttonAction(event);
+            }, class: "ddl-click-text" }, buttonLabel)), this.items.map((item, index$1) => (index.h("li", { key: index$1 + 1, id: `multi-select-item-${index$1 + 1}`, role: "option", "aria-selected": item.selected, class: { selected: item.selected }, tabIndex: -1, onMouseEnter: (event) => this.checkOverflow(event, item.text), onMouseLeave: () => this.hideTooltip(), onKeyDown: (event) => this.handleKeyDownItem(event, index$1 + 1), onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleItemSelection(index$1);
+            } }, index.h("input", { class: "multi-checkbox", type: "checkbox", id: `checkbox-${index$1}`, checked: item.selected, "data-eloqua-name": item.ptcDataEloquaName, "data-target-eloqua-name": item.ptcDataTargetEloquaName, required: this.isRequired, onClick: (event) => {
+                event.stopPropagation(); // Prevents the dropdown from closing
+                this.toggleItemSelection(index$1);
+            }, onBlur: this.handleBlur }), index.h("label", { htmlFor: `checkbox-${index$1}` }, item.text))))), this.tooltipVisible && (index.h("div", { key: 'fe4606ca2952d820e63ee3f23784bf95e5e9e628', class: "tooltip", style: {
+                top: `${this.tooltipPosition.top}px`,
+                left: `${this.tooltipPosition.left}px`,
+            } }, this.tooltipText)), index.h("div", { key: 'e145e438265fca4e030328599c984796ba1448cb', id: "tbd", class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, index.h("svg", { key: '2a430f8564b808ee0a78c9543f2533fa28698c7c', class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '05ff97a893b39a320e55da04b06826ed1599c9af', "clip-path": "url(#clip0_12_1424)" }, index.h("path", { key: '7185785667f302a1c432ba0611f643e2e58d0364', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), index.h("defs", { key: '0ed202fb9fa9e52a259e7e5e7a37ee4ba78f8740' }, index.h("clipPath", { key: '860b09eb1e58bd9cc8efccaeaffb7f3e4fe21444', id: "clip0_12_1424" }, index.h("rect", { key: '22cb212fd2bf6f839f7f9d433ba8256405f3d72a', width: "16", height: "16", fill: "white" })))), this.helpertext)));
+    }
+    // Ensure that checkOverflow is inside the class
+    checkOverflow(event, text) {
+        const target = event.currentTarget;
+        const label = target.querySelector("label");
+        if (label && label.scrollHeight > label.clientHeight) {
+            this.showTooltip(event, text);
+        }
+    }
+};
+PtcMultiSelect.style = ptcMultiSelectCss;
+
+exports.ptc_multi_select = PtcMultiSelect;
+//# sourceMappingURL=ptc-multi-select.entry.cjs.js.map

package/dist/cjs/ptc-multi-select.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ptc-multi-select.entry.cjs.js","sources":["src/components/molecules/ptc-multi-select/ptc-multi-select.scss?tag=ptc-multi-select","src/components/molecules/ptc-multi-select/ptc-multi-select.tsx"],"sourcesContent":["@use 'mixins' as *;\r\n.ptc-multi-select {\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tmargin-bottom: var(--ptc-element-spacing-04);\r\n\r\n\t&.invalid {\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: calc(100% + 16px);\r\n\t\t\theight: calc(100% + 8px);\r\n\t\t\tbackground: #fef3f3;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\tjustify-content: center;\r\n\t\t\tz-index: 0;\r\n\t\t\tleft: 50%;\r\n\t\t\ttop: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t}\r\n\r\n\t\t.mdc-select-helper-text--validation-msg {\r\n\t\t\tz-index: 2;\r\n\t\t\topacity: 1;\r\n\t\t\tposition: relative;\r\n\r\n\t\t\tcolor: #af3231;\r\n\t\t\tfont-family: var(--ptc-font-latin);\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-style: normal;\r\n\t\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\topacity: 1;\r\n\t\t\theight: auto;\r\n\t\t\tmargin-left: 8px;\r\n\t\t\tmargin-top: var(--ptc-element-spacing-02);\r\n\r\n\t\t\tsvg {\r\n\t\t\t\ttransform: translate(-8px, 3px);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.multi-select-label {\r\n\t\tdisplay: block;\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tline-height: normal;\r\n\t\tmargin-bottom: var(--ptc-element-spacing-01);\r\n\t\tz-index: 1;\r\n\t\tposition: relative;\r\n\t\tcolor: #40434a;\r\n\t}\r\n\r\n\t.selected-items {\r\n\t\tcursor: pointer;\r\n\t\tbackground-color: #fff;\r\n\t\tborder: 1px solid rgba(0, 0, 0, 0.38);\r\n\t\tpadding: 8px;\r\n\t\tborder-radius: 0px;\r\n\t\tposition: relative;\r\n\t\tuser-select: none;\r\n\t\tcolor: var(--color-gray-12);\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-regular);\r\n\t\tmax-width: 100%;\r\n\t\tmax-height: 34px;\r\n\t\toverflow: hidden;\r\n\t\tline-height: 24px;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\t@include base-focus-state;\r\n\t\t\toutline-offset: -4px;\r\n\t\t}\r\n\r\n\t\t&:focus {\r\n\t\t\tborder: 2px solid var(--color-blue-07);\r\n\t\t}\r\n\r\n\t\t&[aria-expanded] {\r\n\t\t\tborder: 2px solid var(--color-blue-07);\r\n\t\t}\r\n\r\n\t\t.input-text {\r\n\t\t\twidth: calc(100% - 18px);\r\n\t\t\tdisplay: -webkit-box;\r\n\t\t\t-webkit-line-clamp: 1;\r\n\t\t\tline-clamp: 1;\r\n\t\t\t-webkit-box-orient: vertical;\r\n\t\t\ttext-overflow: ellipsis;\r\n\t\t}\r\n\t}\r\n\r\n\t.multi-select-icon {\r\n\t\tfill: rgba(0, 0, 0, 0.54);\r\n\t\tposition: absolute;\r\n\t\tright: var(--ptc-element-spacing-02);\r\n\t\twidth: 18px;\r\n\t\theight: 18px;\r\n\t\tmargin: 0 auto;\r\n\r\n\t\t.multi-arrow-svg {\r\n\t\t\ttransform: translate(-50%, 25%);\r\n\t\t\tposition: relative;\r\n\t\t\tleft: 50%;\r\n\t\t\tbottom: 25%;\r\n\t\t}\r\n\t}\r\n\r\n\t.dropdown {\r\n\t\tdisplay: none;\r\n\t\tlist-style: none;\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tmax-height: 350px;\r\n\t\toverflow-y: auto;\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\tbackground-color: #fff;\r\n\t\tz-index: 1000;\r\n\r\n\t\t&.show {\r\n\t\t\tdisplay: block;\r\n\t\t}\r\n\r\n\t\tli {\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: 5px 8px;\r\n\t\t\tcursor: pointer;\r\n\t\t\tcolor: var(--color-gray-10);\r\n\t\t\tposition: relative; // Ensure positioning for child elements\r\n\r\n\t\t\t&:hover,\r\n\t\t\t&:focus-within {\r\n\t\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t\t}\r\n\r\n\t\t\t&.selected {\r\n\t\t\t\tbackground-color: var(--color-gray-02);\r\n\r\n\t\t\t\t&:hover {\r\n\t\t\t\t\tbackground-color: var(--color-gray-04);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tlabel {\r\n\t\t\t\tdisplay: -webkit-box;\r\n\t\t\t\tfont-family: var(--ptc-font-latin);\r\n\t\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\t\tposition: relative;\r\n\t\t\t\tpadding-left: 22px; //(22-14=8)\r\n\t\t\t\tcursor: pointer;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\toverflow: hidden;\r\n\t\t\t\t-webkit-line-clamp: 4;\r\n\t\t\t\tline-clamp: 4;\r\n\t\t\t\t-webkit-box-orient: vertical;\r\n\t\t\t\ttext-overflow: ellipsis;\r\n\t\t\t\tline-height: 24px;\r\n\t\t\t}\r\n\r\n\t\t\t/* Focused item styles */\r\n\t\t\t&:focus-within {\r\n\t\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t\t\toutline: none;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tli:last-child {\r\n\t\t\tborder-bottom: none;\r\n\t\t}\r\n\r\n\t\tinput[type=\"checkbox\"] {\r\n\t\t\tposition: absolute;\r\n\t\t\topacity: 0;\r\n\t\t\tcursor: pointer;\r\n\r\n\t\t\t&:checked {\r\n\t\t\t\tbackground-color: var(--color-green-07);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t/* Custom square for the checkbox */\r\n\t\tlabel::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\tleft: 0;\r\n\t\t\ttop: 5px;\r\n\t\t\twidth: 14px;\r\n\t\t\theight: 14px;\r\n\t\t\tbackground-color: #fff;\r\n\t\t\tborder: 1px solid #ccc;\r\n\t\t\tbox-sizing: border-box;\r\n\t\t}\r\n\r\n\t\t/* When checkbox is checked, change background color */\r\n\t\tinput[type=\"checkbox\"]:checked + label::before {\r\n\t\t\tbackground-color: var(--color-green-07);\r\n\t\t\tborder-color: var(--color-green-07);\r\n\t\t}\r\n\r\n\t\tinput[type=\"checkbox\"]:checked + label::after {\r\n\t\t\tcontent: url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15341 1.14134C7.0572 1.04719 6.94024 1 6.80262 1C6.66499 1 6.54771 1.04719 6.45158 1.14134L3.06571 4.45979L1.5485 2.96965C1.45197 2.8755 1.33501 2.82831 1.19738 2.82831C1.05976 2.82831 0.942797 2.8755 0.846348 2.96965L0.144437 3.65645C0.0482247 3.75091 0 3.86528 0 4.00004C0 4.13472 0.0482247 4.2494 0.144437 4.34355L2.01277 6.17186L2.71492 6.85866C2.81113 6.95312 2.92809 7 3.06571 7C3.20334 7 3.3203 6.95312 3.41675 6.85866L4.11866 6.17186L7.85556 2.51525C7.95177 2.42086 8 2.30641 8 2.17173C8 2.03705 7.95177 1.9226 7.85556 1.82814L7.15341 1.14134Z' fill='white'/%3E%3C/svg%3E\");\r\n\t\t\tposition: absolute;\r\n\t\t\tleft: 3px;\r\n\t\t\ttop: 0px;\r\n\t\t\tcolor: white;\r\n\t\t\twidth: 8px;\r\n\t\t\theight: 24px;\r\n\t\t}\r\n\t}\r\n\r\n\tbutton {\r\n\t\t&.ddl-click-text {\r\n\t\t\tall: unset;\r\n\t\t\tcursor: pointer;\r\n\t\t\tcolor: var(--color-gray-7);\r\n\t\t\ttext-decoration: underline;\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\t}\r\n\t}\r\n\r\n\t.tooltip {\r\n\t\tposition: absolute;\r\n\t\ttransform: translate(0, -12px);\r\n\t\tz-index: 1001;\r\n\t\tpadding: 8px;\r\n\t\tcolor: var(--color-white);\r\n\t\tfont-size: var(--ptc-font-size-xxx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tbackground: var(--color-gray-09);\r\n\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\r\n\t\tborder: none;\r\n\t\tborder-radius: 2px; //not standard\r\n\t\twidth: auto;\r\n\t\theight: fit-content;\r\n\t\ttext-align: left;\r\n\t\ttext-shadow: none;\r\n\t\twhite-space: normal;\r\n\r\n\t\t&::after {\r\n\t\t\tposition: absolute;\r\n\t\t\tcontent: \"\";\r\n\t\t\tbottom: 0px;\r\n\t\t\tborder: 8px solid transparent;\r\n\t\t\tborder-top: 8px solid var(--color-gray-09);\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, 100%);\r\n\t\t}\r\n\r\n\t\t@include screen-md {\r\n\t\t\twidth: 273px;\r\n\t\t\ttransform: translate(-100%, 80%);\r\n\t\t\t&::after {\r\n\t\t\t\tright: 8px;\r\n\t\t\t\tleft: auto;\r\n\t\t\t\ttransform: translateY(100%);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tspan {\r\n\t\t\tword-break: initial;\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\th,\r\n\tState,\r\n\tHost,\r\n\tProp,\r\n\tListen,\r\n\tElement,\r\n\tMethod,\r\n\tEvent,\r\n\tEventEmitter,\r\n} from \"@stencil/core\";\r\nimport { ValidationMessages } from \"../../../utils/validation-messages\";\r\nimport { getLanguageFromURL } from \"../../../utils/utils\";\r\n\r\n@Component({\r\n\ttag: \"ptc-multi-select\",\r\n\tstyleUrl: \"ptc-multi-select.scss\",\r\n\tshadow: false,\r\n})\r\nexport class PtcMultiSelect {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop({ mutable: true }) items: Array<{\r\n\t\ttext: string;\r\n\t\tselected: boolean;\r\n\t\tptcDataEloquaName: string;\r\n\t\tptcDataTargetEloquaName: string;\r\n\t}> = [\r\n\t\t// Initialize with your items, setting 'selected' to false\r\n\t\t{\r\n\t\t\ttext: \"Lorem Ipsum dolor sit amet\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Consectetur adipiscing elit\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Sed do eiusmod tempor\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Incididunt ut labore\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Et dolore magna aliqua\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"Duis aute irure dolor\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext: \"In reprehenderit in voluptate\",\r\n\t\t\tselected: false,\r\n\t\t\tptcDataEloquaName: \"data-eloqua-name\",\r\n\t\t\tptcDataTargetEloquaName: \"data-target-eloqua-name\",\r\n\t\t},\r\n\t];\r\n\t@Prop() label: string = \"label\";\r\n\t@Prop() selectAllText: string = \"Select All\";\r\n\t@Prop() clearAllText: string = \"Clear Selected Items\";\r\n\t@Prop() isRequired: boolean = false;\r\n\t@Prop() helpertext: string = \"This field is required\";\r\n\t@Prop() placeholderText: string = \"Please select a company\";\r\n\t@State() showDropdown: boolean = false;\r\n\t@State() language: string = \"en\";\r\n\t@State() isValid: boolean = true;\r\n\r\n\t@State() selectedItemsCount: number = 0;\r\n\t@State() hasInteracted: boolean = false;\r\n\t@State() tooltipText: string = \"\";\r\n\t@State() tooltipVisible: boolean = false;\r\n\t@State() tooltipPosition: { top: number; left: number } = {\r\n\t\ttop: 0,\r\n\t\tleft: 0,\r\n\t};\r\n\r\n\t@Event() ptcMultiSelectLoaded: EventEmitter<void>;\r\n\r\n\t// To track the index of the focused item\r\n\t@State() focusedItemIndex: number = -1;\r\n\r\n\tcomponentWillLoad() {\r\n\t\tthis.language = getLanguageFromURL();\r\n\t\t// Initialize selectedItemsCount based on initial selections\r\n\t\tthis.selectedItemsCount = this.items.filter(\r\n\t\t\t(item) => item.selected,\r\n\t\t).length;\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\tthis.ptcMultiSelectLoaded.emit();\r\n\t}\r\n\r\n\t@Listen(\"click\", { target: \"document\" })\r\n\thandleDocumentClick(event: MouseEvent) {\r\n\t\tconst clickedInside = this.el.contains(event.target as Node);\r\n\t\tif (!clickedInside) {\r\n\t\t\tthis.showDropdown = false;\r\n\t\t\tthis.selectedItemsCount = this.items.filter(\r\n\t\t\t\t(item) => item.selected,\r\n\t\t\t).length;\r\n\t\t\tthis.updateValidity();\r\n\t\t\tthis.focusedItemIndex = -1;\r\n\t\t}\r\n\t}\r\n\r\n\ttoggleDropdown() {\r\n\t\tthis.showDropdown = !this.showDropdown;\r\n\t\tthis.hasInteracted = true;\r\n\t\tif (this.showDropdown) {\r\n\t\t\trequestAnimationFrame(() => {\r\n\t\t\t\tthis.focusFirstItem();\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\tthis.selectedItemsCount = this.items.filter(\r\n\t\t\t\t(item) => item.selected,\r\n\t\t\t).length;\r\n\t\t\tthis.updateValidity();\r\n\t\t\tthis.focusedItemIndex = -1;\r\n\t\t}\r\n\t}\r\n\r\n\t@Method()\r\n\tasync focusToggleButton() {\r\n\t\tconst toggleButton = this.el.querySelector(\r\n\t\t\t\".selected-items\",\r\n\t\t) as HTMLElement;\r\n\t\tif (toggleButton) {\r\n\t\t\ttoggleButton.focus();\r\n\t\t}\r\n\t}\r\n\r\n\thandleBlur = () => {\r\n\t\tthis.hasInteracted = true;\r\n\t\tthis.updateValidity();\r\n\t};\r\n\r\n\ttoggleItemSelection(index: number) {\r\n\t\tthis.items = [\r\n\t\t\t...this.items.slice(0, index),\r\n\t\t\t{ ...this.items[index], selected: !this.items[index].selected },\r\n\t\t\t...this.items.slice(index + 1),\r\n\t\t];\r\n\t\tthis.selectedItemsCount = this.items.filter(\r\n\t\t\t(item) => item.selected,\r\n\t\t).length;\r\n\t\tthis.updateValidity();\r\n\t}\r\n\r\n\tupdateValidity = () => {\r\n\t\tif (this.hasInteracted && this.isRequired && !this.showDropdown) {\r\n\t\t\tthis.isValid = this.selectedItemsCount > 0;\r\n\t\t\tthis.setHelperText();\r\n\t\t} else {\r\n\t\t\tthis.isValid = true;\r\n\t\t\tthis.setHelperText();\r\n\t\t}\r\n\t};\r\n\r\n\tselectAllItems = (event: Event) => {\r\n\t\tevent.preventDefault();\r\n\t\tevent.stopPropagation();\r\n\t\tthis.items = this.items.map((item) => ({ ...item, selected: true }));\r\n\t\tthis.selectedItemsCount = this.items.length;\r\n\t\tthis.updateValidity();\r\n\t};\r\n\r\n\tclearSelectedItems = (event: Event) => {\r\n\t\tevent.preventDefault();\r\n\t\tevent.stopPropagation();\r\n\t\tthis.items = this.items.map((item) => ({ ...item, selected: false }));\r\n\t\tthis.selectedItemsCount = 0;\r\n\t\tthis.updateValidity();\r\n\t};\r\n\r\n\tgetValidationMessage(type: string) {\r\n\t\treturn ValidationMessages[this.language][type];\r\n\t}\r\n\r\n\tsetHelperText() {\r\n\t\tthis.helpertext = this.getValidationMessage(\"select\");\r\n\t}\r\n\r\n\tshowTooltip(event: MouseEvent, text: string) {\r\n\t\tif (event) {\r\n\t\t}\r\n\t\tthis.tooltipText = text;\r\n\t\t// this.tooltipPosition = {\r\n\t\t//   top: 100, // Adjust as necessary to position above the item\r\n\t\t//   left: -rect.left + 624.1,\r\n\t\t// };\r\n\t\tthis.tooltipVisible = true;\r\n\t}\r\n\r\n\thideTooltip() {\r\n\t\tthis.tooltipVisible = false;\r\n\t}\r\n\r\n\t// Keyboard Accessibility Handlers\r\n\thandleKeyDownToggle(event: KeyboardEvent) {\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"Enter\":\r\n\t\t\tcase \" \":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tthis.toggleDropdown();\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"ArrowDown\":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tif (!this.showDropdown) {\r\n\t\t\t\t\tthis.toggleDropdown();\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.focusNextItem();\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"ArrowUp\":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tif (!this.showDropdown) {\r\n\t\t\t\t\tthis.toggleDropdown();\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.focusPreviousItem();\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\r\n\thandleKeyDownItem(event: KeyboardEvent, index: number) {\r\n\t\tconst isAllSelected =\r\n\t\t\tthis.selectedItemsCount === this.items.length &&\r\n\t\t\tthis.items.length > 0;\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"ArrowDown\":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tthis.focusNextItem();\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"ArrowUp\":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tthis.focusPreviousItem();\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"Enter\":\r\n\t\t\tcase \" \":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tif (index === 0) {\r\n\t\t\t\t\t// First item is \"Select All/Clear Selected Items\"\r\n\t\t\t\t\tif (isAllSelected) {\r\n\t\t\t\t\t\tthis.clearSelectedItems(event);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthis.selectAllItems(event);\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.toggleItemSelection(index - 1);\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"Escape\":\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tthis.showDropdown = false;\r\n\t\t\t\tthis.focusToggleButton();\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\r\n\tfocusFirstItem() {\r\n\t\tif (this.items.length + 1 > 0) {\r\n\t\t\tthis.focusedItemIndex = 0;\r\n\t\t\tthis.focusItem(this.focusedItemIndex);\r\n\t\t}\r\n\t}\r\n\r\n\tfocusLastItem() {\r\n\t\tif (this.items.length + 1 > 0) {\r\n\t\t\tthis.focusedItemIndex = this.items.length;\r\n\t\t\tthis.focusItem(this.focusedItemIndex);\r\n\t\t}\r\n\t}\r\n\r\n\tfocusNextItem() {\r\n\t\tif (this.focusedItemIndex < this.items.length) {\r\n\t\t\tthis.focusedItemIndex += 1;\r\n\t\t} else {\r\n\t\t\tthis.focusedItemIndex = 0;\r\n\t\t}\r\n\t\tthis.focusItem(this.focusedItemIndex);\r\n\t}\r\n\r\n\tfocusPreviousItem() {\r\n\t\tif (this.focusedItemIndex > 0) {\r\n\t\t\tthis.focusedItemIndex -= 1;\r\n\t\t} else {\r\n\t\t\tthis.focusedItemIndex = this.items.length; // Loop to last\r\n\t\t}\r\n\t\tthis.focusItem(this.focusedItemIndex);\r\n\t}\r\n\r\n\tfocusItem(index: number) {\r\n\t\tif (index === 0) {\r\n\t\t\tconst selectAllButton = this.el.querySelector(\r\n\t\t\t\t`#multi-select-item-0 > button`,\r\n\t\t\t) as HTMLElement;\r\n\t\t\tif (selectAllButton) {\r\n\t\t\t\tselectAllButton.focus();\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tconst checkbox = this.el.querySelector(\r\n\t\t\t\t`#multi-select-item-${index} input[type=\"checkbox\"]`,\r\n\t\t\t) as HTMLElement;\r\n\t\t\tif (checkbox) {\r\n\t\t\t\tcheckbox.focus();\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst selectedItems = this.items.filter((item) => item.selected);\r\n\t\tconst selectedItemsCount = selectedItems.length;\r\n\t\tconst isAllSelected =\r\n\t\t\tselectedItemsCount === this.items.length && this.items.length > 0;\r\n\t\tconst buttonLabel = isAllSelected\r\n\t\t\t? this.clearAllText\r\n\t\t\t: this.selectAllText;\r\n\t\tconst buttonAction = isAllSelected\r\n\t\t\t? this.clearSelectedItems\r\n\t\t\t: this.selectAllItems;\r\n\r\n\t\tlet displayText = `${selectedItemsCount} selected`;\r\n\t\tif (selectedItemsCount === 0) {\r\n\t\t\tdisplayText = this.placeholderText;\r\n\t\t}\r\n\t\tif (selectedItemsCount === 1) {\r\n\t\t\tdisplayText = selectedItems[0].text;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t<Host\r\n\t\t\t\tclass={{\r\n\t\t\t\t\t\"ptc-multi-select\": true,\r\n\t\t\t\t\tinvalid: !this.isValid,\r\n\t\t\t\t\t\"mf-listen\": true,\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t<label\r\n\t\t\t\t\tclass=\"multi-select-label\"\r\n\t\t\t\t\tid={`multi-select-label-${this.label}`}\r\n\t\t\t\t>\r\n\t\t\t\t\t{this.label}\r\n\t\t\t\t</label>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"selected-items multi-selected-items\"\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\taria-haspopup=\"listbox\"\r\n\t\t\t\t\taria-expanded={this.showDropdown}\r\n\t\t\t\t\taria-labelledby={`multi-select-label-${this.label}`}\r\n\t\t\t\t\ttabIndex={0}\r\n\t\t\t\t\tonClick={() => this.toggleDropdown()}\r\n\t\t\t\t\tonKeyDown={(event: KeyboardEvent) =>\r\n\t\t\t\t\t\tthis.handleKeyDownToggle(event)\r\n\t\t\t\t\t}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div class=\"input-text\">{displayText}</div>\r\n\t\t\t\t\t<span class=\"multi-select-icon\">\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\tclass=\"multi-arrow-svg\"\r\n\t\t\t\t\t\t\twidth=\"10\"\r\n\t\t\t\t\t\t\theight=\"10\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 10 10\"\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<path d=\"M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z\"></path>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<ul\r\n\t\t\t\t\tclass={\"dropdown\" + (this.showDropdown ? \" show\" : \"\")}\r\n\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t\taria-labelledby={`multi-select-label-${this.label}`}\r\n\t\t\t\t\ttabIndex={-1}\r\n\t\t\t\t>\r\n\t\t\t\t\t{/* \"Select All/Clear Selected Items\" as the first list item */}\r\n\t\t\t\t\t<li\r\n\t\t\t\t\t\tid={`multi-select-item-0`}\r\n\t\t\t\t\t\trole=\"option\"\r\n\t\t\t\t\t\taria-selected={isAllSelected}\r\n\t\t\t\t\t\tclass={{ selected: isAllSelected }}\r\n\t\t\t\t\t\ttabIndex={-1}\r\n\t\t\t\t\t\tonKeyDown={(event: KeyboardEvent) =>\r\n\t\t\t\t\t\t\tthis.handleKeyDownItem(event, 0)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tonClick={(event) => {\r\n\t\t\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\t\t\tevent.stopPropagation();\r\n\t\t\t\t\t\t\t\tbuttonAction(event);\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tclass=\"ddl-click-text\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{buttonLabel}\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</li>\r\n\r\n\t\t\t\t\t{/* Map through the items starting from index 1 */}\r\n\t\t\t\t\t{this.items.map((item, index) => (\r\n\t\t\t\t\t\t<li\r\n\t\t\t\t\t\t\tkey={index + 1}\r\n\t\t\t\t\t\t\tid={`multi-select-item-${index + 1}`}\r\n\t\t\t\t\t\t\trole=\"option\"\r\n\t\t\t\t\t\t\taria-selected={item.selected}\r\n\t\t\t\t\t\t\tclass={{ selected: item.selected }}\r\n\t\t\t\t\t\t\ttabIndex={-1}\r\n\t\t\t\t\t\t\tonMouseEnter={(event) =>\r\n\t\t\t\t\t\t\t\tthis.checkOverflow(event, item.text)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tonMouseLeave={() => this.hideTooltip()}\r\n\t\t\t\t\t\t\tonKeyDown={(event: KeyboardEvent) =>\r\n\t\t\t\t\t\t\t\tthis.handleKeyDownItem(event, index + 1)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tonClick={(event) => {\r\n\t\t\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\t\t\tevent.stopPropagation();\r\n\t\t\t\t\t\t\t\tthis.toggleItemSelection(index);\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tclass=\"multi-checkbox\"\r\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\t\t\t\t\tid={`checkbox-${index}`}\r\n\t\t\t\t\t\t\t\tchecked={item.selected}\r\n\t\t\t\t\t\t\t\tdata-eloqua-name={item.ptcDataEloquaName}\r\n\t\t\t\t\t\t\t\tdata-target-eloqua-name={\r\n\t\t\t\t\t\t\t\t\titem.ptcDataTargetEloquaName\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\trequired={this.isRequired}\r\n\t\t\t\t\t\t\t\tonClick={(event) => {\r\n\t\t\t\t\t\t\t\t\tevent.stopPropagation(); // Prevents the dropdown from closing\r\n\t\t\t\t\t\t\t\t\tthis.toggleItemSelection(index);\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tonBlur={this.handleBlur}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t<label htmlFor={`checkbox-${index}`}>\r\n\t\t\t\t\t\t\t\t{item.text}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</ul>\r\n\r\n\t\t\t\t{this.tooltipVisible && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"tooltip\"\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\ttop: `${this.tooltipPosition.top}px`,\r\n\t\t\t\t\t\t\tleft: `${this.tooltipPosition.left}px`,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{this.tooltipText}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{/* Validation message */}\r\n\t\t\t\t<div\r\n\t\t\t\t\tid=\"tbd\"\r\n\t\t\t\t\tclass=\"mdc-select-helper-text mdc-select-helper-text--validation-msg\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<svg\r\n\t\t\t\t\t\tclass=\"select-error-svg\"\r\n\t\t\t\t\t\twidth=\"16\"\r\n\t\t\t\t\t\theight=\"16\"\r\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<g clip-path=\"url(#clip0_12_1424)\">\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\td=\"M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z\"\r\n\t\t\t\t\t\t\t\tfill=\"#AF3231\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t<defs>\r\n\t\t\t\t\t\t\t<clipPath id=\"clip0_12_1424\">\r\n\t\t\t\t\t\t\t\t<rect width=\"16\" height=\"16\" fill=\"white\" />\r\n\t\t\t\t\t\t\t</clipPath>\r\n\t\t\t\t\t\t</defs>\r\n\t\t\t\t\t</svg>\r\n\t\t\t\t\t{this.helpertext}\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\t// Ensure that checkOverflow is inside the class\r\n\tcheckOverflow(event: MouseEvent, text: string) {\r\n\t\tconst target = event.currentTarget as HTMLElement;\r\n\t\tconst label = target.querySelector(\"label\");\r\n\t\tif (label && label.scrollHeight > label.clientHeight) {\r\n\t\t\tthis.showTooltip(event, text);\r\n\t\t}\r\n\t}\r\n}\r\n"],"names":["getLanguageFromURL","ValidationMessages","h","Host","index"],"mappings":"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"}