wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.js

@@ -0,0 +1,756 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { getIconSize, getIconColor } from "../../utils/icon-attr.utils";
+import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
+import { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from "../basic-dropdown/vds-basic-dropdown.utils";
+import { arrayIsEqual } from "../../utils/array-utils";
+export class VdsBasicDropdownMultiselect {
+    constructor() {
+        /** Sets the dropdown's size. */
+        this.size = "medium";
+        /** Sets the dropdown's value. */
+        this.value = [];
+        /** Sets the dropdown's trigger event. */
+        this.event = "click";
+        /** Sets displaySelectionLimit text */
+        this.displaySelectionLimitText = "Items selected";
+        /** Sets the dropdown's clear button visibility. */
+        this.showClearButton = true;
+        /** Sets the width value for the floating container of the items to match the dropdown width */
+        this.matchWidth = false;
+        /** Toggles the floating container auto-positioning based on available window space.
+         * False by default as it may cause positioning issues in some situations, use with caution
+         */
+        this.autoPosition = false;
+        /** Toggles the overlay element, allowing interaction only with this element when active */
+        this.backdrop = false;
+        this.isOpened = false;
+        this.options = [];
+    }
+    componentDidLoad() {
+        var _a, _b;
+        this.setValueHandler(this.value);
+        selectSelectedItems(this.dropdownContent, this.value);
+        (_a = this.dropdownTrigger) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        (_b = this.dropdownContent) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        this.setListenerForChildren();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        window.removeEventListener('click', this.handleClickOut.bind(this));
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    setListenerForChildren() {
+        const config = {
+            childList: true,
+            subtree: true
+        };
+        this.observer = new MutationObserver(() => {
+            this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        });
+        this.observer.observe(this.hostEl, config);
+    }
+    // Sets the value prop validating whether the newValue is string or array.
+    setValueHandler(newValue) {
+        if (!newValue) {
+            this.value = [];
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.value = getValidOptions(this.dropdownContent, newValue.split(","));
+        }
+        if (Array.isArray(newValue)) {
+            const uniqueValues = [...new Set(newValue)];
+            const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);
+            this.value = arrayIsEqual(this.value, selectedOptions) ? this.value : selectedOptions;
+        }
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value.join(","));
+        }
+        unselectNonSelectedItems(this.dropdownContent, this.value);
+        selectSelectedItems(this.dropdownContent, this.value);
+        if (this.value && this.value.length === 0) {
+            unselectAllItems(this.dropdownContent);
+        }
+    }
+    componentDidRender() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);
+        updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);
+    }
+    async toggleDropdown() {
+        if (this.isOpened) {
+            toggleContainerDisplay(this.dropdownContent, true);
+            this.opened.emit();
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, "bottom", this.autoPosition);
+        }
+        else {
+            toggleContainerDisplay(this.dropdownContent, false);
+            this.closed.emit();
+            this.floatingCleanUp();
+        }
+    }
+    /* Open the floating element(menu) of the Dropdown. */
+    async open() {
+        this.isOpened = true;
+    }
+    /* Close the floating element(menu) of the Dropdown. */
+    async close() {
+        this.isOpened = false;
+    }
+    /**
+     * Clears the selected options and resets the value of the dropdown.
+     *
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     */
+    async clear() {
+        this.value = [];
+        unselectAllItems(this.dropdownContent);
+        this.cleared.emit(true);
+    }
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     *
+     *  @returns {Promise<HTMLElement>} A promise that resolves with the target html element.
+     */
+    async getTarget() {
+        return this.dropdownTrigger;
+    }
+    /**
+     *  Gets the selected value of the dropdown
+     *  returns a promise with the value.
+     *
+     *  @returns {Promise<string[]>} A promise that resolves with the value as string[].
+     */
+    async getValue() {
+        return this.value;
+    }
+    /**
+     * Sets the selected value(s) for the dropdown.
+     *
+     * @param {string[] | string} value The new value or array of values to select.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    async setValue(value) {
+        this.setValueHandler(value);
+    }
+    /* Close the floating element when click outside */
+    handleClickOut(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const isClickInside = this.hostEl.contains(target);
+        const isClickInsideParentDropdown = target.nodeName === "VDS-DROPDOWN-MULTISELECT" && target.shadowRoot && evt.target.shadowRoot.contains(this.hostEl);
+        if (!isClickInside && !isClickInsideParentDropdown) {
+            this.close();
+        }
+    }
+    /**
+     * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.
+     *
+     * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.
+     */
+    handleDropdownSelection(event) {
+        const item = event.target;
+        const value = event.detail.value;
+        item.isSelected = !item.isSelected;
+        if (item.isSelected) {
+            this.value = [...this.value, value];
+        }
+        else {
+            this.value = this.value.filter(v => v !== value);
+        }
+        this.valueChanged.emit(this.value);
+        emitNativeInputEvent(this.hostEl);
+    }
+    /* Open the floating element with click on the trigger element  */
+    handleClick(evt) {
+        evt.stopImmediatePropagation();
+        if (this.event === "click" && !this.disabled && !this.isReadonly) {
+            this.isOpened = !this.isOpened;
+        }
+    }
+    /* Close the floating element with keydown on the trigger element  */
+    handleFloatingKeydown(event) {
+        event.stopImmediatePropagation();
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            this.close();
+        }
+    }
+    clearIconClick(evt) {
+        evt.stopImmediatePropagation();
+        this.clear();
+        this.close();
+    }
+    renderLabelValue() {
+        const selectedValue = this.getTextValue();
+        return h("span", { class: combineClasses("vds-dropdown-multiselect__label", `vds-dropdown-multiselect__label--${this.hasValue() ? "value" : "placeholder"}`) }, selectedValue);
+    }
+    getTextValue() {
+        if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {
+            return `${this.value.length} ${this.displaySelectionLimitText}`;
+        }
+        return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value).join(", ") : this.placeholder;
+    }
+    renderInformativeIcon() {
+        return h("vds-icon", { svgIcon: this.informativeIcon, color: getIconColor(this.disabled), size: getIconSize(this.size) });
+    }
+    renderClearIcon() {
+        return h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: (evt) => {
+                this.clearIconClick(evt);
+            }, disabled: this.disabled, setAriaLabel: "clear" });
+    }
+    renderDropdownIcon() {
+        return h("vds-icon", { svgIcon: this.isOpened ? "chevron-up" : "chevron-down", color: getIconColor(this.disabled), size: getIconSize(this.size) });
+    }
+    hasValue() {
+        return Array.isArray(this.value) && this.value && this.value.length > 0;
+    }
+    render() {
+        return (h(Host, { key: '3fd565dcb815b39f8fd788b29876436817c7f322', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'b0726a7feaa942de1b108be126235c5c4d7b2f16', class: "vds-dropdown-multiselect__container" }, h("button", { key: '21eeb4220d3468de485db8558527997cf726fe7a', disabled: this.disabled, ref: (el) => {
+                if (el)
+                    this.dropdownTrigger = el;
+            }, class: combineClasses("vds-dropdown-multiselect___trigger", `vds-dropdown-multiselect___trigger--size-${this.size}`, this.disabled ? "vds-dropdown-multiselect___trigger--disabled" : "", this.isReadonly ? "vds-dropdown-multiselect___trigger--readonly" : "", this.error ? "vds-dropdown-multiselect___trigger--error" : ""), onClick: (evt) => {
+                this.handleClick(evt);
+            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: 'bd72c134929ca8af2df97ba4b7015f9bd862f7a3', class: "vds-dropdown-multiselect__trigger-icons" }, this.hasValue() && this.showClearButton && this.renderClearIcon(), this.renderDropdownIcon())), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: 'c1af10efe4fa450dbb91520b0eb10ef36c87bd11', ref: (el) => {
+                if (el)
+                    this.dropdownContent = el;
+            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '8e8d60d2e410b3aa221543bc4ddc6e65bcb15d64', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '4022c802efa4d0d68024317905f538940b8eddb9' }))))));
+    }
+    static get is() { return "vds-basic-dropdown-multiselect"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-dropdown-multiselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-dropdown-multiselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows user to define a information icon to the left of the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown in disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "isReadonly": {
+                "type": "boolean",
+                "attribute": "is-readonly",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown in readonly state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "event": {
+                "type": "string",
+                "attribute": "event",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"click\"",
+                    "resolved": "\"click\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's trigger event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"click\""
+            },
+            "displaySelectionLimit": {
+                "type": "number",
+                "attribute": "display-selection-limit",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's value max items selected in plain text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "displaySelectionLimitText": {
+                "type": "string",
+                "attribute": "display-selection-limit-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets displaySelectionLimit text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Items selected\""
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "attribute": "show-clear-button",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's clear button visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the max height value for the floating container of the items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "matchWidth": {
+                "type": "boolean",
+                "attribute": "match-width",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the width value for the floating container of the items to match the dropdown width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoPosition": {
+                "type": "boolean",
+                "attribute": "auto-position",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the floating container auto-positioning based on available window space. \nFalse by default as it may cause positioning issues in some situations, use with caution"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "backdrop": {
+                "type": "boolean",
+                "attribute": "backdrop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the overlay element, allowing interaction only with this element when active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpened": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when floating element gets opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when floating element gets closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when an item is selected, this event contains the value of the selected item"
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "cleared",
+                "name": "cleared",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the clear button is clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selected options and resets the value of the dropdown.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the clearing operation is complete."
+                        }]
+                }
+            },
+            "getTarget": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Gets the target that will manage the menu\nreturns a promise with the target HTMLElement.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves with the target html element."
+                        }]
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Gets the selected value of the dropdown\nreturns a promise with the value.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves with the value as string[]."
+                        }]
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string[] | string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | string[]",
+                            "docs": "The new value or array of values to select."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the selected value(s) for the dropdown.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value The new value or array of values to select."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the value is set."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "setValueHandler"
+            }, {
+                "propName": "isOpened",
+                "methodName": "toggleDropdown"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOut",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dropdownItemClicked",
+                "method": "handleDropdownSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-basic-dropdown-multiselect.js.map