@genexus/genexus-ide-ui 1.0.24 → 1.0.26

package/dist/collection/components/design-import/design-import.js

@@ -1,185 +1,248 @@
-/* STENCIL IMPORTS */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        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;
+// Stencil
 import { Host, h } from "@stencil/core";
-/* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
+import { getIconPath } from "@genexus/mercury";
+// Custom Imports
 import { config } from "../../common/config";
-import { renderFormItems } from "../../common/common";
+import { mapStylesToComboBoxItemModel } from "./helpers";
+import { Locale } from "../../common/locale";
+import { TAB_DATA, DESIGN_TYPE_TO_TAB_MODEL_MAP, TAB_MODEL } from "./models";
 const DESIGN_DATA_TYPE_PANELS = "panels";
 const DESIGN_DATA_TYPE_STENCILS = "stencils";
 const DESIGN_DATA_TYPE_IMAGES = "images";
 const DESIGN_DATA_TYPE_DESIGN_SYSTEM = "design_system";
 const DESIGN_DATA_TYPE_FONTS = "fonts";
+const ITEM_COMPOSE_ID_SEPARATOR = "@@@";
+// ch-checkbox
+const CHECKED_VALUE = "on";
+// Icons
+const MENU_DELETE = getIconPath({
+    category: "menus",
+    name: "delete",
+    colorType: "primary"
+});
+const DESIGN = getIconPath({
+    category: "objects",
+    name: "design"
+});
+const FILE_UPLOAD = getIconPath({
+    category: "controls",
+    name: "file-upload"
+});
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/form",
     "utils/layout",
     "utils/typography",
+    "utils/spacing",
     "components/button",
     "components/checkbox",
     "components/edit",
-    "components/tree-view"
+    "components/tree-view",
+    "components/combo-box",
+    "components/tab",
+    "components/tooltip",
+    "chameleon/scrollbar"
 ];
 export class GxIdeImportFromDesign {
     constructor() {
-        this.renderedFirstTime = false;
+        _GxIdeImportFromDesign_instances.add(this);
         /**
-         * An array that keeps track of the tree items id's (design system data type + item id) along with the content, that will be used to save and retrieve items information, in order to avoid using a callback to get items information that was already get. loadedItemsArray will be reset every time a new design is loaded.
+         * The component hard-coded strings translations.
          */
-        this.loadedItems = new Map();
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeImportFromDesign_componentLocale.set(this, void 0);
         /**
-         * The path/URL value when loadCallback was called for the last time. This is used to determine
-         * if there is a difference with the actual path/URL value, in order to know if calling loadCallback
-         * again is required on blur on Path/URL/File input.
+         * An array that keeps track of the tree items id's (design system data type
+         * + item id) along with the content, that will be used to save and retrieve
+         * items information, in order to avoid using a callback to get items
+         * information that was already get. loadedItemsArray will be reset every time
+         * a new design is loaded.
          */
-        this.pathOnLoadCallback = "";
-        this.panelsSelected = [];
-        this.stencilsSelected = [];
-        // private imagesSelected: string[] = [];
-        // private designSystemSelected: string[] = [];
-        this.fontsSelected = [];
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeImportFromDesign_loadedItems.set(this, new Map());
+        _GxIdeImportFromDesign_emptyStateAnimated.set(this, false);
+        _GxIdeImportFromDesign_formattedExtensions.set(this, void 0);
+        /* References needed to collect data */
+        _GxIdeImportFromDesign_accessTokenEl.set(this, void 0);
+        _GxIdeImportFromDesign_importAsWebPanelsEl.set(this, void 0);
+        _GxIdeImportFromDesign_moduleEl.set(this, void 0);
+        _GxIdeImportFromDesign_messagesList.set(this, void 0);
+        _GxIdeImportFromDesign_panelsSelected.set(this, []);
+        _GxIdeImportFromDesign_stencilsSelected.set(this, []);
+        _GxIdeImportFromDesign_imagesSelected.set(this, []);
+        _GxIdeImportFromDesign_fontsSelected.set(this, []);
+        _GxIdeImportFromDesign_fileInputHiddenEl.set(this, void 0);
+        _GxIdeImportFromDesign_pathEl.set(this, void 0);
         // 9.LOCAL METHODS //
