@genexus/genexus-ide-ui 1.0.35 → 1.0.36

package/dist/cjs/gx-ide-create-kb-from-server.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-caaa95cf.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-56ba4d5e.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-b23e31e2.js');
 const config = require('./config-b21feeee.js');
 const formValidation = require('./form-validation-178cf461.js');
 const locale = require('./locale-ff30a5f3.js');

package/dist/cjs/gx-ide-current-user-info.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-caaa95cf.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-56ba4d5e.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-b23e31e2.js');
 const locale = require('./locale-ff30a5f3.js');
 
 const getInitialsFromName = (name) => {

package/dist/cjs/gx-ide-dashboard-home.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-caaa95cf.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-56ba4d5e.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-b23e31e2.js');
 const locale = require('./locale-ff30a5f3.js');
 const helpers = require('./helpers-03ef57a7.js');
 

package/dist/cjs/gx-ide-data-selector.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-caaa95cf.js');
 const locale = require('./locale-ff30a5f3.js');
 const config = require('./config-b21feeee.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-56ba4d5e.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-b23e31e2.js');
 
 const dataSelectorCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;grid-template-rows:max-content 1fr max-content;overflow:auto;block-size:100%}.section{display:contents}.header__field-group{display:grid;grid-template-columns:1fr 1fr}.tabular-grid{contain:size}.data ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ch-tabular-grid.empty-result::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}";
 

package/dist/cjs/gx-ide-design-import.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-caaa95cf.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-56ba4d5e.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-b23e31e2.js');
 const config = require('./config-b21feeee.js');
 const locale = require('./locale-ff30a5f3.js');
 
@@ -83,7 +83,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)
@@ -101,7 +101,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";
@@ -124,6 +124,15 @@ const FILE_UPLOAD = MERCURY_ASSETS.getIconPath({
     category: "controls",
     name: "file-upload"
 });
+// For empty states
+const WEBPANEL_ICON = MERCURY_ASSETS.getIconPath({
+    category: "objects",
+    name: "webpanel"
+});
+const PANEL_FOR_SD_ICON = MERCURY_ASSETS.getIconPath({
+    category: "objects",
+    name: "panel-for-sd"
+});
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/form",
@@ -170,7 +179,6 @@ const GxIdeImportFromDesign = class {
         _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 = class {
                 this.designData = null;
             }
         });
-        // 9.LOCAL METHODS -> RENDERS //
         _GxIdeImportFromDesign_renderHeader.set(this, () => {
             const primaryButtonDisabled = this.isLoading ||
                 (this.pathIsValid &&
@@ -424,6 +431,10 @@ const GxIdeImportFromDesign = class {
             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 = class {
                     "checkboxes-options__col-right": true
                 } }, index.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 = class {
             }
         });
         _GxIdeImportFromDesign_renderDesignTree.set(this, () => {
-            return (index.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 (index.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 = class {
                 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) ? (index.h("div", { part: "data-panel-composition-preview", class: "panel-item scrollable" }, index.h("img", { src: this.selectedDesignItem.composition.preview, alt: "Preview" }))) : (index.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 (index.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) ? (index.h("div", { part: "data-panel-composition-preview", class: "panel-item scrollable" }, index.h("img", { src: this.selectedDesignItem.composition.preview, alt: "Preview" }))) : null, renderControlsTree ? (index.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 ? (index.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 (index.h("div", { part: "data-panel-composition-preview", class: "data-preview", style: { height: "100%" } }, index.h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview", class: this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES
@@ -654,28 +673,7 @@ const GxIdeImportFromDesign = class {
                     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, iconSrc, panelsSelectedItem)
                 },
                 {
                     order: 1,
@@ -699,7 +697,6 @@ const GxIdeImportFromDesign = class {
                 {
                     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",
@@ -708,7 +705,6 @@ const GxIdeImportFromDesign = class {
                     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",
@@ -727,7 +723,6 @@ const GxIdeImportFromDesign = class {
                     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",
@@ -801,7 +796,25 @@ const GxIdeImportFromDesign = class {
         "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 = {