wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

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

@@ -2,56 +2,213 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { getIconSize, getIconColor, getActionIconButtonSize } 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 { emitNativeInputEvent, getDropdownFocusableItems, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from "../basic-dropdown/vds-basic-dropdown.utils";
 import { arrayIsEqual } from "../../utils/array-utils";
+import { KeyboardNavigation } from "../../utils/keyboard-navigation";
+import { getDeepActiveElement } from "../../utils/get-deep-active-element";
+/**
+ * @component vds-basic-dropdown-multiselect
+ * @description A multi-select dropdown component that allows users to select multiple options from a list. Form-associated with support for custom icons, filtering, and accessible keyboard navigation.
+ * @slot - The default slot for dropdown items (vds-dropdown-item components)
+ * @example
+ * <!-- Basic multi-select dropdown -->
+ * <vds-basic-dropdown-multiselect
+ *   id="basic-multiselect"
+ *   placeholder="Select options">
+ *   <vds-dropdown-item value="option1">Option 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="option2">Option 2</vds-dropdown-item>
+ *   <vds-dropdown-item value="option3">Option 3</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ * <script>
+ *   const basicMultiselect = document.getElementById('basic-multiselect');
+ *   basicMultiselect.value = ['option1', 'option2'];
+ * </script>
+ *
+ * <!-- With display limit and custom text -->
+ * <vds-basic-dropdown-multiselect
+ *   placeholder="Select items"
+ *   display-selection-limit="2"
+ *   display-selection-limit-text="items selected">
+ *   <vds-dropdown-item value="item1">Item 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="item2">Item 2</vds-dropdown-item>
+ *   <vds-dropdown-item value="item3">Item 3</vds-dropdown-item>
+ *   <vds-dropdown-item value="item4">Item 4</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ *
+ * <!-- With informative icon and clear button -->
+ * <vds-basic-dropdown-multiselect
+ *   placeholder="Choose categories"
+ *   informative-icon="tag"
+ *   show-clear-button
+ *   size="large">
+ *   <vds-dropdown-item value="category1">Category 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="category2">Category 2</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ *
+ * <!-- Disabled and readonly states -->
+ * <vds-basic-dropdown-multiselect
+ *   id="disabled-multiselect"
+ *   placeholder="Disabled"
+ *   disabled>
+ *   <vds-dropdown-item value="val1">Value 1</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ * <script>
+ *   const disabledMultiselect = document.getElementById('disabled-multiselect');
+ *   disabledMultiselect.value = ['val1'];
+ * </script>
+ *
+ * <vds-basic-dropdown-multiselect
+ *   id="readonly-multiselect"
+ *   placeholder="Read only"
+ *   is-readonly>
+ *   <vds-dropdown-item value="val2">Value 2</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ * <script>
+ *   const readonlyMultiselect = document.getElementById('readonly-multiselect');
+ *   readonlyMultiselect.value = ['val2'];
+ * </script>
+ *
+ * <!-- With error state and max height -->
+ * <vds-basic-dropdown-multiselect
+ *   placeholder="Select tags"
+ *   error
+ *   max-height="200px"
+ *   match-width>
+ *   <vds-dropdown-item value="tag1">Tag 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="tag2">Tag 2</vds-dropdown-item>
+ *   <vds-dropdown-item value="tag3">Tag 3</vds-dropdown-item>
+ *   <vds-dropdown-item value="tag4">Tag 4</vds-dropdown-item>
+ *   <vds-dropdown-item value="tag5">Tag 5</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ *
+ * <!-- With custom position -->
+ * <vds-basic-dropdown-multiselect
+ *   placeholder="Opens above"
+ *   position="top"
+ *   match-width>
+ *   <vds-dropdown-item value="item1">Item 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="item2">Item 2</vds-dropdown-item>
+ *   <vds-dropdown-item value="item3">Item 3</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ *
+ * <vds-basic-dropdown-multiselect
+ *   placeholder="Opens left"
+ *   position="left"
+ *   match-width>
+ *   <vds-dropdown-item value="item1">Item 1</vds-dropdown-item>
+ *   <vds-dropdown-item value="item2">Item 2</vds-dropdown-item>
+ *   <vds-dropdown-item value="item3">Item 3</vds-dropdown-item>
+ * </vds-basic-dropdown-multiselect>
+ */
 export class VdsBasicDropdownMultiselect {
     constructor() {
-        /** Sets the dropdown's size. */
+        /**
+         * Sets the dropdown's size
+         * @type {"small" | "medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Sets the dropdown's value. */
+        /**
+         * Sets the dropdown's value (array of selected item values)
+         * @type {string[] | string}
+         * @default []
+         */
         this.value = [];
-        /** Sets the dropdown's trigger event. */
+        /**
+         * Sets the dropdown's trigger event
+         * @type {"click"}
+         * @default "click"
+         */
         this.event = "click";
-        /** Sets displaySelectionLimit text */
+        /**
+         * Sets displaySelectionLimit text
+         * @type {string}
+         * @default "Items selected"
+         */
         this.displaySelectionLimitText = "Items selected";
-        /** Sets the dropdown's clear button visibility. */
+        /**
+         * Sets the dropdown's clear button visibility
+         * @type {boolean}
+         * @default true
+         */
         this.showClearButton = true;
-        /** Sets the width value for the floating container of the items to match the dropdown width */
+        /**
+         * Sets the width value for the floating container of the items to match the dropdown width
+         * @type {boolean}
+         * @default false
+         */
         this.matchWidth = false;
-        /** Toggles the floating container auto-positioning based on available window space.
+        /**
+         * 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
+         * @type {boolean}
+         * @default false
          */
         this.autoPosition = false;
-        /** Toggles the overlay element, allowing interaction only with this element when active */
+        /**
+         * Defines the position where the dropdown will be opened.
+         * @type {"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end"}
+         * @default "bottom"
+         */
+        this.position = 'bottom';
+        /**
+         * Toggles the overlay element, allowing interaction only with this element when active
+         * @type {boolean}
+         * @default false
+         */
         this.backdrop = false;
+        /**
+         * Internal state tracking whether the dropdown is opened
+         * @type {boolean}
+         */
         this.isOpened = false;
+        /**
+         * Array of dropdown item elements
+         * @private
+         * @type {HTMLVdsDropdownItemElement[]}
+         */
         this.options = [];
     }
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * @returns {void}
+     */
     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();
+        this.renderOptions();
     }
+    /**
+     * Lifecycle hook that runs when component is disconnected
+     * @returns {void}
+     */
     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));
