@smart-webcomponents-angular/combobox 19.0.8 → 25.0.0

package/fesm2020/smart-webcomponents-angular-combobox.mjs

@@ -44,6 +44,13 @@ class BaseElement {
     focus(options) {
         this.nativeElement.focus(options);
     }
+    /** @description Sets or gets the license.  */
+    get license() {
+        return this.nativeElement ? this.nativeElement.license : undefined;
+    }
+    set license(value) {
+        this.nativeElement ? this.nativeElement.license = value : undefined;
+    }
     /** @description Sets or gets the language. Used in conjunction with the property messages.  */
     get locale() {
         return this.nativeElement ? this.nativeElement.locale : undefined;
@@ -81,7 +88,7 @@ class BaseElement {
     }
 }
 BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
+BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
@@ -92,6 +99,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Output
             }], onDetach: [{
                 type: Output
+            }], license: [{
+                type: Input
             }], locale: [{
                 type: Input
             }], localizeFormatFunction: [{
@@ -103,7 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
             }], theme: [{
                 type: Input
             }] } });
-const Smart = window.Smart;
+let Smart;
+if (typeof window !== "undefined") {
+    Smart = window.Smart;
+}
 
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -124,7 +136,7 @@ class ComboBoxComponent extends BaseElement {
         * The registered callback function called when a blur event occurs on the form elements.
         */
         this._onTouched = () => { };
-        /** @description This event is triggered when the selection is changed.
+        /** @description This event is triggered whenever the user changes the current selection, such as highlighting different text or selecting a new item in a list. It allows you to detect and respond to updates in the selected content or options within the interface.
         *  @param event. The custom event. 	Custom event was created with: event.detail(	addedItems, 	disabled, 	index, 	label, 	removedItems, 	selected, 	value)
         *   addedItems - An array of List items that have been selected.
         *   disabled - A flag indicating whether or not the item that caused the change event is disabled.
@@ -135,13 +147,13 @@ class ComboBoxComponent extends BaseElement {
         *   value - The value of the List item that triggered the event.
         */
         this.onChange = new EventEmitter();
-        /** @description This event is triggered when the drop down list is closed.
+        /** @description This event is triggered when the drop-down list is closed, either by the user selecting an option or by clicking outside the menu. It occurs after the drop-down menu is no longer visible, allowing you to perform actions in response to the menu's closure.
         *  @param event. The custom event. 	*/
         this.onClose = new EventEmitter();
-        /** @description This event is triggered when the drop down list is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.
+        /** @description This event is triggered right before the dropdown list is about to close, providing an opportunity to intervene. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation, display a confirmation dialog, or execute custom logic before the dropdown is closed.
         *  @param event. The custom event. 	*/
         this.onClosing = new EventEmitter();
-        /** @description This event is triggered when an item is clicked.
+        /** @description This event is triggered whenever a user clicks on a specific item, allowing you to execute custom actions in response to the user's selection. The event provides context about the clicked item, enabling you to access its properties or perform related updates within your application.
         *  @param event. The custom event. 	Custom event was created with: event.detail(	disabled, 	index, 	label, 	selected, 	value)
         *   disabled - Indicates whether the List item that was clicked is disabled or not.
         *   index - Indicates the index of the List item that was clicked.
@@ -150,29 +162,29 @@ class ComboBoxComponent extends BaseElement {
         *   value - The value of the List item that was clicked.
         */
         this.onItemClick = new EventEmitter();
-        /** @description This event is triggered when the drop down list is opened.
+        /** @description This event is triggered whenever the dropdown list becomes visible to the user, such as when the user clicks or interacts with the control to expand and display the list of available options. Use this event to execute custom logic when the dropdown menu is opened.
         *  @param event. The custom event. 	*/
         this.onOpen = new EventEmitter();
-        /** @description This event is triggered when the drop down list is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.
+        /** @description This event is triggered immediately before the dropdown list is displayed to the user. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This allows you to implement custom logic to conditionally allow or block the opening of the dropdown, such as validating conditions or managing user permissions before the list is shown.
         *  @param event. The custom event. 	*/
         this.onOpening = new EventEmitter();
-        /** @description This event is triggered when user starts resizing the drop down.
+        /** @description This event is triggered when the user initiates the resizing action on the dropdown component, such as clicking and dragging a resize handle. It allows developers to detect the exact moment when a resize operation on the dropdown begins.
         *  @param event. The custom event. 	Custom event was created with: event.detail(	position)
         *   position - An object containing the current left and top positions of the drop down.
         */
         this.onResizeStart = new EventEmitter();
-        /** @description This event is triggered when the resizing of the drop down is finished.
+        /** @description This event is triggered after the user has completed resizing the dropdown menu, signaling that the resizing action has ended and the new dimensions have been set.
         *  @param event. The custom event. 	Custom event was created with: event.detail(	position)
         *   position - An object containing the current left and top positions of the drop down.
         */
         this.onResizeEnd = new EventEmitter();
-        /** @description This event is triggered when user scrolls to the end of the dropDown list.
+        /** @description This event is triggered when the user scrolls to the bottom of the dropdown list, indicating that all available options have been displayed. It can be used to detect when additional data should be loaded or when no further options remain in the dropdown.
         *  @param event. The custom event. 	*/
         this.onScrollBottomReached = new EventEmitter();
-        /** @description This event is triggered when user scrolls to the start of the dropDown list.
+        /** @description This event is triggered when the user scrolls to the very beginning (top) of the dropdown list, indicating that no more items are available above the current view.
         *  @param event. The custom event. 	*/
         this.onScrollTopReached = new EventEmitter();
-        /** @description This event is triggered when a token item(pill) has been clicked. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.
+        /** @description This event is triggered when a token item (also known as a 'pill') is clicked by the user. By handling this event, developers have the opportunity to intercept the default action that would normally occur when the token is clicked—such as opening a dropdown or performing another related operation. To prevent the default behavior from executing, call event.preventDefault() within your event handler function."
         *  @param event. The custom event. 	*/
         this.onTokenClick = new EventEmitter();
         this._initialChange = true;
@@ -188,455 +200,462 @@ class ComboBoxComponent extends BaseElement {
         }
         return this.nativeElement;
     }
