@genexus/genexus-ide-ui 1.0.35 → 1.0.37

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

@@ -81,7 +81,7 @@ const DESIGN_TYPE_TO_TAB_MODEL_MAP = new Map([
     ["fonts", TAB_MODEL.fonts]
 ]);
 
-const designImportCss = "@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 designImportCss = "@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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -99,7 +99,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeImportFromDesign_instances, _GxIdeImportFromDesign_componentLocale, _GxIdeImportFromDesign_loadedItems, _GxIdeImportFromDesign_emptyStateAnimated, _GxIdeImportFromDesign_formattedExtensions, _GxIdeImportFromDesign_accessTokenEl, _GxIdeImportFromDesign_importAsWebPanelsEl, _GxIdeImportFromDesign_moduleEl, _GxIdeImportFromDesign_messagesList, _GxIdeImportFromDesign_panelsSelected, _GxIdeImportFromDesign_stencilsSelected, _GxIdeImportFromDesign_imagesSelected, _GxIdeImportFromDesign_fontsSelected, _GxIdeImportFromDesign_fileInputHiddenEl, _GxIdeImportFromDesign_pathEl, _GxIdeImportFromDesign_initializeActiveTabs, _GxIdeImportFromDesign_evaluateAccessTokenRender, _GxIdeImportFromDesign_pathURLBlurHandler, _GxIdeImportFromDesign_loadTreeItemCompositionModel, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, _GxIdeImportFromDesign_getLoadedItem, _GxIdeImportFromDesign_validatePath, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, _GxIdeImportFromDesign_selectFileHandler, _GxIdeImportFromDesign_styleComboBoxInputHandler, _GxIdeImportFromDesign_moduleInputHandler, _GxIdeImportFromDesign_loadData, _GxIdeImportFromDesign_messageCallback, _GxIdeImportFromDesign_getDesignDataDetail, _GxIdeImportFromDesign_getCodeFactory, _GxIdeImportFromDesign_confirm, _GxIdeImportFromDesign_cancel, _GxIdeImportFromDesign_fitImagesHandler, _GxIdeImportFromDesign_getPanelsSelectedItem, _GxIdeImportFromDesign_importAsWebPanelsChangedHandler, _GxIdeImportFromDesign_removeFileSelection, _GxIdeImportFromDesign_selectFileInputChangedHandler, _GxIdeImportFromDesign_accessFocusHandler, _GxIdeImportFromDesign_accessBlurHandler, _GxIdeImportFromDesign_pathUrlInputHandler, _GxIdeImportFromDesign_renderHeader, _GxIdeImportFromDesign_renderMessages, _GxIdeImportFromDesign_renderDetailDataTree, _GxIdeImportFromDesign_renderMain, _GxIdeImportFromDesign_renderDesignTree, _GxIdeImportFromDesign_renderFooter, _GxIdeImportFromDesign_renderPanelTab, _GxIdeImportFromDesign_renderImageTab, _GxIdeImportFromDesign_tabSelectionChangedHandler, _GxIdeImportFromDesign_renderDesignTabsCh;
+var _GxIdeImportFromDesign_instances, _GxIdeImportFromDesign_componentLocale, _GxIdeImportFromDesign_loadedItems, _GxIdeImportFromDesign_emptyStateAnimated, _GxIdeImportFromDesign_formattedExtensions, _GxIdeImportFromDesign_accessTokenEl, _GxIdeImportFromDesign_importAsWebPanelsEl, _GxIdeImportFromDesign_moduleEl, _GxIdeImportFromDesign_messagesList, _GxIdeImportFromDesign_panelsSelected, _GxIdeImportFromDesign_stencilsSelected, _GxIdeImportFromDesign_imagesSelected, _GxIdeImportFromDesign_fontsSelected, _GxIdeImportFromDesign_fileInputHiddenEl, _GxIdeImportFromDesign_pathEl, _GxIdeImportFromDesign_recursiveDesignTreeItems, _GxIdeImportFromDesign_initializeActiveTabs, _GxIdeImportFromDesign_evaluateAccessTokenRender, _GxIdeImportFromDesign_pathURLBlurHandler, _GxIdeImportFromDesign_loadTreeItemCompositionModel, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, _GxIdeImportFromDesign_getLoadedItem, _GxIdeImportFromDesign_validatePath, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, _GxIdeImportFromDesign_selectFileHandler, _GxIdeImportFromDesign_styleComboBoxInputHandler, _GxIdeImportFromDesign_moduleInputHandler, _GxIdeImportFromDesign_loadData, _GxIdeImportFromDesign_messageCallback, _GxIdeImportFromDesign_getDesignDataDetail, _GxIdeImportFromDesign_getCodeFactory, _GxIdeImportFromDesign_confirm, _GxIdeImportFromDesign_cancel, _GxIdeImportFromDesign_fitImagesHandler, _GxIdeImportFromDesign_getPanelsSelectedItem, _GxIdeImportFromDesign_importAsWebPanelsChangedHandler, _GxIdeImportFromDesign_removeFileSelection, _GxIdeImportFromDesign_selectFileInputChangedHandler, _GxIdeImportFromDesign_accessFocusHandler, _GxIdeImportFromDesign_accessBlurHandler, _GxIdeImportFromDesign_pathUrlInputHandler, _GxIdeImportFromDesign_renderHeader, _GxIdeImportFromDesign_renderMessages, _GxIdeImportFromDesign_renderDetailDataTree, _GxIdeImportFromDesign_renderMain, _GxIdeImportFromDesign_renderDesignTree, _GxIdeImportFromDesign_renderFooter, _GxIdeImportFromDesign_evaluatePanelPreview, _GxIdeImportFromDesign_renderPanelTab, _GxIdeImportFromDesign_renderImageTab, _GxIdeImportFromDesign_tabSelectionChangedHandler, _GxIdeImportFromDesign_renderDesignTabsCh;
 const DESIGN_DATA_TYPE_PANELS = "panels";
 const DESIGN_DATA_TYPE_STENCILS = "stencils";
 const DESIGN_DATA_TYPE_IMAGES = "images";
