@genexus/genexus-ide-ui 1.0.7 → 1.0.9

package/dist/components/entity-selector.js

@@ -46,7 +46,9 @@ const GxIdeEntitySelector = /*@__PURE__*/ proxyCustomElement(class GxIdeEntitySe
         this.valueChanged = createEvent(this, "valueChanged", 7);
         _GxIdeEntitySelector_componentLocale.set(this, void 0);
         _GxIdeEntitySelector_btnClearClickHandler.set(this, () => {
+            var _a;
             this.value = this.defaultValue;
+            this.iconSrc = (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.iconSrc;
         });
         _GxIdeEntitySelector_btnSelectClickHandler.set(this, () => {
             this.selectEntityCallback().then(result => {
@@ -64,7 +66,7 @@ const GxIdeEntitySelector = /*@__PURE__*/ proxyCustomElement(class GxIdeEntitySe
         _GxIdeEntitySelector_renderControl.set(this, () => {
             var _a, _b;
             return (h("div", { part: "wrapper", class: "wrapper" }, h("ch-edit", { accessibleName: this.labelPosition === "none" &&
-                    __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").entitySelectorInputAccessibleName, class: "form-input", name: "entitySelector", startImgSrc: this.iconSrc, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.name), id: "entity-input" }), h("button", { part: "button-clear", class: "icon-button", "aria-label": __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").clearButtonLabel, title: __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").clearButtonLabel, onClick: __classPrivateFieldGet(this, _GxIdeEntitySelector_btnClearClickHandler, "f"), onFocus: this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined, onBlur: !this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined }, h("ch-image", { class: "icon-md", src: CLEAR_ICON })), h("button", { class: "icon-button", "aria-label": __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").selectButtonLabel, title: __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").selectButtonLabel, disabled: !this.selectEntityCallback, onClick: __classPrivateFieldGet(this, _GxIdeEntitySelector_btnSelectClickHandler, "f"), onBlur: !this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined, onFocus: this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined }, h("ch-image", { class: "icon-md", src: SELECT_DEFAULT_ICON }))));
+                    __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").entitySelectorInputAccessibleName, class: "form-input", name: this.name || __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").entitySelectorNameAttribute, startImgSrc: this.iconSrc, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.name), id: "entity-input" }), h("button", { part: "button-clear", class: "icon-button", "aria-label": __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").clearButtonLabel, title: __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").clearButtonLabel, type: "button", onClick: __classPrivateFieldGet(this, _GxIdeEntitySelector_btnClearClickHandler, "f"), onFocus: this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined, onBlur: !this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined }, h("ch-image", { class: "icon-md", src: CLEAR_ICON })), h("button", { class: "icon-button", "aria-label": __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").selectButtonLabel, title: __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").selectButtonLabel, type: "button", disabled: !this.selectEntityCallback, onClick: __classPrivateFieldGet(this, _GxIdeEntitySelector_btnSelectClickHandler, "f"), onBlur: !this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined, onFocus: this.buttonHasFocus ? __classPrivateFieldGet(this, _GxIdeEntitySelector_buttonFocusHandler, "f") : undefined }, h("ch-image", { class: "icon-md", src: SELECT_DEFAULT_ICON }))));
         });
         _GxIdeEntitySelector_updateIconSrc.set(this, () => {
             if (this.value && this.value.iconSrc) {
@@ -76,6 +78,7 @@ const GxIdeEntitySelector = /*@__PURE__*/ proxyCustomElement(class GxIdeEntitySe
         this.defaultValue = undefined;
         this.labelCaption = undefined;
         this.labelPosition = "block-start";
+        this.name = undefined;
         this.selectEntityCallback = undefined;
         this.value = undefined;
     }
@@ -110,6 +113,7 @@ const GxIdeEntitySelector = /*@__PURE__*/ proxyCustomElement(class GxIdeEntitySe
         "defaultValue": [16],
         "labelCaption": [1, "label-caption"],
         "labelPosition": [513, "label-position"],
+        "name": [513],
         "selectEntityCallback": [16],
         "value": [1040],
         "buttonHasFocus": [32],

package/dist/components/entity-selector.js.map

@@ -1 +1 @@
-{"file":"entity-selector.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,uoBAAuoB;;;;;;;;;;;;;;;;;;;ACkBjqB,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;IACjB,YAAY;CACb,CAAC;AACF,MAAM,mBAAmB,GAAG,WAAW,CAAC;IACtC,QAAQ,EAAE,cAAc;IACxB,IAAI,EAAE,sBAAsB;IAC5B,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,UAAU,GAAG,WAAW,CAAC;IAC7B,QAAQ,EAAE,cAAc;IACxB,IAAI,EAAE,OAAO;IACb,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,mBAAmB;;;;;;QAC9B,uDAAsB;QA2DtB,oDAAwB;YACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;SAChC,EAAC;QAEF,qDAAyB;YACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACrC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;aACrB,CAAC,CAAC;SACJ,EAAC;QAEF,kDAAsB,CAAC,CAAa;YAClC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;gBACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,EAAC;QAEF,6CAAiB;;YACf,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,IACjC,eACE,cAAc,EACZ,IAAI,CAAC,aAAa,KAAK,MAAM;oBAC7B,uBAAA,IAAI,4CAAiB,CAAC,iCAAiC,EAEzD,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,gBAAgB,EACrB,WAAW,EAAE,IAAI,CAAC,OAAO,EACzB,KAAK,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAA,EAClD,EAAE,EAAC,cAAc,GACR,EAEX,cACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,aAAa,gBACP,uBAAA,IAAI,4CAAiB,CAAC,gBAAgB,EAClD,KAAK,EAAE,uBAAA,IAAI,4CAAiB,CAAC,gBAAgB,EAC7C,OAAO,EAAE,uBAAA,IAAI,iDAAsB,EACnC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,uBAAA,IAAI,+CAAoB,GAAG,SAAS,EACnE,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,uBAAA,IAAI,+CAAoB,GAAG,SAAS,IAEnE,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,GAAa,CAC/C,EAET,cACE,KAAK,EAAC,aAAa,gBACP,uBAAA,IAAI,4CAAiB,CAAC,iBAAiB,EACnD,KAAK,EAAE,uBAAA,IAAI,4CAAiB,CAAC,iBAAiB,EAC9C,QAAQ,EAAE,CAAC,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,uBAAA,IAAI,kDAAuB,EACpC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,uBAAA,IAAI,+CAAoB,GAAG,SAAS,EACnE,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,uBAAA,IAAI,+CAAoB,GAAG,SAAS,IAEnE,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,mBAAmB,GAAa,CACxD,CACL,EACN;SACH,EAAC;QAEF,6CAAiB;YACf,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;aACnC;SACF,EAAC;8BAnHwB,KAAK;uBAEJ,IAAI;;;6BAiB7B,aAAa;;;;IAYf,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,uBAAA,IAAI,0CAAe,MAAnB,IAAI,CAAiB,CAAC;KACvB;;IASD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,wCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,iBAAiB;QACf,uBAAA,IAAI,0CAAe,MAAnB,IAAI,CAAiB,CAAC;KACvB;IAoED,MAAM;QACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,mCAAmC,EAAE,IAAI,CAAC,cAAc;aACzD,IAED,gBAAU,KAAK,EAAE,WAAW,GAAa,EACxC,IAAI,CAAC,aAAa,KAAK,MAAM,IAC5B,WACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,aAAa,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa;gBACnD,cAAc,EAAE,IAAI,CAAC,aAAa,KAAK,cAAc;aACtD,IAED,aAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,cAAc,IACxC,IAAI,CAAC,YAAY;YAChB,uBAAA,IAAI,4CAAiB,CAAC,iCAAiC,CACnD,EACP,uBAAA,IAAI,0CAAe,MAAnB,IAAI,CAAiB,CAClB,KAEN,uBAAA,IAAI,0CAAe,MAAnB,IAAI,CAAiB,CACtB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["/*wrapper*/\n.wrapper {\n  display: grid;\n  grid-template-columns: 1fr max-content max-content;\n  gap: var(--mer-spacing--xs);\n  border-radius: var(--control__border-radius);\n  border: var(--control__border-width) var(--control__border-style)\n    var(--control__border-color);\n  padding: var(--control__padding-block) var(--control__padding-inline);\n\n  &:hover {\n    --control__border-color: var(--control__border-color--hover);\n  }\n  &:focus {\n  }\n}\n/*form-input*/\n.form-input {\n  --control__padding-block: 0;\n  --control__padding-inline: 0;\n  // Remove control border. We want to simulate a form-input that includes two buttons at the end.\n  --control__border-width: 0;\n  --focus__outline-width: 0;\n}\n:host(:focus-within) {\n  .wrapper {\n    --control__border-color: var(--focus__outline-color);\n  }\n}\n:host(.entity-selector--button-has-focus) {\n  .wrapper {\n    outline: none;\n  }\n}\n/*custom button icon*/\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { LabelPosition } from \"../../../common/types\";\nimport { EntityData } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/edit\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/form\"\n];\nconst SELECT_DEFAULT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"show-more-horizontal\",\n  colorType: \"primary\"\n});\nconst CLEAR_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"reset\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-entity-selector\",\n  styleUrl: \"entity-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/entity-selector\"]\n})\nexport class GxIdeEntitySelector {\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeEntitySelectorElement;\n\n  /**\n   * Adds/removes a CSS class on the host. It removes focus-within styles when\n   * focus is on a button.\n   */\n  @State() buttonHasFocus = false;\n\n  @State() iconSrc: string = null;\n\n  /**\n   * Default value for the component. Used when the 'X' button is pressed.\n   */\n  @Prop() readonly defaultValue?: EntityData | null | undefined;\n\n  /**\n   * The label caption. Only visible if \"labelPosition\" is not \"none\".\n   * I no \"labelCaption\" is provided, a generic caption \"Select Entity\" will be provided\n   */\n  @Prop() readonly labelCaption: string;\n\n  /**\n   * The label position\n   */\n  @Prop({ reflect: true }) readonly labelPosition: LabelPosition =\n    \"block-start\";\n\n  /**\n   * Callback invoked when the action button is pressed. Returns the new value.\n   */\n  @Prop() readonly selectEntityCallback!: () => Promise<EntityData>;\n\n  /**\n   * Value currently assigned.\n   */\n  @Prop({ mutable: true }) value: EntityData | null | undefined;\n  @Watch(\"value\")\n  valueChangedHandler() {\n    this.valueChanged.emit(this.value);\n    this.#updateIconSrc();\n  }\n\n  /**\n   * Emits the input value every time it changes\n   */\n  @Event() valueChanged: EventEmitter<EntityData>;\n\n  // 6.Component Lifecycle Events\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  connectedCallback() {\n    this.#updateIconSrc();\n  }\n\n  #btnClearClickHandler = () => {\n    this.value = this.defaultValue;\n  };\n\n  #btnSelectClickHandler = () => {\n    this.selectEntityCallback().then(result => {\n      this.value = result;\n    });\n  };\n\n  #buttonFocusHandler = (e: FocusEvent) => {\n    if (e.type === \"focus\") {\n      this.buttonHasFocus = true;\n    } else if (e.type === \"blur\") {\n      this.buttonHasFocus = false;\n    }\n  };\n\n  #renderControl = (): HTMLDivElement => {\n    return (\n      <div part=\"wrapper\" class=\"wrapper\">\n        <ch-edit\n          accessibleName={\n            this.labelPosition === \"none\" &&\n            this.#componentLocale.entitySelectorInputAccessibleName\n          }\n          class=\"form-input\"\n          name=\"entitySelector\"\n          startImgSrc={this.iconSrc}\n          value={this.value?.name || this.defaultValue?.name}\n          id=\"entity-input\"\n        ></ch-edit>\n\n        <button\n          part=\"button-clear\"\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.clearButtonLabel}\n          title={this.#componentLocale.clearButtonLabel}\n          onClick={this.#btnClearClickHandler}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image class=\"icon-md\" src={CLEAR_ICON}></ch-image>\n        </button>\n\n        <button\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.selectButtonLabel}\n          title={this.#componentLocale.selectButtonLabel}\n          disabled={!this.selectEntityCallback}\n          onClick={this.#btnSelectClickHandler}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image class=\"icon-md\" src={SELECT_DEFAULT_ICON}></ch-image>\n        </button>\n      </div>\n    );\n  };\n\n  #updateIconSrc = () => {\n    if (this.value && this.value.iconSrc) {\n      this.iconSrc = this.value.iconSrc;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"entity-selector--button-has-focus\": this.buttonHasFocus\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.labelPosition !== \"none\" ? (\n          <div\n            class={{\n              \"field\": true,\n              \"field-block\": this.labelPosition === \"block-start\",\n              \"field-inline\": this.labelPosition === \"inline-start\"\n            }}\n          >\n            <label class=\"label\" htmlFor=\"entity-input\">\n              {this.labelCaption ||\n                this.#componentLocale.entitySelectorInputAccessibleName}\n            </label>\n            {this.#renderControl()}\n          </div>\n        ) : (\n          this.#renderControl()\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type EntitySelectorLabels = {\n  buttonClearLabel: string;\n  buttonSelectLabel: string;\n};\n"],"version":3}
+{"file":"entity-selector.js","mappings":"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","names":[],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["/*wrapper*/\n.wrapper {\n  display: grid;\n  grid-template-columns: 1fr max-content max-content;\n  gap: var(--mer-spacing--xs);\n  border-radius: var(--control__border-radius);\n  border: var(--control__border-width) var(--control__border-style)\n    var(--control__border-color);\n  padding: var(--control__padding-block) var(--control__padding-inline);\n\n  &:hover {\n    --control__border-color: var(--control__border-color--hover);\n  }\n  &:focus {\n  }\n}\n/*form-input*/\n.form-input {\n  --control__padding-block: 0;\n  --control__padding-inline: 0;\n  // Remove control border. We want to simulate a form-input that includes two buttons at the end.\n  --control__border-width: 0;\n  --focus__outline-width: 0;\n}\n:host(:focus-within) {\n  .wrapper {\n    --control__border-color: var(--focus__outline-color);\n  }\n}\n:host(.entity-selector--button-has-focus) {\n  .wrapper {\n    outline: none;\n  }\n}\n/*custom button icon*/\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { LabelPosition } from \"../../../common/types\";\nimport { EntityData } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/edit\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/form\"\n];\nconst SELECT_DEFAULT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"show-more-horizontal\",\n  colorType: \"primary\"\n});\nconst CLEAR_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"reset\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-entity-selector\",\n  styleUrl: \"entity-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/entity-selector\"]\n})\nexport class GxIdeEntitySelector {\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeEntitySelectorElement;\n\n  /**\n   * Adds/removes a CSS class on the host. It removes focus-within styles when\n   * focus is on a button.\n   */\n  @State() buttonHasFocus = false;\n\n  @State() iconSrc: string = null;\n\n  /**\n   * Default value for the component. Used when the 'X' button is pressed.\n   */\n  @Prop() readonly defaultValue?: EntityData | null | undefined;\n\n  /**\n   * The label caption. Only visible if \"labelPosition\" is not \"none\".\n   * I no \"labelCaption\" is provided, a generic caption \"Select Entity\" will be provided\n   */\n  @Prop() readonly labelCaption?: string;\n\n  /**\n   * The label position\n   */\n  @Prop({ reflect: true }) readonly labelPosition?: LabelPosition =\n    \"block-start\";\n\n  /**\n   * This property specifies the `name` of the control when used in a form.\n   */\n  @Prop({ reflect: true }) readonly name?: string;\n\n  /**\n   * Callback invoked when the action button is pressed. Returns the new value.\n   */\n  @Prop() readonly selectEntityCallback!: () => Promise<EntityData>;\n\n  /**\n   * Value currently assigned.\n   */\n  @Prop({ mutable: true }) value: EntityData | null | undefined;\n  @Watch(\"value\")\n  valueChangedHandler() {\n    this.valueChanged.emit(this.value);\n    this.#updateIconSrc();\n  }\n\n  /**\n   * Emits the input value every time it changes\n   */\n  @Event() valueChanged: EventEmitter<EntityData>;\n\n  // 6.Component Lifecycle Events\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  connectedCallback() {\n    this.#updateIconSrc();\n  }\n\n  #btnClearClickHandler = () => {\n    this.value = this.defaultValue;\n    this.iconSrc = this.defaultValue?.iconSrc;\n  };\n\n  #btnSelectClickHandler = () => {\n    this.selectEntityCallback().then(result => {\n      this.value = result;\n    });\n  };\n\n  #buttonFocusHandler = (e: FocusEvent) => {\n    if (e.type === \"focus\") {\n      this.buttonHasFocus = true;\n    } else if (e.type === \"blur\") {\n      this.buttonHasFocus = false;\n    }\n  };\n\n  #renderControl = (): HTMLDivElement => {\n    return (\n      <div part=\"wrapper\" class=\"wrapper\">\n        <ch-edit\n          accessibleName={\n            this.labelPosition === \"none\" &&\n            this.#componentLocale.entitySelectorInputAccessibleName\n          }\n          class=\"form-input\"\n          name={this.name || this.#componentLocale.entitySelectorNameAttribute}\n          startImgSrc={this.iconSrc}\n          value={this.value?.name || this.defaultValue?.name}\n          id=\"entity-input\"\n        ></ch-edit>\n\n        <button\n          part=\"button-clear\"\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.clearButtonLabel}\n          title={this.#componentLocale.clearButtonLabel}\n          type=\"button\"\n          onClick={this.#btnClearClickHandler}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image class=\"icon-md\" src={CLEAR_ICON}></ch-image>\n        </button>\n\n        <button\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.selectButtonLabel}\n          title={this.#componentLocale.selectButtonLabel}\n          type=\"button\"\n          disabled={!this.selectEntityCallback}\n          onClick={this.#btnSelectClickHandler}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image class=\"icon-md\" src={SELECT_DEFAULT_ICON}></ch-image>\n        </button>\n      </div>\n    );\n  };\n\n  #updateIconSrc = () => {\n    if (this.value && this.value.iconSrc) {\n      this.iconSrc = this.value.iconSrc;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"entity-selector--button-has-focus\": this.buttonHasFocus\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.labelPosition !== \"none\" ? (\n          <div\n            class={{\n              \"field\": true,\n              \"field-block\": this.labelPosition === \"block-start\",\n              \"field-inline\": this.labelPosition === \"inline-start\"\n            }}\n          >\n            <label class=\"label\" htmlFor=\"entity-input\">\n              {this.labelCaption ||\n                this.#componentLocale.entitySelectorInputAccessibleName}\n            </label>\n            {this.#renderControl()}\n          </div>\n        ) : (\n          this.#renderControl()\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type EntitySelectorLabels = {\n  buttonClearLabel: string;\n  buttonSelectLabel: string;\n};\n"],"version":3}

package/dist/components/gx-ide-data-selector.js

@@ -1,181 +1,190 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$4 } from './container.js';
+import { g as getIconPath } from './assets-manager.js';
+import { d as defineCustomElement$4 } from './gx-ide-empty-state2.js';
 import { d as defineCustomElement$3 } from './entity-selector.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$2 } from './ide-loader.js';
 
-const dataSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.filter-grid{display:grid;padding:var(--spacing-comp-03);row-gap:var(--gx-ide-grid-row-gap);column-gap:var(--gx-ide-grid-column-gap);border-block-start:1px solid var(--gx-ide-container-border-color);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-areas:\"pattern-label pattern-input pattern-input pattern-input\" \"object-label object-input object-input object-input\"}.filter-grid .pattern-label{grid-area:pattern-label}.filter-grid .pattern-input{grid-area:pattern-input}.filter-grid .object-label{grid-area:object-label}.filter-grid .object-input{grid-area:object-input}.filter-grid--no-title{border-top:0}.grid-container{height:100%}ch-grid-cell{--spacing-comp-02:var(--spacing-comp-03)}.objects-count{display:flex;justify-content:space-around}.objects-count>*{flex:1;padding:var(--spacing-comp-01)}.objects-count>:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-container.loading::part(content){display:grid}";
+const dataSelectorCss = ":host{display:grid;grid-template-rows:max-content 1fr max-content;overflow:auto}.section{display:contents}.header__field-group{display:grid;grid-template-columns:1fr 1fr}.tabular-grid{contain:size}.data ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ch-tabular-grid.empty-result::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}";
 
+var __classPrivateFieldGet = (undefined && undefined.__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 = (undefined && undefined.__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;
 // 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"
+});
 const GxIdeDataSelector$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeDataSelector extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
-        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.common, 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.common, 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.common, 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;
         }
     }
     /**
@@ -185,47 +194,59 @@ const GxIdeDataSelector$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeDataSele
         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 delegatesFocus() { return true; }
     static get assetsDirs() { return ["gx-ide-assets/data-selector"]; }
     get el() { return this; }
-    static get watchers() { return {
-        "loading": ["evaluateLoading"]
-    }; }
     static get style() { return dataSelectorCss; }
 }, [17, "gx-ide-data-selector", {
+        "cancelCallback": [16],
+        "confirmCallback": [16],
+        "defaultModule": [16],
         "displayTitle": [4, "display-title"],
-        "loader": [4],
-        "selectionType": [1, "selection-type"],
-        "selectObjectCallback": [16],
         "editCallback": [16],
-        "cancelCallback": [16],
         "loadItemsCallback": [16],
+        "loader": [4],
         "newVariableCallback": [16],
-        "confirmCallback": [16],
+        "selectObjectCallback": [16],
+        "selectionType": [1, "selection-type"],
+        "loading": [32],
         "objects": [32],
         "selectedObjectsIds": [32],
-        "loading": [32],
         "suspendShortcuts": [64],
         "validate": [64]
-    }, undefined, {
-        "loading": ["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();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-data-selector", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title"];
+    const components = ["gx-ide-data-selector", "gx-ide-empty-state", "gx-ide-entity-selector", "gx-ide-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-data-selector":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeDataSelector$1);
             }
             break;
-        case "gx-ide-container":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
@@ -235,7 +256,7 @@ function defineCustomElement$1() {
                 defineCustomElement$3();
             }
             break;
-        case "gx-ide-title":
+        case "gx-ide-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }