@genexus/genexus-ide-ui 0.0.140 → 0.0.142

package/dist/components/{gx-ide-import-from-design.js → gx-ide-design-import.js}

@@ -28,14 +28,14 @@ import { d as defineCustomElement$4 } from './title.js';
 import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './tree-view2.js';
 
-const importFromDesignCss = ":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)}.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-container{display:flex;height:100%;width:100%;box-sizing:border-box}p{margin:0;font-size:var(--mer-font__size--xxs)}: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--xxs);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 = ":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)}.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-container{display:flex;height:100%;width:100%;box-sizing:border-box}p{margin:0;font-size:var(--mer-font__size--xxs)}: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--xxs);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 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 GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImportFromDesign extends HTMLElement {
+const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImportFromDesign extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -46,6 +46,12 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
          * An array that keeps track of the tree items id's (design system data type + item id) along with the content, that will be used to save and retrieve items information, in order to avoid using a callback to get items information that was already get. loadedItemsArray will be reset every time a new design is loaded.
          */
         this.loadedItems = new Map();
+        /**
+         * The path/URL value when loadCallback was called for the last time. This is used to determine
+         * if there is a difference with the actual path/URL value, in order to know if calling loadCallback
+         * again is required on blur on Path/URL/File input.
+         */
+        this.pathOnLoadCallback = "";
         this.panelsSelected = [];
         this.stencilsSelected = [];
         // private imagesSelected: string[] = [];
@@ -85,7 +91,9 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                 const idList = itemComposedId.split("@");
                 const itemId = idList[0];
                 const itemDesignType = idList[1];
-                if (itemId && itemId !== "parent") {
+                const isChildNode = itemId && itemId !== "parent";
+                const isDesignSystem = itemDesignType === "design_system";
+                if (isChildNode || isDesignSystem) {
                     this.selectedDesignType = itemDesignType;
                     const loadedItem = this.getLoadedItem(itemComposedId);
                     if (!loadedItem) {
@@ -135,19 +143,22 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
             this.stencilsSelected = stencils;
         };
         this.selectFile = () => {
-            this.optionPathEl.openFile();
-        };
-        this.pathOnInputHandler = (e) => {
-            this.path = e.detail;
+            this.pathURLFile.openFile();
         };
-        this.pathOnFileSelected = (e) => {
+        this.pathOnFileSelected = async (e) => {
             this.selectedFile = e.detail[0];
             const fileName = e.detail[0].name;
             this.path = fileName;
-            this.evaluateAccessToken();
+            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
         };
-        this.evaluateAccessToken = async () => {
-            this.showAccessToken = await this.requiresAccessTokenCallback(this.optionPathEl.value);
+        this.pathURLFileBlurHandler = async () => {
+            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
+            if (this.path !== this.pathOnLoadCallback) {
+                // if loadOnBlur is true, and the actual path/URL value differs from the one
+                // when loadCallback was called the last time, it is required to call loadCallback
+                // again, because the DesignData might differ from the actual.
+                this.loadData();
+            }
         };
         this.loadData = async () => {
             this.isLoading = true;
@@ -182,6 +193,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                     this.fontsSelected = [];
                 }
             });
+            this.pathOnLoadCallback = this.path;
             this.isLoading = false;
         };
         this.messageCallback = message => {
@@ -243,18 +255,30 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                 this.shrunkenTree = false;
             }
         };
+        this.importAsWebPanelsChangedHandler = () => {
+            // When "Import as Web Panels" checkbox value changes, loadCallback has to be
+            // called again, because the received DesignData differs between having
+            // "Import as Web Panels" checked or not. This only makes sense if a file is
+            // selected or the Path/URL input is not empty
+            if (this.path.length !== 0 || !this.selectedFile) {
+                this.loadData();
+            }
+        };
+        this.pathURLFileValueChangedHandler = (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, onInput: this.pathOnInputHandler, onFileSelected: this.pathOnFileSelected, onBlur: this.evaluateAccessToken, ref: (el) => (this.optionPathEl = el), part: "option-path", disabled: this.isLoading, type: "file", acceptFile: this.extensions, class: "path-url", placeholder: this._componentLocale.options.pathPlaceholder }), 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: "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 }), h("div", { class: {
+                : 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 })))));
@@ -305,25 +329,49 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
         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", "is-selected": true }), 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" }), 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", "is-selected": true }), 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" })), h("gxg-tab", { tab: "tokens", key: "tokens" }, h("div", { ref: (el) => (this.tokensFactoryRenderEl = el) })), h("gxg-tab", { tab: "styles", key: "styles" }, h("div", { ref: (el) => (this.stylesFactoryRenderEl = el) })), h("gxg-tab", { tab: "composition", key: "composition" }, this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||
+                        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 ||
                 this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
                 ? this.renderImageTab()
-                : this.renderPanelTab()), h("gxg-tab", { tab: "code", key: "code" }, h("div", { ref: (el) => (this.codeFactoryRenderEl = el) }))));
+                : 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 = "";
         this.designData = null;
         this.detailTreeModel = [];
         this.isLoading = false;
         this.messages = [];
-        this.path = "";
         this.selectedFile = undefined;
         this.selectedDesignType = undefined;
         this.selectedDesignItem = undefined;
