@genexus/genexus-ide-ui 3.2.10 → 3.2.12

package/dist/cjs/gx-ide-select-team-or-org.cjs.entry.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75aef097.js');
+const locale = require('./locale-ff30a5f3.js');
+
+const mapItemsToComboBoxItemModel = (items) => {
+    return items === null || items === void 0 ? void 0 : items.map(item => {
+        return {
+            value: item.id,
+            caption: item.name
+        };
+    });
+};
+
+const selectTeamOrOrgCss = "button.button-secondary {\n  border-color: var(--color-border-neutral-default);\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  border-radius: var(--border-radius-m);\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\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: 48px;\n  transform: translateY(4px);\n  transition: var(--display-items-transtion-time) all;\n  opacity: 0;\n  position: relative;\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(--spacing-gap-xxl);\n  inline-size: 100%;\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--font-size-header-h2);\n  font-weight: var(--font-style-semi-bold);\n  letter-spacing: 0.02em;\n  line-height: var(--line-height-tight);\n  color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  font-size: var(--font-size-body-l);\n  font-weight: var(--font-style-regular);\n  line-height: var(--line-height-spacious);\n  color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\n  gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeSelectTeamOrOrg_componentLocale, _GxIdeSelectTeamOrOrg_itemsModel, _GxIdeSelectTeamOrOrg_chSelectItemEl, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, _GxIdeSelectTeamOrOrg_continueHandler, _GxIdeSelectTeamOrOrg_cancelHandler;
+const COPYRIGHTS_ILLUSTRATION = index.getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const ICON_NEXT = index.getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "components/button",
+    "components/combo-box"
+];
+const GxIdeSelectTeamOrOrg = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeSelectTeamOrOrg_componentLocale.set(this, void 0);
+        _GxIdeSelectTeamOrOrg_itemsModel.set(this, []);
+        _GxIdeSelectTeamOrOrg_chSelectItemEl.set(this, void 0);
+        _GxIdeSelectTeamOrOrg_displayItemsTransitionTime.set(this, 100);
+        _GxIdeSelectTeamOrOrg_continueHandler.set(this, async () => {
+            await this.confirmCallback(__classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_chSelectItemEl, "f").value);
+        });
+        _GxIdeSelectTeamOrOrg_cancelHandler.set(this, async () => {
+            await this.cancelCallback();
+        });
+        this.slideIsVisible = false;
+        this.itemsModelReady = false;
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+        this.selectionType = "team";
+        this.items = undefined;
+    }
+    itemsChanged(newItems) {
+        this.slideIsVisible = false;
+        if (!(newItems === null || newItems === void 0 ? void 0 : newItems.length)) {
+            this.itemsModelReady = false;
+            setTimeout(() => {
+                this.slideIsVisible = true;
+            }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f"));
+            return;
+        }
+        // switch step
+        setTimeout(() => {
+            __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_itemsModel, mapItemsToComboBoxItemModel(newItems), "f");
+            this.itemsModelReady = true;
+        }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f"));
+        // show slide
+        setTimeout(() => {
+            this.slideIsVisible = true;
+        }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f") * 2);
+    }
+    async componentWillLoad() {
+        var _a;
+        __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_componentLocale, await locale.Locale.getComponentStrings(this.el), "f");
+        if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) {
+            __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_itemsModel, mapItemsToComboBoxItemModel(this.items), "f");
+            this.itemsModelReady = true;
+        }
+        this.el.style.setProperty("--display-items-transtion-time", __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f").toString() + "ms");
+    }
+    componentDidLoad() {
+        this.slideIsVisible = true;
+    }
+    render() {
+        var _a;
+        const kindLocale = __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f")[this.selectionType];
+        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("section", { class: "slide" }, index.h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
+        }), index.h("div", { class: {
+                "slide__main": true,
+                "slide__main--visible": this.slideIsVisible
+            } }, index.h("div", { class: "slide__main-container" }, this.itemsModelReady ? ([
+            index.h("header", { class: "slide__main-header" }, index.h("img", { src: ICON_NEXT, alt: "" // decorative
+            }), index.h("h2", {
+                // Split the title into two spans for better styling
+                class: "slide__main-title"
+            }, index.h("span", null, kindLocale.title))),
+            index.h("div", { class: "slide__select-item-description" }, index.h("p", { class: "body-semi-bold-l" }, kindLocale.infoMessage)),
+            index.h("div", { class: "field-group" }, index.h("div", { class: "field field-block" }, index.h("label", { htmlFor: "items" }, kindLocale.label), index.h("ch-combo-box-render", { id: "items", accessibleName: kindLocale.label, class: "combo-box items-list", model: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f"), value: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f") && ((_a = __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value), ref: (el) => (__classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_chSelectItemEl, el, "f")) }))),
+            index.h("div", { class: "buttons-container" }, index.h("button", { class: "button-primary continue-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_continueHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").confirmButtonCaption), index.h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_cancelHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").cancelButtonCaption))
+        ]) : (index.h("gx-ide-loader", { show: true, loaderTitle: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").loader.description })))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/select-team-or-org"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["itemsChanged"]
+    }; }
+};
+_GxIdeSelectTeamOrOrg_componentLocale = new WeakMap(), _GxIdeSelectTeamOrOrg_itemsModel = new WeakMap(), _GxIdeSelectTeamOrOrg_chSelectItemEl = new WeakMap(), _GxIdeSelectTeamOrOrg_displayItemsTransitionTime = new WeakMap(), _GxIdeSelectTeamOrOrg_continueHandler = new WeakMap(), _GxIdeSelectTeamOrOrg_cancelHandler = new WeakMap();
+GxIdeSelectTeamOrOrg.style = selectTeamOrOrgCss;
+
+exports.gx_ide_select_team_or_org = GxIdeSelectTeamOrOrg;
+
+//# sourceMappingURL=gx-ide-select-team-or-org.cjs.entry.js.map

package/dist/cjs/gx-ide-select-team-or-org.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-select-team-or-org.entry.cjs.js","mappings":"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","names":["getAssetPath","Locale","h","Host"],"sources":["src/components/select-team-or-org/helpers.tsx","src/components/select-team-or-org/select-team-or-org.scss?tag=gx-ide-select-team-or-org&encapsulation=shadow","src/components/select-team-or-org/select-team-or-org.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { SelectableItem } from \"./select-team-or-org\";\n\nexport const mapItemsToComboBoxItemModel = (\n  items: SelectableItem[]\n): ComboBoxItemModel[] => {\n  return items?.map(item => {\n    return {\n      value: item.id,\n      caption: item.name\n    };\n  });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\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  border-radius: var(--border-radius-m);\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\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: 48px;\n    transform: translateY(4px);\n    transition: var(--display-items-transtion-time) all;\n    opacity: 0;\n\n    position: relative;\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(--spacing-gap-xxl);\n    inline-size: 100%;\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--spacing-gap-xxl);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--font-size-header-h2);\n    font-weight: var(--font-style-semi-bold);\n    letter-spacing: 0.02em;\n    line-height: var(--line-height-tight);\n    color: var(--color-text-neutral-strawberry);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: 40px;\n    font-size: var(--font-size-body-l);\n    font-weight: var(--font-style-regular);\n    line-height: var(--line-height-spacious);\n    color: var(--color-text-neutral-disabled);\n  }\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\n  gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapItemsToComboBoxItemModel } 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-select-team-or-org\",\n  styleUrl: \"select-team-or-org.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-team-or-org\"]\n})\nexport class GxIdeSelectTeamOrOrg {\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  #itemsModel: ComboBoxItemModel[] = [];\n  #chSelectItemEl: HTMLChComboBoxRenderElement;\n  #displayItemsTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSelectTeamOrOrgElement;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n   */\n  @State() slideIsVisible: boolean = false;\n\n  /**\n   * Defines if the items model is ready to be rendered.\n   */\n  @State() itemsModelReady: boolean = false;\n\n  /**\n   * Callback executed when the user clicks the 'Cancel' button\n   */\n  @Prop() readonly cancelCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks the 'Confirm' button\n   */\n  @Prop() readonly confirmCallback!: (itemId: string) => Promise<void>;\n\n  /**\n   * Whether the picker is selecting a team or an organization.\n   * Drives the title, info message and combo label.\n   */\n  @Prop() readonly selectionType: SelectionType = \"team\";\n\n  /**\n   * Array that contains the selectable items (teams or organizations).\n   */\n  @Prop() readonly items!: SelectableItem[];\n  @Watch(\"items\")\n  itemsChanged(newItems: SelectableItem[]) {\n    this.slideIsVisible = false;\n\n    if (!newItems?.length) {\n      this.itemsModelReady = false;\n      setTimeout(() => {\n        this.slideIsVisible = true;\n      }, this.#displayItemsTransitionTime);\n      return;\n    }\n\n    // switch step\n    setTimeout(() => {\n      this.#itemsModel = mapItemsToComboBoxItemModel(newItems);\n      this.itemsModelReady = true;\n    }, this.#displayItemsTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#displayItemsTransitionTime * 2);\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.items?.length) {\n      this.#itemsModel = mapItemsToComboBoxItemModel(this.items);\n      this.itemsModelReady = true;\n    }\n\n    this.el.style.setProperty(\n      \"--display-items-transtion-time\",\n      this.#displayItemsTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  componentDidLoad() {\n    this.slideIsVisible = true;\n  }\n\n  #continueHandler = async () => {\n    await this.confirmCallback(this.#chSelectItemEl.value);\n  };\n\n  #cancelHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  render() {\n    const kindLocale = this.#componentLocale[this.selectionType];\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.itemsModelReady ? (\n                [\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>{kindLocale.title}</span>\n                    </h2>\n                  </header>,\n                  <div class=\"slide__select-item-description\">\n                    <p class=\"body-semi-bold-l\">{kindLocale.infoMessage}</p>\n                  </div>,\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"items\">{kindLocale.label}</label>\n                      <ch-combo-box-render\n                        id=\"items\"\n                        accessibleName={kindLocale.label}\n                        class=\"combo-box items-list\"\n                        model={this.#itemsModel}\n                        value={this.#itemsModel && this.#itemsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectItemEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>,\n                  <div class=\"buttons-container\">\n                    <button\n                      class=\"button-primary continue-btn\"\n                      onClick={this.#continueHandler}\n                    >\n                      {this.#componentLocale.confirmButtonCaption}\n                    </button>\n                    <button\n                      class=\"button-secondary cancel-btn\"\n                      onClick={this.#cancelHandler}\n                    >\n                      {this.#componentLocale.cancelButtonCaption}\n                    </button>\n                  </div>\n                ]\n              ) : (\n                <gx-ide-loader\n                  show\n                  loaderTitle={this.#componentLocale.loader.title}\n                  description={this.#componentLocale.loader.description}\n                ></gx-ide-loader>\n              )}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type SelectableItem = {\n  id: string;\n  name: string;\n};\n\nexport type SelectionType = \"team\" | \"organization\";\n"],"version":3}

