@genexus/genexus-ide-ui 1.0.1 → 1.0.3

package/dist/genexus-ide-ui/p-a587e7ca.entry.js

@@ -0,0 +1,155 @@
+import { r as t, c as e, h as i, H as o, g as r } from "./p-aaed592c.js";
+
+import { g as s } from "./p-6df9fab1.js";
+
+import { L as n } from "./p-74d59062.js";
+
+const a = ".wrapper{display:grid;grid-template-columns:1fr max-content max-content;gap:var(--mer-spacing--xs);border-radius:var(--control__border-radius);border:var(--control__border-width) var(--control__border-style) var(--control__border-color);padding:var(--control__padding-block) var(--control__padding-inline)}.wrapper:hover{--control__border-color:var(--control__border-color--hover)}.form-input{--control__padding-block:0;--control__padding-inline:0;--control__border-width:0;--focus__outline-width:0}:host(:focus-within) .wrapper{--control__border-color:var(--focus__outline-color)}:host(.entity-selector--button-has-focus) .wrapper{outline:none}";
+
+var c = undefined && undefined.__classPrivateFieldGet || function(t, e, i, o) {
+  if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? o : i === "a" ? o.call(t) : o ? o.value : e.get(t);
+};
+
+var l = undefined && undefined.__classPrivateFieldSet || function(t, e, i, o, r) {
+  if (o === "m") throw new TypeError("Private method is not writable");
+  if (o === "a" && !r) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !r : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return o === "a" ? r.call(t, i) : r ? r.value = i : e.set(t, i), i;
+};
+
+var h, d, f, u, p, m;
+
+const b = [ "resets/box-sizing", "components/edit", "components/button", "components/icon", "utils/form" ];
+
+const w = s({
+  category: "gemini-tools",
+  name: "show-more-horizontal",
+  colorType: "primary"
+});
+
+const v = s({
+  category: "gemini-tools",
+  name: "reset",
+  colorType: "primary"
+});
+
+const _ = class {
+  constructor(o) {
+    t(this, o);
+    this.valueChanged = e(this, "valueChanged", 7);
+    h.set(this, void 0);
+    d.set(this, (() => {
+      this.value = this.defaultValue;
+    }));
+    f.set(this, (() => {
+      this.selectEntityCallback().then((t => {
+        this.value = t;
+      }));
+    }));
+    u.set(this, (t => {
+      if (t.type === "focus") {
+        this.buttonHasFocus = true;
+      } else if (t.type === "blur") {
+        this.buttonHasFocus = false;
+      }
+    }));
+    p.set(this, (() => {
+      var t, e;
+      return i("div", {
+        part: "wrapper",
+        class: "wrapper"
+      }, i("ch-edit", {
+        accessibleName: this.labelPosition === "none" && c(this, h, "f").entitySelectorInputAccessibleName,
+        class: "form-input",
+        name: "entitySelector",
+        startImgSrc: this.iconSrc,
+        value: ((t = this.value) === null || t === void 0 ? void 0 : t.name) || ((e = this.defaultValue) === null || e === void 0 ? void 0 : e.name),
+        id: "entity-input"
+      }), i("button", {
+        part: "button-clear",
+        class: "icon-button",
+        "aria-label": c(this, h, "f").clearButtonLabel,
+        title: c(this, h, "f").clearButtonLabel,
+        onClick: c(this, d, "f"),
+        onFocus: this.buttonHasFocus ? c(this, u, "f") : undefined,
+        onBlur: !this.buttonHasFocus ? c(this, u, "f") : undefined
+      }, i("ch-image", {
+        class: "icon-md",
+        src: v
+      })), i("button", {
+        class: "icon-button",
+        "aria-label": c(this, h, "f").selectButtonLabel,
+        title: c(this, h, "f").selectButtonLabel,
+        disabled: !this.selectEntityCallback,
+        onClick: c(this, f, "f"),
+        onBlur: !this.buttonHasFocus ? c(this, u, "f") : undefined,
+        onFocus: this.buttonHasFocus ? c(this, u, "f") : undefined
+      }, i("ch-image", {
+        class: "icon-md",
+        src: w
+      })));
+    }));
+    m.set(this, (() => {
+      if (this.value && this.value.iconSrc) {
+        this.iconSrc = this.value.iconSrc;
+      }
+    }));
+    this.buttonHasFocus = false;
+    this.iconSrc = null;
+    this.defaultValue = undefined;
+    this.labelCaption = undefined;
+    this.labelPosition = "block-start";
+    this.selectEntityCallback = undefined;
+    this.value = undefined;
+  }
+  valueChangedHandler() {
+    this.valueChanged.emit(this.value);
+    c(this, m, "f").call(this);
+  }
+  // 6.Component Lifecycle Events
+  async componentWillLoad() {
+    l(this, h, await n.getComponentStrings(this.el), "f");
+  }
+  connectedCallback() {
+    c(this, m, "f").call(this);
+  }
+  render() {
+    return i(o, {
+      class: {
+        "entity-selector--button-has-focus": this.buttonHasFocus
+      }
+    }, i("ch-theme", {
+      model: b
+    }), this.labelPosition !== "none" ? i("div", {
+      class: {
+        field: true,
+        "field-block": this.labelPosition === "block-start",
+        "field-inline": this.labelPosition === "inline-start"
+      }
+    }, i("label", {
+      class: "label",
+      htmlFor: "entity-input"
+    }, this.labelCaption || c(this, h, "f").entitySelectorInputAccessibleName), c(this, p, "f").call(this)) : c(this, p, "f").call(this));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/entity-selector" ];
+  }
+  get el() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      value: [ "valueChangedHandler" ]
+    };
+  }
+};
+
+h = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, p = new WeakMap, 
+m = new WeakMap;
+
+_.style = a;
+
+export { _ as gx_ide_entity_selector };
+//# sourceMappingURL=p-a587e7ca.entry.js.map

