@genexus/genexus-ide-ui 0.0.140 → 0.0.142

package/dist/genexus-ide-ui/{p-9bf62c5c.entry.js → p-c46c7974.entry.js}

@@ -1,8 +1,8 @@
-import { r as e, c as t, h as a, H as r, g as i } from "./p-48217969.js";
+import { r as t, c as e, h as a, H as i, g as r } from "./p-48217969.js";
 
-import { L as o } from "./p-74d59062.js";
+import { L as s } from "./p-74d59062.js";
 
-import { c as s } from "./p-9c1b4eb9.js";
+import { c as o } from "./p-9c1b4eb9.js";
 
 import { r as l } from "./p-350f49ac.js";
 
@@ -19,13 +19,18 @@ const h = "design_system";
 const b = "fonts";
 
 const f = class {
-  constructor(r) {
-    e(this, r);
-    this.componentDidRenderFirstTime = t(this, "componentDidRenderFirstTime", 7);
+  constructor(i) {
+    t(this, i);
+    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
     /**
          * 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.loadedItems = new Map;
+    /**
+         * 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.
+         */    this.pathOnLoadCallback = "";
     this.panelsSelected = [];
     this.stencilsSelected = [];
     // private imagesSelected: string[] = [];
@@ -46,104 +51,109 @@ const f = class {
     this.treeMouseLeave = () => {
       this.shrunkenTree = true;
     };
-    this.messageType = e => {
-      if (e.type === "error") {
+    this.messageType = t => {
+      if (t.type === "error") {
         return "text-alert-error";
-      } else if (e.type === "warning") {
+      } else if (t.type === "warning") {
         return "text-alert-warning";
       } else {
         return "text-gray";
       }
     };
-    this.objectsTreeSelectedItemsChangedHandler = async e => {
-      var t;
-      if (e.detail.length) {
-        const a = (t = e.detail[0]) === null || t === void 0 ? void 0 : t.item;
-        const r = a.id;
-        const i = r.split("@");
-        const o = i[0];
-        const s = i[1];
-        if (o && o !== "parent") {
-          this.selectedDesignType = s;
-          const e = this.getLoadedItem(r);
-          if (!e) {
-            const e = await this.getDesignDataDetail(o, this.selectedDesignType);
-            this.loadedItems.set(r, {
+    this.objectsTreeSelectedItemsChangedHandler = async t => {
+      var e;
+      if (t.detail.length) {
+        const a = (e = t.detail[0]) === null || e === void 0 ? void 0 : e.item;
+        const i = a.id;
+        const r = i.split("@");
+        const s = r[0];
+        const o = r[1];
+        const l = s && s !== "parent";
+        const n = o === "design_system";
+        if (l || n) {
+          this.selectedDesignType = o;
+          const t = this.getLoadedItem(i);
+          if (!t) {
+            const t = await this.getDesignDataDetail(s, this.selectedDesignType);
+            this.loadedItems.set(i, {
               designType: this.selectedDesignType,
-              designDataDetail: e
+              designDataDetail: t
             });
           } else {
             /* Item has been queried already. The item content exists already. */
-            this.selectedDesignType = e.designType;
-            this.selectedDesignItem = e.designDataDetail;
-            this.getCodeFactory(e.designType);
-            this.renderDetailDataTree(e.designType);
+            this.selectedDesignType = t.designType;
+            this.selectedDesignItem = t.designDataDetail;
+            this.getCodeFactory(t.designType);
+            this.renderDetailDataTree(t.designType);
           }
         }
       }
     };
-    this.getLoadedItem = e => {
-      var t;
-      return (t = this.loadedItems) === null || t === void 0 ? void 0 : t.get(e);
+    this.getLoadedItem = t => {
+      var e;
+      return (e = this.loadedItems) === null || e === void 0 ? void 0 : e.get(t);
     };
-    this.objectsTreeCheckedItemsChangedHandler = e => {
-      const t = Array.from(e.detail.values());
+    this.objectsTreeCheckedItemsChangedHandler = t => {
+      const e = Array.from(t.detail.values());
       let a = null;
-      const r = {};
-      for (const e of t) {
-        if (e.item.id.startsWith("parent@")) {
-          a = e.item.id.split("@")[1];
-          r[a] = [];
-        } else if (e.item.checked && a) {
-          const t = e.item.id.split("@")[1];
-          if (t === a) {
-            const t = e.item.id.split("@")[0];
-            r[a].push(t);
+      const i = {};
+      for (const t of e) {
+        if (t.item.id.startsWith("parent@")) {
+          a = t.item.id.split("@")[1];
+          i[a] = [];
+        } else if (t.item.checked && a) {
+          const e = t.item.id.split("@")[1];
+          if (e === a) {
+            const e = t.item.id.split("@")[0];
+            i[a].push(e);
           }
         }
       }
       // const { designSystem, fonts, images, panels, stencils } = result;
-            const {fonts: i, panels: o, stencils: s} = r;
+            const {fonts: r, panels: s, stencils: o} = i;
       // this.designSystemSelected = designSystem;
-            this.fontsSelected = i;
+            this.fontsSelected = r;
       // this.imagesSelected = images;
-            this.panelsSelected = o;
-      this.stencilsSelected = s;
+            this.panelsSelected = s;
+      this.stencilsSelected = o;
     };
     this.selectFile = () => {
-      this.optionPathEl.openFile();
-    };
-    this.pathOnInputHandler = e => {
-      this.path = e.detail;
+      this.pathURLFile.openFile();
     };
-    this.pathOnFileSelected = e => {
-      this.selectedFile = e.detail[0];
-      const t = e.detail[0].name;
-      this.path = t;
-      this.evaluateAccessToken();
+    this.pathOnFileSelected = async t => {
+      this.selectedFile = t.detail[0];
+      const e = t.detail[0].name;
+      this.path = e;
+      this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
     };
-    this.evaluateAccessToken = async () => {
-      this.showAccessToken = await this.requiresAccessTokenCallback(this.optionPathEl.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();
+      }
     };
     this.loadData = async () => {
       this.isLoading = true;
-      const e = this.selectedFile ? this.selectedFile : this.path;
-      const t = this.accessTokenEl ? this.accessTokenEl.value : undefined;
+      const t = this.selectedFile ? this.selectedFile : this.path;
+      const e = this.accessTokenEl ? this.accessTokenEl.value : undefined;
       this.designData = null;
-      await this.loadCallback(e, t, this.messageCallback).then((e => {
+      await this.loadCallback(t, e, this.messageCallback).then((t => {
         // this.isLoading = false;
         this.messages = [];
-        this.designData = e;
+        this.designData = t;
         if (this.designData) {
-          this.panelsSelected = [ ...this.designData.panels.map((e => e.id)) ];
-          this.stencilsSelected = [ ...this.designData.stencils.map((e => e.id)) ];
+          this.panelsSelected = [ ...this.designData.panels.map((t => t.id)) ];
+          this.stencilsSelected = [ ...this.designData.stencils.map((t => t.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((e => e.id)) ];
+                    this.fontsSelected = [ ...this.designData.fonts.map((t => t.id)) ];
         } else {
           // There was probably an error
           this.panelsSelected = [];
@@ -153,14 +163,15 @@ const f = class {
                     this.fontsSelected = [];
         }
       }));
+      this.pathOnLoadCallback = this.path;
       this.isLoading = false;
     };
-    this.messageCallback = e => {
-      this.messages = [ ...this.messages, e ];
+    this.messageCallback = t => {
+      this.messages = [ ...this.messages, t ];
     };
-    this.getDesignDataDetail = async (e, t) => {
+    this.getDesignDataDetail = async (t, e) => {
       let a;
-      switch (t) {
+      switch (e) {
        case d:
         a = this.loadImageCallback;
         break;
@@ -178,24 +189,24 @@ const f = class {
         a = this.loadPanelDataCallback;
         break;
       }
-      let r;
-      await a(e).then((e => {
-        this.selectedDesignType = t;
-        this.selectedDesignItem = e;
-        this.getCodeFactory(t);
-        this.renderDetailDataTree(t);
-        r = e;
+      let i;
+      await a(t).then((t => {
+        this.selectedDesignType = e;
+        this.selectedDesignItem = t;
+        this.getCodeFactory(e);
+        this.renderDetailDataTree(e);
+        i = t;
       }));
-      return r;
+      return i;
     };
     this.confirm = () => {
-      var e, t;
+      var t, e;
       this.confirmCallback({
         panels: this.panelsSelected,
         stencils: this.stencilsSelected,
         fonts: this.fontsSelected,
         /* images: this.imagesSelected, */
-        moduleId: (t = (e = this.filterModuleEl) === null || e === void 0 ? void 0 : e.value) === null || t === void 0 ? void 0 : t.id,
+        moduleId: (e = (t = this.filterModuleEl) === null || t === void 0 ? void 0 : t.value) === null || e === void 0 ? void 0 : e.id,
         styleName: this.optionStyleEl.value,
         importAsWebPanels: this.optionImportAsEl.checked
       });
@@ -204,21 +215,33 @@ const f = class {
       this.cancelCallback();
       this.isLoading = false;
     };
-    this.fitImagesHandler = e => {
-      this.fitImages = e.detail.value;
+    this.fitImagesHandler = t => {
+      this.fitImages = t.detail.value;
     };
-    this.shrinkTreeHandler = e => {
-      const t = e.detail.value;
-      this.shrinkTree = t;
-      if (t) {
+    this.shrinkTreeHandler = t => {
+      const e = t.detail.value;
+      this.shrinkTree = e;
+      if (e) {
         this.shrunkenTree = true;
       } else {
         this.shrunkenTree = false;
       }
     };
+    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();
+      }
+    };
+    this.pathURLFileValueChangedHandler = t => {
+      this.path = t.detail;
+    };
     // 9.LOCAL METHODS -> RENDERS //
         this.renderOptions = () => {
-      var e;
+      var t;
       return a("div", {
         class: {
           "options grid": true,
@@ -230,16 +253,17 @@ const f = class {
         class: "path-url-wrapper"
       }, a("gxg-form-text", {
         value: this.path,
-        onInput: this.pathOnInputHandler,
         onFileSelected: this.pathOnFileSelected,
-        onBlur: this.evaluateAccessToken,
-        ref: e => this.optionPathEl = e,
+        onBlur: this.pathURLFileBlurHandler,
+        ref: t => this.pathURLFile = t,
+        clearButton: true,
         part: "option-path",
         disabled: this.isLoading,
         type: "file",
         acceptFile: this.extensions,
         class: "path-url",
-        placeholder: this._componentLocale.options.pathPlaceholder
+        placeholder: this._componentLocale.options.pathPlaceholder,
+        onValueChanged: this.pathURLFileValueChangedHandler
       }), a("div", {
         class: "path-url-wrapper__buttons-container"
       }, a("gxg-button", {
@@ -264,7 +288,7 @@ const f = class {
         class: {
           "access-token": true
         },
-        ref: e => this.accessTokenEl = e,
+        ref: t => this.accessTokenEl = t,
         part: "access-token",
         disabled: this.isLoading
       }) ] : null, a("gxg-label", {
@@ -273,25 +297,26 @@ const f = class {
         disabled: !this.styles || this.isLoading,
         "display-validation-styles": true,
         "display-validation-message": true,
-        ref: e => this.optionStyleEl = e,
+        ref: t => this.optionStyleEl = t,
         part: "option-style",
         class: "style"
-      }, l("gxg-combo-box-item", (e = this.styles) !== null && e !== void 0 ? e : [])), a("gxg-label", {
+      }, l("gxg-combo-box-item", (t = this.styles) !== null && t !== void 0 ? t : [])), a("gxg-label", {
         class: "module-label"
       }, this._componentLocale.options.module), a("gx-ide-entity-selector", {
         value: this.defaultModule,
         defaultValue: this.defaultModule,
         selectEntityCallback: this.selectModuleCallback,
-        ref: e => this.filterModuleEl = e,
+        ref: t => this.filterModuleEl = t,
         class: "module"
       }), a("div", {
         class: "checkboxes-options"
       }, a("gxg-form-checkbox", {
         label: this._componentLocale.options.importAs,
         class: "import-as-web-panels",
-        ref: e => this.optionImportAsEl = e,
+        ref: t => this.optionImportAsEl = t,
         part: "option-import-as-web-panels",
-        disabled: this.isLoading
+        disabled: this.isLoading,
+        onChange: this.importAsWebPanelsChangedHandler
       }), a("div", {
         class: {
           "checkboxes-options__col-right": true,
@@ -311,10 +336,10 @@ const f = class {
     };
     this.renderMessages = () => this.messages.length > 0 ? a("div", {
       class: "messages-container",
-      ref: e => this.messagesList = e
-    }, this.messages.map((e => a("gxg-text", {
-      type: this.messageType(e)
-    }, e.type, ": ", e.text)))) : null;
+      ref: t => this.messagesList = t
+    }, this.messages.map((t => a("gxg-text", {
+      type: this.messageType(t)
+    }, t.type, ": ", t.text)))) : null;
     this.renderMain = () => {
       if (this.designData) {
         /* #main*/
@@ -335,10 +360,10 @@ const f = class {
     this.renderNoDesignData = () => {
       if (!this.isLoading) {
         return a("gxg-text", {
-          textAlign: s.gxgMessage.common.textAlign,
-          padding: s.gxgMessage.common.textAlign,
-          type: s.gxgMessage.common.type,
-          maxWidth: s.gxgMessage.common.maxWidth,
+          textAlign: o.gxgMessage.common.textAlign,
+          padding: o.gxgMessage.common.textAlign,
+          type: o.gxgMessage.common.type,
+          maxWidth: o.gxgMessage.common.maxWidth,
           part: "no-design-selected"
         }, this._componentLocale.messages.noDesignSelected, " ", a("br", null), a("gxg-text", {
           type: "text-link-no-line",
@@ -361,7 +386,7 @@ const f = class {
       checked: true,
       onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler,
       onSelectedItemsChange: this.objectsTreeSelectedItemsChangedHandler,
-      ref: e => this.treeDataEl = e
+      ref: t => this.treeDataEl = t
     }));
     this.renderFooter = () => [ a("gxg-button", {
       id: "button-ok",
@@ -378,11 +403,11 @@ const f = class {
       slot: "footer-end"
     }, this._componentLocale.footer.btnCancel) ];
     this.renderPanelTab = () => {
-      const e = (this.selectedDesignType === c || this.selectedDesignType === g) && this.detailTreeModel.length > 0;
+      const t = (this.selectedDesignType === c || this.selectedDesignType === g) && this.detailTreeModel.length > 0;
       return a("div", {
         class: {
           "panel-tab": true,
-          "panel-tab--controls-tree": e
+          "panel-tab--controls-tree": t
         },
         part: "data-panel-composition-container"
       }, this.selectedDesignItem && this.selectedDesignItem.composition && this.selectedDesignItem.composition.preview ? a("div", {
@@ -391,7 +416,7 @@ const f = class {
       }, a("img", {
         src: this.selectedDesignItem && this.selectedDesignItem.composition ? this.selectedDesignItem.composition.preview : undefined,
         alt: "Preview"
-      })) : null, e ? a("gxg-tree-view", {
+      })) : null, t ? a("gxg-tree-view", {
         part: "data-panel-composition-tree",
         class: "panel-item",
         id: "gxg-tree-panel-data",
@@ -407,6 +432,22 @@ const f = class {
       src: this.selectedDesignItem ? this.selectedDesignItem : undefined,
       alt: "Preview"
     }));
+    this.tabActivatedHandler = t => {
+      if (t.detail) {
+        const e = t.detail.tab;
+        this.activeTabs = Object.assign(Object.assign({}, this.activeTabs), {
+          [this.selectedDesignType]: e
+        });
+      }
+    };
+    this.isTabActive = t => {
+      const e = this.selectedDesignType;
+      if (this.activeTabs[e] === t) {
+        return true;
+      } else {
+        return false;
+      }
+    };
     this.renderDesignTabs = () => a("gxg-tabs", {
       class: {
         "design-tabs": true,
@@ -424,50 +465,81 @@ const f = class {
       "tab-label": this._componentLocale.tabs.tokens,
       tab: "tokens",
       key: "tokens",
-      "is-selected": true
+      onTabActivated: this.tabActivatedHandler,
+      isSelected: this.isTabActive("tokens")
     }), a("gxg-tab-button", {
       hidden: !this.selectedDesignType || this.selectedDesignType !== h,
       slot: "tab-bar",
       "tab-label": this._componentLocale.tabs.styles,
       tab: "styles",
-      key: "styles"
+      key: "styles",
+      onTabActivated: this.tabActivatedHandler,
+      isSelected: this.isTabActive("styles")
     }), a("gxg-tab-button", {
       hidden: !this.selectedDesignType || this.selectedDesignType === h,
       slot: "tab-bar",
       "tab-label": this._componentLocale.tabs.composition,
       tab: "composition",
       key: "composition",
-      "is-selected": true
+      onTabActivated: this.tabActivatedHandler,
+      isSelected: this.isTabActive("composition")
+    }), a("gxg-tab-button", {
+      hidden: !this.selectedDesignType || this.selectedDesignType !== c && this.selectedDesignType !== g,
+      slot: "tab-bar",
+      "tab-label": this._componentLocale.tabs.layout,
+      tab: "layout",
+      key: "layout",
+      onTabActivated: this.tabActivatedHandler,
+      isSelected: this.isTabActive("layout")
     }), a("gxg-tab-button", {
       hidden: !this.selectedDesignType || this.selectedDesignType !== c && this.selectedDesignType !== g,
       slot: "tab-bar",
       "tab-label": this._componentLocale.tabs.code,
       tab: "code",
-      key: "code"
+      key: "code",
+      onTabActivated: this.tabActivatedHandler,
+      isSelected: this.isTabActive("code")
     })), a("gxg-tab", {
       tab: "tokens",
-      key: "tokens"
+      key: "tokens",
+      isSelected: this.isTabActive("tokens")
     }, a("div", {
-      ref: e => this.tokensFactoryRenderEl = e
+      ref: t => this.tokensFactoryRenderEl = t
     })), a("gxg-tab", {
       tab: "styles",
-      key: "styles"
+      key: "styles",
+      isSelected: this.isTabActive("styles")
     }, a("div", {
-      ref: e => this.stylesFactoryRenderEl = e
+      ref: t => this.stylesFactoryRenderEl = t
     })), a("gxg-tab", {
       tab: "composition",
-      key: "composition"
+      key: "composition",
+      isSelected: this.isTabActive("composition")
     }, this.selectedDesignType === d || this.selectedDesignType === b ? this.renderImageTab() : this.renderPanelTab()), a("gxg-tab", {
+      tab: "layout",
+      key: "layout",
+      isSelected: this.isTabActive("layout")
+    }, a("div", {
+      ref: t => this.layoutFactoryRenderEl = t
+    })), a("gxg-tab", {
       tab: "code",
-      key: "code"
+      key: "code",
+      isSelected: this.isTabActive("code")
     }, a("div", {
-      ref: e => this.codeFactoryRenderEl = e
+      ref: t => this.codeFactoryRenderEl = t
     })));
+    this.activeTabs = {
+      panels: "composition",
+      stencils: "composition",
+      images: "composition",
+      fonts: "composition",
+      design_system: "tokens"
+    };
+    this.path = "";
     this.designData = null;
     this.detailTreeModel = [];
     this.isLoading = false;
     this.messages = [];
-    this.path = "";
     this.selectedFile = undefined;
     this.selectedDesignType = undefined;
     this.selectedDesignItem = undefined;
@@ -494,9 +566,10 @@ const f = class {
     this.styles = undefined;
     this.textEditorFactoryCallback = undefined;
   }
-  watchDesignDataHandler(e) {
-    if (e) {
+  watchDesignDataHandler(t) {
+    if (t) {
       this.designDataTreeDataModel = [ {
+        order: 0,
         id: `parent@${c}`,
         class: "category tree-view-item",
         leaf: false,
@@ -505,16 +578,18 @@ const f = class {
         checkbox: true,
         checked: true,
         expanded: true,
-        items: this.designData.panels.map((e => ({
-          id: `${e.id}@${c}`,
+        items: this.designData.panels.map(((t, e) => ({
+          id: `${t.id}@${c}`,
           class: "object tree-view-item",
           leaf: true,
-          caption: e.name,
+          caption: t.name,
           startImgSrc: "general/generator",
           checkbox: true,
-          checked: true
+          checked: true,
+          selected: e === 0
         })))
       }, {
+        order: 1,
         id: `parent@${g}`,
         class: "category tree-view-item",
         leaf: false,
@@ -523,16 +598,17 @@ const f = class {
         checkbox: true,
         checked: true,
         expanded: true,
-        items: this.designData.stencils.map((e => ({
-          id: `${e.id}@${g}`,
+        items: this.designData.stencils.map((t => ({
+          id: `${t.id}@${g}`,
           class: "object tree-view-item",
           leaf: true,
-          caption: e.name,
+          caption: t.name,
           startImgSrc: "general/generator",
           checkbox: true,
           checked: true
         })))
       }, {
+        order: 2,
         id: `parent@${d}`,
         class: "category tree-view-item",
         leaf: false,
@@ -541,56 +617,48 @@ const f = class {
         checkbox: true,
         checked: true,
         expanded: true,
-        items: this.designData.images.map((e => ({
-          id: `${e.id}@${d}`,
+        items: this.designData.images.map((t => ({
+          id: `${t.id}@${d}`,
           class: "object tree-view-item",
           leaf: true,
-          caption: e.name,
+          caption: t.name,
           startImgSrc: "general/generator",
           checkbox: true,
           checked: true
         })))
       }, {
-        id: `parent@${h}`,
+        order: 3,
+        id: `parent@${b}`,
         class: "category tree-view-item",
         leaf: false,
-        caption: this._componentLocale.tree.designSystem,
+        caption: this._componentLocale.tree.fonts,
         startImgSrc: "general/knowledge-base",
         checkbox: true,
         checked: true,
         expanded: true,
-        items: this.designData.designSystem.map((e => ({
+        items: this.designData.fonts.map((t => ({
+          id: `${t.id}@${b}`,
           class: "object tree-view-item",
           leaf: true,
-          id: `${e.id}@${h}`,
-          caption: e.name,
+          caption: t.name,
           startImgSrc: "general/generator",
           checkbox: true,
           checked: true
         })))
       }, {
-        id: `parent@${b}`,
+        order: 4,
+        id: `parent@${h}`,
         class: "category tree-view-item",
-        leaf: false,
-        caption: this._componentLocale.tree.fonts,
+        leaf: true,
+        caption: this._componentLocale.tree.designSystem,
         startImgSrc: "general/knowledge-base",
         checkbox: true,
-        checked: true,
-        expanded: true,
-        items: this.designData.fonts.map((e => ({
-          id: `${e.id}@${b}`,
-          class: "object tree-view-item",
-          leaf: true,
-          caption: e.name,
-          startImgSrc: "general/generator",
-          checkbox: true,
-          checked: true
-        })))
+        checked: true
       } ];
     }
   }
-  watchShrinkTreeHandler(e) {
-    if (e) {
+  watchShrinkTreeHandler(t) {
+    if (t) {
       this.attachTreeMouseListeners();
     } else {
       this.removeTreeMouseListeners();
@@ -598,7 +666,7 @@ const f = class {
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
-    this._componentLocale = await o.getComponentStrings(this.el);
+    this._componentLocale = await s.getComponentStrings(this.el);
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -610,8 +678,8 @@ const f = class {
     this.removeTreeMouseListeners();
   }
   // 7.LISTENERS //
-  watchMessagesHandler(e, t) {
-    if (e !== t) {
+  watchMessagesHandler(t, e) {
+    if (t !== e) {
       if (this.messagesList) {
         this.messagesList.scrollTop = this.messagesList.scrollHeight;
       }
@@ -622,13 +690,13 @@ const f = class {
      * Validate necessary data input
      */
   async validate() {
-    const e = true;
-    return e;
+    const t = true;
+    return t;
   }
-  loadTreeItemCompositionModel(e) {
-    const t = [];
-    for (const a of e) {
-      let e = {
+  loadTreeItemCompositionModel(t) {
+    const e = [];
+    for (const a of t) {
+      let t = {
         id: a.name,
         caption: a.name,
         startImgSrc: a.type,
@@ -637,19 +705,20 @@ const f = class {
         leaf: a.leaf
       };
       if (a.controls) {
-        e = Object.assign(Object.assign({}, e), {
+        t = Object.assign(Object.assign({}, t), {
           items: this.loadTreeItemCompositionModel(a.controls)
         });
       }
-      t.push(e);
+      e.push(t);
     }
-    return t;
+    return e;
   }
-  getCodeFactory(e) {
-    switch (e) {
+  getCodeFactory(t) {
+    switch (t) {
      case c:
      case g:
       this.textEditorFactoryCallback("html", this.codeFactoryRenderEl, this.selectedDesignItem.code);
+      this.textEditorFactoryCallback("html", this.layoutFactoryRenderEl, this.selectedDesignItem.layout);
       break;
 
      case h:
@@ -658,8 +727,8 @@ const f = class {
       break;
     }
   }
-  renderDetailDataTree(e) {
-    switch (e) {
+  renderDetailDataTree(t) {
+    switch (t) {
      case c:
      case g:
       this.detailTreeModel = this.loadTreeItemCompositionModel(this.selectedDesignItem.composition.controls);
@@ -668,7 +737,7 @@ const f = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return a(r, {
+    return a(i, {
       class: "gx-ide-component"
     }, a("div", {
       class: "gx-ide-main-wrapper"
@@ -677,15 +746,15 @@ const f = class {
       noContentGap: true,
       displayBorderBottom: true,
       part: "options-container",
-      slimmerFooter: s.gxIdeContainer.slimmerFooter,
+      slimmerFooter: o.gxIdeContainer.slimmerFooter,
       containerTitle: this.displayTitle ? this._componentLocale.componentName : null
     }, this.renderOptions(), this.renderMain(), this.renderFooter())));
   }
   static get assetsDirs() {
-    return [ "gx-ide-assets/import-from-design" ];
+    return [ "gx-ide-assets/design-import" ];
   }
   get el() {
-    return i(this);
+    return r(this);
   }
   static get watchers() {
     return {
@@ -698,5 +767,5 @@ const f = class {
 
 f.style = n;
 
-export { f as gx_ide_import_from_design };
-//# sourceMappingURL=p-9bf62c5c.entry.js.map
+export { f as gx_ide_design_import };
+//# sourceMappingURL=p-c46c7974.entry.js.map