@genexus/genexus-ide-ui 0.0.98 → 0.0.100

package/dist/esm/gxg-combo-box_2.entry.js

@@ -1,6 +1,5 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-f010c1e9.js';
 import { f as formMessageLogic, a as formTooltipLogic } from './form-32b2e788.js';
-import { r as repositionScroll } from './reposition-scroll-cfff7017.js';
 import { K as KeyboardKeys } from './types-cd4ed472.js';
 import { e as exportParts } from './export-parts-639c8817.js';
 import { s as state } from './store-ccf0cb77.js';
@@ -32,7 +31,7 @@ const GxgComboBox = class {
             clearButton: "clear-button",
             toggleButton: "toggle-button"
         };
-        this.componentDidLoadFlag = false;
+        this.prevEmittedValue = null;
         this.userTyped = false;
         this.formMessageLogic = formMessageLogic;
         this.detectClickOutsideCombo = this.detectClickOutsideComboFunc.bind(this);
@@ -51,13 +50,18 @@ const GxgComboBox = class {
         this.inputHandler = (e) => {
             this.userTyped = true;
             const value = this.sanitizeString(e.detail);
-            const filteredItems = this.filterList(value);
+            this.filterList(value);
             if (!this.strict) {
                 this.value = value;
             }
-            else if (filteredItems.length === 1) {
-                /*on strict mode, only set value if there is an exact match*/
-                this.value = filteredItems[0].value;
+            else {
+                const item = this.getItemByValue(value);
+                if (item) {
+                    this.value = value;
+                }
+                else {
+                    this.value = undefined;
+                }
             }
         };
         this.keyDownHandler = (e) => {
@@ -68,13 +72,11 @@ const GxgComboBox = class {
             if (e.code === KeyboardKeys.ARROW_DOWN) {
                 newItem = this.getNewItem("next");
                 (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
-                repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_DOWN);
                 e.altKey && this.showList();
             }
             else if (e.code === KeyboardKeys.ARROW_UP) {
                 newItem = this.getNewItem("prev");
                 (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
-                repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_UP);
             }
             else if (e.code === KeyboardKeys.ENTER) {
                 if (this.preventEnterPropagation && this.listIsOpen) {
@@ -82,6 +84,7 @@ const GxgComboBox = class {
                 }
                 this.hideList();
                 this.showAllItems();
+                this.evaluateValueChangedEmit();
             }
             else if (e.code === KeyboardKeys.SPACE) {
                 this.showList();
@@ -94,6 +97,28 @@ const GxgComboBox = class {
                 this.hideList();
             }
         };
+        this.evaluateValueChangedEmit = () => {
+            if (this.strict && this.value === undefined) {
+                this.text = "";
+                this.value = this.prevEmittedValue;
+            }
+            else if (this.value !== this.prevEmittedValue) {
+                this.valueChanged.emit(this.value);
+                this.prevEmittedValue = this.value;
+            }
+        };
+        this.evaluateScroll = () => {
+            if (this.selectedItem) {
+                const selectedITemTop = this.selectedItem.getBoundingClientRect().top;
+                const selectedITemBottom = this.selectedItem.getBoundingClientRect().bottom;
+                const containerTop = this.itemsContainer.getBoundingClientRect().top;
+                const containerBottom = this.itemsContainer.getBoundingClientRect().bottom;
+                if (selectedITemTop < containerTop ||
+                    selectedITemBottom > containerBottom) {
+                    this.selectedItem.scrollIntoView({ behavior: "smooth" });
+                }
+            }
+        };
         this.handleValueChangeFormText = e => {
             this.value = e.detail;
         };
@@ -197,15 +222,20 @@ const GxgComboBox = class {
             this.clearIcon();
         };
         this.getValueByText = (text) => {
-            !this.caseSensitive && (text = text.toLowerCase());
-            const enabledItems = this.getEnabledItems();
-            const item = enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.find(item => {
-                const itemText = !this.caseSensitive
-                    ? item.textContent.toLocaleLowerCase()
-                    : item.textContent;
-                return !item.disabled && itemText === text;
-            });
-            return item === null || item === void 0 ? void 0 : item.value;
+            if (text) {
+                !this.caseSensitive && (text = text.toLowerCase());
+                const enabledItems = this.getEnabledItems();
+                const item = enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.find(item => {
+                    const itemText = !this.caseSensitive
+                        ? item.textContent.toLocaleLowerCase()
+                        : item.textContent;
+                    return !item.disabled && itemText === text;
+                });
+                return item === null || item === void 0 ? void 0 : item.value;
+            }
+            else {
+                return undefined;
+            }
         };
         this.getNewItem = (direction) => {
             const filteredItems = this.getFilteredItems();
@@ -269,6 +299,10 @@ const GxgComboBox = class {
                     }
                 }
             }
+            this.prevEmittedValue = this.value;
+        };
+        this.onBlurHandler = () => {
+            this.evaluateValueChangedEmit();
         };
         this.toggleListButtonClickHandler = () => {
             if (!this.disabled) {
@@ -358,7 +392,6 @@ const GxgComboBox = class {
     }
     componentDidLoad() {
         this.resizeObserver();
-        this.componentDidLoadFlag = true;
         this.evaluatePopOver();
     }
     disconnectedCallback() {
@@ -416,9 +449,6 @@ const GxgComboBox = class {
     *********************************/
     onValueChanged(newValue) {
         setTimeout(() => {
-            if (this.componentDidLoadFlag) {
-                this.valueChanged.emit(newValue);
-            }
             this.clearSelectedItem();
             let value;
             let newItem = undefined;
@@ -433,12 +463,17 @@ const GxgComboBox = class {
             if (newItem) {
                 this.setSelectedItem(newItem);
                 this.setIcon(newItem.icon);
-                (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
+                const textContent = newItem.textContent;
+                if (textContent.length > 0) {
+                    this.text = textContent;
+                }
+                else {
+                    this.text = newItem.value;
+                }
             }
             else {
                 //this.setIcon(undefined);
                 if (this.strict) {
-                    this.text = undefined;
                     this.value = undefined;
                 }
                 else {
@@ -475,6 +510,9 @@ const GxgComboBox = class {
     }
     selectedItemHandler(newItem) {
         newItem && (newItem.selected = true);
+        if (this.listIsOpen) {
+            this.evaluateScroll();
+        }
     }
     removedItemHandler(removedItem) {
         const value = removedItem.value;
@@ -564,7 +602,7 @@ const GxgComboBox = class {
                 large: state.large
             }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
                 "main-container": true
-            }, ref: el => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "outer-wrapper" }, h("div", { class: "search-and-items-container", ref: el => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: el => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, class: {
+            }, ref: el => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "outer-wrapper" }, h("div", { class: "search-and-items-container", ref: el => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, onBlur: this.onBlurHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: el => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, class: {
                 "icon-end--double": clearIcon,
                 "icon-end": !clearIcon
             }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", disabled: this.disabled, part: this.parts.clearButton, small: true })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "tertiary", onClick: this.toggleListButtonClickHandler, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton, small: true }))), h("div", { class: {