-    /** @description Used only when dropDownOpenMode is set to 'auto'. Determines the delay before the opened drop down closes if the pointer is not over the element. */
+    /** @description This property is applicable only when dropDownOpenMode is set to 'auto'. It specifies the amount of time (in milliseconds) the dropdown will remain open after the pointer leaves the element, before it automatically closes. If the pointer is not hovering over the dropdown or its trigger element, the dropdown will close after this delay. */
     get autoCloseDelay() {
         return this.nativeElement ? this.nativeElement.autoCloseDelay : undefined;
     }
     set autoCloseDelay(value) {
         this.nativeElement ? this.nativeElement.autoCloseDelay = value : undefined;
     }
-    /** @description Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input. */
+    /** @description Specifies the autocomplete mode for the input field. The selected mode defines how the component filters and displays items from the dataSource, showing only those entries that match the user's input according to the chosen matching strategy. This setting directly impacts the suggestions presented to the user as they type. */
     get autoComplete() {
         return this.nativeElement ? this.nativeElement.autoComplete : undefined;
     }
     set autoComplete(value) {
         this.nativeElement ? this.nativeElement.autoComplete = value : undefined;
     }
-    /** @description Determines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds. */
+    /** @description Specifies the amount of time, in milliseconds, to wait after the user input before displaying the dropdown list of autocomplete suggestions. This delay helps control how quickly the suggestions appear, allowing for smoother user experience and reducing unnecessary searches as the user types. */
     get autoCompleteDelay() {
         return this.nativeElement ? this.nativeElement.autoCompleteDelay : undefined;
     }
     set autoCompleteDelay(value) {
         this.nativeElement ? this.nativeElement.autoCompleteDelay = value : undefined;
     }
-    /** @description Allows the user to define a custom key name ( or multiple key names) to open that popup with. */
+    /** @description Enables users to specify one or more custom key names that will trigger the opening of the popup when pressed. This allows for flexible keyboard shortcuts tailored to user preferences or application requirements. */
     get autoOpenShortcutKey() {
         return this.nativeElement ? this.nativeElement.autoOpenShortcutKey : undefined;
     }
     set autoOpenShortcutKey(value) {
         this.nativeElement ? this.nativeElement.autoOpenShortcutKey = value : undefined;
     }
-    /** @description Determines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described. */
+    /** @description Specifies the source of data to populate the ComboBox. The dataSource can be provided in several formats:- An array of strings or numbers, where each item becomes a selectable option in the ComboBox.- An array of objects, where each object represents a list item and its properties define the displayed information and associated value (e.g., label for display text, value for the underlying value, and optionally group to categorize items).- A callback function that returns an array of items in either of the above formats, enabling dynamic or asynchronous data loading.This flexible dataSource configuration allows the ComboBox to support simple lists, categorized lists, or dynamically retrieved data. */
     get dataSource() {
         return this.nativeElement ? this.nativeElement.dataSource : undefined;
     }
     set dataSource(value) {
         this.nativeElement ? this.nativeElement.dataSource = value : undefined;
     }
-    /** @description Enables or disables the combo box. */
+    /** @description Controls whether the combo box is active or inactive. When enabled, users can interact with the combo box to select or enter a value. When disabled, the combo box is non-interactive and appears grayed out, preventing any user input or selection. */
     get disabled() {
         return this.nativeElement ? this.nativeElement.disabled : undefined;
     }
     set disabled(value) {
         this.nativeElement ? this.nativeElement.disabled = value : undefined;
     }
-    /** @description Determines whether an indicator will appear during filtering and remote item loading. */
+    /** @description Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data locally or when retrieving items from a remote source. This helps inform users that a filtering operation or data fetch is in progress. */
     get displayLoadingIndicator() {
         return this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;
     }
     set displayLoadingIndicator(value) {
         this.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;
     }
-    /** @description Sets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property. */
+    /** @description Sets or retrieves the displayMember property. The displayMember property defines the specific field name within each data object in the collection provided by the 'dataSource' property. This field's value is used for displaying items in the UI component, allowing you to control which attribute of your data objects is shown to the user. */
     get displayMember() {
         return this.nativeElement ? this.nativeElement.displayMember : undefined;
     }
     set displayMember(value) {
         this.nativeElement ? this.nativeElement.displayMember = value : undefined;
     }
-    /** @description Determines the drop down parent. The expected value is CSS Selector, ID or 'body'. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the popup will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place. */
+    /** @description Specifies the parent container for the dropdown element. The dropDownAppendTo property accepts a CSS selector string, an element's ID, the string value 'body', or a direct reference to an HTML element. By default, the dropdown is appended to its original parent in the DOM. However, if one of the containing elements has CSS properties (such as overflow: hidden) that restrict the dropdown's visibility, you can set this property—commonly to 'body'—to append the dropdown directly to the <body> element and ensure it displays properly.Possible values:- A CSS selector string (e.g., '.container' or '#mainDiv')- The string 'body'- A direct reference to an existing HTML element- An element's ID (as a string)- null (to reset and move the dropdown back to its original parent)This property improves compatibility in layouts with restricted overflow by allowing the dropdown to be rendered in a container of your choosing. Resetting dropDownAppendTo to null restores the dropdown to its initial placement within the DOM. */
     get dropDownAppendTo() {
         return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
     }
     set dropDownAppendTo(value) {
         this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
     }
-    /** @description Determines the position of the drop down button. */
+    /** @description Specifies the location of the dropdown button relative to its associated input field or container. Possible positions may include "left," "right," "top," or "bottom," allowing developers to control where the dropdown button appears in the user interface. */
     get dropDownButtonPosition() {
         return this.nativeElement ? this.nativeElement.dropDownButtonPosition : undefined;
     }
     set dropDownButtonPosition(value) {
         this.nativeElement ? this.nativeElement.dropDownButtonPosition = value : undefined;
     }
-    /** @description Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable. */
+    /** @description Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. If a specific value is provided, it will override the CSS variable and set the dropdown height explicitly. */
     get dropDownHeight() {
         return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
     }
     set dropDownHeight(value) {
         this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
     }
-    /** @description Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable. */
+    /** @description Specifies the maximum height of the dropdown menu. By default, this value is set to an empty string, which means the dropdown's max-height will be controlled by a CSS variable instead of an explicit value. If you provide a specific value (e.g., "300px" or "50vh"), it will override the default CSS variable and directly set the maximum height of the dropdown. */
     get dropDownMaxHeight() {
         return this.nativeElement ? this.nativeElement.dropDownMaxHeight : undefined;
     }
     set dropDownMaxHeight(value) {
         this.nativeElement ? this.nativeElement.dropDownMaxHeight = value : undefined;
     }
