@genexus/genexus-ide-ui 0.0.140 → 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-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 +1 -1
- 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/{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/{genexus-ide-ui/gx-ide-assets/import-from-design/langs/import-from-design.lang.en.json → collection/components/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-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-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/{collection/components/import-from-design/gx-ide-assets/import-from-design/langs/import-from-design.lang.en.json → genexus-ide-ui/gx-ide-assets/design-import/langs/design-import.lang.en.json} +2 -1
- 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/import-gxpm/import-gxpm.d.ts +21 -0
- 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 +168 -168
- package/package.json +1 -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/import-from-design/import-from-design.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-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/p-3345a1bc.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-9bf62c5c.entry.js.map +0 -1
- /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/{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
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon2.js';
|
|
|
5
5
|
import { d as defineCustomElement$2 } from './gxg-label2.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
|
7
7
|
|
|
8
|
-
const entitySelectorCss = ":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)}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:
|
|
8
|
+
const entitySelectorCss = ":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)}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:var(--mer-font__size--xxs)}:host .wrapper{display:inline-flex;align-items:center;gap:var(--mer-spacing--xxs);border:var(--ds-form-control-border);border-radius:var(--ds-form-control-border-radius);color:var(--ds-form-control-color);background-color:var(--ds-form-control-background-color);font-size:var(--ds-form-control-font-size);font-family:var(--ds-base-font-family-primary);padding-inline-start:var(--ds-form-control-padding-horizontal);padding-inline-end:var(--ds-form-control-padding-horizontal);padding-block-start:0;padding-block-end:0;height:var(--gxg-form-text-height)}:host .wrapper::placeholder{font-style:var(--ds-form-control-placeholder-style);color:var(--ds-form-control-placeholder-color);opacity:1;}:host .wrapper::-ms-input-placeholder{font-style:var(--ds-form-control-placeholder-style);color:var(--ds-form-control-placeholder-color)}:host .wrapper:hover{border-color:var(--ds-form-control-border-color--hover)}:host input{background-color:transparent;width:100%;flex:1;border:0;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-size:var(--mer-font__size--xcs)}:host input:focus-visible{outline:none}:host(:focus-within) .wrapper{outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0}:host(.gxg-entity-selector--button-has-focus) .wrapper{outline:none}:host([label-position=start]){flex-direction:row}:host([label-position=start]) .wrapper{flex:1}";
|
|
9
9
|
|
|
10
10
|
const GxIdeEntitySelector = /*@__PURE__*/ proxyCustomElement(class GxIdeEntitySelector extends HTMLElement {
|
|
11
11
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"entity-selector.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,
|
|
1
|
+
{"file":"entity-selector.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,4nTAA4nT;;MCqBzoT,mBAAmB;;;;;;;;;;QAkFtB,yBAAoB,GAAG;YAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;SAChC,CAAC;QAEM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,oBAAoB;gBACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC,IAAI,CAAC,MAAM;oBACrC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;iBACrB,CAAC,CAAC;SACN,CAAC;QAEM,cAAS,GAAG;YAClB,IAAI,KAAK,CAAC;YACV,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aACpB;iBAAM,IAAI,IAAI,CAAC,YAAY,EAAE;gBAC5B,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;aAC3B;YACD,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,MAAM,CAAC;SACnC,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;aAC3B;iBAAM,IAAI,IAAI,CAAC,YAAY,EAAE;gBAC5B,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;aAClC;YACD,OAAO,SAAS,CAAC;SAClB,CAAC;QAEM,uBAAkB,GAAG,CAAC,CAAa;YACzC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;gBACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;mCAhH4D;YAC5D,gBAAgB,EAAE,yBAAyB;YAC3C,iBAAiB,EAAE,8BAA8B;SAClD;;;6BAegE,OAAO;2BAKhC,KAAK;;;;8BAyBnB,KAAK;;;;;;;IAS/B,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;;IAyDD,MAAM;;QACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,uCAAuC,EAAE,IAAI,CAAC,cAAc;aAC7D,IAEA,IAAI,CAAC,KAAK,KACT,iBACE,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,IAAI,CAAC,UAAU,IAErB,IAAI,CAAC,KAAK,CACD,CACb,EACD,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,IAChC,IAAI,CAAC,OAAO,EAAE,KACb,gBACE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EACvB,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EACpB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,IAAI,EAAC,OAAO,GACF,CACb,EACD,aACE,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAA,GAClD,EACF,kBACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,oBAAoB,gBACtB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB,EACtD,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,oBAAoB,GACb,EACd,kBACE,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,IAAI,CAAC,qBAAqB,gBACvB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,iBAAiB,EACvD,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,mCAAmC,EACxC,QAAQ,EAAE,CAAC,IAAI,CAAC,oBAAoB,GACxB,CACV,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/collection/globals/mixins.scss\";\n\n:host {\n display: flex;\n flex-direction: column;\n color: var(--color-primary-enabled);\n\n .container {\n display: flex;\n flex-direction: column;\n gap: 30px;\n }\n /*label*/\n label {\n font-size: var(--mer-font__size--xxs);\n }\n /*wrapper*/\n .wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--mer-spacing--xxs);\n @include form-element-common-styles();\n }\n /*input*/\n input {\n background-color: transparent;\n width: 100%;\n flex: 1;\n border: 0;\n @include gxg-text();\n font-size: var(--mer-font__size--xcs);\n &:focus-visible {\n outline: none;\n }\n }\n}\n:host(:focus-within) {\n .wrapper {\n @include form-element-common-styles-focus-type-1();\n }\n}\n:host(.gxg-entity-selector--button-has-focus) {\n .wrapper {\n outline: none;\n }\n}\n/*label position*/\n:host([label-position=\"start\"]) {\n flex-direction: row;\n .wrapper {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color as IconColor } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { LabelPosition } from \"../directory-selector/directory-selector\";\nimport { EntityData } from \"../../../common/types\";\n@Component({\n tag: \"gx-ide-entity-selector\",\n styleUrl: \"entity-selector.scss\",\n shadow: true\n})\nexport class GxIdeEntitySelector {\n // 1.OWN PROPERTIES | WATCH'S //\n\n /**\n * This property provides the user a way to define custom aria-label descriptions.\n */\n @Prop() readonly accessibilityLabels?: EntitySelectorLabels = {\n buttonClearLabel: \"clears the actual value\",\n buttonSelectLabel: \"displays the entity selector\"\n };\n\n /**\n * Default value to be assigned as the component's value. This value should always be used when the 'X' button is pressed.\n */\n @Prop() readonly defaultValue?: EntityData | null | undefined;\n\n /**\n * Optional label (same as the label of an input).\n */\n @Prop() readonly label: string;\n\n /**\n * The label position\n */\n @Prop({ reflect: true }) readonly labelPosition: LabelPosition = \"above\";\n\n /**\n * Centers the label\n */\n @Prop() readonly centerLabel: boolean = false;\n\n /**\n * The label width\n */\n @Prop() readonly labelWidth: string;\n\n /**\n * Callback that will be called when the user presses the action button. Returns the new value assigned to the component.\n */\n @Prop() readonly selectEntityCallback: () => Promise<EntityData>;\n\n /**\n * Value currently assigned.\n */\n @Prop({ mutable: true }) value: EntityData | null | undefined;\n\n // 2. REFERENCE TO ELEMENTS //\n\n // 3.STATE() VARIABLES //\n\n /**\n * This variable adds or removes a CSS class on the host, and it can be used to remove the focus-within styles from the host in the case the focus is on a button.\n */\n\n @State() buttonHasFocus = false;\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n *\n * @param newValue the new entity value\n */\n @Watch(\"value\")\n valueChangedHandler() {\n this.valueChanged.emit(this.value);\n }\n\n // 5.EVENTS (EMIT) //\n\n /**\n * @description Emits the input value every time it changes\n */\n @Event() valueChanged: EventEmitter<EntityData>;\n\n // 6.METHODS //\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private btnClearClickHandler = () => {\n this.value = this.defaultValue;\n };\n\n private btnSelectClickHandler = () => {\n this.selectEntityCallback &&\n this.selectEntityCallback().then(result => {\n this.value = result;\n });\n };\n\n private iconColor = (): IconColor => {\n let value;\n if (this.value) {\n value = this.value;\n } else if (this.defaultValue) {\n value = this.defaultValue;\n }\n return value?.iconColor || \"auto\";\n };\n\n private iconSrc = (): string | undefined => {\n if (this.value) {\n return this.value.iconSrc;\n } else if (this.defaultValue) {\n return this.defaultValue.iconSrc;\n }\n return undefined;\n };\n\n private buttonFocusHandler = (e: FocusEvent) => {\n if (e.type === \"focus\") {\n this.buttonHasFocus = true;\n } else if (e.type === \"blur\") {\n this.buttonHasFocus = false;\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host\n class={{\n \"gxg-entity-selector--button-has-focus\": this.buttonHasFocus\n }}\n >\n {this.label && (\n <gxg-label\n part=\"label\"\n labelPosition={this.labelPosition}\n center={this.centerLabel}\n width={this.labelWidth}\n >\n {this.label}\n </gxg-label>\n )}\n <div part=\"wrapper\" class=\"wrapper\">\n {this.iconSrc() && (\n <gxg-icon\n color={this.iconColor()}\n type={this.iconSrc()}\n part=\"icon\"\n aria-hidden=\"true\"\n size=\"small\"\n ></gxg-icon>\n )}\n <input\n type=\"text\"\n readonly\n part=\"input input-entity\"\n value={this.value?.name || this.defaultValue?.name}\n />\n <gxg-button\n part=\"button-clear\"\n onClick={this.btnClearClickHandler}\n aria-label={this.accessibilityLabels?.buttonClearLabel}\n onFocus={this.buttonFocusHandler}\n onBlur={this.buttonFocusHandler}\n type=\"secondary-icon-only\"\n icon=\"gemini-tools/reset\"\n ></gxg-button>\n <gxg-button\n part=\"button-select\"\n onClick={this.btnSelectClickHandler}\n aria-label={this.accessibilityLabels?.buttonSelectLabel}\n onFocus={this.buttonFocusHandler}\n onBlur={this.buttonFocusHandler}\n type=\"secondary-icon-only\"\n icon=\"gemini-tools/show-more-horizontal\"\n disabled={!this.selectEntityCallback}\n ></gxg-button>\n </div>\n </Host>\n );\n }\n}\n\nexport type EntitySelectorLabels = {\n buttonClearLabel: string;\n buttonSelectLabel: string;\n};\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface GxIdeDesignImport extends Components.GxIdeDesignImport, HTMLElement {}
|
|
4
|
+
export const GxIdeDesignImport: {
|
|
5
|
+
prototype: GxIdeDesignImport;
|
|
6
|
+
new (): GxIdeDesignImport;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -28,14 +28,14 @@ import { d as defineCustomElement$4 } from './title.js';
|
|
|
28
28
|
import { d as defineCustomElement$3 } from './tooltip.js';
|
|
29
29
|
import { d as defineCustomElement$2 } from './tree-view2.js';
|
|
30
30
|
|
|
31
|
-
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}";
|
|
31
|
+
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}";
|
|
32
32
|
|
|
33
33
|
const DESIGN_DATA_TYPE_PANELS = "panels";
|
|
34
34
|
const DESIGN_DATA_TYPE_STENCILS = "stencils";
|
|
35
35
|
const DESIGN_DATA_TYPE_IMAGES = "images";
|
|
36
36
|
const DESIGN_DATA_TYPE_DESIGN_SYSTEM = "design_system";
|
|
37
37
|
const DESIGN_DATA_TYPE_FONTS = "fonts";
|
|
38
|
-
const GxIdeImportFromDesign
|
|
38
|
+
const GxIdeImportFromDesign = /*@__PURE__*/ proxyCustomElement(class GxIdeImportFromDesign extends HTMLElement {
|
|
39
39
|
constructor() {
|
|
40
40
|
super();
|
|
41
41
|
this.__registerHost();
|
|
@@ -46,6 +46,12 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
46
46
|
* 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.
|
|
47
47
|
*/
|
|
48
48
|
this.loadedItems = new Map();
|
|
49
|
+
/**
|
|
50
|
+
* The path/URL value when loadCallback was called for the last time. This is used to determine
|
|
51
|
+
* if there is a difference with the actual path/URL value, in order to know if calling loadCallback
|
|
52
|
+
* again is required on blur on Path/URL/File input.
|
|
53
|
+
*/
|
|
54
|
+
this.pathOnLoadCallback = "";
|
|
49
55
|
this.panelsSelected = [];
|
|
50
56
|
this.stencilsSelected = [];
|
|
51
57
|
// private imagesSelected: string[] = [];
|
|
@@ -85,7 +91,9 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
85
91
|
const idList = itemComposedId.split("@");
|
|
86
92
|
const itemId = idList[0];
|
|
87
93
|
const itemDesignType = idList[1];
|
|
88
|
-
|
|
94
|
+
const isChildNode = itemId && itemId !== "parent";
|
|
95
|
+
const isDesignSystem = itemDesignType === "design_system";
|
|
96
|
+
if (isChildNode || isDesignSystem) {
|
|
89
97
|
this.selectedDesignType = itemDesignType;
|
|
90
98
|
const loadedItem = this.getLoadedItem(itemComposedId);
|
|
91
99
|
if (!loadedItem) {
|
|
@@ -135,19 +143,22 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
135
143
|
this.stencilsSelected = stencils;
|
|
136
144
|
};
|
|
137
145
|
this.selectFile = () => {
|
|
138
|
-
this.
|
|
139
|
-
};
|
|
140
|
-
this.pathOnInputHandler = (e) => {
|
|
141
|
-
this.path = e.detail;
|
|
146
|
+
this.pathURLFile.openFile();
|
|
142
147
|
};
|
|
143
|
-
this.pathOnFileSelected = (e) => {
|
|
148
|
+
this.pathOnFileSelected = async (e) => {
|
|
144
149
|
this.selectedFile = e.detail[0];
|
|
145
150
|
const fileName = e.detail[0].name;
|
|
146
151
|
this.path = fileName;
|
|
147
|
-
this.
|
|
152
|
+
this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
|
|
148
153
|
};
|
|
149
|
-
this.
|
|
150
|
-
this.showAccessToken = await this.requiresAccessTokenCallback(this.
|
|
154
|
+
this.pathURLFileBlurHandler = async () => {
|
|
155
|
+
this.showAccessToken = await this.requiresAccessTokenCallback(this.pathURLFile.value);
|
|
156
|
+
if (this.path !== this.pathOnLoadCallback) {
|
|
157
|
+
// if loadOnBlur is true, and the actual path/URL value differs from the one
|
|
158
|
+
// when loadCallback was called the last time, it is required to call loadCallback
|
|
159
|
+
// again, because the DesignData might differ from the actual.
|
|
160
|
+
this.loadData();
|
|
161
|
+
}
|
|
151
162
|
};
|
|
152
163
|
this.loadData = async () => {
|
|
153
164
|
this.isLoading = true;
|
|
@@ -182,6 +193,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
182
193
|
this.fontsSelected = [];
|
|
183
194
|
}
|
|
184
195
|
});
|
|
196
|
+
this.pathOnLoadCallback = this.path;
|
|
185
197
|
this.isLoading = false;
|
|
186
198
|
};
|
|
187
199
|
this.messageCallback = message => {
|
|
@@ -243,18 +255,30 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
243
255
|
this.shrunkenTree = false;
|
|
244
256
|
}
|
|
245
257
|
};
|
|
258
|
+
this.importAsWebPanelsChangedHandler = () => {
|
|
259
|
+
// When "Import as Web Panels" checkbox value changes, loadCallback has to be
|
|
260
|
+
// called again, because the received DesignData differs between having
|
|
261
|
+
// "Import as Web Panels" checked or not. This only makes sense if a file is
|
|
262
|
+
// selected or the Path/URL input is not empty
|
|
263
|
+
if (this.path.length !== 0 || !this.selectedFile) {
|
|
264
|
+
this.loadData();
|
|
265
|
+
}
|
|
266
|
+
};
|
|
267
|
+
this.pathURLFileValueChangedHandler = (e) => {
|
|
268
|
+
this.path = e.detail;
|
|
269
|
+
};
|
|
246
270
|
// 9.LOCAL METHODS -> RENDERS //
|
|
247
271
|
this.renderOptions = () => {
|
|
248
272
|
var _a;
|
|
249
273
|
return (h("div", { class: {
|
|
250
274
|
"options grid": true,
|
|
251
275
|
"options--hide-access-token": !this.showAccessToken
|
|
252
|
-
} }, h("gxg-label", { class: "path-url-label" }, this._componentLocale.options.path), h("div", { class: "path-url-wrapper" }, h("gxg-form-text", { value: this.path,
|
|
276
|
+
} }, 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
|
|
253
277
|
? [
|
|
254
278
|
h("gxg-label", { class: { "access-token-label": true } }, this._componentLocale.options.accessToken),
|
|
255
279
|
h("gxg-form-text", { class: { "access-token": true }, ref: (el) => (this.accessTokenEl = el), part: "access-token", disabled: this.isLoading })
|
|
256
280
|
]
|
|
257
|
-
: 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: {
|
|
281
|
+
: 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: {
|
|
258
282
|
"checkboxes-options__col-right": true,
|
|
259
283
|
"checkboxes-options__col-right--hidden": !this.designDataTreeDataModel.length
|
|
260
284
|
} }, h("gxg-form-checkbox", { label: this._componentLocale.options.fitImages, part: "fit-images-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.fitImagesHandler }), h("gxg-form-checkbox", { label: this._componentLocale.options.toggleTree, part: "shrink-tree-checkbox", disabled: this.isLoading || !this.designDataTreeDataModel.length, onChange: this.shrinkTreeHandler })))));
|
|
@@ -305,25 +329,49 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
305
329
|
this.renderImageTab = () => {
|
|
306
330
|
return (h("div", { part: "data-panel-composition-preview", class: "data-preview" }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview" })));
|
|
307
331
|
};
|
|
332
|
+
this.tabActivatedHandler = (tabActivated) => {
|
|
333
|
+
if (tabActivated.detail) {
|
|
334
|
+
const tab = tabActivated.detail.tab;
|
|
335
|
+
this.activeTabs = Object.assign(Object.assign({}, this.activeTabs), { [this.selectedDesignType]: tab });
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
this.isTabActive = (tab) => {
|
|
339
|
+
const activeTab = this.selectedDesignType;
|
|
340
|
+
if (this.activeTabs[activeTab] === tab) {
|
|
341
|
+
return true;
|
|
342
|
+
}
|
|
343
|
+
else {
|
|
344
|
+
return false;
|
|
345
|
+
}
|
|
346
|
+
};
|
|
308
347
|
this.renderDesignTabs = () => {
|
|
309
348
|
return (h("gxg-tabs", { class: {
|
|
310
349
|
"design-tabs": true,
|
|
311
350
|
"design-tabs--fit-images": this.fitImages
|
|
312
351
|
}, 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 ||
|
|
313
|
-
this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.tokens, tab: "tokens", key: "tokens", "
|
|
314
|
-
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 ||
|
|
315
|
-
this.selectedDesignType === DESIGN_DATA_TYPE_DESIGN_SYSTEM, slot: "tab-bar", "tab-label": this._componentLocale.tabs.composition, tab: "composition", key: "composition", "
|
|
352
|
+
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 ||
|
|
353
|
+
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 ||
|
|
354
|
+
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 ||
|
|
355
|
+
(this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
|
|
356
|
+
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 ||
|
|
316
357
|
(this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&
|
|
317
|
-
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 ||
|
|
358
|
+
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 ||
|
|
318
359
|
this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
|
|
319
360
|
? this.renderImageTab()
|
|
320
|
-
: this.renderPanelTab()), h("gxg-tab", { tab: "code", key: "code" }, h("div", { ref: (el) => (this.codeFactoryRenderEl = el) }))));
|
|
361
|
+
: 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) }))));
|
|
362
|
+
};
|
|
363
|
+
this.activeTabs = {
|
|
364
|
+
panels: "composition",
|
|
365
|
+
stencils: "composition",
|
|
366
|
+
images: "composition",
|
|
367
|
+
fonts: "composition",
|
|
368
|
+
design_system: "tokens"
|
|
321
369
|
};
|
|
370
|
+
this.path = "";
|
|
322
371
|
this.designData = null;
|
|
323
372
|
this.detailTreeModel = [];
|
|
324
373
|
this.isLoading = false;
|
|
325
374
|
this.messages = [];
|
|
326
|
-
this.path = "";
|
|
327
375
|
this.selectedFile = undefined;
|
|
328
376
|
this.selectedDesignType = undefined;
|
|
329
377
|
this.selectedDesignItem = undefined;
|
|
@@ -354,6 +402,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
354
402
|
if (newDesignData) {
|
|
355
403
|
this.designDataTreeDataModel = [
|
|
356
404
|
{
|
|
405
|
+
order: 0,
|
|
357
406
|
id: `parent@${DESIGN_DATA_TYPE_PANELS}`,
|
|
358
407
|
class: "category tree-view-item",
|
|
359
408
|
leaf: false,
|
|
@@ -362,17 +411,19 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
362
411
|
checkbox: true,
|
|
363
412
|
checked: true,
|
|
364
413
|
expanded: true,
|
|
365
|
-
items: this.designData.panels.map(item => ({
|
|
414
|
+
items: this.designData.panels.map((item, i) => ({
|
|
366
415
|
id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,
|
|
367
416
|
class: "object tree-view-item",
|
|
368
417
|
leaf: true,
|
|
369
418
|
caption: item.name,
|
|
370
419
|
startImgSrc: "general/generator",
|
|
371
420
|
checkbox: true,
|
|
372
|
-
checked: true
|
|
421
|
+
checked: true,
|
|
422
|
+
selected: i === 0
|
|
373
423
|
}))
|
|
374
424
|
},
|
|
375
425
|
{
|
|
426
|
+
order: 1,
|
|
376
427
|
id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,
|
|
377
428
|
class: "category tree-view-item",
|
|
378
429
|
leaf: false,
|
|
@@ -392,6 +443,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
392
443
|
}))
|
|
393
444
|
},
|
|
394
445
|
{
|
|
446
|
+
order: 2,
|
|
395
447
|
id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,
|
|
396
448
|
class: "category tree-view-item",
|
|
397
449
|
leaf: false,
|
|
@@ -411,18 +463,19 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
411
463
|
}))
|
|
412
464
|
},
|
|
413
465
|
{
|
|
414
|
-
|
|
466
|
+
order: 3,
|
|
467
|
+
id: `parent@${DESIGN_DATA_TYPE_FONTS}`,
|
|
415
468
|
class: "category tree-view-item",
|
|
416
469
|
leaf: false,
|
|
417
|
-
caption: this._componentLocale.tree.
|
|
470
|
+
caption: this._componentLocale.tree.fonts,
|
|
418
471
|
startImgSrc: "general/knowledge-base",
|
|
419
472
|
checkbox: true,
|
|
420
473
|
checked: true,
|
|
421
474
|
expanded: true,
|
|
422
|
-
items: this.designData.
|
|
475
|
+
items: this.designData.fonts.map(item => ({
|
|
476
|
+
id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
|
|
423
477
|
class: "object tree-view-item",
|
|
424
478
|
leaf: true,
|
|
425
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
|
|
426
479
|
caption: item.name,
|
|
427
480
|
startImgSrc: "general/generator",
|
|
428
481
|
checkbox: true,
|
|
@@ -430,23 +483,14 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
430
483
|
}))
|
|
431
484
|
},
|
|
432
485
|
{
|
|
433
|
-
|
|
486
|
+
order: 4,
|
|
487
|
+
id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
|
|
434
488
|
class: "category tree-view-item",
|
|
435
|
-
leaf:
|
|
436
|
-
caption: this._componentLocale.tree.
|
|
489
|
+
leaf: true,
|
|
490
|
+
caption: this._componentLocale.tree.designSystem,
|
|
437
491
|
startImgSrc: "general/knowledge-base",
|
|
438
492
|
checkbox: true,
|
|
439
|
-
checked: true
|
|
440
|
-
expanded: true,
|
|
441
|
-
items: this.designData.fonts.map(item => ({
|
|
442
|
-
id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,
|
|
443
|
-
class: "object tree-view-item",
|
|
444
|
-
leaf: true,
|
|
445
|
-
caption: item.name,
|
|
446
|
-
startImgSrc: "general/generator",
|
|
447
|
-
checkbox: true,
|
|
448
|
-
checked: true
|
|
449
|
-
}))
|
|
493
|
+
checked: true
|
|
450
494
|
}
|
|
451
495
|
];
|
|
452
496
|
}
|
|
@@ -511,6 +555,7 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
511
555
|
case DESIGN_DATA_TYPE_PANELS:
|
|
512
556
|
case DESIGN_DATA_TYPE_STENCILS:
|
|
513
557
|
this.textEditorFactoryCallback("html", this.codeFactoryRenderEl, this.selectedDesignItem.code);
|
|
558
|
+
this.textEditorFactoryCallback("html", this.layoutFactoryRenderEl, this.selectedDesignItem.layout);
|
|
514
559
|
break;
|
|
515
560
|
case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
|
|
516
561
|
this.textEditorFactoryCallback("tokens", this.tokensFactoryRenderEl, this.selectedDesignItem.tokens);
|
|
@@ -530,15 +575,15 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
530
575
|
render() {
|
|
531
576
|
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()))));
|
|
532
577
|
}
|
|
533
|
-
static get assetsDirs() { return ["gx-ide-assets/import
|
|
578
|
+
static get assetsDirs() { return ["gx-ide-assets/design-import"]; }
|
|
534
579
|
get el() { return this; }
|
|
535
580
|
static get watchers() { return {
|
|
536
581
|
"designData": ["watchDesignDataHandler"],
|
|
537
582
|
"shrinkTree": ["watchShrinkTreeHandler"],
|
|
538
583
|
"messages": ["watchMessagesHandler"]
|
|
539
584
|
}; }
|
|
540
|
-
static get style() { return
|
|
541
|
-
}, [1, "gx-ide-import
|
|
585
|
+
static get style() { return designImportCss; }
|
|
586
|
+
}, [1, "gx-ide-design-import", {
|
|
542
587
|
"displayTitle": [4, "display-title"],
|
|
543
588
|
"extensions": [1],
|
|
544
589
|
"defaultModule": [16],
|
|
@@ -554,11 +599,12 @@ const GxIdeImportFromDesign$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeImpo
|
|
|
554
599
|
"shadow": [4],
|
|
555
600
|
"styles": [16],
|
|
556
601
|
"textEditorFactoryCallback": [16],
|
|
602
|
+
"activeTabs": [32],
|
|
603
|
+
"path": [32],
|
|
557
604
|
"designData": [32],
|
|
558
605
|
"detailTreeModel": [32],
|
|
559
606
|
"isLoading": [32],
|
|
560
607
|
"messages": [32],
|
|
561
|
-
"path": [32],
|
|
562
608
|
"selectedFile": [32],
|
|
563
609
|
"selectedDesignType": [32],
|
|
564
610
|
"selectedDesignItem": [32],
|
|
@@ -579,11 +625,11 @@ function defineCustomElement$1() {
|
|
|
579
625
|
if (typeof customElements === "undefined") {
|
|
580
626
|
return;
|
|
581
627
|
}
|
|
582
|
-
const components = ["gx-ide-import
|
|
628
|
+
const components = ["gx-ide-design-import", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-drop", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
|
|
583
629
|
components.forEach(tagName => { switch (tagName) {
|
|
584
|
-
case "gx-ide-import
|
|
630
|
+
case "gx-ide-design-import":
|
|
585
631
|
if (!customElements.get(tagName)) {
|
|
586
|
-
customElements.define(tagName, GxIdeImportFromDesign
|
|
632
|
+
customElements.define(tagName, GxIdeImportFromDesign);
|
|
587
633
|
}
|
|
588
634
|
break;
|
|
589
635
|
case "ch-checkbox":
|
|
@@ -714,9 +760,9 @@ function defineCustomElement$1() {
|
|
|
714
760
|
} });
|
|
715
761
|
}
|
|
716
762
|
|
|
717
|
-
const
|
|
763
|
+
const GxIdeDesignImport = GxIdeImportFromDesign;
|
|
718
764
|
const defineCustomElement = defineCustomElement$1;
|
|
719
765
|
|
|
720
|
-
export {
|
|
766
|
+
export { GxIdeDesignImport, defineCustomElement };
|
|
721
767
|
|
|
722
|
-
//# sourceMappingURL=gx-ide-import
|
|
768
|
+
//# sourceMappingURL=gx-ide-design-import.js.map
|