@genexus/genexus-ide-ui 1.0.45 → 1.0.47

package/dist/esm/gx-ide-sign-in-team.entry.js

@@ -11,7 +11,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
     }));
 };
 
-const signInTeamCss = ":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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  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}";
+const signInTeamCss = ":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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -29,15 +29,18 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeSignInTeam_componentLocale, _GxIdeSignInTeam_userTeamsModel, _GxIdeSignInTeam_chSelectTeamEl, _GxIdeSignInTeam_switchStepTransitionTime, _GxIdeSignInTeam_authStepCallback, _GxIdeSignInTeam_continueHandler;
+var _GxIdeSignInTeam_componentLocale, _GxIdeSignInTeam_userTeamsModel, _GxIdeSignInTeam_chSelectTeamEl, _GxIdeSignInTeam_switchStepTransitionTime, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, _GxIdeSignInTeam_privacyPolicyCheckboxEl, _GxIdeSignInTeam_authStepCallback, _GxIdeSignInTeam_continueHandler, _GxIdeSignInTeam_renderStepHeader, _GxIdeSignInTeam_renderStepFooter, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, _GxIdeSignInTeam_termsAndConditionsClickedHandler, _GxIdeSignInTeam_privacyPolicyClickedHandler, _GxIdeSignInTeam_evaluateStepRender;
 const COPYRIGHTS_ILLUSTRATION = getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
     "components/button",
-    "components/combo-box"
+    "components/combo-box",
+    "components/checkbox",
+    "utils/form"
 ];
+const CHECKED_VALUE = "on";
 const GxIdeSignInTeam = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -50,6 +53,8 @@ const GxIdeSignInTeam = class {
         _GxIdeSignInTeam_userTeamsModel.set(this, []);
         _GxIdeSignInTeam_chSelectTeamEl.set(this, void 0);
         _GxIdeSignInTeam_switchStepTransitionTime.set(this, 100);
+        _GxIdeSignInTeam_termsAndConditionsCheckboxEl.set(this, void 0);
+        _GxIdeSignInTeam_privacyPolicyCheckboxEl.set(this, void 0);
         _GxIdeSignInTeam_authStepCallback.set(this, () => {
             if (this.authStep === "signIn") {
                 this.signInCallback();
@@ -61,13 +66,78 @@ const GxIdeSignInTeam = class {
         _GxIdeSignInTeam_continueHandler.set(this, async () => {
             await this.continueCallback(__classPrivateFieldGet(this, _GxIdeSignInTeam_chSelectTeamEl, "f").value);
         });
+        _GxIdeSignInTeam_renderStepHeader.set(this, () => {
+            return (h("header", { class: "slide__main-header" }, h("img", { src: ICON_NEXT, alt: "" // decorative
+            }), h("h2", {
+                // Split the title into two spans for better styling
+                class: "slide__main-title"
+            }, h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart2))));
+        });
+        _GxIdeSignInTeam_renderStepFooter.set(this, () => {
+            const signInDisabled = this.authStep === "signIn" &&
+                this.termsConfirmationRequired &&
+                !this.termsAndConditionsAccepted;
+            return (h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInTeam_authStepCallback, "f"), disabled: signInDisabled }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].buttonCaption)));
+        });
+        _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted.set(this, () => {
+            const termsAndConditionsAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, "f").value === CHECKED_VALUE;
+            const privacyPolicyAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, "f").value === CHECKED_VALUE;
+            this.termsAndConditionsAccepted =
+                termsAndConditionsAccepted && privacyPolicyAccepted;
+        });
+        _GxIdeSignInTeam_termsAndConditionsClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.termsCallback();
+        });
+        _GxIdeSignInTeam_privacyPolicyClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.privacyCallback();
+        });
+        _GxIdeSignInTeam_evaluateStepRender.set(this, () => {
+            var _a;
+            if (this.authStepInternal === "signIn") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
+                    h("p", { class: "body-regular-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.description),
+                    this.termsConfirmationRequired && (h("div", { class: "field-group" }, h("div", {
+                        // terms and conditions
+                        class: "field field-inline"
+                    }, h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "terms-and-conditions", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), h("label", { htmlFor: "terms-and-conditions", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLabel, h("span", { class: { hyperlink: !!this.termsCallback }, onClick: this.termsCallback && __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLink))), h("div", {
+                        // privacy policy
+                        class: "field field-inline"
+                    }, h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "privacy-policy", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), h("label", { htmlFor: "privacy-policy", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLabel, h("span", { class: { hyperlink: !!this.privacyCallback }, onClick: this.privacyCallback && __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLink))))),
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "f").call(this)
+                ];
+            }
+            else if (this.authStepInternal === "fetchUserTeams" ||
+                this.authStepInternal === "settingUpSession") {
+                const loaderTitle = this.authStepInternal === "fetchUserTeams"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsTitle
+                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpSessionTitle;
+                const loaderDescription = this.authStepInternal === "fetchUserTeams"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsDescription
+                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpDescription;
+                return (h("gx-ide-loader", { show: true, loaderTitle: loaderTitle, description: loaderDescription }));
+            }
+            else if (this.authStepInternal === "selectUserTeam") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
+                    h("div", { class: "slide__select-team-description" }, h("p", { class: "body-semi-bold-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.infoMessage)),
+                    h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.label), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_chSelectTeamEl, el, "f")) }))),
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "f").call(this)
+                ];
+            }
+        });
         this.authStepInternal = undefined;
         this.slideIsVisible = true;
