@genexus/genexus-ide-ui 3.2.9 → 3.2.11

package/dist/genexus-ide-ui/{p-1d44dd0a.entry.js → p-15b1c9be.entry.js}

@@ -1,8 +1,8 @@
-import { g as i, r as e, h as n, H as s, a as t } from "./p-9b9ccd0c.js";
+import { g as i, r as n, h as e, H as s, a as t } from "./p-9b9ccd0c.js";
 
 import { L as a } from "./p-311eedf3.js";
 
-const mapTeamsToComboBoxItemModel = i => {
+const mapOrganizationsToComboBoxItemModel = i => {
   if (!i) {
     return [];
   }
@@ -12,22 +12,22 @@ const mapTeamsToComboBoxItemModel = i => {
   })));
 };
 
-const l = ":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  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: var(--dialog-border-radius, 16px);\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(--switch-step-transtion-time) all;\n  opacity: 0;\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  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  letter-spacing: 0.02em;\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  color: var(--color-text-neutral-disabled);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\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}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
+const o = ":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  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: var(--dialog-border-radius, 16px);\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(--switch-step-transtion-time) all;\n  opacity: 0;\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  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  letter-spacing: 0.02em;\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  color: var(--color-text-neutral-disabled);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\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}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
 
-var r = undefined && undefined.__classPrivateFieldGet || function(i, e, n, s) {
-  if (n === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof e === "function" ? i !== e || !s : !e.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return n === "m" ? s : n === "a" ? s.call(i) : s ? s.value : e.get(i);
+var r = undefined && undefined.__classPrivateFieldGet || function(i, n, e, s) {
+  if (e === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof n === "function" ? i !== n || !s : !n.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return e === "m" ? s : e === "a" ? s.call(i) : s ? s.value : n.get(i);
 };
 
-var o = undefined && undefined.__classPrivateFieldSet || function(i, e, n, s, t) {
+var l = undefined && undefined.__classPrivateFieldSet || function(i, n, e, s, t) {
   if (s === "m") throw new TypeError("Private method is not writable");
   if (s === "a" && !t) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof e === "function" ? i !== e || !t : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return s === "a" ? t.call(i, n) : t ? t.value = n : e.set(i, n), n;
+  if (typeof n === "function" ? i !== n || !t : !n.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? t.call(i, e) : t ? t.value = e : n.set(i, e), e;
 };
 
-var h, c, d, p, f, m, u, g, b, x, w, v, k, _;
+var h, c, d, p, f, m, g, u, b, x, w, v, k, _;
 
 const y = i(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 
@@ -37,51 +37,51 @@ const W = [ "resets/box-sizing", "utils/typography", "components/button", "compo
 
 const M = "on";
 
-const T = class {
+const C = class {
   constructor(i) {
-    e(this, i);
+    n(this, i);
     /**
          * The component hard-coded strings translations.
          */
     // eslint-disable-next-line @stencil-community/own-props-must-be-private
         h.set(this, void 0);
-    // Select User Team References :
+    // Select Organization References :
         c.set(this, []);
     d.set(this, void 0);
     p.set(this, 100);
     f.set(this, void 0);
     m.set(this, void 0);
-    u.set(this, (() => {
+    g.set(this, (() => {
       if (this.authStep === "signIn") {
         this.signInCallback();
-      } else if (this.authStep === "selectUserTeam") {
-        r(this, g, "f").call(this);
+      } else if (this.authStep === "selectOrganization") {
+        r(this, u, "f").call(this);
       }
     }));
-    g.set(this, (async () => {
+    u.set(this, (async () => {
       await this.continueCallback(r(this, d, "f").value);
     }));
-    b.set(this, (() => n("header", {
+    b.set(this, (() => e("header", {
       class: "slide__main-header"
-    }, n("img", {
+    }, e("img", {
       src: z,
       alt: ""
-    }), n("h2", {
+    }), e("h2", {
       // Split the title into two spans for better styling
       class: "slide__main-title heading-2"
-    }, n("span", null, r(this, h, "f")[this.authStepInternal].titlePart1), n("span", null, r(this, h, "f")[this.authStepInternal].titlePart2)))));
+    }, e("span", null, r(this, h, "f")[this.authStepInternal].titlePart1), e("span", null, r(this, h, "f")[this.authStepInternal].titlePart2)))));
     x.set(this, (() => {
       const i = this.authStep === "signIn" && this.termsConfirmationRequired && !this.termsAndConditionsAccepted;
-      return n("div", null, n("button", {
+      return e("div", null, e("button", {
         class: "button-primary main-btn",
-        onClick: r(this, u, "f"),
+        onClick: r(this, g, "f"),
         disabled: i
       }, r(this, h, "f")[this.authStepInternal].buttonCaption));
     }));
     w.set(this, (() => {
       const i = r(this, f, "f").value === M;
-      const e = r(this, m, "f").value === M;
-      this.termsAndConditionsAccepted = i && e;
+      const n = r(this, m, "f").value === M;
+      this.termsAndConditionsAccepted = i && n;
     }));
     v.set(this, (i => {
       i.preventDefault();
@@ -94,71 +94,71 @@ const T = class {
     _.set(this, (() => {
       var i;
       if (this.authStepInternal === "signIn") {
-        return [ r(this, b, "f").call(this), n("p", {
+        return [ r(this, b, "f").call(this), e("p", {
           class: "body-regular-l"
-        }, r(this, h, "f").signIn.description), this.termsConfirmationRequired && n("div", {
+        }, r(this, h, "f").signIn.description), this.termsConfirmationRequired && e("div", {
           class: "field-group"
-        }, n("div", {
+        }, e("div", {
           // terms and conditions
           class: "field field-inline"
-        }, n("ch-checkbox", {
+        }, e("ch-checkbox", {
           checkedValue: M,
           id: "terms-and-conditions",
           class: "checkbox",
-          ref: i => o(this, f, i, "f"),
+          ref: i => l(this, f, i, "f"),
           onInput: r(this, w, "f")
-        }), n("span", null, n("label", {
+        }), e("span", null, e("label", {
           htmlFor: "terms-and-conditions",
           class: "label label-agreement"
-        }, r(this, h, "f").agreement.termsAndConditionsLabel, n("span", {
+        }, r(this, h, "f").agreement.termsAndConditionsLabel, e("span", {
           class: {
             hyperlink: !!this.termsCallback
           },
           onClick: this.termsCallback && r(this, v, "f")
-        }, r(this, h, "f").agreement.termsAndConditionsLink)))), n("div", {
+        }, r(this, h, "f").agreement.termsAndConditionsLink)))), e("div", {
           // privacy policy
           class: "field field-inline"
-        }, n("ch-checkbox", {
+        }, e("ch-checkbox", {
           checkedValue: M,
           id: "privacy-policy",
           class: "checkbox",
-          ref: i => o(this, m, i, "f"),
+          ref: i => l(this, m, i, "f"),
           onInput: r(this, w, "f")
-        }), n("span", null, n("label", {
+        }), e("span", null, e("label", {
           htmlFor: "privacy-policy",
           class: "label label-agreement"
-        }, r(this, h, "f").agreement.privacyAndPolicyLabel, n("span", {
+        }, r(this, h, "f").agreement.privacyAndPolicyLabel, e("span", {
           class: {
             hyperlink: !!this.privacyCallback
           },
           onClick: this.privacyCallback && r(this, k, "f")
         }, r(this, h, "f").agreement.privacyAndPolicyLink))))), r(this, x, "f").call(this) ];
-      } else if (this.authStepInternal === "fetchUserTeams" || this.authStepInternal === "settingUpSession") {
-        const i = this.authStepInternal === "fetchUserTeams" ? r(this, h, "f").loader.fetchingTeamsTitle : r(this, h, "f").loader.settingUpSessionTitle;
-        const e = this.authStepInternal === "fetchUserTeams" ? r(this, h, "f").loader.fetchingTeamsDescription : r(this, h, "f").loader.settingUpDescription;
-        return n("gx-ide-loader", {
+      } else if (this.authStepInternal === "fetchOrganizations" || this.authStepInternal === "settingUpSession") {
+        const i = this.authStepInternal === "fetchOrganizations" ? r(this, h, "f").loader.fetchingOrganizationsTitle : r(this, h, "f").loader.settingUpSessionTitle;
+        const n = this.authStepInternal === "fetchOrganizations" ? r(this, h, "f").loader.fetchingOrganizationsDescription : r(this, h, "f").loader.settingUpDescription;
+        return e("gx-ide-loader", {
           show: true,
           loaderTitle: i,
-          description: e
+          description: n
         });
-      } else if (this.authStepInternal === "selectUserTeam") {
-        return [ r(this, b, "f").call(this), n("div", {
-          class: "slide__select-team-description"
-        }, n("p", {
+      } else if (this.authStepInternal === "selectOrganization") {
+        return [ r(this, b, "f").call(this), e("div", {
+          class: "slide__select-organization-description"
+        }, e("p", {
           class: "body-semi-bold-l"
-        }, r(this, h, "f").selectUserTeam.infoMessage)), n("div", {
+        }, r(this, h, "f").selectOrganization.infoMessage)), e("div", {
           class: "field-group"
-        }, n("div", {
+        }, e("div", {
           class: "field field-block"
-        }, n("label", {
-          htmlFor: "teams"
-        }, r(this, h, "f").selectUserTeam.label), n("ch-combo-box-render", {
-          id: "teams",
-          accessibleName: "Teams",
-          class: "combo-box teams-list",
+        }, e("label", {
+          htmlFor: "organizations"
+        }, r(this, h, "f").selectOrganization.label), e("ch-combo-box-render", {
+          id: "organizations",
+          accessibleName: "Organizations",
+          class: "combo-box organizations-list",
           model: r(this, c, "f"),
           value: (i = r(this, c, "f")[0]) === null || i === void 0 ? void 0 : i.value,
-          ref: i => o(this, d, i, "f")
+          ref: i => l(this, d, i, "f")
         }))), r(this, x, "f").call(this) ];
       }
     }));
@@ -169,7 +169,7 @@ const T = class {
     this.continueCallback = undefined;
     this.signInCallback = undefined;
     this.termsConfirmationRequired = false;
-    this.teams = undefined;
+    this.organizations = undefined;
     this.termsCallback = undefined;
     this.privacyCallback = undefined;
   }
@@ -184,36 +184,36 @@ const T = class {
       this.slideIsVisible = true;
     }), r(this, p, "f") * 2);
   }
-  teamsChanged(i) {
-    o(this, c, mapTeamsToComboBoxItemModel(i), "f");
+  organizationsChanged(i) {
+    l(this, c, mapOrganizationsToComboBoxItemModel(i), "f");
   }
   async componentWillLoad() {
-    o(this, h, await a.getComponentStrings(this.el), "f");
+    l(this, h, await a.getComponentStrings(this.el), "f");
     this.el.style.setProperty("--switch-step-transtion-time", r(this, p, "f").toString() + "ms");
     // Initialize values
         this.authStepInternal = this.authStep;
-    this.teamsChanged(this.teams);
+    this.organizationsChanged(this.organizations);
   }
   render() {
-    return n(s, null, n("ch-theme", {
+    return e(s, null, e("ch-theme", {
       model: W
-    }), n("section", {
+    }), e("section", {
       class: "slide"
-    }, n("img", {
+    }, e("img", {
       src: y,
       class: "slide__illustration",
       alt: ""
-    }), n("div", {
+    }), e("div", {
       class: {
         slide__main: true,
         "slide__main--visible": this.slideIsVisible
       }
-    }, n("div", {
+    }, e("div", {
       class: "slide__main-container"
     }, r(this, _, "f").call(this)))));
   }
   static get assetsDirs() {
-    return [ "gx-ide-assets/sign-in-team" ];
+    return [ "gx-ide-assets/sign-in-organization" ];
   }
   get el() {
     return t(this);
@@ -221,16 +221,16 @@ const T = class {
   static get watchers() {
     return {
       authStep: [ "authStepChanged" ],
-      teams: [ "teamsChanged" ]
+      organizations: [ "organizationsChanged" ]
     };
   }
 };
 
 h = new WeakMap, c = new WeakMap, d = new WeakMap, p = new WeakMap, f = new WeakMap, 
-m = new WeakMap, u = new WeakMap, g = new WeakMap, b = new WeakMap, x = new WeakMap, 
+m = new WeakMap, g = new WeakMap, u = new WeakMap, b = new WeakMap, x = new WeakMap, 
 w = new WeakMap, v = new WeakMap, k = new WeakMap, _ = new WeakMap;
 
-T.style = l;
+C.style = o;
 
-export { T as gx_ide_sign_in_team };
-//# sourceMappingURL=p-1d44dd0a.entry.js.map
+export { C as gx_ide_sign_in_organization };
+//# sourceMappingURL=p-15b1c9be.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapOrganizationsToComboBoxItemModel","organizations","map","organization","value","id","caption","name","signInOrganizationCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","CSS_BUNDLES","CHECKED_VALUE","GxIdeSignInOrganization","_GxIdeSignInOrganization_componentLocale","set","this","_GxIdeSignInOrganization_organizationsModel","_GxIdeSignInOrganization_chSelectOrganizationEl","_GxIdeSignInOrganization_switchStepTransitionTime","_GxIdeSignInOrganization_termsAndConditionsCheckboxEl","_GxIdeSignInOrganization_privacyPolicyCheckboxEl","_GxIdeSignInOrganization_authStepCallback","authStep","signInCallback","__classPrivateFieldGet","_GxIdeSignInOrganization_continueHandler","call","async","continueCallback","_GxIdeSignInOrganization_renderStepHeader","h","class","src","alt","authStepInternal","titlePart1","titlePart2","_GxIdeSignInOrganization_renderStepFooter","signInDisabled","termsConfirmationRequired","termsAndConditionsAccepted","onClick","disabled","buttonCaption","_GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted","privacyPolicyAccepted","_GxIdeSignInOrganization_termsAndConditionsClickedHandler","event","preventDefault","termsCallback","_GxIdeSignInOrganization_privacyPolicyClickedHandler","privacyCallback","_GxIdeSignInOrganization_evaluateStepRender","signIn","description","checkedValue","ref","el","__classPrivateFieldSet","onInput","htmlFor","agreement","termsAndConditionsLabel","hyperlink","termsAndConditionsLink","privacyAndPolicyLabel","privacyAndPolicyLink","loaderTitle","loader","fetchingOrganizationsTitle","settingUpSessionTitle","loaderDescription","fetchingOrganizationsDescription","settingUpDescription","show","selectOrganization","infoMessage","label","accessibleName","model","_a","authStepChanged","newAuthStep","slideIsVisible","setTimeout","organizationsChanged","newOrganizations","componentWillLoad","Locale","getComponentStrings","style","setProperty","toString","render","Host","slide__main"],"sources":["src/components/sign-in-organization/helpers.ts","src/components/sign-in-organization/sign-in-organization.scss?tag=gx-ide-sign-in-organization&encapsulation=shadow","src/components/sign-in-organization/sign-in-organization.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { OrganizationData } from \"./sign-in-organization\";\n\nexport const mapOrganizationsToComboBoxItemModel = (\n  organizations?: OrganizationData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!organizations) {\n    return [];\n  }\n  return organizations.map(organization => ({\n    value: organization.id,\n    caption: organization.name\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  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: var(--dialog-border-radius, 16px);\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(--switch-step-transtion-time) all;\n    opacity: 0;\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    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    letter-spacing: 0.02em;\n  }\n\n  &__main-description {\n    display: grid;\n    gap: 40px;\n    color: var(--color-text-neutral-disabled);\n    max-inline-size: 370px;\n  }\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\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\n// WA (this class should be defined on Mercury\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\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 { mapOrganizationsToComboBoxItemModel } 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  \"components/checkbox\",\n  \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n  tag: \"gx-ide-sign-in-organization\",\n  styleUrl: \"sign-in-organization.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-organization\"]\n})\nexport class GxIdeSignInOrganization {\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  // Select Organization References :\n  #organizationsModel: ComboBoxItemModel[] = [];\n  #chSelectOrganizationEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n  #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n  #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n  @Element() el: HTMLGxIdeSignInOrganizationElement;\n\n  /**\n   * This is a handover from \"authStep\" that allows updating descriptions once\n   * the slide is hidden. This enables a smooth transition between descriptions.\n   */\n\n  @State() authStepInternal: AuthStep;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions\n   * between slides.\n   */\n  @State() slideIsVisible: boolean = true;\n\n  /**\n   * True if terms and conditions are accepted.\n   */\n  @State() termsAndConditionsAccepted: boolean = false;\n\n  /**\n   * The authentication step to display\n   */\n  @Prop() readonly authStep: AuthStep = \"signIn\";\n  @Watch(\"authStep\")\n  authStepChanged(newAuthStep: AuthStep) {\n    this.slideIsVisible = false;\n    // switch step\n    setTimeout(() => {\n      this.authStepInternal = newAuthStep;\n    }, this.#switchStepTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#switchStepTransitionTime * 2);\n  }\n\n  /**\n   * Callback executed when the user clicks the 'Continue' button\n   */\n  @Prop() readonly continueCallback!: (organizationId: string) => Promise<void>;\n\n  /**\n   * Callback executed when the user click the \"Sign In\" button\n   */\n  @Prop() readonly signInCallback!: () => Promise<void>;\n\n  /**\n   * When true, it will diplay checkboxes for the user to confirm terms and conditions\n   */\n  @Prop() readonly termsConfirmationRequired: boolean = false;\n\n  /**\n   * Array that contains the user's organizations\n   */\n  @Prop() readonly organizations!: OrganizationData[];\n  @Watch(\"organizations\")\n  organizationsChanged(newOrganizations: OrganizationData[]) {\n    this.#organizationsModel =\n      mapOrganizationsToComboBoxItemModel(newOrganizations);\n  }\n\n  /**\n   * Callback executed when the user clicks on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks on the \"privacy policy\" link\n   */\n  @Prop() readonly privacyCallback: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\n    // Initialize values\n    this.authStepInternal = this.authStep;\n    this.organizationsChanged(this.organizations);\n  }\n\n  #authStepCallback = () => {\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectOrganization\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectOrganizationEl.value);\n  };\n\n  #renderStepHeader = (): HTMLElement => {\n    return (\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 heading-2\"\n        >\n          <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n          <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n        </h2>\n      </header>\n    );\n  };\n\n  #renderStepFooter = (): HTMLElement => {\n    const signInDisabled =\n      this.authStep === \"signIn\" &&\n      this.termsConfirmationRequired &&\n      !this.termsAndConditionsAccepted;\n    return (\n      <div>\n        <button\n          class=\"button-primary main-btn\"\n          onClick={this.#authStepCallback}\n          disabled={signInDisabled}\n        >\n          {this.#componentLocale[this.authStepInternal].buttonCaption}\n        </button>\n      </div>\n    );\n  };\n\n  #evaluateTermsConditionsAndPrivacyAccepted = () => {\n    const termsAndConditionsAccepted =\n      this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n    const privacyPolicyAccepted =\n      this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n    this.termsAndConditionsAccepted =\n      termsAndConditionsAccepted && privacyPolicyAccepted;\n  };\n\n  #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n    event.preventDefault();\n    this.termsCallback();\n  };\n\n  #privacyPolicyClickedHandler = (event: MouseEvent) => {\n    event.preventDefault();\n    this.privacyCallback();\n  };\n\n  #evaluateStepRender = () => {\n    if (this.authStepInternal === \"signIn\") {\n      return [\n        this.#renderStepHeader(),\n        <p class=\"body-regular-l\">\n          {this.#componentLocale.signIn.description}\n        </p>,\n        this.termsConfirmationRequired && (\n          <div class=\"field-group\">\n            <div\n              // terms and conditions\n              class=\"field field-inline\"\n            >\n              <ch-checkbox\n                checkedValue={CHECKED_VALUE}\n                id=\"terms-and-conditions\"\n                class=\"checkbox\"\n                ref={(el: HTMLChCheckboxElement) =>\n                  (this.#termsAndConditionsCheckboxEl =\n                    el as HTMLChCheckboxElement)\n                }\n                onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n              ></ch-checkbox>\n              <span>\n                {/*\n                  WA: this span prevents field-inline applying padding-block-start on the label\n                  TODO: See how to ignore padding-block-start when using field-inline with a control\n                  that is not an input, combo-box, etc..\n                  */}\n                <label\n                  htmlFor=\"terms-and-conditions\"\n                  class=\"label label-agreement\"\n                >\n                  {this.#componentLocale.agreement.termsAndConditionsLabel}\n                  <span\n                    class={{ hyperlink: !!this.termsCallback }}\n                    onClick={\n                      this.termsCallback &&\n                      this.#termsAndConditionsClickedHandler\n                    }\n                  >\n                    {this.#componentLocale.agreement.termsAndConditionsLink}\n                  </span>\n                </label>\n              </span>\n            </div>\n            <div\n              // privacy policy\n              class=\"field field-inline\"\n            >\n              <ch-checkbox\n                checkedValue={CHECKED_VALUE}\n                id=\"privacy-policy\"\n                class=\"checkbox\"\n                ref={(el: HTMLChCheckboxElement) =>\n                  (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n                }\n                onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n              ></ch-checkbox>\n              <span>\n                {/*\n                  WA: this span prevents field-inline applying padding-block-start on the label\n                  TODO: See how to ignore padding-block-start when using field-inline with a control\n                  that is not an input, combo-box, etc..\n                  */}\n                <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n                  {this.#componentLocale.agreement.privacyAndPolicyLabel}\n                  <span\n                    class={{ hyperlink: !!this.privacyCallback }}\n                    onClick={\n                      this.privacyCallback && this.#privacyPolicyClickedHandler\n                    }\n                  >\n                    {this.#componentLocale.agreement.privacyAndPolicyLink}\n                  </span>\n                </label>\n              </span>\n            </div>\n          </div>\n        ),\n\n        this.#renderStepFooter()\n      ];\n    } else if (\n      this.authStepInternal === \"fetchOrganizations\" ||\n      this.authStepInternal === \"settingUpSession\"\n    ) {\n      const loaderTitle =\n        this.authStepInternal === \"fetchOrganizations\"\n          ? this.#componentLocale.loader.fetchingOrganizationsTitle\n          : this.#componentLocale.loader.settingUpSessionTitle;\n      const loaderDescription =\n        this.authStepInternal === \"fetchOrganizations\"\n          ? this.#componentLocale.loader.fetchingOrganizationsDescription\n          : this.#componentLocale.loader.settingUpDescription;\n      return (\n        <gx-ide-loader\n          show\n          loaderTitle={loaderTitle}\n          description={loaderDescription}\n        ></gx-ide-loader>\n      );\n    } else if (this.authStepInternal === \"selectOrganization\") {\n      return [\n        this.#renderStepHeader(),\n        <div class=\"slide__select-organization-description\">\n          <p class=\"body-semi-bold-l\">\n            {this.#componentLocale.selectOrganization.infoMessage}\n          </p>\n        </div>,\n        <div class=\"field-group\">\n          <div class=\"field field-block\">\n            <label htmlFor=\"organizations\">\n              {this.#componentLocale.selectOrganization.label}\n            </label>\n            <ch-combo-box-render\n              id=\"organizations\"\n              accessibleName=\"Organizations\"\n              class=\"combo-box organizations-list\"\n              model={this.#organizationsModel}\n              value={this.#organizationsModel[0]?.value}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#chSelectOrganizationEl =\n                  el as HTMLChComboBoxRenderElement)\n              }\n            ></ch-combo-box-render>\n          </div>\n        </div>,\n        this.#renderStepFooter()\n      ];\n    }\n  };\n\n  render() {\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.#evaluateStepRender()}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type AuthStep =\n  | \"signIn\"\n  | \"fetchOrganizations\"\n  | \"selectOrganization\"\n  | \"settingUpSession\";\n\nexport type OrganizationData = {\n  id: string;\n  name: string;\n};\n"],"mappings":"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"}

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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"}