@genexus/genexus-ide-ui 1.0.7 → 1.0.8

package/dist/collection/components/data-selector/data-selector.js

@@ -1,173 +1,182 @@
-/* STENCIL IMPORTS */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeDataSelector_firstGridObjectId, _GxIdeDataSelector_loadItemsCallbackJustCalled, _GxIdeDataSelector_componentLocale, _GxIdeDataSelector_animateEmptyState, _GxIdeDataSelector_shortcutsSrc, _GxIdeDataSelector_filterPatternEl, _GxIdeDataSelector_filterObjectEl, _GxIdeDataSelector_chShortcutsEl, _GxIdeDataSelector_chTabularGridObjectsEl, _GxIdeDataSelector_evaluateFirstRowSelection, _GxIdeDataSelector_chGridKeyDownHandler, _GxIdeDataSelector_confirmCallbackHandler, _GxIdeDataSelector_editCallbackHandler, _GxIdeDataSelector_hostKeyPressHandler, _GxIdeDataSelector_objectsSelectionChangedHandler, _GxIdeDataSelector_newVariableCallbackHandler, _GxIdeDataSelector_refreshUIWithNewConfiguration, _GxIdeDataSelector_renderFilter, _GxIdeDataSelector_renderObjects, _GxIdeDataSelector_sortObjectsByName;
+/* eslint-disable @stencil-community/own-props-must-be-private */
 import { Host, h, getAssetPath } from "@stencil/core";
-/* OTHER LIBRARIES IMPORTS */
-/* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
+import { getIconPath } from "@genexus/mercury";
 // Best performance bundle
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "utils/form",
-    "utils/layout",
-    "utils/typography",
     "components/button",
-    "components/checkbox",
     "components/edit",
-    "components/tabular-grid"
+    "components/tabular-grid",
+    "components/icon",
+    "utils/form",
+    "utils/layout",
+    "chameleon/scrollbar"
 ];
+const FILTER_ICON = getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "on-elevation"
+});
 export class GxIdeDataSelector {
     constructor() {
-        this.renderedFirstTime = false;
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/object-selector/shortcuts.json`);
-        // 9.LOCAL METHODS //
-        this.loaderCancelCallbackHandler = async () => {
-            this.cancelCallbackHandler();
-        };
-        this.getObjects = () => {
-            var _a, _b, _c;
-            const filters = {
-                pattern: (_a = this.filterPatternEl) === null || _a === void 0 ? void 0 : _a.value,
-                object: (_c = (_b = this.filterObjectEl) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id
-            };
-            if (this.loadItemsCallback) {
-                if (this.loader) {
-                    this.loading = true;
-                    this.loaderEl.show = true;
-                }
-                this.loadItemsCallback(filters).then((items) => {
-                    if (items) {
-                        this.objects = items;
-                    }
-                    this.selectedObjectsIds = [];
-                    this.deselectAll();
-                    if (this.loader) {
-                        this.loading = false;
-                        this.loaderEl.show = false;
-                    }
-                });
+        _GxIdeDataSelector_firstGridObjectId.set(this, void 0); // used to select the first item after "loadItemsCallback"
+        _GxIdeDataSelector_loadItemsCallbackJustCalled.set(this, false); // used to select the first item after "loadItemsCallback"
+        _GxIdeDataSelector_componentLocale.set(this, void 0);
+        _GxIdeDataSelector_animateEmptyState.set(this, false);
+        _GxIdeDataSelector_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/data-selector/shortcuts.json`));
+        /* References needed to collect data */
+        _GxIdeDataSelector_filterPatternEl.set(this, void 0);
+        _GxIdeDataSelector_filterObjectEl.set(this, void 0);
+        _GxIdeDataSelector_chShortcutsEl.set(this, void 0);
+        _GxIdeDataSelector_chTabularGridObjectsEl.set(this, void 0);
+        /**
+         * After items have been loaded and rendered, the first row should be selected.
+         */
+        _GxIdeDataSelector_evaluateFirstRowSelection.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeDataSelector_loadItemsCallbackJustCalled, "f")) {
+                __classPrivateFieldGet(this, _GxIdeDataSelector_chTabularGridObjectsEl, "f").selectRow(__classPrivateFieldGet(this, _GxIdeDataSelector_firstGridObjectId, "f"));
             }