-        this.attachTreeMouseListeners = () => {
-            this.treeDataEl.addEventListener("mouseenter", this.treeMouseEnter);
-            this.treeDataEl.addEventListener("mouseleave", this.treeMouseLeave);
-        };
-        this.removeTreeMouseListeners = () => {
-            this.treeDataEl.removeEventListener("mouseenter", this.treeMouseEnter);
-            this.treeDataEl.removeEventListener("mouseleave", this.treeMouseLeave);
-        };
-        this.treeMouseEnter = () => {
-            this.shrunkenTree = false;
-        };
-        this.treeMouseLeave = () => {
-            this.shrunkenTree = true;
-        };
-        this.messageType = (message) => {
-            if (message.type === "error") {
-                return "text-alert-error";
+        _GxIdeImportFromDesign_initializeActiveTabs.set(this, () => {
+            this.activeTabs.set("panels", TAB_MODEL.panels[0].id);
+            this.activeTabs.set("stencils", TAB_MODEL.stencils[0].id);
+            this.activeTabs.set("images", TAB_MODEL.images[0].id);
+            this.activeTabs.set("fonts", TAB_MODEL.fonts[0].id);
+            this.activeTabs.set("design_system", TAB_MODEL.designSystem[0].id);
+        });
+        _GxIdeImportFromDesign_evaluateAccessTokenRender.set(this, async () => {
+            this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
+            // evaluate access token error
+            if (this.accessToken.length) {
+                this.accessTokenHasError = false;
             }
-            else if (message.type === "warning") {
-                return "text-alert-warning";
+        });
+        _GxIdeImportFromDesign_pathURLBlurHandler.set(this, async () => {
+            const loadDataCondition1 = this.isLoaded &&
+                this.reactiveSettings.path &&
+                this.pathIsValid &&
+                this.path !== this.lastLoadCallbackSettingValues.path;
+            const loadDataCondition2 = !this.requiresAccessToken ||
+                (this.requiresAccessToken && this.accessToken.length > 0);
+            if (loadDataCondition1 && loadDataCondition2) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
             }
-            else {
-                return "text-gray";
-            }
-        };
-        this.objectsTreeSelectedItemsChangedHandler = async (event) => {
+        });
+        _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler.set(this, async (event) => {
             var _a;
             if (event.detail.length) {
                 const item = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item;
                 const itemComposedId = item.id;
-                const idList = itemComposedId.split("@");
+                const idList = itemComposedId.split(ITEM_COMPOSE_ID_SEPARATOR);
                 const itemId = idList[0];
                 const itemDesignType = idList[1];
                 const isChildNode = itemId && itemId !== "parent";
                 const isDesignSystem = itemDesignType === "design_system";
                 if (isChildNode || isDesignSystem) {
+                    this.tabsModel = DESIGN_TYPE_TO_TAB_MODEL_MAP.get(itemDesignType);
                     this.selectedDesignType = itemDesignType;
-                    const loadedItem = this.getLoadedItem(itemComposedId);
+                    const loadedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getLoadedItem, "f").call(this, itemComposedId);
                     if (!loadedItem) {
-                        const designDataDetail = await this.getDesignDataDetail(itemId, this.selectedDesignType);
-                        this.loadedItems.set(itemComposedId, {
+                        const designDataDetail = await __classPrivateFieldGet(this, _GxIdeImportFromDesign_getDesignDataDetail, "f").call(this, itemId, this.selectedDesignType);
+                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadedItems, "f").set(itemComposedId, {
                             designType: this.selectedDesignType,
                             designDataDetail: designDataDetail
                         });
                     }
                     else {
-                        /* Item has been queried already. The item content exists already. */
+                        // Item has been queried already. The item content exists already.
                         this.selectedDesignType = loadedItem.designType;
                         this.selectedDesignItem = loadedItem.designDataDetail;
-                        this.getCodeFactory(loadedItem.designType);
-                        this.renderDetailDataTree(loadedItem.designType);
+                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_getCodeFactory).call(this, loadedItem.designType);
+                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_renderDetailDataTree).call(this, loadedItem.designType);
                     }
+                    this.renderedTabs.clear();
+                    this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
                 }
             }
-        };
-        this.getLoadedItem = (id) => {
+        });
+        _GxIdeImportFromDesign_getLoadedItem.set(this, (id) => {
             var _a;
-            return (_a = this.loadedItems) === null || _a === void 0 ? void 0 : _a.get(id);
-        };
-        this.objectsTreeCheckedItemsChangedHandler = (event) => {
+            return (_a = __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadedItems, "f")) === null || _a === void 0 ? void 0 : _a.get(id);
+        });
+        _GxIdeImportFromDesign_validatePath.set(this, (path) => {
+            const validPathRegex = /^(\/|\.\/|(\w:))[^:*?"<>|]*\.(sketch|gxsketch)$/i; // Match valid file paths
+            const figmaURLRegex = /^https?:\/\/(www\.)?figma\.com/; // Match URLs containing "www.figma.com"
+            const urlWithExtensionRegex = /^https?:\/\/[^\s/$.?#].[^\s]*\.(sketch|gxsketch)$/i; // Match URLs ending with .sketch or .gxsketch
+            const pathIsValid = validPathRegex.test(path) ||
+                figmaURLRegex.test(path) ||
+                urlWithExtensionRegex.test(path);
+            return pathIsValid;
+        });
+        _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler.set(this, (event) => {
             const items = Array.from(event.detail.values());
             let currentParentId = null;
             const result = {};
             for (const item of items) {
-                if (item.item.id.startsWith("parent@")) {
-                    currentParentId = item.item.id.split("@")[1];
+                if (item.item.id.startsWith(`parent${ITEM_COMPOSE_ID_SEPARATOR}`)) {
+                    currentParentId = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[1];
                     result[currentParentId] = [];
                 }
                 else if (item.item.checked && currentParentId) {
-                    const parentId = item.item.id.split("@")[1];
+                    const parentId = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[1];
                     if (parentId === currentParentId) {
-                        const id = item.item.id.split("@")[0];
+                        const id = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[0];
                         result[currentParentId].push(id);
                     }
                 }
             }
             // const { designSystem, fonts, images, panels, stencils } = result;
-            const { fonts, panels, stencils } = result;
+            const { fonts, panels, stencils, images } = result;
             // this.designSystemSelected = designSystem;
-            this.fontsSelected = fonts;
-            // this.imagesSelected = images;
-            this.panelsSelected = panels;
-            this.stencilsSelected = stencils;
-        };
-        this.selectFile = () => {
-            this.pathURLFile.openFile();
-        };
-        this.pathOnFileSelected = async (e) => {
-            this.selectedFile = e.detail[0];
-            const fileName = e.detail[0].name;
-            this.path = fileName;
-            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
-        };
-        this.pathURLFileBlurHandler = async () => {
-            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
-            if (this.path !== this.pathOnLoadCallback) {
-                // if loadOnBlur is true, and the actual path/URL value differs from the one
-                // when loadCallback was called the last time, it is required to call loadCallback
-                // again, because the DesignData might differ from the actual.
-                this.loadData();
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_panelsSelected, panels, "f");
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_stencilsSelected, stencils, "f");
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_imagesSelected, images, "f");
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_fontsSelected, fonts, "f");
+        });
+        _GxIdeImportFromDesign_selectFileHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeImportFromDesign_fileInputHiddenEl, "f").click();
+        });
+        _GxIdeImportFromDesign_styleComboBoxInputHandler.set(this, (event) => {
+            this.styleValue = event.target.value;
+            if (this.reactiveSettings.style &&
+                this.styleValue !== this.lastLoadCallbackSettingValues.style) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
             }
-        };
-        this.loadData = async () => {
+        });
+        _GxIdeImportFromDesign_moduleInputHandler.set(this, (event) => {
+            if (this.reactiveSettings.module &&
+                this.defaultModule.id !== event.detail.id &&
+                this.pathIsValid) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
+            }
+        });
+        _GxIdeImportFromDesign_loadData.set(this, async () => {
+            var _a, _b;
             this.isLoading = true;
             const source = this.selectedFile ? this.selectedFile : this.path;
-            const token = this.accessTokenEl ? this.accessTokenEl.value : undefined;
-            this.designData = null;
-            await this.loadCallback(source, token, this.messageCallback).then((designData) => {
-                // this.isLoading = false;
-                this.messages = [];
-                this.designData = designData;
-                if (this.designData) {
-                    this.panelsSelected = [
-                        ...this.designData.panels.map(item => item.id)
-                    ];
-                    this.stencilsSelected = [
-                        ...this.designData.stencils.map(item => item.id)
-                    ];
-                    // this.imagesSelected = [
-                    //   ...this.designData.images.map(item => item.id)
-                    // ];
-                    // this.designSystemSelected = [
-                    //   ...this.designData.designSystem.map(item => item.id)
-                    // ];
-                    this.fontsSelected = [...this.designData.fonts.map(item => item.id)];
-                }
-                else {
-                    // There was probably an error
-                    this.panelsSelected = [];
-                    this.stencilsSelected = [];
-                    // this.imagesSelected = [];
-                    // this.designSystemSelected = [];
-                    this.fontsSelected = [];
-                }
-            });
-            this.pathOnLoadCallback = this.path;
+            const token = __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f") ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f").value : undefined;
+            const style = this.styleValue;
+            const importAsWebPanels = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE;
+            const designData = await this.loadCallback(source, style, importAsWebPanels, token, __classPrivateFieldGet(this, _GxIdeImportFromDesign_messageCallback, "f"));
+            // clear
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_panelsSelected, [], "f");
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_stencilsSelected, [], "f");
+            __classPrivateFieldSet(this, _GxIdeImportFromDesign_fontsSelected, [], "f");
+            this.selectedDesignType = undefined;
+            this.selectedDesignItem = undefined;
+            this.messages = [];
+            this.designData = designData;
+            this.isLoaded = (_a = designData === null || designData === void 0 ? void 0 : designData.success) !== null && _a !== void 0 ? _a : false;
             this.isLoading = false;
