@genexus/genexus-ide-ui 1.0.31 → 1.0.33

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/sign-in-team/helpers.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAAkB,EACe,EAAE;IACnC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,KAAK,EAAE,IAAI,CAAC,EAAE;QACd,OAAO,EAAE,IAAI,CAAC,IAAI;KACnB,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!teams) {\n    return [];\n  }\n  return teams.map(team => ({\n    value: team.id,\n    caption: team.name\n  }));\n};\n"]}

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

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

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

@@ -0,0 +1,234 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeUiSplash_componentLocale, _GxIdeUiSplash_userTeamsModel, _GxIdeUiSplash_chSelectTeamEl, _GxIdeUiSplash_switchStepTransitionTime, _GxIdeUiSplash_authStepCallback, _GxIdeUiSplash_continueHandler;
+// Stencil
+import { Host, h, getAssetPath } from "@stencil/core";
+// Custom Imports
+import { Locale } from "../../common/locale";
+import { mapTeamsToComboBoxItemModel } from "./helpers";
+const COPYRIGHTS_ILLUSTRATION = getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "components/button",
+    "components/combo-box"
+];
+export class GxIdeUiSplash {
+    constructor() {
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeUiSplash_componentLocale.set(this, void 0);
+        // Select User Team References :
+        _GxIdeUiSplash_userTeamsModel.set(this, []);
+        _GxIdeUiSplash_chSelectTeamEl.set(this, void 0);
+        _GxIdeUiSplash_switchStepTransitionTime.set(this, 100);
+        _GxIdeUiSplash_authStepCallback.set(this, () => {
+            console.log("authStepCallback called");
+            if (this.authStep === "signIn") {
+                this.signInCallback();
+            }
+            else if (this.authStep === "selectUserTeam") {
+                __classPrivateFieldGet(this, _GxIdeUiSplash_continueHandler, "f").call(this);
+            }
+        });
+        _GxIdeUiSplash_continueHandler.set(this, async () => {
+            console.log("continueHandler called");
+            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeUiSplash_chSelectTeamEl, "f").value);
+        });
+        this.authStepInternal = undefined;
+        this.slideIsVisible = true;
+        this.authStep = "signIn";
+        this.continueCallback = undefined;
+        this.signInCallback = undefined;
+        this.teams = undefined;
+        this.termsCallback = undefined;
+    }
+    authStepChanged(newAuthStep) {
+        console.log("authStep changed");
+        this.slideIsVisible = false;
+        // switch step
+        setTimeout(() => {
+            this.authStepInternal = newAuthStep;
+        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f"));
+        // show slide
+        setTimeout(() => {
+            this.slideIsVisible = true;
+        }, __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f") * 2);
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.authStepInternal = this.authStep;
+        __classPrivateFieldSet(this, _GxIdeUiSplash_userTeamsModel, mapTeamsToComboBoxItemModel(this.teams), "f");
+        this.el.style.setProperty("--switch-step-transtion-time", __classPrivateFieldGet(this, _GxIdeUiSplash_switchStepTransitionTime, "f").toString() + "ms");
+    }
+    render() {
+        var _a;
+        console.log("userTeams comboBox model", __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
+        }), h("div", { class: {
+                "slide__main": true,
+                "slide__main--visible": this.slideIsVisible
+            } }, h("div", { class: "slide__main-container" }, h("header", { class: "slide__main-header" }, h("img", { src: ICON_NEXT, alt: "" // decorative
+        }), h("h2", {
+            // Split the title into two spans for better styling
+            class: "slide__main-title"
+        }, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? (h("div", { class: "slide__main-description" }, h("p", { hidden: true }, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingText, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signIn.byContinuingCallBackText)))) : ([
+            h("div", { class: "slide__select-team-description" }, h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").selectUserTeam.infoMessage)),
+            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeUiSplash_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeUiSplash_chSelectTeamEl, el, "f")) })))
+        ]), h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeUiSplash_authStepCallback, "f") }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f")[this.authStepInternal].buttonCaption)))))));
+    }
+    static get is() { return "gx-ide-sign-in-team"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sign-in-team.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sign-in-team.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/sign-in-team"]; }
+    static get properties() {
+        return {
+            "authStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AuthStep",
+                    "resolved": "\"selectUserTeam\" | \"signIn\"",
+                    "references": {
+                        "AuthStep": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/sign-in-team/sign-in-team.tsx",
+                            "id": "src/components/sign-in-team/sign-in-team.tsx::AuthStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The authentication step to display"
+                },
+                "attribute": "auth-step",
+                "reflect": false,
+                "defaultValue": "\"signIn\""
+            },
+            "continueCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(teamId: string) => Promise<void>",
+                    "resolved": "(teamId: string) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback executed when the user clicks the 'Continue' button"
+                }
+            },
+            "signInCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<void>",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback executed when the user click the \"Sign In\" button"
+                }
+            },
+            "teams": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TeamData[]",
+                    "resolved": "TeamData[]",
+                    "references": {
+                        "TeamData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/sign-in-team/sign-in-team.tsx",
+                            "id": "src/components/sign-in-team/sign-in-team.tsx::TeamData"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array that contains the user's teams"
+                }
+            },
+            "termsCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<void>",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback executed when the user clicks on the \"term and conditions\" link"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "authStepInternal": {},
+            "slideIsVisible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "authStep",
+                "methodName": "authStepChanged"
+            }];
+    }
+}
+_GxIdeUiSplash_componentLocale = new WeakMap(), _GxIdeUiSplash_userTeamsModel = new WeakMap(), _GxIdeUiSplash_chSelectTeamEl = new WeakMap(), _GxIdeUiSplash_switchStepTransitionTime = new WeakMap(), _GxIdeUiSplash_authStepCallback = new WeakMap(), _GxIdeUiSplash_continueHandler = new WeakMap();
+//# sourceMappingURL=sign-in-team.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in-team.js","sourceRoot":"","sources":["../../../src/components/sign-in-team/sign-in-team.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,UAAU;AACV,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACb,MAAM,eAAe,CAAC;AAIvB,iBAAiB;AACjB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,uBAAuB,GAAG,YAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,sBAAsB;CACvB,CAAC;AAQF,MAAM,OAAO,aAAa;;QACxB;;WAEG;QACH,wEAAwE;QACxE,iDAAsB;QACtB,gCAAgC;QAChC,wCAAuC,EAAE,EAAC;QAC1C,gDAA6C;QAC7C,kDAAoC,GAAG,EAAC;QAiExC,0CAAoB,GAAG,EAAE;YACvB,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;YACvC,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;iBAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,EAAE;gBAC7C,uBAAA,IAAI,sCAAiB,MAArB,IAAI,CAAmB,CAAC;aACzB;QACH,CAAC,EAAC;QAEF,yCAAmB,KAAK,IAAI,EAAE;YAC5B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;YACtC,MAAM,IAAI,CAAC,gBAAgB,CAAC,uBAAA,IAAI,qCAAgB,CAAC,KAAK,CAAC,CAAC;QAC1D,CAAC,EAAC;;8BA9DiC,IAAI;wBAKD,QAAQ;;;;;;IAE9C,eAAe,CAAC,WAAqB;QACnC,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,cAAc;QACd,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;QACtC,CAAC,EAAE,uBAAA,IAAI,+CAA0B,CAAC,CAAC;QACnC,aAAa;QACb,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC,EAAE,uBAAA,IAAI,+CAA0B,GAAG,CAAC,CAAC,CAAC;IACzC,CAAC;IAsBD,KAAK,CAAC,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;QACtC,uBAAA,IAAI,iCAAmB,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAA,CAAC;QAC/D,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,8BAA8B,EAC9B,uBAAA,IAAI,+CAA0B,CAAC,QAAQ,EAAE,GAAG,IAAI,CACjD,CAAC;IACJ,CAAC;IAgBD,MAAM;;QACJ,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,uBAAA,IAAI,qCAAgB,CAAC,CAAC;QAC9D,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,KAAK,EAAE,WAAW,GAAa;YACzC,eAAS,KAAK,EAAC,OAAO;gBACpB,WACE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAC,EAAE,CAAC,aAAa;mBACpB;gBAEF,WACE,KAAK,EAAE;wBACL,aAAa,EAAE,IAAI;wBACnB,sBAAsB,EAAE,IAAI,CAAC,cAAc;qBAC5C;oBAED,WAAK,KAAK,EAAC,uBAAuB;wBAChC,cAAQ,KAAK,EAAC,oBAAoB;4BAChC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,EAAE,CAAC,aAAa;+BACpB;4BACF;gCACE,oDAAoD;gCACpD,KAAK,EAAC,mBAAmB;gCAEzB,gBACG,uBAAA,IAAI,sCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CACnD;gCACP,gBACG,uBAAA,IAAI,sCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CACnD,CACJ,CACE;wBAER,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,WAAK,KAAK,EAAC,yBAAyB;4BAClC,SAAG,MAAM;gCACP,gBAAO,uBAAA,IAAI,sCAAiB,CAAC,eAAe,CAAQ,CAClD;4BACJ;gCACG,uBAAA,IAAI,sCAAiB,CAAC,MAAM,CAAC,gBAAgB;gCAC9C,SAAG,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACpD,uBAAA,IAAI,sCAAiB,CAAC,MAAM,CAAC,wBAAwB,CACpD,CACC,CACH,CACP,CAAC,CAAC,CAAC,CACF;4BACE,WAAK,KAAK,EAAC,gCAAgC;gCACzC,SAAG,KAAK,EAAC,yBAAyB,IAC/B,uBAAA,IAAI,sCAAiB,CAAC,cAAc,CAAC,WAAW,CAC/C,CACA;4BAEN,WAAK,KAAK,EAAC,aAAa;gCACtB,WAAK,KAAK,EAAC,mBAAmB;oCAC5B,aAAO,OAAO,EAAC,OAAO,IACnB,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CACtB;oCACR,2BACE,EAAE,EAAC,OAAO,EACV,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,uBAAA,IAAI,qCAAgB,EAC3B,KAAK,EAAE,MAAA,uBAAA,IAAI,qCAAgB,CAAC,CAAC,CAAC,0CAAE,KAAK,EACrC,GAAG,EAAE,CAAC,EAA+B,EAAE,EAAE,CACvC,CAAC,uBAAA,IAAI,iCACH,EAAiC,MAAA,CAAC,GAEjB,CACnB,CACF;yBACP,CACF;wBAED;4BACE,cACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,uBAAA,IAAI,uCAAkB,IAE9B,uBAAA,IAAI,sCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,aAAa,CACpD,CACL,CACF,CACF,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/combo-box\"\n];\n\n@Component({\n  tag: \"gx-ide-sign-in-team\",\n  styleUrl: \"sign-in-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeUiSplash {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  // Select User Team References :\n  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n  #switchStepTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSignInTeamElement;\n\n  /**\n   * This is a handover from \"authStep\" that allows updating descriptions once\n   * the slide is hidden. This enables a smooth transition between descriptions.\n   */\n\n  @State() authStepInternal: AuthStep;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions\n   * between slides.\n   */\n  @State() slideIsVisible: boolean = true;\n\n  /**\n   * The authentication step to display\n   */\n  @Prop() readonly authStep: AuthStep = \"signIn\";\n  @Watch(\"authStep\")\n  authStepChanged(newAuthStep: AuthStep) {\n    console.log(\"authStep changed\");\n    this.slideIsVisible = false;\n    // switch step\n    setTimeout(() => {\n      this.authStepInternal = newAuthStep;\n    }, this.#switchStepTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#switchStepTransitionTime * 2);\n  }\n\n  /**\n   * Callback executed when the user clicks the 'Continue' button\n   */\n  @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n  /**\n   * Callback executed when the user click the \"Sign In\" button\n   */\n  @Prop() readonly signInCallback: () => Promise<void>;\n\n  /**\n   * Array that contains the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n\n  /**\n   * Callback executed when the user clicks on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.authStepInternal = this.authStep;\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(this.teams);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  #authStepCallback = () => {\n    console.log(\"authStepCallback called\");\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    console.log(\"continueHandler called\");\n    await this.continueCallback(this.#chSelectTeamEl.value);\n  };\n\n  render() {\n    console.log(\"userTeams comboBox model\", this.#userTeamsModel);\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"slide\">\n          <img\n            src={COPYRIGHTS_ILLUSTRATION}\n            class=\"slide__illustration\"\n            alt=\"\" // decorative\n          />\n\n          <div\n            class={{\n              \"slide__main\": true,\n              \"slide__main--visible\": this.slideIsVisible\n            }}\n          >\n            <div class=\"slide__main-container\">\n              <header class=\"slide__main-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt=\"\" // decorative\n                />\n                <h2\n                  // Split the title into two spans for better styling\n                  class=\"slide__main-title\"\n                >\n                  <span>\n                    {this.#componentLocale[this.authStepInternal].titlePart1}\n                  </span>\n                  <span>\n                    {this.#componentLocale[this.authStepInternal].titlePart2}\n                  </span>\n                </h2>\n              </header>\n\n              {this.authStepInternal === \"signIn\" ? (\n                <div class=\"slide__main-description\">\n                  <p hidden>\n                    <span>{this.#componentLocale.descriptionText}</span>\n                  </p>\n                  <span>\n                    {this.#componentLocale.signIn.byContinuingText}\n                    <a class=\"terms-conditions\" onClick={this.termsCallback}>\n                      {this.#componentLocale.signIn.byContinuingCallBackText}\n                    </a>\n                  </span>\n                </div>\n              ) : (\n                [\n                  <div class=\"slide__select-team-description\">\n                    <p class=\"text-body-highlighted-l\">\n                      {this.#componentLocale.selectUserTeam.infoMessage}\n                    </p>\n                  </div>,\n\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"teams\">\n                        {this.#componentLocale.teams}\n                      </label>\n                      <ch-combo-box-render\n                        id=\"teams\"\n                        accessibleName=\"Teams\"\n                        class=\"combo-box teams-list\"\n                        model={this.#userTeamsModel}\n                        value={this.#userTeamsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectTeamEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>\n                ]\n              )}\n\n              <div>\n                <button\n                  class=\"button-primary main-btn\"\n                  onClick={this.#authStepCallback}\n                >\n                  {this.#componentLocale[this.authStepInternal].buttonCaption}\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type AuthStep = \"signIn\" | \"selectUserTeam\";\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"]}