@@ -122,6 +122,15 @@ const FILE_UPLOAD = getIconPath({
     category: "controls",
     name: "file-upload"
 });
+// For empty states
+const WEBPANEL_ICON = getIconPath({
+    category: "objects",
+    name: "webpanel"
+});
+const PANEL_FOR_SD_ICON = getIconPath({
+    category: "objects",
+    name: "panel-for-sd"
+});
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/form",
@@ -170,7 +179,6 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
         _GxIdeImportFromDesign_fontsSelected.set(this, []);
         _GxIdeImportFromDesign_fileInputHiddenEl.set(this, void 0);
         _GxIdeImportFromDesign_pathEl.set(this, void 0);
-        // 9.LOCAL METHODS //
         _GxIdeImportFromDesign_initializeActiveTabs.set(this, () => {
             this.activeTabs.set("panels", TAB_MODEL.panels[0].id);
             this.activeTabs.set("stencils", TAB_MODEL.stencils[0].id);
@@ -413,7 +421,6 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
                 this.designData = null;
             }
         });
-        // 9.LOCAL METHODS -> RENDERS //
         _GxIdeImportFromDesign_renderHeader.set(this, () => {
             const primaryButtonDisabled = this.isLoading ||
                 (this.pathIsValid &&
@@ -424,6 +431,10 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             const moduleDisabled = this.isLoading;
             const pathWithErrorStyles = !this.pathIsValid && this.path.length > 0;
             const displayPathErrorTooltip = !this.pathIsValid && this.path.length > 0;
+            const fitImagesIsDisabled = this.isLoading ||
+                !this.designDataTreeDataModel.length ||
+                this.selectedDesignType === "stencils" ||
+                this.selectedDesignType === "design_system";
             let primaryButtonCaption;
             if (this.pathIsValid &&
                 this.path === this.lastLoadCallbackSettingValues.path) {
@@ -492,7 +503,7 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
                     "checkboxes-options__col-right": true
                 } }, h("ch-checkbox", {
                 // fit images
-                caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.fitImages, checkedValue: CHECKED_VALUE, class: "checkbox", part: "fit-images-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_fitImagesHandler, "f")
+                caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.fitImages, checkedValue: CHECKED_VALUE, class: "checkbox", part: "fit-images-checkbox", disabled: fitImagesIsDisabled, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_fitImagesHandler, "f")
             })))));
         });
         _GxIdeImportFromDesign_renderMessages.set(this, () => {
@@ -521,7 +532,7 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             }
         });
         _GxIdeImportFromDesign_renderDesignTree.set(this, () => {
-            return (h("ch-tree-view-render", { part: "data-tree", class: "tree-view", id: "data-tree", showLines: "last", model: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, expandOnClick: false, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
+            return (h("ch-tree-view-render", { part: "data-tree", class: "tree-view", id: "data-tree", showLines: "last", model: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, expandableButton: "action", expandOnClick: false, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
         });
         _GxIdeImportFromDesign_renderFooter.set(this, () => {
             var _a;
@@ -534,15 +545,23 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
                 id: "button-ok", class: "button-primary button-ok", type: "primary-text-only", onClick: !buttonOkDisabled && __classPrivateFieldGet(this, _GxIdeImportFromDesign_confirm, "f"), part: "button button--ok", disabled: buttonOkDisabled, slot: "footer-end"
             }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").footer.btnOk))));
         });
-        _GxIdeImportFromDesign_renderPanelTab.set(this, () => {
+        _GxIdeImportFromDesign_evaluatePanelPreview.set(this, () => {
             var _a, _b;
+            if (this.selectedDesignType === "panels") {
+                return ((_b = (_a = this.selectedDesignItem) === null || _a === void 0 ? void 0 : _a.composition) === null || _b === void 0 ? void 0 : _b.preview) ? (h("div", { part: "data-panel-composition-preview", class: "panel-item scrollable" }, h("img", { src: this.selectedDesignItem.composition.preview, alt: "Preview" }))) : (h("gx-ide-empty-state", { class: "panel-tab__empty-state", stateTitle: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.noPanelPreviewAvailable, stateIconSrc: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
+                        ? WEBPANEL_ICON
+                        : PANEL_FOR_SD_ICON }));
+            }
+            return null;
+        });
+        _GxIdeImportFromDesign_renderPanelTab.set(this, () => {
             const renderControlsTree = (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||
                 this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&
                 this.detailTreeModel.length > 0;
             return (h("div", { class: {
                     "panel-tab": true,
                     "panel-tab--controls-tree": renderControlsTree
-                }, part: "data-panel-composition-container" }, ((_b = (_a = this.selectedDesignItem) === null || _a === void 0 ? void 0 : _a.composition) === null || _b === void 0 ? void 0 : _b.preview) ? (h("div", { part: "data-panel-composition-preview", class: "panel-item scrollable" }, h("img", { src: this.selectedDesignItem.composition.preview, alt: "Preview" }))) : null, renderControlsTree ? (h("ch-tree-view-render", { part: "data-panel-composition-tree", class: "tree-view tree-view-panel-item scrollable", showLines: "last", model: this.detailTreeModel, dragDisabled: true, dropDisabled: true })) : null));
+                }, part: "data-panel-composition-container" }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluatePanelPreview, "f").call(this), renderControlsTree ? (h("ch-tree-view-render", { part: "data-panel-composition-tree", class: "tree-view tree-view-panel-item scrollable", showLines: "last", model: this.detailTreeModel, dragDisabled: true, dropDisabled: true })) : null));
         });
         _GxIdeImportFromDesign_renderImageTab.set(this, () => {
             return (h("div", { part: "data-panel-composition-preview", class: "data-preview", style: { height: "100%" } }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview", class: this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES
@@ -640,42 +659,27 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
     }
     designDataChanged(newDesignData) {
         if (newDesignData) {
+            // panels
             const panelsSelectedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getPanelsSelectedItem, "f").call(this, this.designData.panels);
-            const iconSrc = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
+            const isForWeb = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE;
+            const panelsIconSrc = isForWeb
                 ? "objects/webpanel"
                 : "objects/panel-for-sd";
+            // images
+            const imagesIconSrc = "objects/image";
             this.designDataTreeDataModel = [
                 {
                     order: 0,
                     id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
                     leaf: false,
-                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.panels,
-                    startImgSrc: iconSrc,
+                    caption: isForWeb
+                        ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.webPanels
+                        : __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.panels,
+                    startImgSrc: panelsIconSrc,
                     checkbox: true,
                     checked: true,
                     expanded: true,
-                    items: this.designData.panels.map((item, i) => {
-                        var _a;
-                        return ({
-                            id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
-                            class: "object tree-view-item",
-                            leaf: !item.variants,
-                            caption: item.name,
-                            startImgSrc: iconSrc,
-                            checkbox: true,
-                            checked: true,
-                            expanded: true,
-                            selected: i === panelsSelectedItem,
-                            items: (_a = item.variants) === null || _a === void 0 ? void 0 : _a.map(variant => ({
-                                id: `${variant.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
-                                caption: variant.name,
-                                startImgSrc: iconSrc,
-                                leaf: true,
-                                checkbox: true,
-                                checked: true
-                            }))
-                        });
-                    })
+                    items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, this.designData.panels, DESIGN_DATA_TYPE_PANELS, panelsIconSrc, panelsSelectedItem)
                 },
                 {
                     order: 1,
@@ -699,22 +703,13 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
                 {
                     order: 2,
                     id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_IMAGES}`,
-                    parts: "category tree-view-item",
                     leaf: false,
                     caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.images,
-                    startImgSrc: "objects/image",
+                    startImgSrc: imagesIconSrc,
                     checkbox: true,
                     checked: true,
                     expanded: true,
-                    items: this.designData.images.map(item => ({
-                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_IMAGES}`,
-                        class: "object tree-view-item",
-                        leaf: true,
-                        caption: item.name,
-                        startImgSrc: "objects/image",
-                        checkbox: true,
-                        checked: true
-                    }))
+                    items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, this.designData.images, DESIGN_DATA_TYPE_IMAGES, imagesIconSrc)
                 },
                 {
                     order: 3,
@@ -727,7 +722,6 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
                     expanded: true,
                     items: this.designData.fonts.map(item => ({
                         id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_FONTS}`,
-                        class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
                         startImgSrc: "controls/font",
@@ -848,7 +842,25 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
         "styles": ["stylesChanged"],
         "messages": ["watchMessagesHandler"]
     }]);
-_GxIdeImportFromDesign_componentLocale = new WeakMap(), _GxIdeImportFromDesign_loadedItems = new WeakMap(), _GxIdeImportFromDesign_emptyStateAnimated = new WeakMap(), _GxIdeImportFromDesign_formattedExtensions = new WeakMap(), _GxIdeImportFromDesign_accessTokenEl = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsEl = new WeakMap(), _GxIdeImportFromDesign_moduleEl = new WeakMap(), _GxIdeImportFromDesign_messagesList = new WeakMap(), _GxIdeImportFromDesign_panelsSelected = new WeakMap(), _GxIdeImportFromDesign_stencilsSelected = new WeakMap(), _GxIdeImportFromDesign_imagesSelected = new WeakMap(), _GxIdeImportFromDesign_fontsSelected = new WeakMap(), _GxIdeImportFromDesign_fileInputHiddenEl = new WeakMap(), _GxIdeImportFromDesign_pathEl = new WeakMap(), _GxIdeImportFromDesign_initializeActiveTabs = new WeakMap(), _GxIdeImportFromDesign_evaluateAccessTokenRender = new WeakMap(), _GxIdeImportFromDesign_pathURLBlurHandler = new WeakMap(), _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_getLoadedItem = new WeakMap(), _GxIdeImportFromDesign_validatePath = new WeakMap(), _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_selectFileHandler = new WeakMap(), _GxIdeImportFromDesign_styleComboBoxInputHandler = new WeakMap(), _GxIdeImportFromDesign_moduleInputHandler = new WeakMap(), _GxIdeImportFromDesign_loadData = new WeakMap(), _GxIdeImportFromDesign_messageCallback = new WeakMap(), _GxIdeImportFromDesign_getDesignDataDetail = new WeakMap(), _GxIdeImportFromDesign_confirm = new WeakMap(), _GxIdeImportFromDesign_cancel = new WeakMap(), _GxIdeImportFromDesign_fitImagesHandler = new WeakMap(), _GxIdeImportFromDesign_getPanelsSelectedItem = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_removeFileSelection = new WeakMap(), _GxIdeImportFromDesign_selectFileInputChangedHandler = new WeakMap(), _GxIdeImportFromDesign_accessFocusHandler = new WeakMap(), _GxIdeImportFromDesign_accessBlurHandler = new WeakMap(), _GxIdeImportFromDesign_pathUrlInputHandler = new WeakMap(), _GxIdeImportFromDesign_renderHeader = new WeakMap(), _GxIdeImportFromDesign_renderMessages = new WeakMap(), _GxIdeImportFromDesign_renderMain = new WeakMap(), _GxIdeImportFromDesign_renderDesignTree = new WeakMap(), _GxIdeImportFromDesign_renderFooter = new WeakMap(), _GxIdeImportFromDesign_renderPanelTab = new WeakMap(), _GxIdeImportFromDesign_renderImageTab = new WeakMap(), _GxIdeImportFromDesign_tabSelectionChangedHandler = new WeakMap(), _GxIdeImportFromDesign_renderDesignTabsCh = new WeakMap(), _GxIdeImportFromDesign_instances = new WeakSet(), _GxIdeImportFromDesign_loadTreeItemCompositionModel = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(controls) {
+_GxIdeImportFromDesign_componentLocale = new WeakMap(), _GxIdeImportFromDesign_loadedItems = new WeakMap(), _GxIdeImportFromDesign_emptyStateAnimated = new WeakMap(), _GxIdeImportFromDesign_formattedExtensions = new WeakMap(), _GxIdeImportFromDesign_accessTokenEl = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsEl = new WeakMap(), _GxIdeImportFromDesign_moduleEl = new WeakMap(), _GxIdeImportFromDesign_messagesList = new WeakMap(), _GxIdeImportFromDesign_panelsSelected = new WeakMap(), _GxIdeImportFromDesign_stencilsSelected = new WeakMap(), _GxIdeImportFromDesign_imagesSelected = new WeakMap(), _GxIdeImportFromDesign_fontsSelected = new WeakMap(), _GxIdeImportFromDesign_fileInputHiddenEl = new WeakMap(), _GxIdeImportFromDesign_pathEl = new WeakMap(), _GxIdeImportFromDesign_initializeActiveTabs = new WeakMap(), _GxIdeImportFromDesign_evaluateAccessTokenRender = new WeakMap(), _GxIdeImportFromDesign_pathURLBlurHandler = new WeakMap(), _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_getLoadedItem = new WeakMap(), _GxIdeImportFromDesign_validatePath = new WeakMap(), _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_selectFileHandler = new WeakMap(), _GxIdeImportFromDesign_styleComboBoxInputHandler = new WeakMap(), _GxIdeImportFromDesign_moduleInputHandler = new WeakMap(), _GxIdeImportFromDesign_loadData = new WeakMap(), _GxIdeImportFromDesign_messageCallback = new WeakMap(), _GxIdeImportFromDesign_getDesignDataDetail = new WeakMap(), _GxIdeImportFromDesign_confirm = new WeakMap(), _GxIdeImportFromDesign_cancel = new WeakMap(), _GxIdeImportFromDesign_fitImagesHandler = new WeakMap(), _GxIdeImportFromDesign_getPanelsSelectedItem = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_removeFileSelection = new WeakMap(), _GxIdeImportFromDesign_selectFileInputChangedHandler = new WeakMap(), _GxIdeImportFromDesign_accessFocusHandler = new WeakMap(), _GxIdeImportFromDesign_accessBlurHandler = new WeakMap(), _GxIdeImportFromDesign_pathUrlInputHandler = new WeakMap(), _GxIdeImportFromDesign_renderHeader = new WeakMap(), _GxIdeImportFromDesign_renderMessages = new WeakMap(), _GxIdeImportFromDesign_renderMain = new WeakMap(), _GxIdeImportFromDesign_renderDesignTree = new WeakMap(), _GxIdeImportFromDesign_renderFooter = new WeakMap(), _GxIdeImportFromDesign_evaluatePanelPreview = new WeakMap(), _GxIdeImportFromDesign_renderPanelTab = new WeakMap(), _GxIdeImportFromDesign_renderImageTab = new WeakMap(), _GxIdeImportFromDesign_tabSelectionChangedHandler = new WeakMap(), _GxIdeImportFromDesign_renderDesignTabsCh = new WeakMap(), _GxIdeImportFromDesign_instances = new WeakSet(), _GxIdeImportFromDesign_recursiveDesignTreeItems = function _GxIdeImportFromDesign_recursiveDesignTreeItems(items, designType, iconSrc, selectedIndex = undefined) {
+    return items.map((item, i) => {
+        var _a;
+        const hasVariants = ((_a = item.variants) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return {
+            id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${designType}`,
+            leaf: !hasVariants,
+            caption: item.name,
+            startImgSrc: iconSrc,
+            checkbox: true,
+            checked: true,
+            expanded: hasVariants,
+            selected: selectedIndex === i,
+            items: hasVariants
+                ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, item.variants, designType, iconSrc)
+                : []
+        };
+    });
+}, _GxIdeImportFromDesign_loadTreeItemCompositionModel = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(controls) {
     const modelList = [];
     for (const control of controls) {
         let model = {