@@ -354,6 +402,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
         if (newDesignData) {
             this.designDataTreeDataModel = [
                 {
+                    order: 0,
                     id: `parent@${DESIGN_DATA_TYPE_PANELS}`,
                     class: "category tree-view-item",
                     leaf: false,
@@ -362,17 +411,19 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                     checkbox: true,
                     checked: true,
                     expanded: true,
-                    items: this.designData.panels.map(item => ({
+                    items: this.designData.panels.map((item, i) => ({
                         id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,
                         class: "object tree-view-item",
                         leaf: true,
                         caption: item.name,
                         startImgSrc: "general/generator",
                         checkbox: true,
-                        checked: true
+                        checked: true,
+                        selected: i === 0
                     }))
                 },
                 {
+                    order: 1,
                     id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,
                     class: "category tree-view-item",
                     leaf: false,
@@ -392,6 +443,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                     }))
                 },
                 {
+                    order: 2,
                     id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,
                     class: "category tree-view-item",
                     leaf: false,
@@ -411,18 +463,19 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                     }))
                 },
                 {
-                    id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
+                    order: 3,
+                    id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
                     class: "category tree-view-item",
                     leaf: false,
-                    caption: this._componentLocale.tree.designSystem,
+                    caption: this._componentLocale.tree.fonts,
                     startImgSrc: "general/knowledge-base",
                     checkbox: true,
                     checked: true,
                     expanded: true,
-                    items: this.designData.designSystem.map(item => ({
+                    items: this.designData.fonts.map(item => ({
+                        id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
                         class: "object tree-view-item",
                         leaf: true,
-                        id: `${item.id}@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
                         caption: item.name,
                         startImgSrc: "general/generator",
                         checkbox: true,
@@ -430,23 +483,14 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
                     }))
                 },
                 {
-                    id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
+                    order: 4,
+                    id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
                     class: "category tree-view-item",
-                    leaf: false,
-                    caption: this._componentLocale.tree.fonts,
+                    leaf: true,
+                    caption: this._componentLocale.tree.designSystem,
                     startImgSrc: "general/knowledge-base",
                     checkbox: true,
-                    checked: true,
-                    expanded: true,
-                    items: this.designData.fonts.map(item => ({
-                        id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
-                        class: "object tree-view-item",
-                        leaf: true,
-                        caption: item.name,
-                        startImgSrc: "general/generator",
-                        checkbox: true,
-                        checked: true
-                    }))
+                    checked: true
                 }
             ];
         }
@@ -511,6 +555,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
             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);
@@ -530,15 +575,15 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
     render() {
         return (h(Host, { class: "gx-ide-component" }, 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()))));
     }
-    static get assetsDirs() { return ["gx-ide-assets/import-from-design"]; }
+    static get assetsDirs() { return ["gx-ide-assets/design-import"]; }
     get el() { return this; }
     static get watchers() { return {
         "designData": ["watchDesignDataHandler"],
         "shrinkTree": ["watchShrinkTreeHandler"],
         "messages": ["watchMessagesHandler"]
     }; }
-    static get style() { return importFromDesignCss; }
-}, [1, "gx-ide-import-from-design", {
+    static get style() { return designImportCss; }
+}, [1, "gx-ide-design-import", {
         "displayTitle": [4, "display-title"],
         "extensions": [1],
         "defaultModule": [16],
@@ -554,11 +599,12 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
         "shadow": [4],
         "styles": [16],
         "textEditorFactoryCallback": [16],
+        "activeTabs": [32],
+        "path": [32],
         "designData": [32],
         "detailTreeModel": [32],
         "isLoading": [32],
         "messages": [32],
-        "path": [32],
         "selectedFile": [32],
         "selectedDesignType": [32],
         "selectedDesignItem": [32],
@@ -579,11 +625,11 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-import-from-design", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-drop", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
+    const components = ["gx-ide-design-import", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-drop", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
     components.forEach(tagName => { switch (tagName) {
-        case "gx-ide-import-from-design":
+        case "gx-ide-design-import":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, GxIdeImportFromDesign$1);
+                customElements.define(tagName, GxIdeImportFromDesign);
             }
             break;
         case "ch-checkbox":
@@ -714,9 +760,9 @@ function defineCustomElement$1() {
     } });
 }
 
-const GxIdeImportFromDesign = GxIdeImportFromDesign$1;
+const GxIdeDesignImport = GxIdeImportFromDesign;
 const defineCustomElement = defineCustomElement$1;
 
-export { GxIdeImportFromDesign, defineCustomElement };
+export { GxIdeDesignImport, defineCustomElement };
 
-//# sourceMappingURL=gx-ide-import-from-design.js.map
+//# sourceMappingURL=gx-ide-design-import.js.map

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

@@ -0,0 +1 @@
+{"file":"gx-ide-design-import.js","mappings":"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","names":[],"sources":["src/components/design-import/design-import.scss?tag=gx-ide-design-import&encapsulation=shadow","src/components/design-import/design-import.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"~@genexus/gemini/dist/collection/globals/mixins.scss\";\n\n:host {\n}\n\n/*--- Options ---*/\n.options {\n  padding: var(--gx-ide-container__padding);\n  border-block-end: 1px solid var(--gx-ide-container-border-color);\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"path-url-label path-url-wrapper\"\n    \"access-token-label access-token\"\n    \"style-label style\"\n    \"module-label module\"\n    \"checkboxes-options checkboxes-options\";\n\n  .path-url-label {\n    grid-area: path-url-label;\n  }\n  .path-url-wrapper {\n    grid-area: path-url-wrapper;\n    display: flex;\n    flex-direction: row;\n    gap: var(--gx-ide-grid-row-gap);\n\n    &__buttons-container {\n      display: flex;\n      flex-direction: row;\n      gap: var(--gx-ide-container-elements-spacing);\n    }\n  }\n  .access-token-label {\n    grid-area: access-token-label;\n  }\n  .access-token {\n    grid-area: access-token;\n  }\n  .style-label {\n    grid-area: style-label;\n  }\n  .style {\n    grid-area: style;\n  }\n  .module-label {\n    grid-area: module-label;\n  }\n  .module {\n    grid-area: module;\n  }\n  .checkboxes-options {\n    grid-area: checkboxes-options;\n  }\n\n  &--hide-access-token {\n    grid-template-areas:\n      \"path-url-label path-url-wrapper\"\n      \"style-label style\"\n      \"module-label module\"\n      \"checkboxes-options checkboxes-options\";\n  }\n\n  .checkboxes-options {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--gx-ide-grid-row-gap);\n\n    &__col-right {\n      display: flex;\n      opacity: 1;\n      transition: opacity 200ms;\n      gap: var(--gx-ide-grid-row-gap);\n      &--hidden {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n/*--- Messages Grid ---*/\n.messages-container {\n  padding: var(--gx-ide-container__padding);\n  height: 100%;\n  overflow-y: auto;\n  @include gxg-scrollbar;\n}\n\n/*--- Main ---*/\n.main {\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  overflow: auto;\n  .design-tree,\n  .design-tabs {\n    transition: flex 200ms;\n  }\n  .tree-container {\n    flex: 1;\n  }\n  .design-tabs {\n    flex: 2;\n\n    &--fit-images {\n      img {\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n      }\n    }\n    img {\n      display: block;\n    }\n  }\n  &--shrunken-tree {\n    .tree-container {\n      flex: 0.5;\n    }\n    .design-tabs {\n      flex: 2.5;\n    }\n  }\n}\n.panel-tab {\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n\n  .panel-item {\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    @include gxg-scrollbar;\n    font-size: var(--mer-font__size--xxs);\n    line-height: normal;\n  }\n}\n\n/*--- Tabs ---*/\n.tab--hidden {\n  display: none;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport {\n  TextAlign,\n  TextPadding,\n  TextType\n} from \"@genexus/gemini/dist/types/components/text/text\";\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\nimport { TreeViewItemModelExtended } from \"@genexus/chameleon-controls-library\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { renderFormItems } from \"../../common/common\";\nimport { EntityData, GxOption } from \"../../common/types\";\nimport { CheckboxInfo } from \"@genexus/gemini\";\n\nconst DESIGN_DATA_TYPE_PANELS = \"panels\";\nconst DESIGN_DATA_TYPE_STENCILS = \"stencils\";\nconst DESIGN_DATA_TYPE_IMAGES = \"images\";\nconst DESIGN_DATA_TYPE_DESIGN_SYSTEM = \"design_system\";\nconst DESIGN_DATA_TYPE_FONTS = \"fonts\";\n\n@Component({\n  tag: \"gx-ide-design-import\",\n  styleUrl: \"design-import.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/design-import\"]\n})\nexport class GxIdeImportFromDesign {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  /**\n   * 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.\n   */\n  private loadedItems: Map<string, ItemLoadedInfo> = new Map();\n\n  /**\n   * The path/URL value when loadCallback was called for the last time. This is used to determine\n   * if there is a difference with the actual path/URL value, in order to know if calling loadCallback\n   * again is required on blur on Path/URL/File input.\n   */\n  private pathOnLoadCallback = \"\";\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeDesignImportElement;\n\n  /* References needed to collect data */\n  private pathURLFile!: HTMLGxgFormTextElement;\n  private accessTokenEl!: HTMLGxgFormTextElement;\n  private optionStyleEl!: HTMLGxgComboBoxElement;\n  private optionImportAsEl!: HTMLGxgFormCheckboxElement;\n  private filterModuleEl!: HTMLGxIdeEntitySelectorElement;\n  private messagesList: HTMLElement;\n  private panelsSelected: string[] = [];\n  private stencilsSelected: string[] = [];\n  // private imagesSelected: string[] = [];\n  // private designSystemSelected: string[] = [];\n  private fontsSelected: string[] = [];\n  private codeFactoryRenderEl!: HTMLElement;\n  private layoutFactoryRenderEl!: HTMLElement;\n  private tokensFactoryRenderEl!: HTMLElement;\n  private stylesFactoryRenderEl!: HTMLElement;\n  private treeDataEl!: HTMLGxgTreeViewElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() activeTabs: DesignObjectType = {\n    panels: \"composition\",\n    stencils: \"composition\",\n    images: \"composition\",\n    fonts: \"composition\",\n    design_system: \"tokens\"\n  };\n\n  /**\n   * The path/URL for load the design data\n   */\n  @State() path = \"\";\n\n  /**\n   * The design data loaded from file\n   */\n  @State() designData: DesignData = null;\n  @Watch(\"designData\")\n  watchDesignDataHandler(newDesignData: DesignData) {\n    if (newDesignData) {\n      this.designDataTreeDataModel = [\n        {\n          order: 0,\n          id: `parent@${DESIGN_DATA_TYPE_PANELS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.panels,\n          startImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.panels.map((item, i) => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            startImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true,\n            selected: i === 0\n          }))\n        },\n        {\n          order: 1,\n          id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.stencils,\n          startImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.stencils.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_STENCILS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            startImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          order: 2,\n          id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.images,\n          startImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.images.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_IMAGES}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            startImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          order: 3,\n          id: `parent@${DESIGN_DATA_TYPE_FONTS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.fonts,\n          startImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.fonts.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            startImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          order: 4,\n          id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,\n          class: \"category tree-view-item\",\n          leaf: true,\n          caption: this._componentLocale.tree.designSystem,\n          startImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true\n        }\n      ];\n\n      this.designDataTreeDataModel;\n    }\n  }\n\n  /**\n   * The model data loaded into the detail tree\n   */\n  @State() detailTreeModel: TreeViewItemModel[] = [];\n\n  /**\n   * If the design data is loading or not, for disabled actions\n   */\n  @State() isLoading = false;\n\n  /**\n   * The messages receive when the file is loading\n   */\n  @State() messages: MessageData[] = [];\n\n  /**\n   * The file selected for load the design data\n   */\n  @State() selectedFile: File;\n\n  /**\n   * The type of the design data selected for show it visual tabs\n   */\n  @State() selectedDesignType: DesignType;\n\n  /**\n   * The item of the design data selected for show its contents on visual tabs\n   */\n  @State() selectedDesignItem: any;\n\n  /**\n   * When show or not the access token input field\n   */\n  @State() showAccessToken: any;\n\n  /**\n   * the design data tree view data model\n   */\n  @State() designDataTreeDataModel: TreeViewItemModel[] = [];\n\n  /**\n   * Used to trigger a re-render after an item has been selected on renderDesignTree, in order to set the first tab as the active tab (setFirstActiveTab()), since calling this method inside objectsTreeSelectedItemsChangedHandler does not always work without a setTimeOut.\n   */\n  @State() updateTabsActiveTab: boolean = false;\n\n  /**\n   * If true, images will be fitted in the container\n   */\n  @State() fitImages = false;\n\n  /**\n   * If true, the left tree will be shrink and expanded to allow more space for the content\n   */\n  @State() shrinkTree = false;\n  @Watch(\"shrinkTree\")\n  watchShrinkTreeHandler(shrink: boolean) {\n    if (shrink) {\n      this.attachTreeMouseListeners();\n    } else {\n      this.removeTreeMouseListeners();\n    }\n  }\n\n  /**\n   * If true the left tree will be shrunken\n   */\n  @State() shrunkenTree = false;\n\n  @State() treeSh = false;\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * The valid extensions for the files that will be loaded in Path/URL (ie.: \".fig, .sketch\")\n   */\n  @Prop() readonly extensions!: string;\n\n  /**\n   * The default value for the module/folder filter\n   */\n  @Prop() readonly defaultModule: EntityData;\n\n  /**\n   * Callback invoked when the action is executed in the Module/Folder filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled.\n   */\n  @Prop() readonly selectModuleCallback: SelectModuleCallback;\n\n  /**\n   * This is a function provided by the developer that cancel the load operation.\n   */\n  @Prop() readonly cancelCallback!: CancelCallback;\n\n  /**\n   * This is a function provided by the developer that init the process of import a design.\n   */\n  @Prop() readonly confirmCallback!: ConfirmCallback;\n\n  /**\n   * This is a function provided by the developer that return the list of types of data loaded from file or url.\n   */\n  @Prop() readonly loadCallback!: LoadCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Design System type of data.\n   */\n  // eslint-disable-next-line prettier/prettier\n  @Prop() readonly loadDesignSystemCallback!: LoadDesignSystemCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Font type of data.\n   */\n  @Prop() readonly loadFontCallback!: LoadFontCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of an Image System type of data.\n   */\n  @Prop() readonly loadImageCallback!: LoadImageCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Panel type of data.\n   */\n  @Prop() readonly loadPanelDataCallback!: LoadPanelDataCallback;\n\n  /**\n   * Callback invoked to determinate if accessing to a design requires an authentication token\n   */\n  @Prop() readonly requiresAccessTokenCallback!: RequiresAccessTokenCallback;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * The styles render in the option style selector\n   */\n  @Prop() readonly styles!: GxOption[];\n\n  /**\n   * This is a function provided by the developer for create an instance of a text editor.\n   */\n  // eslint-disable-next-line prettier/prettier\n  @Prop() readonly textEditorFactoryCallback!: TextEditorFactoryCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeTreeMouseListeners();\n  }\n\n  // 7.LISTENERS //\n\n  @Watch(\"messages\")\n  watchMessagesHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (this.messagesList) {\n        this.messagesList.scrollTop = this.messagesList.scrollHeight;\n      }\n    }\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * Validate necessary data input\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    const isValid = true;\n    return isValid;\n  }\n\n  // 9.LOCAL METHODS //\n\n  private attachTreeMouseListeners = () => {\n    this.treeDataEl.addEventListener(\"mouseenter\", this.treeMouseEnter);\n    this.treeDataEl.addEventListener(\"mouseleave\", this.treeMouseLeave);\n  };\n  private removeTreeMouseListeners = () => {\n    this.treeDataEl.removeEventListener(\"mouseenter\", this.treeMouseEnter);\n    this.treeDataEl.removeEventListener(\"mouseleave\", this.treeMouseLeave);\n  };\n  private treeMouseEnter = () => {\n    this.shrunkenTree = false;\n  };\n  private treeMouseLeave = () => {\n    this.shrunkenTree = true;\n  };\n\n  private messageType = (message: MessageData): TextType => {\n    if (message.type === \"error\") {\n      return \"text-alert-error\";\n    } else if (message.type === \"warning\") {\n      return \"text-alert-warning\";\n    } else {\n      return \"text-gray\";\n    }\n  };\n\n  private loadTreeItemCompositionModel(\n    controls: DesignPanelControlData[]\n  ): TreeViewItemModel[] {\n    const modelList: TreeViewItemModel[] = [];\n    for (const control of controls) {\n      let model: TreeViewItemModel = {\n        id: control.name,\n        caption: control.name,\n        startImgSrc: control.type,\n        checkbox: false,\n        expanded: true,\n        leaf: control.leaf\n      };\n      if (control.controls) {\n        model = {\n          ...model,\n          items: this.loadTreeItemCompositionModel(control.controls)\n        };\n      }\n      modelList.push(model);\n    }\n    return modelList;\n  }\n\n  private objectsTreeSelectedItemsChangedHandler = async (\n    event: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    if (event.detail.length) {\n      const item = event.detail[0]?.item;\n      const itemComposedId = item.id;\n      const idList = itemComposedId.split(\"@\");\n      const itemId = idList[0];\n      const itemDesignType: DesignType = idList[1] as DesignType;\n      const isChildNode = itemId && itemId !== \"parent\";\n      const isDesignSystem = itemDesignType === \"design_system\";\n      if (isChildNode || isDesignSystem) {\n        this.selectedDesignType = itemDesignType;\n        const loadedItem = this.getLoadedItem(itemComposedId);\n        if (!loadedItem) {\n          const designDataDetail: DesignItemDataDetail =\n            await this.getDesignDataDetail(itemId, this.selectedDesignType);\n          this.loadedItems.set(itemComposedId, {\n            designType: this.selectedDesignType,\n            designDataDetail: designDataDetail\n          });\n        } else {\n          /* Item has been queried already. The item content exists already. */\n          this.selectedDesignType = loadedItem.designType;\n          this.selectedDesignItem = loadedItem.designDataDetail;\n          this.getCodeFactory(loadedItem.designType);\n          this.renderDetailDataTree(loadedItem.designType);\n        }\n      }\n    }\n  };\n\n  private getLoadedItem = (id: string): ItemLoadedInfo | undefined => {\n    return this.loadedItems?.get(id);\n  };\n\n  private objectsTreeCheckedItemsChangedHandler = (\n    event: CustomEvent<Map<string, TreeViewItemModelExtended>>\n  ) => {\n    const items = Array.from(event.detail.values());\n    let currentParentId = null;\n    const result: { [key: string]: string[] } = {};\n\n    for (const item of items) {\n      if (item.item.id.startsWith(\"parent@\")) {\n        currentParentId = item.item.id.split(\"@\")[1];\n        result[currentParentId] = [];\n      } else if (item.item.checked && currentParentId) {\n        const parentId = item.item.id.split(\"@\")[1];\n        if (parentId === currentParentId) {\n          const id = item.item.id.split(\"@\")[0];\n          result[currentParentId].push(id);\n        }\n      }\n    }\n    // const { designSystem, fonts, images, panels, stencils } = result;\n    const { fonts, panels, stencils } = result;\n\n    // this.designSystemSelected = designSystem;\n    this.fontsSelected = fonts;\n    // this.imagesSelected = images;\n    this.panelsSelected = panels;\n    this.stencilsSelected = stencils;\n  };\n\n  private selectFile = (): void => {\n    this.pathURLFile.openFile();\n  };\n\n  private pathOnFileSelected = async (e: any) => {\n    this.selectedFile = e.detail[0];\n    const fileName = e.detail[0].name;\n    this.path = fileName;\n    this.showAccessToken = await this.requiresAccessTokenCallback(\n      this.pathURLFile.value\n    );\n  };\n\n  private pathURLFileBlurHandler = async () => {\n    this.showAccessToken = await this.requiresAccessTokenCallback(\n      this.pathURLFile.value\n    );\n\n    if (this.path !== this.pathOnLoadCallback) {\n      // if loadOnBlur is true, and the actual path/URL value differs from the one\n      // when loadCallback was called the last time, it is required to call loadCallback\n      // again, because the DesignData might differ from the actual.\n      this.loadData();\n    }\n  };\n\n  private loadData = async (): Promise<void> => {\n    this.isLoading = true;\n    const source = this.selectedFile ? this.selectedFile : this.path;\n    const token = this.accessTokenEl ? this.accessTokenEl.value : undefined;\n    this.designData = null;\n    await this.loadCallback(source, token, this.messageCallback).then(\n      (designData: DesignData) => {\n        // this.isLoading = false;\n        this.messages = [];\n        this.designData = designData;\n        if (this.designData) {\n          this.panelsSelected = [\n            ...this.designData.panels.map(item => item.id)\n          ];\n          this.stencilsSelected = [\n            ...this.designData.stencils.map(item => item.id)\n          ];\n          // this.imagesSelected = [\n          //   ...this.designData.images.map(item => item.id)\n          // ];\n          // this.designSystemSelected = [\n          //   ...this.designData.designSystem.map(item => item.id)\n          // ];\n          this.fontsSelected = [...this.designData.fonts.map(item => item.id)];\n        } else {\n          // There was probably an error\n          this.panelsSelected = [];\n          this.stencilsSelected = [];\n          // this.imagesSelected = [];\n          // this.designSystemSelected = [];\n          this.fontsSelected = [];\n        }\n      }\n    );\n    this.pathOnLoadCallback = this.path;\n    this.isLoading = false;\n  };\n\n  private messageCallback: LoadMessageCallback = message => {\n    this.messages = [...this.messages, message];\n  };\n\n  private getDesignDataDetail = async (\n    id: string,\n    designType: DesignType\n  ): Promise<DesignItemDataDetail> => {\n    let loadFn:\n      | LoadPanelDataCallback\n      | LoadImageCallback\n      | LoadFontCallback\n      | LoadDesignSystemCallback;\n\n    switch (designType) {\n      case DESIGN_DATA_TYPE_IMAGES:\n        loadFn = this.loadImageCallback;\n        break;\n      case DESIGN_DATA_TYPE_DESIGN_SYSTEM:\n        loadFn = this.loadDesignSystemCallback;\n        break;\n      case DESIGN_DATA_TYPE_FONTS:\n        loadFn = this.loadFontCallback;\n        break;\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        loadFn = this.loadPanelDataCallback;\n        break;\n    }\n\n    let returnedData: DesignItemDataDetail;\n    await loadFn(id).then((data: DesignItemDataDetail) => {\n      this.selectedDesignType = designType;\n      this.selectedDesignItem = data;\n      this.getCodeFactory(designType);\n      this.renderDetailDataTree(designType);\n      returnedData = data;\n    });\n\n    return returnedData;\n  };\n\n  private getCodeFactory(designType: string) {\n    switch (designType) {\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        this.textEditorFactoryCallback(\n          \"html\",\n          this.codeFactoryRenderEl,\n          this.selectedDesignItem.code\n        );\n        this.textEditorFactoryCallback(\n          \"html\",\n          this.layoutFactoryRenderEl,\n          this.selectedDesignItem.layout\n        );\n        break;\n      case DESIGN_DATA_TYPE_DESIGN_SYSTEM:\n        this.textEditorFactoryCallback(\n          \"tokens\",\n          this.tokensFactoryRenderEl,\n          this.selectedDesignItem.tokens\n        );\n        this.textEditorFactoryCallback(\n          \"styles\",\n          this.stylesFactoryRenderEl,\n          this.selectedDesignItem.styles\n        );\n        break;\n    }\n  }\n\n  private confirm = (): void => {\n    this.confirmCallback({\n      panels: this.panelsSelected,\n      stencils: this.stencilsSelected,\n      fonts: this.fontsSelected,\n      /* images: this.imagesSelected, */\n      moduleId: this.filterModuleEl?.value?.id,\n      styleName: this.optionStyleEl.value,\n      importAsWebPanels: this.optionImportAsEl.checked\n    });\n  };\n\n  private cancel = (): void => {\n    this.cancelCallback();\n    this.isLoading = false;\n  };\n\n  private fitImagesHandler = (e: CustomEvent<CheckboxInfo>) => {\n    this.fitImages = e.detail.value;\n  };\n\n  private shrinkTreeHandler = (e: CustomEvent<CheckboxInfo>) => {\n    const checked = e.detail.value;\n    this.shrinkTree = checked;\n    if (checked) {\n      this.shrunkenTree = true;\n    } else {\n      this.shrunkenTree = false;\n    }\n  };\n\n  private importAsWebPanelsChangedHandler = () => {\n    // When \"Import as Web Panels\" checkbox value changes, loadCallback has to be\n    // called again, because the received DesignData differs between having\n    // \"Import as Web Panels\" checked or not. This only makes sense if a file is\n    // selected or the Path/URL input is not empty\n    if (this.path.length !== 0 || !this.selectedFile) {\n      this.loadData();\n    }\n  };\n\n  private pathURLFileValueChangedHandler = (e: CustomEvent<string>) => {\n    this.path = e.detail;\n    if (this.path.length === 0) {\n      this.selectFile === null;\n    }\n  };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderOptions = (): Element => {\n    return (\n      <div\n        class={{\n          \"options grid\": true,\n          \"options--hide-access-token\": !this.showAccessToken\n        }}\n      >\n        {/* #path/url label*/}\n        <gxg-label class=\"path-url-label\">\n          {this._componentLocale.options.path}\n        </gxg-label>\n\n        <div class=\"path-url-wrapper\">\n          {/* #path/url input*/}\n          <gxg-form-text\n            value={this.path}\n            onFileSelected={this.pathOnFileSelected}\n            onBlur={this.pathURLFileBlurHandler}\n            ref={(el: HTMLGxgFormTextElement) =>\n              (this.pathURLFile = el as HTMLGxgFormTextElement)\n            }\n            clearButton\n            part=\"option-path\"\n            disabled={this.isLoading}\n            type=\"file\"\n            acceptFile={this.extensions}\n            class=\"path-url\"\n            placeholder={this._componentLocale.options.pathPlaceholder}\n            onValueChanged={this.pathURLFileValueChangedHandler}\n          ></gxg-form-text>\n\n          <div class=\"path-url-wrapper__buttons-container\">\n            {/* #select file button*/}\n            <gxg-button\n              id=\"button-select-file\"\n              type=\"primary-text-only\"\n              onClick={this.selectFile}\n              part=\"gxg-button gxg-button--select-file\"\n              disabled={this.isLoading}\n              class=\"select-file\"\n            >\n              ...\n            </gxg-button>\n\n            {/* #load file button*/}\n            <gxg-button\n              id=\"button-load\"\n              type=\"primary-text-only\"\n              onClick={this.loadData}\n              part=\"gxg-button gxg-button--load\"\n              disabled={this.path.length === 0 || this.isLoading}\n              class=\"load-file\"\n            >\n              {this._componentLocale.options.btnLoad}\n            </gxg-button>\n          </div>\n        </div>\n\n        {/* #access token*/}\n        {this.showAccessToken\n          ? [\n              <gxg-label class={{ \"access-token-label\": true }}>\n                {this._componentLocale.options.accessToken}\n              </gxg-label>,\n              <gxg-form-text\n                class={{ \"access-token\": true }}\n                ref={(el: HTMLGxgFormTextElement) =>\n                  (this.accessTokenEl = el as HTMLGxgFormTextElement)\n                }\n                part=\"access-token\"\n                disabled={this.isLoading}\n              ></gxg-form-text>\n            ]\n          : null}\n\n        {/* #style label*/}\n        <gxg-label class=\"style-label\">\n          {this._componentLocale.options.style}\n        </gxg-label>\n\n        {/* #style*/}\n        <gxg-combo-box\n          disabled={!this.styles || this.isLoading}\n          display-validation-styles\n          display-validation-message\n          ref={(el: HTMLGxgComboBoxElement) =>\n            (this.optionStyleEl = el as HTMLGxgComboBoxElement)\n          }\n          part=\"option-style\"\n          class=\"style\"\n        >\n          {renderFormItems(\"gxg-combo-box-item\", this.styles ?? [])}\n        </gxg-combo-box>\n\n        {/* #module label*/}\n        <gxg-label class=\"module-label\">\n          {this._componentLocale.options.module}\n        </gxg-label>\n\n        {/* #module*/}\n        <gx-ide-entity-selector\n          value={this.defaultModule}\n          defaultValue={this.defaultModule}\n          selectEntityCallback={this.selectModuleCallback}\n          ref={(el: HTMLGxIdeEntitySelectorElement) =>\n            (this.filterModuleEl = el as HTMLGxIdeEntitySelectorElement)\n          }\n          class=\"module\"\n        ></gx-ide-entity-selector>\n        <div class=\"checkboxes-options\">\n          {/* # import as web panels*/}\n          <gxg-form-checkbox\n            label={this._componentLocale.options.importAs}\n            class=\"import-as-web-panels\"\n            ref={(el: HTMLGxgFormCheckboxElement) =>\n              (this.optionImportAsEl = el as HTMLGxgFormCheckboxElement)\n            }\n            part=\"option-import-as-web-panels\"\n            disabled={this.isLoading}\n            onChange={this.importAsWebPanelsChangedHandler}\n          ></gxg-form-checkbox>\n\n          <div\n            class={{\n              \"checkboxes-options__col-right\": true,\n              \"checkboxes-options__col-right--hidden\":\n                !this.designDataTreeDataModel.length\n            }}\n          >\n            {/* # fit images*/}\n            <gxg-form-checkbox\n              label={this._componentLocale.options.fitImages}\n              part=\"fit-images-checkbox\"\n              disabled={this.isLoading || !this.designDataTreeDataModel.length}\n              onChange={this.fitImagesHandler}\n            ></gxg-form-checkbox>\n\n            {/* # shrink tree*/}\n            <gxg-form-checkbox\n              label={this._componentLocale.options.toggleTree}\n              part=\"shrink-tree-checkbox\"\n              disabled={this.isLoading || !this.designDataTreeDataModel.length}\n              onChange={this.shrinkTreeHandler}\n            ></gxg-form-checkbox>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  private renderMessages = (): Element => {\n    return this.messages.length > 0 ? (\n      <div\n        class=\"messages-container\"\n        ref={(el: HTMLElement) => (this.messagesList = el as HTMLElement)}\n      >\n        {this.messages.map(message => (\n          <gxg-text type={this.messageType(message)}>\n            {message.type}: {message.text}\n          </gxg-text>\n        ))}\n      </div>\n    ) : null;\n  };\n\n  private renderDetailDataTree(designType: string) {\n    switch (designType) {\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        this.detailTreeModel = this.loadTreeItemCompositionModel(\n          this.selectedDesignItem.composition.controls\n        );\n        break;\n    }\n  }\n\n  private renderMain = () => {\n    if (this.designData) {\n      return (\n        /* #main*/\n        <main\n          class={{ \"main\": true, \"main--shrunken-tree\": this.shrunkenTree }}\n        >\n          {[this.renderDesignTree(), this.renderDesignTabs()]}\n        </main>\n      );\n    } else if (!this.isLoading) {\n      return <main class=\"main\">{this.renderNoDesignData()}</main>;\n    } else {\n      return this.renderMessages();\n    }\n  };\n\n  private renderNoDesignData = () => {\n    if (!this.isLoading) {\n      return (\n        <gxg-text\n          textAlign={config.gxgMessage.common.textAlign as TextAlign}\n          padding={config.gxgMessage.common.textAlign as TextPadding}\n          type={config.gxgMessage.common.type as TextType}\n          maxWidth={config.gxgMessage.common.maxWidth}\n          part=\"no-design-selected\"\n        >\n          {this._componentLocale.messages.noDesignSelected} <br />\n          <gxg-text\n            type=\"text-link-no-line\"\n            onClick={this.selectFile}\n            part=\"begin-by-loading-one\"\n          >\n            {this._componentLocale.messages.selectDesign}\n          </gxg-text>\n        </gxg-text>\n      );\n    }\n  };\n\n  private renderDesignTree = (): HTMLGxgTreeViewElement => {\n    return (\n      <div class=\"tree-container\">\n        <gxg-tree-view\n          part=\"data-tree\"\n          class=\"design-tree\"\n          id=\"data-tree\"\n          treeModel={this.designDataTreeDataModel}\n          dragDisabled={true}\n          dropDisabled={true}\n          toggleCheckboxes={true}\n          checkbox={true}\n          checked={true}\n          onCheckedItemsChange={this.objectsTreeCheckedItemsChangedHandler}\n          onSelectedItemsChange={this.objectsTreeSelectedItemsChangedHandler}\n          ref={el => (this.treeDataEl = el as HTMLGxgTreeViewElement)}\n        ></gxg-tree-view>\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return [\n      <gxg-button\n        id=\"button-ok\"\n        type=\"primary-text-only\"\n        onClick={this.confirm}\n        part=\"gxg-button gxg-button--ok\"\n        disabled={this.isLoading}\n        slot=\"footer-end\"\n      >\n        {this._componentLocale.footer.btnOk}\n      </gxg-button>,\n      <gxg-button\n        id=\"button-cancel\"\n        type=\"outlined\"\n        onClick={this.cancel}\n        part=\"gxg-button gxg-button--cancel\"\n        slot=\"footer-end\"\n      >\n        {this._componentLocale.footer.btnCancel}\n      </gxg-button>\n    ];\n  };\n\n  private renderPanelTab = (): Element => {\n    const renderControlsTree =\n      (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||\n        this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&\n      this.detailTreeModel.length > 0;\n\n    return (\n      <div\n        class={{\n          \"panel-tab\": true,\n          \"panel-tab--controls-tree\": renderControlsTree\n        }}\n        part=\"data-panel-composition-container\"\n      >\n        {this.selectedDesignItem &&\n        this.selectedDesignItem.composition &&\n        this.selectedDesignItem.composition.preview ? (\n          <div part=\"data-panel-composition-preview\" class=\"panel-item\">\n            <img\n              src={\n                this.selectedDesignItem && this.selectedDesignItem.composition\n                  ? this.selectedDesignItem.composition.preview\n                  : undefined\n              }\n              alt=\"Preview\"\n            />\n          </div>\n        ) : null}\n\n        {renderControlsTree ? (\n          <gxg-tree-view\n            part=\"data-panel-composition-tree\"\n            class=\"panel-item\"\n            id=\"gxg-tree-panel-data\"\n            treeModel={this.detailTreeModel}\n            dragDisabled={true}\n            dropDisabled={true}\n          ></gxg-tree-view>\n        ) : null}\n      </div>\n    );\n  };\n\n  private renderImageTab = () => {\n    return (\n      <div part=\"data-panel-composition-preview\" class=\"data-preview\">\n        <img\n          src={this.selectedDesignItem ? this.selectedDesignItem : undefined}\n          alt=\"Preview\"\n        />\n      </div>\n    );\n  };\n\n  private tabActivatedHandler = (tabActivated: CustomEvent<any>) => {\n    if (tabActivated.detail) {\n      const tab = tabActivated.detail.tab;\n      this.activeTabs = { ...this.activeTabs, [this.selectedDesignType]: tab };\n    }\n  };\n\n  private isTabActive = (tab: string): boolean => {\n    const activeTab = this.selectedDesignType;\n    this.activeTabs[activeTab as keyof DesignObjectType];\n    if (this.activeTabs[activeTab as keyof DesignObjectType] === tab) {\n      return true;\n    } else {\n      return false;\n    }\n  };\n\n  private renderDesignTabs = (): Element => {\n    return (\n      <gxg-tabs\n        class={{\n          \"design-tabs\": true,\n          \"design-tabs--fit-images\": this.fitImages\n        }}\n        part=\"data-tabs\"\n        no-border\n        noPadding\n        buttonsBorderAbove\n      >\n        <gxg-tab-bar slot=\"tab-bar-container\">\n          {/* tokens*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.tokens}\n            tab=\"tokens\"\n            key=\"tokens\"\n            onTabActivated={this.tabActivatedHandler}\n            isSelected={this.isTabActive(\"tokens\")}\n          ></gxg-tab-button>\n\n          {/* styles*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.styles}\n            tab=\"styles\"\n            key=\"styles\"\n            onTabActivated={this.tabActivatedHandler}\n            isSelected={this.isTabActive(\"styles\")}\n          ></gxg-tab-button>\n\n          {/* composition*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType === DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.composition}\n            tab=\"composition\"\n            key=\"composition\"\n            onTabActivated={this.tabActivatedHandler}\n            isSelected={this.isTabActive(\"composition\")}\n          ></gxg-tab-button>\n\n          {/* layout*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&\n                this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS)\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.layout}\n            tab=\"layout\"\n            key=\"layout\"\n            onTabActivated={this.tabActivatedHandler}\n            isSelected={this.isTabActive(\"layout\")}\n          ></gxg-tab-button>\n\n          {/* code*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&\n                this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS)\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.code}\n            tab=\"code\"\n            key=\"code\"\n            onTabActivated={this.tabActivatedHandler}\n            isSelected={this.isTabActive(\"code\")}\n          ></gxg-tab-button>\n        </gxg-tab-bar>\n\n        {/* tokens */}\n        <gxg-tab\n          tab=\"tokens\"\n          key=\"tokens\"\n          isSelected={this.isTabActive(\"tokens\")}\n        >\n          <div\n            ref={(el: HTMLElement) =>\n              (this.tokensFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n\n        {/* styles */}\n        <gxg-tab\n          tab=\"styles\"\n          key=\"styles\"\n          isSelected={this.isTabActive(\"styles\")}\n        >\n          <div\n            ref={(el: HTMLElement) =>\n              (this.stylesFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n\n        {/* composition */}\n        <gxg-tab\n          tab=\"composition\"\n          key=\"composition\"\n          isSelected={this.isTabActive(\"composition\")}\n        >\n          {this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||\n          this.selectedDesignType === DESIGN_DATA_TYPE_FONTS\n            ? this.renderImageTab()\n            : this.renderPanelTab()}\n        </gxg-tab>\n\n        {/* layout */}\n        <gxg-tab\n          tab=\"layout\"\n          key=\"layout\"\n          isSelected={this.isTabActive(\"layout\")}\n        >\n          <div\n            ref={(el: HTMLElement) =>\n              (this.layoutFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n\n        {/* code */}\n        <gxg-tab tab=\"code\" key=\"code\" isSelected={this.isTabActive(\"code\")}>\n          <div\n            ref={(el: HTMLElement) =>\n              (this.codeFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n      </gxg-tabs>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            displayBorderBottom\n            part=\"options-container\"\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            {this.renderOptions()}\n            {this.renderMain()}\n            {this.renderFooter()}\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type LoadMessageCallback = (message: MessageData) => void;\nexport type LoadCallback = (\n  source: string | File,\n  token: string | undefined,\n  onMessage: LoadMessageCallback\n) => Promise<DesignData | undefined>;\nexport type LoadPanelDataCallback = (id: string) => Promise<DesignPanelData>;\nexport type LoadImageCallback = (id: string) => Promise<string>;\nexport type LoadFontCallback = (id: string) => Promise<string>;\nexport type LoadDesignSystemCallback = (\n  id: string\n) => Promise<DesignSystemData>;\nexport type TextEditorFactoryCallback = (\n  type: TextEditorType,\n  parent: HTMLElement,\n  text: string\n) => Promise<void>;\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\n\nexport type RequiresAccessTokenCallback = (source: string) => Promise<boolean>;\nexport type ConfirmCallback = (data: DesignImportData) => Promise<boolean>;\nexport type CancelCallback = () => Promise<void>;\n\nexport interface MessageData {\n  type: \"error\" | \"warning\" | \"info\";\n  text: string;\n}\n\nexport interface DesignData {\n  panels: DesignItemData[];\n  stencils: DesignItemData[];\n  images: DesignItemData[];\n  designSystem: DesignItemData[];\n  fonts: DesignItemData[];\n}\n\nexport interface DesignItemData {\n  id: string;\n  name: string;\n}\n\nexport interface DesignPanelData {\n  composition: DesignPanelCompositionData;\n  code?: string;\n}\n\nexport interface DesignPanelCompositionData {\n  preview?: string;\n  controls: DesignPanelControlData[];\n}\n\nexport interface DesignPanelControlData {\n  name: string;\n  type: string;\n  leaf?: boolean;\n  controls: DesignPanelControlData[];\n}\n\nexport interface DesignSystemData {\n  tokens: string;\n  styles: string;\n}\n\ntype DesignItemDataDetail = DesignPanelData | DesignSystemData | string;\n\nexport interface DesignImportData {\n  panels: string[];\n  stencils: string[];\n  fonts: string[];\n  moduleId: string;\n  /*  images: string[]; */\n  styleName: string;\n  importAsWebPanels: boolean;\n}\n\nexport type DesignType =\n  | typeof DESIGN_DATA_TYPE_PANELS\n  | typeof DESIGN_DATA_TYPE_STENCILS\n  | typeof DESIGN_DATA_TYPE_IMAGES\n  | typeof DESIGN_DATA_TYPE_DESIGN_SYSTEM\n  | typeof DESIGN_DATA_TYPE_FONTS;\n\nexport type DesignObjectType = {\n  [Key in DesignType]: string;\n};\n\nexport type ItemLoadedInfo = {\n  designType: DesignType;\n  designDataDetail: DesignItemDataDetail;\n};\n\ntype TextEditorType = \"html\" | \"styles\" | \"tokens\";\n"],"version":3}