-        };
-        this.editCallbackHandler = async (e) => {
-            e.stopPropagation();
-            if (this.editCallback && this.selectedObjectsIds[0]) {
-                const result = await this.editCallback(this.selectedObjectsIds[0]);
-                if (result) {
-                    this.getObjects();
-                }
+            __classPrivateFieldSet(this, _GxIdeDataSelector_loadItemsCallbackJustCalled, false, "f");
+        });
+        _GxIdeDataSelector_chGridKeyDownHandler.set(this, (e) => {
+            if (e.key === "Enter") {
+                __classPrivateFieldGet(this, _GxIdeDataSelector_confirmCallbackHandler, "f").call(this, e);
             }
-        };
-        this.confirmCallbackHandler = (e) => {
+        });
+        _GxIdeDataSelector_confirmCallbackHandler.set(this, (e) => {
             e.stopPropagation();
             this.confirmCallback(this.selectedObjectsIds);
-        };
-        this.cancelCallbackHandler = () => {
-            this.cancelCallback();
-        };
-        this.deselectAll = () => {
-            this.chGridEl.selectAllRows(false);
-        };
-        this.newVariableCallbackHandler = async () => {
-            if (this.newVariableCallback) {
-                const response = await this.newVariableCallback();
-                if (response) {
-                    this.getObjects();
+        });
+        _GxIdeDataSelector_editCallbackHandler.set(this, async (e) => {
+            e.stopPropagation();
+            if (this.selectedObjectsIds[0]) {
+                const result = await this.editCallback(this.selectedObjectsIds[0]);
+                if (result) {
+                    __classPrivateFieldGet(this, _GxIdeDataSelector_refreshUIWithNewConfiguration, "f").call(this);
                 }
             }
-        };
-        this.listenChanges = async () => {
-            /* pattern*/
-            this.filterPatternEl.addEventListener("valueChanged", () => {
-                this.getObjects();
-            });
-            /* object*/
-            this.filterObjectEl.addEventListener("valueChanged", () => {
-                this.getObjects();
-            });
-            // for grid selection
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
-                this.selectedObjectsIds = ev.detail.rowsId;
-            });
-        };
-        this.chGridKeyDownHandler = (e) => {
-            if (e.key === "Enter") {
-                this.confirmCallbackHandler(e);
-            }
-        };
-        this.hostKeyPressHandler = (e) => {
+        });
+        _GxIdeDataSelector_hostKeyPressHandler.set(this, (e) => {
+            // TODO : revise why this is necessary
             // just prevent keypress propagation
             if (e.key === "Enter") {
                 e.stopPropagation();
             }
-        };
-        // 9.LOCAL METHODS  -> RENDER//
-        this.renderFilter = () => {
-            return (h("div", { part: "filters-container", class: {
-                    "filter-grid": true,
-                    "filter-grid--no-title": !this.displayTitle
-                }, slot: "header" }, h("gxg-label", { labelPosition: "start", class: "pattern-label", noMargin: true }, this._componentLocale.filter.pattern), h("gxg-form-text", { ref: (el) => (this.filterPatternEl = el), class: "pattern-input", part: "filter-pattern", debounce: true }), h("gxg-label", { labelPosition: "start", class: "object-label", noMargin: true }, this._componentLocale.filter.object), h("gx-ide-entity-selector", { selectEntityCallback: this.selectObjectCallback, ref: (el) => (this.filterObjectEl = el), class: "object-input" })));
-        };
-        this.renderObjects = () => {
-            return (h("ch-tabular-grid", { class: "tabular-grid", rowSelectionMode: this.selectionType, ref: (el) => (this.chGridEl = el), onKeyDown: this.chGridKeyDownHandler, part: "ch-grid-objects" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.minContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": this._componentLocale.tableHead.name, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.auto, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": this._componentLocale.tableHead.dataType, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.auto, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": this._componentLocale.tableHead.description, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.auto, class: "tabular-grid-column" })), !this.loading ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.objects
-                .sort((a, b) => {
-                const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
-                if (nameA < nameB) {
-                    return -1;
-                }
-                if (nameA > nameB) {
-                    return 1;
+        });
+        _GxIdeDataSelector_objectsSelectionChangedHandler.set(this, (event) => {
+            this.selectedObjectsIds = event.detail.rowsId;
+        });
+        _GxIdeDataSelector_newVariableCallbackHandler.set(this, async () => {
+            const response = await this.newVariableCallback();
+            if (response) {
+                __classPrivateFieldGet(this, _GxIdeDataSelector_refreshUIWithNewConfiguration, "f").call(this);
+            }
+        });
+        _GxIdeDataSelector_refreshUIWithNewConfiguration.set(this, () => {
+            var _a, _b, _c;
+            this.objects = [];
+            const filters = {
+                pattern: (_a = __classPrivateFieldGet(this, _GxIdeDataSelector_filterPatternEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
+                object: (_c = (_b = __classPrivateFieldGet(this, _GxIdeDataSelector_filterObjectEl, "f")) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id
+            };
+            this.loading = true;
+            this.loadItemsCallback(filters).then((items) => {
+                if (items.length) {
+                    this.objects = __classPrivateFieldGet(this, _GxIdeDataSelector_sortObjectsByName, "f").call(this, items);
+                    __classPrivateFieldSet(this, _GxIdeDataSelector_firstGridObjectId, this.objects[0].id, "f");
+                    __classPrivateFieldSet(this, _GxIdeDataSelector_loadItemsCallbackJustCalled, true, "f");
                 }
-                return 0;
-            })
-                .map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, onDblClick: this.confirmCallbackHandler, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.type === "attribute"
+                this.selectedObjectsIds = [];
+                this.loading = false;
+            });
+        });
+        _GxIdeDataSelector_renderFilter.set(this, () => {
+            return [
+                h("div", { class: "header__field-group field-group" }, h("div", { class: "field field-block pattern-field" }, h("label", { class: "label", htmlFor: "filter-pattern" }, __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").filter.pattern), h("ch-edit", { autoFocus: true, id: "filter-pattern", name: "filter-pattern", class: "form-input pattern-input", part: "filter-pattern", debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeDataSelector_refreshUIWithNewConfiguration, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeDataSelector_filterPatternEl, el, "f")) })), h("gx-ide-entity-selector", { id: "object-selector", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectObjectCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeDataSelector_filterObjectEl, el, "f")), class: "entity", onValueChanged: __classPrivateFieldGet(this, _GxIdeDataSelector_refreshUIWithNewConfiguration, "f") }))
+            ];
+        });
+        _GxIdeDataSelector_renderObjects.set(this, () => {
+            const gridIsEmpty = !this.objects.length;
+            const displayLoader = this.loader && this.loading;
+            if (!gridIsEmpty || displayLoader) {
+                __classPrivateFieldSet(this, _GxIdeDataSelector_animateEmptyState, true, "f"); // improve performance if is first render
+            }
+            return (h("ch-tabular-grid", { class: {
+                    "tabular-grid": true,
+                    "empty-result": this.objects.length === 0,
+                    "data": true
+                }, rowSelectionMode: this.selectionType, onKeyDown: __classPrivateFieldGet(this, _GxIdeDataSelector_chGridKeyDownHandler, "f"), part: "ch-grid-objects", onSelectionChanged: this.objects.length ? __classPrivateFieldGet(this, _GxIdeDataSelector_objectsSelectionChangedHandler, "f") : undefined, ref: (el) => (__classPrivateFieldSet(this, _GxIdeDataSelector_chTabularGridObjectsEl, el, "f")) }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").tableHead.name, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").tableHead.dataType, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").tableHead.description, "column-name-position": "text", settingable: false, size: config.tabularGrid.colSize.auto, class: "tabular-grid-column" })), !gridIsEmpty ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.objects.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, onDblClick: __classPrivateFieldGet(this, _GxIdeDataSelector_confirmCallbackHandler, "f"), class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.type === "attribute"
                     ? "objects/attribute"
-                    : "objects-parts/variables", class: "icon-md" })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.name), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.dataType), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.description)))))) : (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, h("ch-tabular-grid-rowset-empty", { ref: (el) => (this.chGridRowsetEmptyEl = el) })))));
-        };
+                    : "objects-parts/variables", class: "icon-md" })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.name), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.dataType), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.description)))))) : (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, h("ch-tabular-grid-rowset-empty", null, displayLoader ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").loader.title, show: true })) : (h("gx-ide-empty-state", { isAnimated: __classPrivateFieldGet(this, _GxIdeDataSelector_animateEmptyState, "f"), stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").emptyState.title })))))));
+        });
+        _GxIdeDataSelector_sortObjectsByName.set(this, (objects) => 
+        // TODO (make this a common helper function
+        // and use it in other dialog grids that
+        // require filter by name).
+        objects.sort((a, b) => {
+            const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
+            if (nameA < nameB) {
+                return -1;
+            }
+            if (nameA > nameB) {
+                return 1;
+            }
+            return 0;
+        }));
+        this.loading = true;
         this.objects = [];
         this.selectedObjectsIds = [];
