@genexus/genexus-ide-ui 1.0.34 → 1.0.36

package/dist/genexus-ide-ui/{p-a1e8b380.entry.js → p-32bd11fa.entry.js}

@@ -1,6 +1,6 @@
 import { r as t, h as e, H as s, g as i } from "./p-49712340.js";
 
-import { g as a } from "./p-7d4c5a43.js";
+import { g as a } from "./p-b81d21d5.js";
 
 import { c as o } from "./p-78b90603.js";
 
@@ -11,7 +11,7 @@ const mapStylesToComboBoxItemModel = t => t === null || t === void 0 ? void 0 :
   caption: t.label || t.name
 })));
 
-const l = {
+const r = {
   layout: {
     id: "layout",
     caption: "Layout",
@@ -39,47 +39,47 @@ const l = {
   }
 };
 
-const r = {
+const l = {
   panels: [ {
-    id: l.composition.id,
-    name: l.composition.caption
+    id: r.composition.id,
+    name: r.composition.caption
   }, {
-    id: l.layout.id,
-    name: l.layout.caption
+    id: r.layout.id,
+    name: r.layout.caption
   }, {
-    id: l.code.id,
-    name: l.code.caption
+    id: r.code.id,
+    name: r.code.caption
   } ],
   stencils: [ {
-    id: l.composition.id,
-    name: l.composition.caption
+    id: r.composition.id,
+    name: r.composition.caption
   }, {
-    id: l.layout.id,
-    name: l.layout.caption
+    id: r.layout.id,
+    name: r.layout.caption
   }, {
-    id: l.code.id,
-    name: l.code.caption
+    id: r.code.id,
+    name: r.code.caption
   } ],
   images: [ {
-    id: l.composition.id,
-    name: l.composition.caption
+    id: r.composition.id,
+    name: r.composition.caption
   } ],
   fonts: [ {
-    id: l.composition.id,
-    name: l.composition.caption
+    id: r.composition.id,
+    name: r.composition.caption
   } ],
   designSystem: [ {
-    id: l.tokens.id,
-    name: l.tokens.caption
+    id: r.tokens.id,
+    name: r.tokens.caption
   }, {
-    id: l.styles.id,
-    name: l.styles.caption
+    id: r.styles.id,
+    name: r.styles.caption
   } ]
 };
 
-const h = new Map([ [ "panels", r.panels ], [ "stencils", r.stencils ], [ "images", r.images ], [ "design_system", r.designSystem ], [ "fonts", r.fonts ] ]);
+const h = new Map([ [ "panels", l.panels ], [ "stencils", l.stencils ], [ "images", l.images ], [ "design_system", l.designSystem ], [ "fonts", l.fonts ] ]);
 
-const c = '@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{display:grid;grid-auto-rows:max-content;grid-template-columns:minmax(88px, max-content) 1fr !important}.header--show-access-token{grid-template-areas:"path-url-label path-url-wrapper" "access-token-label access-token" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.header--hide-access-token{grid-template-areas:"path-url-label path-url-wrapper" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.path-url-wrapper{grid-template-columns:1fr max-content}.path-url-label{grid-area:path-url-label}.path-url-control{flex-grow:1}.select-load-button{min-inline-size:80px}.access-token-label{grid-area:access-token-label}.access-token{grid-area:access-token}.style-label{grid-area:style-label}.style{grid-area:style}.module-label{grid-area:module-label}.module{grid-area:module}.checkboxes-options{grid-area:checkboxes-options;grid-template-columns:max-content max-content;justify-content:space-between}.main{display:grid;grid-template-columns:250px 1fr;block-size:100%;overflow:auto}.main--loading{grid-template-columns:1fr}.panel-tab{block-size:100%;display:grid;grid-template-columns:1fr 300px}.panel-tab .panel-item{overflow:auto}.tree-view{padding-block:var(--mer-spacing--2xs)}.tree-view-panel-item{border-inline-start:var(--section-common-border)}.checker-board{--white-square-color:#fff1;--black-square-color:#0000;background:linear-gradient(45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(-45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(45deg, var(--black-square-color) 75%, var(--white-square-color) 75%), linear-gradient(-45deg, var(--black-square-color) 75%, var(--white-square-color) 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px}.tab{border-width:0 !important}.tab.fit-images .composition-tab-slot{font-size:0}.tab.fit-images img{object-fit:scale-down;object-position:left top;max-height:100%}.tab--hidden{display:none}.button-cancel,.button-ok{min-inline-size:var(--mer-spacing--4xl)}.messages-slot-container{block-size:100%}.composition-tab-slot{block-size:100%;overflow:auto}.empty-state{overflow:auto}.empty-state-button{transform:translateY(-12px)}.message{animation:fadeIn var(--mer-timing--fast) ease-in-out forwards}.message--info{color:var(--mer-text__on-surface)}.message--warning{color:var(--mer-text__warning)}.message--error{color:var(--mer-text__error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.combo-box.ch-disabled{--control__bg-color:var(--control__background-color--disabled);--control__border-color:var(--control__border-color--disabled);--control__color:var(--control__color--disabled);--ch-placeholder-color:var(--control-placeholder__color--disabled)}';
+const c = '@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{display:grid;grid-auto-rows:max-content;grid-template-columns:minmax(88px, max-content) 1fr !important}.header--show-access-token{grid-template-areas:"path-url-label path-url-wrapper" "access-token-label access-token" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.header--hide-access-token{grid-template-areas:"path-url-label path-url-wrapper" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.path-url-wrapper{grid-template-columns:1fr max-content}.path-url-label{grid-area:path-url-label}.path-url-control{flex-grow:1}.select-load-button{min-inline-size:80px}.access-token-label{grid-area:access-token-label}.access-token{grid-area:access-token}.style-label{grid-area:style-label}.style{grid-area:style}.module-label{grid-area:module-label}.module{grid-area:module}.checkboxes-options{grid-area:checkboxes-options;grid-template-columns:max-content max-content;justify-content:space-between}.main{display:grid;grid-template-columns:250px 1fr;block-size:100%;overflow:auto}.main--loading{grid-template-columns:1fr}.panel-tab{block-size:100%;display:grid;grid-template-columns:1fr 300px}.panel-tab .panel-item{overflow:auto}.panel-tab:has(>:only-child){grid-template-columns:1fr}.tree-view{padding-block:var(--mer-spacing--2xs)}.tree-view-panel-item{border-inline-start:var(--section-common-border)}.checker-board{--white-square-color:#fff1;--black-square-color:#0000;background:linear-gradient(45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(-45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(45deg, var(--black-square-color) 75%, var(--white-square-color) 75%), linear-gradient(-45deg, var(--black-square-color) 75%, var(--white-square-color) 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px}.tab{border-width:0 !important}.tab.fit-images .composition-tab-slot{font-size:0}.tab.fit-images img{object-fit:scale-down;object-position:left top;max-height:100%}.tab--hidden{display:none}.button-cancel,.button-ok{min-inline-size:var(--mer-spacing--4xl)}.messages-slot-container{block-size:100%}.composition-tab-slot{block-size:100%;overflow:auto}.empty-state{overflow:auto}.empty-state-button{transform:translateY(-12px)}.message{animation:fadeIn var(--mer-timing--fast) ease-in-out forwards}.message--info{color:var(--mer-text__on-surface)}.message--warning{color:var(--mer-text__warning)}.message--error{color:var(--mer-text__error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.combo-box.ch-disabled{--control__bg-color:var(--control__background-color--disabled);--control__border-color:var(--control__border-color--disabled);--control__color:var(--control__color--disabled);--ch-placeholder-color:var(--control-placeholder__color--disabled)}.tree-view::part(item__header){min-inline-size:var(--tree-view__min-inline-size)}';
 
 var d = undefined && undefined.__classPrivateFieldGet || function(t, e, s, i) {
   if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
@@ -94,43 +94,54 @@ 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 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;
+var u, f, m, b, g, k, w, v, y, x, M, W, _, I, C, $, j, D, S, T, z, P, q, A, E, F, V, G, L, O, B, H, N, Y, J, K, Q, R, U, X, Z, tt, et, st, it, at, ot, nt, rt, lt, ht, ct;
 
-const ht = "panels";
+const dt = "panels";
 
-const ct = "stencils";
+const pt = "stencils";
 
-const dt = "images";
+const ut = "images";
 
-const pt = "design_system";
+const ft = "design_system";
 
-const ut = "fonts";
+const mt = "fonts";
 
-const ft = "@@@";
+const bt = "@@@";
 
 // ch-checkbox
-const mt = "on";
+const gt = "on";
 
 // Icons
-const bt = a({
+const kt = a({
   category: "menus",
   name: "delete",
   colorType: "primary"
 });
 
-const gt = a({
+const wt = a({
   category: "objects",
   name: "design"
 });
 
-const kt = a({
+const vt = a({
   category: "controls",
   name: "file-upload"
 });
 
-const wt = [ "resets/box-sizing", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "components/button", "components/checkbox", "components/edit", "components/tree-view", "components/combo-box", "components/tab", "components/tooltip", "chameleon/scrollbar" ];
+// For empty states
+const yt = a({
+  category: "objects",
+  name: "webpanel"
+});
+
+const xt = a({
+  category: "objects",
+  name: "panel-for-sd"
+});
 
-const vt = class {
+const Mt = [ "resets/box-sizing", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "components/button", "components/checkbox", "components/edit", "components/tree-view", "components/combo-box", "components/tab", "components/tooltip", "chameleon/scrollbar" ];
+
+const Wt = class {
   constructor(s) {
     t(this, s);
     u.add(this);
@@ -157,18 +168,17 @@ const vt = class {
     x.set(this, []);
     M.set(this, []);
     W.set(this, []);
-    I.set(this, []);
-    _.set(this, void 0);
-    $.set(this, void 0);
-    // 9.LOCAL METHODS //
-        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);
-      this.activeTabs.set("fonts", r.fonts[0].id);
-      this.activeTabs.set("design_system", r.designSystem[0].id);
+    _.set(this, []);
+    I.set(this, void 0);
+    C.set(this, void 0);
+    j.set(this, (() => {
+      this.activeTabs.set("panels", l.panels[0].id);
+      this.activeTabs.set("stencils", l.stencils[0].id);
+      this.activeTabs.set("images", l.images[0].id);
+      this.activeTabs.set("fonts", l.fonts[0].id);
+      this.activeTabs.set("design_system", l.designSystem[0].id);
     }));
-    j.set(this, (async () => {
+    D.set(this, (async () => {
       this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
       // evaluate access token error
             if (this.accessToken.length) {
@@ -179,25 +189,25 @@ const vt = class {
       const t = this.isLoaded && this.reactiveSettings.path && this.pathIsValid && this.path !== this.lastLoadCallbackSettingValues.path;
       const e = !this.requiresAccessToken || this.requiresAccessToken && this.accessToken.length > 0;
       if (t && e) {
-        d(this, F, "f").call(this);
+        d(this, G, "f").call(this);
       }
     }));
-    T.set(this, (async t => {
+    z.set(this, (async t => {
       var e;
       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(ft);
+        const a = i.split(bt);
         const o = a[0];
         const n = a[1];
-        const l = o && o !== "parent";
-        const r = n === "design_system";
-        if (l || r) {
+        const r = o && o !== "parent";
+        const l = n === "design_system";
+        if (r || l) {
           this.tabsModel = h.get(n);
           this.selectedDesignType = n;
-          const t = d(this, z, "f").call(this, i);
+          const t = d(this, P, "f").call(this, i);
           if (!t) {
-            const t = await d(this, G, "f").call(this, o, this.selectedDesignType);
+            const t = await d(this, O, "f").call(this, o, this.selectedDesignType);
             d(this, m, "f").set(i, {
               designType: this.selectedDesignType,
               designDataDetail: t
@@ -206,19 +216,19 @@ const vt = class {
             // Item has been queried already. The item content exists already.
             this.selectedDesignType = t.designType;
             this.selectedDesignItem = t.designDataDetail;
-            d(this, u, "m", O).call(this, t.designType);
-            d(this, u, "m", et).call(this, t.designType);
+            d(this, u, "m", B).call(this, t.designType);
+            d(this, u, "m", st).call(this, t.designType);
           }
           this.renderedTabs.clear();
           this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
         }
       }
     }));
-    z.set(this, (t => {
+    P.set(this, (t => {
       var e;
       return (e = d(this, m, "f")) === null || e === void 0 ? void 0 : e.get(t);
     }));
-    P.set(this, (t => {
+    q.set(this, (t => {
       const e = /^(\/|\.\/|(\w:))[^:*?"<>|]*\.(sketch|gxsketch)$/i;
  // Match valid file paths
             const s = /^https?:\/\/(www\.)?figma\.com/;
@@ -228,65 +238,65 @@ const vt = class {
             const a = e.test(t) || s.test(t) || i.test(t);
       return a;
     }));
-    q.set(this, (t => {
+    A.set(this, (t => {
       const e = Array.from(t.detail.values());
       let s = null;
       const i = {};
       for (const t of e) {
-        if (t.item.id.startsWith(`parent${ft}`)) {
-          s = t.item.id.split(ft)[1];
+        if (t.item.id.startsWith(`parent${bt}`)) {
+          s = t.item.id.split(bt)[1];
           i[s] = [];
         } else if (t.item.checked && s) {
-          const e = t.item.id.split(ft)[1];
+          const e = t.item.id.split(bt)[1];
           if (e === s) {
-            const e = t.item.id.split(ft)[0];
+            const e = t.item.id.split(bt)[0];
             i[s].push(e);
           }
         }
       }
       // const { designSystem, fonts, images, panels, stencils } = result;
-            const {fonts: a, panels: o, stencils: n, images: l} = i;
+            const {fonts: a, panels: o, stencils: n, images: r} = i;
       // this.designSystemSelected = designSystem;
             p(this, x, o, "f");
       p(this, M, n, "f");
-      p(this, W, l, "f");
-      p(this, I, a, "f");
+      p(this, W, r, "f");
+      p(this, _, a, "f");
     }));
-    A.set(this, (() => {
-      d(this, _, "f").click();
+    E.set(this, (() => {
+      d(this, I, "f").click();
     }));
-    E.set(this, (t => {
+    F.set(this, (t => {
       this.styleValue = t.target.value;
       if (this.reactiveSettings.style && this.styleValue !== this.lastLoadCallbackSettingValues.style) {
-        d(this, F, "f").call(this);
+        d(this, G, "f").call(this);
       }
     }));
     V.set(this, (t => {
       if (this.reactiveSettings.module && this.defaultModule.id !== t.detail.id && this.pathIsValid) {
-        d(this, F, "f").call(this);
+        d(this, G, "f").call(this);
       }
     }));
-    F.set(this, (async () => {
+    G.set(this, (async () => {
       var t, e;
       this.isLoading = true;
       const s = this.selectedFile ? this.selectedFile : this.path;
       const i = d(this, k, "f") ? d(this, k, "f").value : undefined;
       const a = this.styleValue;
-      const o = d(this, w, "f").value === mt;
+      const o = d(this, w, "f").value === gt;
       const n = await this.loadCallback(s, a, o, i, d(this, L, "f"));
       // clear
             p(this, x, [], "f");
       p(this, M, [], "f");
-      p(this, I, [], "f");
+      p(this, _, [], "f");
       this.selectedDesignType = undefined;
       this.selectedDesignItem = undefined;
       this.messages = [];
       this.designData = n;
       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;
+      const r = (e = n.designSystem[0]) === null || e === void 0 ? void 0 : e.name;
+      if (r && !this.styleValue) {
+        this.styleValue = r;
       }
       // update the settings that were used for the last load
             if (this.reactiveSettings.path && this.pathIsValid) {
@@ -305,23 +315,23 @@ const vt = class {
     L.set(this, (t => {
       this.messages = [ ...this.messages, t ];
     }));
-    G.set(this, (async (t, e) => {
+    O.set(this, (async (t, e) => {
       let s;
       switch (e) {
-       case dt:
+       case ut:
         s = this.loadImageCallback;
         break;
 
-       case pt:
+       case ft:
         s = this.loadDesignSystemCallback;
         break;
 
-       case ut:
+       case mt:
         s = this.loadFontCallback;
         break;
 
-       case ht:
-       case ct:
+       case dt:
+       case pt:
         s = this.loadPanelDataCallback;
         break;
       }
@@ -329,8 +339,8 @@ const vt = class {
       await s(t).then((t => {
         this.selectedDesignType = e;
         this.selectedDesignItem = t;
-        d(this, u, "m", O).call(this, e);
-        d(this, u, "m", et).call(this, e);
+        d(this, u, "m", B).call(this, e);
+        d(this, u, "m", st).call(this, e);
         i = t;
       }));
       return i;
@@ -340,35 +350,35 @@ const vt = class {
       this.confirmCallback({
         panels: d(this, x, "f"),
         stencils: d(this, M, "f"),
-        fonts: d(this, I, "f"),
+        fonts: d(this, _, "f"),
         images: d(this, W, "f"),
         moduleId: (e = (t = d(this, v, "f")) === null || t === void 0 ? void 0 : t.value) === null || e === void 0 ? void 0 : e.id,
         styleName: this.styleValue,
-        importAsWebPanels: d(this, w, "f").value === mt
+        importAsWebPanels: d(this, w, "f").value === gt
       });
     }));
-    B.set(this, (() => {
+    N.set(this, (() => {
       this.cancelCallback();
       this.isLoading = false;
     }));
-    N.set(this, (t => {
-      this.fitImages = t.detail === mt;
+    Y.set(this, (t => {
+      this.fitImages = t.detail === gt;
     }));
-    Y.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
-    J.set(this, (() => {
+    J.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
+    K.set(this, (() => {
       const t = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
       if (t) {
-        d(this, F, "f").call(this);
+        d(this, G, "f").call(this);
       }
     }));
-    K.set(this, (() => {
+    Q.set(this, (() => {
       this.selectedFile = null;
       this.path = "";
       this.accessToken = "";
       this.selectedFile = null;
-      d(this, _, "f").value = null;
+      d(this, I, "f").value = null;
     }));
-    Q.set(this, (t => {
+    R.set(this, (t => {
       var e;
       const s = t.target;
       if (((e = s.files) === null || e === void 0 ? void 0 : e.length) > 0) {
@@ -377,40 +387,40 @@ const vt = class {
         // we know the path is valid because the extensions are restricted by "extensions" Prop.
             }
     }));
-    R.set(this, (t => {
+    U.set(this, (t => {
       const e = t.target;
       e.type = "text";
  // display token on focus
         }));
-    U.set(this, (t => {
+    X.set(this, (t => {
       const e = t.target;
       e.type = "password";
  // hide token on blur
             this.accessTokenChanged(e.value);
     }));
-    X.set(this, (async t => {
+    Z.set(this, (async t => {
       this.path = t.detail;
-      d(this, j, "f").call(this);
+      d(this, D, "f").call(this);
       this.selectedFile = null;
       if (!this.path.length) {
         this.designData = null;
       }
     }));
-    // 9.LOCAL METHODS -> RENDERS //
-        Z.set(this, (() => {
+    tt.set(this, (() => {
       const t = this.isLoading || this.pathIsValid && this.requiresAccessToken && this.accessToken.length === 0;
       const s = this.isLoading || this.path.length === 0;
       const i = this.isLoading;
       const a = this.isLoading;
       const n = !this.pathIsValid && this.path.length > 0;
-      const l = !this.pathIsValid && this.path.length > 0;
-      let r;
+      const r = !this.pathIsValid && this.path.length > 0;
+      const l = this.isLoading || !this.designDataTreeDataModel.length || this.selectedDesignType === "stencils" || this.selectedDesignType === "design_system";
+      let h;
       if (this.pathIsValid && this.path === this.lastLoadCallbackSettingValues.path) {
-        r = d(this, f, "f").header.btnReload;
+        h = d(this, f, "f").header.btnReload;
       } else if (this.pathIsValid) {
-        r = d(this, f, "f").header.btnLoad;
+        h = d(this, f, "f").header.btnLoad;
       } else {
-        r = d(this, f, "f").header.selectFileButton;
+        h = d(this, f, "f").header.selectFileButton;
       }
       return e("header", {
         class: {
@@ -439,15 +449,15 @@ const vt = class {
         part: "option-path",
         type: "text",
         value: this.path,
-        onInput: d(this, X, "f"),
+        onInput: d(this, Z, "f"),
         onBlur: this.reactiveSettings.path && d(this, S, "f"),
         disabled: this.isLoading,
         placeholder: `${d(this, f, "f").header.pathPlaceholder}`,
-        startImgSrc: kt,
-        ref: t => p(this, $, t, "f")
-      }), l && e("ch-tooltip", {
+        startImgSrc: vt,
+        ref: t => p(this, C, t, "f")
+      }), r && e("ch-tooltip", {
         class: "tooltip",
-        actionElement: d(this, $, "f"),
+        actionElement: d(this, C, "f"),
         blockAlign: o.tooltipSettings.blockAlign,
         inlineAlign: o.tooltipSettings.inlineAlign,
         delay: o.tooltipSettings.delay
@@ -455,8 +465,8 @@ const vt = class {
         hidden: true,
         type: "file",
         accept: d(this, g, "f"),
-        onChange: d(this, Q, "f"),
-        ref: t => p(this, _, t, "f")
+        onChange: d(this, R, "f"),
+        ref: t => p(this, I, t, "f")
       }), e("div", {
         class: "buttons-spacer"
       }, e("button", {
@@ -466,16 +476,16 @@ const vt = class {
         class: "button-tertiary button-icon-only",
         part: "reset-all-button",
         disabled: s,
-        onClick: !s && d(this, K, "f")
+        onClick: !s && d(this, Q, "f")
       }, e("ch-image", {
         class: "icon-md",
-        src: bt,
+        src: kt,
         disabled: s
       })), e("button", {
         // load file button
         id: "button-load",
         type: "primary-text-only",
-        onClick: this.pathIsValid ? d(this, F, "f") : d(this, A, "f"),
+        onClick: this.pathIsValid ? d(this, G, "f") : d(this, E, "f"),
         part: "button button--load",
         disabled: t,
         class: {
@@ -483,7 +493,7 @@ const vt = class {
           "button-secondary": !this.pathIsValid,
           "select-load-button": true
         }
-      }, r))), this.requiresAccessToken && [ e("label", {
+      }, h))), this.requiresAccessToken && [ e("label", {
         // access token label
         class: "label access-token-label"
       }, d(this, f, "f").header.accessToken), e("div", null, e("ch-edit", {
@@ -495,8 +505,8 @@ const vt = class {
         ref: t => p(this, k, t, "f"),
         value: this.accessToken,
         placeholder: d(this, f, "f").header.accessTokenPlaceholder,
-        onFocus: d(this, R, "f"),
-        onBlur: d(this, U, "f"),
+        onFocus: d(this, U, "f"),
+        onBlur: d(this, X, "f"),
         part: "access-token",
         disabled: this.isLoading,
         type: "password"
@@ -518,7 +528,7 @@ const vt = class {
         disabled: i,
         model: this.stylesAsComboBoxModel,
         value: this.styleValue,
-        onInput: d(this, E, "f"),
+        onInput: d(this, F, "f"),
         part: "option-style",
         class: "combo-box style"
       }), e("label", {
@@ -539,13 +549,13 @@ const vt = class {
         class: "checkboxes-options field-group"
       }, e("ch-checkbox", {
         caption: d(this, f, "f").header.importAs,
-        checkedValue: mt,
+        checkedValue: gt,
         class: "checkbox import-as-web-panels",
         ref: t => p(this, w, t, "f"),
-        value: this.importAsWebPanels ? mt : undefined,
+        value: this.importAsWebPanels ? gt : undefined,
         part: "option-import-as-web-panels",
         disabled: this.isLoading,
-        onInput: d(this, J, "f")
+        onInput: d(this, K, "f")
       }), e("div", {
         class: {
           "field-group-inline": true,
@@ -554,27 +564,27 @@ const vt = class {
       }, e("ch-checkbox", {
         // fit images
         caption: d(this, f, "f").header.fitImages,
-        checkedValue: mt,
+        checkedValue: gt,
         class: "checkbox",
         part: "fit-images-checkbox",
-        disabled: this.isLoading || !this.designDataTreeDataModel.length,
-        onInput: d(this, N, "f")
+        disabled: l,
+        onInput: d(this, Y, "f")
       }))));
     }));
-    tt.set(this, (() => this.messages.length > 0 && this.messages.map((t => e("p", {
+    et.set(this, (() => this.messages.length > 0 && this.messages.map((t => e("p", {
       class: {
         "text-body-regular-m": true,
         message: true,
         [`message--${t.type}`]: true
       }
     }, t.type, ": ", t.text)))));
-    st.set(this, (() => {
+    it.set(this, (() => {
       var t, s;
       if (this.isLoading || ((t = this.designData) === null || t === void 0 ? void 0 : t.success) === false) {
         return e("div", {
           class: "main main--loading scrollable",
           ref: t => p(this, y, t, "f")
-        }, d(this, tt, "f").call(this), e("div", {
+        }, d(this, et, "f").call(this), e("div", {
           class: "text-body-regular-m spacing-body"
         }, e("slot", {
           name: "messages"
@@ -583,22 +593,22 @@ const vt = class {
         /* #main*/
         return e("div", {
           class: "main"
-        }, [ d(this, it, "f").call(this), d(this, rt, "f").call(this) ]);
+        }, [ d(this, at, "f").call(this), d(this, ct, "f").call(this) ]);
       } else {
         return e("gx-ide-empty-state", {
           class: "empty-state scrollable",
-          stateIconSrc: gt,
+          stateIconSrc: wt,
           isAnimated: d(this, b, "f"),
           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")
+          onClick: d(this, E, "f")
         }, d(this, f, "f").messages.selectDesign));
       }
     }));
-    it.set(this, (() => e("ch-tree-view-render", {
+    at.set(this, (() => e("ch-tree-view-render", {
       part: "data-tree",
       class: "tree-view",
       id: "data-tree",
@@ -606,14 +616,15 @@ const vt = class {
       model: this.designDataTreeDataModel,
       dragDisabled: true,
       dropDisabled: true,
+      expandableButton: "action",
       expandOnClick: false,
       toggleCheckboxes: true,
       checkbox: true,
       checked: true,
-      onCheckedItemsChange: d(this, q, "f"),
-      onSelectedItemsChange: d(this, T, "f")
+      onCheckedItemsChange: d(this, A, "f"),
+      onSelectedItemsChange: d(this, z, "f")
     })));
-    at.set(this, (() => {
+    ot.set(this, (() => {
       var t;
       const s = ((t = this.designData) === null || t === void 0 ? void 0 : t.success) !== true || this.isLoading;
       return e("footer", {
@@ -625,7 +636,7 @@ const vt = class {
         id: "button-cancel",
         class: "button-secondary button-cancel",
         type: "outlined",
-        onClick: d(this, B, "f"),
+        onClick: d(this, N, "f"),
         part: "button button--cancel",
         slot: "footer-end"
       }, d(this, f, "f").footer.btnCancel), e("button", {
@@ -639,22 +650,32 @@ const vt = class {
         slot: "footer-end"
       }, d(this, f, "f").footer.btnOk)));
     }));
-    ot.set(this, (() => {
+    nt.set(this, (() => {
       var t, s;
-      const i = (this.selectedDesignType === ht || this.selectedDesignType === ct) && this.detailTreeModel.length > 0;
+      if (this.selectedDesignType === "panels") {
+        return ((s = (t = this.selectedDesignItem) === null || t === void 0 ? void 0 : t.composition) === null || s === void 0 ? void 0 : s.preview) ? e("div", {
+          part: "data-panel-composition-preview",
+          class: "panel-item scrollable"
+        }, e("img", {
+          src: this.selectedDesignItem.composition.preview,
+          alt: "Preview"
+        })) : e("gx-ide-empty-state", {
+          class: "panel-tab__empty-state",
+          stateTitle: d(this, f, "f").messages.noPanelPreviewAvailable,
+          stateIconSrc: d(this, w, "f").value === gt ? yt : xt
+        });
+      }
+      return null;
+    }));
+    rt.set(this, (() => {
+      const t = (this.selectedDesignType === dt || this.selectedDesignType === pt) && this.detailTreeModel.length > 0;
       return e("div", {
         class: {
           "panel-tab": true,
-          "panel-tab--controls-tree": i
+          "panel-tab--controls-tree": t
         },
         part: "data-panel-composition-container"
-      }, ((s = (t = this.selectedDesignItem) === null || t === void 0 ? void 0 : t.composition) === null || s === void 0 ? void 0 : s.preview) ? e("div", {
-        part: "data-panel-composition-preview",
-        class: "panel-item scrollable"
-      }, e("img", {
-        src: this.selectedDesignItem.composition.preview,
-        alt: "Preview"
-      })) : null, i ? e("ch-tree-view-render", {
+      }, d(this, nt, "f").call(this), t ? e("ch-tree-view-render", {
         part: "data-panel-composition-tree",
         class: "tree-view tree-view-panel-item scrollable",
         showLines: "last",
@@ -663,7 +684,7 @@ const vt = class {
         dropDisabled: true
       }) : null);
     }));
-    nt.set(this, (() => e("div", {
+    lt.set(this, (() => e("div", {
       part: "data-panel-composition-preview",
       class: "data-preview",
       style: {
@@ -672,15 +693,15 @@ const vt = class {
     }, e("img", {
       src: this.selectedDesignItem ? this.selectedDesignItem : undefined,
       alt: "Preview",
-      class: this.selectedDesignType === dt ? "checker-board" : undefined
+      class: this.selectedDesignType === ut ? "checker-board" : undefined
     }))));
-    lt.set(this, (t => {
+    ht.set(this, (t => {
       this.renderedTabs.clear();
       this.renderedTabs.add(t.detail.newSelectedId);
       this.reRenderCounter++;
       this.activeTabs.set(this.selectedDesignType, t.detail.newSelectedId);
     }));
-    rt.set(this, (() => e("ch-tab-render", {
+    ct.set(this, (() => e("ch-tab-render", {
       // main section
       class: {
         tab: true,
@@ -692,45 +713,45 @@ const vt = class {
       selectedId: this.activeTabs.get(this.selectedDesignType),
       overflow: "auto",
       contain: "size",
-      onSelectedItemChange: d(this, lt, "f")
+      onSelectedItemChange: d(this, ht, "f")
     }, e("div", {
-      slot: l.tokens.slot,
+      slot: r.tokens.slot,
       class: "spacing-body",
       style: {
-        display: this.renderedTabs.has(l.tokens.id) ? "" : "none"
+        display: this.renderedTabs.has(r.tokens.id) ? "" : "none"
       }
     }, e("slot", {
-      name: l.tokens.slot
+      name: r.tokens.slot
     })), e("div", {
-      slot: l.styles.slot,
+      slot: r.styles.slot,
       class: "spacing-body",
       style: {
-        display: this.renderedTabs.has(l.styles.id) ? "" : "none"
+        display: this.renderedTabs.has(r.styles.id) ? "" : "none"
       }
     }, e("slot", {
-      name: l.styles.slot
+      name: r.styles.slot
     })), e("div", {
       class: "composition-tab-slot scrollable",
-      slot: l.composition.slot,
+      slot: r.composition.slot,
       style: {
-        display: this.renderedTabs.has(l.composition.id) ? "" : "none"
+        display: this.renderedTabs.has(r.composition.id) ? "" : "none"
       }
-    }, this.selectedDesignType === dt || this.selectedDesignType === ut ? d(this, nt, "f").call(this) : d(this, ot, "f").call(this)), e("div", {
-      slot: l.layout.slot,
+    }, this.selectedDesignType === ut || this.selectedDesignType === mt ? d(this, lt, "f").call(this) : d(this, rt, "f").call(this)), e("div", {
+      slot: r.layout.slot,
       class: "spacing-body",
       style: {
-        display: this.renderedTabs.has(l.layout.id) ? "" : "none"
+        display: this.renderedTabs.has(r.layout.id) ? "" : "none"
       }
     }, e("slot", {
-      name: l.layout.slot
+      name: r.layout.slot
     })), e("div", {
-      slot: l.code.slot,
+      slot: r.code.slot,
       class: "spacing-body",
       style: {
-        display: this.renderedTabs.has(l.code.id) ? "" : "none"
+        display: this.renderedTabs.has(r.code.id) ? "" : "none"
       }
     }, e("slot", {
-      name: l.code.slot
+      name: r.code.slot
     })))));
     this.reRenderCounter = 0;
     this.stylesAsComboBoxModel = undefined;
@@ -783,7 +804,7 @@ const vt = class {
   }
   pathIsValidChanged(t) {
     if (t) {
-      d(this, j, "f").call(this);
+      d(this, D, "f").call(this);
     } else {
       // hide access token input if path is not valid
       this.requiresAccessToken = false;
@@ -791,42 +812,21 @@ 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";
+      const t = d(this, J, "f").call(this, this.designData.panels);
+      const e = d(this, w, "f").value === gt ? "objects/webpanel" : "objects/panel-for-sd";
       this.designDataTreeDataModel = [ {
         order: 0,
-        id: `parent${ft}${ht}`,
+        id: `parent${bt}${dt}`,
         leaf: false,
         caption: d(this, f, "f").tree.panels,
         startImgSrc: e,
         checkbox: true,
         checked: true,
         expanded: true,
-        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: t.name,
-              startImgSrc: e,
-              leaf: true,
-              checkbox: true,
-              checked: true
-            })))
-          };
-        }))
+        items: d(this, u, "m", $).call(this, this.designData.panels, dt, e, t)
       }, {
         order: 1,
-        id: `parent${ft}${ct}`,
+        id: `parent${bt}${pt}`,
         leaf: false,
         caption: d(this, f, "f").tree.stencils,
         startImgSrc: "objects/stencil",
@@ -834,7 +834,7 @@ const vt = class {
         checked: true,
         expanded: true,
         items: this.designData.stencils.map((t => ({
-          id: `${t.id}${ft}${ct}`,
+          id: `${t.id}${bt}${pt}`,
           class: "object tree-view-item",
           leaf: true,
           caption: t.name,
@@ -844,8 +844,7 @@ const vt = class {
         })))
       }, {
         order: 2,
-        id: `parent${ft}${dt}`,
-        parts: "category tree-view-item",
+        id: `parent${bt}${ut}`,
         leaf: false,
         caption: d(this, f, "f").tree.images,
         startImgSrc: "objects/image",
@@ -853,8 +852,7 @@ const vt = class {
         checked: true,
         expanded: true,
         items: this.designData.images.map((t => ({
-          id: `${t.id}${ft}${dt}`,
-          class: "object tree-view-item",
+          id: `${t.id}${bt}${ut}`,
           leaf: true,
           caption: t.name,
           startImgSrc: "objects/image",
@@ -863,7 +861,7 @@ const vt = class {
         })))
       }, {
         order: 3,
-        id: `parent${ft}${ut}`,
+        id: `parent${bt}${mt}`,
         leaf: false,
         caption: d(this, f, "f").tree.fonts,
         startImgSrc: "controls/font",
@@ -871,8 +869,7 @@ const vt = class {
         checked: true,
         expanded: true,
         items: this.designData.fonts.map((t => ({
-          id: `${t.id}${ft}${ut}`,
-          class: "object tree-view-item",
+          id: `${t.id}${bt}${mt}`,
           leaf: true,
           caption: t.name,
           startImgSrc: "controls/font",
@@ -881,7 +878,7 @@ const vt = class {
         })))
       }, {
         order: 4,
-        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${ft}${pt}`,
+        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${bt}${ft}`,
         leaf: true,
         caption: d(this, f, "f").tree.designSystem,
         startImgSrc: "objects/dso",
@@ -893,7 +890,7 @@ const vt = class {
   pathChanged(t) {
     var e;
     const s = ((e = this.selectedFile) === null || e === void 0 ? void 0 : e.size) > 0;
-    const i = d(this, P, "f").call(this, t) || s;
+    const i = d(this, q, "f").call(this, t) || s;
     this.pathIsValid = i;
   }
   accessTokenChanged(t) {
@@ -912,7 +909,7 @@ const vt = class {
     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, C, "f").call(this);
+    d(this, j, "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 : "";
   }
@@ -927,10 +924,10 @@ const vt = class {
     return e(s, {
       class: "widget"
     }, e("ch-theme", {
-      model: wt
+      model: Mt
     }), e("section", {
       class: "section"
-    }, d(this, Z, "f").call(this), d(this, st, "f").call(this), d(this, at, "f").call(this)));
+    }, d(this, tt, "f").call(this), d(this, it, "f").call(this), d(this, ot, "f").call(this)));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/design-import" ];
@@ -952,14 +949,30 @@ const vt = class {
 
 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, $ = 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, 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, u = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
+W = new WeakMap, _ = new WeakMap, I = new WeakMap, C = new WeakMap, j = new WeakMap, 
+D = new WeakMap, S = new WeakMap, z = new WeakMap, P = new WeakMap, q = new WeakMap, 
+A = new WeakMap, E = new WeakMap, F = new WeakMap, V = new WeakMap, G = new WeakMap, 
+L = new WeakMap, O = new WeakMap, H = 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, et = new WeakMap, it = new WeakMap, 
+at = new WeakMap, ot = new WeakMap, nt = new WeakMap, rt = new WeakMap, lt = new WeakMap, 
+ht = new WeakMap, ct = new WeakMap, u = new WeakSet, $ = function _GxIdeImportFromDesign_recursiveDesignTreeItems(t, e, s, i = undefined) {
+  return t.map(((t, a) => {
+    var o;
+    const n = ((o = t.variants) === null || o === void 0 ? void 0 : o.length) > 0;
+    return {
+      id: `${t.id}${bt}${e}`,
+      leaf: !n,
+      caption: t.name,
+      startImgSrc: s,
+      checkbox: true,
+      checked: true,
+      expanded: n,
+      selected: i === a,
+      items: n ? d(this, u, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, t.variants, e, s) : []
+    };
+  }));
+}, T = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
   const e = [];
   for (const s of t) {
     let t = {
@@ -978,29 +991,29 @@ rt = new WeakMap, u = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeI
     e.push(t);
   }
   return e;
-}, O = function _GxIdeImportFromDesign_getCodeFactory(t) {
+}, B = function _GxIdeImportFromDesign_getCodeFactory(t) {
   switch (t) {
-   case ht:
-   case ct:
-    this.textEditorFactoryCallback("code", l.code.slot, this.selectedDesignItem.code);
-    this.textEditorFactoryCallback("html", l.layout.slot, this.selectedDesignItem.layout);
+   case dt:
+   case pt:
+    this.textEditorFactoryCallback("code", r.code.slot, this.selectedDesignItem.code);
+    this.textEditorFactoryCallback("html", r.layout.slot, this.selectedDesignItem.layout);
     break;
 
-   case pt:
-    this.textEditorFactoryCallback("tokens", l.tokens.slot, this.selectedDesignItem.tokens);
-    this.textEditorFactoryCallback("styles", l.styles.slot, this.selectedDesignItem.styles);
+   case ft:
+    this.textEditorFactoryCallback("tokens", r.tokens.slot, this.selectedDesignItem.tokens);
+    this.textEditorFactoryCallback("styles", r.styles.slot, this.selectedDesignItem.styles);
     break;
   }
-}, et = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
+}, st = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
   switch (t) {
-   case ht:
-   case ct:
-    this.detailTreeModel = d(this, u, "m", D).call(this, this.selectedDesignItem.composition.controls);
+   case dt:
+   case pt:
+    this.detailTreeModel = d(this, u, "m", T).call(this, this.selectedDesignItem.composition.controls);
     break;
   }
 };
 
-vt.style = c;
+Wt.style = c;
 
-export { vt as gx_ide_design_import };
-//# sourceMappingURL=p-a1e8b380.entry.js.map
+export { Wt as gx_ide_design_import };
+//# sourceMappingURL=p-32bd11fa.entry.js.map