@genexus/genexus-ide-ui 3.2.10 → 3.2.12

package/dist/genexus-ide-ui/p-2129d0d2.entry.js

@@ -0,0 +1,164 @@
+import { g as n, r as e, h as i, H as t, a as s } from "./p-9b9ccd0c.js";
+
+import { L as a } from "./p-311eedf3.js";
+
+const mapItemsToComboBoxItemModel = n => n === null || n === void 0 ? void 0 : n.map((n => ({
+  value: n.id,
+  caption: n.name
+})));
+
+const o = "button.button-secondary {\n  border-color: var(--color-border-neutral-default);\n}\n\n:host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  border-radius: var(--border-radius-m);\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: 48px;\n  transform: translateY(4px);\n  transition: var(--display-items-transtion-time) all;\n  opacity: 0;\n  position: relative;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--spacing-gap-xxl);\n  inline-size: 100%;\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--font-size-header-h2);\n  font-weight: var(--font-style-semi-bold);\n  letter-spacing: 0.02em;\n  line-height: var(--line-height-tight);\n  color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  font-size: var(--font-size-body-l);\n  font-weight: var(--font-style-regular);\n  line-height: var(--line-height-spacious);\n  color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\n  gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}";
+
+var r = undefined && undefined.__classPrivateFieldGet || function(n, e, i, t) {
+  if (i === "a" && !t) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? n !== e || !t : !e.has(n)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? t : i === "a" ? t.call(n) : t ? t.value : e.get(n);
+};
+
+var l = undefined && undefined.__classPrivateFieldSet || function(n, e, i, t, s) {
+  if (t === "m") throw new TypeError("Private method is not writable");
+  if (t === "a" && !s) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? n !== e || !s : !e.has(n)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return t === "a" ? s.call(n, i) : s ? s.value = i : e.set(n, i), i;
+};
+
+var d, c, h, m, f, p;
+
+const u = n(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+
+const g = n(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+
+const v = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box" ];
+
+const b = class {
+  constructor(n) {
+    e(this, n);
+    /**
+         * The component hard-coded strings translations.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        d.set(this, void 0);
+    c.set(this, []);
+    h.set(this, void 0);
+    m.set(this, 100);
+    f.set(this, (async () => {
+      await this.confirmCallback(r(this, h, "f").value);
+    }));
+    p.set(this, (async () => {
+      await this.cancelCallback();
+    }));
+    this.slideIsVisible = false;
+    this.itemsModelReady = false;
+    this.cancelCallback = undefined;
+    this.confirmCallback = undefined;
+    this.selectionType = "team";
+    this.items = undefined;
+  }
+  itemsChanged(n) {
+    this.slideIsVisible = false;
+    if (!(n === null || n === void 0 ? void 0 : n.length)) {
+      this.itemsModelReady = false;
+      setTimeout((() => {
+        this.slideIsVisible = true;
+      }), r(this, m, "f"));
+      return;
+    }
+    // switch step
+        setTimeout((() => {
+      l(this, c, mapItemsToComboBoxItemModel(n), "f");
+      this.itemsModelReady = true;
+    }), r(this, m, "f"));
+    // show slide
+        setTimeout((() => {
+      this.slideIsVisible = true;
+    }), r(this, m, "f") * 2);
+  }
+  async componentWillLoad() {
+    var n;
+    l(this, d, await a.getComponentStrings(this.el), "f");
+    if ((n = this.items) === null || n === void 0 ? void 0 : n.length) {
+      l(this, c, mapItemsToComboBoxItemModel(this.items), "f");
+      this.itemsModelReady = true;
+    }
+    this.el.style.setProperty("--display-items-transtion-time", r(this, m, "f").toString() + "ms");
+  }
+  componentDidLoad() {
+    this.slideIsVisible = true;
+  }
+  render() {
+    var n;
+    const e = r(this, d, "f")[this.selectionType];
+    return i(t, null, i("ch-theme", {
+      model: v
+    }), i("section", {
+      class: "slide"
+    }, i("img", {
+      src: u,
+      class: "slide__illustration",
+      alt: ""
+    }), i("div", {
+      class: {
+        slide__main: true,
+        "slide__main--visible": this.slideIsVisible
+      }
+    }, i("div", {
+      class: "slide__main-container"
+    }, this.itemsModelReady ? [ i("header", {
+      class: "slide__main-header"
+    }, i("img", {
+      src: g,
+      alt: ""
+    }), i("h2", {
+      // Split the title into two spans for better styling
+      class: "slide__main-title"
+    }, i("span", null, e.title))), i("div", {
+      class: "slide__select-item-description"
+    }, i("p", {
+      class: "body-semi-bold-l"
+    }, e.infoMessage)), i("div", {
+      class: "field-group"
+    }, i("div", {
+      class: "field field-block"
+    }, i("label", {
+      htmlFor: "items"
+    }, e.label), i("ch-combo-box-render", {
+      id: "items",
+      accessibleName: e.label,
+      class: "combo-box items-list",
+      model: r(this, c, "f"),
+      value: r(this, c, "f") && ((n = r(this, c, "f")[0]) === null || n === void 0 ? void 0 : n.value),
+      ref: n => l(this, h, n, "f")
+    }))), i("div", {
+      class: "buttons-container"
+    }, i("button", {
+      class: "button-primary continue-btn",
+      onClick: r(this, f, "f")
+    }, r(this, d, "f").confirmButtonCaption), i("button", {
+      class: "button-secondary cancel-btn",
+      onClick: r(this, p, "f")
+    }, r(this, d, "f").cancelButtonCaption)) ] : i("gx-ide-loader", {
+      show: true,
+      loaderTitle: r(this, d, "f").loader.title,
+      description: r(this, d, "f").loader.description
+    })))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/select-team-or-org" ];
+  }
+  get el() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      items: [ "itemsChanged" ]
+    };
+  }
+};
+
+d = new WeakMap, c = new WeakMap, h = new WeakMap, m = new WeakMap, f = new WeakMap, 
+p = new WeakMap;
+
+b.style = o;
+
+export { b as gx_ide_select_team_or_org };
+//# sourceMappingURL=p-2129d0d2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapItemsToComboBoxItemModel","items","map","item","value","id","caption","name","selectTeamOrOrgCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","CSS_BUNDLES","GxIdeSelectTeamOrOrg","_GxIdeSelectTeamOrOrg_componentLocale","set","this","_GxIdeSelectTeamOrOrg_itemsModel","_GxIdeSelectTeamOrOrg_chSelectItemEl","_GxIdeSelectTeamOrOrg_displayItemsTransitionTime","_GxIdeSelectTeamOrOrg_continueHandler","async","confirmCallback","__classPrivateFieldGet","_GxIdeSelectTeamOrOrg_cancelHandler","cancelCallback","itemsChanged","newItems","slideIsVisible","length","itemsModelReady","setTimeout","__classPrivateFieldSet","componentWillLoad","Locale","getComponentStrings","el","_a","style","setProperty","toString","componentDidLoad","render","kindLocale","selectionType","h","Host","model","class","src","alt","slide__main","title","infoMessage","htmlFor","label","accessibleName","ref","onClick","confirmButtonCaption","cancelButtonCaption","show","loaderTitle","loader","description"],"sources":["src/components/select-team-or-org/helpers.tsx","src/components/select-team-or-org/select-team-or-org.scss?tag=gx-ide-select-team-or-org&encapsulation=shadow","src/components/select-team-or-org/select-team-or-org.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { SelectableItem } from \"./select-team-or-org\";\n\nexport const mapItemsToComboBoxItemModel = (\n  items: SelectableItem[]\n): ComboBoxItemModel[] => {\n  return items?.map(item => {\n    return {\n      value: item.id,\n      caption: item.name\n    };\n  });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  border-radius: var(--border-radius-m);\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  overflow: hidden;\n\n  &__illustration {\n    overflow: hidden;\n    object-fit: cover;\n    object-position: left;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  &__main {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: 48px;\n    transform: translateY(4px);\n    transition: var(--display-items-transtion-time) all;\n    opacity: 0;\n\n    position: relative;\n\n    &--visible {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  &__main-container {\n    display: grid;\n    place-self: center;\n    gap: var(--spacing-gap-xxl);\n    inline-size: 100%;\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--spacing-gap-xxl);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--font-size-header-h2);\n    font-weight: var(--font-style-semi-bold);\n    letter-spacing: 0.02em;\n    line-height: var(--line-height-tight);\n    color: var(--color-text-neutral-strawberry);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: 40px;\n    font-size: var(--font-size-body-l);\n    font-weight: var(--font-style-regular);\n    line-height: var(--line-height-spacious);\n    color: var(--color-text-neutral-disabled);\n  }\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\n  gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapItemsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/combo-box\"\n];\n\n@Component({\n  tag: \"gx-ide-select-team-or-org\",\n  styleUrl: \"select-team-or-org.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-team-or-org\"]\n})\nexport class GxIdeSelectTeamOrOrg {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  #itemsModel: ComboBoxItemModel[] = [];\n  #chSelectItemEl: HTMLChComboBoxRenderElement;\n  #displayItemsTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSelectTeamOrOrgElement;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n   */\n  @State() slideIsVisible: boolean = false;\n\n  /**\n   * Defines if the items model is ready to be rendered.\n   */\n  @State() itemsModelReady: boolean = false;\n\n  /**\n   * Callback executed when the user clicks the 'Cancel' button\n   */\n  @Prop() readonly cancelCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks the 'Confirm' button\n   */\n  @Prop() readonly confirmCallback!: (itemId: string) => Promise<void>;\n\n  /**\n   * Whether the picker is selecting a team or an organization.\n   * Drives the title, info message and combo label.\n   */\n  @Prop() readonly selectionType: SelectionType = \"team\";\n\n  /**\n   * Array that contains the selectable items (teams or organizations).\n   */\n  @Prop() readonly items!: SelectableItem[];\n  @Watch(\"items\")\n  itemsChanged(newItems: SelectableItem[]) {\n    this.slideIsVisible = false;\n\n    if (!newItems?.length) {\n      this.itemsModelReady = false;\n      setTimeout(() => {\n        this.slideIsVisible = true;\n      }, this.#displayItemsTransitionTime);\n      return;\n    }\n\n    // switch step\n    setTimeout(() => {\n      this.#itemsModel = mapItemsToComboBoxItemModel(newItems);\n      this.itemsModelReady = true;\n    }, this.#displayItemsTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#displayItemsTransitionTime * 2);\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.items?.length) {\n      this.#itemsModel = mapItemsToComboBoxItemModel(this.items);\n      this.itemsModelReady = true;\n    }\n\n    this.el.style.setProperty(\n      \"--display-items-transtion-time\",\n      this.#displayItemsTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  componentDidLoad() {\n    this.slideIsVisible = true;\n  }\n\n  #continueHandler = async () => {\n    await this.confirmCallback(this.#chSelectItemEl.value);\n  };\n\n  #cancelHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  render() {\n    const kindLocale = this.#componentLocale[this.selectionType];\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"slide\">\n          <img\n            src={COPYRIGHTS_ILLUSTRATION}\n            class=\"slide__illustration\"\n            alt=\"\" // decorative\n          />\n\n          <div\n            class={{\n              \"slide__main\": true,\n              \"slide__main--visible\": this.slideIsVisible\n            }}\n          >\n            <div class=\"slide__main-container\">\n              {this.itemsModelReady ? (\n                [\n                  <header class=\"slide__main-header\">\n                    <img\n                      src={ICON_NEXT}\n                      alt=\"\" // decorative\n                    />\n                    <h2\n                      // Split the title into two spans for better styling\n                      class=\"slide__main-title\"\n                    >\n                      <span>{kindLocale.title}</span>\n                    </h2>\n                  </header>,\n                  <div class=\"slide__select-item-description\">\n                    <p class=\"body-semi-bold-l\">{kindLocale.infoMessage}</p>\n                  </div>,\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"items\">{kindLocale.label}</label>\n                      <ch-combo-box-render\n                        id=\"items\"\n                        accessibleName={kindLocale.label}\n                        class=\"combo-box items-list\"\n                        model={this.#itemsModel}\n                        value={this.#itemsModel && this.#itemsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectItemEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>,\n                  <div class=\"buttons-container\">\n                    <button\n                      class=\"button-primary continue-btn\"\n                      onClick={this.#continueHandler}\n                    >\n                      {this.#componentLocale.confirmButtonCaption}\n                    </button>\n                    <button\n                      class=\"button-secondary cancel-btn\"\n                      onClick={this.#cancelHandler}\n                    >\n                      {this.#componentLocale.cancelButtonCaption}\n                    </button>\n                  </div>\n                ]\n              ) : (\n                <gx-ide-loader\n                  show\n                  loaderTitle={this.#componentLocale.loader.title}\n                  description={this.#componentLocale.loader.description}\n                ></gx-ide-loader>\n              )}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type SelectableItem = {\n  id: string;\n  name: string;\n};\n\nexport type SelectionType = \"team\" | \"organization\";\n"],"mappings":"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"}

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

@@ -0,0 +1,281 @@
+import { r as e, h as t, H as i, a as o } from "./p-9b9ccd0c.js";
+
+import { g as a } from "./p-d42e842b.js";
+
+import "./p-6534555e.js";
+
+import "lit";
+
+import "lit/directives/when.js";
+
+import "lit/directives/if-defined.js";
+
+import { L as s } from "./p-311eedf3.js";
+
+import { c as n } from "./p-c5196b3b.js";
+
+const r = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{display:grid;block-size:100%;overflow:hidden;grid-template-rows:max-content 1fr max-content;background-color:var(--color-accent-surface-elevation-1);color:var(--color-text-neutral-default)}.section{display:contents}.hero{display:flex;align-items:flex-start;gap:var(--spacing-gap-xl);padding-block:var(--spacing-padding-l);padding-inline:var(--spacing-padding-l);border-block-end:var(--size-1) solid var(--color-border-surface-on-elevation-1)}.hero__text{flex:1;min-inline-size:0}.hero__title{margin:0;color:var(--color-text-neutral-default)}.hero__description{margin-block:var(--spacing-gap-xs) 0;margin-inline:0;color:var(--color-text-neutral-disabled);text-wrap:pretty}.hero__badge{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--border-radius-m);background-color:var(--color-accent-item-hover);color:var(--color-icon-primary-default)}.main{overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-gap-xxl);padding-block:var(--spacing-padding-l);padding-inline:var(--spacing-padding-l)}.field-section{display:flex;flex-direction:column;gap:var(--spacing-gap-l)}.field-section+.field-section{padding-block-start:var(--spacing-padding-xl);border-block-start:var(--size-1) solid var(--color-border-surface-on-elevation-1)}.field-section__head{display:flex;align-items:baseline;gap:var(--spacing-gap-m)}.field-section__title{font-family:var(--font-family-body);font-weight:var(--font-style-semi-bold);font-size:var(--font-size-caption-m);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text-neutral-neutral)}.fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--spacing-gap-l)}.field--full{grid-column:1/-1}.field--checkbox{display:flex;flex-direction:column;gap:var(--spacing-gap-xs)}.field--checkbox .field__row{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.field--checkbox .label{margin:0;cursor:pointer}.field--checkbox .field__hint{margin:0;margin-inline-start:calc(var(--spacing-gap-m) + var(--spacing-gap-m));color:var(--color-text-neutral-disabled);text-wrap:pretty}.footer{padding-block:var(--spacing-padding-m);padding-inline:var(--spacing-padding-l)}";
+
+var l = undefined && undefined.__classPrivateFieldGet || function(e, t, i, o) {
+  if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? o : i === "a" ? o.call(e) : o ? o.value : t.get(e);
+};
+
+var c = undefined && undefined.__classPrivateFieldSet || function(e, t, i, o, a) {
+  if (o === "m") throw new TypeError("Private method is not writable");
+  if (o === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !a : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return o === "a" ? a.call(e, i) : a ? a.value = i : t.set(e, i), i;
+};
+
+var d, p, h, u, f, b, g, v, m, x, w, y;
+
+const k = [ "resets/box-sizing", "components/button", "components/combo-box", "components/edit", "components/icon", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
+
+const _ = a({
+  category: "system",
+  name: "database",
+  colorType: "primary"
+});
+
+/**
+ * Name of the property that toggles integrated security. Its presence in
+ * `properties` is what drives the rendering of the Authentication section.
+ */ const W = "TRUSTED_CONNECTION";
+
+const M = "USER_ID";
+
+const j = "USER_PASSWORD";
+
+/** Category that groups the authentication-related fields. */ const z = "authentication";
+
+const C = class {
+  constructor(i) {
+    e(this, i);
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        d.set(this, void 0);
+    p.set(this, (e => {
+      var t;
+      return (t = e.value) !== null && t !== void 0 ? t : "";
+    }));
+    h.set(this, (() => {
+      var e;
+      return ((e = this.properties) !== null && e !== void 0 ? e : []).some((e => e.missing && l(this, p, "f").call(this, e).trim() === ""));
+    }));
+    u.set(this, (e => {
+      var t;
+      return ((t = e.standardValues) !== null && t !== void 0 ? t : []).map((e => ({
+        value: e,
+        caption: e
+      })));
+    }));
+    f.set(this, (e => {
+      var t;
+      return e.name === W || e.name === M || e.name === j || ((t = e.category) === null || t === void 0 ? void 0 : t.toLowerCase()) === z;
+    }));
+    /** Whether the host sent the TRUSTED_CONNECTION property. Only then is the
+         * Authentication section rendered. */    b.set(this, (() => {
+      var e;
+      return ((e = this.properties) !== null && e !== void 0 ? e : []).some((e => e.name === W));
+    }));
+    g.set(this, (e => t => {
+      var i, o;
+      const a = t.detail;
+      const s = typeof a === "string" ? a : (o = (i = t.target) === null || i === void 0 ? void 0 : i.value) !== null && o !== void 0 ? o : "";
+      this.propertyChangeCallback(e, s);
+    }));
+    v.set(this, (() => {
+      var e;
+      (e = this.cancelCallback) === null || e === void 0 ? void 0 : e.call(this);
+    }));
+    m.set(this, (() => {
+      var e;
+      (e = this.confirmCallback) === null || e === void 0 ? void 0 : e.call(this);
+    }));
+    // #region Renders
+        x.set(this, (e => {
+      const i = `field-${e.name}`;
+      const o = l(this, p, "f").call(this, e);
+      switch (e.control) {
+       case "password":
+        return t("ch-edit", {
+          id: i,
+          class: "input",
+          type: "password",
+          showPasswordButton: true,
+          debounce: n.inputDebounce,
+          value: o,
+          onInput: l(this, g, "f").call(this, e.name)
+        });
+
+       case "combo":
+        return t("ch-combo-box-render", {
+          id: i,
+          class: "combo-box",
+          value: o,
+          model: l(this, u, "f").call(this, e),
+          onInput: l(this, g, "f").call(this, e.name),
+          onChange: l(this, g, "f").call(this, e.name)
+        });
+
+       case "checkbox":
+        return t("ch-checkbox", {
+          id: i,
+          class: "checkbox",
+          value: o,
+          checkedValue: "Yes",
+          unCheckedValue: "No",
+          onInput: l(this, g, "f").call(this, e.name)
+        });
+
+       case "combo-editable":
+        return t("ch-combo-box-render", {
+          id: i,
+          class: "combo-box",
+          suggest: true,
+          suggestDebounce: n.inputDebounce,
+          value: o,
+          model: l(this, u, "f").call(this, e),
+          onInput: l(this, g, "f").call(this, e.name),
+          onChange: l(this, g, "f").call(this, e.name),
+          part: `combo-box combo-box--editable combo-box--${e.name}`
+        });
+
+       case "custom":
+       case "readonly":
+        return t("ch-edit", {
+          id: i,
+          class: "input",
+          readonly: true,
+          value: o,
+          part: `input input--${e.control} input--${e.name}`
+        });
+
+        // "text"
+               default:
+        return t("ch-edit", {
+          id: i,
+          class: "input",
+          debounce: n.inputDebounce,
+          value: o,
+          onInput: l(this, g, "f").call(this, e.name),
+          part: `input input--text input--${e.name}`
+        });
+      }
+    }));
+    w.set(this, (e => {
+      const i = `field-${e.name}`;
+      const o = e.control === "readonly" || e.control === "custom";
+      const a = e.control === "checkbox";
+      if (a) {
+        return t("div", {
+          class: "field field--checkbox field--full",
+          key: e.name
+        }, t("div", {
+          class: "field__row"
+        }, l(this, x, "f").call(this, e), t("label", {
+          class: "label",
+          htmlFor: i
+        }, e.label)), e.description && t("p", {
+          class: "field__hint body-regular-s"
+        }, e.description));
+      }
+      return t("div", {
+        class: "field field-block",
+        key: e.name
+      }, t("label", {
+        class: {
+          label: true,
+          "label--disabled": o
+        },
+        htmlFor: i
+      }, e.label), l(this, x, "f").call(this, e));
+    }));
+    y.set(this, ((e, i) => t("section", {
+      class: "field-section"
+    }, t("div", {
+      class: "field-section__head"
+    }, t("span", {
+      class: "field-section__title"
+    }, e)), t("div", {
+      class: "fields"
+    }, i.map(l(this, w, "f"))))));
+    this.properties = [];
+    this.cancelCallback = undefined;
+    this.confirmCallback = undefined;
+    this.propertyChangeCallback = undefined;
+  }
+  async componentWillLoad() {
+    c(this, d, await s.getComponentStrings(this.el), "f");
+  }
+  // #endregion Renders
+  render() {
+    var e;
+    const o = l(this, d, "f").header.title;
+    const a = l(this, d, "f").header.description;
+    const s = l(this, d, "f").sections;
+    const n = (e = this.properties) !== null && e !== void 0 ? e : [];
+    const r = l(this, b, "f").call(this);
+    // The Authentication section is only rendered when TRUSTED_CONNECTION is
+    // present; otherwise every field stays in the always-present Connection
+    // section so nothing is dropped.
+        const c = r ? n.filter(l(this, f, "f")) : [];
+    const p = r ? n.filter((e => !l(this, f, "f").call(this, e))) : n;
+    return t(i, {
+      class: "widget"
+    }, t("ch-theme", {
+      model: k
+    }), t("section", {
+      class: "section"
+    }, t("div", {
+      class: "hero"
+    }, t("div", {
+      class: "hero__text"
+    }, t("h1", {
+      class: "hero__title subtitle-semi-bold-l"
+    }, o), a && t("p", {
+      class: "hero__description body-regular-s"
+    }, a)), t("div", {
+      class: "hero__badge",
+      "aria-hidden": "true"
+    }, t("ch-image", {
+      class: "icon-xl",
+      src: _
+    }))), t("div", {
+      class: "main scrollable"
+    }, p.length > 0 && l(this, y, "f").call(this, s.connection, p), r && c.length > 0 && l(this, y, "f").call(this, s.authentication, c)), t("footer", {
+      class: "dialog-footer-with-border footer"
+    }, t("div", {
+      class: "buttons-spacer"
+    }, t("button", {
+      class: "button-secondary",
+      id: "button-cancel",
+      type: "button",
+      onClick: l(this, v, "f"),
+      part: "button-cancel"
+    }, l(this, d, "f").footer.btnCancel), t("button", {
+      class: "button-primary",
+      id: "button-confirm",
+      type: "button",
+      disabled: l(this, h, "f").call(this),
+      onClick: l(this, m, "f"),
+      part: "button-confirm"
+    }, l(this, d, "f").footer.btnConfirm)))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/db-properties-configurator" ];
+  }
+  get el() {
+    return o(this);
+  }
+};
+
+d = new WeakMap, p = new WeakMap, h = new WeakMap, u = new WeakMap, f = new WeakMap, 
+b = new WeakMap, g = new WeakMap, v = new WeakMap, m = new WeakMap, x = new WeakMap, 
+w = new WeakMap, y = new WeakMap;
+
+C.style = r;
+
+export { C as gx_ide_db_properties_configurator };
+//# sourceMappingURL=p-e759cfdb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dbPropertiesConfiguratorCss","CSS_BUNDLES","DATABASE_ICON","getIconPath","category","name","colorType","TRUSTED_CONNECTION","USER_ID","USER_PASSWORD","AUTH_CATEGORY","GxIdeDbPropertiesConfigurator","_GxIdeDbPropertiesConfigurator_componentLocale","set","this","_GxIdeDbPropertiesConfigurator_getValue","field","_a","value","_GxIdeDbPropertiesConfigurator_hasPendingRequired","properties","some","missing","__classPrivateFieldGet","call","trim","_GxIdeDbPropertiesConfigurator_buildComboModel","standardValues","map","caption","_GxIdeDbPropertiesConfigurator_isAuthField","toLowerCase","_GxIdeDbPropertiesConfigurator_hasTrustedConnection","_GxIdeDbPropertiesConfigurator_valueChangeHandler","event","detail","_b","target","propertyChangeCallback","_GxIdeDbPropertiesConfigurator_cancelButtonClickedHandler","cancelCallback","_GxIdeDbPropertiesConfigurator_confirmButtonClickedHandler","confirmCallback","_GxIdeDbPropertiesConfigurator_renderControl","fieldId","control","h","id","class","type","showPasswordButton","debounce","config","inputDebounce","onInput","model","onChange","checkedValue","unCheckedValue","suggest","suggestDebounce","part","readonly","_GxIdeDbPropertiesConfigurator_renderField","isReadonly","isCheckbox","key","htmlFor","label","description","_GxIdeDbPropertiesConfigurator_renderSection","title","fields","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","render","header","sections","allFields","hasAuthSection","authFields","filter","connectionFields","Host","src","length","connection","authentication","onClick","footer","btnCancel","disabled","btnConfirm"],"sources":["src/components/db-properties-configurator/db-properties-configurator.scss?tag=gx-ide-db-properties-configurator&encapsulation=shadow","src/components/db-properties-configurator/db-properties-configurator.tsx"],"sourcesContent":["@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n// The component reproduces the Mercury \"Set required properties\" connection\n// dialog. Real Mercury classes (.dialog-header-with-border, .field-group-\n// justified-end, .label, .input, .combo-box, .button-*, typography) come from\n// the loaded bundles; the rules below only add the scaffolding Mercury does\n// not define (hero banner, badge, close button, field help) using DS tokens.\n\n:host {\n  display: grid;\n  block-size: 100%;\n  overflow: hidden;\n  grid-template-rows: max-content 1fr max-content;\n  background-color: var(--color-accent-surface-elevation-1);\n  color: var(--color-text-neutral-default);\n}\n\n.section {\n  // section is just for semantics; the host owns the grid.\n  display: contents;\n}\n\n// #region Hero\n.hero {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--spacing-gap-xl);\n  padding-block: var(--spacing-padding-l);\n  padding-inline: var(--spacing-padding-l);\n  border-block-end: var(--size-1) solid\n    var(--color-border-surface-on-elevation-1);\n}\n\n.hero__text {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.hero__title {\n  margin: 0;\n  color: var(--color-text-neutral-default);\n}\n\n.hero__description {\n  margin-block: var(--spacing-gap-xs) 0;\n  margin-inline: 0;\n  color: var(--color-text-neutral-disabled);\n  text-wrap: pretty;\n}\n\n.hero__badge {\n  flex: none;\n  display: grid;\n  place-items: center;\n  inline-size: 44px;\n  block-size: 44px;\n  border-radius: var(--border-radius-m);\n  background-color: var(--color-accent-item-hover);\n  color: var(--color-icon-primary-default);\n}\n// #endregion Hero\n\n// #region Body\n.main {\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-xxl);\n  padding-block: var(--spacing-padding-l);\n  padding-inline: var(--spacing-padding-l);\n}\n\n// Field section: a quiet uppercase header + its field grid. Sections after\n// the first get a divider so the body reads as structured groups.\n.field-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-l);\n}\n\n.field-section + .field-section {\n  padding-block-start: var(--spacing-padding-xl);\n  border-block-start: var(--size-1) solid\n    var(--color-border-surface-on-elevation-1);\n}\n\n.field-section__head {\n  display: flex;\n  align-items: baseline;\n  gap: var(--spacing-gap-m);\n}\n\n.field-section__title {\n  font-family: var(--font-family-body);\n  font-weight: var(--font-style-semi-bold);\n  font-size: var(--font-size-caption-m);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--color-text-neutral-neutral);\n}\n\n// Two-column field grid. Each field occupies one column; checkbox fields\n// (and any other field marked as full-width) span the entire row, forcing\n// the following fields to wrap onto the next row.\n.fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--spacing-gap-l);\n}\n\n.field--full {\n  grid-column: 1 / -1;\n}\n\n// Inline checkbox field: control + label on the same row, optional help text\n// flows below aligned with the label.\n.field--checkbox {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-xs);\n}\n\n.field--checkbox .field__row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n}\n\n.field--checkbox .label {\n  margin: 0;\n  cursor: pointer;\n}\n\n// Help text below a checkbox, indented to align with the label past the box.\n.field--checkbox .field__hint {\n  margin: 0;\n  margin-inline-start: calc(var(--spacing-gap-m) + var(--spacing-gap-m));\n  color: var(--color-text-neutral-disabled);\n  text-wrap: pretty;\n}\n// #endregion Body\n\n// #region Footer\n.footer {\n  padding-block: var(--spacing-padding-m);\n  padding-inline: var(--spacing-padding-l);\n}\n// #endregion Footer\n","import { Component, Host, Prop, Element, h } from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/combo-box\",\n  \"components/edit\",\n  \"components/icon\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst DATABASE_ICON = getIconPath({\n  category: \"system\",\n  name: \"database\",\n  colorType: \"primary\"\n});\n\n/**\n * Name of the property that toggles integrated security. Its presence in\n * `properties` is what drives the rendering of the Authentication section.\n */\nconst TRUSTED_CONNECTION = \"TRUSTED_CONNECTION\";\nconst USER_ID = \"USER_ID\";\nconst USER_PASSWORD = \"USER_PASSWORD\";\n\n/** Category that groups the authentication-related fields. */\nconst AUTH_CATEGORY = \"authentication\";\n\n@Component({\n  tag: \"gx-ide-db-properties-configurator\",\n  styleUrl: \"db-properties-configurator.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/db-properties-configurator\"]\n})\nexport class GxIdeDbPropertiesConfigurator {\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeDbPropertiesConfiguratorElement;\n\n  /**\n   * The list of properties to configure. Acts as the single source of truth:\n   * the dialog reads each value from `DSPropertyField.value` and notifies the\n   * host of every edit through `propertyChangeCallback`.\n   */\n  @Prop() readonly properties: DSPropertyField[] = [];\n\n  /**\n   * Callback invoked when the user cancels the configuration.\n   */\n  @Prop() readonly cancelCallback!: CancelCallback;\n\n  /**\n   * Callback invoked when the user confirms the configuration.\n   */\n  @Prop() readonly confirmCallback!: ConfirmCallback;\n\n  /**\n   * Callback invoked on every input change. Receives the name of the\n   * property that changed and its new value. The host is expected to apply\n   * the change and push an updated `properties` array back to the component.\n   */\n  @Prop() readonly propertyChangeCallback!: PropertyChangeCallback;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  #getValue = (field: DSPropertyField): string => field.value ?? \"\";\n\n  #hasPendingRequired = (): boolean =>\n    (this.properties ?? []).some(\n      field => field.missing && this.#getValue(field).trim() === \"\"\n    );\n\n  #buildComboModel = (field: DSPropertyField): ComboBoxModel =>\n    (field.standardValues ?? []).map(value => ({ value, caption: value }));\n\n  #isAuthField = (field: DSPropertyField): boolean =>\n    field.name === TRUSTED_CONNECTION ||\n    field.name === USER_ID ||\n    field.name === USER_PASSWORD ||\n    field.category?.toLowerCase() === AUTH_CATEGORY;\n\n  /** Whether the host sent the TRUSTED_CONNECTION property. Only then is the\n   * Authentication section rendered. */\n  #hasTrustedConnection = (): boolean =>\n    (this.properties ?? []).some(field => field.name === TRUSTED_CONNECTION);\n\n  #valueChangeHandler =\n    (name: string) => (event: CustomEvent<string> | InputEvent) => {\n      const detail = (event as CustomEvent<string>).detail;\n      const value =\n        typeof detail === \"string\"\n          ? detail\n          : ((event.target as HTMLChEditElement)?.value ?? \"\");\n      this.propertyChangeCallback(name, value);\n    };\n\n  #cancelButtonClickedHandler = () => {\n    this.cancelCallback?.();\n  };\n\n  #confirmButtonClickedHandler = () => {\n    this.confirmCallback?.();\n  };\n\n  // #region Renders\n\n  #renderControl = (field: DSPropertyField) => {\n    const fieldId = `field-${field.name}`;\n    const value = this.#getValue(field);\n\n    switch (field.control) {\n      case \"password\":\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            type=\"password\"\n            showPasswordButton\n            debounce={config.inputDebounce}\n            value={value}\n            onInput={this.#valueChangeHandler(field.name)}\n          ></ch-edit>\n        );\n\n      case \"combo\":\n        return (\n          <ch-combo-box-render\n            id={fieldId}\n            class=\"combo-box\"\n            value={value}\n            model={this.#buildComboModel(field)}\n            onInput={this.#valueChangeHandler(field.name)}\n            onChange={this.#valueChangeHandler(field.name)}\n          ></ch-combo-box-render>\n        );\n\n      case \"checkbox\":\n        return (\n          <ch-checkbox\n            id={fieldId}\n            class=\"checkbox\"\n            value={value}\n            checkedValue=\"Yes\"\n            unCheckedValue=\"No\"\n            onInput={this.#valueChangeHandler(field.name)}\n          ></ch-checkbox>\n        );\n\n      case \"combo-editable\":\n        return (\n          <ch-combo-box-render\n            id={fieldId}\n            class=\"combo-box\"\n            suggest\n            suggestDebounce={config.inputDebounce}\n            value={value}\n            model={this.#buildComboModel(field)}\n            onInput={this.#valueChangeHandler(field.name)}\n            onChange={this.#valueChangeHandler(field.name)}\n            part={`combo-box combo-box--editable combo-box--${field.name}`}\n          ></ch-combo-box-render>\n        );\n\n      case \"custom\":\n      case \"readonly\":\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            readonly\n            value={value}\n            part={`input input--${field.control} input--${field.name}`}\n          ></ch-edit>\n        );\n\n      // \"text\"\n      default:\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            debounce={config.inputDebounce}\n            value={value}\n            onInput={this.#valueChangeHandler(field.name)}\n            part={`input input--text input--${field.name}`}\n          ></ch-edit>\n        );\n    }\n  };\n\n  #renderField = (field: DSPropertyField) => {\n    const fieldId = `field-${field.name}`;\n    const isReadonly =\n      field.control === \"readonly\" || field.control === \"custom\";\n    const isCheckbox = field.control === \"checkbox\";\n\n    if (isCheckbox) {\n      return (\n        <div class=\"field field--checkbox field--full\" key={field.name}>\n          <div class=\"field__row\">\n            {this.#renderControl(field)}\n            <label class=\"label\" htmlFor={fieldId}>\n              {field.label}\n            </label>\n          </div>\n          {field.description && (\n            <p class=\"field__hint body-regular-s\">{field.description}</p>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"field field-block\" key={field.name}>\n        <label\n          class={{ \"label\": true, \"label--disabled\": isReadonly }}\n          htmlFor={fieldId}\n        >\n          {field.label}\n        </label>\n\n        {this.#renderControl(field)}\n      </div>\n    );\n  };\n\n  #renderSection = (title: string, fields: DSPropertyField[]) => (\n    <section class=\"field-section\">\n      <div class=\"field-section__head\">\n        <span class=\"field-section__title\">{title}</span>\n      </div>\n      <div class=\"fields\">{fields.map(this.#renderField)}</div>\n    </section>\n  );\n\n  // #endregion Renders\n\n  render() {\n    const title = this.#componentLocale.header.title;\n    const description = this.#componentLocale.header.description;\n    const sections = this.#componentLocale.sections;\n\n    const allFields = this.properties ?? [];\n    const hasAuthSection = this.#hasTrustedConnection();\n\n    // The Authentication section is only rendered when TRUSTED_CONNECTION is\n    // present; otherwise every field stays in the always-present Connection\n    // section so nothing is dropped.\n    const authFields = hasAuthSection\n      ? allFields.filter(this.#isAuthField)\n      : [];\n    const connectionFields = hasAuthSection\n      ? allFields.filter(field => !this.#isAuthField(field))\n      : allFields;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <div class=\"hero\">\n            <div class=\"hero__text\">\n              <h1 class=\"hero__title subtitle-semi-bold-l\">{title}</h1>\n              {description && (\n                <p class=\"hero__description body-regular-s\">{description}</p>\n              )}\n            </div>\n            <div class=\"hero__badge\" aria-hidden=\"true\">\n              <ch-image class=\"icon-xl\" src={DATABASE_ICON}></ch-image>\n            </div>\n          </div>\n\n          <div class=\"main scrollable\">\n            {connectionFields.length > 0 &&\n              this.#renderSection(sections.connection, connectionFields)}\n\n            {hasAuthSection &&\n              authFields.length > 0 &&\n              this.#renderSection(sections.authentication, authFields)}\n          </div>\n\n          <footer class=\"dialog-footer-with-border footer\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                id=\"button-cancel\"\n                type=\"button\"\n                onClick={this.#cancelButtonClickedHandler}\n                part=\"button-cancel\"\n              >\n                {this.#componentLocale.footer.btnCancel}\n              </button>\n              <button\n                class=\"button-primary\"\n                id=\"button-confirm\"\n                type=\"button\"\n                disabled={this.#hasPendingRequired()}\n                onClick={this.#confirmButtonClickedHandler}\n                part=\"button-confirm\"\n              >\n                {this.#componentLocale.footer.btnConfirm}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type DSControlKind =\n  | \"checkbox\"\n  | \"text\"\n  | \"password\"\n  | \"combo\"\n  | \"combo-editable\"\n  | \"custom\"\n  | \"readonly\";\n\nexport interface DSPropertyField {\n  /** `PropertyData.name` — key used to set the property value. */\n  name: string;\n  /** `definition.displayName`. */\n  label: string;\n  /** `definition.description` (rendered below the control). */\n  description?: string;\n  /** `definition.category` (optional grouping). */\n  category?: string;\n\n  /** Control resolved by the host. */\n  control: DSControlKind;\n\n  /** `PropertyData.value` (masked when password). */\n  value: string;\n  /** `required && isDefault` (host detection). */\n  missing: boolean;\n\n  // combos:\n  /** `PropertyData.standardValues`. */\n  standardValues?: string[];\n  /** `PropertyData.isStandardValuesExclusive`. */\n  exclusive?: boolean;\n}\n\nexport type CancelCallback = () => void | Promise<void>;\n\nexport type ConfirmCallback = () => void | Promise<void>;\n\nexport type PropertyChangeCallback = (\n  name: string,\n  value: string\n) => void | Promise<void>;\n"],"mappings":"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"}

package/dist/types/components/db-properties-configurator/db-properties-configurator.d.ts

@@ -0,0 +1,50 @@
+export declare class GxIdeDbPropertiesConfigurator {
+    #private;
+    el: HTMLGxIdeDbPropertiesConfiguratorElement;
+    /**
+     * The list of properties to configure. Acts as the single source of truth:
+     * the dialog reads each value from `DSPropertyField.value` and notifies the
+     * host of every edit through `propertyChangeCallback`.
+     */
+    readonly properties: DSPropertyField[];
+    /**
+     * Callback invoked when the user cancels the configuration.
+     */
+    readonly cancelCallback: CancelCallback;
+    /**
+     * Callback invoked when the user confirms the configuration.
+     */
+    readonly confirmCallback: ConfirmCallback;
+    /**
+     * Callback invoked on every input change. Receives the name of the
+     * property that changed and its new value. The host is expected to apply
+     * the change and push an updated `properties` array back to the component.
+     */
+    readonly propertyChangeCallback: PropertyChangeCallback;
+    componentWillLoad(): Promise<void>;
+    render(): any;
+}
+export type DSControlKind = "checkbox" | "text" | "password" | "combo" | "combo-editable" | "custom" | "readonly";
+export interface DSPropertyField {
+    /** `PropertyData.name` — key used to set the property value. */
+    name: string;
+    /** `definition.displayName`. */
+    label: string;
+    /** `definition.description` (rendered below the control). */
+    description?: string;
+    /** `definition.category` (optional grouping). */
+    category?: string;
+    /** Control resolved by the host. */
+    control: DSControlKind;
+    /** `PropertyData.value` (masked when password). */
+    value: string;
+    /** `required && isDefault` (host detection). */
+    missing: boolean;
+    /** `PropertyData.standardValues`. */
+    standardValues?: string[];
+    /** `PropertyData.isStandardValuesExclusive`. */
+    exclusive?: boolean;
+}
+export type CancelCallback = () => void | Promise<void>;
+export type ConfirmCallback = () => void | Promise<void>;
+export type PropertyChangeCallback = (name: string, value: string) => void | Promise<void>;

package/dist/types/components/select-team-or-org/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ComboBoxItemModel } from "@genexus/chameleon-controls-library/dist/types/components/combo-box/types";
+import { SelectableItem } from "./select-team-or-org";
+export declare const mapItemsToComboBoxItemModel: (items: SelectableItem[]) => ComboBoxItemModel[];

package/dist/types/components/select-team-or-org/select-team-or-org.d.ts

@@ -0,0 +1,38 @@
+export declare class GxIdeSelectTeamOrOrg {
+    #private;
+    el: HTMLGxIdeSelectTeamOrOrgElement;
+    /**
+     * Defines if the main slide is visible or not. Used for smooth transitions between slides.
+     */
+    slideIsVisible: boolean;
+    /**
+     * Defines if the items model is ready to be rendered.
+     */
+    itemsModelReady: boolean;
+    /**
+     * Callback executed when the user clicks the 'Cancel' button
+     */
+    readonly cancelCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user clicks the 'Confirm' button
+     */
+    readonly confirmCallback: (itemId: string) => Promise<void>;
+    /**
+     * Whether the picker is selecting a team or an organization.
+     * Drives the title, info message and combo label.
+     */
+    readonly selectionType: SelectionType;
+    /**
+     * Array that contains the selectable items (teams or organizations).
+     */
+    readonly items: SelectableItem[];
+    itemsChanged(newItems: SelectableItem[]): void;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    render(): any;
+}
+export type SelectableItem = {
+    id: string;
+    name: string;
+};
+export type SelectionType = "team" | "organization";

package/dist/types/components/sign-in-organization/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ComboBoxItemModel } from "@genexus/chameleon-controls-library/dist/types/components/combo-box/types";
+import { OrganizationData } from "./sign-in-organization";
+export declare const mapOrganizationsToComboBoxItemModel: (organizations?: OrganizationData[]) => ComboBoxItemModel[] | undefined;