-    /** @description Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable. */
+    /** @description Defines the maximum width of the dropdown menu. By default, this value is set to an empty string, which means the dropdown's maximum width will be determined by a corresponding CSS variable. If a specific value is provided (e.g., "300px" or "50%"), it will override the CSS variable and directly set the maximum width of the dropdown. */
     get dropDownMaxWidth() {
         return this.nativeElement ? this.nativeElement.dropDownMaxWidth : undefined;
     }
     set dropDownMaxWidth(value) {
         this.nativeElement ? this.nativeElement.dropDownMaxWidth = value : undefined;
     }
-    /** @description Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable. */
+    /** @description Defines the minimum height of the dropdown component. By default, this property is set to an empty string, which means the dropdown's minimum height is determined by a corresponding CSS variable. If a specific value is provided for this property, it will override the CSS variable and explicitly set the dropdown's minimum height. */
     get dropDownMinHeight() {
         return this.nativeElement ? this.nativeElement.dropDownMinHeight : undefined;
     }
     set dropDownMinHeight(value) {
         this.nativeElement ? this.nativeElement.dropDownMinHeight = value : undefined;
     }
-    /** @description Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable. */
+    /** @description Specifies the minimum width of the dropdown component. By default, this property is set to an empty string (""). When left unset, the dropdown’s minimum width is determined by a CSS variable, allowing for flexible styling through external stylesheets. To override the CSS value, assign a specific width value (e.g., "200px" or "10rem") to this property. */
     get dropDownMinWidth() {
         return this.nativeElement ? this.nativeElement.dropDownMinWidth : undefined;
     }
     set dropDownMinWidth(value) {
         this.nativeElement ? this.nativeElement.dropDownMinWidth = value : undefined;
     }
-    /** @description Determines how the drop down is going to open. */
+    /** @description Specifies the direction or animation in which the dropdown menu will appear when activated, such as opening upwards, downwards, or with a specific transition effect. */
     get dropDownOpenMode() {
         return this.nativeElement ? this.nativeElement.dropDownOpenMode : undefined;
     }
     set dropDownOpenMode(value) {
         this.nativeElement ? this.nativeElement.dropDownOpenMode = value : undefined;
     }
-    /** @description If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the popup will will target the overlay and not the DOM. */
+    /** @description If this property is enabled, opening the element's dropdown will insert a transparent overlay between the dropdown and the rest of the document. This overlay covers the entire viewport except for the dropdown itself, capturing all click events outside the dropdown. As a result, any clicks outside the popup will interact with the overlay instead of other elements on the page, allowing you to reliably detect and handle outside clicks (such as to close the dropdown) without unintentionally triggering other DOM elements. */
     get dropDownOverlay() {
         return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
     }
     set dropDownOverlay(value) {
         this.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;
     }
-    /** @description Determines the placeholder for the drop down, displayed when there are no items in it. */
+    /** @description Specifies the text or content to be shown in the dropdown as a placeholder when the dropdown contains no selectable items. This placeholder provides guidance or context to the user, indicating that there are currently no available options. */
     get dropDownPlaceholder() {
         return this.nativeElement ? this.nativeElement.dropDownPlaceholder : undefined;
     }
     set dropDownPlaceholder(value) {
         this.nativeElement ? this.nativeElement.dropDownPlaceholder = value : undefined;
     }
-    /** @description Determines the position of the drop down when opened. */
+    /** @description Specifies the placement of the dropdown menu relative to its trigger element when opened (e.g., above, below, left, or right). This setting controls where the dropdown appears on the screen in relation to the element that activates it. */
     get dropDownPosition() {
         return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
     }
     set dropDownPosition(value) {
         this.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;
     }
-    /** @description Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable. */
+    /** @description Specifies the width of the dropdown menu. By default, this property is set to an empty string, allowing the dropdown's width to be determined by the associated CSS variable (typically via custom properties or theme settings). If a value is provided, it overrides the CSS variable and directly sets the dropdown's width. */
     get dropDownWidth() {
         return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
     }
     set dropDownWidth(value) {
         this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
     }
-    /** @description Determines the behavior of the element when Escape key is pressed. */
+    /** @description Specifies how the element should respond when the Escape key is pressed by the user. This property allows you to define actions such as closing a modal, dismissing a dialog, or triggering a custom event when the Escape key is detected while the element is focused or active. */
     get escKeyMode() {
         return this.nativeElement ? this.nativeElement.escKeyMode : undefined;
     }
     set escKeyMode(value) {
         this.nativeElement ? this.nativeElement.escKeyMode = value : undefined;
     }
-    /** @description Determines whether filtering is enabled. */
+    /** @description Specifies whether the filtering feature is active. When set to true, users can apply filters to narrow down displayed data; when false, filtering options are disabled and all data is shown without restriction. */
     get filterable() {
         return this.nativeElement ? this.nativeElement.filterable : undefined;
     }
     set filterable(value) {
         this.nativeElement ? this.nativeElement.filterable = value : undefined;
     }
-    /** @description Determines the placeholder for the drop down list filter input field. */
+    /** @description Specifies the placeholder text displayed inside the dropdown list’s filter input field, guiding users on what to enter when searching or filtering options. */
     get filterInputPlaceholder() {
         return this.nativeElement ? this.nativeElement.filterInputPlaceholder : undefined;
     }
     set filterInputPlaceholder(value) {
         this.nativeElement ? this.nativeElement.filterInputPlaceholder = value : undefined;
     }
-    /** @description Determines the filtering mode of the Combo box. */
+    /** @description Specifies the filtering behavior for the Combo Box, controlling how user input is matched against the available options (e.g., contains, starts with, or exact match). This property determines which options are displayed in the dropdown list as the user types. */
     get filterMode() {
         return this.nativeElement ? this.nativeElement.filterMode : undefined;
     }
     set filterMode(value) {
         this.nativeElement ? this.nativeElement.filterMode = value : undefined;
     }