-        };
-        this.messageCallback = message => {
+            const firstDesignSystemName = (_b = designData.designSystem[0]) === null || _b === void 0 ? void 0 : _b.name;
+            if (firstDesignSystemName && !this.styleValue)
+                this.styleValue = firstDesignSystemName;
+            // update the settings that were used for the last load
+            if (this.reactiveSettings.path && this.pathIsValid) {
+                this.lastLoadCallbackSettingValues.path = this.path;
+            }
+            if (this.reactiveSettings.style) {
+                this.lastLoadCallbackSettingValues.style = style;
+            }
+            if (this.reactiveSettings.module) {
+                this.lastLoadCallbackSettingValues.moduleId = __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleEl, "f").value.id;
+            }
+            if (this.reactiveSettings.importAsWebPanels) {
+                this.lastLoadCallbackSettingValues.importAsWebPanels = importAsWebPanels;
+            }
+        });
+        _GxIdeImportFromDesign_messageCallback.set(this, message => {
             this.messages = [...this.messages, message];
-        };
-        this.getDesignDataDetail = async (id, designType) => {
+        });
+        _GxIdeImportFromDesign_getDesignDataDetail.set(this, async (id, designType) => {
             let loadFn;
             switch (designType) {
                 case DESIGN_DATA_TYPE_IMAGES:
@@ -200,175 +263,264 @@ export class GxIdeImportFromDesign {
             await loadFn(id).then((data) => {
                 this.selectedDesignType = designType;
                 this.selectedDesignItem = data;
-                this.getCodeFactory(designType);
-                this.renderDetailDataTree(designType);
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_getCodeFactory).call(this, designType);
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_renderDetailDataTree).call(this, designType);
                 returnedData = data;
             });
             return returnedData;
-        };
-        this.confirm = () => {
+        });
+        _GxIdeImportFromDesign_confirm.set(this, () => {
             var _a, _b;
             this.confirmCallback({
-                panels: this.panelsSelected,
-                stencils: this.stencilsSelected,
-                fonts: this.fontsSelected,
-                /* images: this.imagesSelected, */
-                moduleId: (_b = (_a = this.filterModuleEl) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id,
-                styleName: this.optionStyleEl.value,
-                importAsWebPanels: this.optionImportAsEl.checked
+                panels: __classPrivateFieldGet(this, _GxIdeImportFromDesign_panelsSelected, "f"),
+                stencils: __classPrivateFieldGet(this, _GxIdeImportFromDesign_stencilsSelected, "f"),
+                fonts: __classPrivateFieldGet(this, _GxIdeImportFromDesign_fontsSelected, "f"),
+                images: __classPrivateFieldGet(this, _GxIdeImportFromDesign_imagesSelected, "f"),
+                moduleId: (_b = (_a = __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleEl, "f")) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id,
+                styleName: this.styleValue,
+                importAsWebPanels: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
             });
-        };
-        this.cancel = () => {
+        });
+        _GxIdeImportFromDesign_cancel.set(this, () => {
             this.cancelCallback();
             this.isLoading = false;
-        };
-        this.fitImagesHandler = (e) => {
-            this.fitImages = e.detail.value;
-        };
-        this.shrinkTreeHandler = (e) => {
-            const checked = e.detail.value;
-            this.shrinkTree = checked;
-            if (checked) {
-                this.shrunkenTree = true;
+        });
+        _GxIdeImportFromDesign_fitImagesHandler.set(this, (event) => {
+            this.fitImages = event.detail === CHECKED_VALUE;
+        });
+        _GxIdeImportFromDesign_getPanelsSelectedItem.set(this, (panels) => {
+            return panels.reduce((minIndex, item, index, panels) => {
+                return panels[minIndex].name <= item.name ? minIndex : index;
+            }, 0);
+        });
+        _GxIdeImportFromDesign_importAsWebPanelsChangedHandler.set(this, () => {
+            const loadData = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
+            if (loadData) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
             }
-            else {
-                this.shrunkenTree = false;
+        });
+        _GxIdeImportFromDesign_removeFileSelection.set(this, () => {
+            this.selectedFile = null;
+            this.path = "";
+            this.accessToken = "";
+            this.selectedFile = null;
+            __classPrivateFieldGet(this, _GxIdeImportFromDesign_fileInputHiddenEl, "f").value = null;
+        });
+        _GxIdeImportFromDesign_selectFileInputChangedHandler.set(this, (event) => {
+            var _a;
+            const target = event.target;
+            if (((_a = target.files) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.selectedFile = target.files[0];
+                this.path = this.selectedFile.name;
+                // we know the path is valid because the extensions are restricted by "extensions" Prop.
             }
-        };
-        this.importAsWebPanelsChangedHandler = () => {
-            // When "Import as Web Panels" checkbox value changes, loadCallback has to be
-            // called again, because the received DesignData differs between having
-            // "Import as Web Panels" checked or not. This only makes sense if a file is
-            // selected or the Path/URL input is not empty
-            if (this.path.length !== 0 || !this.selectedFile) {
-                this.loadData();
+        });
+        _GxIdeImportFromDesign_accessFocusHandler.set(this, (event) => {
+            const element = event.target;
+            element.type = "text"; // display token on focus
+        });
+        _GxIdeImportFromDesign_accessBlurHandler.set(this, (event) => {
+            const element = event.target;
+            element.type = "password"; // hide token on blur
+            this.accessTokenChanged(element.value);
+        });
+        _GxIdeImportFromDesign_pathUrlInputHandler.set(this, async (event) => {
+            this.path = event.detail;
+            __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateAccessTokenRender, "f").call(this);
+            this.selectedFile = null;
+            if (!this.path.length)
+                this.designData = null;
+        });
+        // 9.LOCAL METHODS -> RENDERS //
+        _GxIdeImportFromDesign_renderHeader.set(this, () => {
+            const primaryButtonDisabled = this.isLoading ||
+                (this.pathIsValid &&
+                    this.requiresAccessToken &&
+                    this.accessToken.length === 0);
+            const clearFileButtonDisabled = this.isLoading || this.path.length === 0;
+            const stylesComboDisabled = this.isLoading;
+            const moduleDisabled = this.isLoading;
+            const pathWithErrorStyles = !this.pathIsValid && this.path.length > 0;
+            const displayPathErrorTooltip = !this.pathIsValid && this.path.length > 0;
+            let primaryButtonCaption;
+            if (this.pathIsValid &&
+                this.path === this.lastLoadCallbackSettingValues.path) {
+                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.btnReload;
             }
-        };
-        this.pathURLFileValueChangedHandler = (e) => {
-            this.path = e.detail;
-            if (this.path.length === 0) {
-                this.selectFile === null;
+            else if (this.pathIsValid) {
+                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.btnLoad;
             }
-        };
-        // 9.LOCAL METHODS -> RENDERS //
-        this.renderOptions = () => {
-            var _a;
-            return (h("div", { class: {
-                    "options grid": true,
-                    "options--hide-access-token": !this.showAccessToken
-                } }, h("gxg-label", { class: "path-url-label" }, this._componentLocale.options.path), h("div", { class: "path-url-wrapper" }, h("gxg-form-text", { value: this.path, onFileSelected: this.pathOnFileSelected, onBlur: this.pathURLFileBlurHandler, ref: (el) => (this.pathURLFile = el), clearButton: true, part: "option-path", disabled: this.isLoading, type: "file", acceptFile: this.extensions, class: "path-url", placeholder: this._componentLocale.options.pathPlaceholder, onValueChanged: this.pathURLFileValueChangedHandler }), h("div", { class: "path-url-wrapper__buttons-container" }, h("gxg-button", { id: "button-select-file", type: "primary-text-only", onClick: this.selectFile, part: "gxg-button gxg-button--select-file", disabled: this.isLoading, class: "select-file" }, "..."), h("gxg-button", { id: "button-load", type: "primary-text-only", onClick: this.loadData, part: "gxg-button gxg-button--load", disabled: this.path.length === 0 || this.isLoading, class: "load-file" }, this._componentLocale.options.btnLoad))), this.showAccessToken
-                ? [
-                    h("gxg-label", { class: { "access-token-label": true } }, this._componentLocale.options.accessToken),
-                    h("gxg-form-text", { class: { "access-token": true }, ref: (el) => (this.accessTokenEl = el), part: "access-token", disabled: this.isLoading })
-                ]
-                : null, h("gxg-label", { class: "style-label" }, this._componentLocale.options.style), h("gxg-combo-box", { disabled: !this.styles || this.isLoading, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.optionStyleEl = el), part: "option-style", class: "style" }, renderFormItems("gxg-combo-box-item", (_a = this.styles) !== null && _a !== void 0 ? _a : [])), h("gxg-label", { class: "module-label" }, this._componentLocale.options.module), h("gx-ide-entity-selector", { value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module" }), h("div", { class: "checkboxes-options" }, h("gxg-form-checkbox", { label: this._componentLocale.options.importAs, class: "import-as-web-panels", ref: (el) => (this.optionImportAsEl = el), part: "option-import-as-web-panels", disabled: this.isLoading, onChange: this.importAsWebPanelsChangedHandler }), h("div", { class: {
-                    "checkboxes-options__col-right": true,
-                    "checkboxes-options__col-right--hidden": !this.designDataTreeDataModel.length
-                } }, h("gxg-form-checkbox", { label: this._componentLocale.options.fitImages, part: "fit-images-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.fitImagesHandler }), h("gxg-form-checkbox", { label: this._componentLocale.options.toggleTree, part: "shrink-tree-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.shrinkTreeHandler })))));
-        };
-        this.renderMessages = () => {
-            return this.messages.length > 0 ? (h("div", { class: "messages-container", ref: (el) => (this.messagesList = el) }, this.messages.map(message => (h("gxg-text", { type: this.messageType(message) }, message.type, ": ", message.text))))) : null;
-        };
-        this.renderMain = () => {
-            if (this.designData) {
+            else {
+                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.selectFileButton;
+            }
+            return (h("header", { class: {
+                    "header": true,
+                    "control-header-with-border": true,
+                    "spacing-body-inline": true,
+                    "spacing-body-block-start": true,
+                    "header--show-access-token": this.requiresAccessToken,
+                    "header--hide-access-token": !this.requiresAccessToken,
+                    "field-group-cols-2": true
+                } }, h("label", {
+                // path/url label
+                class: "label path-url-label"
+            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.path), h("div", { class: "path-url-wrapper buttons-spacer" }, h("ch-edit", {
+                // path/url/file input
+                id: "path-url", class: {
+                    "input": true,
+                    "input-error": pathWithErrorStyles,
+                    "path-url-control": true
+                }, debounce: config.inputDebounce, part: "option-path", type: "text", value: this.path, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathUrlInputHandler, "f"), onBlur: this.reactiveSettings.path && __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathURLBlurHandler, "f"), disabled: this.isLoading, placeholder: `${__classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.pathPlaceholder}`, startImgSrc: FILE_UPLOAD, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_pathEl, el, "f"))
+            }), displayPathErrorTooltip && (h("ch-tooltip", { class: "tooltip", actionElement: __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathEl, "f"), blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.pathErrorMessage, " ", __classPrivateFieldGet(this, _GxIdeImportFromDesign_formattedExtensions, "f"))), h("input", { hidden: true, type: "file", accept: __classPrivateFieldGet(this, _GxIdeImportFromDesign_formattedExtensions, "f"), onChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileInputChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_fileInputHiddenEl, el, "f")) }), h("div", { class: "buttons-spacer" }, h("button", { "aria-label": __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.removeFileSelection, title: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.removeFileSelection, id: "reset-all-button", class: "button-tertiary button-icon-only", part: "reset-all-button", disabled: clearFileButtonDisabled, onClick: !clearFileButtonDisabled && __classPrivateFieldGet(this, _GxIdeImportFromDesign_removeFileSelection, "f") }, h("ch-image", { class: "icon-md", src: MENU_DELETE, disabled: clearFileButtonDisabled })), h("button", {
+                // load file button
+                id: "button-load", type: "primary-text-only", onClick: this.pathIsValid ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f") : __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileHandler, "f"), part: "button button--load", disabled: primaryButtonDisabled, class: {
+                    "button-primary": this.pathIsValid,
+                    "button-secondary": !this.pathIsValid,
+                    "select-load-button": true
+                }
+            }, primaryButtonCaption))), this.requiresAccessToken && [
+                h("label", {
+                    // access token label
+                    class: "label access-token-label"
+                }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessToken),
+                h("div", null, h("ch-edit", { class: {
+                        "input": true,
+                        "access-token": true,
+                        "input-error": this.accessTokenHasError
+                    }, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_accessTokenEl, el, "f")), value: this.accessToken, placeholder: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessTokenPlaceholder, onFocus: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessFocusHandler, "f"), onBlur: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessBlurHandler, "f"), part: "access-token", disabled: this.isLoading, type: "password" }), this.accessTokenHasError && (h("ch-tooltip", { class: "tooltip", actionElement: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f"), blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessTokenErrorMessage)))
+            ], h("label", {
+                // style label
+                class: "label style-label"
+            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.style), h("ch-combo-box-render", {
+                // style combo box
+                suggest: true, suggestOptions: {
+                    alreadyProcessed: true
+                }, disabled: stylesComboDisabled, model: this.stylesAsComboBoxModel, value: this.styleValue, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_styleComboBoxInputHandler, "f"), part: "option-style", class: "combo-box style"
+            }), h("label", {
+                // module label
+                class: "label module-label"
+            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.module), h("gx-ide-entity-selector", {
+                // module entity selector
+                labelPosition: "none", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_moduleEl, el, "f")), onValueChanged: this.reactiveSettings.module && __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleInputHandler, "f"), disabled: moduleDisabled, class: "module"
+            }), h("div", {
+                // import as web panels
+                class: "checkboxes-options field-group"
+            }, h("ch-checkbox", { caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.importAs, checkedValue: CHECKED_VALUE, class: "checkbox import-as-web-panels", ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, el, "f")), value: this.importAsWebPanels ? CHECKED_VALUE : undefined, part: "option-import-as-web-panels", disabled: this.isLoading, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsChangedHandler, "f") }), h("div", { class: {
+                    "field-group-inline": true,
+                    "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")
+            })))));
+        });
+        _GxIdeImportFromDesign_renderMessages.set(this, () => {
+            return (this.messages.length > 0 &&
+                this.messages.map(message => (h("p", { class: {
+                        "text-body-regular-m": true,
+                        "message": true,
+                        [`message--${message.type}`]: true
+                    } }, message.type, ": ", message.text))));
+        });
+        _GxIdeImportFromDesign_renderMain.set(this, () => {
+            var _a, _b;
+            if (this.isLoading || ((_a = this.designData) === null || _a === void 0 ? void 0 : _a.success) === false) {
+                return (h("div", { class: "main main--loading scrollable", ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_messagesList, el, "f")) }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderMessages, "f").call(this), h("div", { class: "text-body-regular-m spacing-body" }, h("slot", { name: "messages" }))));
+            }
+            else if ((_b = this.designData) === null || _b === void 0 ? void 0 : _b.success) {
                 return (
                 /* #main*/
-                h("main", { class: { "main": true, "main--shrunken-tree": this.shrunkenTree } }, [this.renderDesignTree(), this.renderDesignTabs()]));
-            }
-            else if (!this.isLoading) {
-                return h("main", { class: "main" }, this.renderNoDesignData());
+                h("div", { class: "main" }, [__classPrivateFieldGet(this, _GxIdeImportFromDesign_renderDesignTree, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderDesignTabsCh, "f").call(this)]));
             }
             else {
-                return this.renderMessages();
-            }
-        };
-        this.renderNoDesignData = () => {
-            if (!this.isLoading) {
-                return (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "no-design-selected" }, this._componentLocale.messages.noDesignSelected, " ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFile, part: "begin-by-loading-one" }, this._componentLocale.messages.selectDesign)));
+                return (h("gx-ide-empty-state", { class: "empty-state scrollable", stateIconSrc: DESIGN, isAnimated: __classPrivateFieldGet(this, _GxIdeImportFromDesign_emptyStateAnimated, "f"), stateTitle: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.noDesignSelected, key: "no-objects-empty-state" }, h("button", {
+                    // begin by selecting a file
+                    class: "button-tertiary empty-state-button", onClick: __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileHandler, "f")
+                }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.selectDesign)));
             }