+        this.termsAndConditionsAccepted = false;
         this.authStep = "signIn";
         this.continueCallback = undefined;
         this.signInCallback = undefined;
+        this.termsConfirmationRequired = false;
         this.teams = undefined;
         this.termsCallback = undefined;
+        this.privacyCallback = undefined;
     }
     authStepChanged(newAuthStep) {
         this.slideIsVisible = false;
@@ -91,19 +161,11 @@ const GxIdeSignInTeam = class {
         this.teamsChanged(this.teams);
     }
     render() {
-        var _a;
         return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
         }), h("div", { class: {
                 "slide__main": true,
                 "slide__main--visible": this.slideIsVisible
-            } }, h("div", { class: "slide__main-container" }, h("header", { class: "slide__main-header" }, h("img", { src: ICON_NEXT, alt: "" // decorative
-        }), h("h2", {
-            // Split the title into two spans for better styling
-            class: "slide__main-title"
-        }, h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? (h("div", { class: "slide__main-description" }, h("p", { hidden: true }, h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.byContinuingText, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.byContinuingCallBackText)))) : ([
-            h("div", { class: "slide__select-team-description" }, h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.infoMessage)),
-            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_chSelectTeamEl, el, "f")) })))
-        ]), h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInTeam_authStepCallback, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].buttonCaption)))))));
+            } }, h("div", { class: "slide__main-container" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateStepRender, "f").call(this))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/sign-in-team"]; }
     get el() { return getElement(this); }
@@ -112,7 +174,7 @@ const GxIdeSignInTeam = class {
         "teams": ["teamsChanged"]
     }; }
 };
-_GxIdeSignInTeam_componentLocale = new WeakMap(), _GxIdeSignInTeam_userTeamsModel = new WeakMap(), _GxIdeSignInTeam_chSelectTeamEl = new WeakMap(), _GxIdeSignInTeam_switchStepTransitionTime = new WeakMap(), _GxIdeSignInTeam_authStepCallback = new WeakMap(), _GxIdeSignInTeam_continueHandler = new WeakMap();
+_GxIdeSignInTeam_componentLocale = new WeakMap(), _GxIdeSignInTeam_userTeamsModel = new WeakMap(), _GxIdeSignInTeam_chSelectTeamEl = new WeakMap(), _GxIdeSignInTeam_switchStepTransitionTime = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsCheckboxEl = new WeakMap(), _GxIdeSignInTeam_privacyPolicyCheckboxEl = new WeakMap(), _GxIdeSignInTeam_authStepCallback = new WeakMap(), _GxIdeSignInTeam_continueHandler = new WeakMap(), _GxIdeSignInTeam_renderStepHeader = new WeakMap(), _GxIdeSignInTeam_renderStepFooter = new WeakMap(), _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsClickedHandler = new WeakMap(), _GxIdeSignInTeam_privacyPolicyClickedHandler = new WeakMap(), _GxIdeSignInTeam_evaluateStepRender = new WeakMap();
 GxIdeSignInTeam.style = signInTeamCss;
 
 export { GxIdeSignInTeam as gx_ide_sign_in_team };

