@genexus/genexus-ide-ui 1.0.42 → 1.0.44

package/dist/genexus-ide-ui/{p-877cd71e.entry.js → p-2b4b1dfc.entry.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,45 +39,45 @@ const l = {
   }
 };
 
-const r = {
+const h = {
   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 l = new Map([ [ "panels", h.panels ], [ "stencils", h.stencils ], [ "images", h.images ], [ "design_system", h.designSystem ], [ "fonts", h.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}.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)}';
 
@@ -94,54 +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 f, u, 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, lt, rt, ht, ct;
+var f, u, 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, R, N, Y, J, K, Q, U, X, Z, tt, et, st, it, at, ot, nt, rt, ht, lt, ct, dt, pt, ft, ut;
 
-const dt = "panels";
+const mt = "panels";
 
-const pt = "stencils";
+const bt = "stencils";
 
-const ft = "images";
+const gt = "images";
 
-const ut = "design_system";
+const kt = "design_system";
 
-const mt = "fonts";
+const wt = "fonts";
 
-const bt = "@@@";
+const vt = "@@@";
 
 // ch-checkbox
-const gt = "on";
+const yt = "on";
 
 // Icons
-const kt = a({
+const xt = a({
   category: "menus",
   name: "delete",
   colorType: "primary"
 });
 
-const wt = a({
+const Mt = a({
   category: "objects",
   name: "design"
 });
 
-const vt = a({
+const Wt = a({
   category: "controls",
   name: "file-upload"
 });
 
 // For empty states
-const yt = a({
+const _t = a({
   category: "objects",
   name: "webpanel"
 });
 
-const xt = a({
+const It = a({
   category: "objects",
   name: "panel-for-sd"
 });
 
-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 Ct = [ "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 {
+const $t = class {
   constructor(s) {
     t(this, s);
     f.add(this);
@@ -161,53 +161,82 @@ const Wt = class {
         m.set(this, new Map);
     b.set(this, false);
     g.set(this, void 0);
-    /* References needed to collect data */    k.set(this, void 0);
-    w.set(this, void 0);
+    k.set(this, {
+      all: [],
+      none: [ "-" ]
+    });
+    /* References needed to collect data */    w.set(this, void 0);
     v.set(this, void 0);
     y.set(this, void 0);
-    x.set(this, []);
+    x.set(this, void 0);
     M.set(this, []);
     W.set(this, []);
     _.set(this, []);
-    I.set(this, void 0);
+    I.set(this, []);
     C.set(this, void 0);
-    j.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, void 0);
+    j.set(this, (t => {
+      let e = 0;
+      function countItemsRecursively(t) {
+        for (const s of t) {
+          e++;
+          if (s.variants && Array.isArray(s.variants)) {
+            countItemsRecursively(s.variants);
+          }
+        }
+      }
+      countItemsRecursively(t);
+      return e;
     }));
-    D.set(this, (async () => {
+    D.set(this, (t => [ {
+      leaf: true,
+      caption: `Warning: ${t}`,
+      startImgSrc: a({
+        category: "system",
+        name: "warning",
+        colorType: "warning"
+      }),
+      order: -1,
+      checkbox: false,
+      disabled: true
+    } ]));
+    T.set(this, (() => {
+      this.activeTabs.set("panels", h.panels[0].id);
+      this.activeTabs.set("stencils", h.stencils[0].id);
+      this.activeTabs.set("images", h.images[0].id);
+      this.activeTabs.set("fonts", h.fonts[0].id);
+      this.activeTabs.set("design_system", h.designSystem[0].id);
+    }));
+    z.set(this, (async () => {
       this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
       // evaluate access token error
             if (this.accessToken.length) {
         this.accessTokenHasError = false;
       }
     }));
-    S.set(this, (async () => {
+    P.set(this, (async () => {
       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, G, "f").call(this);
+        d(this, B, "f").call(this);
       }
     }));
-    z.set(this, (async t => {
+    A.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(bt);
+        const a = i.split(vt);
         const o = a[0];
         const n = a[1];
-        const l = o && o !== "parent";
-        const r = n === "design_system";
-        if (l || r) {
-          this.tabsModel = h.get(n);
+        const r = o && o !== "parent";
+        const h = n === "design_system";
+        if (r || h) {
+          this.tabsModel = l.get(n);
           this.selectedDesignType = n;
-          const t = d(this, P, "f").call(this, i);
+          const t = d(this, E, "f").call(this, i);
           if (!t) {
-            const t = await d(this, O, "f").call(this, o, this.selectedDesignType);
+            const t = await d(this, R, "f").call(this, o, this.selectedDesignType);
             d(this, m, "f").set(i, {
               designType: this.selectedDesignType,
               designDataDetail: t
@@ -216,19 +245,19 @@ const Wt = class {
             // Item has been queried already. The item content exists already.
             this.selectedDesignType = t.designType;
             this.selectedDesignItem = t.designDataDetail;
-            d(this, f, "m", B).call(this, t.designType);
-            d(this, f, "m", st).call(this, t.designType);
+            d(this, f, "m", N).call(this, t.designType);
+            d(this, f, "m", nt).call(this, t.designType);
           }
           this.renderedTabs.clear();
           this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
         }
       }
     }));
-    P.set(this, (t => {
+    E.set(this, (t => {
       var e;
       return (e = d(this, m, "f")) === null || e === void 0 ? void 0 : e.get(t);
     }));
-    q.set(this, (t => {
+    F.set(this, (t => {
       const e = /^(\/|\.\/|(\w:))[^:*?"<>|]*\.(sketch|gxsketch)$/i;
  // Match valid file paths
             const s = /^https?:\/\/(www\.)?figma\.com/;
@@ -238,65 +267,65 @@ const Wt = class {
             const a = e.test(t) || s.test(t) || i.test(t);
       return a;
     }));
-    A.set(this, (t => {
+    V.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${bt}`)) {
-          s = t.item.id.split(bt)[1];
+        if (t.item.id.startsWith(`parent${vt}`)) {
+          s = t.item.id.split(vt)[1];
           i[s] = [];
         } else if (t.item.checked && s) {
-          const e = t.item.id.split(bt)[1];
+          const e = t.item.id.split(vt)[1];
           if (e === s) {
-            const e = t.item.id.split(bt)[0];
+            const e = t.item.id.split(vt)[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, _, a, "f");
+            p(this, M, o, "f");
+      p(this, W, n, "f");
+      p(this, _, r, "f");
+      p(this, I, a, "f");
     }));
-    E.set(this, (() => {
-      d(this, I, "f").click();
+    G.set(this, (() => {
+      d(this, C, "f").click();
     }));
-    F.set(this, (t => {
+    L.set(this, (t => {
       this.styleValue = t.target.value;
       if (this.reactiveSettings.style && this.styleValue !== this.lastLoadCallbackSettingValues.style) {
-        d(this, G, "f").call(this);
+        d(this, B, "f").call(this);
       }
     }));
-    V.set(this, (t => {
+    O.set(this, (t => {
       if (this.reactiveSettings.module && this.defaultModule.id !== t.detail.id && this.pathIsValid) {
-        d(this, G, "f").call(this);
+        d(this, B, "f").call(this);
       }
     }));
-    G.set(this, (async () => {
+    B.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 i = d(this, w, "f") ? d(this, w, "f").value : undefined;
       const a = this.styleValue;
-      const o = d(this, w, "f").value === gt;
-      const n = await this.loadCallback(s, a, o, i, d(this, L, "f"));
+      const o = d(this, v, "f").value === yt;
+      const n = await this.loadCallback(s, a, o, i, d(this, H, "f"));
       // clear
-            p(this, x, [], "f");
-      p(this, M, [], "f");
-      p(this, _, [], "f");
+            p(this, M, [], "f");
+      p(this, W, [], "f");
+      p(this, I, [], "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) {
@@ -306,32 +335,32 @@ const Wt = class {
         this.lastLoadCallbackSettingValues.style = a;
       }
       if (this.reactiveSettings.module) {
-        this.lastLoadCallbackSettingValues.moduleId = d(this, v, "f").value.id;
+        this.lastLoadCallbackSettingValues.moduleId = d(this, y, "f").value.id;
       }
       if (this.reactiveSettings.importAsWebPanels) {
         this.lastLoadCallbackSettingValues.importAsWebPanels = o;
       }
     }));
-    L.set(this, (t => {
+    H.set(this, (t => {
       this.messages = [ ...this.messages, t ];
     }));
-    O.set(this, (async (t, e) => {
+    R.set(this, (async (t, e) => {
       let s;
       switch (e) {
-       case ft:
+       case gt:
         s = this.loadImageCallback;
         break;
 
-       case ut:
+       case kt:
         s = this.loadDesignSystemCallback;
         break;
 
-       case mt:
+       case wt:
         s = this.loadFontCallback;
         break;
 
-       case dt:
-       case pt:
+       case mt:
+       case bt:
         s = this.loadPanelDataCallback;
         break;
       }
@@ -339,46 +368,61 @@ const Wt = class {
       await s(t).then((t => {
         this.selectedDesignType = e;
         this.selectedDesignItem = t;
-        d(this, f, "m", B).call(this, e);
-        d(this, f, "m", st).call(this, e);
+        d(this, f, "m", N).call(this, e);
+        d(this, f, "m", nt).call(this, e);
         i = t;
       }));
       return i;
     }));
-    H.set(this, (() => {
+    Y.set(this, ((t, e) => {
+      let s = e;
+      const i = d(this, j, "f").call(this, t);
+      const a = e.length;
+      if (i === a) {
+        s = d(this, k, "f").all;
+      } else if (a === 0) {
+        s = d(this, k, "f").none;
+      }
+      return s;
+    }));
+    J.set(this, (() => {
       var t, e;
+      const s = d(this, Y, "f").call(this, this.designData.panels, d(this, M, "f"));
+      const i = d(this, Y, "f").call(this, this.designData.stencils, d(this, W, "f"));
+      const a = d(this, Y, "f").call(this, this.designData.images, d(this, _, "f"));
+      const o = d(this, Y, "f").call(this, this.designData.fonts, d(this, I, "f"));
       this.confirmCallback({
-        panels: d(this, x, "f"),
-        stencils: d(this, M, "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,
+        panels: s,
+        stencils: i,
+        images: a,
+        fonts: o,
+        moduleId: (e = (t = d(this, y, "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 === gt
+        importAsWebPanels: d(this, v, "f").value === yt
       });
     }));
-    N.set(this, (() => {
+    K.set(this, (() => {
       this.cancelCallback();
       this.isLoading = false;
     }));
-    Y.set(this, (t => {
-      this.fitImages = t.detail === gt;
+    Q.set(this, (t => {
+      this.fitImages = t.detail === yt;
     }));
-    J.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
-    K.set(this, (() => {
+    U.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
+    X.set(this, (() => {
       const t = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
       if (t) {
-        d(this, G, "f").call(this);
+        d(this, B, "f").call(this);
       }
     }));
-    Q.set(this, (() => {
+    Z.set(this, (() => {
       this.selectedFile = null;
       this.path = "";
       this.accessToken = "";
       this.selectedFile = null;
-      d(this, I, "f").value = null;
+      d(this, C, "f").value = null;
     }));
-    R.set(this, (t => {
+    tt.set(this, (t => {
       var e;
       const s = t.target;
       if (((e = s.files) === null || e === void 0 ? void 0 : e.length) > 0) {
@@ -387,40 +431,40 @@ const Wt = class {
         // we know the path is valid because the extensions are restricted by "extensions" Prop.
             }
     }));
-    U.set(this, (t => {
+    et.set(this, (t => {
       const e = t.target;
       e.type = "text";
  // display token on focus
         }));
-    X.set(this, (t => {
+    st.set(this, (t => {
       const e = t.target;
       e.type = "password";
  // hide token on blur
             this.accessTokenChanged(e.value);
     }));
-    Z.set(this, (async t => {
+    it.set(this, (async t => {
       this.path = t.detail;
-      d(this, D, "f").call(this);
+      d(this, z, "f").call(this);
       this.selectedFile = null;
       if (!this.path.length) {
         this.designData = null;
       }
     }));
-    tt.set(this, (() => {
+    at.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;
-      const r = this.isLoading || !this.designDataTreeDataModel.length || this.selectedDesignType === "stencils" || this.selectedDesignType === "design_system";
-      let h;
+      const r = !this.pathIsValid && this.path.length > 0;
+      const h = this.isLoading || !this.designDataTreeDataModel.length || this.selectedDesignType === "stencils" || this.selectedDesignType === "design_system";
+      let l;
       if (this.pathIsValid && this.path === this.lastLoadCallbackSettingValues.path) {
-        h = d(this, u, "f").header.btnReload;
+        l = d(this, u, "f").header.btnReload;
       } else if (this.pathIsValid) {
-        h = d(this, u, "f").header.btnLoad;
+        l = d(this, u, "f").header.btnLoad;
       } else {
-        h = d(this, u, "f").header.selectFileButton;
+        l = d(this, u, "f").header.selectFileButton;
       }
       return e("header", {
         class: {
@@ -449,15 +493,15 @@ const Wt = class {
         part: "option-path",
         type: "text",
         value: this.path,
-        onInput: d(this, Z, "f"),
-        onBlur: this.reactiveSettings.path && d(this, S, "f"),
+        onInput: d(this, it, "f"),
+        onBlur: this.reactiveSettings.path && d(this, P, "f"),
         disabled: this.isLoading,
         placeholder: `${d(this, u, "f").header.pathPlaceholder}`,
-        startImgSrc: vt,
-        ref: t => p(this, C, t, "f")
-      }), l && e("ch-tooltip", {
+        startImgSrc: Wt,
+        ref: t => p(this, $, t, "f")
+      }), r && 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
@@ -465,8 +509,8 @@ const Wt = class {
         hidden: true,
         type: "file",
         accept: d(this, g, "f"),
-        onChange: d(this, R, "f"),
-        ref: t => p(this, I, t, "f")
+        onChange: d(this, tt, "f"),
+        ref: t => p(this, C, t, "f")
       }), e("div", {
         class: "buttons-spacer"
       }, e("button", {
@@ -476,16 +520,16 @@ const Wt = class {
         class: "button-tertiary button-icon-only",
         part: "reset-all-button",
         disabled: s,
-        onClick: !s && d(this, Q, "f")
+        onClick: !s && d(this, Z, "f")
       }, e("ch-image", {
         class: "icon-md",
-        src: kt,
+        src: xt,
         disabled: s
       })), e("button", {
         // load file button
         id: "button-load",
         type: "primary-text-only",
-        onClick: this.pathIsValid ? d(this, G, "f") : d(this, E, "f"),
+        onClick: this.pathIsValid ? d(this, B, "f") : d(this, G, "f"),
         part: "button button--load",
         disabled: t,
         class: {
@@ -493,7 +537,7 @@ const Wt = class {
           "button-secondary": !this.pathIsValid,
           "select-load-button": true
         }
-      }, h))), this.requiresAccessToken && [ e("label", {
+      }, l))), this.requiresAccessToken && [ e("label", {
         // access token label
         class: "label access-token-label"
       }, d(this, u, "f").header.accessToken), e("div", null, e("ch-edit", {
@@ -502,17 +546,17 @@ const Wt = class {
           "access-token": true,
           "input-error": this.accessTokenHasError
         },
-        ref: t => p(this, k, t, "f"),
+        ref: t => p(this, w, t, "f"),
         value: this.accessToken,
         placeholder: d(this, u, "f").header.accessTokenPlaceholder,
-        onFocus: d(this, U, "f"),
-        onBlur: d(this, X, "f"),
+        onFocus: d(this, et, "f"),
+        onBlur: d(this, st, "f"),
         part: "access-token",
         disabled: this.isLoading,
         type: "password"
       }), this.accessTokenHasError && e("ch-tooltip", {
         class: "tooltip",
-        actionElement: d(this, k, "f"),
+        actionElement: d(this, w, "f"),
         blockAlign: o.tooltipSettings.blockAlign,
         inlineAlign: o.tooltipSettings.inlineAlign,
         delay: o.tooltipSettings.delay
@@ -528,7 +572,7 @@ const Wt = class {
         disabled: i,
         model: this.stylesAsComboBoxModel,
         value: this.styleValue,
-        onInput: d(this, F, "f"),
+        onInput: d(this, L, "f"),
         part: "option-style",
         class: "combo-box style"
       }), e("label", {
@@ -540,8 +584,8 @@ const Wt = class {
         value: this.defaultModule,
         defaultValue: this.defaultModule,
         selectEntityCallback: this.selectModuleCallback,
-        ref: t => p(this, v, t, "f"),
-        onValueChanged: this.reactiveSettings.module && d(this, V, "f"),
+        ref: t => p(this, y, t, "f"),
+        onValueChanged: this.reactiveSettings.module && d(this, O, "f"),
         disabled: a,
         class: "module"
       }), e("div", {
@@ -549,13 +593,13 @@ const Wt = class {
         class: "checkboxes-options field-group"
       }, e("ch-checkbox", {
         caption: d(this, u, "f").header.importAs,
-        checkedValue: gt,
+        checkedValue: yt,
         class: "checkbox import-as-web-panels",
-        ref: t => p(this, w, t, "f"),
-        value: this.importAsWebPanels ? gt : undefined,
+        ref: t => p(this, v, t, "f"),
+        value: this.importAsWebPanels ? yt : undefined,
         part: "option-import-as-web-panels",
         disabled: this.isLoading,
-        onInput: d(this, K, "f")
+        onInput: d(this, X, "f")
       }), e("div", {
         class: {
           "field-group-inline": true,
@@ -564,27 +608,27 @@ const Wt = class {
       }, e("ch-checkbox", {
         // fit images
         caption: d(this, u, "f").header.fitImages,
-        checkedValue: gt,
+        checkedValue: yt,
         class: "checkbox",
         part: "fit-images-checkbox",
-        disabled: r,
-        onInput: d(this, Y, "f")
+        disabled: h,
+        onInput: d(this, Q, "f")
       }))));
     }));
-    et.set(this, (() => this.messages.length > 0 && this.messages.map((t => e("p", {
+    ot.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)))));
-    it.set(this, (() => {
+    rt.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, et, "f").call(this), e("div", {
+          ref: t => p(this, x, t, "f")
+        }, d(this, ot, "f").call(this), e("div", {
           class: "text-body-regular-m spacing-body"
         }, e("slot", {
           name: "messages"
@@ -593,22 +637,22 @@ const Wt = class {
         /* #main*/
         return e("div", {
           class: "main"
-        }, [ d(this, at, "f").call(this), d(this, ct, "f").call(this) ]);
+        }, [ d(this, ht, "f").call(this), d(this, ut, "f").call(this) ]);
       } else {
         return e("gx-ide-empty-state", {
           class: "empty-state scrollable",
-          stateIconSrc: wt,
+          stateIconSrc: Mt,
           isAnimated: d(this, b, "f"),
           stateTitle: d(this, u, "f").messages.noDesignSelected,
           key: "no-objects-empty-state"
         }, e("button", {
           // begin by selecting a file
           class: "button-tertiary empty-state-button",
-          onClick: d(this, E, "f")
+          onClick: d(this, G, "f")
         }, d(this, u, "f").messages.selectDesign));
       }
     }));
-    at.set(this, (() => e("ch-tree-view-render", {
+    ht.set(this, (() => e("ch-tree-view-render", {
       part: "data-tree",
       class: "tree-view",
       id: "data-tree",
@@ -621,10 +665,10 @@ const Wt = class {
       toggleCheckboxes: true,
       checkbox: true,
       checked: true,
-      onCheckedItemsChange: d(this, A, "f"),
-      onSelectedItemsChange: d(this, z, "f")
+      onCheckedItemsChange: d(this, V, "f"),
+      onSelectedItemsChange: d(this, A, "f")
     })));
-    ot.set(this, (() => {
+    lt.set(this, (() => {
       var t;
       const s = ((t = this.designData) === null || t === void 0 ? void 0 : t.success) !== true || this.isLoading;
       return e("footer", {
@@ -636,7 +680,7 @@ const Wt = class {
         id: "button-cancel",
         class: "button-secondary button-cancel",
         type: "outlined",
-        onClick: d(this, N, "f"),
+        onClick: d(this, K, "f"),
         part: "button button--cancel",
         slot: "footer-end"
       }, d(this, u, "f").footer.btnCancel), e("button", {
@@ -644,13 +688,13 @@ const Wt = class {
         id: "button-ok",
         class: "button-primary button-ok",
         type: "primary-text-only",
-        onClick: !s && d(this, H, "f"),
+        onClick: !s && d(this, J, "f"),
         part: "button button--ok",
         disabled: s,
         slot: "footer-end"
       }, d(this, u, "f").footer.btnOk)));
     }));
-    nt.set(this, (() => {
+    ct.set(this, (() => {
       var t, s;
       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", {
@@ -662,20 +706,20 @@ const Wt = class {
         })) : e("gx-ide-empty-state", {
           class: "panel-tab__empty-state",
           stateTitle: d(this, u, "f").messages.noPanelPreviewAvailable,
-          stateIconSrc: d(this, w, "f").value === gt ? yt : xt
+          stateIconSrc: d(this, v, "f").value === yt ? _t : It
         });
       }
       return null;
     }));
-    lt.set(this, (() => {
-      const t = (this.selectedDesignType === dt || this.selectedDesignType === pt) && this.detailTreeModel.length > 0;
+    dt.set(this, (() => {
+      const t = (this.selectedDesignType === mt || this.selectedDesignType === bt) && this.detailTreeModel.length > 0;
       return e("div", {
         class: {
           "panel-tab": true,
           "panel-tab--controls-tree": t
         },
         part: "data-panel-composition-container"
-      }, d(this, nt, "f").call(this), t ? e("ch-tree-view-render", {
+      }, d(this, ct, "f").call(this), t ? e("ch-tree-view-render", {
         part: "data-panel-composition-tree",
         class: "tree-view tree-view-panel-item scrollable",
         showLines: "last",
@@ -684,7 +728,7 @@ const Wt = class {
         dropDisabled: true
       }) : null);
     }));
-    rt.set(this, (() => e("div", {
+    pt.set(this, (() => e("div", {
       part: "data-panel-composition-preview",
       class: "data-preview",
       style: {
@@ -693,15 +737,15 @@ const Wt = class {
     }, e("img", {
       src: this.selectedDesignItem ? this.selectedDesignItem : undefined,
       alt: "Preview",
-      class: this.selectedDesignType === ft ? "checker-board" : undefined
+      class: this.selectedDesignType === gt ? "checker-board" : undefined
     }))));
-    ht.set(this, (t => {
+    ft.set(this, (t => {
       this.renderedTabs.clear();
       this.renderedTabs.add(t.detail.newSelectedId);
       this.reRenderCounter++;
       this.activeTabs.set(this.selectedDesignType, t.detail.newSelectedId);
     }));
-    ct.set(this, (() => e("ch-tab-render", {
+    ut.set(this, (() => e("ch-tab-render", {
       // main section
       class: {
         tab: true,
@@ -713,45 +757,45 @@ const Wt = class {
       selectedId: this.activeTabs.get(this.selectedDesignType),
       overflow: "auto",
       contain: "size",
-      onSelectedItemChange: d(this, ht, "f")
+      onSelectedItemChange: d(this, ft, "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 === ft || this.selectedDesignType === mt ? d(this, rt, "f").call(this) : d(this, lt, "f").call(this)), e("div", {
-      slot: l.layout.slot,
+    }, this.selectedDesignType === gt || this.selectedDesignType === wt ? d(this, pt, "f").call(this) : d(this, dt, "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;
@@ -804,7 +848,7 @@ const Wt = class {
   }
   pathIsValidChanged(t) {
     if (t) {
-      d(this, D, "f").call(this);
+      d(this, z, "f").call(this);
     } else {
       // hide access token input if path is not valid
       this.requiresAccessToken = false;
@@ -813,24 +857,24 @@ const Wt = class {
   designDataChanged(t) {
     if (t) {
       // panels
-      const t = d(this, J, "f").call(this, this.designData.panels);
-      const e = d(this, w, "f").value === gt;
+      const t = d(this, U, "f").call(this, this.designData.panels);
+      const e = d(this, v, "f").value === yt;
       const s = e ? "objects/webpanel" : "objects/panel-for-sd";
       // images
             const i = "objects/image";
       this.designDataTreeDataModel = [ {
         order: 0,
-        id: `parent${bt}${dt}`,
+        id: `parent${vt}${mt}`,
         leaf: false,
         caption: e ? d(this, u, "f").tree.webPanels : d(this, u, "f").tree.panels,
         startImgSrc: s,
         checkbox: true,
         checked: true,
         expanded: true,
-        items: d(this, f, "m", $).call(this, this.designData.panels, dt, s, t)
+        items: d(this, f, "m", S).call(this, this.designData.panels, mt, s, t)
       }, {
         order: 1,
-        id: `parent${bt}${pt}`,
+        id: `parent${vt}${bt}`,
         leaf: false,
         caption: d(this, u, "f").tree.stencils,
         startImgSrc: "objects/stencil",
@@ -838,27 +882,29 @@ const Wt = class {
         checked: true,
         expanded: true,
         items: this.designData.stencils.map((t => ({
-          id: `${t.id}${bt}${pt}`,
+          id: `${t.id}${vt}${bt}`,
           class: "object tree-view-item",
-          leaf: true,
+          leaf: !t.warning,
           caption: t.name,
           startImgSrc: "objects/stencil",
           checkbox: true,
-          checked: true
+          checked: true,
+          expanded: true,
+          items: t.warning && d(this, D, "f").call(this, t.warning)
         })))
       }, {
         order: 2,
-        id: `parent${bt}${ft}`,
+        id: `parent${vt}${gt}`,
         leaf: false,
         caption: d(this, u, "f").tree.images,
         startImgSrc: i,
         checkbox: true,
         checked: true,
         expanded: true,
-        items: d(this, f, "m", $).call(this, this.designData.images, ft, i)
+        items: d(this, f, "m", S).call(this, this.designData.images, gt, i)
       }, {
         order: 3,
-        id: `parent${bt}${mt}`,
+        id: `parent${vt}${wt}`,
         leaf: false,
         caption: d(this, u, "f").tree.fonts,
         startImgSrc: "controls/font",
@@ -866,16 +912,18 @@ const Wt = class {
         checked: true,
         expanded: true,
         items: this.designData.fonts.map((t => ({
-          id: `${t.id}${bt}${mt}`,
-          leaf: true,
+          id: `${t.id}${vt}${wt}`,
+          leaf: !t.warning,
           caption: t.name,
           startImgSrc: "controls/font",
           checkbox: true,
-          checked: true
+          checked: true,
+          expanded: true,
+          items: t.warning && d(this, D, "f").call(this, t.warning)
         })))
       }, {
         order: 4,
-        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${bt}${ut}`,
+        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${vt}${kt}`,
         leaf: true,
         caption: d(this, u, "f").tree.designSystem,
         startImgSrc: "objects/dso",
@@ -887,7 +935,7 @@ const Wt = class {
   pathChanged(t) {
     var e;
     const s = ((e = this.selectedFile) === null || e === void 0 ? void 0 : e.size) > 0;
-    const i = d(this, q, "f").call(this, t) || s;
+    const i = d(this, F, "f").call(this, t) || s;
     this.pathIsValid = i;
   }
   accessTokenChanged(t) {
@@ -906,14 +954,14 @@ const Wt = class {
     p(this, u, await n.getComponentStrings(this.el), "f");
     p(this, g, this.extensions.map((t => `.${t}`)).join(", "), "f");
     this.stylesChanged(this.styles);
-    d(this, j, "f").call(this);
+    d(this, T, "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 : "";
   }
   watchMessagesHandler(t, e) {
     if (t !== e) {
-      if (d(this, y, "f")) {
-        d(this, y, "f").scrollTop = d(this, y, "f").scrollHeight;
+      if (d(this, x, "f")) {
+        d(this, x, "f").scrollTop = d(this, x, "f").scrollHeight;
       }
     }
   }
@@ -921,10 +969,10 @@ const Wt = class {
     return e(s, {
       class: "widget"
     }, e("ch-theme", {
-      model: Mt
+      model: Ct
     }), e("section", {
       class: "section"
-    }, d(this, tt, "f").call(this), d(this, it, "f").call(this), d(this, ot, "f").call(this)));
+    }, d(this, at, "f").call(this), d(this, rt, "f").call(this), d(this, lt, "f").call(this)));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/design-import" ];
@@ -946,30 +994,35 @@ const Wt = class {
 
 u = 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, _ = 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, 
+W = new WeakMap, _ = new WeakMap, I = new WeakMap, C = new WeakMap, $ = new WeakMap, 
+j = new WeakMap, D = new WeakMap, T = new WeakMap, z = new WeakMap, P = 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, lt = new WeakMap, rt = new WeakMap, 
-ht = new WeakMap, ct = new WeakMap, f = new WeakSet, $ = function _GxIdeImportFromDesign_recursiveDesignTreeItems(t, e, s, i = undefined) {
+L = new WeakMap, O = new WeakMap, B = new WeakMap, H = new WeakMap, R = new WeakMap, 
+Y = new WeakMap, J = new WeakMap, K = new WeakMap, Q = new WeakMap, U = new WeakMap, 
+X = new WeakMap, Z = new WeakMap, tt = new WeakMap, et = new WeakMap, st = new WeakMap, 
+it = new WeakMap, at = new WeakMap, ot = new WeakMap, rt = new WeakMap, ht = new WeakMap, 
+lt = new WeakMap, ct = new WeakMap, dt = new WeakMap, pt = new WeakMap, ft = new WeakMap, 
+ut = new WeakMap, f = new WeakSet, S = 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;
+    const n = `${t.id}${vt}${e}`;
+    const r = ((o = t.variants) === null || o === void 0 ? void 0 : o.length) > 0;
+    const h = t.warning ? d(this, D, "f").call(this, t.warning) : [];
+    const l = !r && !t.warning;
     return {
-      id: `${t.id}${bt}${e}`,
-      leaf: !n,
+      id: n,
+      leaf: l,
       caption: t.name,
       startImgSrc: s,
       checkbox: true,
       checked: true,
-      expanded: n,
+      expanded: !l,
       selected: i === a,
-      items: n ? d(this, f, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, t.variants, e, s) : []
+      order: a,
+      items: [ ...h, ...r ? d(this, f, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, t.variants, e, s) : [] ]
     };
   }));
-}, T = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
+}, q = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
   const e = [];
   for (const s of t) {
     let t = {
@@ -988,29 +1041,29 @@ ht = new WeakMap, ct = new WeakMap, f = new WeakSet, $ = function _GxIdeImportFr
     e.push(t);
   }
   return e;
-}, B = function _GxIdeImportFromDesign_getCodeFactory(t) {
+}, N = function _GxIdeImportFromDesign_getCodeFactory(t) {
   switch (t) {
-   case dt:
-   case pt:
-    this.textEditorFactoryCallback("code", l.code.slot, this.selectedDesignItem.code);
-    this.textEditorFactoryCallback("html", l.layout.slot, this.selectedDesignItem.layout);
+   case mt:
+   case bt:
+    this.textEditorFactoryCallback("code", r.code.slot, this.selectedDesignItem.code);
+    this.textEditorFactoryCallback("html", r.layout.slot, this.selectedDesignItem.layout);
     break;
 
-   case ut:
-    this.textEditorFactoryCallback("tokens", l.tokens.slot, this.selectedDesignItem.tokens);
-    this.textEditorFactoryCallback("styles", l.styles.slot, this.selectedDesignItem.styles);
+   case kt:
+    this.textEditorFactoryCallback("tokens", r.tokens.slot, this.selectedDesignItem.tokens);
+    this.textEditorFactoryCallback("styles", r.styles.slot, this.selectedDesignItem.styles);
     break;
   }
-}, st = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
+}, nt = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
   switch (t) {
-   case dt:
-   case pt:
-    this.detailTreeModel = d(this, f, "m", T).call(this, this.selectedDesignItem.composition.controls);
+   case mt:
+   case bt:
+    this.detailTreeModel = d(this, f, "m", q).call(this, this.selectedDesignItem.composition.controls);
     break;
   }
 };
 
-Wt.style = c;
+$t.style = c;
 
-export { Wt as gx_ide_design_import };
-//# sourceMappingURL=p-877cd71e.entry.js.map
+export { $t as gx_ide_design_import };
+//# sourceMappingURL=p-2b4b1dfc.entry.js.map