-        };
-        this.renderDesignTree = () => {
-            return (h("div", { class: "tree-container" }, h("ch-tree-view-render", { part: "data-tree", class: "tree-view design-tree", id: "data-tree", model: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onSelectedItemsChange: this.objectsTreeSelectedItemsChangedHandler, ref: el => (this.treeDataEl = el) })));
-        };
-        this.renderFooter = () => {
-            return [
-                h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "gxg-button gxg-button--ok", disabled: this.isLoading, slot: "footer-end" }, this._componentLocale.footer.btnOk),
-                h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)
-            ];
-        };
-        this.renderPanelTab = () => {
+        });
+        _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, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
+        });
+        _GxIdeImportFromDesign_renderFooter.set(this, () => {
+            var _a;
+            const buttonOkDisabled = ((_a = this.designData) === null || _a === void 0 ? void 0 : _a.success) !== true || this.isLoading;
+            return (h("footer", { class: "control-footer-with-border spacing-body-block-end spacing-body-inline" }, h("div", { class: "buttons-spacer" }, h("button", {
+                // button cancel
+                id: "button-cancel", class: "button-secondary button-cancel", type: "outlined", onClick: __classPrivateFieldGet(this, _GxIdeImportFromDesign_cancel, "f"), part: "button button--cancel", slot: "footer-end"
+            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").footer.btnCancel), h("button", {
+                // button ok
+                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, () => {
+            var _a, _b;
             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" }, this.selectedDesignItem &&
-                this.selectedDesignItem.composition &&
-                this.selectedDesignItem.composition.preview ? (h("div", { part: "data-panel-composition-preview", class: "panel-item" }, h("img", { src: this.selectedDesignItem && this.selectedDesignItem.composition
-                    ? this.selectedDesignItem.composition.preview
-                    : undefined, alt: "Preview" }))) : null, renderControlsTree ? (h("ch-tree-view-render", { part: "data-panel-composition-tree", class: "tree-view panel-item", model: this.detailTreeModel, dragDisabled: true, dropDisabled: true })) : null));
-        };
-        this.renderImageTab = () => {
-            return (h("div", { part: "data-panel-composition-preview", class: "data-preview" }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview" })));
-        };
-        this.tabActivatedHandler = (tabActivated) => {
-            if (tabActivated.detail) {
-                const tab = tabActivated.detail.tab;
-                this.activeTabs = Object.assign(Object.assign({}, this.activeTabs), { [this.selectedDesignType]: tab });
-            }
-        };
-        this.isTabActive = (tab) => {
-            const activeTab = this.selectedDesignType;
-            this.activeTabs[activeTab];
-            if (this.activeTabs[activeTab] === tab) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        };
-        this.renderDesignTabs = () => {
-            return (h("gxg-tabs", { class: {
-                    "design-tabs": true,
-                    "design-tabs--fit-images": this.fitImages
-                }, part: "data-tabs", "no-border": true, noPadding: true, buttonsBorderAbove: true }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { hidden: !this.selectedDesignType ||
-                    this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.tokens, tab: "tokens", key: "tokens", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("tokens") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
-                    this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.styles, tab: "styles", key: "styles", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("styles") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
-                    this.selectedDesignType === DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.composition, tab: "composition", key: "composition", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("composition") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
-                    (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
-                        this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS), slot: "tab-bar", "tab-label": this._componentLocale.tabs.layout, tab: "layout", key: "layout", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("layout") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
-                    (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
-                        this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS), slot: "tab-bar", "tab-label": this._componentLocale.tabs.code, tab: "code", key: "code", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("code") })), h("gxg-tab", { tab: "tokens", key: "tokens", isSelected: this.isTabActive("tokens") }, h("div", { ref: (el) => (this.tokensFactoryRenderEl = el) })), h("gxg-tab", { tab: "styles", key: "styles", isSelected: this.isTabActive("styles") }, h("div", { ref: (el) => (this.stylesFactoryRenderEl = el) })), h("gxg-tab", { tab: "composition", key: "composition", isSelected: this.isTabActive("composition") }, this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||
+                }, 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));
+        });
+        _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 ? "checker-board" : undefined })));
+        });
+        _GxIdeImportFromDesign_tabSelectionChangedHandler.set(this, (event) => {
+            this.renderedTabs.clear();
+            this.renderedTabs.add(event.detail.newSelectedId);
+            this.reRenderCounter++;
+            this.activeTabs.set(this.selectedDesignType, event.detail.newSelectedId);
+        });
+        _GxIdeImportFromDesign_renderDesignTabsCh.set(this, () => {
+            return (h("ch-tab-render", {
+                // main section
+                class: {
+                    "tab": true,
+                    "scrollable": true,
+                    "fit-images": this.fitImages
+                }, direction: "block", model: this.tabsModel, selectedId: this.activeTabs.get(this.selectedDesignType), overflow: "auto", contain: "size", onSelectedItemChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_tabSelectionChangedHandler, "f")
+            }, this.renderedTabs.has(TAB_DATA.tokens.id) && (h("div", { slot: TAB_DATA.tokens.slot, class: "spacing-body" }, h("slot", { name: TAB_DATA.tokens.slot }))), this.renderedTabs.has(TAB_DATA.styles.id) && (h("div", { slot: TAB_DATA.styles.slot, class: "spacing-body" }, h("slot", { name: TAB_DATA.styles.slot }))), this.renderedTabs.has(TAB_DATA.composition.id) && (h("div", { class: "composition-tab-slot scrollable", slot: TAB_DATA.composition.slot }, this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||
                 this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
-                ? this.renderImageTab()
-                : this.renderPanelTab()), h("gxg-tab", { tab: "layout", key: "layout", isSelected: this.isTabActive("layout") }, h("div", { ref: (el) => (this.layoutFactoryRenderEl = el) })), h("gxg-tab", { tab: "code", key: "code", isSelected: this.isTabActive("code") }, h("div", { ref: (el) => (this.codeFactoryRenderEl = el) }))));
-        };
-        this.activeTabs = {
-            panels: "composition",
-            stencils: "composition",
-            images: "composition",
-            fonts: "composition",
-            design_system: "tokens"
-        };
-        this.path = "";
+                ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderImageTab, "f").call(this)
+                : __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderPanelTab, "f").call(this))), this.renderedTabs.has(TAB_DATA.layout.id) && (h("div", { slot: TAB_DATA.layout.slot, class: "spacing-body" }, h("slot", { name: TAB_DATA.layout.slot }))), this.renderedTabs.has(TAB_DATA.code.id) && (h("div", { slot: TAB_DATA.code.slot, class: "spacing-body" }, h("slot", { name: TAB_DATA.code.slot })))));
+        });
+        this.reRenderCounter = 0;
+        this.stylesAsComboBoxModel = undefined;
+        this.styleValue = "";
+        this.accessTokenHasError = false;
+        this.pathIsValid = undefined;
+        this.tabsModel = [];
+        this.activeTabs = new Map();
+        this.renderedTabs = new Set();
         this.designData = null;
         this.detailTreeModel = [];
         this.isLoading = false;
