@genexus/genexus-ide-ui 1.0.1 → 1.0.2

package/dist/collection/components/bpm/import-files/bpm-import-files.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/import-gxpm/bpm-import-gxpm.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/objects-selector/bpm-objects-selector.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/timer-duration/bpm-timer-duration.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/connect-gx-server/connect-gx-server.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/connect-gx-server/connect-gx-server.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 import { config } from "../../common/config";
 import { Locale } from "../../common/locale";
-import { formSubmitValidation } from "../../common/form-validation";
+import { formSubmitValidation } from "../../common/helpers";
 export class GxIdeConnectGxServer {
     constructor() {
         this.renderedFirstTime = false;

package/dist/collection/components/connect-gx-server/connect-gx-server.js.map

@@ -1 +1 @@
-{"version":3,"file":"connect-gx-server.js","sourceRoot":"","sources":["../../../src/components/connect-gx-server/connect-gx-server.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\nimport { ConnectionResultData } from \"../../common/types\";\n\n@Component({\n  tag: \"gx-ide-connect-gx-server\",\n  styleUrl: \"connect-gx-server.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/connect-gx-server\"]\n})\nexport class GxIdeConnectGxServer {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeConnectGxServerElement;\n\n  private serverURLEl!: HTMLGxgComboBoxElement;\n  private userNameEl!: HTMLGxgFormTextElement;\n  private passwordEl!: HTMLGxgFormTextElement;\n  private continueWithGeneXusAccountEl!: HTMLGxgFormCheckboxElement;\n\n  // 3.STATE() VARIABLES //\n\n  //\n  @State() displayLoginControls: boolean = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Array of cataloged server URLs\n   */\n  @Prop() readonly serverUrls: string[];\n\n  /**\n   * 'true' if the user should be allowed to manually enter a server URL in serverUrls.\n   */\n  @Prop() readonly enableCustomServer: boolean = false;\n\n  /**\n   * Initial user values for the case in which the user returns to the login modal after a successful authentication.\n   */\n  @Prop() readonly defaultConnectionData?: GXServerConnectionDefault;\n\n  /**\n   *  If 'true', shows the enabled and checked 'Continue with GX Account' checkbox. If 'false', shows the checkbox unchecked and disabled, and displays the options to enter username and password directly. Even if 'true', allow the user to deselect the checkbox and enter username and password.\n   */\n  @Prop() readonly enableUserLogged: boolean = false;\n\n  /**\n   *  If 'true', shows the enabled and checked 'Continue with GX Account' checkbox. If 'false', shows the checkbox unchecked and disabled, and displays the options to enter username and password directly. Even if 'true', allow the user to deselect the checkbox and enter username and password.\n   */\n  @Prop() readonly connectCallback: (\n    data: GXServerConnectionData\n  ) => Promise<ConnectionResultData>;\n\n  /**\n   * Callback that allows canceling the server connection process.\n   */\n  @Prop() readonly cancelCallback: () => Promise<void>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateDisplayLoginControls();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private renderServerUrls = (): HTMLGxgComboBoxItemElement[] => {\n    if (this.serverUrls?.length) {\n      return this.serverUrls.map(serverUrl => {\n        return <gxg-combo-box-item>{serverUrl}</gxg-combo-box-item>;\n      });\n    }\n    return [];\n  };\n\n  private continueWithGxServerHandler = (\n    event: CustomEvent<{ id: string; value: boolean; disabled?: boolean }>\n  ) => {\n    this.displayLoginControls = !event.detail.value;\n  };\n\n  private evaluateDisplayLoginControls = () => {\n    if (this.enableUserLogged) {\n      this.displayLoginControls = false;\n    } else {\n      this.displayLoginControls = true;\n    }\n  };\n\n  private connectHandler = () => {\n    if (this.connectCallback) {\n      this.connectCallback({\n        serverUrl: this.serverURLEl.value,\n        continueWithGeneXusAccount: this.continueWithGeneXusAccountEl.checked,\n        user: this.userNameEl.value,\n        password: this.passwordEl.value\n      }).then((formSubmitResult: ConnectionResultData) => {\n        console.log(formSubmitResult);\n        formSubmitValidation(formSubmitResult, this);\n      });\n    }\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"wrapper\">\n              {/* server url */}\n              <gxg-combo-box\n                label={this._componentLocale.main.serverUrl}\n                disableFilter={!this.enableCustomServer}\n                value={this.defaultConnectionData?.serverUrl}\n                ref={el => (this.serverURLEl = el as HTMLGxgComboBoxElement)}\n                toolTip={config.tooltip}\n              >\n                {this.renderServerUrls()}\n              </gxg-combo-box>\n\n              {/* continue with GeneXus account */}\n              <gxg-form-checkbox\n                label={this._componentLocale.main.continueWithGxAccount}\n                onChange={this.continueWithGxServerHandler}\n                checked={this.enableUserLogged}\n                disabled={!this.enableUserLogged}\n                ref={el =>\n                  (this.continueWithGeneXusAccountEl =\n                    el as HTMLGxgFormCheckboxElement)\n                }\n              ></gxg-form-checkbox>\n\n              {this.displayLoginControls ? (\n                <div class=\"user-details-container\">\n                  {/* username */}\n                  <gxg-form-text\n                    label={this._componentLocale.main.userName}\n                    labelPosition=\"above\"\n                    disabled={!this.displayLoginControls}\n                    value={this.defaultConnectionData?.user}\n                    ref={el => (this.userNameEl = el as HTMLGxgFormTextElement)}\n                    toolTip={config.tooltip}\n                  ></gxg-form-text>\n                  {/* password */}\n                  <gxg-form-text\n                    label={this._componentLocale.main.password}\n                    labelPosition=\"above\"\n                    disabled={!this.displayLoginControls}\n                    value={this.defaultConnectionData?.password}\n                    ref={el => (this.passwordEl = el as HTMLGxgFormTextElement)}\n                    password\n                    toolTip={config.tooltip}\n                  ></gxg-form-text>\n                </div>\n              ) : null}\n            </div>\n\n            {/* cancel and connect buttons */}\n            <gxg-button slot=\"footer-end\" type=\"outlined\">\n              {this._componentLocale.main.cancel}\n            </gxg-button>\n            <gxg-button slot=\"footer-end\" onClick={this.connectHandler}>\n              {this._componentLocale.main.connect}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type GXServerConnectionDefault = {\n  serverUrl: string;\n  user: string;\n  password: string;\n};\n\nexport type GXServerConnectionData = GXServerConnectionDefault & {\n  continueWithGeneXusAccount: boolean;\n};\n"]}
+{"version":3,"file":"connect-gx-server.js","sourceRoot":"","sources":["../../../src/components/connect-gx-server/connect-gx-server.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\nimport { formSubmitValidation } from \"../../common/helpers\";\nimport { ConnectionResultData } from \"../../common/types\";\n\n@Component({\n  tag: \"gx-ide-connect-gx-server\",\n  styleUrl: \"connect-gx-server.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/connect-gx-server\"]\n})\nexport class GxIdeConnectGxServer {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeConnectGxServerElement;\n\n  private serverURLEl!: HTMLGxgComboBoxElement;\n  private userNameEl!: HTMLGxgFormTextElement;\n  private passwordEl!: HTMLGxgFormTextElement;\n  private continueWithGeneXusAccountEl!: HTMLGxgFormCheckboxElement;\n\n  // 3.STATE() VARIABLES //\n\n  //\n  @State() displayLoginControls: boolean = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Array of cataloged server URLs\n   */\n  @Prop() readonly serverUrls: string[];\n\n  /**\n   * 'true' if the user should be allowed to manually enter a server URL in serverUrls.\n   */\n  @Prop() readonly enableCustomServer: boolean = false;\n\n  /**\n   * Initial user values for the case in which the user returns to the login modal after a successful authentication.\n   */\n  @Prop() readonly defaultConnectionData?: GXServerConnectionDefault;\n\n  /**\n   *  If 'true', shows the enabled and checked 'Continue with GX Account' checkbox. If 'false', shows the checkbox unchecked and disabled, and displays the options to enter username and password directly. Even if 'true', allow the user to deselect the checkbox and enter username and password.\n   */\n  @Prop() readonly enableUserLogged: boolean = false;\n\n  /**\n   *  If 'true', shows the enabled and checked 'Continue with GX Account' checkbox. If 'false', shows the checkbox unchecked and disabled, and displays the options to enter username and password directly. Even if 'true', allow the user to deselect the checkbox and enter username and password.\n   */\n  @Prop() readonly connectCallback: (\n    data: GXServerConnectionData\n  ) => Promise<ConnectionResultData>;\n\n  /**\n   * Callback that allows canceling the server connection process.\n   */\n  @Prop() readonly cancelCallback: () => Promise<void>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateDisplayLoginControls();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private renderServerUrls = (): HTMLGxgComboBoxItemElement[] => {\n    if (this.serverUrls?.length) {\n      return this.serverUrls.map(serverUrl => {\n        return <gxg-combo-box-item>{serverUrl}</gxg-combo-box-item>;\n      });\n    }\n    return [];\n  };\n\n  private continueWithGxServerHandler = (\n    event: CustomEvent<{ id: string; value: boolean; disabled?: boolean }>\n  ) => {\n    this.displayLoginControls = !event.detail.value;\n  };\n\n  private evaluateDisplayLoginControls = () => {\n    if (this.enableUserLogged) {\n      this.displayLoginControls = false;\n    } else {\n      this.displayLoginControls = true;\n    }\n  };\n\n  private connectHandler = () => {\n    if (this.connectCallback) {\n      this.connectCallback({\n        serverUrl: this.serverURLEl.value,\n        continueWithGeneXusAccount: this.continueWithGeneXusAccountEl.checked,\n        user: this.userNameEl.value,\n        password: this.passwordEl.value\n      }).then((formSubmitResult: ConnectionResultData) => {\n        console.log(formSubmitResult);\n        formSubmitValidation(formSubmitResult, this);\n      });\n    }\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"wrapper\">\n              {/* server url */}\n              <gxg-combo-box\n                label={this._componentLocale.main.serverUrl}\n                disableFilter={!this.enableCustomServer}\n                value={this.defaultConnectionData?.serverUrl}\n                ref={el => (this.serverURLEl = el as HTMLGxgComboBoxElement)}\n                toolTip={config.tooltip}\n              >\n                {this.renderServerUrls()}\n              </gxg-combo-box>\n\n              {/* continue with GeneXus account */}\n              <gxg-form-checkbox\n                label={this._componentLocale.main.continueWithGxAccount}\n                onChange={this.continueWithGxServerHandler}\n                checked={this.enableUserLogged}\n                disabled={!this.enableUserLogged}\n                ref={el =>\n                  (this.continueWithGeneXusAccountEl =\n                    el as HTMLGxgFormCheckboxElement)\n                }\n              ></gxg-form-checkbox>\n\n              {this.displayLoginControls ? (\n                <div class=\"user-details-container\">\n                  {/* username */}\n                  <gxg-form-text\n                    label={this._componentLocale.main.userName}\n                    labelPosition=\"above\"\n                    disabled={!this.displayLoginControls}\n                    value={this.defaultConnectionData?.user}\n                    ref={el => (this.userNameEl = el as HTMLGxgFormTextElement)}\n                    toolTip={config.tooltip}\n                  ></gxg-form-text>\n                  {/* password */}\n                  <gxg-form-text\n                    label={this._componentLocale.main.password}\n                    labelPosition=\"above\"\n                    disabled={!this.displayLoginControls}\n                    value={this.defaultConnectionData?.password}\n                    ref={el => (this.passwordEl = el as HTMLGxgFormTextElement)}\n                    password\n                    toolTip={config.tooltip}\n                  ></gxg-form-text>\n                </div>\n              ) : null}\n            </div>\n\n            {/* cancel and connect buttons */}\n            <gxg-button slot=\"footer-end\" type=\"outlined\">\n              {this._componentLocale.main.cancel}\n            </gxg-button>\n            <gxg-button slot=\"footer-end\" onClick={this.connectHandler}>\n              {this._componentLocale.main.connect}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type GXServerConnectionDefault = {\n  serverUrl: string;\n  user: string;\n  password: string;\n};\n\nexport type GXServerConnectionData = GXServerConnectionDefault & {\n  continueWithGeneXusAccount: boolean;\n};\n"]}