@genexus/genexus-ide-ui 0.0.139 → 0.0.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-bpm-import-files.cjs.entry.js +103 -0
- package/dist/cjs/gx-ide-bpm-import-files.cjs.entry.js.map +1 -0
- package/dist/cjs/gx-ide-design-import.cjs.entry.js +567 -0
- package/dist/cjs/gx-ide-design-import.cjs.entry.js.map +1 -0
- package/dist/cjs/gx-ide-entity-selector.cjs.entry.js +1 -1
- package/dist/cjs/gx-ide-entity-selector.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +4 -4
- package/dist/collection/components/_helpers/entity-selector/entity-selector.css +2 -2
- package/dist/collection/components/_helpers/entity-selector/entity-selector.js.map +1 -1
- package/dist/collection/components/bpm/import-files/gx-ide-assets/bpm-import-files/langs/bpm-import-files.lang.en.json +18 -0
- package/dist/collection/components/bpm/import-files/helpers.js.map +1 -0
- package/dist/collection/components/bpm/{files-selector/files-selector.css → import-files/import-files.css} +27 -0
- package/dist/collection/components/bpm/{files-selector/files-selector.js → import-files/import-files.js} +32 -33
- package/dist/collection/components/bpm/import-files/import-files.js.map +1 -0
- package/dist/collection/components/{import-from-design/import-from-design.js → design-import/design-import.js} +115 -64
- package/dist/collection/components/design-import/design-import.js.map +1 -0
- package/dist/collection/components/{import-from-design/gx-ide-assets/import-from-design/langs/import-from-design.lang.en.json → design-import/gx-ide-assets/design-import/langs/design-import.lang.en.json} +2 -1
- package/dist/components/entity-selector.js +1 -1
- package/dist/components/entity-selector.js.map +1 -1
- package/dist/components/gx-ide-bpm-import-files.d.ts +11 -0
- package/dist/components/gx-ide-bpm-import-files.js +172 -0
- package/dist/components/gx-ide-bpm-import-files.js.map +1 -0
- package/dist/components/gx-ide-design-import.d.ts +11 -0
- package/dist/components/{gx-ide-import-from-design.js → gx-ide-design-import.js} +95 -49
- package/dist/components/gx-ide-design-import.js.map +1 -0
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-bpm-import-files.entry.js +99 -0
- package/dist/esm/gx-ide-bpm-import-files.entry.js.map +1 -0
- package/dist/esm/gx-ide-design-import.entry.js +563 -0
- package/dist/esm/gx-ide-design-import.entry.js.map +1 -0
- package/dist/esm/gx-ide-entity-selector.entry.js +1 -1
- package/dist/esm/gx-ide-entity-selector.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
- package/dist/genexus-ide-ui/gx-ide-assets/bpm-import-files/langs/bpm-import-files.lang.en.json +18 -0
- package/dist/genexus-ide-ui/gx-ide-assets/{import-from-design/langs/import-from-design.lang.en.json → design-import/langs/design-import.lang.en.json} +2 -1
- package/dist/genexus-ide-ui/{p-82291acd.entry.js → p-03b2a741.entry.js} +43 -19
- package/dist/genexus-ide-ui/p-03b2a741.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-9bf62c5c.entry.js → p-c46c7974.entry.js} +244 -175
- package/dist/genexus-ide-ui/p-c46c7974.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-3345a1bc.entry.js → p-e07809d0.entry.js} +2 -2
- package/dist/genexus-ide-ui/p-e07809d0.entry.js.map +1 -0
- package/dist/types/components/bpm/{files-selector/files-selector.d.ts → import-files/import-files.d.ts} +11 -5
- package/dist/types/components/{import-from-design/import-from-design.d.ts → design-import/design-import.d.ts} +24 -10
- package/dist/types/components.d.ts +202 -200
- package/package.json +1 -1
- package/dist/cjs/gx-ide-bpm-files-selector.cjs.entry.js +0 -101
- package/dist/cjs/gx-ide-bpm-files-selector.cjs.entry.js.map +0 -1
- package/dist/cjs/gx-ide-import-from-design.cjs.entry.js +0 -522
- package/dist/cjs/gx-ide-import-from-design.cjs.entry.js.map +0 -1
- package/dist/collection/components/bpm/files-selector/files-selector.js.map +0 -1
- package/dist/collection/components/bpm/files-selector/gx-ide-assets/bpm-files-selector/langs/bpm-files-selector.lang.en.json +0 -14
- package/dist/collection/components/bpm/files-selector/helpers.js.map +0 -1
- package/dist/collection/components/import-from-design/import-from-design.js.map +0 -1
- package/dist/components/gx-ide-bpm-files-selector.d.ts +0 -11
- package/dist/components/gx-ide-bpm-files-selector.js +0 -164
- package/dist/components/gx-ide-bpm-files-selector.js.map +0 -1
- package/dist/components/gx-ide-import-from-design.d.ts +0 -11
- package/dist/components/gx-ide-import-from-design.js.map +0 -1
- package/dist/esm/gx-ide-bpm-files-selector.entry.js +0 -97
- package/dist/esm/gx-ide-bpm-files-selector.entry.js.map +0 -1
- package/dist/esm/gx-ide-import-from-design.entry.js +0 -518
- package/dist/esm/gx-ide-import-from-design.entry.js.map +0 -1
- package/dist/genexus-ide-ui/gx-ide-assets/bpm-files-selector/langs/bpm-files-selector.lang.en.json +0 -14
- package/dist/genexus-ide-ui/p-3345a1bc.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-82291acd.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-9bf62c5c.entry.js.map +0 -1
- /package/dist/collection/components/bpm/{files-selector/gx-ide-assets/bpm-files-selector/langs/bpm-files-selector.lang.ja.json → import-files/gx-ide-assets/bpm-import-files/langs/bpm-import-files.lang.ja.json} +0 -0
- /package/dist/collection/components/bpm/{files-selector/gx-ide-assets/bpm-files-selector/langs/bpm-files-selector.lang.zh.json → import-files/gx-ide-assets/bpm-import-files/langs/bpm-import-files.lang.zh.json} +0 -0
- /package/dist/collection/components/bpm/{files-selector → import-files}/helpers.js +0 -0
- /package/dist/collection/components/{import-from-design/import-from-design.css → design-import/design-import.css} +0 -0
- /package/dist/collection/components/{import-from-design/gx-ide-assets/import-from-design/langs/import-from-design.lang.ja.json → design-import/gx-ide-assets/design-import/langs/design-import.lang.ja.json} +0 -0
- /package/dist/collection/components/{import-from-design/gx-ide-assets/import-from-design/langs/import-from-design.lang.zh.json → design-import/gx-ide-assets/design-import/langs/design-import.lang.zh.json} +0 -0
- /package/dist/genexus-ide-ui/gx-ide-assets/{bpm-files-selector/langs/bpm-files-selector.lang.ja.json → bpm-import-files/langs/bpm-import-files.lang.ja.json} +0 -0
- /package/dist/genexus-ide-ui/gx-ide-assets/{bpm-files-selector/langs/bpm-files-selector.lang.zh.json → bpm-import-files/langs/bpm-import-files.lang.zh.json} +0 -0
- /package/dist/genexus-ide-ui/gx-ide-assets/{import-from-design/langs/import-from-design.lang.ja.json → design-import/langs/design-import.lang.ja.json} +0 -0
- /package/dist/genexus-ide-ui/gx-ide-assets/{import-from-design/langs/import-from-design.lang.zh.json → design-import/langs/design-import.lang.zh.json} +0 -0
- /package/dist/types/components/bpm/{files-selector → import-files}/helpers.d.ts +0 -0
|
@@ -1,518 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5bd24426.js';
|
|
2
|
-
import { L as Locale } from './locale-3c32f251.js';
|
|
3
|
-
import { c as config } from './config-a492e15e.js';
|
|
4
|
-
import { r as renderFormItems } from './common-aaad5759.js';
|
|
5
|
-
|
|
6
|
-
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}";
|
|
7
|
-
|
|
8
|
-
const DESIGN_DATA_TYPE_PANELS = "panels";
|
|
9
|
-
const DESIGN_DATA_TYPE_STENCILS = "stencils";
|
|
10
|
-
const DESIGN_DATA_TYPE_IMAGES = "images";
|
|
11
|
-
const DESIGN_DATA_TYPE_DESIGN_SYSTEM = "design_system";
|
|
12
|
-
const DESIGN_DATA_TYPE_FONTS = "fonts";
|
|
13
|
-
const GxIdeImportFromDesign = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
registerInstance(this, hostRef);
|
|
16
|
-
this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
|
|
17
|
-
this.renderedFirstTime = false;
|
|
18
|
-
/**
|
|
19
|
-
* 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.
|
|
20
|
-
*/
|
|
21
|
-
this.loadedItems = new Map();
|
|
22
|
-
this.panelsSelected = [];
|
|
23
|
-
this.stencilsSelected = [];
|
|
24
|
-
// private imagesSelected: string[] = [];
|
|
25
|
-
// private designSystemSelected: string[] = [];
|
|
26
|
-
this.fontsSelected = [];
|
|
27
|
-
// 9.LOCAL METHODS //
|
|
28
|
-
this.attachTreeMouseListeners = () => {
|
|
29
|
-
this.treeDataEl.addEventListener("mouseenter", this.treeMouseEnter);
|
|
30
|
-
this.treeDataEl.addEventListener("mouseleave", this.treeMouseLeave);
|
|
31
|
-
};
|
|
32
|
-
this.removeTreeMouseListeners = () => {
|
|
33
|
-
this.treeDataEl.removeEventListener("mouseenter", this.treeMouseEnter);
|
|
34
|
-
this.treeDataEl.removeEventListener("mouseleave", this.treeMouseLeave);
|
|
35
|
-
};
|
|
36
|
-
this.treeMouseEnter = () => {
|
|
37
|
-
this.shrunkenTree = false;
|
|
38
|
-
};
|
|
39
|
-
this.treeMouseLeave = () => {
|
|
40
|
-
this.shrunkenTree = true;
|
|
41
|
-
};
|
|
42
|
-
this.messageType = (message) => {
|
|
43
|
-
if (message.type === "error") {
|
|
44
|
-
return "text-alert-error";
|
|
45
|
-
}
|
|
46
|
-
else if (message.type === "warning") {
|
|
47
|
-
return "text-alert-warning";
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
return "text-gray";
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
this.objectsTreeSelectedItemsChangedHandler = async (event) => {
|
|
54
|
-
var _a;
|
|
55
|
-
if (event.detail.length) {
|
|
56
|
-
const item = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item;
|
|
57
|
-
const itemComposedId = item.id;
|
|
58
|
-
const idList = itemComposedId.split("@");
|
|
59
|
-
const itemId = idList[0];
|
|
60
|
-
const itemDesignType = idList[1];
|
|
61
|
-
if (itemId && itemId !== "parent") {
|
|
62
|
-
this.selectedDesignType = itemDesignType;
|
|
63
|
-
const loadedItem = this.getLoadedItem(itemComposedId);
|
|
64
|
-
if (!loadedItem) {
|
|
65
|
-
const designDataDetail = await this.getDesignDataDetail(itemId, this.selectedDesignType);
|
|
66
|
-
this.loadedItems.set(itemComposedId, {
|
|
67
|
-
designType: this.selectedDesignType,
|
|
68
|
-
designDataDetail: designDataDetail
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
/* Item has been queried already. The item content exists already. */
|
|
73
|
-
this.selectedDesignType = loadedItem.designType;
|
|
74
|
-
this.selectedDesignItem = loadedItem.designDataDetail;
|
|
75
|
-
this.getCodeFactory(loadedItem.designType);
|
|
76
|
-
this.renderDetailDataTree(loadedItem.designType);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
this.getLoadedItem = (id) => {
|
|
82
|
-
var _a;
|
|
83
|
-
return (_a = this.loadedItems) === null || _a === void 0 ? void 0 : _a.get(id);
|
|
84
|
-
};
|
|
85
|
-
this.objectsTreeCheckedItemsChangedHandler = (event) => {
|
|
86
|
-
const items = Array.from(event.detail.values());
|
|
87
|
-
let currentParentId = null;
|
|
88
|
-
const result = {};
|
|
89
|
-
for (const item of items) {
|
|
90
|
-
if (item.item.id.startsWith("parent@")) {
|
|
91
|
-
currentParentId = item.item.id.split("@")[1];
|
|
92
|
-
result[currentParentId] = [];
|
|
93
|
-
}
|
|
94
|
-
else if (item.item.checked && currentParentId) {
|
|
95
|
-
const parentId = item.item.id.split("@")[1];
|
|
96
|
-
if (parentId === currentParentId) {
|
|
97
|
-
const id = item.item.id.split("@")[0];
|
|
98
|
-
result[currentParentId].push(id);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
// const { designSystem, fonts, images, panels, stencils } = result;
|
|
103
|
-
const { fonts, panels, stencils } = result;
|
|
104
|
-
// this.designSystemSelected = designSystem;
|
|
105
|
-
this.fontsSelected = fonts;
|
|
106
|
-
// this.imagesSelected = images;
|
|
107
|
-
this.panelsSelected = panels;
|
|
108
|
-
this.stencilsSelected = stencils;
|
|
109
|
-
};
|
|
110
|
-
this.selectFile = () => {
|
|
111
|
-
this.optionPathEl.openFile();
|
|
112
|
-
};
|
|
113
|
-
this.pathOnInputHandler = (e) => {
|
|
114
|
-
this.path = e.detail;
|
|
115
|
-
};
|
|
116
|
-
this.pathOnFileSelected = (e) => {
|
|
117
|
-
this.selectedFile = e.detail[0];
|
|
118
|
-
const fileName = e.detail[0].name;
|
|
119
|
-
this.path = fileName;
|
|
120
|
-
this.evaluateAccessToken();
|
|
121
|
-
};
|
|
122
|
-
this.evaluateAccessToken = async () => {
|
|
123
|
-
this.showAccessToken = await this.requiresAccessTokenCallback(this.optionPathEl.value);
|
|
124
|
-
};
|
|
125
|
-
this.loadData = async () => {
|
|
126
|
-
this.isLoading = true;
|
|
127
|
-
const source = this.selectedFile ? this.selectedFile : this.path;
|
|
128
|
-
const token = this.accessTokenEl ? this.accessTokenEl.value : undefined;
|
|
129
|
-
this.designData = null;
|
|
130
|
-
await this.loadCallback(source, token, this.messageCallback).then((designData) => {
|
|
131
|
-
// this.isLoading = false;
|
|
132
|
-
this.messages = [];
|
|
133
|
-
this.designData = designData;
|
|
134
|
-
if (this.designData) {
|
|
135
|
-
this.panelsSelected = [
|
|
136
|
-
...this.designData.panels.map(item => item.id)
|
|
137
|
-
];
|
|
138
|
-
this.stencilsSelected = [
|
|
139
|
-
...this.designData.stencils.map(item => item.id)
|
|
140
|
-
];
|
|
141
|
-
// this.imagesSelected = [
|
|
142
|
-
// ...this.designData.images.map(item => item.id)
|
|
143
|
-
// ];
|
|
144
|
-
// this.designSystemSelected = [
|
|
145
|
-
// ...this.designData.designSystem.map(item => item.id)
|
|
146
|
-
// ];
|
|
147
|
-
this.fontsSelected = [...this.designData.fonts.map(item => item.id)];
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
// There was probably an error
|
|
151
|
-
this.panelsSelected = [];
|
|
152
|
-
this.stencilsSelected = [];
|
|
153
|
-
// this.imagesSelected = [];
|
|
154
|
-
// this.designSystemSelected = [];
|
|
155
|
-
this.fontsSelected = [];
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
this.isLoading = false;
|
|
159
|
-
};
|
|
160
|
-
this.messageCallback = message => {
|
|
161
|
-
this.messages = [...this.messages, message];
|
|
162
|
-
};
|
|
163
|
-
this.getDesignDataDetail = async (id, designType) => {
|
|
164
|
-
let loadFn;
|
|
165
|
-
switch (designType) {
|
|
166
|
-
case DESIGN_DATA_TYPE_IMAGES:
|
|
167
|
-
loadFn = this.loadImageCallback;
|
|
168
|
-
break;
|
|
169
|
-
case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
|
|
170
|
-
loadFn = this.loadDesignSystemCallback;
|
|
171
|
-
break;
|
|
172
|
-
case DESIGN_DATA_TYPE_FONTS:
|
|
173
|
-
loadFn = this.loadFontCallback;
|
|
174
|
-
break;
|
|
175
|
-
case DESIGN_DATA_TYPE_PANELS:
|
|
176
|
-
case DESIGN_DATA_TYPE_STENCILS:
|
|
177
|
-
loadFn = this.loadPanelDataCallback;
|
|
178
|
-
break;
|
|
179
|
-
}
|
|
180
|
-
let returnedData;
|
|
181
|
-
await loadFn(id).then((data) => {
|
|
182
|
-
this.selectedDesignType = designType;
|
|
183
|
-
this.selectedDesignItem = data;
|
|
184
|
-
this.getCodeFactory(designType);
|
|
185
|
-
this.renderDetailDataTree(designType);
|
|
186
|
-
returnedData = data;
|
|
187
|
-
});
|
|
188
|
-
return returnedData;
|
|
189
|
-
};
|
|
190
|
-
this.confirm = () => {
|
|
191
|
-
var _a, _b;
|
|
192
|
-
this.confirmCallback({
|
|
193
|
-
panels: this.panelsSelected,
|
|
194
|
-
stencils: this.stencilsSelected,
|
|
195
|
-
fonts: this.fontsSelected,
|
|
196
|
-
/* images: this.imagesSelected, */
|
|
197
|
-
moduleId: (_b = (_a = this.filterModuleEl) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id,
|
|
198
|
-
styleName: this.optionStyleEl.value,
|
|
199
|
-
importAsWebPanels: this.optionImportAsEl.checked
|
|
200
|
-
});
|
|
201
|
-
};
|
|
202
|
-
this.cancel = () => {
|
|
203
|
-
this.cancelCallback();
|
|
204
|
-
this.isLoading = false;
|
|
205
|
-
};
|
|
206
|
-
this.fitImagesHandler = (e) => {
|
|
207
|
-
this.fitImages = e.detail.value;
|
|
208
|
-
};
|
|
209
|
-
this.shrinkTreeHandler = (e) => {
|
|
210
|
-
const checked = e.detail.value;
|
|
211
|
-
this.shrinkTree = checked;
|
|
212
|
-
if (checked) {
|
|
213
|
-
this.shrunkenTree = true;
|
|
214
|
-
}
|
|
215
|
-
else {
|
|
216
|
-
this.shrunkenTree = false;
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
|
-
// 9.LOCAL METHODS -> RENDERS //
|
|
220
|
-
this.renderOptions = () => {
|
|
221
|
-
var _a;
|
|
222
|
-
return (h("div", { class: {
|
|
223
|
-
"options grid": true,
|
|
224
|
-
"options--hide-access-token": !this.showAccessToken
|
|
225
|
-
} }, 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
|
|
226
|
-
? [
|
|
227
|
-
h("gxg-label", { class: { "access-token-label": true } }, this._componentLocale.options.accessToken),
|
|
228
|
-
h("gxg-form-text", { class: { "access-token": true }, ref: (el) => (this.accessTokenEl = el), part: "access-token", disabled: this.isLoading })
|
|
229
|
-
]
|
|
230
|
-
: 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: {
|
|
231
|
-
"checkboxes-options__col-right": true,
|
|
232
|
-
"checkboxes-options__col-right--hidden": !this.designDataTreeDataModel.length
|
|
233
|
-
} }, 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 })))));
|
|
234
|
-
};
|
|
235
|
-
this.renderMessages = () => {
|
|
236
|
-
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;
|
|
237
|
-
};
|
|
238
|
-
this.renderMain = () => {
|
|
239
|
-
if (this.designData) {
|
|
240
|
-
return (
|
|
241
|
-
/* #main*/
|
|
242
|
-
h("main", { class: { "main": true, "main--shrunken-tree": this.shrunkenTree } }, [this.renderDesignTree(), this.renderDesignTabs()]));
|
|
243
|
-
}
|
|
244
|
-
else if (!this.isLoading) {
|
|
245
|
-
return h("main", { class: "main" }, this.renderNoDesignData());
|
|
246
|
-
}
|
|
247
|
-
else {
|
|
248
|
-
return this.renderMessages();
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
this.renderNoDesignData = () => {
|
|
252
|
-
if (!this.isLoading) {
|
|
253
|
-
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)));
|
|
254
|
-
}
|
|
255
|
-
};
|
|
256
|
-
this.renderDesignTree = () => {
|
|
257
|
-
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) })));
|
|
258
|
-
};
|
|
259
|
-
this.renderFooter = () => {
|
|
260
|
-
return [
|
|
261
|
-
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),
|
|
262
|
-
h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)
|
|
263
|
-
];
|
|
264
|
-
};
|
|
265
|
-
this.renderPanelTab = () => {
|
|
266
|
-
const renderControlsTree = (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||
|
|
267
|
-
this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&
|
|
268
|
-
this.detailTreeModel.length > 0;
|
|
269
|
-
return (h("div", { class: {
|
|
270
|
-
"panel-tab": true,
|
|
271
|
-
"panel-tab--controls-tree": renderControlsTree
|
|
272
|
-
}, part: "data-panel-composition-container" }, this.selectedDesignItem &&
|
|
273
|
-
this.selectedDesignItem.composition &&
|
|
274
|
-
this.selectedDesignItem.composition.preview ? (h("div", { part: "data-panel-composition-preview", class: "panel-item" }, h("img", { src: this.selectedDesignItem && this.selectedDesignItem.composition
|
|
275
|
-
? this.selectedDesignItem.composition.preview
|
|
276
|
-
: 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));
|
|
277
|
-
};
|
|
278
|
-
this.renderImageTab = () => {
|
|
279
|
-
return (h("div", { part: "data-panel-composition-preview", class: "data-preview" }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview" })));
|
|
280
|
-
};
|
|
281
|
-
this.renderDesignTabs = () => {
|
|
282
|
-
return (h("gxg-tabs", { class: {
|
|
283
|
-
"design-tabs": true,
|
|
284
|
-
"design-tabs--fit-images": this.fitImages
|
|
285
|
-
}, 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 ||
|
|
286
|
-
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 ||
|
|
287
|
-
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 ||
|
|
288
|
-
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 ||
|
|
289
|
-
(this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
|
|
290
|
-
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 ||
|
|
291
|
-
this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
|
|
292
|
-
? this.renderImageTab()
|
|
293
|
-
: this.renderPanelTab()), h("gxg-tab", { tab: "code", key: "code" }, h("div", { ref: (el) => (this.codeFactoryRenderEl = el) }))));
|
|
294
|
-
};
|
|
295
|
-
this.designData = null;
|
|
296
|
-
this.detailTreeModel = [];
|
|
297
|
-
this.isLoading = false;
|
|
298
|
-
this.messages = [];
|
|
299
|
-
this.path = "";
|
|
300
|
-
this.selectedFile = undefined;
|
|
301
|
-
this.selectedDesignType = undefined;
|
|
302
|
-
this.selectedDesignItem = undefined;
|
|
303
|
-
this.showAccessToken = undefined;
|
|
304
|
-
this.designDataTreeDataModel = [];
|
|
305
|
-
this.updateTabsActiveTab = false;
|
|
306
|
-
this.fitImages = false;
|
|
307
|
-
this.shrinkTree = false;
|
|
308
|
-
this.shrunkenTree = false;
|
|
309
|
-
this.treeSh = false;
|
|
310
|
-
this.displayTitle = false;
|
|
311
|
-
this.extensions = undefined;
|
|
312
|
-
this.defaultModule = undefined;
|
|
313
|
-
this.selectModuleCallback = undefined;
|
|
314
|
-
this.cancelCallback = undefined;
|
|
315
|
-
this.confirmCallback = undefined;
|
|
316
|
-
this.loadCallback = undefined;
|
|
317
|
-
this.loadDesignSystemCallback = undefined;
|
|
318
|
-
this.loadFontCallback = undefined;
|
|
319
|
-
this.loadImageCallback = undefined;
|
|
320
|
-
this.loadPanelDataCallback = undefined;
|
|
321
|
-
this.requiresAccessTokenCallback = undefined;
|
|
322
|
-
this.shadow = false;
|
|
323
|
-
this.styles = undefined;
|
|
324
|
-
this.textEditorFactoryCallback = undefined;
|
|
325
|
-
}
|
|
326
|
-
watchDesignDataHandler(newDesignData) {
|
|
327
|
-
if (newDesignData) {
|
|
328
|
-
this.designDataTreeDataModel = [
|
|
329
|
-
{
|
|
330
|
-
id: `parent@${DESIGN_DATA_TYPE_PANELS}`,
|
|
331
|
-
class: "category tree-view-item",
|
|
332
|
-
leaf: false,
|
|
333
|
-
caption: this._componentLocale.tree.panels,
|
|
334
|
-
startImgSrc: "general/knowledge-base",
|
|
335
|
-
checkbox: true,
|
|
336
|
-
checked: true,
|
|
337
|
-
expanded: true,
|
|
338
|
-
items: this.designData.panels.map(item => ({
|
|
339
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,
|
|
340
|
-
class: "object tree-view-item",
|
|
341
|
-
leaf: true,
|
|
342
|
-
caption: item.name,
|
|
343
|
-
startImgSrc: "general/generator",
|
|
344
|
-
checkbox: true,
|
|
345
|
-
checked: true
|
|
346
|
-
}))
|
|
347
|
-
},
|
|
348
|
-
{
|
|
349
|
-
id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,
|
|
350
|
-
class: "category tree-view-item",
|
|
351
|
-
leaf: false,
|
|
352
|
-
caption: this._componentLocale.tree.stencils,
|
|
353
|
-
startImgSrc: "general/knowledge-base",
|
|
354
|
-
checkbox: true,
|
|
355
|
-
checked: true,
|
|
356
|
-
expanded: true,
|
|
357
|
-
items: this.designData.stencils.map(item => ({
|
|
358
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_STENCILS}`,
|
|
359
|
-
class: "object tree-view-item",
|
|
360
|
-
leaf: true,
|
|
361
|
-
caption: item.name,
|
|
362
|
-
startImgSrc: "general/generator",
|
|
363
|
-
checkbox: true,
|
|
364
|
-
checked: true
|
|
365
|
-
}))
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,
|
|
369
|
-
class: "category tree-view-item",
|
|
370
|
-
leaf: false,
|
|
371
|
-
caption: this._componentLocale.tree.images,
|
|
372
|
-
startImgSrc: "general/knowledge-base",
|
|
373
|
-
checkbox: true,
|
|
374
|
-
checked: true,
|
|
375
|
-
expanded: true,
|
|
376
|
-
items: this.designData.images.map(item => ({
|
|
377
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_IMAGES}`,
|
|
378
|
-
class: "object tree-view-item",
|
|
379
|
-
leaf: true,
|
|
380
|
-
caption: item.name,
|
|
381
|
-
startImgSrc: "general/generator",
|
|
382
|
-
checkbox: true,
|
|
383
|
-
checked: true
|
|
384
|
-
}))
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
|
|
388
|
-
class: "category tree-view-item",
|
|
389
|
-
leaf: false,
|
|
390
|
-
caption: this._componentLocale.tree.designSystem,
|
|
391
|
-
startImgSrc: "general/knowledge-base",
|
|
392
|
-
checkbox: true,
|
|
393
|
-
checked: true,
|
|
394
|
-
expanded: true,
|
|
395
|
-
items: this.designData.designSystem.map(item => ({
|
|
396
|
-
class: "object tree-view-item",
|
|
397
|
-
leaf: true,
|
|
398
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
|
|
399
|
-
caption: item.name,
|
|
400
|
-
startImgSrc: "general/generator",
|
|
401
|
-
checkbox: true,
|
|
402
|
-
checked: true
|
|
403
|
-
}))
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
|
|
407
|
-
class: "category tree-view-item",
|
|
408
|
-
leaf: false,
|
|
409
|
-
caption: this._componentLocale.tree.fonts,
|
|
410
|
-
startImgSrc: "general/knowledge-base",
|
|
411
|
-
checkbox: true,
|
|
412
|
-
checked: true,
|
|
413
|
-
expanded: true,
|
|
414
|
-
items: this.designData.fonts.map(item => ({
|
|
415
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
|
|
416
|
-
class: "object tree-view-item",
|
|
417
|
-
leaf: true,
|
|
418
|
-
caption: item.name,
|
|
419
|
-
startImgSrc: "general/generator",
|
|
420
|
-
checkbox: true,
|
|
421
|
-
checked: true
|
|
422
|
-
}))
|
|
423
|
-
}
|
|
424
|
-
];
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
watchShrinkTreeHandler(shrink) {
|
|
428
|
-
if (shrink) {
|
|
429
|
-
this.attachTreeMouseListeners();
|
|
430
|
-
}
|
|
431
|
-
else {
|
|
432
|
-
this.removeTreeMouseListeners();
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
// 6.COMPONENT LIFECYCLE EVENTS //
|
|
436
|
-
async componentWillLoad() {
|
|
437
|
-
this._componentLocale = await Locale.getComponentStrings(this.el);
|
|
438
|
-
}
|
|
439
|
-
componentDidRender() {
|
|
440
|
-
if (!this.renderedFirstTime) {
|
|
441
|
-
this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
|
|
442
|
-
this.renderedFirstTime = true;
|
|
443
|
-
}
|
|
444
|
-
}
|
|
445
|
-
disconnectedCallback() {
|
|
446
|
-
this.removeTreeMouseListeners();
|
|
447
|
-
}
|
|
448
|
-
// 7.LISTENERS //
|
|
449
|
-
watchMessagesHandler(newValue, oldValue) {
|
|
450
|
-
if (newValue !== oldValue) {
|
|
451
|
-
if (this.messagesList) {
|
|
452
|
-
this.messagesList.scrollTop = this.messagesList.scrollHeight;
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
// 8.PUBLIC METHODS API //
|
|
457
|
-
/**
|
|
458
|
-
* Validate necessary data input
|
|
459
|
-
*/
|
|
460
|
-
async validate() {
|
|
461
|
-
const isValid = true;
|
|
462
|
-
return isValid;
|
|
463
|
-
}
|
|
464
|
-
loadTreeItemCompositionModel(controls) {
|
|
465
|
-
const modelList = [];
|
|
466
|
-
for (const control of controls) {
|
|
467
|
-
let model = {
|
|
468
|
-
id: control.name,
|
|
469
|
-
caption: control.name,
|
|
470
|
-
startImgSrc: control.type,
|
|
471
|
-
checkbox: false,
|
|
472
|
-
expanded: true,
|
|
473
|
-
leaf: control.leaf
|
|
474
|
-
};
|
|
475
|
-
if (control.controls) {
|
|
476
|
-
model = Object.assign(Object.assign({}, model), { items: this.loadTreeItemCompositionModel(control.controls) });
|
|
477
|
-
}
|
|
478
|
-
modelList.push(model);
|
|
479
|
-
}
|
|
480
|
-
return modelList;
|
|
481
|
-
}
|
|
482
|
-
getCodeFactory(designType) {
|
|
483
|
-
switch (designType) {
|
|
484
|
-
case DESIGN_DATA_TYPE_PANELS:
|
|
485
|
-
case DESIGN_DATA_TYPE_STENCILS:
|
|
486
|
-
this.textEditorFactoryCallback("html", this.codeFactoryRenderEl, this.selectedDesignItem.code);
|
|
487
|
-
break;
|
|
488
|
-
case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
|
|
489
|
-
this.textEditorFactoryCallback("tokens", this.tokensFactoryRenderEl, this.selectedDesignItem.tokens);
|
|
490
|
-
this.textEditorFactoryCallback("styles", this.stylesFactoryRenderEl, this.selectedDesignItem.styles);
|
|
491
|
-
break;
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
renderDetailDataTree(designType) {
|
|
495
|
-
switch (designType) {
|
|
496
|
-
case DESIGN_DATA_TYPE_PANELS:
|
|
497
|
-
case DESIGN_DATA_TYPE_STENCILS:
|
|
498
|
-
this.detailTreeModel = this.loadTreeItemCompositionModel(this.selectedDesignItem.composition.controls);
|
|
499
|
-
break;
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
// 10.RENDER() FUNCTION //
|
|
503
|
-
render() {
|
|
504
|
-
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()))));
|
|
505
|
-
}
|
|
506
|
-
static get assetsDirs() { return ["gx-ide-assets/import-from-design"]; }
|
|
507
|
-
get el() { return getElement(this); }
|
|
508
|
-
static get watchers() { return {
|
|
509
|
-
"designData": ["watchDesignDataHandler"],
|
|
510
|
-
"shrinkTree": ["watchShrinkTreeHandler"],
|
|
511
|
-
"messages": ["watchMessagesHandler"]
|
|
512
|
-
}; }
|
|
513
|
-
};
|
|
514
|
-
GxIdeImportFromDesign.style = importFromDesignCss;
|
|
515
|
-
|
|
516
|
-
export { GxIdeImportFromDesign as gx_ide_import_from_design };
|
|
517
|
-
|
|
518
|
-
//# sourceMappingURL=gx-ide-import-from-design.entry.js.map
|