+        this.destroyKeyboardNavigation();
         (_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);
+    /**
+     * Renders the dropdown options from slotted items
+     * @private
+     * @returns {void}
+     */
+    renderOptions() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+    }
+    /**
+     * Handles slot change events to update options
+     * @private
+     * @returns {void}
+     */
+    handleSlotChange() {
+        this.renderOptions();
     }
+    /**
+     * Watches for value changes to update internal state and form value
+     * Validates whether the newValue is string or array and normalizes to array format
+     * @param {string | string[]} newValue - The new value(s)
+     * @returns {void}
+     */
     // Sets the value prop validating whether the newValue is string or array.
     setValueHandler(newValue) {
         if (!newValue) {
@@ -75,35 +232,59 @@ export class VdsBasicDropdownMultiselect {
             unselectAllItems(this.dropdownContent);
         }
     }
+    /**
+     * Lifecycle hook that runs after each render
+     * Updates options list and floating position
+     * @returns {void}
+     */
     componentDidRender() {
         this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
-        updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);
+        updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, this.position, false, ['top', 'bottom']);
         updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);
     }
+    /**
+     * Watches for dropdown open state changes and manages positioning
+     * @returns {Promise<void>}
+     */
     async toggleDropdown() {
         if (this.isOpened) {
             toggleContainerDisplay(this.dropdownContent, true);
             this.opened.emit();
-            this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, "bottom", this.autoPosition);
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, this.position, this.autoPosition);
+            this.initKeyboardNavigation();
         }
         else {
             toggleContainerDisplay(this.dropdownContent, false);
             this.closed.emit();
+            this.destroyKeyboardNavigation();
             this.floatingCleanUp();
         }
     }