+        this.isLoaded = false;
         this.messages = [];
         this.selectedFile = undefined;
         this.selectedDesignType = undefined;
         this.selectedDesignItem = undefined;
-        this.showAccessToken = undefined;
+        this.requiresAccessToken = undefined;
         this.designDataTreeDataModel = [];
         this.updateTabsActiveTab = false;
         this.fitImages = false;
-        this.shrinkTree = false;
-        this.shrunkenTree = false;
-        this.treeSh = false;
-        this.displayTitle = false;
+        this.reactiveSettings = {
+            path: true,
+            style: false,
+            module: false,
+            importAsWebPanels: true
+        };
+        this.lastLoadCallbackSettingValues = {
+            path: undefined,
+            style: undefined,
+            moduleId: undefined,
+            importAsWebPanels: undefined
+        };
         this.extensions = undefined;
         this.defaultModule = undefined;
+        this.path = "";
+        this.accessToken = "";
+        this.importAsWebPanels = false;
         this.selectModuleCallback = undefined;
         this.cancelCallback = undefined;
         this.confirmCallback = undefined;
@@ -378,187 +530,154 @@ export class GxIdeImportFromDesign {
         this.loadImageCallback = undefined;
         this.loadPanelDataCallback = undefined;
         this.requiresAccessTokenCallback = undefined;
-        this.shadow = false;
         this.styles = undefined;
         this.textEditorFactoryCallback = undefined;
     }
