@genexus/genexus-ide-ui 1.0.31 → 1.0.32

package/dist/collection/components/sign-in/sign-in.css

@@ -1,7 +1,5 @@
 :host {
   display: grid;
-  container-type: inline-size;
-  container-name: host-container;
   block-size: 100%;
   inline-size: 100%;
   align-items: center;
@@ -11,82 +9,52 @@
 
 .slide {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  block-size: 100%;
-  max-block-size: 700px;
   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;
-  object-fit: cover;
-  object-position: left;
-  block-size: 100%;
-  inline-size: 100%;
+  max-block-size: 700px;
 }
-.slide__main {
+.slide__sign-in {
   display: grid;
   block-size: 100%;
   inline-size: 100%;
   padding: var(--mer-spacing--3xl);
-  transform: translateY(var(--mer-spacing--2xs));
-  transition: var(--switch-step-transtion-time) all;
-  opacity: 0;
-}
-.slide__main--visible {
-  transform: translateY(0);
-  opacity: 1;
 }
-.slide__main-container {
+.slide__sign-in-container {
   display: grid;
-  place-self: center;
   gap: var(--mer-spacing--lg);
   max-inline-size: 480px;
+  place-self: center;
 }
-.slide__main-header {
+.slide__sign-in-header {
   display: grid;
   gap: var(--mer-spacing--lg);
 }
-.slide__main-title {
-  display: flex;
-  flex-direction: column;
+.slide__sign-in-title {
   font-size: var(--mer-font__size--xl);
-  font-weight: var(--mer-font__weight--semi-bold);
-  letter-spacing: 0.02em;
   color: var(--mer-text__on-surface);
+  letter-spacing: 0.02em;
+  font-weight: var(--mer-font__weight--semi-bold);
 }
-.slide__main-description {
+.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);
-  color: var(--mer-text__complementary);
 }
 
 .terms-conditions {
   text-decoration: underline;
 }
 
-.teams-list {
-  inline-size: 100%;
-  max-inline-size: 400px;
-}
-
-.main-btn {
-  inline-size: 100%;
-  max-inline-size: 124px;
-}
-
-@container host-container (max-width: 768px) {
-  .slide {
-    grid-template-columns: 1fr 2fr;
-  }
-}
-@container host-container (max-width: 640px) {
-  .slide {
-    grid-template-columns: 1fr 5fr;
-  }
+.sign-in-btn {
+  padding-inline-start: var(--mer-spacing--3xl) !important;
+  padding-inline-end: var(--mer-spacing--3xl) !important;
 }

package/dist/collection/components/sign-in/sign-in.js

@@ -1,10 +1,3 @@
-var __classPrivateFieldGet = (this && this.__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 = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -14,19 +7,24 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         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 = (this && this.__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;
 // Stencil
 import { Host, h, getAssetPath } from "@stencil/core";
 // Custom Imports
 import { Locale } from "../../common/locale";
-import { mapTeamsToComboBoxItemModel } from "./helpers";
 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"
 ];
 export class GxIdeUiSplash {
     constructor() {
@@ -35,60 +33,17 @@ export class GxIdeUiSplash {
          */
         // 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 is() { return "gx-ide-sign-in"; }
     static get encapsulation() { return "shadow"; }
@@ -105,51 +60,7 @@ export class GxIdeUiSplash {
     static get assetsDirs() { return ["gx-ide-assets/sign-in"]; }
     static get properties() {
         return {
-            "authStep": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AuthStep",
-                    "resolved": "\"selectUserTeam\" | \"signIn\"",
-                    "references": {
-                        "AuthStep": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/sign-in/sign-in.tsx",
-                            "id": "src/components/sign-in/sign-in.tsx::AuthStep"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The authentication step to display"
-                },
-                "attribute": "auth-step",
-                "reflect": false,
-                "defaultValue": "this.#authStepInitial"
-            },
-            "continueCallback": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(teamId: string) => Promise<void>",
-                    "resolved": "(teamId: string) => Promise<void>",
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Callback executed when the user clicks the 'Continue' button"
-                }
-            },
-            "signInCallback": {
+            "termsCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -166,31 +77,10 @@ export class GxIdeUiSplash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback executed when the user click the \"Sign In\" button"
+                    "text": "Callback executed when the user click on the \"term and conditions\" link"
                 }
             },
-            "teams": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TeamData[]",
-                    "resolved": "TeamData[]",
-                    "references": {
-                        "TeamData": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/sign-in/sign-in.tsx",
-                            "id": "src/components/sign-in/sign-in.tsx::TeamData"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Array that contains the user's teams"
-                }
-            },
-            "termsCallback": {
+            "signInCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -207,24 +97,12 @@ export class GxIdeUiSplash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback executed when the user clicks on the \"term and conditions\" link"
+                    "text": "Callback executed when the user click the Sign In button"
                 }
             }
         };
     }
-    static get states() {
-        return {
-            "authStepInternal": {},
-            "slideIsVisible": {}
-        };
-    }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "authStep",
-                "methodName": "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();
 //# sourceMappingURL=sign-in.js.map

package/dist/collection/components/sign-in/sign-in.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign-in.js","sourceRoot":"","sources":["../../../src/components/sign-in/sign-in.tsx"],"names":[],"mappings":"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","sourcesContent":["// 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":"sign-in.js","sourceRoot":"","sources":["../../../src/components/sign-in/sign-in.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,UAAU;AACV,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGhF,iBAAiB;AACjB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,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;AAQF,MAAM,OAAO,aAAa;;QACxB;;WAEG;QACH,wEAAwE;QACxE,iDAAsB;;;;IActB,KAAK,CAAC,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,KAAK,EAAE,WAAW,GAAa;YACzC,eAAS,KAAK,EAAC,OAAO;gBACpB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,KAAK,gBACE,uBAAA,IAAI,sCAAiB,CAAC,qBAAqB;oBAEvD;wBACE,sCAAsC;wBACtC,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD,CACE;gBAEN,WAAK,KAAK,EAAC,gBAAgB;oBACzB,WAAK,KAAK,EAAC,0BAA0B;wBACnC,cAAQ,KAAK,EAAC,uBAAuB;4BACnC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD;4BACF,UAAI,KAAK,EAAC,sBAAsB,IAC7B,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CACzB,CACE;wBACT,WAAK,KAAK,EAAC,4BAA4B;4BACrC,SAAG,MAAM;gCACP,gBAAO,uBAAA,IAAI,sCAAiB,CAAC,eAAe,CAAQ,CAClD;4BACJ;gCACG,uBAAA,IAAI,sCAAiB,CAAC,yBAAyB;gCAChD,SAAG,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACpD,uBAAA,IAAI,sCAAiB,CAAC,wBAAwB,CAC7C,CACC,CACH;wBACN;4BACE,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,uBAAA,IAAI,sCAAiB,CAAC,mBAAmB,CACnC,CACL,CACF,CACF,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// 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"]}

package/dist/collection/components/sign-in-team/gx-ide-assets/sign-in-team/images/icon-next.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3.7C0 2.5799 0 2.01984 0.217987 1.59202C0.409734 1.21569 0.715695 0.909734 1.09202 0.717987C1.51984 0.5 2.07989 0.5 3.2 0.5H26.8C27.9201 0.5 28.4802 0.5 28.908 0.717987C29.2843 0.909734 29.5903 1.21569 29.782 1.59202C30 2.01984 30 2.57989 30 3.7V27.3C30 28.4201 30 28.9802 29.782 29.408C29.5903 29.7843 29.2843 30.0903 28.908 30.282C28.4802 30.5 27.9201 30.5 26.8 30.5H3.2C2.0799 30.5 1.51984 30.5 1.09202 30.282C0.715695 30.0903 0.409734 29.7843 0.217987 29.408C0 28.9802 0 28.4201 0 27.3V3.7Z" fill="#5BA7FF"/>
+<path d="M14.8361 26.63L7.73975 26.6245L15.8043 15.5027L7.73975 4.37271H14.8361L22.2543 15.5027L14.8361 26.6327V26.63Z" fill="black"/>
+</svg>

package/dist/collection/components/sign-in-team/gx-ide-assets/sign-in-team/langs/sign-in-team.lang.en.json

@@ -0,0 +1,18 @@
+{
+  "illustrationAriaLabel": "GeneXus Next geometric shapes illustration",
+  "signIn": {
+    "titlePart1": "Welcome to ",
+    "titlePart2": "GeneXus Next Desktop",
+    "description": "(This description is to be defined)",
+    "byContinuingText": "By continuing you agree to ",
+    "byContinuingCallBackText": "terms and conditions",
+    "buttonCaption": "Sign In"
+  },
+  "selectUserTeam": {
+    "titlePart1": "You have successfully ",
+    "titlePart2": "signed in",
+    "infoMessage": "Before proceeding please select your team from the list below",
+    "teamSelectorLabel": "Team",
+    "buttonCaption": "Continue"
+  }
+}

package/dist/collection/components/sign-in-team/gx-ide-assets/sign-in-team/langs/sign-in-team.lang.ja.json

@@ -0,0 +1,18 @@
+{
+  "illustrationAriaLabel": "",
+  "signIn": {
+    "titlePart1": "",
+    "titlePart2": "",
+    "description": "",
+    "byContinuingText": "",
+    "byContinuingCallBackText": "",
+    "buttonCaption": ""
+  },
+  "selectUserTeam": {
+    "titlePart1": "",
+    "titlePart2": "",
+    "infoMessage": "",
+    "teamSelectorLabel": "",
+    "buttonCaption": ""
+  }
+}

package/dist/collection/components/sign-in-team/gx-ide-assets/sign-in-team/langs/sign-in-team.lang.zh.json

@@ -0,0 +1,18 @@
+{
+  "illustrationAriaLabel": "",
+  "signIn": {
+    "titlePart1": "",
+    "titlePart2": "",
+    "description": "",
+    "byContinuingText": "",
+    "byContinuingCallBackText": "",
+    "buttonCaption": ""
+  },
+  "selectUserTeam": {
+    "titlePart1": "",
+    "titlePart2": "",
+    "infoMessage": "",
+    "teamSelectorLabel": "",
+    "buttonCaption": ""
+  }
+}

package/dist/collection/components/sign-in-team/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/sign-in-team/helpers.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAAkB,EACe,EAAE;IACnC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,KAAK,EAAE,IAAI,CAAC,EAAE;QACd,OAAO,EAAE,IAAI,CAAC,IAAI;KACnB,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","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"]}

package/dist/collection/components/sign-in-team/sign-in-team.css

@@ -0,0 +1,92 @@
+:host {
+  display: grid;
+  container-type: inline-size;
+  container-name: host-container;
+  block-size: 100%;
+  inline-size: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mer-spacing--xl);
+}
+
+.slide {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  block-size: 100%;
+  max-block-size: 700px;
+  max-inline-size: 1100px;
+  background-color: var(--mer-surface__elevation--01);
+  border-radius: var(--mer-spacing--md);
+  overflow: hidden;
+}
+.slide__illustration {
+  overflow: hidden;
+  object-fit: cover;
+  object-position: left;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.slide__main {
+  display: grid;
+  block-size: 100%;
+  inline-size: 100%;
+  padding: var(--mer-spacing--3xl);
+  transform: translateY(var(--mer-spacing--2xs));
+  transition: var(--switch-step-transtion-time) all;
+  opacity: 0;
+}
+.slide__main--visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+.slide__main-container {
+  display: grid;
+  place-self: center;
+  gap: var(--mer-spacing--lg);
+  max-inline-size: 480px;
+}
+.slide__main-header {
+  display: grid;
+  gap: var(--mer-spacing--lg);
+}
+.slide__main-title {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--mer-font__size--xl);
+  font-weight: var(--mer-font__weight--semi-bold);
+  letter-spacing: 0.02em;
+  color: var(--mer-text__on-surface);
+}
+.slide__main-description {
+  display: grid;
+  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);
+  color: var(--mer-text__complementary);
+}
+
+.terms-conditions {
+  text-decoration: underline;
+}
+
+.teams-list {
+  inline-size: 100%;
+  max-inline-size: 400px;
+}
+
+.main-btn {
+  inline-size: 100%;
+  max-inline-size: 124px;
+}
+
+@container host-container (max-width: 768px) {
+  .slide {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+@container host-container (max-width: 640px) {
+  .slide {
+    grid-template-columns: 1fr 5fr;
+  }
+}