+    /**
+     * Opens the floating dropdown menu
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the dropdown is opened
+     */
     /* Open the floating element(menu) of the Dropdown. */
     async open() {
         this.isOpened = true;
     }
+    /**
+     * Closes the floating dropdown menu
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the dropdown is closed
+     */
     /* 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.
+     * Clears the selected options and resets the value of the dropdown
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete
      */
     async clear() {
         this.value = [];
@@ -111,46 +292,50 @@ export class VdsBasicDropdownMultiselect {
         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.
+     * Gets the target element that manages the dropdown menu
+     * @method
+     * @public
+     * @returns {Promise<HTMLElement | null>} 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[].
+     * Gets the selected value of the dropdown
+     * @method
+     * @public
+     * @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.
+     * Sets the selected value(s) for the dropdown
+     * @method
+     * @public
+     * @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);
     }
+    /**
+     * Closes the floating element when clicking outside the component
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     /* 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) {
+        const path = evt.composedPath ? evt.composedPath() : [];
+        const isClickInside = path.includes(this.hostEl);
+        if (!isClickInside) {
             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.
+     * Listens for dropdown item clicks to toggle selection and update value
+     * @param {CustomEvent<DropdownItemClickedEvent>} event - The dropdown item clicked event
+     * @returns {void}
      */
     handleDropdownSelection(event) {
         const item = event.target;
@@ -165,62 +350,139 @@ export class VdsBasicDropdownMultiselect {
         this.valueChanged.emit(this.value);
         emitNativeInputEvent(this.hostEl);
     }
+    /**
+     * Opens the floating element with click on the trigger element
+     * @private
+     * @returns {void}
+     */
     /* Open the floating element with click on the trigger element  */
-    handleClick(evt) {
-        evt.stopImmediatePropagation();
+    handleClick() {
         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();
+    /**
+     * Initializes keyboard navigation for dropdown items.
+     * Subscribes to keyboard events and manages focus within the dropdown.
+     * Closes dropdown on Escape key and restores focus to trigger element.
+     * @private
+     * @returns {void}
+     */
+    initKeyboardNavigation() {
+        const dropdownItems = this.getDropdownItems();
+        if (dropdownItems.length === 0) {
+            return;
         }
+        const triggerEl = getDeepActiveElement();
+        if (!triggerEl) {
+            return;
+        }
+        KeyboardNavigation.subscribe(dropdownItems, triggerEl, this.close.bind(this));
+    }
+    /**
+     * Destroys the active keyboard navigation session.
+     * @private
+     * @returns {void}
+     */
+    destroyKeyboardNavigation() {
+        KeyboardNavigation.unsubscribe();
+    }
+    /**
+     * Returns focusable dropdown items that can be navigated
+     * ignores dropdown group headers and disabled items.
+     * @private
+     * @returns {HTMLElement[]} An array of focusable dropdown items.
+     */
+    getDropdownItems() {
+        return getDropdownFocusableItems(this.hostEl);
     }
+    /**
+     * Handles clear icon click to clear selection and close dropdown
+     * @private
+     * @param {Event} evt - The click event
+     * @returns {void}
+     */
     clearIconClick(evt) {
         evt.stopImmediatePropagation();
         this.clear();
         this.close();
     }
+    /**
+     * Renders the label/value display for the dropdown trigger
+     * @private
+     * @returns {HTMLStencilElement} The label element
+     */
     renderLabelValue() {
         const selectedValue = this.getTextValue();
         return h("span", { class: combineClasses("vds-dropdown-multiselect__label", `vds-dropdown-multiselect__label--${this.hasValue() ? "value" : "placeholder"}`) }, selectedValue);
     }
+    /**
+     * Gets the text value to display based on selection and display limit
+     * @private
+     * @returns {string} The display text
+     */
     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;
     }
+    /**
+     * Gets the icon color based on disabled and readonly states
+     * @private
+     * @returns {string} The icon color
+     */
     getIconColor() {
         return getIconColor(this.disabled, this.isReadonly);
     }
+    /**
+     * Renders the informative icon if specified
+     * @private
+     * @returns {HTMLStencilElement} The icon element
+     */
     renderInformativeIcon() {
         return h("vds-icon", { svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) });
     }
+    /**
+     * Renders the clear button icon
+     * @private
+     * @returns {HTMLStencilElement} The clear icon button element
+     */
     renderClearIcon() {
         return (h("vds-icon-button", { icon: "close", variant: "secondary", size: getActionIconButtonSize(this.size), onClick: evt => {
                 this.clearIconClick(evt);
             }, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" }));
     }
+    /**
+     * Renders the dropdown chevron icon
+     * @private
+     * @returns {HTMLStencilElement} The dropdown icon element
+     */
     renderDropdownIcon() {
         return h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: this.getIconColor(), size: getIconSize(this.size) });
     }
+    /**
+     * Checks if the dropdown has any selected values
+     * @private
+     * @returns {boolean} True if there are selected values
+     */
     hasValue() {
         return Array.isArray(this.value) && this.value && this.value.length > 0;
     }
+    /**
+     * Renders the component
+     * @returns {HTMLStencilElement} The rendered component
+     */
     render() {
-        return (h(Host, { key: '85fcf956865de41a71a6a9cc7838cb50515dfa4a', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'e1d9b79ccbafb6891a9ce8ae7a6252287c074964', class: "vds-dropdown-multiselect__container" }, h("button", { key: '0c9d1d45a68d45f8f6448831ed5c72382dc2d6e7', disabled: this.disabled, ref: (el) => {
+        return (h(Host, { key: 'd4761e467c54b9f2e96ebb085a783b627e7f7e61', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: '6b513f5f668649f542d5f28820ccf74d84e31765', class: "vds-dropdown-multiselect__container" }, h("button", { key: 'a85026aa5d7ee2dc65d6d7721d57534a1d7af4a7', 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: '38315d863f7e52d8287c468683b67278dc111ddc', 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: '60c860938493b6fa6c940ae449a5e672520c85a0', ref: (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: () => {
+                this.handleClick();
+            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: '2caad8c9934f0a2b9baa649cdcb7071dd13e122e', 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: 'e2d661d3bd819ff3b45c277627ebb7e8f07ac850', 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: '2285dd57fea471099951445dbc29caee1fbc8cf9', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: 'fd4eb53d5636a3d4675b5c3e637327a7d0f27275' }))))));
+            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '3fa19f611fc89ee3a677f5f55bdee883cc05674c', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '7de03f4f7d7ec9526d7ae5d44b221ba9b10d2152', onSlotchange: () => this.handleSlotChange() }))))));
     }
     static get is() { return "vds-basic-dropdown-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -248,8 +510,14 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's size."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"small\" | \"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the dropdown's size"
                 },
                 "getter": false,
                 "setter": false,
