wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,797 @@
+import { Host, h, forceUpdate } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
+import { getIconSize } from "../../utils/icon-attr.utils";
+import { getSelectedLabel, scrollToSelectedValue, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from "./vds-basic-dropdown.utils";
+export class VdsBasicDropdown {
+    constructor() {
+        /** Sets the dropdown's size. */
+        this.size = 'medium';
+        /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */
+        this.dynamicInformativeIcon = false;
+        /** Sets the dropdown in disabled state. */
+        this.disabled = false;
+        /** Sets the dropdown in readonly state. */
+        this.isReadonly = false;
+        /** Sets the dropdown's trigger event. */
+        this.event = 'click';
+        /** 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;
+        /** Dropdown's status. */
+        this.dropdownOpened = false;
+        /** Dropdown's label of the current value. */
+        this.valueLabel = undefined;
+        this.options = [];
+    }
+    async emitValue() {
+        if (this.dropdownOpened) {
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', this.autoPosition);
+            toggleContainerDisplay(this.dropdownContentElementRef, true);
+            if (this.value) {
+                scrollToSelectedValue(this.dropdownContentElementRef, this.value);
+            }
+            this.opened.emit();
+        }
+        else {
+            toggleContainerDisplay(this.dropdownContentElementRef, false);
+            this.floatingCleanUp();
+            this.closed.emit();
+        }
+    }
+    setValueHandler() {
+        unselectNonSelectedItems(this.dropdownContentElementRef, this.value);
+        selectSelectedItems(this.dropdownContentElementRef, this.value);
+        this.defineValue();
+        this.setFormValue();
+        this.valueLabel = getSelectedLabel(this.dropdownContentElementRef, this.value);
+    }
+    setFormValue() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    /* Close the floating element when click outside */
+    handleClickOut(evt) {
+        evt.stopPropagation();
+        const isClickInside = this.hostEl.contains(evt.target);
+        if (!isClickInside) {
+            this.close();
+        }
+    }
+    /* Close the floating element with keydown on the trigger element  */
+    handleFloatingKeydown(event) {
+        event.stopImmediatePropagation();
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            this.close();
+        }
+    }
+    /* Open the floating element with click on the trigger element  */
+    handleClick(evt) {
+        evt.stopImmediatePropagation();
+        if (this.event === 'click') {
+            const clickedElement = evt.target;
+            if (clickedElement && !this.disabled && !this.isReadonly) {
+                this.dropdownOpened = !this.dropdownOpened;
+            }
+        }
+    }
+    /* Clear selected value from the Dropdown  */
+    clearValue(evt) {
+        evt.stopImmediatePropagation();
+        this.clear();
+        this.close();
+    }
+    /* Listen when Dropdown Item element is clicked to close Dropdown Items window */
+    handleDropdownItemClicked(event) {
+        this.handleSelection(event);
+        this.valueChanged.emit(this.value);
+        this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;
+        this.close();
+    }
+    /* Checks if the item is already selected and if so clears the selection, otherwise sets the value */
+    handleSelection(event) {
+        this.value = event.detail.value;
+        this.valueLabel = event.detail.label;
+    }
+    /* Open the floating element(menu) of the Dropdown. */
+    async open() {
+        this.dropdownOpened = true;
+    }
+    /* Close the floating element(menu) of the Dropdown. */
+    async close() {
+        this.dropdownOpened = false;
+    }
+    /* Clear the selected value from the Dropdown. */
+    async clear() {
+        this.value = null;
+        this.valueLabel = null;
+        this.valueChanged.emit(this.value);
+        this.dynamicInformativeIcon ? (this.informativeIcon = this.defaultInformativeIcon) : null;
+        unselectAllItems(this.dropdownContentElementRef);
+        this.cleared.emit(true);
+    }
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     */
+    async getTarget() {
+        return document.querySelector('.vds__dropdown--trigger');
+    }
+    /**
+     *  Gets the selected value of the dropdown
+     *  returns a promise with the value.
+     */
+    async getValue() {
+        return this.value;
+    }
+    /**
+     *  Set the value of the dropdown
+     */
+    async setValue(value) {
+        this.clear();
+        this.value = value;
+    }
+    handleHover(event) {
+        const hoveredElement = event.target;
+        if (this.event === 'hover' && hoveredElement) {
+            this.dropdownOpened = true;
+        }
+    }
+    handleHoverOut(event) {
+        const hoveredElement = event.target;
+        if (this.event === 'hover' && hoveredElement) {
+            this.close();
+        }
+    }
+    setPredefinedItem() {
+        var _a;
+        const slotElement = (_a = this.dropdownContentElementRef) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const items = typeof (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedElements) === 'function' && (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedElements());
+        let preselectedItem = Array.from(items || []).filter(item => item.tagName.toLowerCase() === 'vds-dropdown-item' && item.getAttribute('value') === this.value)[0];
+        if (preselectedItem) {
+            preselectedItem.setAttribute('is-selected', 'true');
+            preselectedItem.setAttribute('is-active', 'true');
+            this.valueLabel = preselectedItem.getAttribute('label');
+        }
+    }
+    findAndSetPredefinedItem() {
+        var _a;
+        let getPreselectedItem = undefined;
+        const slotElement = (_a = this.dropdownContentElementRef) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slotElement && typeof slotElement.assignedElements === 'function' && slotElement.assignedElements().length > 0) {
+            getPreselectedItem = Array.from(slotElement.assignedElements()).find(item => item.tagName.toLowerCase() === 'vds-dropdown-item' &&
+                item.hasAttribute('is-selected') &&
+                item.getAttribute('is-selected') === 'true' &&
+                item.hasAttribute('is-active') &&
+                item.getAttribute('is-active') === 'true');
+        }
+        if (getPreselectedItem !== undefined) {
+            this.value = getPreselectedItem.getAttribute('value');
+            this.valueLabel = getPreselectedItem.getAttribute('label');
+        }
+    }
+    defineValue() {
+        if (this.value && !this.valueLabel) {
+            this.setPredefinedItem();
+        }
+        if (this.value) {
+            this.findAndSetPredefinedItem();
+        }
+    }
+    componentWillLoad() {
+        if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {
+            this.defaultInformativeIcon = this.informativeIcon;
+        }
+    }
+    componentDidRender() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);
+        updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (this.event === 'click') {
+            this.actionElementRef.addEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.event === 'hover') {
+            this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));
+            this.dropdownContentElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));
+        }
+        (_a = this.actionElementRef) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        (_b = this.dropdownContentElementRef) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        if (!this.dropdownContentElementRef) {
+            this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector(".vds__dropdown--container");
+        }
+        if (this.value) {
+            this.setPredefinedItem();
+        }
+        else {
+            this.findAndSetPredefinedItem();
+        }
+        this.setFormValue();
+        this.setListenerForChildren();
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('click', this.handleClickOut.bind(this));
+        if (this.event === 'click') {
+            this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.event === 'hover') {
+            this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));
+            this.dropdownContentElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));
+            this.actionElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));
+            this.dropdownContentElementRef.removeEventListener('keydown', this.handleFloatingKeydown.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"));
+            forceUpdate(this);
+        });
+        this.observer.observe(this.hostEl, config);
+    }
+    /** Gets the icon color.
+     *
+     * @returns string
+     */
+    getIconColor() {
+        return this.disabled ? 'color-icon-disabled' : 'color-icon-high';
+    }
+    setDropdownIcon() {
+        return (h("span", null, h("vds-icon", { svgIcon: this.dropdownOpened ? 'chevron-up' : 'chevron-down', color: this.disabled ? 'color-icon-disabled' : 'color-icon-high', size: getIconSize(this.size) })));
+    }
+    setInformativeIcon() {
+        if (this.informativeIcon) {
+            return (h("span", null, h("vds-icon", { class: "vds-dropdown__informative-icon", svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) })));
+        }
+        else {
+            return null;
+        }
+    }
+    setLabelValue() {
+        return (h("span", { class: combineClasses('vds__dropdown--value', 'vds__dropdown--value-' + this.size, 'vds__dropdown--value-' + (this.value && this.valueLabel ? 'label' : 'placeholder')) }, this.value && this.valueLabel ? this.valueLabel : this.placeholder));
+    }
+    setClearValueButtonIcon() {
+        if (this.value && this.valueLabel && this.showClearButton) {
+            return (h("span", null, h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: !this.disabled && !this.isReadonly
+                    ? event => {
+                        this.clearValue(event);
+                    }
+                    : null, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" })));
+        }
+        else {
+            return null;
+        }
+    }
+    render() {
+        return (h(Host, { key: '8aec128863f8c4adc5fca7bbbed5dffacb6b8451', class: combineClasses(this.disabled ? "vds-basic-dropdown--disabled" : ""), onClicked: event => this.handleDropdownItemClicked(event.detail) }, h("div", { key: 'd06c359d8395fda9079fdf6e1f90c16ba2d95834', class: "vds-basic-dropdown__container" }, h("button", { key: 'fd909d282c7b86aa78f3e386853bd34b76c19707', tabIndex: 0, disabled: this.disabled, value: this.value, class: combineClasses('vds__dropdown--trigger', this.disabled ? 'vds__dropdown--trigger-disabled' : '', this.error ? 'vds__dropdown--trigger-error' : '', `vds__dropdown--trigger--size-${this.size}`), onClick: (evt) => {
+                this.handleClick(evt);
+            }, ref: triggerEl => {
+                if (triggerEl)
+                    this.actionElementRef = triggerEl;
+            } }, h("span", { key: '2848f9bc0db70b8e87c0fef709fd01b7424eb461', class: "vds__dropdown--left-content" }, this.setInformativeIcon(), this.setLabelValue()), h("span", { key: '643260effea4a2079f1fdb6bf7fee2af8f620af3', class: "vds__dropdown--right-actions" }, this.setClearValueButtonIcon(), this.setDropdownIcon())), this.backdrop && this.dropdownOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '1fa1365e65f584ac54968825d480d73998e6c863', class: combineClasses('vds__dropdown--container', this.maxHeight ? 'has-scroll' : '', this.options.length === 0 ? "no-shadow" : ""), ref: dropdownEl => {
+                if (dropdownEl)
+                    this.dropdownContentElementRef = dropdownEl;
+            } }, h("div", { key: '435d3f12c6ee95cc22a31dc4523f0f1b399b4b11', class: combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : ''), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '62a1f25cffa23e577fba89a2b02dd91a7c82f6f9' }))))));
+    }
+    static get is() { return "vds-basic-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-dropdown.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",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "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
+            },
+            "dynamicInformativeIcon": {
+                "type": "boolean",
+                "attribute": "dynamic-informative-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "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": false,
+                "defaultValue": "false"
+            },
+            "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": false,
+                "defaultValue": "false"
+            },
+            "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' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dropdown's trigger event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "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 {
+            "dropdownOpened": {},
+            "valueLabel": {}
+        };
+    }
+    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": "",
+                    "tags": []
+                }
+            },
+            "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": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<String | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "String": {
+                            "location": "global",
+                            "id": "global::String"
+                        }
+                    },
+                    "return": "Promise<String>"
+                },
+                "docs": {
+                    "text": "Gets the selected value of the dropdown\nreturns a promise with the value.",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the value of the dropdown",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "dropdownOpened",
+                "methodName": "emitValue"
+            }, {
+                "propName": "value",
+                "methodName": "setValueHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOut",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dropdownItemClicked",
+                "method": "handleDropdownItemClicked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-basic-dropdown.js.map