@genexus/genexus-ide-ui 0.0.139 → 0.0.141

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

@@ -0,0 +1,563 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5bd24426.js';
+import { L as Locale } from './locale-3c32f251.js';
+import { c as config } from './config-a492e15e.js';
+import { r as renderFormItems } from './common-aaad5759.js';
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
+        this.renderedFirstTime = false;
+        /**
+         * An array that keeps track of the tree items id's (design system data type + item id) along with the content, that will be used to save and retrieve items information, in order to avoid using a callback to get items information that was already get. loadedItemsArray will be reset every time a new design is loaded.
+         */
+        this.loadedItems = new Map();
+        /**
+         * The path/URL value when loadCallback was called for the last time. This is used to determine
+         * if there is a difference with the actual path/URL value, in order to know if calling loadCallback
+         * again is required on blur on Path/URL/File input.
+         */
+        this.pathOnLoadCallback = "";
+        this.panelsSelected = [];
+        this.stencilsSelected = [];
+        // private imagesSelected: string[] = [];
+        // private designSystemSelected: string[] = [];
+        this.fontsSelected = [];
+        // 9.LOCAL METHODS //
+        this.attachTreeMouseListeners = () => {
+            this.treeDataEl.addEventListener("mouseenter", this.treeMouseEnter);
+            this.treeDataEl.addEventListener("mouseleave", this.treeMouseLeave);
+        };
+        this.removeTreeMouseListeners = () => {
+            this.treeDataEl.removeEventListener("mouseenter", this.treeMouseEnter);
+            this.treeDataEl.removeEventListener("mouseleave", this.treeMouseLeave);
+        };
+        this.treeMouseEnter = () => {
+            this.shrunkenTree = false;
+        };
+        this.treeMouseLeave = () => {
+            this.shrunkenTree = true;
+        };
+        this.messageType = (message) => {
+            if (message.type === "error") {
+                return "text-alert-error";
+            }
+            else if (message.type === "warning") {
+                return "text-alert-warning";
+            }
+            else {
+                return "text-gray";
+            }
+        };
+        this.objectsTreeSelectedItemsChangedHandler = async (event) => {
+            var _a;
+            if (event.detail.length) {
+                const item = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item;
+                const itemComposedId = item.id;
+                const idList = itemComposedId.split("@");
+                const itemId = idList[0];
+                const itemDesignType = idList[1];
+                const isChildNode = itemId && itemId !== "parent";
+                const isDesignSystem = itemDesignType === "design_system";
+                if (isChildNode || isDesignSystem) {
+                    this.selectedDesignType = itemDesignType;
+                    const loadedItem = this.getLoadedItem(itemComposedId);
+                    if (!loadedItem) {
+                        const designDataDetail = await this.getDesignDataDetail(itemId, this.selectedDesignType);
+                        this.loadedItems.set(itemComposedId, {
+                            designType: this.selectedDesignType,
+                            designDataDetail: designDataDetail
+                        });
+                    }
+                    else {
+                        /* Item has been queried already. The item content exists already. */
+                        this.selectedDesignType = loadedItem.designType;
+                        this.selectedDesignItem = loadedItem.designDataDetail;
+                        this.getCodeFactory(loadedItem.designType);
+                        this.renderDetailDataTree(loadedItem.designType);
+                    }
+                }
+            }
+        };
+        this.getLoadedItem = (id) => {
+            var _a;
+            return (_a = this.loadedItems) === null || _a === void 0 ? void 0 : _a.get(id);
+        };
+        this.objectsTreeCheckedItemsChangedHandler = (event) => {
+            const items = Array.from(event.detail.values());
+            let currentParentId = null;
+            const result = {};
+            for (const item of items) {
+                if (item.item.id.startsWith("parent@")) {
+                    currentParentId = item.item.id.split("@")[1];
+                    result[currentParentId] = [];
+                }
+                else if (item.item.checked && currentParentId) {
+                    const parentId = item.item.id.split("@")[1];
+                    if (parentId === currentParentId) {
+                        const id = item.item.id.split("@")[0];
+                        result[currentParentId].push(id);
+                    }
+                }
+            }
+            // const { designSystem, fonts, images, panels, stencils } = result;
+            const { fonts, panels, stencils } = result;
+            // this.designSystemSelected = designSystem;
+            this.fontsSelected = fonts;
+            // this.imagesSelected = images;
+            this.panelsSelected = panels;
+            this.stencilsSelected = stencils;
+        };
+        this.selectFile = () => {
+            this.pathURLFile.openFile();
+        };
+        this.pathOnFileSelected = async (e) => {
+            this.selectedFile = e.detail[0];
+            const fileName = e.detail[0].name;
+            this.path = fileName;
+            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
+        };
+        this.pathURLFileBlurHandler = async () => {
+            this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
+            if (this.path !== this.pathOnLoadCallback) {
+                // if loadOnBlur is true, and the actual path/URL value differs from the one
+                // when loadCallback was called the last time, it is required to call loadCallback
+                // again, because the DesignData might differ from the actual.
+                this.loadData();
+            }
+        };
+        this.loadData = async () => {
+            this.isLoading = true;
+            const source = this.selectedFile ? this.selectedFile : this.path;
+            const token = this.accessTokenEl ? this.accessTokenEl.value : undefined;
+            this.designData = null;
+            await this.loadCallback(source, token, this.messageCallback).then((designData) => {
+                // this.isLoading = false;
+                this.messages = [];
+                this.designData = designData;
+                if (this.designData) {
+                    this.panelsSelected = [
+                        ...this.designData.panels.map(item => item.id)
+                    ];
+                    this.stencilsSelected = [
+                        ...this.designData.stencils.map(item => item.id)
+                    ];
+                    // this.imagesSelected = [
+                    //   ...this.designData.images.map(item => item.id)
+                    // ];
+                    // this.designSystemSelected = [
+                    //   ...this.designData.designSystem.map(item => item.id)
+                    // ];
+                    this.fontsSelected = [...this.designData.fonts.map(item => item.id)];
+                }
+                else {
+                    // There was probably an error
+                    this.panelsSelected = [];
+                    this.stencilsSelected = [];
+                    // this.imagesSelected = [];
+                    // this.designSystemSelected = [];
+                    this.fontsSelected = [];
+                }
+            });
+            this.pathOnLoadCallback = this.path;
+            this.isLoading = false;
+        };
+        this.messageCallback = message => {
+            this.messages = [...this.messages, message];
+        };
+        this.getDesignDataDetail = async (id, designType) => {
+            let loadFn;
+            switch (designType) {
+                case DESIGN_DATA_TYPE_IMAGES:
+                    loadFn = this.loadImageCallback;
+                    break;
+                case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
+                    loadFn = this.loadDesignSystemCallback;
+                    break;
+                case DESIGN_DATA_TYPE_FONTS:
+                    loadFn = this.loadFontCallback;
+                    break;
+                case DESIGN_DATA_TYPE_PANELS:
+                case DESIGN_DATA_TYPE_STENCILS:
+                    loadFn = this.loadPanelDataCallback;
+                    break;
+            }
+            let returnedData;
+            await loadFn(id).then((data) => {
+                this.selectedDesignType = designType;
+                this.selectedDesignItem = data;
+                this.getCodeFactory(designType);
+                this.renderDetailDataTree(designType);
+                returnedData = data;
+            });
+            return returnedData;
+        };
+        this.confirm = () => {
+            var _a, _b;
+            this.confirmCallback({
+                panels: this.panelsSelected,
+                stencils: this.stencilsSelected,
+                fonts: this.fontsSelected,
+                /* images: this.imagesSelected, */
+                moduleId: (_b = (_a = this.filterModuleEl) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id,
+                styleName: this.optionStyleEl.value,
+                importAsWebPanels: this.optionImportAsEl.checked
+            });
+        };
+        this.cancel = () => {
+            this.cancelCallback();
+            this.isLoading = false;
+        };
+        this.fitImagesHandler = (e) => {
+            this.fitImages = e.detail.value;
+        };
+        this.shrinkTreeHandler = (e) => {
+            const checked = e.detail.value;
+            this.shrinkTree = checked;
+            if (checked) {
+                this.shrunkenTree = true;
+            }
+            else {
+                this.shrunkenTree = false;
+            }
+        };
+        this.importAsWebPanelsChangedHandler = () => {
+            // When "Import as Web Panels" checkbox value changes, loadCallback has to be
+            // called again, because the received DesignData differs between having
+            // "Import as Web Panels" checked or not. This only makes sense if a file is
+            // selected or the Path/URL input is not empty
+            if (this.path.length !== 0 || !this.selectedFile) {
+                this.loadData();
+            }
+        };
+        this.pathURLFileValueChangedHandler = (e) => {
+            this.path = e.detail;
+        };
+        // 9.LOCAL METHODS -> RENDERS //
+        this.renderOptions = () => {
+            var _a;
+            return (h("div", { class: {
+                    "options grid": true,
+                    "options--hide-access-token": !this.showAccessToken
+                } }, h("gxg-label", { class: "path-url-label" }, this._componentLocale.options.path), h("div", { class: "path-url-wrapper" }, h("gxg-form-text", { value: this.path, onFileSelected: this.pathOnFileSelected, onBlur: this.pathURLFileBlurHandler, ref: (el) => (this.pathURLFile = el), clearButton: true, part: "option-path", disabled: this.isLoading, type: "file", acceptFile: this.extensions, class: "path-url", placeholder: this._componentLocale.options.pathPlaceholder, onValueChanged: this.pathURLFileValueChangedHandler }), h("div", { class: "path-url-wrapper__buttons-container" }, h("gxg-button", { id: "button-select-file", type: "primary-text-only", onClick: this.selectFile, part: "gxg-button gxg-button--select-file", disabled: this.isLoading, class: "select-file" }, "..."), h("gxg-button", { id: "button-load", type: "primary-text-only", onClick: this.loadData, part: "gxg-button gxg-button--load", disabled: this.path.length === 0 || this.isLoading, class: "load-file" }, this._componentLocale.options.btnLoad))), this.showAccessToken
+                ? [
+                    h("gxg-label", { class: { "access-token-label": true } }, this._componentLocale.options.accessToken),
+                    h("gxg-form-text", { class: { "access-token": true }, ref: (el) => (this.accessTokenEl = el), part: "access-token", disabled: this.isLoading })
+                ]
+                : null, h("gxg-label", { class: "style-label" }, this._componentLocale.options.style), h("gxg-combo-box", { disabled: !this.styles || this.isLoading, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.optionStyleEl = el), part: "option-style", class: "style" }, renderFormItems("gxg-combo-box-item", (_a = this.styles) !== null && _a !== void 0 ? _a : [])), h("gxg-label", { class: "module-label" }, this._componentLocale.options.module), h("gx-ide-entity-selector", { value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module" }), h("div", { class: "checkboxes-options" }, h("gxg-form-checkbox", { label: this._componentLocale.options.importAs, class: "import-as-web-panels", ref: (el) => (this.optionImportAsEl = el), part: "option-import-as-web-panels", disabled: this.isLoading, onChange: this.importAsWebPanelsChangedHandler }), h("div", { class: {
+                    "checkboxes-options__col-right": true,
+                    "checkboxes-options__col-right--hidden": !this.designDataTreeDataModel.length
+                } }, h("gxg-form-checkbox", { label: this._componentLocale.options.fitImages, part: "fit-images-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.fitImagesHandler }), h("gxg-form-checkbox", { label: this._componentLocale.options.toggleTree, part: "shrink-tree-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.shrinkTreeHandler })))));
+        };
+        this.renderMessages = () => {
+            return this.messages.length > 0 ? (h("div", { class: "messages-container", ref: (el) => (this.messagesList = el) }, this.messages.map(message => (h("gxg-text", { type: this.messageType(message) }, message.type, ": ", message.text))))) : null;
+        };
+        this.renderMain = () => {
+            if (this.designData) {
+                return (
+                /* #main*/
+                h("main", { class: { "main": true, "main--shrunken-tree": this.shrunkenTree } }, [this.renderDesignTree(), this.renderDesignTabs()]));
+            }
+            else if (!this.isLoading) {
+                return h("main", { class: "main" }, this.renderNoDesignData());
+            }
+            else {
+                return this.renderMessages();
+            }
+        };
+        this.renderNoDesignData = () => {
+            if (!this.isLoading) {
+                return (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "no-design-selected" }, this._componentLocale.messages.noDesignSelected, " ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFile, part: "begin-by-loading-one" }, this._componentLocale.messages.selectDesign)));
+            }
+        };
+        this.renderDesignTree = () => {
+            return (h("div", { class: "tree-container" }, h("gxg-tree-view", { part: "data-tree", class: "design-tree", id: "data-tree", treeModel: this.designDataTreeDataModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onSelectedItemsChange: this.objectsTreeSelectedItemsChangedHandler, ref: el => (this.treeDataEl = el) })));
+        };
+        this.renderFooter = () => {
+            return [
+                h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "gxg-button gxg-button--ok", disabled: this.isLoading, slot: "footer-end" }, this._componentLocale.footer.btnOk),
+                h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)
+            ];
+        };
+        this.renderPanelTab = () => {
+            const renderControlsTree = (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||
+                this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&
+                this.detailTreeModel.length > 0;
+            return (h("div", { class: {
+                    "panel-tab": true,
+                    "panel-tab--controls-tree": renderControlsTree
+                }, part: "data-panel-composition-container" }, this.selectedDesignItem &&
+                this.selectedDesignItem.composition &&
+                this.selectedDesignItem.composition.preview ? (h("div", { part: "data-panel-composition-preview", class: "panel-item" }, h("img", { src: this.selectedDesignItem && this.selectedDesignItem.composition
+                    ? this.selectedDesignItem.composition.preview
+                    : undefined, alt: "Preview" }))) : null, renderControlsTree ? (h("gxg-tree-view", { part: "data-panel-composition-tree", class: "panel-item", id: "gxg-tree-panel-data", treeModel: this.detailTreeModel, dragDisabled: true, dropDisabled: true })) : null));
+        };
+        this.renderImageTab = () => {
+            return (h("div", { part: "data-panel-composition-preview", class: "data-preview" }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview" })));
+        };
+        this.tabActivatedHandler = (tabActivated) => {
+            if (tabActivated.detail) {
+                const tab = tabActivated.detail.tab;
+                this.activeTabs = Object.assign(Object.assign({}, this.activeTabs), { [this.selectedDesignType]: tab });
+            }
+        };
+        this.isTabActive = (tab) => {
+            const activeTab = this.selectedDesignType;
+            if (this.activeTabs[activeTab] === tab) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        };
+        this.renderDesignTabs = () => {
+            return (h("gxg-tabs", { class: {
+                    "design-tabs": true,
+                    "design-tabs--fit-images": this.fitImages
+                }, part: "data-tabs", "no-border": true, noPadding: true, buttonsBorderAbove: true }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { hidden: !this.selectedDesignType ||
+                    this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.tokens, tab: "tokens", key: "tokens", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("tokens") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
+                    this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.styles, tab: "styles", key: "styles", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("styles") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
+                    this.selectedDesignType === DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.composition, tab: "composition", key: "composition", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("composition") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
+                    (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
+                        this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS), slot: "tab-bar", "tab-label": this._componentLocale.tabs.layout, tab: "layout", key: "layout", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("layout") }), h("gxg-tab-button", { hidden: !this.selectedDesignType ||
+                    (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
+                        this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS), slot: "tab-bar", "tab-label": this._componentLocale.tabs.code, tab: "code", key: "code", onTabActivated: this.tabActivatedHandler, isSelected: this.isTabActive("code") })), h("gxg-tab", { tab: "tokens", key: "tokens", isSelected: this.isTabActive("tokens") }, h("div", { ref: (el) => (this.tokensFactoryRenderEl = el) })), h("gxg-tab", { tab: "styles", key: "styles", isSelected: this.isTabActive("styles") }, h("div", { ref: (el) => (this.stylesFactoryRenderEl = el) })), h("gxg-tab", { tab: "composition", key: "composition", isSelected: this.isTabActive("composition") }, this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||
+                this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
+                ? this.renderImageTab()
+                : this.renderPanelTab()), h("gxg-tab", { tab: "layout", key: "layout", isSelected: this.isTabActive("layout") }, h("div", { ref: (el) => (this.layoutFactoryRenderEl = el) })), h("gxg-tab", { tab: "code", key: "code", isSelected: this.isTabActive("code") }, h("div", { ref: (el) => (this.codeFactoryRenderEl = el) }))));
+        };
+        this.activeTabs = {
+            panels: "composition",
+            stencils: "composition",
+            images: "composition",
+            fonts: "composition",
+            design_system: "tokens"
+        };
+        this.path = "";
+        this.designData = null;
+        this.detailTreeModel = [];
+        this.isLoading = false;
+        this.messages = [];
+        this.selectedFile = undefined;
+        this.selectedDesignType = undefined;
+        this.selectedDesignItem = undefined;
+        this.showAccessToken = undefined;
+        this.designDataTreeDataModel = [];
+        this.updateTabsActiveTab = false;
+        this.fitImages = false;
+        this.shrinkTree = false;
+        this.shrunkenTree = false;
+        this.treeSh = false;
+        this.displayTitle = false;
+        this.extensions = undefined;
+        this.defaultModule = undefined;
+        this.selectModuleCallback = undefined;
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+        this.loadCallback = undefined;
+        this.loadDesignSystemCallback = undefined;
+        this.loadFontCallback = undefined;
+        this.loadImageCallback = undefined;
+        this.loadPanelDataCallback = undefined;
+        this.requiresAccessTokenCallback = undefined;
+        this.shadow = false;
+        this.styles = undefined;
+        this.textEditorFactoryCallback = undefined;
+    }
+    watchDesignDataHandler(newDesignData) {
+        if (newDesignData) {
+            this.designDataTreeDataModel = [
+                {
+                    order: 0,
+                    id: `parent@${DESIGN_DATA_TYPE_PANELS}`,
+                    class: "category tree-view-item",
+                    leaf: false,
+                    caption: this._componentLocale.tree.panels,
+                    startImgSrc: "general/knowledge-base",
+                    checkbox: true,
+                    checked: true,
+                    expanded: true,
+                    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,
+                        selected: i === 0
+                    }))
+                },
+                {
+                    order: 1,
+                    id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,
+                    class: "category tree-view-item",
+                    leaf: false,
+                    caption: this._componentLocale.tree.stencils,
+                    startImgSrc: "general/knowledge-base",
+                    checkbox: true,
+                    checked: true,
+                    expanded: true,
+                    items: this.designData.stencils.map(item => ({
+                        id: `${item.id}@${DESIGN_DATA_TYPE_STENCILS}`,
+                        class: "object tree-view-item",
+                        leaf: true,
+                        caption: item.name,
+                        startImgSrc: "general/generator",
+                        checkbox: true,
+                        checked: true
+                    }))
+                },
+                {
+                    order: 2,
+                    id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,
+                    class: "category tree-view-item",
+                    leaf: false,
+                    caption: this._componentLocale.tree.images,
+                    startImgSrc: "general/knowledge-base",
+                    checkbox: true,
+                    checked: true,
+                    expanded: true,
+                    items: this.designData.images.map(item => ({
+                        id: `${item.id}@${DESIGN_DATA_TYPE_IMAGES}`,
+                        class: "object tree-view-item",
+                        leaf: true,
+                        caption: item.name,
+                        startImgSrc: "general/generator",
+                        checkbox: true,
+                        checked: true
+                    }))
+                },
+                {
+                    order: 3,
+                    id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
+                    class: "category tree-view-item",
+                    leaf: false,
+                    caption: this._componentLocale.tree.fonts,
+                    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
+                    }))
+                },
+                {
+                    order: 4,
+                    id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
+                    class: "category tree-view-item",
+                    leaf: true,
+                    caption: this._componentLocale.tree.designSystem,
+                    startImgSrc: "general/knowledge-base",
+                    checkbox: true,
+                    checked: true
+                }
+            ];
+        }
+    }
+    watchShrinkTreeHandler(shrink) {
+        if (shrink) {
+            this.attachTreeMouseListeners();
+        }
+        else {
+            this.removeTreeMouseListeners();
+        }
+    }
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    async componentWillLoad() {
+        this._componentLocale = await Locale.getComponentStrings(this.el);
+    }
+    componentDidRender() {
+        if (!this.renderedFirstTime) {
+            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+            this.renderedFirstTime = true;
+        }
+    }
+    disconnectedCallback() {
+        this.removeTreeMouseListeners();
+    }
+    // 7.LISTENERS //
+    watchMessagesHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (this.messagesList) {
+                this.messagesList.scrollTop = this.messagesList.scrollHeight;
+            }
+        }
+    }
+    // 8.PUBLIC METHODS API //
+    /**
+     * Validate necessary data input
+     */
+    async validate() {
+        const isValid = true;
+        return isValid;
+    }
+    loadTreeItemCompositionModel(controls) {
+        const modelList = [];
+        for (const control of controls) {
+            let model = {
+                id: control.name,
+                caption: control.name,
+                startImgSrc: control.type,
+                checkbox: false,
+                expanded: true,
+                leaf: control.leaf
+            };
+            if (control.controls) {
+                model = Object.assign(Object.assign({}, model), { items: this.loadTreeItemCompositionModel(control.controls) });
+            }
+            modelList.push(model);
+        }
+        return modelList;
+    }
+    getCodeFactory(designType) {
+        switch (designType) {
+            case DESIGN_DATA_TYPE_PANELS:
+            case DESIGN_DATA_TYPE_STENCILS:
+                this.textEditorFactoryCallback("html", this.codeFactoryRenderEl, this.selectedDesignItem.code);
+                this.textEditorFactoryCallback("html", this.layoutFactoryRenderEl, this.selectedDesignItem.layout);
+                break;
+            case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
+                this.textEditorFactoryCallback("tokens", this.tokensFactoryRenderEl, this.selectedDesignItem.tokens);
+                this.textEditorFactoryCallback("styles", this.stylesFactoryRenderEl, this.selectedDesignItem.styles);
+                break;
+        }
+    }
+    renderDetailDataTree(designType) {
+        switch (designType) {
+            case DESIGN_DATA_TYPE_PANELS:
+            case DESIGN_DATA_TYPE_STENCILS:
+                this.detailTreeModel = this.loadTreeItemCompositionModel(this.selectedDesignItem.composition.controls);
+                break;
+        }
+    }
+    // 10.RENDER() FUNCTION //
+    render() {
+        return (h(Host, { class: "gx-ide-component" }, h("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/design-import"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "designData": ["watchDesignDataHandler"],
+        "shrinkTree": ["watchShrinkTreeHandler"],
+        "messages": ["watchMessagesHandler"]
+    }; }
+};
+GxIdeImportFromDesign.style = designImportCss;
+
+export { GxIdeImportFromDesign as gx_ide_design_import };
+
+//# sourceMappingURL=gx-ide-design-import.entry.js.map