-    /** @description If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups. */
+    /** @description When enabled, this option automatically groups the items based on the first letter of each item's value or label. Note: This grouping feature is only available if the dataSource does not already include predefined groups. If the dataSource is already grouped, this setting will have no effect. */
     get grouped() {
         return this.nativeElement ? this.nativeElement.grouped : undefined;
     }
     set grouped(value) {
         this.nativeElement ? this.nativeElement.grouped = value : undefined;
     }
-    /** @description Determines which attribute from the dataSource object will be used as the group member for the items. If not set, by default 'group' property is used from the source object. groupMember is especially usefull when loading the data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used to group the items. */
+    /** @description Specifies which attribute of the dataSource object should be used to group items in the ListBox. By default, if this property (groupMember) is not set, the ListBox will use the 'group' property from each dataSource item to organize groups. This property is particularly useful when loading data from a JSON file, allowing you to designate a specific property from your data objects to determine the grouping of items—especially if your JSON structure uses a different property name for grouping. */
     get groupMember() {
         return this.nativeElement ? this.nativeElement.groupMember : undefined;
     }
     set groupMember(value) {
         this.nativeElement ? this.nativeElement.groupMember = value : undefined;
     }
-    /** @description Sets additional helper text below the element. The hint is visible only when the element is focused. */
+    /** @description Displays supplementary helper text beneath the element. This hint is visible exclusively when the element is in focus, providing contextual guidance to users as they interact with the field. */
     get hint() {
         return this.nativeElement ? this.nativeElement.hint : undefined;
     }
     set hint(value) {
         this.nativeElement ? this.nativeElement.hint = value : undefined;
     }
-    /** @description Determines the visibility of the horizontal Scroll bar inside the drop down. */
+    /** @description Controls whether the horizontal scroll bar is displayed within the dropdown menu when the content exceeds the available width. */
     get horizontalScrollBarVisibility() {
         return this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;
     }
     set horizontalScrollBarVisibility(value) {
         this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;
     }
-    /** @description Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input. */
+    /** @description Represents the property name of a List item whose value will be displayed in the input field when a ListItem is selected. This allows developers to control which property of each item is shown in the input, such as displaying the item's value instead of its label. By default, the label property is used for display. This option is useful when you want to customize the displayed content, for example, to show a unique identifier or value rather than the descriptive label. */
     get inputMember() {
         return this.nativeElement ? this.nativeElement.inputMember : undefined;
     }
     set inputMember(value) {
         this.nativeElement ? this.nativeElement.inputMember = value : undefined;
     }
-    /** @description Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc. */
+    /** @description Specifies the expected type of information for the input field and informs the browser about the nature of the data to be entered. This guidance allows user agents (such as browsers and password managers) to determine if they can provide automated assistance—like autofilling relevant values—when the element is used in a form. The value assigned to this property directly maps to the standard HTML autocomplete attribute. Common values include 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization), 'email', 'street-address', and many others, as specified by the HTML standard. Using an appropriate value improves user experience, enhances accessibility, and helps maintain privacy and security standards within web forms. */
     get inputPurpose() {
         return this.nativeElement ? this.nativeElement.inputPurpose : undefined;
     }
     set inputPurpose(value) {
         this.nativeElement ? this.nativeElement.inputPurpose = value : undefined;
     }
-    /** @description IncrementalSearchDelay property specifies the time-interval in milliseconds until the previous search query is cleared. The timer starts when the user stops typing. A new query can be started only when the delay has passed. */
+    /** @description The 'IncrementalSearchDelay' property defines the duration, in milliseconds, to wait after the user stops typing before clearing the previous search query. This timer begins as soon as the user finishes typing. During this delay period, no new search query will be initiated. Only after the specified delay has elapsed will the current search input be cleared, allowing a new search query to be started. This helps to optimize performance and user experience by preventing unnecessary or premature queries while the user is still entering their search terms. */
     get incrementalSearchDelay() {
         return this.nativeElement ? this.nativeElement.incrementalSearchDelay : undefined;
     }
     set incrementalSearchDelay(value) {
         this.nativeElement ? this.nativeElement.incrementalSearchDelay = value : undefined;
     }
-    /** @description Sets ot gets the mode of the incremental search mode. Incremental search is enabled by default. Typing while the drop down is focused starts the incremental search. */
+    /** @description Configures or retrieves the current mode of incremental search. By default, incremental search is enabled, allowing users to type while the dropdown is focused to quickly filter and highlight matching options. Modifying this setting controls how user input is processed for searching within the dropdown list. */
     get incrementalSearchMode() {
         return this.nativeElement ? this.nativeElement.incrementalSearchMode : undefined;
     }
     set incrementalSearchMode(value) {
         this.nativeElement ? this.nativeElement.incrementalSearchMode = value : undefined;
     }
-    /** @description Sets the height for all list items. Used only when virtualization is enabled. */
+    /** @description Specifies the height (in pixels) for each list item when rendering the list. This property is only applicable when list virtualization is enabled, as it helps optimize rendering performance by allowing the component to calculate and render only the visible items. */
     get itemHeight() {
         return this.nativeElement ? this.nativeElement.itemHeight : undefined;
     }
     set itemHeight(value) {
         this.nativeElement ? this.nativeElement.itemHeight = value : undefined;
     }
-    /** @description Determines the item width measuring algorithm. */
+    /** @description Specifies the algorithm used to calculate the width of each item. This setting determines how the width of an item is measured, such as using the item's intrinsic content size, a fixed value, or a percentage of the container. Adjust this parameter to control how item widths are determined within the layout. */
     get itemMeasureMode() {
         return this.nativeElement ? this.nativeElement.itemMeasureMode : undefined;
     }
     set itemMeasureMode(value) {
         this.nativeElement ? this.nativeElement.itemMeasureMode = value : undefined;
     }
-    /** @description A getter that returns an array of all List items inside the drop down. */
+    /** @description A getter method that retrieves and returns an array containing all list ('') elements currently present within the dropdown menu. This allows you to easily access and manipulate every item displayed in the dropdown. */
     get items() {
         return this.nativeElement ? this.nativeElement.items : undefined;
     }
     set items(value) {
         this.nativeElement ? this.nativeElement.items = value : undefined;
     }
-    /** @description The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM.  It's used to set a customize the content of the list items. */
+    /** @description The itemTemplate property is a string that specifies the ID of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of individual list items, allowing developers to control how each item appears when rendered in the list. */
     get itemTemplate() {
         return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
     }
     set itemTemplate(value) {
         this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
     }