@@ -268,8 +536,14 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's value."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string[] | string}"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Sets the dropdown's value (array of selected item values)"
                 },
                 "getter": false,
                 "setter": false,
@@ -288,8 +562,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a information icon to the left of the dropdown."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Allows user to define an information icon to the left of the dropdown"
                 },
                 "getter": false,
                 "setter": false,
@@ -307,8 +584,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's placeholder."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the dropdown's placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -326,8 +606,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown in disabled state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the dropdown in disabled state"
                 },
                 "getter": false,
                 "setter": false,
@@ -345,8 +628,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown in readonly state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the dropdown in readonly state"
                 },
                 "getter": false,
                 "setter": false,
@@ -364,8 +650,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown in error state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the dropdown in error state"
                 },
                 "getter": false,
                 "setter": false,
@@ -383,8 +672,14 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's trigger event."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"click\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"click\""
+                        }],
+                    "text": "Sets the dropdown's trigger event"
                 },
                 "getter": false,
                 "setter": false,
@@ -403,8 +698,11 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's value max items selected in plain text."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Sets the dropdown's value max items selected to display in plain text"
                 },
                 "getter": false,
                 "setter": false,
@@ -422,7 +720,13 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"Items selected\""
+                        }],
                     "text": "Sets displaySelectionLimit text"
                 },
                 "getter": false,
@@ -442,8 +746,14 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown's clear button visibility."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sets the dropdown's clear button visibility"
                 },
                 "getter": false,
                 "setter": false,