package/dist/collection/testing/locale.e2e.js

@@ -116,7 +116,9 @@ const allGeneXusIdeUIComponents = {
     "gx-ide-new-object": 0,
     "gx-ide-object-selector": 0,
     "gx-ide-references": 0,
+    "gx-ide-select-user-team": 0,
     "gx-ide-sign-in": 0,
+    "gx-ide-sign-in-team": 0,
     "gx-ide-share-kb": 0,
     "gx-ide-start-page": 0,
     "gx-ide-status-buttons": 0,

package/dist/collection/testing/locale.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"locale.e2e.js","sourceRoot":"","sources":["../../src/testing/locale.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage, newE2EPage } from \"@stencil/core/testing\";\nimport { GeneXusIdeUIControlsTagName } from \"../common/types\";\nimport { haveSameStructure } from \"./same-structure.e2e\";\n\nconst COMPONENT_PREFIX = \"gx-ide-\";\nconst languages: { name: string; attr: string }[] = [\n  { name: \"chinese\", attr: \"zh\" },\n  { name: \"english\", attr: \"en\" },\n  { name: \"japanese\", attr: \"ja\" }\n];\n\nconst testLocale = (componentNameWithPrefix: GeneXusIdeUIControlsTagName) => {\n  describe(`[locale][${componentNameWithPrefix}]`, () => {\n    let page: E2EPage;\n    const componentName = componentNameWithPrefix.replace(COMPONENT_PREFIX, \"\");\n\n    // This implementation is a WA since we can't evaluate JS classes in the page.\n    // TODO: Implement the locale utility as a function, which can be evaluated\n    // in the page\n    const getTranslations = () =>\n      page.evaluate(component => {\n        const ASSETS_FOLDER = \"gx-ide-assets/\";\n        const DEFAULT_LANGUAGE = \"en\";\n        const LANGS_FOLDER = \"langs/\";\n        const LANG_PREFIX = \".lang.\";\n        const LANG_EXTENSION = \".json\";\n        const lang =\n          document\n            .getElementsByTagName(\"html\")[0]\n            .getAttribute(\"lang\")\n            ?.valueOf() ?? DEFAULT_LANGUAGE;\n        const folder = `${component}/`;\n\n        const path =\n          `/build/${ASSETS_FOLDER}${folder}${LANGS_FOLDER}${component}${LANG_PREFIX}${lang}${LANG_EXTENSION}` as const;\n\n        return new Promise(resolve => {\n          fetch(path)\n            .then(async langFile => {\n              if (langFile.ok) {\n                const fileObject = await langFile.json();\n                resolve(fileObject);\n              } else {\n                resolve(undefined);\n              }\n            })\n            .catch(() => resolve(undefined));\n        });\n      }, componentName);\n\n    beforeEach(async () => {\n      page = await newE2EPage({\n        failOnConsoleError: true,\n        html: \"\" // Necessary\n      });\n    });\n\n    it(\"should work without specifying the language (lang attr) in the browser\", async () => {\n      const languageFile: any | undefined = await getTranslations();\n      expect(languageFile).toBeTruthy();\n    });\n\n    it(\"should default to english language when there is no language (lang attr) in the browser\", async () => {\n      const languageFile: any | undefined = await getTranslations();\n      expect(languageFile).toBeTruthy();\n\n      await page.evaluate(() =>\n        document.documentElement.setAttribute(\"lang\", \"en\")\n      );\n\n      const languageEnglishFile: any | undefined = await getTranslations();\n      expect(languageEnglishFile).toBeTruthy();\n      expect(languageFile).toEqual(languageEnglishFile);\n    });\n\n    languages.forEach(language => {\n      it(`should work with ${language.name} language`, async () => {\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language.attr\n        );\n        const languageFile: any | undefined = await getTranslations();\n        expect(languageFile).toBeTruthy();\n      });\n    });\n\n    for (let index = 0; index < languages.length - 1; index++) {\n      const language1 = languages[index];\n      const language2 = languages[index + 1];\n\n      // TODO: Complete all translations. At this moment, Japanese and Chinese\n      // translations have missing literals\n      it(`should translate the same literals (${language1.name} and ${language2.name})`, async () => {\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language1.attr\n        );\n        const language1File: any | undefined = await getTranslations();\n\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language2.attr\n        );\n        const language2File: any | undefined = await getTranslations();\n\n        expect(language1File).toBeTruthy();\n        expect(language2File).toBeTruthy();\n        expect(haveSameStructure(language1File, language2File)).toBe(true);\n      });\n    }\n  });\n};\n\n// TypeScript does not have a built-in type to exhaust a list with union types\nconst allGeneXusIdeUIComponents: { [key in GeneXusIdeUIControlsTagName]: 0 } = {\n  \"gx-ide-ai-assistant\": 0,\n  \"gx-ide-ai-message\": 0,\n  \"gx-ide-bpm-app-declaration\": 0,\n  \"gx-ide-bpm-assign-roles\": 0,\n  \"gx-ide-bpm-import-files\": 0,\n  \"gx-ide-bpm-import-gxpm\": 0,\n  \"gx-ide-bpm-objects-selector\": 0,\n  \"gx-ide-bpm-timer-duration\": 0,\n  \"gx-ide-card\": 0,\n  \"gx-ide-connect-gx-server\": 0,\n  \"gx-ide-container\": 0,\n  \"gx-ide-create-kb-from-server\": 0,\n  \"gx-ide-current-user-info\": 0,\n  \"gx-ide-dashboard-home\": 0,\n  \"gx-ide-data-selector\": 0,\n  \"gx-ide-design-import\": 0,\n  \"gx-ide-directory-selector\": 0,\n  \"gx-ide-edit-module-server\": 0,\n  \"gx-ide-empty-state\": 0,\n  \"gx-ide-entity-selector\": 0,\n  \"gx-ide-gam-installation-settings\": 0,\n  \"gx-ide-kb-manager-export\": 0,\n  \"gx-ide-kb-manager-import\": 0,\n  \"gx-ide-list-selector\": 0,\n  \"gx-ide-list-selector-item\": 0,\n  \"gx-ide-loader\": 0,\n  \"gx-ide-manage-module-references\": 0,\n  \"gx-ide-manage-module-references-v2\": 0,\n  \"gx-ide-new-environment\": 0,\n  \"gx-ide-new-kb\": 0,\n  \"gx-ide-new-object\": 0,\n  \"gx-ide-object-selector\": 0,\n  \"gx-ide-references\": 0,\n  \"gx-ide-sign-in\": 0,\n  \"gx-ide-share-kb\": 0,\n  \"gx-ide-start-page\": 0,\n  \"gx-ide-status-buttons\": 0,\n  \"gx-ide-switch-panel\": 0,\n  \"gx-ide-switcher\": 0,\n  \"gx-ide-team-dev-commit\": 0,\n  \"gx-ide-team-dev-select-recent-comment\": 0,\n  \"gx-ide-team-dev-update\": 0,\n  \"gx-ide-team-dev-update-partial-selection\": 0,\n  \"gx-ide-team-dev-update-to-revision\": 0,\n  \"gx-ide-template\": 0,\n  \"gx-ide-test\": 0,\n  \"gx-ide-title\": 0,\n  \"gx-ide-top-bar\": 0,\n  \"gx-ide-wf-settings\": 0,\n  \"gx-ide-ww-images\": 0,\n  \"gx-ide-navigation-report\": 0,\n  \"gx-ide-splash\": 0,\n  \"gx-ide-welcome-page\": 0,\n  \"gx-ide-bpm-export-xpdl\": 0\n};\n\nconst componentsWithoutTranslations = new Set<GeneXusIdeUIControlsTagName>([\n  \"gx-ide-ai-message\",\n  \"gx-ide-container\",\n  \"gx-ide-directory-selector\",\n  \"gx-ide-empty-state\",\n  \"gx-ide-list-selector\",\n  \"gx-ide-list-selector-item\",\n  \"gx-ide-loader\",\n  \"gx-ide-switch-panel\",\n  \"gx-ide-switcher\",\n  \"gx-ide-test\",\n  \"gx-ide-title\",\n  \"gx-ide-top-bar\"\n]);\n\nconst componentsWithTranslations = Object.keys(\n  allGeneXusIdeUIComponents\n).filter(\n  component =>\n    !componentsWithoutTranslations.has(component as GeneXusIdeUIControlsTagName)\n);\n\ncomponentsWithTranslations.forEach(testLocale);\n"]}
+{"version":3,"file":"locale.e2e.js","sourceRoot":"","sources":["../../src/testing/locale.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage, newE2EPage } from \"@stencil/core/testing\";\nimport { GeneXusIdeUIControlsTagName } from \"../common/types\";\nimport { haveSameStructure } from \"./same-structure.e2e\";\n\nconst COMPONENT_PREFIX = \"gx-ide-\";\nconst languages: { name: string; attr: string }[] = [\n  { name: \"chinese\", attr: \"zh\" },\n  { name: \"english\", attr: \"en\" },\n  { name: \"japanese\", attr: \"ja\" }\n];\n\nconst testLocale = (componentNameWithPrefix: GeneXusIdeUIControlsTagName) => {\n  describe(`[locale][${componentNameWithPrefix}]`, () => {\n    let page: E2EPage;\n    const componentName = componentNameWithPrefix.replace(COMPONENT_PREFIX, \"\");\n\n    // This implementation is a WA since we can't evaluate JS classes in the page.\n    // TODO: Implement the locale utility as a function, which can be evaluated\n    // in the page\n    const getTranslations = () =>\n      page.evaluate(component => {\n        const ASSETS_FOLDER = \"gx-ide-assets/\";\n        const DEFAULT_LANGUAGE = \"en\";\n        const LANGS_FOLDER = \"langs/\";\n        const LANG_PREFIX = \".lang.\";\n        const LANG_EXTENSION = \".json\";\n        const lang =\n          document\n            .getElementsByTagName(\"html\")[0]\n            .getAttribute(\"lang\")\n            ?.valueOf() ?? DEFAULT_LANGUAGE;\n        const folder = `${component}/`;\n\n        const path =\n          `/build/${ASSETS_FOLDER}${folder}${LANGS_FOLDER}${component}${LANG_PREFIX}${lang}${LANG_EXTENSION}` as const;\n\n        return new Promise(resolve => {\n          fetch(path)\n            .then(async langFile => {\n              if (langFile.ok) {\n                const fileObject = await langFile.json();\n                resolve(fileObject);\n              } else {\n                resolve(undefined);\n              }\n            })\n            .catch(() => resolve(undefined));\n        });\n      }, componentName);\n\n    beforeEach(async () => {\n      page = await newE2EPage({\n        failOnConsoleError: true,\n        html: \"\" // Necessary\n      });\n    });\n\n    it(\"should work without specifying the language (lang attr) in the browser\", async () => {\n      const languageFile: any | undefined = await getTranslations();\n      expect(languageFile).toBeTruthy();\n    });\n\n    it(\"should default to english language when there is no language (lang attr) in the browser\", async () => {\n      const languageFile: any | undefined = await getTranslations();\n      expect(languageFile).toBeTruthy();\n\n      await page.evaluate(() =>\n        document.documentElement.setAttribute(\"lang\", \"en\")\n      );\n\n      const languageEnglishFile: any | undefined = await getTranslations();\n      expect(languageEnglishFile).toBeTruthy();\n      expect(languageFile).toEqual(languageEnglishFile);\n    });\n\n    languages.forEach(language => {\n      it(`should work with ${language.name} language`, async () => {\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language.attr\n        );\n        const languageFile: any | undefined = await getTranslations();\n        expect(languageFile).toBeTruthy();\n      });\n    });\n\n    for (let index = 0; index < languages.length - 1; index++) {\n      const language1 = languages[index];\n      const language2 = languages[index + 1];\n\n      // TODO: Complete all translations. At this moment, Japanese and Chinese\n      // translations have missing literals\n      it(`should translate the same literals (${language1.name} and ${language2.name})`, async () => {\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language1.attr\n        );\n        const language1File: any | undefined = await getTranslations();\n\n        await page.evaluate(\n          (attr: string) => document.documentElement.setAttribute(\"lang\", attr),\n          language2.attr\n        );\n        const language2File: any | undefined = await getTranslations();\n\n        expect(language1File).toBeTruthy();\n        expect(language2File).toBeTruthy();\n        expect(haveSameStructure(language1File, language2File)).toBe(true);\n      });\n    }\n  });\n};\n\n// TypeScript does not have a built-in type to exhaust a list with union types\nconst allGeneXusIdeUIComponents: { [key in GeneXusIdeUIControlsTagName]: 0 } = {\n  \"gx-ide-ai-assistant\": 0,\n  \"gx-ide-ai-message\": 0,\n  \"gx-ide-bpm-app-declaration\": 0,\n  \"gx-ide-bpm-assign-roles\": 0,\n  \"gx-ide-bpm-import-files\": 0,\n  \"gx-ide-bpm-import-gxpm\": 0,\n  \"gx-ide-bpm-objects-selector\": 0,\n  \"gx-ide-bpm-timer-duration\": 0,\n  \"gx-ide-card\": 0,\n  \"gx-ide-connect-gx-server\": 0,\n  \"gx-ide-container\": 0,\n  \"gx-ide-create-kb-from-server\": 0,\n  \"gx-ide-current-user-info\": 0,\n  \"gx-ide-dashboard-home\": 0,\n  \"gx-ide-data-selector\": 0,\n  \"gx-ide-design-import\": 0,\n  \"gx-ide-directory-selector\": 0,\n  \"gx-ide-edit-module-server\": 0,\n  \"gx-ide-empty-state\": 0,\n  \"gx-ide-entity-selector\": 0,\n  \"gx-ide-gam-installation-settings\": 0,\n  \"gx-ide-kb-manager-export\": 0,\n  \"gx-ide-kb-manager-import\": 0,\n  \"gx-ide-list-selector\": 0,\n  \"gx-ide-list-selector-item\": 0,\n  \"gx-ide-loader\": 0,\n  \"gx-ide-manage-module-references\": 0,\n  \"gx-ide-manage-module-references-v2\": 0,\n  \"gx-ide-new-environment\": 0,\n  \"gx-ide-new-kb\": 0,\n  \"gx-ide-new-object\": 0,\n  \"gx-ide-object-selector\": 0,\n  \"gx-ide-references\": 0,\n  \"gx-ide-select-user-team\": 0,\n  \"gx-ide-sign-in\": 0,\n  \"gx-ide-sign-in-team\": 0,\n  \"gx-ide-share-kb\": 0,\n  \"gx-ide-start-page\": 0,\n  \"gx-ide-status-buttons\": 0,\n  \"gx-ide-switch-panel\": 0,\n  \"gx-ide-switcher\": 0,\n  \"gx-ide-team-dev-commit\": 0,\n  \"gx-ide-team-dev-select-recent-comment\": 0,\n  \"gx-ide-team-dev-update\": 0,\n  \"gx-ide-team-dev-update-partial-selection\": 0,\n  \"gx-ide-team-dev-update-to-revision\": 0,\n  \"gx-ide-template\": 0,\n  \"gx-ide-test\": 0,\n  \"gx-ide-title\": 0,\n  \"gx-ide-top-bar\": 0,\n  \"gx-ide-wf-settings\": 0,\n  \"gx-ide-ww-images\": 0,\n  \"gx-ide-navigation-report\": 0,\n  \"gx-ide-splash\": 0,\n  \"gx-ide-welcome-page\": 0,\n  \"gx-ide-bpm-export-xpdl\": 0\n};\n\nconst componentsWithoutTranslations = new Set<GeneXusIdeUIControlsTagName>([\n  \"gx-ide-ai-message\",\n  \"gx-ide-container\",\n  \"gx-ide-directory-selector\",\n  \"gx-ide-empty-state\",\n  \"gx-ide-list-selector\",\n  \"gx-ide-list-selector-item\",\n  \"gx-ide-loader\",\n  \"gx-ide-switch-panel\",\n  \"gx-ide-switcher\",\n  \"gx-ide-test\",\n  \"gx-ide-title\",\n  \"gx-ide-top-bar\"\n]);\n\nconst componentsWithTranslations = Object.keys(\n  allGeneXusIdeUIComponents\n).filter(\n  component =>\n    !componentsWithoutTranslations.has(component as GeneXusIdeUIControlsTagName)\n);\n\ncomponentsWithTranslations.forEach(testLocale);\n"]}

