@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/ComboBox.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -17,8 +18,8 @@ import type List from "./List.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import "./ComboBoxItemGroup.js";
 import type ComboBoxFilter from "./types/ComboBoxFilter.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type { InputEventDetail } from "./Input.js";
+import type { ListItemBaseClickEventDetail } from "./ListItemBase.js";
 import type InputComposition from "./features/InputComposition.js";
 /**
  * Interface for components that may be slotted inside a `ui5-combobox`
@@ -27,12 +28,16 @@ import type InputComposition from "./features/InputComposition.js";
 interface IComboBoxItem extends UI5Element {
     text?: string;
     headerText?: string;
+    value?: string;
     focused: boolean;
     isGroupItem?: boolean;
     selected?: boolean;
     additionalText?: string;
     _isVisible?: boolean;
     items?: Array<IComboBoxItem>;
+    eventDetails: {
+        click?: ListItemBaseClickEventDetail;
+    };
 }
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
@@ -55,6 +60,32 @@ type ComboBoxSelectionChangeEventDetail = {
  * -  Drop-down arrow - expands\collapses the option list.
  * -  Option list - the list of available options.
  *
+ * ### Working with Values
+ *
+ * The ComboBox offers two ways to work with item selection:
+ *
+ * **1. Display Text Only (using `value`):**
+ * ```html
+ * <ui5-combobox value="Germany">
+ *   <ui5-cb-item text="Germany"></ui5-cb-item>
+ *   <ui5-cb-item text="France"></ui5-cb-item>
+ * </ui5-combobox>
+ * ```
+ * Use this approach when the displayed text is sufficient for your needs.
+ *
+ * **2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**
+ * ```html
+ * <ui5-combobox value="Germany" selected-value="DE">
+ *   <ui5-cb-item text="Germany" value="DE"></ui5-cb-item>
+ *   <ui5-cb-item text="France" value="FR"></ui5-cb-item>
+ * </ui5-combobox>
+ * ```
+ * This is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.
+ * The `selectedValue` property references the `value` property of the selected item.
+ * In forms, the item's `value` (e.g., "DE") will be submitted instead of the display text.
+ *
+ * **Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.
+ *
  * ### Keyboard Handling
  *
  * The `ui5-combobox` provides advanced keyboard handling.
@@ -94,6 +125,26 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      * @public
      */
     value: string;
+    /**
+     * Defines the value of the selected item (references the `value` property of `ui5-cb-item`).
+     *
+     * Use this property to work with unique identifiers (IDs, codes) instead of display text.
+     * When set, the ComboBox finds and selects the item whose `value` property matches this property.
+     *
+     * **Benefits:**
+     * - Select items programmatically by their unique identifier
+     * - Handle items with identical display text but different underlying values
+     * - Submit machine-readable values in forms (the item's `value` is submitted instead of the display text)
+     *
+     * **When to use `selectedValue` vs `value`:**
+     * - **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes "DE", "FR" with display names "Germany", "France")
+     * - Use only the ComboBox `value` property when the display text itself is sufficient for your use case
+     *
+     * @default undefined
+     * @public
+     * @since 2.20.0
+     */
+    selectedValue?: string;
     /**
      * Determines the name by which the component will be identified upon submission in an HTML form.
      *
@@ -231,7 +282,7 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      * Defines the component items.
      * @public
      */
-    items: Array<IComboBoxItem>;
+    items: DefaultSlot<IComboBoxItem>;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
      * The value state message slot should contain only one root element.
@@ -243,13 +294,13 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      * @since 1.0.0-rc.9
      * @public
      */
-    valueStateMessage: Array<HTMLElement>;
+    valueStateMessage: Slot<HTMLElement>;
     /**
      * Defines the icon to be displayed in the input field.
      * @public
      * @since 1.0.0-rc.9
      */
-    icon: Array<IIcon>;
+    icon: Slot<IIcon>;
     _initialRendering: boolean;
     _itemFocused: boolean;
     _autocomplete: boolean;
@@ -258,6 +309,7 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     _lastValue: string;
     _selectedItemText: string;
     _userTypedValue: string;
+    _useSelectedValue: boolean;
     _valueStateLinks: Array<HTMLElement>;
     _composition?: InputComposition;
     static i18nBundle: I18nBundle;
@@ -285,6 +337,7 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     _getItemsList(): List;
     _resetFilter(): void;
     _resetItemVisibility(): void;
