@genexus/genexus-ide-ui 1.0.31 → 1.0.33

package/dist/genexus-ide-ui/{p-ba307cf6.entry.js → p-f9b74091.entry.js}

@@ -94,7 +94,7 @@ var p = undefined && undefined.__classPrivateFieldSet || function(t, e, s, i, a)
   return i === "a" ? a.call(t, s) : a ? a.value = s : e.set(t, s), s;
 };
 
-var f, u, m, b, g, k, w, v, y, x, M, W, I, _, C, $, j, S, D, T, z, P, q, A, E, V, F, L, G, H, O, B, N, Y, J, K, Q, R, U, X, Z, tt, et, st, it, at, ot, nt, lt, rt;
+var u, f, m, b, g, k, w, v, y, x, M, W, I, _, $, C, j, S, D, T, z, P, q, A, E, V, F, L, G, O, H, B, N, Y, J, K, Q, R, U, X, Z, tt, et, st, it, at, ot, nt, lt, rt;
 
 const ht = "panels";
 
@@ -104,9 +104,9 @@ const dt = "images";
 
 const pt = "design_system";
 
-const ft = "fonts";
+const ut = "fonts";
 
-const ut = "@@@";
+const ft = "@@@";
 
 // ch-checkbox
 const mt = "on";
@@ -133,12 +133,12 @@ const wt = [ "resets/box-sizing", "utils/form", "utils/layout", "utils/typograph
 const vt = class {
   constructor(s) {
     t(this, s);
-    f.add(this);
+    u.add(this);
     /**
          * The component hard-coded strings translations.
          */
     // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        u.set(this, void 0);
+        f.set(this, void 0);
     /**
          * An array that keeps track of the tree items id's (design system data type
          * + item id) along with the content, that will be used to save and retrieve
@@ -159,9 +159,9 @@ const vt = class {
     W.set(this, []);
     I.set(this, []);
     _.set(this, void 0);
-    C.set(this, void 0);
+    $.set(this, void 0);
     // 9.LOCAL METHODS //
-        $.set(this, (() => {
+        C.set(this, (() => {
       this.activeTabs.set("panels", r.panels[0].id);
       this.activeTabs.set("stencils", r.stencils[0].id);
       this.activeTabs.set("images", r.images[0].id);
@@ -187,7 +187,7 @@ const vt = class {
       if (t.detail.length) {
         const s = (e = t.detail[0]) === null || e === void 0 ? void 0 : e.item;
         const i = s.id;
-        const a = i.split(ut);
+        const a = i.split(ft);
         const o = a[0];
         const n = a[1];
         const l = o && o !== "parent";
@@ -206,8 +206,8 @@ const vt = class {
             // Item has been queried already. The item content exists already.
             this.selectedDesignType = t.designType;
             this.selectedDesignItem = t.designDataDetail;
-            d(this, f, "m", H).call(this, t.designType);
-            d(this, f, "m", et).call(this, t.designType);
+            d(this, u, "m", O).call(this, t.designType);
+            d(this, u, "m", et).call(this, t.designType);
           }
           this.renderedTabs.clear();
           this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
@@ -233,13 +233,13 @@ const vt = class {
       let s = null;
       const i = {};
       for (const t of e) {
-        if (t.item.id.startsWith(`parent${ut}`)) {
-          s = t.item.id.split(ut)[1];
+        if (t.item.id.startsWith(`parent${ft}`)) {
+          s = t.item.id.split(ft)[1];
           i[s] = [];
         } else if (t.item.checked && s) {
-          const e = t.item.id.split(ut)[1];
+          const e = t.item.id.split(ft)[1];
           if (e === s) {
-            const e = t.item.id.split(ut)[0];
+            const e = t.item.id.split(ft)[0];
             i[s].push(e);
           }
         }
@@ -285,7 +285,9 @@ const vt = class {
       this.isLoaded = (t = n === null || n === void 0 ? void 0 : n.success) !== null && t !== void 0 ? t : false;
       this.isLoading = false;
       const l = (e = n.designSystem[0]) === null || e === void 0 ? void 0 : e.name;
-      if (l && !this.styleValue) this.styleValue = l;
+      if (l && !this.styleValue) {
+        this.styleValue = l;
+      }
       // update the settings that were used for the last load
             if (this.reactiveSettings.path && this.pathIsValid) {
         this.lastLoadCallbackSettingValues.path = this.path;
@@ -314,7 +316,7 @@ const vt = class {
         s = this.loadDesignSystemCallback;
         break;
 
-       case ft:
+       case ut:
         s = this.loadFontCallback;
         break;
 
@@ -327,13 +329,13 @@ const vt = class {
       await s(t).then((t => {
         this.selectedDesignType = e;
         this.selectedDesignItem = t;
-        d(this, f, "m", H).call(this, e);
-        d(this, f, "m", et).call(this, e);
+        d(this, u, "m", O).call(this, e);
+        d(this, u, "m", et).call(this, e);
         i = t;
       }));
       return i;
     }));
-    O.set(this, (() => {
+    H.set(this, (() => {
       var t, e;
       this.confirmCallback({
         panels: d(this, x, "f"),
@@ -390,7 +392,9 @@ const vt = class {
       this.path = t.detail;
       d(this, j, "f").call(this);
       this.selectedFile = null;
-      if (!this.path.length) this.designData = null;
+      if (!this.path.length) {
+        this.designData = null;
+      }
     }));
     // 9.LOCAL METHODS -> RENDERS //
         Z.set(this, (() => {
@@ -402,11 +406,11 @@ const vt = class {
       const l = !this.pathIsValid && this.path.length > 0;
       let r;
       if (this.pathIsValid && this.path === this.lastLoadCallbackSettingValues.path) {
-        r = d(this, u, "f").header.btnReload;
+        r = d(this, f, "f").header.btnReload;
       } else if (this.pathIsValid) {
-        r = d(this, u, "f").header.btnLoad;
+        r = d(this, f, "f").header.btnLoad;
       } else {
-        r = d(this, u, "f").header.selectFileButton;
+        r = d(this, f, "f").header.selectFileButton;
       }
       return e("header", {
         class: {
@@ -421,7 +425,7 @@ const vt = class {
       }, e("label", {
         // path/url label
         class: "label path-url-label"
-      }, d(this, u, "f").header.path), e("div", {
+      }, d(this, f, "f").header.path), e("div", {
         class: "path-url-wrapper buttons-spacer"
       }, e("ch-edit", {
         // path/url/file input
@@ -438,16 +442,16 @@ const vt = class {
         onInput: d(this, X, "f"),
         onBlur: this.reactiveSettings.path && d(this, S, "f"),
         disabled: this.isLoading,
-        placeholder: `${d(this, u, "f").header.pathPlaceholder}`,
+        placeholder: `${d(this, f, "f").header.pathPlaceholder}`,
         startImgSrc: kt,
-        ref: t => p(this, C, t, "f")
+        ref: t => p(this, $, t, "f")
       }), l && e("ch-tooltip", {
         class: "tooltip",
-        actionElement: d(this, C, "f"),
+        actionElement: d(this, $, "f"),
         blockAlign: o.tooltipSettings.blockAlign,
         inlineAlign: o.tooltipSettings.inlineAlign,
         delay: o.tooltipSettings.delay
-      }, d(this, u, "f").header.pathErrorMessage, " ", d(this, g, "f")), e("input", {
+      }, d(this, f, "f").header.pathErrorMessage, " ", d(this, g, "f")), e("input", {
         hidden: true,
         type: "file",
         accept: d(this, g, "f"),
@@ -456,8 +460,8 @@ const vt = class {
       }), e("div", {
         class: "buttons-spacer"
       }, e("button", {
-        "aria-label": d(this, u, "f").header.removeFileSelection,
-        title: d(this, u, "f").header.removeFileSelection,
+        "aria-label": d(this, f, "f").header.removeFileSelection,
+        title: d(this, f, "f").header.removeFileSelection,
         id: "reset-all-button",
         class: "button-tertiary button-icon-only",
         part: "reset-all-button",
@@ -482,7 +486,7 @@ const vt = class {
       }, r))), this.requiresAccessToken && [ e("label", {
         // access token label
         class: "label access-token-label"
-      }, d(this, u, "f").header.accessToken), e("div", null, e("ch-edit", {
+      }, d(this, f, "f").header.accessToken), e("div", null, e("ch-edit", {
         class: {
           input: true,
           "access-token": true,
@@ -490,7 +494,7 @@ const vt = class {
         },
         ref: t => p(this, k, t, "f"),
         value: this.accessToken,
-        placeholder: d(this, u, "f").header.accessTokenPlaceholder,
+        placeholder: d(this, f, "f").header.accessTokenPlaceholder,
         onFocus: d(this, R, "f"),
         onBlur: d(this, U, "f"),
         part: "access-token",
@@ -502,10 +506,10 @@ const vt = class {
         blockAlign: o.tooltipSettings.blockAlign,
         inlineAlign: o.tooltipSettings.inlineAlign,
         delay: o.tooltipSettings.delay
-      }, d(this, u, "f").header.accessTokenErrorMessage)) ], e("label", {
+      }, d(this, f, "f").header.accessTokenErrorMessage)) ], e("label", {
         // style label
         class: "label style-label"
-      }, d(this, u, "f").header.style), e("ch-combo-box-render", {
+      }, d(this, f, "f").header.style), e("ch-combo-box-render", {
         // style combo box
         suggest: true,
         suggestOptions: {
@@ -520,7 +524,7 @@ const vt = class {
       }), e("label", {
         // module label
         class: "label module-label"
-      }, d(this, u, "f").header.module), e("gx-ide-entity-selector", {
+      }, d(this, f, "f").header.module), e("gx-ide-entity-selector", {
         // module entity selector
         labelPosition: "none",
         value: this.defaultModule,
@@ -534,7 +538,7 @@ const vt = class {
         // import as web panels
         class: "checkboxes-options field-group"
       }, e("ch-checkbox", {
-        caption: d(this, u, "f").header.importAs,
+        caption: d(this, f, "f").header.importAs,
         checkedValue: mt,
         class: "checkbox import-as-web-panels",
         ref: t => p(this, w, t, "f"),
@@ -549,7 +553,7 @@ const vt = class {
         }
       }, e("ch-checkbox", {
         // fit images
-        caption: d(this, u, "f").header.fitImages,
+        caption: d(this, f, "f").header.fitImages,
         checkedValue: mt,
         class: "checkbox",
         part: "fit-images-checkbox",
@@ -585,13 +589,13 @@ const vt = class {
           class: "empty-state scrollable",
           stateIconSrc: gt,
           isAnimated: d(this, b, "f"),
-          stateTitle: d(this, u, "f").messages.noDesignSelected,
+          stateTitle: d(this, f, "f").messages.noDesignSelected,
           key: "no-objects-empty-state"
         }, e("button", {
           // begin by selecting a file
           class: "button-tertiary empty-state-button",
           onClick: d(this, A, "f")
-        }, d(this, u, "f").messages.selectDesign));
+        }, d(this, f, "f").messages.selectDesign));
       }
     }));
     it.set(this, (() => e("ch-tree-view-render", {
@@ -602,6 +606,7 @@ const vt = class {
       model: this.designDataTreeDataModel,
       dragDisabled: true,
       dropDisabled: true,
+      expandOnClick: false,
       toggleCheckboxes: true,
       checkbox: true,
       checked: true,
@@ -623,16 +628,16 @@ const vt = class {
         onClick: d(this, B, "f"),
         part: "button button--cancel",
         slot: "footer-end"
-      }, d(this, u, "f").footer.btnCancel), e("button", {
+      }, d(this, f, "f").footer.btnCancel), e("button", {
         // button ok
         id: "button-ok",
         class: "button-primary button-ok",
         type: "primary-text-only",
-        onClick: !s && d(this, O, "f"),
+        onClick: !s && d(this, H, "f"),
         part: "button button--ok",
         disabled: s,
         slot: "footer-end"
-      }, d(this, u, "f").footer.btnOk)));
+      }, d(this, f, "f").footer.btnOk)));
     }));
     ot.set(this, (() => {
       var t, s;
@@ -710,7 +715,7 @@ const vt = class {
       style: {
         display: this.renderedTabs.has(l.composition.id) ? "" : "none"
       }
-    }, this.selectedDesignType === dt || this.selectedDesignType === ft ? d(this, nt, "f").call(this) : d(this, ot, "f").call(this)), e("div", {
+    }, this.selectedDesignType === dt || this.selectedDesignType === ut ? d(this, nt, "f").call(this) : d(this, ot, "f").call(this)), e("div", {
       slot: l.layout.slot,
       class: "spacing-body",
       style: {
@@ -787,36 +792,49 @@ const vt = class {
   designDataChanged(t) {
     if (t) {
       const t = d(this, Y, "f").call(this, this.designData.panels);
+      const e = d(this, w, "f").value === mt ? "objects/webpanel" : "objects/panel-for-sd";
       this.designDataTreeDataModel = [ {
         order: 0,
-        id: `parent${ut}${ht}`,
+        id: `parent${ft}${ht}`,
         leaf: false,
-        caption: d(this, u, "f").tree.panels,
-        startImgSrc: "objects/panel-for-sd",
+        caption: d(this, f, "f").tree.panels,
+        startImgSrc: e,
         checkbox: true,
         checked: true,
         expanded: true,
-        items: this.designData.panels.map(((e, s) => ({
-          id: `${e.id}${ut}${ht}`,
-          class: "object tree-view-item",
-          leaf: true,
-          caption: e.name,
-          startImgSrc: "objects/panel-for-sd",
-          checkbox: true,
-          checked: true,
-          selected: s === t
-        })))
+        items: this.designData.panels.map(((s, i) => {
+          var a;
+          return {
+            id: `${s.id}${ft}${ht}`,
+            class: "object tree-view-item",
+            leaf: !s.variants,
+            caption: s.name,
+            startImgSrc: e,
+            checkbox: true,
+            checked: true,
+            expanded: true,
+            selected: i === t,
+            items: (a = s.variants) === null || a === void 0 ? void 0 : a.map((t => ({
+              id: `${t.id}${ft}${ht}`,
+              caption: `${s.name} (${t.name})`,
+              startImgSrc: e,
+              leaf: true,
+              checkbox: true,
+              checked: true
+            })))
+          };
+        }))
       }, {
         order: 1,
-        id: `parent${ut}${ct}`,
+        id: `parent${ft}${ct}`,
         leaf: false,
-        caption: d(this, u, "f").tree.stencils,
+        caption: d(this, f, "f").tree.stencils,
         startImgSrc: "objects/stencil",
         checkbox: true,
         checked: true,
         expanded: true,
         items: this.designData.stencils.map((t => ({
-          id: `${t.id}${ut}${ct}`,
+          id: `${t.id}${ft}${ct}`,
           class: "object tree-view-item",
           leaf: true,
           caption: t.name,
@@ -826,16 +844,16 @@ const vt = class {
         })))
       }, {
         order: 2,
-        id: `parent${ut}${dt}`,
+        id: `parent${ft}${dt}`,
         parts: "category tree-view-item",
         leaf: false,
-        caption: d(this, u, "f").tree.images,
+        caption: d(this, f, "f").tree.images,
         startImgSrc: "objects/image",
         checkbox: true,
         checked: true,
         expanded: true,
         items: this.designData.images.map((t => ({
-          id: `${t.id}${ut}${dt}`,
+          id: `${t.id}${ft}${dt}`,
           class: "object tree-view-item",
           leaf: true,
           caption: t.name,
@@ -845,15 +863,15 @@ const vt = class {
         })))
       }, {
         order: 3,
-        id: `parent${ut}${ft}`,
+        id: `parent${ft}${ut}`,
         leaf: false,
-        caption: d(this, u, "f").tree.fonts,
+        caption: d(this, f, "f").tree.fonts,
         startImgSrc: "controls/font",
         checkbox: true,
         checked: true,
         expanded: true,
         items: this.designData.fonts.map((t => ({
-          id: `${t.id}${ut}${ft}`,
+          id: `${t.id}${ft}${ut}`,
           class: "object tree-view-item",
           leaf: true,
           caption: t.name,
@@ -863,9 +881,9 @@ const vt = class {
         })))
       }, {
         order: 4,
-        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${ut}${pt}`,
+        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${ft}${pt}`,
         leaf: true,
-        caption: d(this, u, "f").tree.designSystem,
+        caption: d(this, f, "f").tree.designSystem,
         startImgSrc: "objects/dso",
         checkbox: true,
         checked: true
@@ -891,10 +909,10 @@ const vt = class {
   }
   async componentWillLoad() {
     var t, e;
-    p(this, u, await n.getComponentStrings(this.el), "f");
+    p(this, f, await n.getComponentStrings(this.el), "f");
     p(this, g, this.extensions.map((t => `.${t}`)).join(", "), "f");
     this.stylesChanged(this.styles);
-    d(this, $, "f").call(this);
+    d(this, C, "f").call(this);
     this.pathChanged(this.path);
     this.styleValue = ((t = this.stylesAsComboBoxModel) === null || t === void 0 ? void 0 : t.length) > 0 ? (e = this.stylesAsComboBoxModel[0]) === null || e === void 0 ? void 0 : e.value : "";
   }
@@ -932,16 +950,16 @@ const vt = class {
   }
 };
 
-u = new WeakMap, m = new WeakMap, b = new WeakMap, g = new WeakMap, k = new WeakMap, 
+f = new WeakMap, m = new WeakMap, b = new WeakMap, g = new WeakMap, k = new WeakMap, 
 w = new WeakMap, v = new WeakMap, y = new WeakMap, x = new WeakMap, M = new WeakMap, 
-W = new WeakMap, I = new WeakMap, _ = new WeakMap, C = new WeakMap, $ = new WeakMap, 
+W = new WeakMap, I = new WeakMap, _ = new WeakMap, $ = new WeakMap, C = new WeakMap, 
 j = new WeakMap, S = new WeakMap, T = new WeakMap, z = new WeakMap, P = new WeakMap, 
 q = new WeakMap, A = new WeakMap, E = new WeakMap, V = new WeakMap, F = new WeakMap, 
-L = new WeakMap, G = new WeakMap, O = new WeakMap, B = new WeakMap, N = new WeakMap, 
+L = new WeakMap, G = new WeakMap, H = new WeakMap, B = new WeakMap, N = new WeakMap, 
 Y = new WeakMap, J = new WeakMap, K = new WeakMap, Q = new WeakMap, R = new WeakMap, 
 U = new WeakMap, X = new WeakMap, Z = new WeakMap, tt = new WeakMap, st = new WeakMap, 
 it = new WeakMap, at = new WeakMap, ot = new WeakMap, nt = new WeakMap, lt = new WeakMap, 
-rt = new WeakMap, f = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
+rt = new WeakMap, u = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
   const e = [];
   for (const s of t) {
     let t = {
@@ -954,13 +972,13 @@ rt = new WeakMap, f = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeI
     };
     if (s.controls) {
       t = Object.assign(Object.assign({}, t), {
-        items: d(this, f, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, s.controls)
+        items: d(this, u, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, s.controls)
       });
     }
     e.push(t);
   }
   return e;
-}, H = function _GxIdeImportFromDesign_getCodeFactory(t) {
+}, O = function _GxIdeImportFromDesign_getCodeFactory(t) {
   switch (t) {
    case ht:
    case ct:
@@ -977,7 +995,7 @@ rt = new WeakMap, f = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeI
   switch (t) {
    case ht:
    case ct:
-    this.detailTreeModel = d(this, f, "m", D).call(this, this.selectedDesignItem.composition.controls);
+    this.detailTreeModel = d(this, u, "m", D).call(this, this.selectedDesignItem.composition.controls);
     break;
   }
 };
@@ -985,4 +1003,4 @@ rt = new WeakMap, f = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeI
 vt.style = c;
 
 export { vt as gx_ide_design_import };
-//# sourceMappingURL=p-ba307cf6.entry.js.map
+//# sourceMappingURL=p-f9b74091.entry.js.map