package/dist/components/gx-ide-design-import.js

@@ -303,8 +303,9 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             this.isLoaded = (_a = designData === null || designData === void 0 ? void 0 : designData.success) !== null && _a !== void 0 ? _a : false;
             this.isLoading = false;
             const firstDesignSystemName = (_b = designData.designSystem[0]) === null || _b === void 0 ? void 0 : _b.name;
-            if (firstDesignSystemName && !this.styleValue)
+            if (firstDesignSystemName && !this.styleValue) {
                 this.styleValue = firstDesignSystemName;
+            }
             // update the settings that were used for the last load
             if (this.reactiveSettings.path && this.pathIsValid) {
                 this.lastLoadCallbackSettingValues.path = this.path;
@@ -408,8 +409,9 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             this.path = event.detail;
             __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateAccessTokenRender, "f").call(this);
             this.selectedFile = null;
-            if (!this.path.length)
+            if (!this.path.length) {
                 this.designData = null;
+            }
         });
         // 9.LOCAL METHODS -> RENDERS //
         _GxIdeImportFromDesign_renderHeader.set(this, () => {
@@ -519,7 +521,7 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             }
         });
         _GxIdeImportFromDesign_renderDesignTree.set(this, () => {
-            return (h("ch-tree-view-render", { part: "data-tree", class: "tree-view", id: "data-tree", showLines: "last", model: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
+            return (h("ch-tree-view-render", { part: "data-tree", class: "tree-view", id: "data-tree", showLines: "last", model: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, expandOnClick: false, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
         });
         _GxIdeImportFromDesign_renderFooter.set(this, () => {
             var _a;
@@ -639,26 +641,41 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
     designDataChanged(newDesignData) {
         if (newDesignData) {
             const panelsSelectedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getPanelsSelectedItem, "f").call(this, this.designData.panels);
+            const iconSrc = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
+                ? "objects/webpanel"
+                : "objects/panel-for-sd";
             this.designDataTreeDataModel = [
                 {
                     order: 0,
                     id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
                     leaf: false,
                     caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.panels,
-                    startImgSrc: "objects/panel-for-sd",
+                    startImgSrc: iconSrc,
                     checkbox: true,
                     checked: true,
                     expanded: true,
-                    items: this.designData.panels.map((item, i) => ({
-                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
-                        class: "object tree-view-item",
-                        leaf: true,
-                        caption: item.name,
-                        startImgSrc: "objects/panel-for-sd",
-                        checkbox: true,
-                        checked: true,
-                        selected: i === panelsSelectedItem
-                    }))
+                    items: this.designData.panels.map((item, i) => {
+                        var _a;
+                        return ({
+                            id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
+                            class: "object tree-view-item",
+                            leaf: !item.variants,
+                            caption: item.name,
+                            startImgSrc: iconSrc,
+                            checkbox: true,
+                            checked: true,
+                            expanded: true,
+                            selected: i === panelsSelectedItem,
+                            items: (_a = item.variants) === null || _a === void 0 ? void 0 : _a.map(variant => ({
+                                id: `${variant.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
+                                caption: `${item.name} (${variant.name})`,
+                                startImgSrc: iconSrc,
+                                leaf: true,
+                                checkbox: true,
+                                checked: true
+                            }))
+                        });
+                    })
                 },
                 {
                     order: 1,