+    _arrowMouseDown(e: MouseEvent): void;
     _arrowClick(): void;
     _handleMobileKeydown(e: KeyboardEvent): void;
     _handleMobileInput(e: CustomEvent<InputEventDetail>): void;
@@ -313,6 +366,12 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     _closeRespPopover(e?: Event | null): void;
     _openRespPopover(): void;
     _filterItems(str: string): IComboBoxItem[];
+    /**
+     * Sets the markupText property of an item with highlighted first match.
+     * @param item The ComboBox item to highlight
+     * @private
+     */
+    _highlightItem(item: ComboBoxItem): void;
     _getFirstMatchingItem(current: string): IComboBoxItem | void;
     _applyAtomicValueAndSelection(item: IComboBoxItem, filterValue: string): void;
     _selectMatchingItem(): void;
@@ -349,7 +408,6 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     get valueStateTypeMappings(): ValueStateTypeAnnouncement;
     get shouldOpenValueStateMessagePopover(): boolean;
     get shouldDisplayDefaultValueStateMessage(): boolean;
-    get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}`;
     /**
      * This method is relevant for sap_horizon theme only
      */

package/dist/ComboBox.js

@@ -9,14 +9,13 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone, isAndroid, isMac } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/error.js";
@@ -28,6 +27,7 @@ import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsF
 import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, isCtrlAltF8, } from "@ui5/webcomponents-base/dist/Keys.js";
 import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
 import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import * as Filters from "./Filters.js";
 import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, COMBOBOX_AVAILABLE_OPTIONS, COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
@@ -43,7 +43,6 @@ import "./ComboBoxItem.js";
 import "./ComboBoxItemGroup.js";
 // eslint-disable-next-line
 import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 const SKIP_ITEMS_SIZE = 10;
 var ValueStateIconMapping;
 (function (ValueStateIconMapping) {
@@ -68,6 +67,32 @@ var ValueStateIconMapping;
  * -  Drop-down arrow - expands\collapses the option list.
  * -  Option list - the list of available options.
  *
+ * ### Working with Values
+ *
+ * The ComboBox offers two ways to work with item selection:
+ *
+ * **1. Display Text Only (using `value`):**
+ * ```html
+ * <ui5-combobox value="Germany">
+ *   <ui5-cb-item text="Germany"></ui5-cb-item>
+ *   <ui5-cb-item text="France"></ui5-cb-item>
+ * </ui5-combobox>
+ * ```
+ * Use this approach when the displayed text is sufficient for your needs.
+ *
+ * **2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**
+ * ```html
+ * <ui5-combobox value="Germany" selected-value="DE">
+ *   <ui5-cb-item text="Germany" value="DE"></ui5-cb-item>
+ *   <ui5-cb-item text="France" value="FR"></ui5-cb-item>
+ * </ui5-combobox>
+ * ```
+ * This is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.
+ * The `selectedValue` property references the `value` property of the selected item.
+ * In forms, the item's `value` (e.g., "DE") will be submitted instead of the display text.
+ *
+ * **Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.
+ *
  * ### Keyboard Handling
  *
  * The `ui5-combobox` provides advanced keyboard handling.
@@ -102,6 +127,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.getFocusDomRefAsync();
     }
     get formFormattedValue() {
+        // Find the selected item
+        const selectedItem = this._getItems().find(item => item.selected && !item.isGroupItem);
+        // If selected item has a value property, return it (like Select does)
+        if (selectedItem && selectedItem.value !== undefined) {
+            return selectedItem.value;
+        }
+        // Fallback to display text (backward compatibility)
         return this.value;
     }
     constructor() {
@@ -224,6 +256,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._selectionPerformed = false;
         this._selectedItemText = "";
         this._userTypedValue = "";
+        this._useSelectedValue = false;
         this._valueStateLinks = [];
         // when an initial value is set it should be considered as a _lastValue
         this._lastValue = this.getAttribute("value") || "";
@@ -249,9 +282,29 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         else {
             this.valueStateOpen = false;
         }
+        if (this.selectedValue) {
+            this._useSelectedValue = true;
+        }
+        // Highlight filtered items
+        this._filteredItems.forEach(item => {
+            if (!item) {
+                return;
+            }
+            if (isInstanceOfComboBoxItemGroup(item)) {
+                // For grouped items, highlight each item in the group
+                item.items.forEach(nestedItem => {
+                    if (nestedItem) {
+                        this._highlightItem(nestedItem);
+                    }
+                });
+            }
+            else {
+                this._highlightItem(item);
+            }
+        });
         this._selectMatchingItem();
         this._initialRendering = false;
-        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
@@ -380,8 +433,11 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             item._isVisible = false;
         });
     }
-    _arrowClick() {
+    _arrowMouseDown(e) {
+        e.preventDefault();
         this.inner.focus();
+    }
+    _arrowClick() {
         this._resetFilter();
         if (isPhone() && this.value && !this._lastValue) {
             this._lastValue = this.value;
@@ -486,9 +542,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (this.focused && isOpen && (isUp(e) || isPageUp(e) || isPageDown(e))) {
             return;
         }
-        if (allItems.length - 1 === indexOfItem && isDown(e)) {
-            return;
-        }
         this._isKeyNavigation = true;
         if (e.key === "ArrowDown"
             || e.key === "ArrowUp"
@@ -511,12 +564,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (this.open) {
             this._itemFocused = true;
             this.value = isGroupItem ? "" : currentItem.text;
+            this.selectedValue = isGroupItem ? undefined : currentItem.value;
             this.focused = false;
             currentItem.focused = true;
         }
         else {
             this.focused = true;
             this.value = isGroupItem ? nextItem.text : currentItem.text;
+            this.selectedValue = currentItem.value;
             currentItem.focused = false;
         }
         this._announceSelectedItem(indexOfItem);
@@ -540,7 +595,15 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (this.focused && indexOfItem === -1 && isOpen) {
             this.focused = false;
         }
-        this._handleItemNavigation(e, ++indexOfItem, true /* isForward */);
+        const allItems = this._getItems();
+        const currentItem = allItems[indexOfItem];
+        const isLastItem = indexOfItem === allItems.length - 1;
+        // We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
+        if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
+            return;
+        }
+        const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
+        this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
     }
     _handleArrowUp(e, indexOfItem) {
         const isOpen = this.open;
@@ -751,6 +814,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         });
         return [...filteredItemGroups, ...filteredItems];
     }
+    /**
+     * Sets the markupText property of an item with highlighted first match.
+     * @param item The ComboBox item to highlight
+     * @private
+     */
+    _highlightItem(item) {
+        item.markupText = generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue);
+    }
     _getFirstMatchingItem(current) {
         const allItems = this._getItems();
         const currentlyFocusedItem = allItems.find(item => item.focused === true);
@@ -760,19 +831,32 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         const matchingItems = this._startsWithMatchingItems(current);
         if (matchingItems.length) {
-            const exactMatch = matchingItems.find(item => item.text === current);
+            let exactMatch;
+            if (this._useSelectedValue) {
+                exactMatch = matchingItems.find(item => item.value === (currentlyFocusedItem?.value || this.selectedValue) && item.text?.toLowerCase() === current.toLowerCase());
+            }
+            else {
+                exactMatch = matchingItems.find(item => item.text?.toLowerCase() === current.toLowerCase());
+            }
             return exactMatch ?? matchingItems[0];
         }
     }
     _applyAtomicValueAndSelection(item, filterValue) {
         const value = (item && item.text) || "";
         this.inner.value = value;
-        this.inner.setSelectionRange(filterValue.length, value.length);
+        // select the whole value if it doesn't start with the filterValue, otherwise select only the autocompleted part
+        const startsWithFilter = value.toLowerCase().startsWith(filterValue.toLowerCase());
+        const selectionStart = startsWithFilter ? filterValue.length : 0;
+        this.inner.setSelectionRange(selectionStart, value.length);
         this.value = value;
+        if (this._useSelectedValue) {
+            this.selectedValue = item.value;
+        }
     }
     _selectMatchingItem() {
         const currentlyFocusedItem = this.items.find(item => item.focused);
         const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+        const valueToMatch = currentlyFocusedItem?.value ?? this.selectedValue;
         let itemToBeSelected;
         let previouslySelectedItem;
         // Find previously selected item
@@ -791,9 +875,27 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         });
         this._filteredItems.forEach(item => {
             if (!shouldSelectionBeCleared && !itemToBeSelected) {
-                itemToBeSelected = ((!item.isGroupItem && (item.text === this.value)) ? item : item?.items?.find(i => i.text === this.value));
+                if (isInstanceOfComboBoxItemGroup(item)) {
+                    if (this._useSelectedValue) {
+                        itemToBeSelected = item.items.find(i => i.value === valueToMatch && (this.value === "" || i.text?.toLowerCase() === this.value.toLowerCase()));
+                    }
+                    else {
+                        itemToBeSelected = item.items?.find(i => i.text?.toLowerCase() === this.value.toLowerCase());
+                    }
+                }
+                else {
+                    if (this._useSelectedValue) {
+                        itemToBeSelected = this.items.find(i => i.value === valueToMatch && (this.value === "" || i.text?.toLowerCase() === this.value.toLowerCase()));
+                        return;
+                    }
+                    itemToBeSelected = item.text?.toLowerCase() === this.value.toLowerCase() ? item : undefined;
+                }
             }
         });
+        // When selectedValue matched an item but value is empty (initial render), populate value from the item's text
+        if (itemToBeSelected && this._initialRendering && this.value === "") {
+            this.value = itemToBeSelected.text || "";
+        }
         this._filteredItems = this._filteredItems.map(item => {
             if (!isInstanceOfComboBoxItemGroup(item)) {
                 item.selected = item === itemToBeSelected;
@@ -804,6 +906,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             });
             return item;
         });
+        if (!itemToBeSelected && this._useSelectedValue) {
+            this.selectedValue = undefined;
+        }
+        else {
+            this.selectedValue = itemToBeSelected?.value;
+        }
         const noUserInteraction = !this.focused && !this._isKeyNavigation && !this._selectionPerformed && !this._iconPressed;
         // Skip firing "selection-change" event if this is initial rendering or if there has been no user interaction yet
         if (this._initialRendering || noUserInteraction) {
@@ -836,6 +944,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _itemMousedown(e) {
         e.preventDefault();
+        const target = e.target;
+        const listItem = target.closest("[ui5-cb-item], [ui5-cb-item-group]");
+        if (listItem) {
+            this._clearFocus();
+            listItem.focused = true;
+        }
     }
     _selectItem(e) {
         const item = e.detail.item;
@@ -848,6 +962,19 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             return this._closeRespPopover();
         }
         this.value = this._selectedItemText;
+        // On first item select the _useSelectedValue is still false.
+        // In case the item has a value property, we set the _useSelectedValue to true to start working with the value instead with the text.
+        if (!this._useSelectedValue && item.value !== undefined) {
+            this._useSelectedValue = true;
+        }
+        // Always set selectedValue when the item has a value property, regardless of _useSelectedValue state
+        if (item.value !== undefined) {
+            this.selectedValue = item.value;
+        }
+        else if (this._useSelectedValue) {
+            // Only clear selectedValue if we were using it before
+            this.selectedValue = undefined;
+        }
         if (!item.selected) {
             this.fireDecoratorEvent("selection-change", {
                 item,
@@ -878,10 +1005,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _clear() {
         const selectedItem = this.items.find(item => item.selected);
-        if (selectedItem?.text === this.value) {
+        if (selectedItem?.text?.toLowerCase() === this.value.toLowerCase()) {
             this.fireDecoratorEvent("change");
         }
         this.value = "";
+        if (this._useSelectedValue) {
+            this.selectedValue = undefined;
+        }
         this.fireDecoratorEvent("input");
         if (this._isPhone) {
             this._lastValue = "";
@@ -952,7 +1082,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     get _headerTitleText() {
-        return ComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+        return getAssociatedLabelForTexts(this) || ComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _iconAccessibleNameText() {
         return ComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
@@ -1028,9 +1158,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get shouldDisplayDefaultValueStateMessage() {
         return !this.valueStateMessage.length && this.hasValueStateText;
     }
-    get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
-    }
     /**
      * This method is relevant for sap_horizon theme only
      */
@@ -1124,6 +1251,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], ComboBox.prototype, "selectedValue", void 0);
 __decorate([
     property()
 ], ComboBox.prototype, "name", void 0);
@@ -1170,7 +1300,7 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], ComboBox.prototype, "_iconPressed", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], ComboBox.prototype, "_filteredItems", void 0);
 __decorate([
     property({ type: Number, noAttribute: true })
@@ -1188,7 +1318,7 @@ __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "_handleLinkNavigation", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], ComboBox.prototype, "_linksListenersArray", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })