@genexus/genexus-ide-ui 1.0.24 → 1.0.26

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

@@ -1,193 +1,328 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './assets-manager.js';
 import { c as config } from './config.js';
-import { r as renderFormItems } from './common.js';
-import { d as defineCustomElement$4 } from './container.js';
-import { d as defineCustomElement$3 } from './entity-selector.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$2 } from './entity-selector.js';
+
+const mapStylesToComboBoxItemModel = (styles) => styles === null || styles === void 0 ? void 0 : styles.map(style => ({
+    value: style.id,
+    caption: style.label || style.name
+}));
+
+const TAB_DATA = {
+    layout: { id: "layout", caption: "Layout", slot: "layout" },
+    code: { id: "code", caption: "Code", slot: "code" },
+    tokens: { id: "tokens", caption: "Tokens", slot: "tokens" },
+    styles: { id: "styles", caption: "Styles", slot: "styles" },
+    composition: {
+        id: "composition",
+        caption: "Composition",
+        slot: "composition"
+    }
+};
+const TAB_MODEL = {
+    panels: [
+        {
+            id: TAB_DATA.composition.id,
+            name: TAB_DATA.composition.caption
+        },
+        {
+            id: TAB_DATA.layout.id,
+            name: TAB_DATA.layout.caption
+        },
+        {
+            id: TAB_DATA.code.id,
+            name: TAB_DATA.code.caption
+        }
+    ],
+    stencils: [
+        {
+            id: TAB_DATA.composition.id,
+            name: TAB_DATA.composition.caption
+        },
+        {
+            id: TAB_DATA.layout.id,
+            name: TAB_DATA.layout.caption
+        },
+        {
+            id: TAB_DATA.code.id,
+            name: TAB_DATA.code.caption
+        }
+    ],
+    images: [
+        {
+            id: TAB_DATA.composition.id,
+            name: TAB_DATA.composition.caption
+        }
+    ],
+    fonts: [
+        {
+            id: TAB_DATA.composition.id,
+            name: TAB_DATA.composition.caption
+        }
+    ],
+    designSystem: [
+        {
+            id: TAB_DATA.tokens.id,
+            name: TAB_DATA.tokens.caption
+        },
+        {
+            id: TAB_DATA.styles.id,
+            name: TAB_DATA.styles.caption
+        }
+    ]
+};
+const DESIGN_TYPE_TO_TAB_MODEL_MAP = new Map([
+    ["panels", TAB_MODEL.panels],
+    ["stencils", TAB_MODEL.stencils],
+    ["images", TAB_MODEL.images],
+    ["design_system", TAB_MODEL.designSystem],
+    ["fonts", TAB_MODEL.fonts]
+]);
 
-const designImportCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.options{padding:var(--gx-ide-container__padding);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-columns:auto 1fr;grid-template-areas:\"path-url-label path-url-wrapper\" \"access-token-label access-token\" \"style-label style\" \"module-label module\" \"checkboxes-options checkboxes-options\"}.options .path-url-label{grid-area:path-url-label}.options .path-url-wrapper{grid-area:path-url-wrapper;display:flex;flex-direction:row;gap:var(--gx-ide-grid-row-gap)}.options .path-url-wrapper__buttons-container{display:flex;flex-direction:row;gap:var(--gx-ide-container-elements-spacing)}.options .access-token-label{grid-area:access-token-label}.options .access-token{grid-area:access-token}.options .style-label{grid-area:style-label}.options .style{grid-area:style}.options .module-label{grid-area:module-label}.options .module{grid-area:module}.options .checkboxes-options{grid-area:checkboxes-options}.options--hide-access-token{grid-template-areas:\"path-url-label path-url-wrapper\" \"style-label style\" \"module-label module\" \"checkboxes-options checkboxes-options\"}.options .checkboxes-options{display:flex;justify-content:space-between;gap:var(--gx-ide-grid-row-gap)}.options .checkboxes-options__col-right{display:flex;opacity:1;transition:opacity 200ms;gap:var(--gx-ide-grid-row-gap)}.options .checkboxes-options__col-right--hidden{opacity:0}.messages-container{padding:var(--gx-ide-container__padding);height:100%;overflow-y:auto;}.messages-container::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.messages-container::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.messages-container::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.messages-container::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.messages-container::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.main{display:flex;height:100%;justify-content:center;overflow:auto}.main .design-tree,.main .design-tabs{transition:flex 200ms}.main .tree-container{flex:1}.main .design-tabs{flex:2}.main .design-tabs--fit-images img{object-fit:contain;width:100%;height:100%}.main .design-tabs img{display:block}.main--shrunken-tree .tree-container{flex:0.5}.main--shrunken-tree .design-tabs{flex:2.5}.panel-tab{height:100%;display:grid;grid-template-columns:1fr 1fr}.panel-tab .panel-item{width:100%;height:100%;overflow:auto;font-size:var(--mer-font__size--2xs);line-height:normal}.panel-tab .panel-item::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.panel-tab .panel-item::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.panel-tab .panel-item::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.panel-tab .panel-item::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.panel-tab .panel-item::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tab--hidden{display:none}";
+const designImportCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{display:grid;grid-auto-rows:max-content;grid-template-columns:minmax(88px, max-content) 1fr !important}.header--show-access-token{grid-template-areas:\"path-url-label path-url-wrapper\" \"access-token-label access-token\" \"style-label style\" \"module-label module\" \"checkboxes-options checkboxes-options\"}.header--hide-access-token{grid-template-areas:\"path-url-label path-url-wrapper\" \"style-label style\" \"module-label module\" \"checkboxes-options checkboxes-options\"}.path-url-wrapper{grid-template-columns:1fr max-content}.path-url-label{grid-area:path-url-label}.path-url-control{flex-grow:1}.select-load-button{min-inline-size:80px}.access-token-label{grid-area:access-token-label}.access-token{grid-area:access-token}.style-label{grid-area:style-label}.style{grid-area:style}.module-label{grid-area:module-label}.module{grid-area:module}.checkboxes-options{grid-area:checkboxes-options;grid-template-columns:max-content max-content;justify-content:space-between}.main{display:grid;grid-template-columns:250px 1fr;block-size:100%;overflow:auto}.main--loading{grid-template-columns:1fr}.panel-tab{block-size:100%;display:grid;grid-template-columns:1fr 300px}.panel-tab .panel-item{overflow:auto}.tree-view{padding-block:var(--mer-spacing--2xs)}.tree-view-panel-item{border-inline-start:var(--section-common-border)}.checker-board{--white-square-color:#fff1;--black-square-color:#0000;background:linear-gradient(45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(-45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(45deg, var(--black-square-color) 75%, var(--white-square-color) 75%), linear-gradient(-45deg, var(--black-square-color) 75%, var(--white-square-color) 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px}.tab{border-width:0 !important}.tab.fit-images .composition-tab-slot{font-size:0}.tab.fit-images img{object-fit:scale-down;object-position:left top;max-height:100%}.tab--hidden{display:none}.button-cancel,.button-ok{min-inline-size:var(--mer-spacing--4xl)}.messages-slot-container{block-size:100%}.composition-tab-slot{block-size:100%;overflow:auto}.empty-state{overflow:auto}.empty-state-button{transform:translateY(-12px)}.message{animation:fadeIn var(--mer-timing--fast) ease-in-out forwards}.message--info{color:var(--mer-text__on-surface)}.message--warning{color:var(--mer-text__warning)}.message--error{color:var(--mer-text__error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.combo-box.ch-disabled{--control__bg-color:var(--control__background-color--disabled);--control__border-color:var(--control__border-color--disabled);--control__color:var(--control__color--disabled);--ch-placeholder-color:var(--control-placeholder__color--disabled)}";
 
+var __classPrivateFieldGet = (undefined && undefined.__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 = (undefined && undefined.__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;
 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"
 ];
 const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImportFromDesign extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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:
@@ -208,171 +343,264 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
             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);
+            }
+        });
+        _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.
+            }
+        });
+        _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;
+            }
+            else if (this.pathIsValid) {
+                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.btnLoad;
             }
             else {
-                this.shrunkenTree = false;
+                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.selectFileButton;
             }
-        };
-        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();
+            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" }))));
             }
-        };
-        this.pathURLFileValueChangedHandler = (e) => {
-            this.path = e.detail;
-        };
-        // 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 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;
-            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;
@@ -382,199 +610,173 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
         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
                 }
             ];
         }
     }
-    watchShrinkTreeHandler(shrink) {
-        if (shrink) {
-            this.attachTreeMouseListeners();
-        }
-        else {
-            this.removeTreeMouseListeners();
-        }
+    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;
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-    }
-    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;
+    }
+    stylesChanged(newStyles) {
+        this.stylesAsComboBoxModel = mapStylesToComboBoxItemModel(newStyles);
     }
-    disconnectedCallback() {
-        this.removeTreeMouseListeners();
+    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;
+            if (__classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f")) {
+                __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").scrollTop = __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").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) });
-            }
-            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 assetsDirs() { return ["gx-ide-assets/design-import"]; }
     get el() { return this; }
     static get watchers() { return {
-        "designData": ["watchDesignDataHandler"],
-        "shrinkTree": ["watchShrinkTreeHandler"],
+        "pathIsValid": ["pathIsValidChanged"],
+        "designData": ["designDataChanged"],
+        "path": ["pathChanged"],
+        "accessToken": ["accessTokenChanged"],
+        "styles": ["stylesChanged"],
         "messages": ["watchMessagesHandler"]
     }; }
     static get style() { return designImportCss; }
 }, [1, "gx-ide-design-import", {
-        "displayTitle": [4, "display-title"],
-        "extensions": [1],
+        "reactiveSettings": [16],
+        "extensions": [16],
         "defaultModule": [16],
+        "path": [1025],
+        "accessToken": [1025, "access-token"],
+        "importAsWebPanels": [4, "import-as-web-panels"],
         "selectModuleCallback": [16],
         "cancelCallback": [16],
         "confirmCallback": [16],
@@ -584,53 +786,91 @@ const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImport
         "loadImageCallback": [16],
         "loadPanelDataCallback": [16],
         "requiresAccessTokenCallback": [16],
-        "shadow": [4],
         "styles": [16],
         "textEditorFactoryCallback": [16],
+        "reRenderCounter": [32],
+        "stylesAsComboBoxModel": [32],
+        "styleValue": [32],
+        "accessTokenHasError": [32],
+        "pathIsValid": [32],
+        "tabsModel": [32],
         "activeTabs": [32],
-        "path": [32],
+        "renderedTabs": [32],
         "designData": [32],
         "detailTreeModel": [32],
         "isLoading": [32],
+        "isLoaded": [32],
         "messages": [32],
         "selectedFile": [32],
         "selectedDesignType": [32],
         "selectedDesignItem": [32],
-        "showAccessToken": [32],
+        "requiresAccessToken": [32],
         "designDataTreeDataModel": [32],
         "updateTabsActiveTab": [32],
         "fitImages": [32],
-        "shrinkTree": [32],
-        "shrunkenTree": [32],
-        "treeSh": [32],
-        "validate": [64]
+        "lastLoadCallbackSettingValues": [32]
     }, undefined, {
-        "designData": ["watchDesignDataHandler"],
-        "shrinkTree": ["watchShrinkTreeHandler"],
+        "pathIsValid": ["pathIsValidChanged"],
+        "designData": ["designDataChanged"],
+        "path": ["pathChanged"],
+        "accessToken": ["accessTokenChanged"],
+        "styles": ["stylesChanged"],
         "messages": ["watchMessagesHandler"]
     }]);
+_GxIdeImportFromDesign_componentLocale = new WeakMap(), _GxIdeImportFromDesign_loadedItems = new WeakMap(), _GxIdeImportFromDesign_emptyStateAnimated = new WeakMap(), _GxIdeImportFromDesign_formattedExtensions = new WeakMap(), _GxIdeImportFromDesign_accessTokenEl = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsEl = new WeakMap(), _GxIdeImportFromDesign_moduleEl = new WeakMap(), _GxIdeImportFromDesign_messagesList = new WeakMap(), _GxIdeImportFromDesign_panelsSelected = new WeakMap(), _GxIdeImportFromDesign_stencilsSelected = new WeakMap(), _GxIdeImportFromDesign_imagesSelected = new WeakMap(), _GxIdeImportFromDesign_fontsSelected = new WeakMap(), _GxIdeImportFromDesign_fileInputHiddenEl = new WeakMap(), _GxIdeImportFromDesign_pathEl = new WeakMap(), _GxIdeImportFromDesign_initializeActiveTabs = new WeakMap(), _GxIdeImportFromDesign_evaluateAccessTokenRender = new WeakMap(), _GxIdeImportFromDesign_pathURLBlurHandler = new WeakMap(), _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_getLoadedItem = new WeakMap(), _GxIdeImportFromDesign_validatePath = new WeakMap(), _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_selectFileHandler = new WeakMap(), _GxIdeImportFromDesign_styleComboBoxInputHandler = new WeakMap(), _GxIdeImportFromDesign_moduleInputHandler = new WeakMap(), _GxIdeImportFromDesign_loadData = new WeakMap(), _GxIdeImportFromDesign_messageCallback = new WeakMap(), _GxIdeImportFromDesign_getDesignDataDetail = new WeakMap(), _GxIdeImportFromDesign_confirm = new WeakMap(), _GxIdeImportFromDesign_cancel = new WeakMap(), _GxIdeImportFromDesign_fitImagesHandler = new WeakMap(), _GxIdeImportFromDesign_getPanelsSelectedItem = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_removeFileSelection = new WeakMap(), _GxIdeImportFromDesign_selectFileInputChangedHandler = new WeakMap(), _GxIdeImportFromDesign_accessFocusHandler = new WeakMap(), _GxIdeImportFromDesign_accessBlurHandler = new WeakMap(), _GxIdeImportFromDesign_pathUrlInputHandler = new WeakMap(), _GxIdeImportFromDesign_renderHeader = new WeakMap(), _GxIdeImportFromDesign_renderMessages = new WeakMap(), _GxIdeImportFromDesign_renderMain = new WeakMap(), _GxIdeImportFromDesign_renderDesignTree = new WeakMap(), _GxIdeImportFromDesign_renderFooter = new WeakMap(), _GxIdeImportFromDesign_renderPanelTab = new WeakMap(), _GxIdeImportFromDesign_renderImageTab = new WeakMap(), _GxIdeImportFromDesign_tabSelectionChangedHandler = new WeakMap(), _GxIdeImportFromDesign_renderDesignTabsCh = new WeakMap(), _GxIdeImportFromDesign_instances = new WeakSet(), _GxIdeImportFromDesign_loadTreeItemCompositionModel = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(controls) {
+    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;
+    }
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-design-import", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title"];
+    const components = ["gx-ide-design-import", "gx-ide-empty-state", "gx-ide-entity-selector"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-design-import":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeImportFromDesign);
             }
             break;
-        case "gx-ide-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "gx-ide-entity-selector":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "gx-ide-title":
+        case "gx-ide-entity-selector":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }