@genexus/genexus-ide-ui 1.0.31 → 1.0.32

package/dist/esm/gx-ide-select-user-team.entry.js

@@ -0,0 +1,75 @@
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-93411ea2.js';
+import { L as Locale } from './locale-e5107fad.js';
+
+const mapTeamsToComboBoxItemModel = (teams) => {
+    return teams.map(team => {
+        return {
+            value: team.id,
+            caption: team.name
+        };
+    });
+};
+
+const selectUserTeamCss = ":host{display:grid;block-size:100%;inline-size:100%;align-items:center;justify-content:center;padding:var(--mer-spacing--xl)}.slide{display:grid;max-inline-size:1100px;grid-template-columns:1fr 550px;background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-spacing--md);overflow:hidden;transition:var(--slide-fade-duration) opacity}.slide__illustration{overflow:hidden;max-block-size:700px}.slide__select-team{display:grid;block-size:100%;inline-size:100%;padding:var(--mer-spacing--3xl)}.slide__select-team-container{display:grid;gap:var(--mer-spacing--lg);max-inline-size:480px;place-self:center}.slide__select-team-header{display:grid;gap:var(--mer-spacing--lg)}.slide__select-team-title{font-size:var(--mer-font__size--xl);color:var(--mer-text__on-surface);letter-spacing:0.02em;font-weight:var(--mer-font__weight--semi-bold)}.slide__select-team-description{display:grid;color:var(--mer-text__complementary);gap:var(--mer-spacing--md);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--light);line-height:var(--mer-line-height--spaced)}.info-message{font-weight:bold;color:var(--mer-text__on-surface)}.continue-button{padding-inline-start:var(--mer-spacing--3xl) !important;padding-inline-end:var(--mer-spacing--3xl) !important}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeUiSplash_componentLocale, _GxIdeUiSplash_userTeamsModel, _GxIdeUiSplash_chSelectTeamEl, _GxIdeUiSplash_continueHandle;
+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/combo-box",
+    "components/button",
+    "utils/form"
+];
+const GxIdeUiSplash = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeUiSplash_componentLocale.set(this, void 0);
+        _GxIdeUiSplash_userTeamsModel.set(this, []);
+        _GxIdeUiSplash_chSelectTeamEl.set(this, void 0);
+        _GxIdeUiSplash_continueHandle.set(this, async () => {
+            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeUiSplash_chSelectTeamEl, "f").value);
+        });
+        this.teams = undefined;
+        this.continueCallback = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldSet(this, _GxIdeUiSplash_userTeamsModel, mapTeamsToComboBoxItemModel(this.teams), "f");
+    }
+    render() {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAriaLabel }, h("img", {
+            // base image (acts like a background)
+            src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationFigureAriaLabel
+        })), h("section", { class: "slide__select-team" }, h("div", { class: "slide__select-team-container" }, h("header", { class: "slide__select-team-header" }, h("img", { src: ICON_NEXT, alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAlternativeText }), h("h2", { class: "slide__select-team-title" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").title)), h("div", { class: "slide__select-team-description" }, h("p", null, h("span", { class: "info-message" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").infoMessage))), h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box", model: __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"), value: __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f")[0].value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeUiSplash_chSelectTeamEl, el, "f")) }))), h("div", null, h("button", { class: "button-primary continue-button", onClick: __classPrivateFieldGet(this, _GxIdeUiSplash_continueHandle, "f") }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").continueButtonCaption)))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/select-user-team"]; }
+    get el() { return getElement(this); }
+};
+_GxIdeUiSplash_componentLocale = new WeakMap(), _GxIdeUiSplash_userTeamsModel = new WeakMap(), _GxIdeUiSplash_chSelectTeamEl = new WeakMap(), _GxIdeUiSplash_continueHandle = new WeakMap();
+GxIdeUiSplash.style = selectUserTeamCss;
+
+export { GxIdeUiSplash as gx_ide_select_user_team };
+
+//# sourceMappingURL=gx-ide-select-user-team.entry.js.map

package/dist/esm/gx-ide-select-user-team.entry.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-select-user-team.entry.js","mappings":";;;AAGO,MAAM,2BAA2B,GAAG,CACzC,KAAiB;IAEjB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI;QACnB,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,EAAE;YACd,OAAO,EAAE,IAAI,CAAC,IAAI;SACnB,CAAC;KACH,CAAC,CAAC;AACL,CAAC;;ACZD,MAAM,iBAAiB,GAAG,yvCAAyvC;;;;;;;;;;;;;;;;;;;ACSnxC,MAAM,uBAAuB,GAAG,YAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAC5B,mDAAmD,CACpD,CAAC;AAEF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,sBAAsB;IACtB,mBAAmB;IACnB,YAAY;CACb,CAAC;MAQW,aAAa;;;;;;;QAKxB,iDAAsB;QACtB,wCAAuC,EAAE,EAAC;QAC1C,gDAA6C;QAmB7C,wCAAkB;YAChB,MAAM,IAAI,CAAC,gBAAgB,CAAC,uBAAA,IAAI,qCAAgB,CAAC,KAAK,CAAC,CAAC;SACzD,EAAC;;;;IAPF,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,uBAAA,IAAI,iCAAmB,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAA,CAAC;KAChE;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,OAAO,IACpB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,KAAK,gBACE,uBAAA,IAAI,sCAAiB,CAAC,qBAAqB,IAEvD;;YAEE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B;UACtD,CACE,EAEN,eAAS,KAAK,EAAC,oBAAoB,IACjC,WAAK,KAAK,EAAC,8BAA8B,IACvC,cAAQ,KAAK,EAAC,2BAA2B,IACvC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD,EACF,UAAI,KAAK,EAAC,0BAA0B,IACjC,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CACzB,CACE,EAET,WAAK,KAAK,EAAC,gCAAgC,IACzC,aACE,YAAM,KAAK,EAAC,cAAc,IACvB,uBAAA,IAAI,sCAAiB,CAAC,WAAW,CAC7B,CACL,CACA,EAEN,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aAAO,OAAO,EAAC,OAAO,IAAE,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CAAS,EAC5D,2BACE,EAAE,EAAC,OAAO,EACV,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,uBAAA,IAAI,qCAAgB,EAC3B,KAAK,EAAE,uBAAA,IAAI,qCAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,EACpC,GAAG,EAAE,CAAC,EAA+B,MAClC,uBAAA,IAAI,iCAAmB,EAAiC,MAAA,CAAC,GAEvC,CACnB,CACF,EAEN,eACE,cACE,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,uBAAA,IAAI,qCAAgB,IAE5B,uBAAA,IAAI,sCAAiB,CAAC,qBAAqB,CACrC,CACL,CACF,CACE,CACF,CACL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams: TeamData[]\n): ComboBoxItemModel[] => {\n  return teams.map(team => {\n    return {\n      value: team.id,\n      caption: team.name\n    };\n  });\n};\n",":host {\n  display: grid;\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  max-inline-size: 1100px;\n  grid-template-columns: 1fr 550px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n  transition: var(--slide-fade-duration) opacity;\n\n  &__illustration {\n    overflow: hidden;\n    max-block-size: 700px;\n  }\n\n  &__select-team {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n  }\n\n  &__select-team-container {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n    max-inline-size: 480px;\n    place-self: center;\n  }\n\n  &__select-team-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__select-team-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__select-team-description {\n    display: grid;\n    color: var(--mer-text__complementary);\n    gap: var(--mer-spacing--md);\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  }\n}\n\n.info-message {\n  font-weight: bold;\n  color: var(--mer-text__on-surface);\n}\n.continue-button {\n  padding-inline-start: var(--mer-spacing--3xl) !important;\n  padding-inline-end: var(--mer-spacing--3xl) !important;\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, getAssetPath } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\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);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/combo-box\",\n  \"components/button\",\n  \"utils/form\"\n];\n\n@Component({\n  tag: \"gx-ide-select-user-team\",\n  styleUrl: \"select-user-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeUiSplash {\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  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n\n  /**\n   * Array that contain the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n\n  /**\n   * Callback executed when the user click the 'continue' button\n   */\n  @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n  @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(this.teams);\n  }\n\n  #continueHandle = 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          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.illustrationAriaLabel}\n          >\n            <img\n              // base image (acts like a background)\n              src={COPYRIGHTS_ILLUSTRATION}\n              class=\"slide__illustration\"\n              alt={this.#componentLocale.illustrationFigureAriaLabel}\n            />\n          </div>\n\n          <section class=\"slide__select-team\">\n            <div class=\"slide__select-team-container\">\n              <header class=\"slide__select-team-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt={this.#componentLocale.illustrationAlternativeText}\n                />\n                <h2 class=\"slide__select-team-title\">\n                  {this.#componentLocale.title}\n                </h2>\n              </header>\n\n              <div class=\"slide__select-team-description\">\n                <p>\n                  <span class=\"info-message\">\n                    {this.#componentLocale.infoMessage}\n                  </span>\n                </p>\n              </div>\n\n              <div class=\"field-group\">\n                <div class=\"field field-block\">\n                  <label htmlFor=\"teams\">{this.#componentLocale.teams}</label>\n                  <ch-combo-box-render\n                    id=\"teams\"\n                    accessibleName=\"Teams\"\n                    class=\"combo-box\"\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\n              <div>\n                <button\n                  class=\"button-primary continue-button\"\n                  onClick={this.#continueHandle}\n                >\n                  {this.#componentLocale.continueButtonCaption}\n                </button>\n              </div>\n            </div>\n          </section>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"version":3}

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

@@ -0,0 +1,119 @@
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-93411ea2.js';
+import { L as Locale } from './locale-e5107fad.js';
+
+const mapTeamsToComboBoxItemModel = (teams) => {
+    if (!teams) {
+        return [];
+    }
+    return teams.map(team => ({
+        value: team.id,
+        caption: team.name
+    }));
+};
+
+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}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeUiSplash_componentLocale, _GxIdeUiSplash_userTeamsModel, _GxIdeUiSplash_chSelectTeamEl, _GxIdeUiSplash_switchStepTransitionTime, _GxIdeUiSplash_authStepCallback, _GxIdeUiSplash_continueHandler;
+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"
+];
+const GxIdeUiSplash = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeUiSplash_componentLocale.set(this, void 0);
+        // Select User Team References :
+        _GxIdeUiSplash_userTeamsModel.set(this, []);
+        _GxIdeUiSplash_chSelectTeamEl.set(this, void 0);
+        _GxIdeUiSplash_switchStepTransitionTime.set(this, 100);
+        _GxIdeUiSplash_authStepCallback.set(this, () => {
+            console.log("authStepCallback called");
+            if (this.authStep === "signIn") {
+                this.signInCallback();
+            }
+            else if (this.authStep === "selectUserTeam") {
+                __classPrivateFieldGet(this, _GxIdeUiSplash_continueHandler, "f").call(this);
+            }
+        });
+        _GxIdeUiSplash_continueHandler.set(this, async () => {
+            console.log("continueHandler called");
+            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeUiSplash_chSelectTeamEl, "f").value);
+        });
+        this.authStepInternal = undefined;
+        this.slideIsVisible = true;
+        this.authStep = "signIn";
+        this.continueCallback = undefined;
+        this.signInCallback = undefined;
+        this.teams = undefined;
+        this.termsCallback = undefined;
+    }
+    authStepChanged(newAuthStep) {
+        console.log("authStep changed");
+        this.slideIsVisible = false;
+        // switch step
+        setTimeout(() => {
+            this.authStepInternal = newAuthStep;
+        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f"));
+        // show slide
+        setTimeout(() => {
+            this.slideIsVisible = true;
+        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f") * 2);
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.authStepInternal = this.authStep;
+        __classPrivateFieldSet(this, _GxIdeUiSplash_userTeamsModel, mapTeamsToComboBoxItemModel(this.teams), "f");
+        this.el.style.setProperty("--switch-step-transtion-time", __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f").toString() + "ms");
+    }
+    render() {
+        var _a;
+        console.log("userTeams comboBox model", __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"));
+        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, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? (h("div", { class: "slide__main-description" }, h("p", { hidden: true }, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingText, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingCallBackText)))) : ([
+            h("div", { class: "slide__select-team-description" }, h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").selectUserTeam.infoMessage)),
+            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeUiSplash_chSelectTeamEl, el, "f")) })))
+        ]), h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeUiSplash_authStepCallback, "f") }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].buttonCaption)))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/sign-in-team"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "authStep": ["authStepChanged"]
+    }; }
+};
+_GxIdeUiSplash_componentLocale = new WeakMap(), _GxIdeUiSplash_userTeamsModel = new WeakMap(), _GxIdeUiSplash_chSelectTeamEl = new WeakMap(), _GxIdeUiSplash_switchStepTransitionTime = new WeakMap(), _GxIdeUiSplash_authStepCallback = new WeakMap(), _GxIdeUiSplash_continueHandler = new WeakMap();
+GxIdeUiSplash.style = signInTeamCss;
+
+export { GxIdeUiSplash as gx_ide_sign_in_team };
+
+//# sourceMappingURL=gx-ide-sign-in-team.entry.js.map

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