-        this.loading = true;
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+        this.defaultModule = undefined;
         this.displayTitle = false;
-        this.loader = false;
-        this.selectionType = "multiple";
-        this.selectObjectCallback = undefined;
         this.editCallback = undefined;
-        this.cancelCallback = undefined;
         this.loadItemsCallback = undefined;
+        this.loader = false;
         this.newVariableCallback = undefined;
-        this.confirmCallback = undefined;
-    }
-    evaluateLoading(loading) {
-        this.loaderEl.show = loading;
+        this.selectObjectCallback = undefined;
+        this.selectionType = "multiple";
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.componentDidLoadEvent.emit(true);
+        __classPrivateFieldSet(this, _GxIdeDataSelector_componentLocale, await Locale.getComponentStrings(this.el), "f");
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _GxIdeDataSelector_refreshUIWithNewConfiguration, "f").call(this);
     }
     componentDidLoad() {
-        this.listenChanges();
-        this.loaderEl.container = this.chGridEl;
-        this.getObjects();
-        this.filterPatternEl.focus();
-        this.evaluateLoading(this.loading);
+        __classPrivateFieldGet(this, _GxIdeDataSelector_filterPatternEl, "f").focus();
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-        }
-        this.loaderEl.container = this.chGridRowsetEmptyEl;
+        __classPrivateFieldGet(this, _GxIdeDataSelector_evaluateFirstRowSelection, "f").call(this);
     }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     /**
      * Suspends or reactivates the shortcuts
      */
     async suspendShortcuts(suspendShortcuts) {
         if (suspendShortcuts) {
-            this.gxgShortcutsEl.suspend = true;
+            __classPrivateFieldGet(this, _GxIdeDataSelector_chShortcutsEl, "f").suspend = true;
         }
         else {
-            this.gxgShortcutsEl.suspend = false;
+            __classPrivateFieldGet(this, _GxIdeDataSelector_chShortcutsEl, "f").suspend = false;
         }
     }
     /**
@@ -177,9 +186,24 @@ export class GxIdeDataSelector {
         const isValid = true;
         return isValid;
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, class: { loading: this.loading } }, this.renderFilter(), this.renderObjects(), h("gxg-button", { type: "primary-text-only", onClick: this.newVariableCallbackHandler, part: "gxg-button gxg-button--new", slot: "footer-start" }, this._componentLocale.footer.btnNew), h("gxg-button", { type: "primary-text-only", onClick: this.editCallbackHandler, part: "gxg-button gxg-button--edit", disabled: this.selectedObjectsIds.length === 0, slot: "footer-start" }, this._componentLocale.footer.btnEdit), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { type: "primary-text-only", onClick: this.confirmCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) }), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
+        const newVariableButtonEnabled = !this.loading;
+        const editButtonEnabled = !this.loading && this.selectedObjectsIds.length;
+        const cancelButtonEnabled = this.loading;
+        const okButtonEnabled = !this.loading;
+        return (h(Host, { onKeyPress: __classPrivateFieldGet(this, _GxIdeDataSelector_hostKeyPressHandler, "f"), class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeDataSelector_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeDataSelector_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: "header control-header-with-border spacing-body-block-start spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeDataSelector_renderFilter, "f").call(this)), __classPrivateFieldGet(this, _GxIdeDataSelector_renderObjects, "f").call(this), h("footer", { class: "footer control-footer-with-border control-footer-space-between spacing-body-inline spacing-body-block-end" }, h("div", { class: "buttons-spacer" }, h("button", {
+            // New Variable Button
+            class: "button-secondary", disabled: !newVariableButtonEnabled, part: "button button-new", type: "button", onClick: __classPrivateFieldGet(this, _GxIdeDataSelector_newVariableCallbackHandler, "f")
+        }, __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").footer.btnNew), h("button", {
+            // Edit Button
+            class: "button-secondary", disabled: !editButtonEnabled, part: "button button-edit", type: "button", onClick: editButtonEnabled && __classPrivateFieldGet(this, _GxIdeDataSelector_editCallbackHandler, "f")
+        }, __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").footer.btnEdit)), h("div", { class: "buttons-spacer" }, h("button", {
+            // Cancel Button
+            class: "button-secondary", part: "button button-cancel", disabled: !cancelButtonEnabled, type: "button", onClick: cancelButtonEnabled && this.cancelCallback
+        }, __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").footer.btnCancel), h("button", {
+            // Confirm Button
+            class: "button-primary", part: "button button-ok", disabled: !okButtonEnabled, type: "button", onClick: okButtonEnabled && __classPrivateFieldGet(this, _GxIdeDataSelector_confirmCallbackHandler, "f")
+        }, __classPrivateFieldGet(this, _GxIdeDataSelector_componentLocale, "f").footer.btnConfirm))))));
     }
     static get is() { return "gx-ide-data-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -197,71 +221,59 @@ export class GxIdeDataSelector {
     static get assetsDirs() { return ["gx-ide-assets/data-selector"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true it displays the component title on the header"
-                },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "loader": {
-                "type": "boolean",
+            "cancelCallback": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "CancelCallback",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "CancelCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
+                            "id": "src/components/data-selector/data-selector.tsx::CancelCallback"
+                        }
+                    }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, it will display a loader when needed."
-                },
-                "attribute": "loader",
-                "reflect": false,
-                "defaultValue": "false"
+                    "text": "Callback invoked when the user wishes to cancel the selection of objects."
+                }
             },
-            "selectionType": {
-                "type": "string",
+            "confirmCallback": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"single\" | \"multiple\"",
-                    "resolved": "\"multiple\" | \"single\"",
-                    "references": {}
+                    "original": "ConfirmCallback",
+                    "resolved": "(ids: string[]) => Promise<void>",
+                    "references": {
+                        "ConfirmCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
+                            "id": "src/components/data-selector/data-selector.tsx::ConfirmCallback"
+                        }
+                    }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Single if multiple object selection is not allowed. Default is multiple"
-                },
-                "attribute": "selection-type",
-                "reflect": false,
-                "defaultValue": "\"multiple\""
+                    "text": "Callback invoked when the user presses the 'OK' button"
+                }
             },
-            "selectObjectCallback": {
+            "defaultModule": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectObjectCallback",
-                    "resolved": "() => Promise<EntityData>",
+                    "original": "EntityData",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
-                        "SelectObjectCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
-                            "id": "src/components/data-selector/data-selector.tsx::SelectObjectCallback"
+                        "EntityData": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::EntityData"
                         }
                     }
                 },
@@ -269,41 +281,38 @@ export class GxIdeDataSelector {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the action is executed in the Object filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled."
+                    "text": "The default value for the module/folder filter"
                 }
             },
-            "editCallback": {
-                "type": "unknown",
+            "displayTitle": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "EditCallback",
-                    "resolved": "(id: string) => Promise<boolean>",
-                    "references": {
-                        "EditCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
-                            "id": "src/components/data-selector/data-selector.tsx::EditCallback"
-                        }
-                    }
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user press edit button. Receives the first selected element id as parameter"
-                }
+                    "text": "If true it displays the component title on the header"
+                },
+                "attribute": "display-title",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "cancelCallback": {
+            "editCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CancelCallback",
-                    "resolved": "() => Promise<void>",
+                    "original": "EditCallback",
+                    "resolved": "(id: string) => Promise<boolean>",
                     "references": {
-                        "CancelCallback": {
+                        "EditCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
-                            "id": "src/components/data-selector/data-selector.tsx::CancelCallback"
+                            "id": "src/components/data-selector/data-selector.tsx::EditCallback"
                         }
                     }
                 },
@@ -311,7 +320,7 @@ export class GxIdeDataSelector {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user wishes to cancel the selection of objects."
+                    "text": "Callback invoked when user presses the edit button. Receives the first\nselected element id as a parameter."
                 }
             },
             "loadItemsCallback": {
@@ -335,6 +344,24 @@ export class GxIdeDataSelector {
                     "text": "Callback invoked when the component needs to reload the list of attributes."
                 }
             },
+            "loader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, it will display a loader when needed."
+                },
+                "attribute": "loader",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "newVariableCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -356,69 +383,54 @@ export class GxIdeDataSelector {
                     "text": "Callback invoked when the user presses the 'New' button."
                 }
             },
-            "confirmCallback": {
+            "selectObjectCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ConfirmCallback",
-                    "resolved": "(ids: string[]) => Promise<void>",
+                    "original": "SelectObjectCallback",
+                    "resolved": "() => Promise<EntityData>",
                     "references": {
-                        "ConfirmCallback": {
+                        "SelectObjectCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-selector/data-selector.tsx",
-                            "id": "src/components/data-selector/data-selector.tsx::ConfirmCallback"
+                            "id": "src/components/data-selector/data-selector.tsx::SelectObjectCallback"
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user presses the 'OK' button"
+                    "text": "Callback invoked when the action is executed in the Object filter. It returns\nthe information of the selected object (id and name) or 'undefined' if it was\ncanceled."
                 }
+            },
+            "selectionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"single\" | \"multiple\"",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Single if multiple object selection is not allowed. Default is multiple"
+                },
+                "attribute": "selection-type",
+                "reflect": false,
+                "defaultValue": "\"multiple\""
             }
         };
     }
     static get states() {
         return {
+            "loading": {},
             "objects": {},
-            "selectedObjectsIds": {},
-            "loading": {}
+            "selectedObjectsIds": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "componentDidLoadEvent",
-                "name": "componentDidLoadEvent",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "suspendShortcuts": {
@@ -462,11 +474,6 @@ export class GxIdeDataSelector {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "loading",
-                "methodName": "evaluateLoading"
-            }];
-    }
 }
+_GxIdeDataSelector_firstGridObjectId = new WeakMap(), _GxIdeDataSelector_loadItemsCallbackJustCalled = new WeakMap(), _GxIdeDataSelector_componentLocale = new WeakMap(), _GxIdeDataSelector_animateEmptyState = new WeakMap(), _GxIdeDataSelector_shortcutsSrc = new WeakMap(), _GxIdeDataSelector_filterPatternEl = new WeakMap(), _GxIdeDataSelector_filterObjectEl = new WeakMap(), _GxIdeDataSelector_chShortcutsEl = new WeakMap(), _GxIdeDataSelector_chTabularGridObjectsEl = new WeakMap(), _GxIdeDataSelector_evaluateFirstRowSelection = new WeakMap(), _GxIdeDataSelector_chGridKeyDownHandler = new WeakMap(), _GxIdeDataSelector_confirmCallbackHandler = new WeakMap(), _GxIdeDataSelector_editCallbackHandler = new WeakMap(), _GxIdeDataSelector_hostKeyPressHandler = new WeakMap(), _GxIdeDataSelector_objectsSelectionChangedHandler = new WeakMap(), _GxIdeDataSelector_newVariableCallbackHandler = new WeakMap(), _GxIdeDataSelector_refreshUIWithNewConfiguration = new WeakMap(), _GxIdeDataSelector_renderFilter = new WeakMap(), _GxIdeDataSelector_renderObjects = new WeakMap(), _GxIdeDataSelector_sortObjectsByName = new WeakMap();
 //# sourceMappingURL=data-selector.js.map