@@ -462,7 +772,10 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Set the max height value for the floating container of the items"
                 },
                 "getter": false,
@@ -481,7 +794,13 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the width value for the floating container of the items to match the dropdown width"
                 },
                 "getter": false,
@@ -501,8 +820,14 @@ export class VdsBasicDropdownMultiselect {
                 "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"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "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,
@@ -510,6 +835,32 @@ export class VdsBasicDropdownMultiselect {
                 "attribute": "auto-position",
                 "defaultValue": "false"
             },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"bottom\""
+                        }],
+                    "text": "Defines the position where the dropdown will be opened."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
             "backdrop": {
                 "type": "boolean",
                 "mutable": false,
@@ -521,7 +872,13 @@ export class VdsBasicDropdownMultiselect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Toggles the overlay element, allowing interaction only with this element when active"
                 },
                 "getter": false,
@@ -545,8 +902,14 @@ export class VdsBasicDropdownMultiselect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when floating element gets opens"
+                    "tags": [{
+                            "name": "event",
+                            "text": "opened"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emits event when floating element gets opened"
                 },
                 "complexType": {
                     "original": "void",
@@ -560,8 +923,14 @@ export class VdsBasicDropdownMultiselect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when floating element gets closes"
+                    "tags": [{
+                            "name": "event",
+                            "text": "closed"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emits event when floating element gets closed"
                 },
                 "complexType": {
                     "original": "void",
@@ -575,8 +944,14 @@ export class VdsBasicDropdownMultiselect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when an item is selected, this event contains the value of the selected item"
+                    "tags": [{
+                            "name": "event",
+                            "text": "valueChanged"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string[]>}"
+                        }],
+                    "text": "Emits event when an item is selected, this event contains the value of the selected items"
                 },
                 "complexType": {
                     "original": "string[]",
@@ -590,7 +965,13 @@ export class VdsBasicDropdownMultiselect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "cleared"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<boolean>}"
+                        }],
                     "text": "Emits an event when the clear button is clicked"
                 },
                 "complexType": {
@@ -615,8 +996,17 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Opens the floating dropdown menu",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the dropdown is opened"
+                        }]
                 }
             },
             "close": {
@@ -632,8 +1022,17 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Closes the floating dropdown menu",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the dropdown is closed"
+                        }]
                 }
             },
             "clear": {
@@ -649,10 +1048,16 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the selected options and resets the value of the dropdown.",
+                    "text": "Clears the selected options and resets the value of the dropdown",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the clearing operation is complete."
+                            "text": "A promise that resolves when the clearing operation is complete"
                         }]
                 }
             },
@@ -673,10 +1078,16 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<HTMLElement>"
                 },
                 "docs": {
-                    "text": "Gets the target that will manage the menu\nreturns a promise with the target HTMLElement.",
+                    "text": "Gets the target element that manages the dropdown menu",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves with the target html element."
+                            "text": "A promise that resolves with the target html element"
                         }]
                 }
             },
@@ -693,10 +1104,16 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<string[]>"
                 },
                 "docs": {
-                    "text": "Gets the selected value of the dropdown\nreturns a promise with the value.",
+                    "text": "Gets the selected value of the dropdown",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves with the value as string[]."
+                            "text": "A promise that resolves with the value as string[]"
                         }]
                 }
             },
@@ -706,7 +1123,7 @@ export class VdsBasicDropdownMultiselect {
                     "parameters": [{
                             "name": "value",
                             "type": "string | string[]",
-                            "docs": "The new value or array of values to select."
+                            "docs": "- The new value or array of values to select"
                         }],
                     "references": {
                         "Promise": {
@@ -717,13 +1134,19 @@ export class VdsBasicDropdownMultiselect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets the selected value(s) for the dropdown.",
+                    "text": "Sets the selected value(s) for the dropdown",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "param",
-                            "text": "value The new value or array of values to select."
+                            "text": "value - The new value or array of values to select"
                         }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the value is set."
+                            "text": "A promise that resolves when the value is set"
                         }]
                 }
             }
@@ -756,4 +1179,3 @@ export class VdsBasicDropdownMultiselect {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-basic-dropdown-multiselect.js.map