package/dist/esm/gx-ide-sign-in-team.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-sign-in-team.entry.js","mappings":"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","names":[],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!teams) {\n    return [];\n  }\n  return teams.map(team => ({\n    value: team.id,\n    caption: team.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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n    transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--mer-font__size--xl);\n    font-weight: var(--mer-font__weight--semi-bold);\n    letter-spacing: 0.02em;\n    color: var(--mer-text__on-surface);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: var(--mer-spacing--2xl);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n    color: var(--mer-text__complementary);\n  }\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  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","// 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 { mapTeamsToComboBoxItemModel } 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-sign-in-team\",\n  styleUrl: \"sign-in-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 User Team References :\n  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSignInTeamElement;\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   * 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!: (teamId: 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   * Array that contains the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n  @Watch(\"teams\")\n  teamsChanged(newTeams: TeamData[]) {\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\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  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.teamsChanged(this.teams);\n  }\n\n  #authStepCallback = () => {\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectTeamEl.value);\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              <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>\n                    {this.#componentLocale[this.authStepInternal].titlePart1}\n                  </span>\n                  <span>\n                    {this.#componentLocale[this.authStepInternal].titlePart2}\n                  </span>\n                </h2>\n              </header>\n\n              {this.authStepInternal === \"signIn\" ? (\n                <div class=\"slide__main-description\">\n                  <p hidden>\n                    <span>{this.#componentLocale.descriptionText}</span>\n                  </p>\n                  <span>\n                    {this.#componentLocale.signIn.byContinuingText}\n                    <a class=\"terms-conditions\" onClick={this.termsCallback}>\n                      {this.#componentLocale.signIn.byContinuingCallBackText}\n                    </a>\n                  </span>\n                </div>\n              ) : (\n                [\n                  <div class=\"slide__select-team-description\">\n                    <p class=\"text-body-highlighted-l\">\n                      {this.#componentLocale.selectUserTeam.infoMessage}\n                    </p>\n                  </div>,\n\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"teams\">\n                        {this.#componentLocale.teams}\n                      </label>\n                      <ch-combo-box-render\n                        id=\"teams\"\n                        accessibleName=\"Teams\"\n                        class=\"combo-box teams-list\"\n                        model={this.#userTeamsModel}\n                        value={this.#userTeamsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectTeamEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>\n                ]\n              )}\n\n              <div>\n                <button\n                  class=\"button-primary main-btn\"\n                  onClick={this.#authStepCallback}\n                >\n                  {this.#componentLocale[this.authStepInternal].buttonCaption}\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type AuthStep = \"signIn\" | \"selectUserTeam\";\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"version":3}
+{"file":"gx-ide-sign-in-team.entry.js","mappings":";;;AAGO,MAAM,2BAA2B,GAAG,CACzC,KAAkB;IAElB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK;QACxB,KAAK,EAAE,IAAI,CAAC,EAAE;QACd,OAAO,EAAE,IAAI,CAAC,IAAI;KACnB,CAAC,CAAC,CAAC;AACN,CAAC;;ACbD,MAAM,aAAa,GAAG,0mEAA0mE;;;;;;;;;;;;;;;;;;;ACkBhoE,MAAM,uBAAuB,GAAG,YAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,sBAAsB;IACtB,qBAAqB;IACrB,YAAY;CACb,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC;MAQd,eAAe;;;;;;;QAK1B,mDAAsB;;QAEtB,0CAAuC,EAAE,EAAC;QAC1C,kDAA6C;QAC7C,oDAAoC,GAAG,EAAC;QACxC,gEAAsD;QACtD,2DAAiD;QAoFjD,4CAAoB;YAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;iBAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,EAAE;gBAC7C,uBAAA,IAAI,wCAAiB,MAArB,IAAI,CAAmB,CAAC;aACzB;SACF,EAAC;QAEF,2CAAmB;YACjB,MAAM,IAAI,CAAC,gBAAgB,CAAC,uBAAA,IAAI,uCAAgB,CAAC,KAAK,CAAC,CAAC;SACzD,EAAC;QAEF,4CAAoB;YAClB,QACE,cAAQ,KAAK,EAAC,oBAAoB,IAChC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,EAAE;cACN,EACF;;gBAEE,KAAK,EAAC,mBAAmB;eAEzB,gBAAO,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAQ,EACtE,gBAAO,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAQ,CACnE,CACE,EACT;SACH,EAAC;QAEF,4CAAoB;YAClB,MAAM,cAAc,GAClB,IAAI,CAAC,QAAQ,KAAK,QAAQ;gBAC1B,IAAI,CAAC,yBAAyB;gBAC9B,CAAC,IAAI,CAAC,0BAA0B,CAAC;YACnC,QACE,eACE,cACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,uBAAA,IAAI,yCAAkB,EAC/B,QAAQ,EAAE,cAAc,IAEvB,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,aAAa,CACpD,CACL,EACN;SACH,EAAC;QAEF,qEAA6C;YAC3C,MAAM,0BAA0B,GAC9B,uBAAA,IAAI,qDAA8B,CAAC,KAAK,KAAK,aAAa,CAAC;YAC7D,MAAM,qBAAqB,GACzB,uBAAA,IAAI,gDAAyB,CAAC,KAAK,KAAK,aAAa,CAAC;YACxD,IAAI,CAAC,0BAA0B;gBAC7B,0BAA0B,IAAI,qBAAqB,CAAC;SACvD,EAAC;QAEF,4DAAoC,CAAC,KAAiB;YACpD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,EAAC;QAEF,uDAA+B,CAAC,KAAiB;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,EAAC;QAEF,8CAAsB;;YACpB,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE;gBACtC,OAAO;oBACL,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;oBACxB,SAAG,KAAK,EAAC,gBAAgB,IACtB,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,WAAW,CACvC;oBACJ,IAAI,CAAC,yBAAyB,KAC5B,WAAK,KAAK,EAAC,aAAa,IACtB;;wBAEE,KAAK,EAAC,oBAAoB;uBAE1B,mBACE,YAAY,EAAE,aAAa,EAC3B,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,CAAC,EAAyB,MAC5B,uBAAA,IAAI,iDACH,EAA2B,MAAA,CAAC,EAEhC,OAAO,EAAE,uBAAA,IAAI,kEAA2C,GAC3C,EACf,aACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAC,uBAAuB,IAE5B,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,uBAAuB,EACxD,YACE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,EAC1C,OAAO,EACL,IAAI,CAAC,aAAa,IAAI,uBAAA,IAAI,yDAAkC,IAG7D,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,sBAAsB,CAClD,CACD,CACJ,EACN;;wBAEE,KAAK,EAAC,oBAAoB;uBAE1B,mBACE,YAAY,EAAE,aAAa,EAC3B,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,CAAC,EAAyB,MAC5B,uBAAA,IAAI,4CAA4B,EAA2B,MAAA,CAAC,EAE/D,OAAO,EAAE,uBAAA,IAAI,kEAA2C,GAC3C,EACf,aAAO,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,uBAAuB,IAC1D,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,qBAAqB,EACtD,YACE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,EAC5C,OAAO,EACL,IAAI,CAAC,eAAe,IAAI,uBAAA,IAAI,oDAA6B,IAG1D,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,oBAAoB,CAChD,CACD,CACJ,CACF,CACP;oBAED,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;iBACzB,CAAC;aACH;iBAAM,IACL,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;gBAC1C,IAAI,CAAC,gBAAgB,KAAK,kBAAkB,EAC5C;gBACA,MAAM,WAAW,GACf,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;sBACtC,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,kBAAkB;sBAC/C,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,qBAAqB,CAAC;gBACzD,MAAM,iBAAiB,GACrB,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;sBACtC,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,wBAAwB;sBACrD,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,oBAAoB,CAAC;gBACxD,QACE,qBACE,IAAI,QACJ,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,iBAAiB,GACf,EACjB;aACH;iBAAM,IAAI,IAAI,CAAC,gBAAgB,KAAK,gBAAgB,EAAE;gBACrD,OAAO;oBACL,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;oBACxB,WAAK,KAAK,EAAC,gCAAgC,IACzC,SAAG,KAAK,EAAC,kBAAkB,IACxB,uBAAA,IAAI,wCAAiB,CAAC,cAAc,CAAC,WAAW,CAC/C,CACA;oBACN,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aAAO,OAAO,EAAC,OAAO,IACnB,uBAAA,IAAI,wCAAiB,CAAC,cAAc,CAAC,KAAK,CACrC,EACR,2BACE,EAAE,EAAC,OAAO,EACV,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,uBAAA,IAAI,uCAAgB,EAC3B,KAAK,EAAE,MAAA,uBAAA,IAAI,uCAAgB,CAAC,CAAC,CAAC,0CAAE,KAAK,EACrC,GAAG,EAAE,CAAC,EAA+B,MAClC,uBAAA,IAAI,mCAAmB,EAAiC,MAAA,CAAC,GAEvC,CACnB,CACF;oBACN,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;iBACzB,CAAC;aACH;SACF,EAAC;;8BA3PiC,IAAI;0CAKQ,KAAK;wBAKd,QAAQ;;;yCA2BQ,KAAK;;;;;IAzB3D,eAAe,CAAC,WAAqB;QACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;QAE5B,UAAU,CAAC;YACT,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;SACrC,EAAE,uBAAA,IAAI,iDAA0B,CAAC,CAAC;;QAEnC,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAE,uBAAA,IAAI,iDAA0B,GAAG,CAAC,CAAC,CAAC;KACxC;IAsBD,YAAY,CAAC,QAAoB;QAC/B,uBAAA,IAAI,mCAAmB,2BAA2B,CAAC,QAAQ,CAAC,MAAA,CAAC;KAC9D;IAYD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,oCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,8BAA8B,EAC9B,uBAAA,IAAI,iDAA0B,CAAC,QAAQ,EAAE,GAAG,IAAI,CACjD,CAAC;;QAEF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B;IA0LD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,OAAO,IACpB,WACE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAC,EAAE;UACN,EAEF,WACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,sBAAsB,EAAE,IAAI,CAAC,cAAc;aAC5C,IAED,WAAK,KAAK,EAAC,uBAAuB,IAC/B,uBAAA,IAAI,2CAAoB,MAAxB,IAAI,CAAsB,CACvB,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;","names":[],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!teams) {\n    return [];\n  }\n  return teams.map(team => ({\n    value: team.id,\n    caption: team.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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n    transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--mer-font__size--xl);\n    font-weight: var(--mer-font__weight--semi-bold);\n    letter-spacing: 0.02em;\n    color: var(--mer-text__on-surface);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: var(--mer-spacing--2xl);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n    color: var(--mer-text__complementary);\n    max-inline-size: 370px;\n  }\n}\n\n.teams-list {\n  inline-size: 100%;\n  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 { mapTeamsToComboBoxItemModel } 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-team\",\n  styleUrl: \"sign-in-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 User Team References :\n  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n  #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n  #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n  @Element() el: HTMLGxIdeSignInTeamElement;\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!: (teamId: 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 teams\n   */\n  @Prop() readonly teams!: TeamData[];\n  @Watch(\"teams\")\n  teamsChanged(newTeams: TeamData[]) {\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\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.teamsChanged(this.teams);\n  }\n\n  #authStepCallback = () => {\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectTeamEl.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\"\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              <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 && this.#termsAndConditionsClickedHandler\n                  }\n                >\n                  {this.#componentLocale.agreement.termsAndConditionsLink}\n                </span>\n              </label>\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              <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            </div>\n          </div>\n        ),\n\n        this.#renderStepFooter()\n      ];\n    } else if (\n      this.authStepInternal === \"fetchUserTeams\" ||\n      this.authStepInternal === \"settingUpSession\"\n    ) {\n      const loaderTitle =\n        this.authStepInternal === \"fetchUserTeams\"\n          ? this.#componentLocale.loader.fetchingTeamsTitle\n          : this.#componentLocale.loader.settingUpSessionTitle;\n      const loaderDescription =\n        this.authStepInternal === \"fetchUserTeams\"\n          ? this.#componentLocale.loader.fetchingTeamsDescription\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 === \"selectUserTeam\") {\n      return [\n        this.#renderStepHeader(),\n        <div class=\"slide__select-team-description\">\n          <p class=\"body-semi-bold-l\">\n            {this.#componentLocale.selectUserTeam.infoMessage}\n          </p>\n        </div>,\n        <div class=\"field-group\">\n          <div class=\"field field-block\">\n            <label htmlFor=\"teams\">\n              {this.#componentLocale.selectUserTeam.label}\n            </label>\n            <ch-combo-box-render\n              id=\"teams\"\n              accessibleName=\"Teams\"\n              class=\"combo-box teams-list\"\n              model={this.#userTeamsModel}\n              value={this.#userTeamsModel[0]?.value}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#chSelectTeamEl = 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  | \"fetchUserTeams\"\n  | \"selectUserTeam\"\n  | \"settingUpSession\";\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"version":3}

package/dist/esm/gx-ide-start-page.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-93411ea2.js';
-import { g as getIconPath } from './MERCURY_ASSETS-845caae6.js';
+import { g as getIconPath } from './MERCURY_ASSETS-91a1db9c.js';
 import { L as Locale } from './locale-e5107fad.js';
 
 /**
@@ -2591,7 +2591,7 @@ const GxIdeStartPage = class {
             }
             return (h("section", { class: "section-kbs" }, h("header", { class: {
                     "section-kbs__header": true
-                } }, h("h2", { class: "heading-3 section-kbs__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.title), h("ch-edit", {
+                } }, h("h2", { class: "subtitle-regular-s section-kbs__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.title), h("ch-edit", {
                 // Render always, and display or hide, ro prevent FOUC, and also prevent
                 // the header block-size from growing a little bit when the input renders.
                 value: this.kbFilterValue, class: {
@@ -2617,7 +2617,7 @@ const GxIdeStartPage = class {
                     : undefined;
                 // icon
                 const kbIcon = (_a = kb.icon) !== null && _a !== void 0 ? _a : KB_DEFAULT_ICON;
-                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "text-body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "text-body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
+                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
             });
         });
         _GxIdeStartPage_renderSecondarySection.set(this, () => {
@@ -2628,13 +2628,13 @@ const GxIdeStartPage = class {
             return (h("section", {
                 // Recent Knowledge Bases
                 class: "section-secondary"
-            }, h("header", null, h("h2", { class: "heading-3" }, this.secondarySection.title)), h("section", { class: {
+            }, h("header", null, h("h2", { class: "subtitle-regular-s" }, this.secondarySection.title)), h("section", { class: {
                     "section-secondary__actions": true,
                     "section-secondary__actions--two-cards": !multipleCards,
                     "section-secondary__actions--multiple-cards": multipleCards,
                     "scrollable": true
                 } }, this.secondarySection.cards.map((card, index) => {
-                return (h("article", { class: "card card-outlined", key: index }, h("header", { class: "card__header" }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, card.title), card.description.map(paragraph => (h("p", { class: "text-body-regular-m" }, paragraph))))), h("footer", { class: "card__footer" }, card.action && (h("button", { class: "button-tertiary button-icon-and-text", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
+                return (h("article", { class: "card card-outlined", key: index }, h("header", { class: "card__header" }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, card.title), card.description.map(paragraph => (h("p", { class: "body-regular-m" }, paragraph))))), h("footer", { class: "card__footer" }, card.action && (h("button", { class: "button-tertiary button-icon-and-text", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
             }))));
         });
         this.kbFilterValue = "";
@@ -2672,13 +2672,13 @@ const GxIdeStartPage = class {
         }, h("header", {
             // main header
             class: "section-create-new__header"
-        }, h("h1", { class: "heading-2" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
+        }, h("h1", { class: "heading-4" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
             // create project
             class: "card card-filled"
-        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), h("article", {
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), h("article", {
             // open existing project
             class: "card-filled"
-        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption))))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption))))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
     get el() { return getElement(this); }