@@ -0,0 +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 GxIdeUiSplash {\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    console.log(\"authStep changed\");\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\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.authStepInternal = this.authStep;\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(this.teams);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  #authStepCallback = () => {\n    console.log(\"authStepCallback called\");\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    console.log(\"continueHandler called\");\n    await this.continueCallback(this.#chSelectTeamEl.value);\n  };\n\n  render() {\n    console.log(\"userTeams comboBox model\", this.#userTeamsModel);\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}

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

@@ -1,25 +1,8 @@
 import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-93411ea2.js';
 import { L as Locale } from './locale-e5107fad.js';
 
-const mapTeamsToComboBoxItemModel = (teams) => {
-    if (!teams) {
-        return [];
-    }
-    return teams.map(team => ({
-        value: team.id,
-        caption: team.name
-    }));
-};
-
-const signInCss = ":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 signInCss = ":host{display:grid;block-size:100%;inline-size:100%;align-items:center;justify-content:center;padding:var(--mer-spacing--xl)}.slide{display:grid;max-inline-size:1100px;grid-template-columns:1fr 550px;background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-spacing--md);overflow:hidden}.slide__illustration{overflow:hidden;max-block-size:700px}.slide__sign-in{display:grid;block-size:100%;inline-size:100%;padding:var(--mer-spacing--3xl)}.slide__sign-in-container{display:grid;gap:var(--mer-spacing--lg);max-inline-size:480px;place-self:center}.slide__sign-in-header{display:grid;gap:var(--mer-spacing--lg)}.slide__sign-in-title{font-size:var(--mer-font__size--xl);color:var(--mer-text__on-surface);letter-spacing:0.02em;font-weight:var(--mer-font__weight--semi-bold)}.slide__sign-in-description{display:grid;color:var(--mer-text__complementary);gap:var(--mer-spacing--2xl);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--light);line-height:var(--mer-line-height--spaced)}.terms-conditions{text-decoration:underline}.sign-in-btn{padding-inline-start:var(--mer-spacing--3xl) !important;padding-inline-end:var(--mer-spacing--3xl) !important}";
 
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -29,14 +12,20 @@ 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 _GxIdeUiSplash_componentLocale, _GxIdeUiSplash_userTeamsModel, _GxIdeUiSplash_chSelectTeamEl, _GxIdeUiSplash_switchStepTransitionTime, _GxIdeUiSplash_authStepInitial, _GxIdeUiSplash_authStepCallback, _GxIdeUiSplash_continueHandler;
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeUiSplash_componentLocale;
 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/button"
 ];
 const GxIdeUiSplash = class {
     constructor(hostRef) {
@@ -46,68 +35,22 @@ const GxIdeUiSplash = class {
          */
         // eslint-disable-next-line @stencil-community/own-props-must-be-private
         _GxIdeUiSplash_componentLocale.set(this, void 0);
-        // Select User Team References :
-        _GxIdeUiSplash_userTeamsModel.set(this, []);
-        _GxIdeUiSplash_chSelectTeamEl.set(this, void 0);
-        _GxIdeUiSplash_switchStepTransitionTime.set(this, 100);
-        _GxIdeUiSplash_authStepInitial.set(this, "signIn");
-        _GxIdeUiSplash_authStepCallback.set(this, () => {
-            if (this.authStep === "signIn") {
-                this.signInCallback();
-            }
-            else if (this.authStep === "selectUserTeam") {
-                __classPrivateFieldGet(this, _GxIdeUiSplash_continueHandler, "f").call(this);
-            }
-        });
-        _GxIdeUiSplash_continueHandler.set(this, async () => {
-            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeUiSplash_chSelectTeamEl, "f").value);
-        });
-        this.authStepInternal = __classPrivateFieldGet(this, _GxIdeUiSplash_authStepInitial, "f");
-        this.slideIsVisible = true;
-        this.authStep = __classPrivateFieldGet(this, _GxIdeUiSplash_authStepInitial, "f");
-        this.continueCallback = undefined;
-        this.signInCallback = undefined;
-        this.teams = undefined;
         this.termsCallback = undefined;
-    }
-    authStepChanged(newAuthStep) {
-        this.slideIsVisible = false;
-        // switch step
-        setTimeout(() => {
-            this.authStepInternal = newAuthStep;
-        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f"));
-        // show slide
-        setTimeout(() => {
-            this.slideIsVisible = true;
-        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f") * 2);
+        this.signInCallback = undefined;
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
-        __classPrivateFieldSet(this, _GxIdeUiSplash_userTeamsModel, mapTeamsToComboBoxItemModel(this.teams), "f");
-        this.el.style.setProperty("--switch-step-transtion-time", __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f").toString() + "ms");
     }
     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, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? (h("div", { class: "slide__main-description" }, h("p", { hidden: true }, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingText, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingCallBackText)))) : ([
-            h("div", { class: "slide__select-team-description" }, h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").selectUserTeam.infoMessage)),
-            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeUiSplash_chSelectTeamEl, el, "f")) })))
-        ]), h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeUiSplash_authStepCallback, "f") }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].buttonCaption)))))));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAriaLabel }, h("img", {
+            // base image (acts like a background)
+            src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationFigureAriaLabel
+        })), h("div", { class: "slide__sign-in" }, h("div", { class: "slide__sign-in-container" }, h("header", { class: "slide__sign-in-header" }, h("img", { src: ICON_NEXT, alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAlternativeText }), h("h2", { class: "slide__sign-in-title" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").title)), h("div", { class: "slide__sign-in-description" }, h("p", { hidden: true }, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").byContinuingTextFirstPart, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").byContinuingCallBackText))), h("div", null, h("button", { class: "button-primary sign-in-btn", onClick: this.signInCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signInButtonCaption)))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/sign-in"]; }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "authStep": ["authStepChanged"]
-    }; }
 };
