@genexus/genexus-ide-ui 0.0.98 → 0.0.100

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-faa86ee7.js');
 const form = require('./form-6e9d2d78.js');
-const repositionScroll = require('./reposition-scroll-86d8fac5.js');
 const types = require('./types-36efe32d.js');
 const exportParts = require('./export-parts-3854d3b2.js');
 const store = require('./store-118af971.js');
@@ -36,7 +35,7 @@ const GxgComboBox = class {
             clearButton: "clear-button",
             toggleButton: "toggle-button"
         };
-        this.componentDidLoadFlag = false;
+        this.prevEmittedValue = null;
         this.userTyped = false;
         this.formMessageLogic = form.formMessageLogic;
         this.detectClickOutsideCombo = this.detectClickOutsideComboFunc.bind(this);
@@ -55,13 +54,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) => {
@@ -72,13 +76,11 @@ const GxgComboBox = class {
             if (e.code === types.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.repositionScroll(this.itemsContainer, this.selectedItem, types.KeyboardKeys.ARROW_DOWN);
                 e.altKey && this.showList();
             }
             else if (e.code === types.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.repositionScroll(this.itemsContainer, this.selectedItem, types.KeyboardKeys.ARROW_UP);
             }
             else if (e.code === types.KeyboardKeys.ENTER) {
                 if (this.preventEnterPropagation && this.listIsOpen) {
@@ -86,6 +88,7 @@ const GxgComboBox = class {
                 }
                 this.hideList();
                 this.showAllItems();
+                this.evaluateValueChangedEmit();
             }
             else if (e.code === types.KeyboardKeys.SPACE) {
                 this.showList();
@@ -98,6 +101,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;
         };
@@ -201,15 +226,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();
@@ -273,6 +303,10 @@ const GxgComboBox = class {
                     }
                 }
             }
+            this.prevEmittedValue = this.value;
+        };
+        this.onBlurHandler = () => {
+            this.evaluateValueChangedEmit();
         };
         this.toggleListButtonClickHandler = () => {
             if (!this.disabled) {
@@ -362,7 +396,6 @@ const GxgComboBox = class {
     }
     componentDidLoad() {
         this.resizeObserver();
-        this.componentDidLoadFlag = true;
         this.evaluatePopOver();
     }
     disconnectedCallback() {
@@ -420,9 +453,6 @@ const GxgComboBox = class {
     *********************************/
     onValueChanged(newValue) {
         setTimeout(() => {
-            if (this.componentDidLoadFlag) {
-                this.valueChanged.emit(newValue);
-            }
             this.clearSelectedItem();
             let value;
             let newItem = undefined;
@@ -437,12 +467,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 {
@@ -479,6 +514,9 @@ const GxgComboBox = class {
     }
     selectedItemHandler(newItem) {
         newItem && (newItem.selected = true);
+        if (this.listIsOpen) {
+            this.evaluateScroll();
+        }
     }
     removedItemHandler(removedItem) {
         const value = removedItem.value;
@@ -568,7 +606,7 @@ const GxgComboBox = class {
                 large: store.state.large
             }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, index.h("div", { class: {
                 "main-container": true
-            }, ref: el => (this.mainContainer = el) }, this.label ? (index.h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, index.h("div", { class: "outer-wrapper" }, index.h("div", { class: "search-and-items-container", ref: el => (this.searchItemsContainer = el) }, index.h("div", { class: { "search-container": true } }, index.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 ? (index.h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, index.h("div", { class: "outer-wrapper" }, index.h("div", { class: "search-and-items-container", ref: el => (this.searchItemsContainer = el) }, index.h("div", { class: { "search-container": true } }, index.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 }), index.h("div", { class: "buttons-wrapper" }, clearIcon ? (index.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, index.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 }))), index.h("div", { class: {