@genexus/genexus-ide-ui 1.0.0 → 1.0.2

package/dist/collection/components/_helpers/entity-selector/entity-selector.js

@@ -1,74 +1,95 @@
-/* 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 _GxIdeEntitySelector_componentLocale, _GxIdeEntitySelector_btnClearClickHandler, _GxIdeEntitySelector_btnSelectClickHandler, _GxIdeEntitySelector_buttonFocusHandler, _GxIdeEntitySelector_renderControl, _GxIdeEntitySelector_updateIconSrc;
 import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+import { Locale } from "../../../common/locale";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/edit",
+    "components/button",
+    "components/icon",
+    "utils/form"
+];
+const SELECT_DEFAULT_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "show-more-horizontal",
+    colorType: "primary"
+});
+const CLEAR_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "reset",
+    colorType: "primary"
+});
 export class GxIdeEntitySelector {
     constructor() {
-        // 6.METHODS //
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.btnClearClickHandler = () => {
+        _GxIdeEntitySelector_componentLocale.set(this, void 0);
+        _GxIdeEntitySelector_btnClearClickHandler.set(this, () => {
             this.value = this.defaultValue;
-        };
-        this.btnSelectClickHandler = () => {
-            this.selectEntityCallback &&
-                this.selectEntityCallback().then(result => {
-                    this.value = result;
-                });
-        };
-        this.iconColor = () => {
-            let value;
-            if (this.value) {
-                value = this.value;
-            }
-            else if (this.defaultValue) {
-                value = this.defaultValue;
-            }
-            return (value === null || value === void 0 ? void 0 : value.iconColor) || "auto";
-        };
-        this.iconSrc = () => {
-            if (this.value) {
-                return this.value.iconSrc;
-            }
-            else if (this.defaultValue) {
-                return this.defaultValue.iconSrc;
-            }
-            return undefined;
-        };
-        this.buttonFocusHandler = (e) => {
+        });
+        _GxIdeEntitySelector_btnSelectClickHandler.set(this, () => {
+            this.selectEntityCallback().then(result => {
+                this.value = result;
+            });
+        });
+        _GxIdeEntitySelector_buttonFocusHandler.set(this, (e) => {
             if (e.type === "focus") {
                 this.buttonHasFocus = true;
             }
             else if (e.type === "blur") {
                 this.buttonHasFocus = false;
             }
-        };
-        this.accessibilityLabels = {
-            buttonClearLabel: "clears the actual value",
-            buttonSelectLabel: "displays the entity selector"
-        };
+        });
+        _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 }))));
+        });
+        _GxIdeEntitySelector_updateIconSrc.set(this, () => {
+            if (this.value && this.value.iconSrc) {
+                this.iconSrc = this.value.iconSrc;
+            }
+        });
+        this.buttonHasFocus = false;
+        this.iconSrc = null;
         this.defaultValue = undefined;
-        this.label = undefined;
-        this.labelPosition = "above";
-        this.centerLabel = false;
-        this.labelWidth = undefined;
+        this.labelPosition = "block-start";
         this.selectEntityCallback = undefined;
         this.value = undefined;
-        this.buttonHasFocus = false;
     }
-    // 4.PUBLIC PROPERTY API | WATCH'S //
-    /**
-     *
-     * @param newValue the new entity value
-     */
     valueChangedHandler() {
         this.valueChanged.emit(this.value);
+        __classPrivateFieldGet(this, _GxIdeEntitySelector_updateIconSrc, "f").call(this);
+    }
+    // 6.Component Lifecycle Events
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeEntitySelector_componentLocale, await Locale.getComponentStrings(this.el), "f");
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _GxIdeEntitySelector_updateIconSrc, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        var _a, _b, _c, _d;
         return (h(Host, { class: {
-                "gxg-entity-selector--button-has-focus": this.buttonHasFocus
-            } }, this.label && (h("gxg-label", { part: "label", labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)), h("div", { part: "wrapper", class: "wrapper" }, this.iconSrc() && (h("gxg-icon", { color: this.iconColor(), type: this.iconSrc(), part: "icon", "aria-hidden": "true", size: "small" })), h("input", { type: "text", readonly: true, part: "input input-entity", value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.name) }), h("gxg-button", { part: "button-clear", onClick: this.btnClearClickHandler, "aria-label": (_c = this.accessibilityLabels) === null || _c === void 0 ? void 0 : _c.buttonClearLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/reset" }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_d = this.accessibilityLabels) === null || _d === void 0 ? void 0 : _d.buttonSelectLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", disabled: !this.selectEntityCallback }))));
+                "entity-selector--button-has-focus": this.buttonHasFocus
+            } }, h("ch-theme", { model: CSS_BUNDLES }), this.labelPosition !== "none" ? (h("div", { class: {
+                "field": true,
+                "field-block": this.labelPosition === "block-start",
+                "field-inline": this.labelPosition === "inline-start"
+            } }, h("label", { class: "label", htmlFor: "entity-input" }, __classPrivateFieldGet(this, _GxIdeEntitySelector_componentLocale, "f").entitySelectorInputAccessibleName), __classPrivateFieldGet(this, _GxIdeEntitySelector_renderControl, "f").call(this))) : (__classPrivateFieldGet(this, _GxIdeEntitySelector_renderControl, "f").call(this))));
     }
     static get is() { return "gx-ide-entity-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -82,36 +103,15 @@ export class GxIdeEntitySelector {
             "$": ["entity-selector.css"]
         };
     }