-    watchDesignDataHandler(newDesignData) {
+    pathIsValidChanged(pathIsValid) {
+        if (pathIsValid) {
+            __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateAccessTokenRender, "f").call(this);
+        }
+        else {
+            // hide access token input if path is not valid
+            this.requiresAccessToken = false;
+        }
+    }
+    designDataChanged(newDesignData) {
         if (newDesignData) {
+            const panelsSelectedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getPanelsSelectedItem, "f").call(this, this.designData.panels);
             this.designDataTreeDataModel = [
                 {
                     order: 0,
-                    id: `parent@${DESIGN_DATA_TYPE_PANELS}`,
-                    parts: "category tree-view-item",
+                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
                     leaf: false,
-                    caption: this._componentLocale.tree.panels,
-                    startImgSrc: "general/knowledge-base",
+                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.panels,
+                    startImgSrc: "objects/panel-for-sd",
                     checkbox: true,
                     checked: true,
                     expanded: true,
                     items: this.designData.panels.map((item, i) => ({
-                        id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,
+                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
                         class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
-                        startImgSrc: "general/generator",
+                        startImgSrc: "objects/panel-for-sd",
                         checkbox: true,
                         checked: true,
-                        selected: i === 0
+                        selected: i === panelsSelectedItem
                     }))
                 },
                 {
                     order: 1,
-                    id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,
-                    parts: "category tree-view-item",
+                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_STENCILS}`,
                     leaf: false,
-                    caption: this._componentLocale.tree.stencils,
-                    startImgSrc: "general/knowledge-base",
+                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.stencils,
+                    startImgSrc: "objects/stencil",
                     checkbox: true,
                     checked: true,
                     expanded: true,
                     items: this.designData.stencils.map(item => ({
-                        id: `${item.id}@${DESIGN_DATA_TYPE_STENCILS}`,
+                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_STENCILS}`,
                         class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
-                        startImgSrc: "general/generator",
+                        startImgSrc: "objects/stencil",
                         checkbox: true,
                         checked: true
                     }))
                 },
                 {
                     order: 2,
-                    id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,
+                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_IMAGES}`,
                     parts: "category tree-view-item",
                     leaf: false,
-                    caption: this._componentLocale.tree.images,
-                    startImgSrc: "general/knowledge-base",
+                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.images,
+                    startImgSrc: "objects/image",
                     checkbox: true,
                     checked: true,
                     expanded: true,
                     items: this.designData.images.map(item => ({
-                        id: `${item.id}@${DESIGN_DATA_TYPE_IMAGES}`,
+                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_IMAGES}`,
                         class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