-    /** @description Sets a little text label above the element. */
+    /** @description Displays a small text label positioned above the element, typically used to provide context, instructions, or additional information to users. */
     get label() {
         return this.nativeElement ? this.nativeElement.label : undefined;
     }
     set label(value) {
         this.nativeElement ? this.nativeElement.label = value : undefined;
     }
-    /** @description Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom. */
+    /** @description Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at the top or bottom of the component. This text provides users with contextual information or status updates during loading. */
     get loadingIndicatorPlaceholder() {
         return this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;
     }
     set loadingIndicatorPlaceholder(value) {
         this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;
     }
-    /** @description Determines the position of the loading indicator. */
+    /** @description Specifies the exact location on the user interface where the loading indicator will be displayed, such as at the top, center, or bottom of the screen or component. */
     get loadingIndicatorPosition() {
         return this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;
     }
     set loadingIndicatorPosition(value) {
         this.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;
     }
-    /** @description Sets or gets the language. Used in conjunction with the property messages.  */
+    /** @description Sets or retrieves the unlockKey, a unique value required to grant access to the product’s premium features or activate its full functionality. */
+    get unlockKey() {
+        return this.nativeElement ? this.nativeElement.unlockKey : undefined;
+    }
+    set unlockKey(value) {
+        this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
+    }
+    /** @description Specifies or retrieves the current language setting for the component. This property determines which language is used when displaying content from the messages property, allowing for localization and internationalization of displayed messages. Set this property to a supported language code (e.g., "en", "fr") to load the corresponding translations from the messages object. */
     get locale() {
         return this.nativeElement ? this.nativeElement.locale : undefined;
     }
     set locale(value) {
         this.nativeElement ? this.nativeElement.locale = value : undefined;
     }
-    /** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
+    /** @description A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify message text, apply dynamic values, or implement custom formatting logic before the localized messages are delivered to your application. */
     get localizeFormatFunction() {
         return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
     }
     set localizeFormatFunction(value) {
         this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
     }
-    /** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */
+    /** @description Specifies or retrieves an object containing localized string values used within the widget’s user interface. This property enables the customization and translation of UI text for different languages or regions. It is intended to be used together with the locale property, allowing you to easily provide or update localized strings according to the selected locale. */
     get messages() {
         return this.nativeElement ? this.nativeElement.messages : undefined;
     }
     set messages(value) {
         this.nativeElement ? this.nativeElement.messages = value : undefined;
     }
-    /** @description Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality */
+    /** @description Specifies the minimum number of characters a user must enter in the input field before the autocomplete feature is activated and suggestions are displayed. */
     get minLength() {
         return this.nativeElement ? this.nativeElement.minLength : undefined;
     }
     set minLength(value) {
         this.nativeElement ? this.nativeElement.minLength = value : undefined;
     }
-    /** @description Determines the maximum number of characters inside the input. */
+    /** @description Specifies the maximum number of characters that can be entered into the input field. Any additional characters beyond this limit will not be accepted. This helps enforce data validation and consistency for user input. */
     get maxLength() {
         return this.nativeElement ? this.nativeElement.maxLength : undefined;
     }
     set maxLength(value) {
         this.nativeElement ? this.nativeElement.maxLength = value : undefined;
     }
-    /** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */
+    /** @description Sets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when submitting HTML forms, allowing the form data to be organized and accessed by name on the server side. This attribute is essential for grouping form controls and accurately transmitting user input during form submission. */
     get name() {
         return this.nativeElement ? this.nativeElement.name : undefined;
     }
     set name(value) {
         this.nativeElement ? this.nativeElement.name = value : undefined;
     }
-    /** @description Determines whether the popup is opened or closed */
+    /** @description Specifies whether the popup is currently visible (open) or hidden (closed) in the user interface. */
     get opened() {
         return this.nativeElement ? this.nativeElement.opened : undefined;
     }
     set opened(value) {
         this.nativeElement ? this.nativeElement.opened = value : undefined;
     }
-    /** @description Determines the input's placeholder. */
+    /** @description Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or example content to the user. */
     get placeholder() {
         return this.nativeElement ? this.nativeElement.placeholder : undefined;
     }
     set placeholder(value) {
         this.nativeElement ? this.nativeElement.placeholder = value : undefined;
     }
-    /** @description Disables user interaction with the element. */
+    /** @description Prevents any user interactions with the element, including clicking, tapping, selecting, hovering, or focusing. While this is enabled, the element will not respond to mouse, keyboard, or touch events, effectively making it non-interactive for users. */
     get readonly() {
         return this.nativeElement ? this.nativeElement.readonly : undefined;
     }
     set readonly(value) {
         this.nativeElement ? this.nativeElement.readonly = value : undefined;
     }
-    /** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
+    /** @description Specifies or retrieves a value that determines whether the element’s text direction is set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its content are aligned according to RTL formatting, ensuring proper display for locales that use right-to-left scripts. */
     get rightToLeft() {
         return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
     }
     set rightToLeft(value) {
         this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
     }
-    /** @description Determines whether the resize indicator in the bottom right corner of the drop down is visible or not. This property is used in conjunction with resizeMode. */
+    /** @description Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown component. When this property is set to true, users will see a handle allowing them to resize the dropdown area. This property should be used together with the resizeMode property to define both the availability and behavior of the resizing feature. */
     get resizeIndicator() {
         return this.nativeElement ? this.nativeElement.resizeIndicator : undefined;
     }
     set resizeIndicator(value) {
         this.nativeElement ? this.nativeElement.resizeIndicator = value : undefined;
     }
-    /** @description Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down. */
+    /** @description Specifies whether the drop-down menu is resizable by the user. If resizing is enabled, a resize bar will be displayed along the top or bottom edge of the drop-down, allowing users to click and drag to adjust its height. Disabling this option removes the resize bar and prevents any manual resizing of the drop-down component. */
     get resizeMode() {
         return this.nativeElement ? this.nativeElement.resizeMode : undefined;
     }
     set resizeMode(value) {
         this.nativeElement ? this.nativeElement.resizeMode = value : undefined;
     }
-    /** @description Determines what will be displayed in the input. */
+    /** @description Specifies the content or value that will appear within the input field, either as a default value, user-entered data, or dynamically generated content. This setting controls what the user sees and interacts with inside the input element. */
     get selectionDisplayMode() {
         return this.nativeElement ? this.nativeElement.selectionDisplayMode : undefined;
     }
     set selectionDisplayMode(value) {
         this.nativeElement ? this.nativeElement.selectionDisplayMode = value : undefined;
     }
-    /** @description Sets or gets the selected indexes. Selected indexes represents an array of the indexes of the items that should be selected. */
+    /** @description Sets or retrieves the selected indexes. The selected indexes property is an array containing the numeric indexes of the items that are currently selected. Each value in the array corresponds to the position of a selected item within the overall list or collection. Assigning a new array to this property updates the selection state to match the specified indexes; retrieving it returns the current selection as an array of indexes. */
     get selectedIndexes() {
         return this.nativeElement ? this.nativeElement.selectedIndexes : undefined;
     }
     set selectedIndexes(value) {
         this.nativeElement ? this.nativeElement.selectedIndexes = value : undefined;
     }
-    /** @description Sets or gets elected indexes. Selected values represents the values of the items that should be selected. */
+    /** @description   "Sets or retrieves the currently selected indexes. The 'selected' property holds an array of the indices corresponding to the items that are marked as selected. When setting this property, provide an array of indexes to specify which items should be selected. When getting this property, it returns the array of indexes for the currently selected items." */
     get selectedValues() {
         return this.nativeElement ? this.nativeElement.selectedValues : undefined;
     }
     set selectedValues(value) {
         this.nativeElement ? this.nativeElement.selectedValues = value : undefined;
     }
-    /** @description Determines how many items can be selected. */
+    /** @description Specifies the maximum number of items that a user is allowed to select at one time. If this value is set to 1, only single selection is permitted; higher values allow multiple selections up to the defined limit. */
     get selectionMode() {
         return this.nativeElement ? this.nativeElement.selectionMode : undefined;
     }
     set selectionMode(value) {
         this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
     }
-    /** @description Determines whether the items are sorted alphabetically or not */
+    /** @description Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted alphabetically; if false, the original order will be preserved. */
     get sorted() {
         return this.nativeElement ? this.nativeElement.sorted : undefined;
     }
     set sorted(value) {
         this.nativeElement ? this.nativeElement.sorted = value : undefined;
     }
-    /** @description Determines sorting direction - ascending(asc) or descending(desc) */
+    /** @description Specifies the sorting order for data, allowing you to choose between ascending ("asc") for lowest-to-highest or alphabetical A–Z sorting, and descending ("desc") for highest-to-lowest or Z–A sorting. */
     get sortDirection() {
         return this.nativeElement ? this.nativeElement.sortDirection : undefined;
     }
     set sortDirection(value) {
         this.nativeElement ? this.nativeElement.sortDirection = value : undefined;
     }
-    /** @description Determines the theme for the element. Themes define the look of the elements. */
+    /** @description Specifies the visual theme to be applied to the element. The selected theme controls the element’s appearance, including colors, fonts, and other stylistic properties, ensuring a consistent look and feel across the user interface. */
     get theme() {
         return this.nativeElement ? this.nativeElement.theme : undefined;
     }
     set theme(value) {
         this.nativeElement ? this.nativeElement.theme = value : undefined;
     }
-    /** @description Sets a custom content for the tokens when selectionDisplayMode is set to 'tokens'. Tokens are used only for multiple selection. */
+    /** @description Defines the custom content to display within each token when the selectionDisplayMode is set to "tokens". Tokens visually represent selected items in a multi-select interface and are only applicable when multiple selection is enabled. Use this option to customize how each token appears, such as displaying specific text, icons, or additional data for each selected item. */
     get tokenTemplate() {
         return this.nativeElement ? this.nativeElement.tokenTemplate : undefined;
     }
     set tokenTemplate(value) {
         this.nativeElement ? this.nativeElement.tokenTemplate = value : undefined;
     }
-    /** @description If is set to true, the element cannot be focused. */
+    /** @description If set to true, the element will not be able to receive keyboard or mouse focus, making it inaccessible via tab navigation or programmatic focus methods. */
     get unfocusable() {
         return this.nativeElement ? this.nativeElement.unfocusable : undefined;
     }
     set unfocusable(value) {
         this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
     }
-    /** @description Sets or gets the value. */
+    /** @description Provides functionality to retrieve (get) or assign (set) the current value of the property. When used as a getter, it returns the property's current value. When used as a setter, it updates the property with the specified value. */
     get value() {
         return this.nativeElement ? this.nativeElement.value : undefined;
     }
     set value(value) {
         this.nativeElement ? this.nativeElement.value = value : undefined;
     }
-    /** @description Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items. */
+    /** @description Specifies which property of each item object should be used as the value for that item. The value designated by valueMember will be stored in the item's value field. This property functions similarly to groupMember, but is focused on identifying the value rather than the group. valueMember is particularly useful when populating a ListBox from a JSON data source, as it allows you to specify which property of your data objects should serve as the unique value for each item in the ListBox. */
     get valueMember() {
         return this.nativeElement ? this.nativeElement.valueMember : undefined;
     }
     set valueMember(value) {
         this.nativeElement ? this.nativeElement.valueMember = value : undefined;
     }
-    /** @description Determines the visibility of the vertical scroll bar. */
+    /** @description Controls whether the vertical scroll bar is displayed within the content area, allowing users to scroll vertically when the content extends beyond the visible region. */
     get verticalScrollBarVisibility() {
         return this.nativeElement ? this.nativeElement.verticalScrollBarVisibility : undefined;
     }
     set verticalScrollBarVisibility(value) {
         this.nativeElement ? this.nativeElement.verticalScrollBarVisibility = value : undefined;
     }
-    /** @description Determines weather or not Virtualization is used for the Combo box. Virtualization allows a huge amount of items to be loaded to the List box while preserving the performance. For example a milion items can be loaded to the list box. */
+    /** @description Determines whether virtualization is enabled for the ComboBox. When virtualization is enabled, the ComboBox can efficiently display a very large number of items—such as a million—by only rendering the visible items in the ListBox and dynamically loading items as needed. This significantly improves performance and reduces memory usage, especially with large data sets. */
     get virtualized() {
         return this.nativeElement ? this.nativeElement.virtualized : undefined;
     }
     set virtualized(value) {
         this.nativeElement ? this.nativeElement.virtualized = value : undefined;
     }