+    static get assetsDirs() { return ["gx-ide-assets/entity-selector"]; }
     static get properties() {
         return {
-            "accessibilityLabels": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "EntitySelectorLabels",
-                    "resolved": "{ buttonClearLabel: string; buttonSelectLabel: string; }",
-                    "references": {
-                        "EntitySelectorLabels": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/entity-selector/entity-selector.tsx",
-                            "id": "src/components/_helpers/entity-selector/entity-selector.tsx::EntitySelectorLabels"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This property provides the user a way to define custom aria-label descriptions."
-                },
-                "defaultValue": "{\n    buttonClearLabel: \"clears the actual value\",\n    buttonSelectLabel: \"displays the entity selector\"\n  }"
-            },
             "defaultValue": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "EntityData | null | undefined",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",
@@ -124,37 +124,20 @@ export class GxIdeEntitySelector {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Default value to be assigned as the component's value. This value should always be used when the 'X' button is pressed."
+                    "text": "Default value for the component. Used when the 'X' button is pressed."
                 }
             },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional label (same as the label of an input)."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "LabelPosition",
-                    "resolved": "\"above\" | \"start\"",
+                    "resolved": "\"block-start\" | \"inline-start\" | \"none\"",
                     "references": {
                         "LabelPosition": {
                             "location": "import",
-                            "path": "../directory-selector/directory-selector",
-                            "id": "src/components/_helpers/directory-selector/directory-selector.tsx::LabelPosition"
+                            "path": "../../../common/types",
+                            "id": "src/common/types.ts::LabelPosition"
                         }
                     }
                 },
@@ -166,42 +149,7 @@ export class GxIdeEntitySelector {
                 },
                 "attribute": "label-position",
                 "reflect": true,