-                        startImgSrc: "general/generator",
+                        startImgSrc: "objects/image",
                         checkbox: true,
                         checked: true
                     }))
                 },
                 {
                     order: 3,
-                    id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
-                    parts: "category tree-view-item",
+                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_FONTS}`,
                     leaf: false,
-                    caption: this._componentLocale.tree.fonts,
-                    startImgSrc: "general/knowledge-base",
+                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.fonts,
+                    startImgSrc: "controls/font",
                     checkbox: true,
                     checked: true,
                     expanded: true,
                     items: this.designData.fonts.map(item => ({
-                        id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
+                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_FONTS}`,
                         class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
-                        startImgSrc: "general/generator",
+                        startImgSrc: "controls/font",
                         checkbox: true,
                         checked: true
                     }))
                 },
                 {
                     order: 4,
-                    id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
-                    parts: "category tree-view-item",
+                    id: `${this.designData.designSystem.length > 0
+                        ? this.designData.designSystem[0].id
+                        : "parent"}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
                     leaf: true,
-                    caption: this._componentLocale.tree.designSystem,
-                    startImgSrc: "general/knowledge-base",
+                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.designSystem,
+                    startImgSrc: "objects/dso",
                     checkbox: true,
                     checked: true
                 }
             ];
-            this.designDataTreeDataModel;
-        }
-    }
-    watchShrinkTreeHandler(shrink) {
-        if (shrink) {
-            this.attachTreeMouseListeners();
-        }
-        else {
-            this.removeTreeMouseListeners();
         }
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
+    pathChanged(newPath) {
+        var _a;
+        const fileIsLoaded = ((_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.size) > 0;
+        const validatePathResult = __classPrivateFieldGet(this, _GxIdeImportFromDesign_validatePath, "f").call(this, newPath) || fileIsLoaded;
+        this.pathIsValid = validatePathResult;
     }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+    accessTokenChanged(newAccessToken) {
+        if (!newAccessToken.trim().length) {
+            this.accessTokenHasError = true;
+            return;
         }
+        this.accessTokenHasError = false;
+        this.accessToken = newAccessToken;
     }
-    disconnectedCallback() {
-        this.removeTreeMouseListeners();
+    stylesChanged(newStyles) {
+        this.stylesAsComboBoxModel = mapStylesToComboBoxItemModel(newStyles);
+    }
+    async componentWillLoad() {
+        var _a, _b;
+        __classPrivateFieldSet(this, _GxIdeImportFromDesign_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldSet(this, _GxIdeImportFromDesign_formattedExtensions, this.extensions
+            .map(ext => `.${ext}`)
+            .join(", "), "f");
+        this.stylesChanged(this.styles);
+        __classPrivateFieldGet(this, _GxIdeImportFromDesign_initializeActiveTabs, "f").call(this);
+        this.pathChanged(this.path);
+        this.styleValue =
+            ((_a = this.stylesAsComboBoxModel) === null || _a === void 0 ? void 0 : _a.length) > 0
+                ? (_b = this.stylesAsComboBoxModel[0]) === null || _b === void 0 ? void 0 : _b.value
+                : "";
     }
-    // 7.LISTENERS //
     watchMessagesHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
-            if (this.messagesList) {
-                this.messagesList.scrollTop = this.messagesList.scrollHeight;
-            }
-        }
-    }
-    // 8.PUBLIC METHODS API //
-    /**
-     * Validate necessary data input
-     */
-    async validate() {
-        const isValid = true;
-        return isValid;
-    }
-    loadTreeItemCompositionModel(controls) {
-        const modelList = [];
-        for (const control of controls) {
-            let model = {
-                id: control.name,
-                caption: control.name,
-                startImgSrc: control.type,
-                checkbox: false,
-                expanded: true,
-                leaf: control.leaf
-            };
-            if (control.controls) {
-                model = Object.assign(Object.assign({}, model), { items: this.loadTreeItemCompositionModel(control.controls) });
+            if (__classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f")) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").scrollTop = __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").scrollHeight;
             }
-            modelList.push(model);
-        }
-        return modelList;
-    }
-    getCodeFactory(designType) {
-        switch (designType) {
-            case DESIGN_DATA_TYPE_PANELS:
-            case DESIGN_DATA_TYPE_STENCILS:
-                this.textEditorFactoryCallback("html", this.codeFactoryRenderEl, this.selectedDesignItem.code);
-                this.textEditorFactoryCallback("html", this.layoutFactoryRenderEl, this.selectedDesignItem.layout);
-                break;
-            case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
-                this.textEditorFactoryCallback("tokens", this.tokensFactoryRenderEl, this.selectedDesignItem.tokens);
-                this.textEditorFactoryCallback("styles", this.stylesFactoryRenderEl, this.selectedDesignItem.styles);
-                break;
-        }
-    }
-    renderDetailDataTree(designType) {
-        switch (designType) {
-            case DESIGN_DATA_TYPE_PANELS:
-            case DESIGN_DATA_TYPE_STENCILS:
-                this.detailTreeModel = this.loadTreeItemCompositionModel(this.selectedDesignItem.composition.controls);
-                break;
         }
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, displayBorderBottom: true, part: "options-container", slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, this.renderOptions(), this.renderMain(), this.renderFooter()))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderHeader, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderMain, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderFooter, "f").call(this))));
     }
     static get is() { return "gx-ide-design-import"; }
     static get encapsulation() { return "shadow"; }
@@ -575,40 +694,42 @@ export class GxIdeImportFromDesign {
     static get assetsDirs() { return ["gx-ide-assets/design-import"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
+            "reactiveSettings": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "ReactiveSettings",
+                    "resolved": "{ path: boolean; style: boolean; module: boolean; importAsWebPanels: boolean; }",
+                    "references": {
+                        "ReactiveSettings": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/design-import/design-import.tsx",
+                            "id": "src/components/design-import/design-import.tsx::ReactiveSettings"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true it displays the component title on the header"
+                    "text": "Represents a collection of settings where each key is a specific option. Its\nboolean value determines whether changes to that option are listened to and\ntrigger the loadCallback callback."
                 },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "{\n    path: true,\n    style: false,\n    module: false,\n    importAsWebPanels: true\n  }"
             },
             "extensions": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string[]",
+                    "resolved": "string[]",
                     "references": {}
                 },
                 "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The valid extensions for the files that will be loaded in Path/URL (ie.: \".fig, .sketch\")"
-                },
-                "attribute": "extensions",
-                "reflect": false
+                    "text": "The valid extensions for the files that will be loaded in Path/URL\n(ie.: \".fig, .sketch\")"
+                }
             },
             "defaultModule": {
                 "type": "unknown",
@@ -628,9 +749,63 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default value for the module/folder filter"
+                    "text": "Default value for the 'Module' field."
                 }
             },
+            "path": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The path/URL for load the design data"
+                },
+                "attribute": "path",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "accessToken": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The access token for the given path, which is not always required"
+                },
+                "attribute": "access-token",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "importAsWebPanels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value for \"Import as Web Panels\" checkbox."
+                },
+                "attribute": "import-as-web-panels",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "selectModuleCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -649,7 +824,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the action is executed in the Module/Folder filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled."
+                    "text": "Callback invoked when the action is executed in the Module/Folder filter.\nIt returns the information of the selected object (id and name) or\n'undefined' if it was canceled."
                 }
             },
             "cancelCallback": {
@@ -691,7 +866,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that init the process of import a design."
+                    "text": "This is a function provided by the developer that initiates the process\nof importing a design."
                 }
             },
             "loadCallback": {
@@ -699,7 +874,7 @@ export class GxIdeImportFromDesign {
                 "mutable": false,
                 "complexType": {
                     "original": "LoadCallback",
-                    "resolved": "(source: string | File, token: string, onMessage: LoadMessageCallback) => Promise<DesignData>",
+                    "resolved": "(source: string | File, designSystem: string, importAsWebPanels: boolean, token: string, onMessage: LoadMessageCallback) => Promise<DesignData>",
                     "references": {
                         "LoadCallback": {
                             "location": "local",
@@ -712,7 +887,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return the list of types of data loaded from file or url."
+                    "text": "This is a function provided by the developer that returns the list of\ndata types loaded from a file or URL."
                 }
             },
             "loadDesignSystemCallback": {
@@ -733,7 +908,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return the information of a Design System type of data."
+                    "text": "This is a function provided by the developer that returns the information\nof a Design System type of data."
                 }
             },
             "loadFontCallback": {
@@ -754,7 +929,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return the information of a Font type of data."
+                    "text": "This is a function provided by the developer that returns the information\nof a Font type of data."
                 }
             },
             "loadImageCallback": {
@@ -775,7 +950,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return the information of an Image System type of data."
+                    "text": "This is a function provided by the developer that returns the information\nof an Image System type of data."
                 }
             },
             "loadPanelDataCallback": {
@@ -796,7 +971,7 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return the information of a Panel type of data."
+                    "text": "This is a function provided by the developer that returns the information\nof a Panel type of data."
                 }
             },
             "requiresAccessTokenCallback": {
@@ -817,27 +992,9 @@ export class GxIdeImportFromDesign {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to determinate if accessing to a design requires an authentication token"
+                    "text": "Callback invoked to determine if accessing a design requires an authentication token."
                 }
             },
-            "shadow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Applies a shadow all around"
-                },
-                "attribute": "shadow",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "styles": {
                 "type": "unknown",
                 "mutable": false,
@@ -864,7 +1021,7 @@ export class GxIdeImportFromDesign {
                 "mutable": false,
                 "complexType": {
                     "original": "TextEditorFactoryCallback",
-                    "resolved": "(type: TextEditorType, parent: HTMLElement, text: string) => Promise<void>",
+                    "resolved": "(type: TextEditorType, parent: string, text: string) => Promise<void>",
                     "references": {
                         "TextEditorFactoryCallback": {
                             "location": "local",
@@ -884,75 +1041,87 @@ export class GxIdeImportFromDesign {
     }
     static get states() {
         return {
+            "reRenderCounter": {},
+            "stylesAsComboBoxModel": {},
+            "styleValue": {},
+            "accessTokenHasError": {},
+            "pathIsValid": {},
+            "tabsModel": {},
             "activeTabs": {},
-            "path": {},
+            "renderedTabs": {},
             "designData": {},
             "detailTreeModel": {},
             "isLoading": {},
+            "isLoaded": {},
             "messages": {},
             "selectedFile": {},
             "selectedDesignType": {},
             "selectedDesignItem": {},
-            "showAccessToken": {},
+            "requiresAccessToken": {},
             "designDataTreeDataModel": {},
             "updateTabsActiveTab": {},
             "fitImages": {},
-            "shrinkTree": {},
-            "shrunkenTree": {},
-            "treeSh": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "validate": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validate necessary data input",
-                    "tags": []
-                }
-            }
+            "lastLoadCallbackSettingValues": {}
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "pathIsValid",
+                "methodName": "pathIsValidChanged"
+            }, {
                 "propName": "designData",
-                "methodName": "watchDesignDataHandler"
+                "methodName": "designDataChanged"
+            }, {
+                "propName": "path",
+                "methodName": "pathChanged"
             }, {
-                "propName": "shrinkTree",
-                "methodName": "watchShrinkTreeHandler"
+                "propName": "accessToken",
+                "methodName": "accessTokenChanged"
+            }, {
+                "propName": "styles",
+                "methodName": "stylesChanged"
             }, {
                 "propName": "messages",
                 "methodName": "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) {
+    const modelList = [];
+    for (const control of controls) {
+        let model = {
+            id: control.name,
+            caption: control.name,
+            startImgSrc: control.type,
+            checkbox: false,
+            expanded: true,
+            leaf: control.leaf
+        };
+        if (control.controls) {
+            model = Object.assign(Object.assign({}, model), { items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, control.controls) });
+        }
+        modelList.push(model);
+    }
+    return modelList;
+}, _GxIdeImportFromDesign_getCodeFactory = function _GxIdeImportFromDesign_getCodeFactory(designType) {
+    switch (designType) {
+        case DESIGN_DATA_TYPE_PANELS:
+        case DESIGN_DATA_TYPE_STENCILS:
+            this.textEditorFactoryCallback("code", TAB_DATA.code.slot, this.selectedDesignItem.code);
+            this.textEditorFactoryCallback("html", TAB_DATA.layout.slot, this.selectedDesignItem.layout);
+            break;
+        case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
+            this.textEditorFactoryCallback("tokens", TAB_DATA.tokens.slot, this.selectedDesignItem.tokens);
+            this.textEditorFactoryCallback("styles", TAB_DATA.styles.slot, this.selectedDesignItem.styles);
+            break;
+    }
+}, _GxIdeImportFromDesign_renderDetailDataTree = function _GxIdeImportFromDesign_renderDetailDataTree(designType) {
+    switch (designType) {
+        case DESIGN_DATA_TYPE_PANELS:
+        case DESIGN_DATA_TYPE_STENCILS:
+            this.detailTreeModel = __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, this.selectedDesignItem.composition.controls);
+            break;
+    }
+};
 //# sourceMappingURL=design-import.js.map