@genexus/genexus-ide-ui 1.1.32 → 1.1.34

package/dist/genexus-ide-ui/gx-ide-assets/chat-container/chat-lit.css

@@ -0,0 +1,376 @@
+.chat-lit::part(header__time assistant),
+.chat-lit::part(send-input),
+.chat-lit::part(assistant content waiting),
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  line-height: var(--line-height-tight);
+}
+.chat-lit::part(send-input),
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  font-size: var(--font-size-body-m);
+}
+.chat-lit::part(header__time assistant),
+.chat-lit::part(assistant content waiting) {
+  font-size: var(--font-size-body-s);
+}
+.chat-lit::part(send-input) {
+  font-weight: var(--font-weight-regular);
+}
+.chat-lit::part(message),
+.chat-lit::part(assistant copy-message-content) {
+  font-size: var(--font-size-body-m);
+  line-height: var(--line-height-tight);
+  font-weight: var(--font-weight-regular);
+}
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  font-weight: var(--font-weight-semi-bold);
+}
+.chat-lit::part(header__time assistant),
+.chat-lit::part(assistant content waiting) {
+  font-weight: var(--font-weight-regular);
+  font-style: italic;
+}
+.chat-lit::part(assistant copy-message-content),
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: center;
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+  padding-block: var(--control__padding-block);
+  padding-inline: var(--control__padding-inline);
+  box-sizing: border-box;
+  background-color: var(--button-background-color);
+  color: var(--button-color);
+}
+.chat-lit::part(assistant copy-message-content):focus-visible,
+.chat-lit::part(send-button):focus-visible,
+.chat-lit::part(stop-generating-answer-button):focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  --button-background-color: transparent;
+  --control__border-color: var(--button-color);
+  --button-color: var(--mer-text__neutral);
+  --button-color--enabled: var(--mer-text__neutral);
+  --button-color--active: var(--mer-text__on-primary--active);
+}
+.chat-lit::part(send-button):hover,
+.chat-lit::part(stop-generating-answer-button):hover {
+  --button-color: var(--mer-text__primary--hover);
+}
+.chat-lit::part(send-button):active,
+.chat-lit::part(stop-generating-answer-button):active {
+  --control__border-color: var(--mer-border-color__primary--active);
+  --button-color: var(--button-color--active);
+}
+.chat-lit::part(send-button):disabled,
+.chat-lit::part(stop-generating-answer-button):disabled {
+  --button-color: var(--mer-text__on-disabled);
+}
+.chat-lit::part(assistant copy-message-content) {
+  --button-background-color: transparent;
+  --control__border-color: transparent;
+  --button-color: var(--mer-text__primary);
+}
+.chat-lit::part(assistant copy-message-content):hover {
+  --button-color: var(--mer-text__primary--hover);
+}
+.chat-lit::part(assistant copy-message-content):active {
+  --button-color: var(--mer-text__primary--active);
+}
+.chat-lit::part(assistant copy-message-content):disabled {
+  --button-color: var(--mer-text__on-disabled);
+}
+.chat-lit::part(assistant copy-message-content),
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  padding: calc(
+    (
+        var(--control__block-size) - 2 * var(--control__border-width) -
+          var(--mer-icon__box--md)
+      ) /
+      2
+  );
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+}
+.chat-lit::part(send-input) {
+  --ch-edit-gap: var(--control__icon-gap);
+  --ch-edit__image-size: var(--mer-icon__box--md);
+  --ch-placeholder-color: var(--mer-color__neutral-gray--400);
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+  background-color: var(--control__bg-color);
+  color: var(--control__color);
+  --ch-placeholder-color: var(--control-placeholder__color);
+  padding-block: var(--control__padding-block);
+  padding-inline: var(--control__padding-inline);
+}
+.chat-lit::part(send-input):focus {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.chat-lit::part(send-input):hover {
+  --control__border-color: var(--control__border-color--hover);
+}
+.chat-lit {
+  --button-block-size: 31px;
+  --button-margin-block: var(--mer-spacing--md);
+  --font-weight-regular: 100;
+  --line-height-tight: 1.4;
+  --send-input-block-padding: 16px;
+  --send-input-inline-start-padding: 10px;
+  --send-input-inline-end-padding: 10px;
+  --send-input-inline-size: 32px;
+}
+.chat-lit::part(messages-container) {
+  gap: var(--mer-spacing--md);
+  padding: var(--mer-spacing--md);
+}
+.chat-lit-with-file-upload {
+  --send-input-block-padding: 10px;
+  --send-input-inline-start-padding: 2px;
+}
+.chat-lit-with-file-upload::part(send-input) {
+  grid-template: "file-upload-menu ch-edit-content live-audio-button" 1fr / max-content 1fr max-content;
+}
+.chat-lit-with-file-viewer::part(send-input) {
+  grid-template: "file-upload-menu ch-edit-content live-audio-button" 1fr "file-viewer file-viewer file-viewer" max-content/max-content 1fr;
+}
+.chat-lit::part(message) {
+  --message-content-border-color: transparent;
+  --time-display: initial;
+  color: var(--mer-color__neutral-gray--100);
+}
+.chat-lit::part(message user) {
+  background-color: var(--mer-color__chat-message--user);
+  max-inline-size: 90%;
+  justify-self: end;
+}
+.chat-lit::part(message user),
+.chat-lit::part(error content),
+.chat-lit::part(assistant content warning),
+.chat-lit::part(assistant content success) {
+  padding: var(--mer-spacing--sm);
+  border-radius: var(--mer-border__radius--sm);
+}
+.chat-lit::part(assistant copy-message-content)::before {
+  --button-icon: var(--icon__system_copy_primary--enabled);
+  content: "";
+  inline-size: var(--mer-icon__box--md);
+  block-size: var(--mer-icon__box--md);
+  content: "";
+  display: grid;
+  -webkit-mask: no-repeat center/100% var(--button-icon);
+  background-color: currentColor;
+}
+.chat-lit::part(assistant copy-message-content copying)::before {
+  --button-icon: var(--icon__system_check_on-elevation--enabled);
+}
+.chat-lit::part(header assistant) {
+  align-items: center;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-between;
+  margin-block-end: var(--mer-spacing--sm);
+}
+.chat-lit::part(header__start assistant) {
+  align-items: center;
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+.chat-lit::part(header__avatar-container assistant) {
+  position: relative;
+  inline-size: 26px;
+  block-size: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat-lit::part(header__avatar-border assistant) {
+  position: absolute;
+  overflow: hidden;
+  inline-size: 100%;
+  block-size: 100%;
+  background: linear-gradient(
+    90deg,
+    var(
+        --chat-avatar-border-color-from,
+        var(--mer-color__chat-avatar-circle-from)
+      )
+      0%,
+    var(--chat-avatar-border-color-to, var(--mer-color__chat-avatar-circle-to))
+      100%
+  );
+  border-radius: 50%;
+  -webkit-mask-image: radial-gradient(
+    circle 12px at center,
+    transparent 98%,
+    black 100%
+  );
+  mask-image: radial-gradient(
+    circle 12px at center,
+    transparent 98%,
+    black 100%
+  );
+}
+.chat-lit::part(header__avatar-image assistant) {
+  position: absolute;
+  display: block;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  border-radius: 50%;
+  background-image: var(--icon__system_assistant-fill_primary--active);
+  background-color: var(
+    --chat-avatar-background-color,
+    var(--mer-color__primary--300)
+  );
+  background-size: 80%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.chat-lit::part(header__role assistant) {
+  display: inline-grid;
+  gap: 6px;
+  grid-template-columns: max-content max-content;
+}
+.chat-lit::part(header__role assistant)::before {
+  align-self: center;
+  background-color: currentColor;
+  block-size: var(--mer-spacing--2xs);
+  border-radius: 50%;
+  content: "";
+  display: grid;
+  inline-size: var(--mer-spacing--2xs);
+  justify-self: flex-end;
+}
+.chat-lit::part(header__time assistant) {
+  display: var(--time-display);
+  color: var(--mer-text__complementary);
+}
+.chat-lit::part(error content),
+.chat-lit::part(assistant content warning),
+.chat-lit::part(assistant content success) {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: var(--mer-spacing--sm);
+  align-items: center;
+}
+.chat-lit::part(error content)::before,
+.chat-lit::part(assistant content warning)::before,
+.chat-lit::part(assistant content success)::before {
+  block-size: var(--mer-spacing--md);
+  content: "";
+  display: grid;
+  inline-size: var(--mer-spacing--md);
+  justify-self: flex-end;
+  background: var(--chat-message-icon) no-repeat center center/contain;
+}
+.chat-lit::part(error content) {
+  background-color: var(--mer-color__chat-message--error);
+  --chat-message-icon: var(--icon__system_warning_error--enabled);
+}
+.chat-lit::part(assistant content warning) {
+  background-color: var(--mer-color__chat-message--warning);
+  --chat-message-icon: var(--icon__system_warning_warning--enabled);
+}
+.chat-lit::part(assistant content success) {
+  background-color: var(--mer-color__chat-message--success);
+  --chat-message-icon: var(--icon__system_check_success--enabled);
+}
+.chat-lit::part(assistant content waiting) {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+.chat-lit::part(send-container) {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-spacing--2xs);
+  position: relative;
+  margin: var(--mer-spacing--md);
+}
+.chat-lit::part(send-input-wrapper) {
+  position: relative;
+}
+.chat-lit::part(send-input) {
+  --ch-edit-gap: var(--control__icon-gap);
+  --ch-edit__image-size: var(--mer-icon__box--md);
+  --ch-placeholder-color: var(--control-placeholder__color);
+  border-width: 0 !important;
+  background-color: rgba(0, 0, 0, 0) !important;
+  border-color: var(--mer-color__neutral-gray--900);
+  border-radius: var(--control__border-radius);
+  border-style: var(--control__border-style);
+  color: var(--control__color);
+  padding-block: var(--send-input-block-padding);
+  padding-inline-start: var(--send-input-inline-start-padding);
+  padding-inline-end: calc(
+    var(--send-input-inline-end-padding) * 2 + var(--send-input-inline-size)
+  );
+}
+.chat-lit::part(send-input):hover {
+  --control__border-color: var(--control__border-color--hover);
+}
+.chat-lit::part(send-input):focus {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.chat-lit::part(send-button),
+.chat-lit::part(stop-generating-answer-button) {
+  position: absolute;
+  inset-inline-end: var(--send-input-inline-end-padding);
+  inset-block-end: var(--send-input-inline-end-padding);
+}
+.chat-lit::part(send-button) {
+  --icon-path: var(--icon__system_send_neutral--enabled);
+  z-index: 1;
+}
+.chat-lit::part(send-button):hover {
+  --icon-path: var(--icon__system_send_neutral--hover);
+}
+.chat-lit::part(send-button):active {
+  --icon-path: var(--icon__system_send_neutral--active);
+}
+.chat-lit::part(stop-generating-answer-button) {
+  --icon-path: var(--icon__system_cancel-circle_neutral--enabled);
+  font-size: 0 !important;
+  background-color: var(--mer-surface__elevation--02);
+  z-index: 2;
+}
+.chat-lit::part(stop-generating-answer-button):hover {
+  --icon-path: var(--icon__system_cancel-circle_neutral--hover);
+}
+.chat-lit::part(stop-generating-answer-button):active {
+  --icon-path: var(--icon__system_cancel-circle_neutral--active);
+}
+.chat-lit::part(send-button)::before,
+.chat-lit::part(stop-generating-answer-button)::before {
+  content: "";
+  display: inline-block;
+  inline-size: var(--mer-icon__box--md);
+  block-size: var(--mer-icon__box--md);
+  background: no-repeat center/var(--mer-icon__size--md) var(--icon-path);
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/genexus-ide-ui/{p-61343e93.entry.js → p-203f0417.entry.js}

@@ -12,7 +12,7 @@ const mapTeamsToComboBoxItemModel = e => {
   })));
 };
 
-const r = ":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mer-spacing--xl);\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\n  transition: var(--switch-step-transtion-time) all;\n  opacity: 0;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
+const r = ":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--dialog-border-radius, var(--mer-spacing--md));\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\n  transition: var(--switch-step-transtion-time) all;\n  opacity: 0;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
 
 var l = undefined && undefined.__classPrivateFieldGet || function(e, i, n, s) {
   if (n === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
@@ -27,7 +27,7 @@ var o = undefined && undefined.__classPrivateFieldSet || function(e, i, n, s, t)
   return s === "a" ? t.call(e, n) : t ? t.value = n : i.set(e, n), n;
 };
 
-var h, c, d, f, m, p, g, u, v, b, w, _, x, k;
+var h, c, d, f, m, p, u, g, v, b, w, _, x, k;
 
 const y = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 
@@ -51,14 +51,14 @@ const T = class {
     f.set(this, 100);
     m.set(this, void 0);
     p.set(this, void 0);
-    g.set(this, (() => {
+    u.set(this, (() => {
       if (this.authStep === "signIn") {
         this.signInCallback();
       } else if (this.authStep === "selectUserTeam") {
-        l(this, u, "f").call(this);
+        l(this, g, "f").call(this);
       }
     }));
-    u.set(this, (async () => {
+    g.set(this, (async () => {
       await this.continueCallback(l(this, d, "f").value);
     }));
     v.set(this, (() => n("header", {
@@ -74,7 +74,7 @@ const T = class {
       const e = this.authStep === "signIn" && this.termsConfirmationRequired && !this.termsAndConditionsAccepted;
       return n("div", null, n("button", {
         class: "button-primary main-btn",
-        onClick: l(this, g, "f"),
+        onClick: l(this, u, "f"),
         disabled: e
       }, l(this, h, "f")[this.authStepInternal].buttonCaption));
     }));
@@ -227,10 +227,10 @@ const T = class {
 };
 
 h = new WeakMap, c = new WeakMap, d = new WeakMap, f = new WeakMap, m = new WeakMap, 
-p = new WeakMap, g = new WeakMap, u = new WeakMap, v = new WeakMap, b = new WeakMap, 
+p = new WeakMap, u = new WeakMap, g = new WeakMap, v = new WeakMap, b = new WeakMap, 
 w = new WeakMap, _ = new WeakMap, x = new WeakMap, k = new WeakMap;
 
 T.style = r;
 
 export { T as gx_ide_sign_in_team };
-//# sourceMappingURL=p-61343e93.entry.js.map
+//# sourceMappingURL=p-203f0417.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapTeamsToComboBoxItemModel","teams","map","team","value","id","caption","name","signInTeamCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","CSS_BUNDLES","CHECKED_VALUE","GxIdeSignInTeam","_GxIdeSignInTeam_componentLocale","set","this","_GxIdeSignInTeam_userTeamsModel","_GxIdeSignInTeam_chSelectTeamEl","_GxIdeSignInTeam_switchStepTransitionTime","_GxIdeSignInTeam_termsAndConditionsCheckboxEl","_GxIdeSignInTeam_privacyPolicyCheckboxEl","_GxIdeSignInTeam_authStepCallback","authStep","signInCallback","__classPrivateFieldGet","_GxIdeSignInTeam_continueHandler","call","async","continueCallback","_GxIdeSignInTeam_renderStepHeader","h","class","src","alt","authStepInternal","titlePart1","titlePart2","_GxIdeSignInTeam_renderStepFooter","signInDisabled","termsConfirmationRequired","termsAndConditionsAccepted","onClick","disabled","buttonCaption","_GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted","privacyPolicyAccepted","_GxIdeSignInTeam_termsAndConditionsClickedHandler","event","preventDefault","termsCallback","_GxIdeSignInTeam_privacyPolicyClickedHandler","privacyCallback","_GxIdeSignInTeam_evaluateStepRender","signIn","description","checkedValue","ref","el","__classPrivateFieldSet","onInput","htmlFor","agreement","termsAndConditionsLabel","hyperlink","termsAndConditionsLink","privacyAndPolicyLabel","privacyAndPolicyLink","loaderTitle","loader","fetchingTeamsTitle","settingUpSessionTitle","loaderDescription","fetchingTeamsDescription","settingUpDescription","show","selectUserTeam","infoMessage","label","accessibleName","model","_a","authStepChanged","newAuthStep","slideIsVisible","setTimeout","teamsChanged","newTeams","componentWillLoad","Locale","getComponentStrings","style","setProperty","toString","render","Host","slide__main"],"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}\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(--dialog-border-radius, var(--mer-spacing--md));\n  overflow: hidden;\n\n  &__illustration {\n    overflow: hidden;\n    object-fit: cover;\n    object-position: left;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  &__main {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n    transform: translateY(var(--mer-spacing--2xs));\n    transition: var(--switch-step-transtion-time) all;\n    opacity: 0;\n\n    &--visible {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  &__main-container {\n    display: grid;\n    place-self: center;\n    gap: var(--mer-spacing--lg);\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--mer-font__size--xl);\n    font-weight: var(--mer-font__weight--semi-bold);\n    letter-spacing: 0.02em;\n    color: var(--mer-text__on-surface);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: var(--mer-spacing--2xl);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n    color: var(--mer-text__complementary);\n    max-inline-size: 370px;\n  }\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n\n// WA (this class should be defined on Mercury\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/combo-box\",\n  \"components/checkbox\",\n  \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n  tag: \"gx-ide-sign-in-team\",\n  styleUrl: \"sign-in-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  // Select User Team References :\n  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n  #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n  #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n  @Element() el: HTMLGxIdeSignInTeamElement;\n\n  /**\n   * This is a handover from \"authStep\" that allows updating descriptions once\n   * the slide is hidden. This enables a smooth transition between descriptions.\n   */\n\n  @State() authStepInternal: AuthStep;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions\n   * between slides.\n   */\n  @State() slideIsVisible: boolean = true;\n\n  /**\n   * True if terms and conditions are accepted.\n   */\n  @State() termsAndConditionsAccepted: boolean = false;\n\n  /**\n   * The authentication step to display\n   */\n  @Prop() readonly authStep: AuthStep = \"signIn\";\n  @Watch(\"authStep\")\n  authStepChanged(newAuthStep: AuthStep) {\n    this.slideIsVisible = false;\n    // switch step\n    setTimeout(() => {\n      this.authStepInternal = newAuthStep;\n    }, this.#switchStepTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#switchStepTransitionTime * 2);\n  }\n\n  /**\n   * Callback executed when the user clicks the 'Continue' button\n   */\n  @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n  /**\n   * Callback executed when the user click the \"Sign In\" button\n   */\n  @Prop() readonly signInCallback!: () => Promise<void>;\n\n  /**\n   * When true, it will diplay checkboxes for the user to confirm terms and conditions\n   */\n  @Prop() readonly termsConfirmationRequired: boolean = false;\n\n  /**\n   * Array that contains the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n  @Watch(\"teams\")\n  teamsChanged(newTeams: TeamData[]) {\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n  }\n\n  /**\n   * Callback executed when the user clicks on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks on the \"privacy policy\" link\n   */\n  @Prop() readonly privacyCallback: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\n    // Initialize values\n    this.authStepInternal = this.authStep;\n    this.teamsChanged(this.teams);\n  }\n\n  #authStepCallback = () => {\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectTeamEl.value);\n  };\n\n  #renderStepHeader = (): HTMLElement => {\n    return (\n      <header class=\"slide__main-header\">\n        <img\n          src={ICON_NEXT}\n          alt=\"\" // decorative\n        />\n        <h2\n          // Split the title into two spans for better styling\n          class=\"slide__main-title\"\n        >\n          <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n          <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n        </h2>\n      </header>\n    );\n  };\n\n  #renderStepFooter = (): HTMLElement => {\n    const signInDisabled =\n      this.authStep === \"signIn\" &&\n      this.termsConfirmationRequired &&\n      !this.termsAndConditionsAccepted;\n    return (\n      <div>\n        <button\n          class=\"button-primary main-btn\"\n          onClick={this.#authStepCallback}\n          disabled={signInDisabled}\n        >\n          {this.#componentLocale[this.authStepInternal].buttonCaption}\n        </button>\n      </div>\n    );\n  };\n\n  #evaluateTermsConditionsAndPrivacyAccepted = () => {\n    const termsAndConditionsAccepted =\n      this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n    const privacyPolicyAccepted =\n      this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n    this.termsAndConditionsAccepted =\n      termsAndConditionsAccepted && privacyPolicyAccepted;\n  };\n\n  #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n    event.preventDefault();\n    this.termsCallback();\n  };\n\n  #privacyPolicyClickedHandler = (event: MouseEvent) => {\n    event.preventDefault();\n    this.privacyCallback();\n  };\n\n  #evaluateStepRender = () => {\n    if (this.authStepInternal === \"signIn\") {\n      return [\n        this.#renderStepHeader(),\n        <p class=\"body-regular-l\">\n          {this.#componentLocale.signIn.description}\n        </p>,\n        this.termsConfirmationRequired && (\n          <div class=\"field-group\">\n            <div\n              // terms and conditions\n              class=\"field field-inline\"\n            >\n              <ch-checkbox\n                checkedValue={CHECKED_VALUE}\n                id=\"terms-and-conditions\"\n                class=\"checkbox\"\n                ref={(el: HTMLChCheckboxElement) =>\n                  (this.#termsAndConditionsCheckboxEl =\n                    el as HTMLChCheckboxElement)\n                }\n                onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n              ></ch-checkbox>\n              <label\n                htmlFor=\"terms-and-conditions\"\n                class=\"label label-agreement\"\n              >\n                {this.#componentLocale.agreement.termsAndConditionsLabel}\n                <span\n                  class={{ hyperlink: !!this.termsCallback }}\n                  onClick={\n                    this.termsCallback && this.#termsAndConditionsClickedHandler\n                  }\n                >\n                  {this.#componentLocale.agreement.termsAndConditionsLink}\n                </span>\n              </label>\n            </div>\n            <div\n              // privacy policy\n              class=\"field field-inline\"\n            >\n              <ch-checkbox\n                checkedValue={CHECKED_VALUE}\n                id=\"privacy-policy\"\n                class=\"checkbox\"\n                ref={(el: HTMLChCheckboxElement) =>\n                  (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n                }\n                onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n              ></ch-checkbox>\n              <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n                {this.#componentLocale.agreement.privacyAndPolicyLabel}\n                <span\n                  class={{ hyperlink: !!this.privacyCallback }}\n                  onClick={\n                    this.privacyCallback && this.#privacyPolicyClickedHandler\n                  }\n                >\n                  {this.#componentLocale.agreement.privacyAndPolicyLink}\n                </span>\n              </label>\n            </div>\n          </div>\n        ),\n\n        this.#renderStepFooter()\n      ];\n    } else if (\n      this.authStepInternal === \"fetchUserTeams\" ||\n      this.authStepInternal === \"settingUpSession\"\n    ) {\n      const loaderTitle =\n        this.authStepInternal === \"fetchUserTeams\"\n          ? this.#componentLocale.loader.fetchingTeamsTitle\n          : this.#componentLocale.loader.settingUpSessionTitle;\n      const loaderDescription =\n        this.authStepInternal === \"fetchUserTeams\"\n          ? this.#componentLocale.loader.fetchingTeamsDescription\n          : this.#componentLocale.loader.settingUpDescription;\n      return (\n        <gx-ide-loader\n          show\n          loaderTitle={loaderTitle}\n          description={loaderDescription}\n        ></gx-ide-loader>\n      );\n    } else if (this.authStepInternal === \"selectUserTeam\") {\n      return [\n        this.#renderStepHeader(),\n        <div class=\"slide__select-team-description\">\n          <p class=\"body-semi-bold-l\">\n            {this.#componentLocale.selectUserTeam.infoMessage}\n          </p>\n        </div>,\n        <div class=\"field-group\">\n          <div class=\"field field-block\">\n            <label htmlFor=\"teams\">\n              {this.#componentLocale.selectUserTeam.label}\n            </label>\n            <ch-combo-box-render\n              id=\"teams\"\n              accessibleName=\"Teams\"\n              class=\"combo-box teams-list\"\n              model={this.#userTeamsModel}\n              value={this.#userTeamsModel[0]?.value}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#chSelectTeamEl = el as HTMLChComboBoxRenderElement)\n              }\n            ></ch-combo-box-render>\n          </div>\n        </div>,\n        this.#renderStepFooter()\n      ];\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"slide\">\n          <img\n            src={COPYRIGHTS_ILLUSTRATION}\n            class=\"slide__illustration\"\n            alt=\"\" // decorative\n          />\n\n          <div\n            class={{\n              \"slide__main\": true,\n              \"slide__main--visible\": this.slideIsVisible\n            }}\n          >\n            <div class=\"slide__main-container\">\n              {this.#evaluateStepRender()}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type AuthStep =\n  | \"signIn\"\n  | \"fetchUserTeams\"\n  | \"selectUserTeam\"\n  | \"settingUpSession\";\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"mappings":"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"}