-                "defaultValue": "\"above\""
-            },
-            "centerLabel": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Centers the label"
-                },
-                "attribute": "center-label",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "labelWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label width"
-                },
-                "attribute": "label-width",
-                "reflect": false
+                "defaultValue": "\"block-start\""
             },
             "selectEntityCallback": {
                 "type": "unknown",
@@ -221,11 +169,11 @@ export class GxIdeEntitySelector {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback that will be called when the user presses the action button. Returns the new value assigned to the component."
+                    "text": "Callback invoked when the action button is pressed. Returns the new value."
                 }
             },
             "value": {
@@ -233,7 +181,7 @@ export class GxIdeEntitySelector {
                 "mutable": true,
                 "complexType": {
                     "original": "EntityData | null | undefined",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",
@@ -253,7 +201,8 @@ export class GxIdeEntitySelector {
     }
     static get states() {
         return {
-            "buttonHasFocus": {}
+            "buttonHasFocus": {},
+            "iconSrc": {}
         };
     }
     static get events() {
@@ -264,15 +213,12 @@ export class GxIdeEntitySelector {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "description",
-                            "text": "Emits the input value every time it changes"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Emits the input value every time it changes"
                 },
                 "complexType": {
                     "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",
@@ -283,6 +229,7 @@ export class GxIdeEntitySelector {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",
@@ -290,4 +237,5 @@ export class GxIdeEntitySelector {
             }];
     }
 }
+_GxIdeEntitySelector_componentLocale = new WeakMap(), _GxIdeEntitySelector_btnClearClickHandler = new WeakMap(), _GxIdeEntitySelector_btnSelectClickHandler = new WeakMap(), _GxIdeEntitySelector_buttonFocusHandler = new WeakMap(), _GxIdeEntitySelector_renderControl = new WeakMap(), _GxIdeEntitySelector_updateIconSrc = new WeakMap();
 //# sourceMappingURL=entity-selector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../../../src/components/_helpers/entity-selector/entity-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color as IconColor } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { LabelPosition } from \"../directory-selector/directory-selector\";\nimport { EntityData } from \"../../../common/types\";\n@Component({\n  tag: \"gx-ide-entity-selector\",\n  styleUrl: \"entity-selector.scss\",\n  shadow: true\n})\nexport class GxIdeEntitySelector {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   *  This property provides the user a way to define custom aria-label descriptions.\n   */\n  @Prop() readonly accessibilityLabels?: EntitySelectorLabels = {\n    buttonClearLabel: \"clears the actual value\",\n    buttonSelectLabel: \"displays the entity selector\"\n  };\n\n  /**\n   *  Default value to be assigned as the component's value. This value should always be used when the 'X' button is pressed.\n   */\n  @Prop() readonly defaultValue?: EntityData | null | undefined;\n\n  /**\n   * Optional label (same as the label of an input).\n   */\n  @Prop() readonly label: string;\n\n  /**\n   * The label position\n   */\n  @Prop({ reflect: true }) readonly labelPosition: LabelPosition = \"above\";\n\n  /**\n   * Centers the label\n   */\n  @Prop() readonly centerLabel: boolean = false;\n\n  /**\n   * The label width\n   */\n  @Prop() readonly labelWidth: string;\n\n  /**\n   * Callback that will be called when the user presses the action button. Returns the new value assigned to the component.\n   */\n  @Prop() readonly selectEntityCallback: () => Promise<EntityData>;\n\n  /**\n   * Value currently assigned.\n   */\n  @Prop({ mutable: true }) value: EntityData | null | undefined;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * This variable adds or removes a CSS class on the host, and it can be used to remove the focus-within styles from the host in the case the focus is on a button.\n   */\n\n  @State() buttonHasFocus = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   *\n   * @param newValue the new entity value\n   */\n  @Watch(\"value\")\n  valueChangedHandler() {\n    this.valueChanged.emit(this.value);\n  }\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Emits the input value every time it changes\n   */\n  @Event() valueChanged: EventEmitter<EntityData>;\n\n  // 6.METHODS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private btnClearClickHandler = () => {\n    this.value = this.defaultValue;\n  };\n\n  private btnSelectClickHandler = () => {\n    this.selectEntityCallback &&\n      this.selectEntityCallback().then(result => {\n        this.value = result;\n      });\n  };\n\n  private iconColor = (): IconColor => {\n    let value;\n    if (this.value) {\n      value = this.value;\n    } else if (this.defaultValue) {\n      value = this.defaultValue;\n    }\n    return value?.iconColor || \"auto\";\n  };\n\n  private iconSrc = (): string | undefined => {\n    if (this.value) {\n      return this.value.iconSrc;\n    } else if (this.defaultValue) {\n      return this.defaultValue.iconSrc;\n    }\n    return undefined;\n  };\n\n  private 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  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"gxg-entity-selector--button-has-focus\": this.buttonHasFocus\n        }}\n      >\n        {this.label && (\n          <gxg-label\n            part=\"label\"\n            labelPosition={this.labelPosition}\n            center={this.centerLabel}\n            width={this.labelWidth}\n          >\n            {this.label}\n          </gxg-label>\n        )}\n        <div part=\"wrapper\" class=\"wrapper\">\n          {this.iconSrc() && (\n            <gxg-icon\n              color={this.iconColor()}\n              type={this.iconSrc()}\n              part=\"icon\"\n              aria-hidden=\"true\"\n              size=\"small\"\n            ></gxg-icon>\n          )}\n          <input\n            type=\"text\"\n            readonly\n            part=\"input input-entity\"\n            value={this.value?.name || this.defaultValue?.name}\n          />\n          <gxg-button\n            part=\"button-clear\"\n            onClick={this.btnClearClickHandler}\n            aria-label={this.accessibilityLabels?.buttonClearLabel}\n            onFocus={this.buttonFocusHandler}\n            onBlur={this.buttonFocusHandler}\n            type=\"secondary-icon-only\"\n            icon=\"gemini-tools/reset\"\n          ></gxg-button>\n          <gxg-button\n            part=\"button-select\"\n            onClick={this.btnSelectClickHandler}\n            aria-label={this.accessibilityLabels?.buttonSelectLabel}\n            onFocus={this.buttonFocusHandler}\n            onBlur={this.buttonFocusHandler}\n            type=\"secondary-icon-only\"\n            icon=\"gemini-tools/show-more-horizontal\"\n            disabled={!this.selectEntityCallback}\n          ></gxg-button>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type EntitySelectorLabels = {\n  buttonClearLabel: string;\n  buttonSelectLabel: string;\n};\n"]}
+{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../../../src/components/_helpers/entity-selector/entity-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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.#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"]}

package/dist/collection/components/_helpers/entity-selector/gx-ide-assets/entity-selector/langs/entity-selector.lang.en.json

@@ -0,0 +1,6 @@
+{
+  "componentName": "Entity Selector",
+  "entitySelectorInputAccessibleName": "Select Entity",
+  "clearButtonLabel": "Clear actual value",
+  "selectButtonLabel": "Assign a new entity selector value"
+}

package/dist/collection/components/_helpers/ide-loader/ide-loader.css

@@ -1,25 +1,10 @@
-:host {
-  display: block;
-}
-
-ch-window::part(mask) {
-  overflow: hidden;
-}
-
-ch-window::part(main) {
-  height: 100%;
-}
-
-ch-window::part(window) {
-  width: 100%;
-  height: 100%;
-}
-
 .loader__wrapper {
+  position: absolute;
+  border: none;
   opacity: 0;
   transition: var(--show-transition) opacity;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   background-color: var(--gxg-ide-loader-wrapper__background-color--from);
   backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);
@@ -35,20 +20,23 @@ ch-window::part(window) {
 }
 .loader__spinner {
   border: var(--gxg-ide-loader-spinner__border);
-  border-top: var(--gxg-ide-loader-spinner__border-top);
+  border-block-start: var(--gxg-ide-loader-spinner__border-top);
   border-radius: 50%;
-  -webkit-animation: spinner 0.6s infinite linear;
   animation: spinner 0.6s infinite linear;
-  width: var(--gxg-ide-loader-spinner__width);
-  height: var(--gxg-ide-loader-spinner__width);
+  inline-size: var(--gxg-ide-loader-spinner__width);
+  block-size: var(--gxg-ide-loader-spinner__width);
   flex-shrink: 0;
+  opacity: 1;
 }
 .loader__content-wrapper {
   display: flex;
+  text-align: center;
   flex-direction: column;
   margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);
-  gap: var(--gxg-ide-loader-content-wrapper__gap);
-  max-width: var(--gxg-ide-loader-content-wrapper__max-width);
+  gap: var(--mer-spacing--xs);
+  max-block-size: var(--gxg-ide-loader-content-wrapper__max-width);
+  animation: fadeIn var(--mer-timing--fast) forwards;
+  opacity: 1;
 }
 .loader__content-wrapper--hidden {
   display: none;
@@ -56,30 +44,27 @@ ch-window::part(window) {
 
 /*background color animation*/
 @keyframes wrapper {
-  from {
+  0% {
     background-color: var(--gxg-ide-loader-wrapper__background-color--from);
   }
-  to {
+  100% {
     background-color: var(--gxg-ide-loader-wrapper__background-color--to);
   }
 }
-/*spinner animation*/
-@-webkit-keyframes spinner {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-  }
-}
 @keyframes spinner {
-  from {
+  0% {
     transform: rotate(0deg);
   }
-  to {
+  100% {
     transform: rotate(359deg);
   }
 }
 :host([display-border]) .loader__wrapper {
   border: 1px solid var(--mer-color__elevation--02);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
 }