package/dist/cjs/gx-ide-sign-in-organization.cjs.entry.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75aef097.js');
+const locale = require('./locale-ff30a5f3.js');
+
+const mapOrganizationsToComboBoxItemModel = (organizations) => {
+    if (!organizations) {
+        return [];
+    }
+    return organizations.map(organization => ({
+        value: organization.id,
+        caption: organization.name
+    }));
+};
+
+const signInOrganizationCss = ":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(--color-accent-surface-elevation-1);\n  border-radius: var(--dialog-border-radius, 16px);\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: 48px;\n  transform: translateY(4px);\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(--spacing-gap-xxl);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  letter-spacing: 0.02em;\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  color: var(--color-text-neutral-disabled);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeSignInOrganization_componentLocale, _GxIdeSignInOrganization_organizationsModel, _GxIdeSignInOrganization_chSelectOrganizationEl, _GxIdeSignInOrganization_switchStepTransitionTime, _GxIdeSignInOrganization_termsAndConditionsCheckboxEl, _GxIdeSignInOrganization_privacyPolicyCheckboxEl, _GxIdeSignInOrganization_authStepCallback, _GxIdeSignInOrganization_continueHandler, _GxIdeSignInOrganization_renderStepHeader, _GxIdeSignInOrganization_renderStepFooter, _GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted, _GxIdeSignInOrganization_termsAndConditionsClickedHandler, _GxIdeSignInOrganization_privacyPolicyClickedHandler, _GxIdeSignInOrganization_evaluateStepRender;
+const COPYRIGHTS_ILLUSTRATION = index.getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const ICON_NEXT = index.getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "components/button",
+    "components/combo-box",
+    "components/checkbox",
+    "utils/form"
+];
+const CHECKED_VALUE = "on";
+const GxIdeSignInOrganization = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeSignInOrganization_componentLocale.set(this, void 0);
+        // Select Organization References :
+        _GxIdeSignInOrganization_organizationsModel.set(this, []);
+        _GxIdeSignInOrganization_chSelectOrganizationEl.set(this, void 0);
+        _GxIdeSignInOrganization_switchStepTransitionTime.set(this, 100);
+        _GxIdeSignInOrganization_termsAndConditionsCheckboxEl.set(this, void 0);
+        _GxIdeSignInOrganization_privacyPolicyCheckboxEl.set(this, void 0);
+        _GxIdeSignInOrganization_authStepCallback.set(this, () => {
+            if (this.authStep === "signIn") {
+                this.signInCallback();
+            }
+            else if (this.authStep === "selectOrganization") {
+                __classPrivateFieldGet(this, _GxIdeSignInOrganization_continueHandler, "f").call(this);
+            }
+        });
+        _GxIdeSignInOrganization_continueHandler.set(this, async () => {
+            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeSignInOrganization_chSelectOrganizationEl, "f").value);
+        });
+        _GxIdeSignInOrganization_renderStepHeader.set(this, () => {
+            return (index.h("header", { class: "slide__main-header" }, index.h("img", { src: ICON_NEXT, alt: "" // decorative
+            }), index.h("h2", {
+                // Split the title into two spans for better styling
+                class: "slide__main-title heading-2"
+            }, index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f")[this.authStepInternal].titlePart1), index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f")[this.authStepInternal].titlePart2))));
+        });
+        _GxIdeSignInOrganization_renderStepFooter.set(this, () => {
+            const signInDisabled = this.authStep === "signIn" &&
+                this.termsConfirmationRequired &&
+                !this.termsAndConditionsAccepted;
+            return (index.h("div", null, index.h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInOrganization_authStepCallback, "f"), disabled: signInDisabled }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f")[this.authStepInternal].buttonCaption)));
+        });
+        _GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted.set(this, () => {
+            const termsAndConditionsAccepted = __classPrivateFieldGet(this, _GxIdeSignInOrganization_termsAndConditionsCheckboxEl, "f").value === CHECKED_VALUE;
+            const privacyPolicyAccepted = __classPrivateFieldGet(this, _GxIdeSignInOrganization_privacyPolicyCheckboxEl, "f").value === CHECKED_VALUE;
+            this.termsAndConditionsAccepted =
+                termsAndConditionsAccepted && privacyPolicyAccepted;
+        });
+        _GxIdeSignInOrganization_termsAndConditionsClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.termsCallback();
+        });
+        _GxIdeSignInOrganization_privacyPolicyClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.privacyCallback();
+        });
+        _GxIdeSignInOrganization_evaluateStepRender.set(this, () => {
+            var _a;
+            if (this.authStepInternal === "signIn") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInOrganization_renderStepHeader, "f").call(this),
+                    index.h("p", { class: "body-regular-l" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").signIn.description),
+                    this.termsConfirmationRequired && (index.h("div", { class: "field-group" }, index.h("div", {
+                        // terms and conditions
+                        class: "field field-inline"
+                    }, index.h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "terms-and-conditions", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInOrganization_termsAndConditionsCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted, "f") }), index.h("span", null, index.h("label", { htmlFor: "terms-and-conditions", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").agreement.termsAndConditionsLabel, index.h("span", { class: { hyperlink: !!this.termsCallback }, onClick: this.termsCallback &&
+                            __classPrivateFieldGet(this, _GxIdeSignInOrganization_termsAndConditionsClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").agreement.termsAndConditionsLink)))), index.h("div", {
+                        // privacy policy
+                        class: "field field-inline"
+                    }, index.h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "privacy-policy", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInOrganization_privacyPolicyCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted, "f") }), index.h("span", null, index.h("label", { htmlFor: "privacy-policy", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").agreement.privacyAndPolicyLabel, index.h("span", { class: { hyperlink: !!this.privacyCallback }, onClick: this.privacyCallback && __classPrivateFieldGet(this, _GxIdeSignInOrganization_privacyPolicyClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").agreement.privacyAndPolicyLink)))))),
+                    __classPrivateFieldGet(this, _GxIdeSignInOrganization_renderStepFooter, "f").call(this)
+                ];
+            }
+            else if (this.authStepInternal === "fetchOrganizations" ||
+                this.authStepInternal === "settingUpSession") {
+                const loaderTitle = this.authStepInternal === "fetchOrganizations"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").loader.fetchingOrganizationsTitle
+                    : __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").loader.settingUpSessionTitle;
+                const loaderDescription = this.authStepInternal === "fetchOrganizations"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").loader.fetchingOrganizationsDescription
+                    : __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").loader.settingUpDescription;
+                return (index.h("gx-ide-loader", { show: true, loaderTitle: loaderTitle, description: loaderDescription }));
+            }
+            else if (this.authStepInternal === "selectOrganization") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInOrganization_renderStepHeader, "f").call(this),
+                    index.h("div", { class: "slide__select-organization-description" }, index.h("p", { class: "body-semi-bold-l" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").selectOrganization.infoMessage)),
+                    index.h("div", { class: "field-group" }, index.h("div", { class: "field field-block" }, index.h("label", { htmlFor: "organizations" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_componentLocale, "f").selectOrganization.label), index.h("ch-combo-box-render", { id: "organizations", accessibleName: "Organizations", class: "combo-box organizations-list", model: __classPrivateFieldGet(this, _GxIdeSignInOrganization_organizationsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInOrganization_organizationsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInOrganization_chSelectOrganizationEl, el, "f")) }))),
+                    __classPrivateFieldGet(this, _GxIdeSignInOrganization_renderStepFooter, "f").call(this)
+                ];
+            }
+        });
+        this.authStepInternal = undefined;
+        this.slideIsVisible = true;
+        this.termsAndConditionsAccepted = false;
+        this.authStep = "signIn";
+        this.continueCallback = undefined;
+        this.signInCallback = undefined;
+        this.termsConfirmationRequired = false;
+        this.organizations = undefined;
+        this.termsCallback = undefined;
+        this.privacyCallback = undefined;
+    }
+    authStepChanged(newAuthStep) {
+        this.slideIsVisible = false;
+        // switch step
+        setTimeout(() => {
+            this.authStepInternal = newAuthStep;
+        }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_switchStepTransitionTime, "f"));
+        // show slide
+        setTimeout(() => {
+            this.slideIsVisible = true;
+        }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_switchStepTransitionTime, "f") * 2);
+    }
+    organizationsChanged(newOrganizations) {
+        __classPrivateFieldSet(this, _GxIdeSignInOrganization_organizationsModel, mapOrganizationsToComboBoxItemModel(newOrganizations), "f");
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeSignInOrganization_componentLocale, await locale.Locale.getComponentStrings(this.el), "f");
+        this.el.style.setProperty("--switch-step-transtion-time", __classPrivateFieldGet(this, _GxIdeSignInOrganization_switchStepTransitionTime, "f").toString() + "ms");
+        // Initialize values
+        this.authStepInternal = this.authStep;
+        this.organizationsChanged(this.organizations);
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("section", { class: "slide" }, index.h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
+        }), index.h("div", { class: {
+                "slide__main": true,
+                "slide__main--visible": this.slideIsVisible
+            } }, index.h("div", { class: "slide__main-container" }, __classPrivateFieldGet(this, _GxIdeSignInOrganization_evaluateStepRender, "f").call(this))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/sign-in-organization"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "authStep": ["authStepChanged"],
+        "organizations": ["organizationsChanged"]
+    }; }
+};
+_GxIdeSignInOrganization_componentLocale = new WeakMap(), _GxIdeSignInOrganization_organizationsModel = new WeakMap(), _GxIdeSignInOrganization_chSelectOrganizationEl = new WeakMap(), _GxIdeSignInOrganization_switchStepTransitionTime = new WeakMap(), _GxIdeSignInOrganization_termsAndConditionsCheckboxEl = new WeakMap(), _GxIdeSignInOrganization_privacyPolicyCheckboxEl = new WeakMap(), _GxIdeSignInOrganization_authStepCallback = new WeakMap(), _GxIdeSignInOrganization_continueHandler = new WeakMap(), _GxIdeSignInOrganization_renderStepHeader = new WeakMap(), _GxIdeSignInOrganization_renderStepFooter = new WeakMap(), _GxIdeSignInOrganization_evaluateTermsConditionsAndPrivacyAccepted = new WeakMap(), _GxIdeSignInOrganization_termsAndConditionsClickedHandler = new WeakMap(), _GxIdeSignInOrganization_privacyPolicyClickedHandler = new WeakMap(), _GxIdeSignInOrganization_evaluateStepRender = new WeakMap();
+GxIdeSignInOrganization.style = signInOrganizationCss;
+
+exports.gx_ide_sign_in_organization = GxIdeSignInOrganization;
+
+//# sourceMappingURL=gx-ide-sign-in-organization.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gx-ide-sign-in-organization.entry.cjs.js","mappings":"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","names":["getAssetPath","h","Locale","Host"],"sources":["src/components/sign-in-organization/helpers.ts","src/components/sign-in-organization/sign-in-organization.scss?tag=gx-ide-sign-in-organization&encapsulation=shadow","src/components/sign-in-organization/sign-in-organization.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { OrganizationData } from \"./sign-in-organization\";\n\nexport const mapOrganizationsToComboBoxItemModel = (\n  organizations?: OrganizationData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!organizations) {\n    return [];\n  }\n  return organizations.map(organization => ({\n    value: organization.id,\n    caption: organization.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(--color-accent-surface-elevation-1);\n  border-radius: var(--dialog-border-radius, 16px);\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: 48px;\n    transform: translateY(4px);\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(--spacing-gap-xxl);\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--spacing-gap-xxl);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    letter-spacing: 0.02em;\n  }\n\n  &__main-description {\n    display: grid;\n    gap: 40px;\n    color: var(--color-text-neutral-disabled);\n    max-inline-size: 370px;\n  }\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-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 { mapOrganizationsToComboBoxItemModel } 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-organization\",\n  styleUrl: \"sign-in-organization.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-organization\"]\n})\nexport class GxIdeSignInOrganization {\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 Organization References :\n  #organizationsModel: ComboBoxItemModel[] = [];\n  #chSelectOrganizationEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n  #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n  #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n  @Element() el: HTMLGxIdeSignInOrganizationElement;\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!: (organizationId: 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 organizations\n   */\n  @Prop() readonly organizations!: OrganizationData[];\n  @Watch(\"organizations\")\n  organizationsChanged(newOrganizations: OrganizationData[]) {\n    this.#organizationsModel =\n      mapOrganizationsToComboBoxItemModel(newOrganizations);\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.organizationsChanged(this.organizations);\n  }\n\n  #authStepCallback = () => {\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectOrganization\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectOrganizationEl.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 heading-2\"\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              <span>\n                {/*\n                  WA: this span prevents field-inline applying padding-block-start on the label\n                  TODO: See how to ignore padding-block-start when using field-inline with a control\n                  that is not an input, combo-box, etc..\n                  */}\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 &&\n                      this.#termsAndConditionsClickedHandler\n                    }\n                  >\n                    {this.#componentLocale.agreement.termsAndConditionsLink}\n                  </span>\n                </label>\n              </span>\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              <span>\n                {/*\n                  WA: this span prevents field-inline applying padding-block-start on the label\n                  TODO: See how to ignore padding-block-start when using field-inline with a control\n                  that is not an input, combo-box, etc..\n                  */}\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              </span>\n            </div>\n          </div>\n        ),\n\n        this.#renderStepFooter()\n      ];\n    } else if (\n      this.authStepInternal === \"fetchOrganizations\" ||\n      this.authStepInternal === \"settingUpSession\"\n    ) {\n      const loaderTitle =\n        this.authStepInternal === \"fetchOrganizations\"\n          ? this.#componentLocale.loader.fetchingOrganizationsTitle\n          : this.#componentLocale.loader.settingUpSessionTitle;\n      const loaderDescription =\n        this.authStepInternal === \"fetchOrganizations\"\n          ? this.#componentLocale.loader.fetchingOrganizationsDescription\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 === \"selectOrganization\") {\n      return [\n        this.#renderStepHeader(),\n        <div class=\"slide__select-organization-description\">\n          <p class=\"body-semi-bold-l\">\n            {this.#componentLocale.selectOrganization.infoMessage}\n          </p>\n        </div>,\n        <div class=\"field-group\">\n          <div class=\"field field-block\">\n            <label htmlFor=\"organizations\">\n              {this.#componentLocale.selectOrganization.label}\n            </label>\n            <ch-combo-box-render\n              id=\"organizations\"\n              accessibleName=\"Organizations\"\n              class=\"combo-box organizations-list\"\n              model={this.#organizationsModel}\n              value={this.#organizationsModel[0]?.value}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#chSelectOrganizationEl =\n                  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  | \"fetchOrganizations\"\n  | \"selectOrganization\"\n  | \"settingUpSession\";\n\nexport type OrganizationData = {\n  id: string;\n  name: string;\n};\n"],"version":3}