-_GxIdeUiSplash_componentLocale = new WeakMap(), _GxIdeUiSplash_userTeamsModel = new WeakMap(), _GxIdeUiSplash_chSelectTeamEl = new WeakMap(), _GxIdeUiSplash_switchStepTransitionTime = new WeakMap(), _GxIdeUiSplash_authStepInitial = new WeakMap(), _GxIdeUiSplash_authStepCallback = new WeakMap(), _GxIdeUiSplash_continueHandler = new WeakMap();
+_GxIdeUiSplash_componentLocale = new WeakMap();
 GxIdeUiSplash.style = signInCss;
 
 export { GxIdeUiSplash as gx_ide_sign_in };

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

@@ -1 +1 @@
-{"file":"gx-ide-sign-in.entry.js","mappings":"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","names":[],"sources":["src/components/sign-in/helpers.ts","src/components/sign-in/sign-in.scss?tag=gx-ide-sign-in&encapsulation=shadow","src/components/sign-in/sign-in.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in\";\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\",\n  styleUrl: \"sign-in.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in\"]\n})\nexport class GxIdeUiSplash {\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  #authStepInitial: AuthStep = \"signIn\";\n\n  @Element() el: HTMLGxIdeSignInElement;\n\n  /**\n   * This is a hand over from \"authStep\", that allows updating descriptions once the slide is hidden. This allows a smooth transition between descriptions.\n   */\n  @State() authStepInternal: AuthStep = this.#authStepInitial;\n\n  /**\n   * Defines iv the main slide is visible or not. Used to do a smooth transition between slides.\n   */\n  @State() slideIsVisible: boolean = true;\n\n  /**\n   * The authentication step to display\n   */\n  @Prop() readonly authStep: AuthStep = this.#authStepInitial;\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\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.#userTeamsModel = mapTeamsToComboBoxItemModel(this.teams);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\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.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+pCAA+pC;;;;;;;;;;;;;;;;;;;ACOjrC,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;CACpB,CAAC;MAQW,aAAa;;;;;;;QAKxB,iDAAsB;;;;IActB,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,OAAO,IACpB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,KAAK,gBACE,uBAAA,IAAI,sCAAiB,CAAC,qBAAqB,IAEvD;;YAEE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B;UACtD,CACE,EAEN,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,0BAA0B,IACnC,cAAQ,KAAK,EAAC,uBAAuB,IACnC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD,EACF,UAAI,KAAK,EAAC,sBAAsB,IAC7B,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CACzB,CACE,EACT,WAAK,KAAK,EAAC,4BAA4B,IACrC,SAAG,MAAM,UACP,gBAAO,uBAAA,IAAI,sCAAiB,CAAC,eAAe,CAAQ,CAClD,EACJ,gBACG,uBAAA,IAAI,sCAAiB,CAAC,yBAAyB,EAChD,SAAG,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACpD,uBAAA,IAAI,sCAAiB,CAAC,wBAAwB,CAC7C,CACC,CACH,EACN,eACE,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,uBAAA,IAAI,sCAAiB,CAAC,mBAAmB,CACnC,CACL,CACF,CACF,CACE,CACL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/sign-in/sign-in.scss?tag=gx-ide-sign-in&encapsulation=shadow","src/components/sign-in/sign-in.tsx"],"sourcesContent":[":host {\n  display: grid;\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  max-inline-size: 1100px;\n  grid-template-columns: 1fr 550px;\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    max-block-size: 700px;\n  }\n\n  &__sign-in {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n  }\n\n  &__sign-in-container {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n    max-inline-size: 480px;\n    place-self: center;\n  }\n\n  &__sign-in-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__sign-in-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__sign-in-description {\n    display: grid;\n    color: var(--mer-text__complementary);\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  }\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n.sign-in-btn {\n  padding-inline-start: var(--mer-spacing--3xl) !important;\n  padding-inline-end: var(--mer-spacing--3xl) !important;\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, getAssetPath } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\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];\n\n@Component({\n  tag: \"gx-ide-sign-in\",\n  styleUrl: \"sign-in.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in\"]\n})\nexport class GxIdeUiSplash {\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\n  @Element() el: HTMLGxIdeSignInElement;\n\n  /**\n   * Callback executed when the user click on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click the Sign In button\n   */\n  @Prop() readonly signInCallback: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"slide\">\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.illustrationAriaLabel}\n          >\n            <img\n              // base image (acts like a background)\n              src={COPYRIGHTS_ILLUSTRATION}\n              class=\"slide__illustration\"\n              alt={this.#componentLocale.illustrationFigureAriaLabel}\n            />\n          </div>\n\n          <div class=\"slide__sign-in\">\n            <div class=\"slide__sign-in-container\">\n              <header class=\"slide__sign-in-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt={this.#componentLocale.illustrationAlternativeText}\n                />\n                <h2 class=\"slide__sign-in-title\">\n                  {this.#componentLocale.title}\n                </h2>\n              </header>\n              <div class=\"slide__sign-in-description\">\n                <p hidden>\n                  <span>{this.#componentLocale.descriptionText}</span>\n                </p>\n                <span>\n                  {this.#componentLocale.byContinuingTextFirstPart}\n                  <a class=\"terms-conditions\" onClick={this.termsCallback}>\n                    {this.#componentLocale.byContinuingCallBackText}\n                  </a>\n                </span>\n              </div>\n              <div>\n                <button\n                  class=\"button-primary sign-in-btn\"\n                  onClick={this.signInCallback}\n                >\n                  {this.#componentLocale.signInButtonCaption}\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}