package/dist/genexus-ide-ui/p-a587e7ca.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["entitySelectorCss","CSS_BUNDLES","SELECT_DEFAULT_ICON","getIconPath","category","name","colorType","CLEAR_ICON","GxIdeEntitySelector","_GxIdeEntitySelector_componentLocale","set","this","_GxIdeEntitySelector_btnClearClickHandler","value","defaultValue","_GxIdeEntitySelector_btnSelectClickHandler","selectEntityCallback","then","result","_GxIdeEntitySelector_buttonFocusHandler","e","type","buttonHasFocus","_GxIdeEntitySelector_renderControl","h","part","class","accessibleName","labelPosition","__classPrivateFieldGet","entitySelectorInputAccessibleName","startImgSrc","iconSrc","_a","_b","id","clearButtonLabel","title","onClick","onFocus","undefined","onBlur","src","selectButtonLabel","disabled","_GxIdeEntitySelector_updateIconSrc","valueChangedHandler","valueChanged","emit","call","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","connectedCallback","render","Host","model","field","htmlFor","labelCaption"],"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"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-c147291f.js → p-aaed592c.js}

@@ -15,7 +15,7 @@ const t = /* genexus-ide-ui */ {
   cmpWillLoad: true,
   cmpWillRender: false,
   cmpWillUpdate: false,
-  connectedCallback: false,
+  connectedCallback: true,
   constructableCSS: true,
   cssAnnotations: true,
   devTools: false,
@@ -1980,6 +1980,7 @@ const setValue = (e, t, n, s) => {
         t._$$flags$$_ |= 128 /* HOST_FLAGS.isWatchReady */;
       }
       e();
+      fireConnectedCallback(t._$$lazyInstance$$_);
     }
     if (o.style) {
       // this component has styles but we haven't registered them yet
@@ -2008,7 +2009,11 @@ const setValue = (e, t, n, s) => {
   }
 };
 
-const fireConnectedCallback = e => {};
+const fireConnectedCallback = e => {
+  {
+    safeCall(e, "connectedCallback");
+  }
+};
 
 const connectedCallback = e => {
   if ((T._$$flags$$_ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
@@ -2063,8 +2068,10 @@ const connectedCallback = e => {
       // since they would have been removed when disconnected
       addHostEventListeners(e, t, n._$$listeners$$_);
       // fire off connectedCallback() on component instance
-            if (t === null || t === void 0 ? void 0 : t._$$lazyInstance$$_) ; else if (t === null || t === void 0 ? void 0 : t._$$onReadyPromise$$_) {
-        t._$$onReadyPromise$$_.then((() => fireConnectedCallback()));
+            if (t === null || t === void 0 ? void 0 : t._$$lazyInstance$$_) {
+        fireConnectedCallback(t._$$lazyInstance$$_);
+      } else if (t === null || t === void 0 ? void 0 : t._$$onReadyPromise$$_) {
+        t._$$onReadyPromise$$_.then((() => fireConnectedCallback(t._$$lazyInstance$$_)));
       }
     }
     s();
@@ -2422,4 +2429,4 @@ const nextTick = e => promiseResolve().then(e);
 const x =  queueTask(D, true);
 
 export { p as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-c147291f.js.map
+//# sourceMappingURL=p-aaed592c.js.map