-    /** @description Appends a ListItem to the end of the list of items inside element.
+    /** @description Appends a new ListItem element to the end of the existing list of items within the specified container element, thereby updating the list to include the newly added item as its last entry.
     * @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.
     * @returns {Node}
   */
@@ -652,7 +671,13 @@ class ComboBoxComponent extends BaseElement {
         const result = await getResultOnRender();
         return result;
     }
-    /** @description Adds a new item(s).
+    appendChildSync(node) {
+        if (this.nativeElement.isRendered) {
+            return this.nativeElement.appendChild(node);
+        }
+        return null;
+    }
+    /** @description Creates and appends one or more new items to the collection or list.
     * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
     */
     add(item) {
@@ -665,7 +690,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Removes all items from the drop down list.
+    /** @description Removes all existing items from the dropdown list, resulting in an empty list with no selectable options displayed to the user.
     */
     clearItems() {
         if (this.nativeElement.isRendered) {
@@ -677,7 +702,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Unselects all items.
+    /** @description Deselects all currently selected items, ensuring that no items remain selected. This action clears any existing selections and resets the selection state.
     */
     clearSelection() {
         if (this.nativeElement.isRendered) {
@@ -689,7 +714,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Closes the dropDown list.
+    /** @description Closes the currently open drop-down list, hiding all available options from view and returning the component to its collapsed state. This action ensures that the drop-down menu is no longer visible to the user.
     */
     close() {
         if (this.nativeElement.isRendered) {
@@ -701,7 +726,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Performs a data bind. This can be used to refresh the data source.
+    /** @description Initiates a data binding process, connecting UI components to the underlying data source. This method refreshes the data source, ensuring that any changes made to the data are reflected in the user interface. It can be used to update displayed information after modifying, adding, or deleting data.
     */
     dataBind() {
         if (this.nativeElement.isRendered) {
@@ -713,7 +738,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Ensures the desired item is visible by scrolling to it.
+    /** @description Scrolls the target item into view within its container, automatically adjusting the scroll position as needed to make sure the entire item is fully visible to the user.
     * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
     */
     ensureVisible(item) {
@@ -726,7 +751,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Returns an item instance from the dropDown list.
+    /** @description Returns a specific item instance from the dropDown list, allowing you to access the properties and methods of the selected list item. This can be used to retrieve information about the item, such as its value, label, or index within the dropDown.
     * @param {string} value. The value of an item from the drop down list.
     * @returns {HTMLElement}
   */
@@ -742,7 +767,13 @@ class ComboBoxComponent extends BaseElement {
         const result = await getResultOnRender();
         return result;
     }
-    /** @description Inserts a new item at a specified position.
+    getItemSync(value) {
+        if (this.nativeElement.isRendered) {
+            return this.nativeElement.getItem(value);
+        }
+        return null;
+    }
+    /** @description Inserts a new item into the array at the specified index position, shifting existing elements to the right to accommodate the new item.
     * @param {number} position. The position where the item must be inserted.
     * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
     */
@@ -756,7 +787,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Inserts a new ListItem before another in the list.
+    /** @description Inserts a new ListItem element directly before a specified existing ListItem within the list, preserving the order of the remaining items.
     * @param {Node} node. A ListItem element that should be added before the referenceItem in the list.
     * @param {Node | null} referenceNode. A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
     * @returns {Node}
@@ -773,7 +804,13 @@ class ComboBoxComponent extends BaseElement {
         const result = await getResultOnRender();
         return result;
     }
-    /** @description Opens the dropDown list.
+    insertBeforeSync(node, referenceNode) {
+        if (this.nativeElement.isRendered) {
+            return this.nativeElement.insertBefore(node, referenceNode);
+        }
+        return null;
+    }
+    /** @description Displays and expands the drop-down list, making all available options visible for selection.
     */
     open() {
         if (this.nativeElement.isRendered) {
@@ -785,7 +822,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Removes an item at a specified position.
+    /** @description Removes the item located at the specified index or position within a collection (such as an array or list). After removal, the collection is updated so that subsequent items shift to fill the gap, ensuring contiguous indexing.
     * @param {number} position. The position of the removed item.
     */
     removeAt(position) {
@@ -798,7 +835,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Removes a ListItem from the list of items inside element.
+    /** @description Removes a specified ListItem from the collection of items contained within the given element, updating the list to reflect the deletion.
     * @param {Node} node. A ListItem element that is part of the list of items inside the element.
     * @returns {Node}
   */
@@ -814,7 +851,13 @@ class ComboBoxComponent extends BaseElement {
         const result = await getResultOnRender();
         return result;
     }
-    /** @description Selects an item from the dropDown list.
+    removeChildSync(node) {
+        if (this.nativeElement.isRendered) {
+            return this.nativeElement.removeChild(node);
+        }
+        return null;
+    }
+    /** @description Selects a specified item from the dropdown list, allowing users to choose one option from the available choices. This action updates the dropdown’s current selection and can trigger any associated event handlers or changes in the application’s state.
     * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
     */
     select(item) {
@@ -827,7 +870,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Unselects an item from the dropDown list.
+    /** @description Deselects a specified item from the dropdown list, removing its selected state and reverting the dropdown to reflect that the item is no longer chosen by the user.
     * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
     */
     unselect(item) {
@@ -840,7 +883,7 @@ class ComboBoxComponent extends BaseElement {
             });
         }
     }
-    /** @description Updates an item from the dropDown list.
+    /** @description Updates the selected item in the dropDown list with new data or attributes. This action modifies the existing item rather than adding or removing items from the list, ensuring that any changes are reflected immediately in the user interface. Specify the target item and the updated values to complete the operation.
     * @param {number} position. The position where the item must be updated.
     * @param {any} value. The value of the updated item.
     */
@@ -862,9 +905,11 @@ class ComboBoxComponent extends BaseElement {
     ngAfterViewInit() {
         const that = this;
         that.onCreate.emit(that.nativeElement);
-        Smart.Render();
+        if (Smart)
+            Smart.Render();
         this.nativeElement.classList.add('smart-angular');
-        this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
+        if (this.nativeElement.whenRendered)
+            this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
         this.listen();
     }
     ngOnDestroy() {
@@ -1021,7 +1066,7 @@ class ComboBoxComponent extends BaseElement {
     }
 }
 ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ComboBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ComboBoxComponent, selector: "smart-combo-box, [smart-combo-box]", inputs: { autoCloseDelay: "autoCloseDelay", autoComplete: "autoComplete", autoCompleteDelay: "autoCompleteDelay", autoOpenShortcutKey: "autoOpenShortcutKey", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", dropDownAppendTo: "dropDownAppendTo", dropDownButtonPosition: "dropDownButtonPosition", dropDownHeight: "dropDownHeight", dropDownMaxHeight: "dropDownMaxHeight", dropDownMaxWidth: "dropDownMaxWidth", dropDownMinHeight: "dropDownMinHeight", dropDownMinWidth: "dropDownMinWidth", dropDownOpenMode: "dropDownOpenMode", dropDownOverlay: "dropDownOverlay", dropDownPlaceholder: "dropDownPlaceholder", dropDownPosition: "dropDownPosition", dropDownWidth: "dropDownWidth", escKeyMode: "escKeyMode", filterable: "filterable", filterInputPlaceholder: "filterInputPlaceholder", filterMode: "filterMode", grouped: "grouped", groupMember: "groupMember", hint: "hint", horizontalScrollBarVisibility: "horizontalScrollBarVisibility", inputMember: "inputMember", inputPurpose: "inputPurpose", incrementalSearchDelay: "incrementalSearchDelay", incrementalSearchMode: "incrementalSearchMode", itemHeight: "itemHeight", itemMeasureMode: "itemMeasureMode", items: "items", itemTemplate: "itemTemplate", label: "label", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", minLength: "minLength", maxLength: "maxLength", name: "name", opened: "opened", placeholder: "placeholder", readonly: "readonly", rightToLeft: "rightToLeft", resizeIndicator: "resizeIndicator", resizeMode: "resizeMode", selectionDisplayMode: "selectionDisplayMode", selectedIndexes: "selectedIndexes", selectedValues: "selectedValues", selectionMode: "selectionMode", sorted: "sorted", sortDirection: "sortDirection", theme: "theme", tokenTemplate: "tokenTemplate", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", verticalScrollBarVisibility: "verticalScrollBarVisibility", virtualized: "virtualized" }, outputs: { onChange: "onChange", onClose: "onClose", onClosing: "onClosing", onItemClick: "onItemClick", onOpen: "onOpen", onOpening: "onOpening", onResizeStart: "onResizeStart", onResizeEnd: "onResizeEnd", onScrollBottomReached: "onScrollBottomReached", onScrollTopReached: "onScrollTopReached", onTokenClick: "onTokenClick" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-combo-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+ComboBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ComboBoxComponent, selector: "smart-combo-box, [smart-combo-box]", inputs: { autoCloseDelay: "autoCloseDelay", autoComplete: "autoComplete", autoCompleteDelay: "autoCompleteDelay", autoOpenShortcutKey: "autoOpenShortcutKey", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", dropDownAppendTo: "dropDownAppendTo", dropDownButtonPosition: "dropDownButtonPosition", dropDownHeight: "dropDownHeight", dropDownMaxHeight: "dropDownMaxHeight", dropDownMaxWidth: "dropDownMaxWidth", dropDownMinHeight: "dropDownMinHeight", dropDownMinWidth: "dropDownMinWidth", dropDownOpenMode: "dropDownOpenMode", dropDownOverlay: "dropDownOverlay", dropDownPlaceholder: "dropDownPlaceholder", dropDownPosition: "dropDownPosition", dropDownWidth: "dropDownWidth", escKeyMode: "escKeyMode", filterable: "filterable", filterInputPlaceholder: "filterInputPlaceholder", filterMode: "filterMode", grouped: "grouped", groupMember: "groupMember", hint: "hint", horizontalScrollBarVisibility: "horizontalScrollBarVisibility", inputMember: "inputMember", inputPurpose: "inputPurpose", incrementalSearchDelay: "incrementalSearchDelay", incrementalSearchMode: "incrementalSearchMode", itemHeight: "itemHeight", itemMeasureMode: "itemMeasureMode", items: "items", itemTemplate: "itemTemplate", label: "label", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", minLength: "minLength", maxLength: "maxLength", name: "name", opened: "opened", placeholder: "placeholder", readonly: "readonly", rightToLeft: "rightToLeft", resizeIndicator: "resizeIndicator", resizeMode: "resizeMode", selectionDisplayMode: "selectionDisplayMode", selectedIndexes: "selectedIndexes", selectedValues: "selectedValues", selectionMode: "selectionMode", sorted: "sorted", sortDirection: "sortDirection", theme: "theme", tokenTemplate: "tokenTemplate", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", verticalScrollBarVisibility: "verticalScrollBarVisibility", virtualized: "virtualized" }, outputs: { onChange: "onChange", onClose: "onClose", onClosing: "onClosing", onItemClick: "onItemClick", onOpen: "onOpen", onOpening: "onOpening", onResizeStart: "onResizeStart", onResizeEnd: "onResizeEnd", onScrollBottomReached: "onScrollBottomReached", onScrollTopReached: "onScrollTopReached", onTokenClick: "onTokenClick" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-combo-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Directive,
             args: [{
@@ -1106,6 +1151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Input
             }], loadingIndicatorPosition: [{
                 type: Input
+            }], unlockKey: [{
+                type: Input
             }], locale: [{
                 type: Input
             }], localizeFormatFunction: [{
@@ -1282,7 +1329,8 @@ class ListItemComponent extends BaseElement {
         const that = this;
         that.onCreate.emit(that.nativeElement);
         this.nativeElement.classList.add('smart-angular');
-        this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
+        if (this.nativeElement.whenRendered)
+            this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
     }
     ngOnDestroy() { }
     ngOnChanges(changes) {
@@ -1358,7 +1406,8 @@ class ListItemsGroupComponent extends BaseElement {
         const that = this;
         that.onCreate.emit(that.nativeElement);
         this.nativeElement.classList.add('smart-angular');
-        this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
+        if (this.nativeElement.whenRendered)
+            this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
     }
     ngOnDestroy() { }
     ngOnChanges(changes) {