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

package/dist/collection/components/vds-basic-combo-box/vds-basic-combo-box.js

@@ -3,23 +3,284 @@ import { combineClasses } from "../../utils/combine-classes";
 import { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from "../input/vds-basic-input.utils";
 import { cloneAttributes } from "../../utils/clone-attributes";
 import { emitInputEvent } from "../../utils/form";
+/**
+ * @component vds-basic-combo-box
+ * @description A multi-select combo box component that displays selected values as removable chips. Supports filtering, custom icons, and accessibility features. Ideal for tag selection, category filtering, and multi-value inputs.
+ *
+ * @example
+ * <!-- Basic combo box -->
+ * <vds-basic-combo-box
+ *   placeholder="Select options">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Combo box with pre-selected values -->
+ * <vds-basic-combo-box
+ *   id="tags-combo"
+ *   placeholder="Add tags">
+ * </vds-basic-combo-box>
+ * <script>
+ *   const combo = document.getElementById('tags-combo');
+ *   combo.value = ['JavaScript', 'TypeScript', 'React'];
+ * </script>
+ *
+ * @example
+ * <!-- Small size combo box -->
+ * <vds-basic-combo-box
+ *   size="small"
+ *   placeholder="Select tags">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Large size combo box -->
+ * <vds-basic-combo-box
+ *   size="large"
+ *   placeholder="Select categories">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Combo box with informative icon -->
+ * <vds-basic-combo-box
+ *   placeholder="Search items"
+ *   informative-icon="magnify">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Combo box with custom action icon -->
+ * <vds-basic-combo-box
+ *   placeholder="Filter results"
+ *   action-icon="filter">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Disabled combo box -->
+ * <vds-basic-combo-box
+ *   disabled="true"
+ *   placeholder="Disabled input">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Readonly combo box -->
+ * <vds-basic-combo-box
+ *   id="readonly-combo"
+ *   is-readonly="true"
+ *   placeholder="View only">
+ * </vds-basic-combo-box>
+ * <script>
+ *   const combo = document.getElementById('readonly-combo');
+ *   combo.value = ['Option 1', 'Option 2'];
+ * </script>
+ *
+ * @example
+ * <!-- Combo box with error state -->
+ * <vds-basic-combo-box
+ *   error="true"
+ *   placeholder="Invalid selection">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Combo box without clear button -->
+ * <vds-basic-combo-box
+ *   show-clear-button="false"
+ *   placeholder="No clear button">
+ * </vds-basic-combo-box>
+ *
+ * @example
+ * <!-- Interactive combo box with autocomplete items -->
+ * <vds-basic-combo-box
+ *   id="autocomplete-combo"
+ *   placeholder="Search and select">
+ * </vds-basic-combo-box>
+ * <div id="results" style="margin-top: 8px;"></div>
+ * <script>
+ *   const combo = document.getElementById('autocomplete-combo');
+ *   const results = document.getElementById('results');
+ *   const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
+ *
+ *   combo.addEventListener('changeInput', (e) => {
+ *     const query = e.detail.toLowerCase();
+ *     const filtered = options.filter(opt =>
+ *       opt.toLowerCase().includes(query) &&
+ *       !combo.value.includes(opt)
+ *     );
+ *
+ *     results.innerHTML = '';
+ *     filtered.forEach(opt => {
+ *       const item = document.createElement('vds-autocomplete-item');
+ *       item.setAttribute('value', opt);
+ *       item.addEventListener('click', async () => {
+ *         const current = await combo.getValue();
+ *         await combo.setValue([...current, opt]);
+ *         results.innerHTML = '';
+ *       });
+ *       results.appendChild(item);
+ *     });
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Combo box with event handling -->
+ * <vds-basic-combo-box
+ *   id="event-combo"
+ *   placeholder="Select items">
+ * </vds-basic-combo-box>
+ * <div id="output"></div>
+ * <script>
+ *   const combo = document.getElementById('event-combo');
+ *   const output = document.getElementById('output');
+ *
+ *   combo.addEventListener('valueChanged', (e) => {
+ *     output.textContent = `Selected: ${e.detail.join(', ')}`;
+ *   });
+ *
+ *   combo.addEventListener('cleared', () => {
+ *     output.textContent = 'Selection cleared';
+ *   });
+ *
+ *   combo.addEventListener('actionIconClick', () => {
+ *     console.log('Action icon clicked');
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Programmatic control -->
+ * <vds-basic-combo-box
+ *   id="controlled-combo"
+ *   placeholder="Controlled combo box">
+ * </vds-basic-combo-box>
+ * <button id="add-btn">Add Item</button>
+ * <button id="clear-btn">Clear All</button>
+ * <button id="focus-btn">Focus</button>
+ * <script>
+ *   const combo = document.getElementById('controlled-combo');
+ *   let counter = 1;
+ *
+ *   document.getElementById('add-btn').addEventListener('click', async () => {
+ *     const current = await combo.getValue();
+ *     await combo.setValue([...current, `Item ${counter++}`]);
+ *   });
+ *
+ *   document.getElementById('clear-btn').addEventListener('click', async () => {
+ *     await combo.clear();
+ *   });
+ *
+ *   document.getElementById('focus-btn').addEventListener('click', async () => {
+ *     await combo.setFocus();
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Form integration -->
+ * <form id="combo-form">
+ *   <vds-field label="Skills" is-required="true">
+ *     <vds-basic-combo-box
+ *       id="skills-combo"
+ *       name="skills"
+ *       placeholder="Add your skills">
+ *     </vds-basic-combo-box>
+ *   </vds-field>
+ *   <vds-button type="submit">Submit</vds-button>
+ * </form>
+ * <script>
+ *   const form = document.getElementById('combo-form');
+ *   form.addEventListener('submit', async (e) => {
+ *     e.preventDefault();
+ *     const combo = document.getElementById('skills-combo');
+ *     const skills = await combo.getValue();
+ *     console.log('Submitted skills:', skills);
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Complete tag manager -->
+ * <vds-field label="Tags" helper-text="Type and press Enter to add tags">
+ *   <vds-basic-combo-box
+ *     id="tag-manager"
+ *     placeholder="Add tags"
+ *     informative-icon="tag"
+ *     action-icon="add">
+ *   </vds-basic-combo-box>
+ * </vds-field>
+ * <div id="tag-suggestions" style="margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap;"></div>
+ * <script>
+ *   const tagManager = document.getElementById('tag-manager');
+ *   const suggestions = document.getElementById('tag-suggestions');
+ *   const popularTags = ['Design', 'Development', 'Marketing', 'Sales', 'Support'];
+ *
+ *   // Show popular tags as suggestions
+ *   popularTags.forEach(tag => {
+ *     const chip = document.createElement('vds-chip');
+ *     chip.setAttribute('value', tag);
+ *     chip.setAttribute('size', 'small');
+ *     chip.style.cursor = 'pointer';
+ *     chip.addEventListener('click', async () => {
+ *       const current = await tagManager.getValue();
+ *       if (!current.includes(tag)) {
+ *         await tagManager.setValue([...current, tag]);
+ *       }
+ *     });
+ *     suggestions.appendChild(chip);
+ *   });
+ *
+ *   // Add tag on Enter key
+ *   tagManager.addEventListener('changeInput', async (e) => {
+ *     if (e.detail && e.detail.includes(',')) {
+ *       const newTags = e.detail.split(',').map(t => t.trim()).filter(t => t);
+ *       const current = await tagManager.getValue();
+ *       const unique = [...new Set([...current, ...newTags])];
+ *       await tagManager.setValue(unique);
+ *     }
+ *   });
+ * </script>
+ */
 export class VdsBasicComboBox {
     constructor() {
-        /** Sets the combobox size. */
+        /**
+         * Sets the combo box size
+         * @type {"medium" | "large" | "small"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Sets the combobox value. */
+        /**
+         * Sets the combo box selected values as an array of strings. Each value is displayed as a removable chip.
+         * @type {string[]}
+         * @default []
+         */
         this.value = [];
-        /** Sets the combobox clear button visibility. */
+        /**
+         * Sets the combo box clear button visibility
+         * @type {boolean}
+         * @default true
+         */
         this.showClearButton = true;
-        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        /**
+         * Allows user to define an action icon inside the input at its right
+         * @type {string}
+         * @default "zoom"
+         */
         this.actionIcon = "zoom";
+        /**
+         * Internal state for the input text value (used for filtering)
+         * @private
+         * @type {string}
+         * @default ""
+         */
         this.internalValue = "";
     }
+    /**
+     * Watches value changes and emits valueChanged event
+     * @private
+     * @param {string[]} newValue - The new value array
+     */
     valueChangedHandler(newValue) {
         emitInputEvent(this.hostEl, newValue == null || newValue.length == 0 ? "" : newValue.join(","));
         this.valueChanged.emit(newValue);
     }
-    /* Sets focus to the input element */
+    /**
+     * Sets focus to the input element
+     * @public
+     * @returns {Promise<void>} Promise that resolves when focus is set
+     */
     async setFocus() {
         return new Promise((resolve) => {
             this.inputEl.focus();
@@ -27,26 +288,27 @@ export class VdsBasicComboBox {
         });
     }
     /**
-     * Sets the autocomplete input value to handle filtering.
-     *
-     * @returns {Promise<void>}
+     * Sets the combo box selected values programmatically
+     * @public
+     * @param {string[]} value - Array of values to set as selected
+     * @returns {Promise<void>} Promise that resolves when value is set
      */
     async setValue(value) {
         this.value = value;
         return Promise.resolve();
     }
     /**
-     * Return the autocomplete value.
-     *
-     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     * Returns the current selected values from the combo box
+     * @public
+     * @returns {Promise<string[]>} Promise that resolves with the array of selected values
      */
     async getValue() {
         return Promise.resolve(this.value);
     }
     /**
-     * Clears the selected options and resets the value of the autocomplete.
-     *
-     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     * Clears all selected options and resets the combo box value
+     * @public
+     * @returns {Promise<void>} Promise that resolves when the clearing operation is complete
      */
     async clear() {
         this.value = [];
@@ -56,8 +318,9 @@ export class VdsBasicComboBox {
     }
     /**
      * Displays vds-icon when icon string is valid
-     *
-     * @returns HTMLStencilElement
+     * @private
+     * @param {string} icon - The icon name
+     * @returns {HTMLStencilElement | null} The icon element or null if invalid
      */
     getInputIcon(icon) {
         if (!isValidIcon(icon))
@@ -67,12 +330,9 @@ export class VdsBasicComboBox {
         return (h("vds-icon", { class: "vds-combo-box__informative-icon", svgIcon: icon, size: size, color: getIconColor(inputState) }));
     }
     /**
-     * Sets value from input"s event target.
-     * Emits change, input and changeInput events.
-     * Sets input as dirty when input"s event is triggered.
-     * Executes formatter prop function on every inputed value.
-     *
-     * @returns void
+     * Handles input events, sets value, emits events, and sets dirty state
+     * @private
+     * @param {InputEvent} evt - The input event
      */
     handleInput(evt) {
         evt.stopPropagation();
@@ -84,16 +344,25 @@ export class VdsBasicComboBox {
         this.hostEl.dispatchEvent(inputEvent);
     }
     /**
-     * Toggle class vds__input__container--focus in focus/blur input"s event
-     *
-     * @returns void
+     * Toggles the focus class on the input container during focus/blur events
+     * @private
      */
     toggleFocusClass() {
         this.inputContainerRef && toggleFocusClass(this.inputContainerRef);
     }
+    /**
+     * Handles chip close event by removing the value from the selected values array
+     * @private
+     * @param {string} val - The value to remove
+     */
     handleCloseChip(val) {
         this.value = this.value.filter(item => item !== val);
     }
+    /**
+     * Returns the appropriate icon button size based on the combo box size
+     * @private
+     * @returns {"medium" | "large" | "small" | "extra-small"} The icon button size
+     */
     getSizeIconButton() {
         switch (this.size) {
             case "small":
@@ -106,24 +375,37 @@ export class VdsBasicComboBox {
                 return "small";
         }
     }
+    /**
+     * Handles action button click and emits actionIconClick event
+     * @private
+     */
     handleActionButton() {
         this.actionIconClick.emit();
     }
+    /**
+     * Generates chip elements for each selected value
+     * @private
+     * @returns {Array} Array of chip elements
+     */
     getChipSelectedOptions() {
         if (this.value == null || this.value.length === 0) {
             return [];
         }
         return this.value.map((val) => (h("div", { class: "vds-combo-box__chip-container" }, h("vds-chip", { class: "vds-combo-box__chip", value: val, size: this.size, disabled: this.disabled || this.isReadonly, close: true, removeOnClose: false, onAfterClosed: () => this.handleCloseChip(val) }))));
     }
+    /**
+     * Renders the combo box component
+     * @returns The rendered combo box element
+     */
     render() {
         var _a;
-        return (h(Host, { key: 'ca3197c462632efd369247d9290e928ff4f19b95', class: this.disabled ? "vds-combo-box--disabled" : "" }, h("div", { key: '0e682f78b52d2ecf7d5edee8917a2ce5f4683620', ref: (el) => {
+        return (h(Host, { key: 'aca9665017862e538d2a522fef4b83a83a5fc2da', class: this.disabled ? "vds-combo-box--disabled" : "" }, h("div", { key: 'cf6c2dd08b91537ebd2a23fd665e5e48d429b81d', ref: (el) => {
                 if (el)
                     this.inputContainerRef = el;
-            }, class: combineClasses("vds-combo-box__container", `vds-combo-box--size-${this.size}`, this.error && "vds-combo-box__container--error", this.isReadonly && "vds-combo-box__container--readonly", this.disabled && "vds-combo-box__container--disabled") }, this.getInputIcon(this.informativeIcon), h("div", { key: 'cfd8f0952aac81d7813436a696d70d1e91be91a3', class: combineClasses("vds-combo-box__input-content", ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "vds-combo-box__input-content--has-value" : "") }, this.getChipSelectedOptions(), h("input", Object.assign({ key: '7d26f8d9304d1c35ae86230dab83d25abb2f9eab', ref: (el) => {
+            }, class: combineClasses("vds-combo-box__container", `vds-combo-box--size-${this.size}`, this.error && "vds-combo-box__container--error", this.isReadonly && "vds-combo-box__container--readonly", this.disabled && "vds-combo-box__container--disabled") }, this.getInputIcon(this.informativeIcon), h("div", { key: '54c800da48c904ab4243835b0d95743bfa6de4cc', class: combineClasses("vds-combo-box__input-content", ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "vds-combo-box__input-content--has-value" : "") }, this.getChipSelectedOptions(), h("input", Object.assign({ key: 'f08b84b1c01db23e3b048b521c78807fd1fb490c', ref: (el) => {
                 if (el)
                     this.inputEl = el;
-            }, class: "vds-combo-box__input", type: "text", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")))), this.showClearButton && (h("vds-icon-button", { key: '0e5f655aacfdbcb9092966e294ceeb4322097339', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: "close", size: this.getSizeIconButton(), onClick: () => this.clear() })), this.actionIcon && (h("vds-icon-button", { key: 'be105f5c151421b1f20b8bf8992e097654e2f89a', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: this.actionIcon, size: this.getSizeIconButton(), onClick: () => this.handleActionButton() })))));
+            }, class: "vds-combo-box__input", type: "text", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")))), this.showClearButton && (h("vds-icon-button", { key: '6115100c89678dea718aa8ae939e004d7983dad4', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: "close", size: this.getSizeIconButton(), onClick: () => this.clear() })), this.actionIcon && (h("vds-icon-button", { key: '41d6e44f5d7d6bb3f9899692a02e09fb2d08e13d', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: this.actionIcon, size: this.getSizeIconButton(), onClick: () => this.handleActionButton() })))));
     }
     static get is() { return "vds-basic-combo-box"; }
     static get encapsulation() { return "shadow"; }
@@ -150,8 +432,14 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox size."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"medium\" | \"large\" | \"small\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the combo box size"
                 },
                 "getter": false,
                 "setter": false,
@@ -170,8 +458,14 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox value."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string[]}"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Sets the combo box selected values as an array of strings. Each value is displayed as a removable chip."
                 },
                 "getter": false,
                 "setter": false,
@@ -188,8 +482,11 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox placeholder."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the combo box placeholder text"
                 },
                 "getter": false,
                 "setter": false,
@@ -207,8 +504,11 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox in disabled state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the combo box in disabled state"
                 },
                 "getter": false,
                 "setter": false,
@@ -226,8 +526,11 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox in readonly state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the combo box in readonly state"
                 },
                 "getter": false,
                 "setter": false,
@@ -245,8 +548,11 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox in error state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the combo box in error state"
                 },
                 "getter": false,
                 "setter": false,
@@ -264,8 +570,11 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a information icon inside the combobox at its left ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Allows user to define an information icon inside the combo box at its left"
                 },
                 "getter": false,
                 "setter": false,
@@ -283,8 +592,14 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the combobox clear button visibility."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sets the combo box clear button visibility"
                 },
                 "getter": false,
                 "setter": false,
@@ -303,8 +618,14 @@ export class VdsBasicComboBox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a search icon inside the input at its right (zoom by default) ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"zoom\""
+                        }],
+                    "text": "Allows user to define an action icon inside the input at its right"
                 },
                 "getter": false,
                 "setter": false,
@@ -327,8 +648,14 @@ export class VdsBasicComboBox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when the selected chips list change, this event contains the value of the selected chips"
+                    "tags": [{
+                            "name": "event",
+                            "text": "valueChanged"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string[]>}"
+                        }],
+                    "text": "Emits event when the selected chips list changes, contains the array of selected values"
                 },
                 "complexType": {
                     "original": "string[]",
@@ -342,7 +669,13 @@ export class VdsBasicComboBox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "cleared"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
                     "text": "Emits an event when the clear button is clicked"
                 },
                 "complexType": {
@@ -357,8 +690,14 @@ export class VdsBasicComboBox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the user click the actionIcon (the magnifying glass)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "actionIconClick"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emits an event when the user clicks the action icon"
                 },
                 "complexType": {
                     "original": "void",
@@ -372,8 +711,14 @@ export class VdsBasicComboBox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits updated inputed value similar to the input event"
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeInput"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emits updated input value, similar to the input event"
                 },
                 "complexType": {
                     "original": "string",
@@ -397,8 +742,14 @@ export class VdsBasicComboBox {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Sets focus to the input element",
+                    "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves when focus is set"
+                        }]
                 }
             },
             "setValue": {
@@ -407,7 +758,7 @@ export class VdsBasicComboBox {
                     "parameters": [{
                             "name": "value",
                             "type": "string[]",
-                            "docs": ""
+                            "docs": "- Array of values to set as selected"
                         }],
                     "references": {
                         "Promise": {
@@ -418,10 +769,16 @@ export class VdsBasicComboBox {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets the autocomplete input value to handle filtering.",
+                    "text": "Sets the combo box selected values programmatically",
                     "tags": [{
-                            "name": "returns",
+                            "name": "public",
                             "text": undefined
+                        }, {
+                            "name": "param",
+                            "text": "value - Array of values to set as selected"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves when value is set"
                         }]
                 }
             },
@@ -438,10 +795,13 @@ export class VdsBasicComboBox {
                     "return": "Promise<string[]>"
                 },
                 "docs": {
-                    "text": "Return the autocomplete value.",
+                    "text": "Returns the current selected values from the combo box",
                     "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves by returning the autocomplete value."
+                            "text": "Promise that resolves with the array of selected values"
                         }]
                 }
             },
@@ -458,10 +818,13 @@ export class VdsBasicComboBox {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the selected options and resets the value of the autocomplete.",
+                    "text": "Clears all selected options and resets the combo box value",
                     "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the clearing operation is complete."
+                            "text": "Promise that resolves when the clearing operation is complete"
                         }]
                 }
             }
@@ -475,4 +838,3 @@ export class VdsBasicComboBox {
             }];
     }
 }
-//# sourceMappingURL=vds-basic-combo-box.js.map