@genexus/genexus-ide-ui 1.0.25 → 1.0.26

package/dist/genexus-ide-ui/p-406122e5.entry.js

@@ -0,0 +1,973 @@
+import { r as t, h as e, H as s, g as i } from "./p-49712340.js";
+
+import { g as a } from "./p-0b0ce806.js";
+
+import { c as o } from "./p-78b90603.js";
+
+import { L as n } from "./p-74d59062.js";
+
+const mapStylesToComboBoxItemModel = t => t === null || t === void 0 ? void 0 : t.map((t => ({
+  value: t.id,
+  caption: t.label || t.name
+})));
+
+const r = {
+  layout: {
+    id: "layout",
+    caption: "Layout",
+    slot: "layout"
+  },
+  code: {
+    id: "code",
+    caption: "Code",
+    slot: "code"
+  },
+  tokens: {
+    id: "tokens",
+    caption: "Tokens",
+    slot: "tokens"
+  },
+  styles: {
+    id: "styles",
+    caption: "Styles",
+    slot: "styles"
+  },
+  composition: {
+    id: "composition",
+    caption: "Composition",
+    slot: "composition"
+  }
+};
+
+const l = {
+  panels: [ {
+    id: r.composition.id,
+    name: r.composition.caption
+  }, {
+    id: r.layout.id,
+    name: r.layout.caption
+  }, {
+    id: r.code.id,
+    name: r.code.caption
+  } ],
+  stencils: [ {
+    id: r.composition.id,
+    name: r.composition.caption
+  }, {
+    id: r.layout.id,
+    name: r.layout.caption
+  }, {
+    id: r.code.id,
+    name: r.code.caption
+  } ],
+  images: [ {
+    id: r.composition.id,
+    name: r.composition.caption
+  } ],
+  fonts: [ {
+    id: r.composition.id,
+    name: r.composition.caption
+  } ],
+  designSystem: [ {
+    id: r.tokens.id,
+    name: r.tokens.caption
+  }, {
+    id: r.styles.id,
+    name: r.styles.caption
+  } ]
+};
+
+const h = new Map([ [ "panels", l.panels ], [ "stencils", l.stencils ], [ "images", l.images ], [ "design_system", l.designSystem ], [ "fonts", l.fonts ] ]);
+
+const c = '@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{display:grid;grid-auto-rows:max-content;grid-template-columns:minmax(88px, max-content) 1fr !important}.header--show-access-token{grid-template-areas:"path-url-label path-url-wrapper" "access-token-label access-token" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.header--hide-access-token{grid-template-areas:"path-url-label path-url-wrapper" "style-label style" "module-label module" "checkboxes-options checkboxes-options"}.path-url-wrapper{grid-template-columns:1fr max-content}.path-url-label{grid-area:path-url-label}.path-url-control{flex-grow:1}.select-load-button{min-inline-size:80px}.access-token-label{grid-area:access-token-label}.access-token{grid-area:access-token}.style-label{grid-area:style-label}.style{grid-area:style}.module-label{grid-area:module-label}.module{grid-area:module}.checkboxes-options{grid-area:checkboxes-options;grid-template-columns:max-content max-content;justify-content:space-between}.main{display:grid;grid-template-columns:250px 1fr;block-size:100%;overflow:auto}.main--loading{grid-template-columns:1fr}.panel-tab{block-size:100%;display:grid;grid-template-columns:1fr 300px}.panel-tab .panel-item{overflow:auto}.tree-view{padding-block:var(--mer-spacing--2xs)}.tree-view-panel-item{border-inline-start:var(--section-common-border)}.checker-board{--white-square-color:#fff1;--black-square-color:#0000;background:linear-gradient(45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(-45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(45deg, var(--black-square-color) 75%, var(--white-square-color) 75%), linear-gradient(-45deg, var(--black-square-color) 75%, var(--white-square-color) 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px}.tab{border-width:0 !important}.tab.fit-images .composition-tab-slot{font-size:0}.tab.fit-images img{object-fit:scale-down;object-position:left top;max-height:100%}.tab--hidden{display:none}.button-cancel,.button-ok{min-inline-size:var(--mer-spacing--4xl)}.messages-slot-container{block-size:100%}.composition-tab-slot{block-size:100%;overflow:auto}.empty-state{overflow:auto}.empty-state-button{transform:translateY(-12px)}.message{animation:fadeIn var(--mer-timing--fast) ease-in-out forwards}.message--info{color:var(--mer-text__on-surface)}.message--warning{color:var(--mer-text__warning)}.message--error{color:var(--mer-text__error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.combo-box.ch-disabled{--control__bg-color:var(--control__background-color--disabled);--control__border-color:var(--control__border-color--disabled);--control__color:var(--control__color--disabled);--ch-placeholder-color:var(--control-placeholder__color--disabled)}';
+
+var d = undefined && undefined.__classPrivateFieldGet || function(t, e, s, i) {
+  if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return s === "m" ? i : s === "a" ? i.call(t) : i ? i.value : e.get(t);
+};
+
+var p = undefined && undefined.__classPrivateFieldSet || function(t, e, s, i, a) {
+  if (i === "m") throw new TypeError("Private method is not writable");
+  if (i === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !a : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return i === "a" ? a.call(t, s) : a ? a.value = s : e.set(t, s), s;
+};
+
+var u, f, m, b, g, k, w, v, y, x, M, W, I, _, C, $, j, S, D, T, z, q, P, A, E, V, F, L, G, H, O, B, N, Y, J, K, Q, R, U, X, Z, tt, et, st, it, at, ot, nt, rt, lt;
+
+const ht = "panels";
+
+const ct = "stencils";
+
+const dt = "images";
+
+const pt = "design_system";
+
+const ut = "fonts";
+
+const ft = "@@@";
+
+// ch-checkbox
+const mt = "on";
+
+// Icons
+const bt = a({
+  category: "menus",
+  name: "delete",
+  colorType: "primary"
+});
+
+const gt = a({
+  category: "objects",
+  name: "design"
+});
+
+const kt = a({
+  category: "controls",
+  name: "file-upload"
+});
+
+const wt = [ "resets/box-sizing", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "components/button", "components/checkbox", "components/edit", "components/tree-view", "components/combo-box", "components/tab", "components/tooltip", "chameleon/scrollbar" ];
+
+const vt = class {
+  constructor(s) {
+    t(this, s);
+    u.add(this);
+    /**
+         * The component hard-coded strings translations.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        f.set(this, void 0);
+    /**
+         * 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.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        m.set(this, new Map);
+    b.set(this, false);
+    g.set(this, void 0);
+    /* References needed to collect data */    k.set(this, void 0);
+    w.set(this, void 0);
+    v.set(this, void 0);
+    y.set(this, void 0);
+    x.set(this, []);
+    M.set(this, []);
+    W.set(this, []);
+    I.set(this, []);
+    _.set(this, void 0);
+    C.set(this, void 0);
+    // 9.LOCAL METHODS //
+        $.set(this, (() => {
+      this.activeTabs.set("panels", l.panels[0].id);
+      this.activeTabs.set("stencils", l.stencils[0].id);
+      this.activeTabs.set("images", l.images[0].id);
+      this.activeTabs.set("fonts", l.fonts[0].id);
+      this.activeTabs.set("design_system", l.designSystem[0].id);
+    }));
+    j.set(this, (async () => {
+      this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
+      // evaluate access token error
+            if (this.accessToken.length) {
+        this.accessTokenHasError = false;
+      }
+    }));
+    S.set(this, (async () => {
+      const t = this.isLoaded && this.reactiveSettings.path && this.pathIsValid && this.path !== this.lastLoadCallbackSettingValues.path;
+      const e = !this.requiresAccessToken || this.requiresAccessToken && this.accessToken.length > 0;
+      if (t && e) {
+        d(this, F, "f").call(this);
+      }
+    }));
+    T.set(this, (async t => {
+      var e;
+      if (t.detail.length) {
+        const s = (e = t.detail[0]) === null || e === void 0 ? void 0 : e.item;
+        const i = s.id;
+        const a = i.split(ft);
+        const o = a[0];
+        const n = a[1];
+        const r = o && o !== "parent";
+        const l = n === "design_system";
+        if (r || l) {
+          this.tabsModel = h.get(n);
+          this.selectedDesignType = n;
+          const t = d(this, z, "f").call(this, i);
+          if (!t) {
+            const t = await d(this, G, "f").call(this, o, this.selectedDesignType);
+            d(this, m, "f").set(i, {
+              designType: this.selectedDesignType,
+              designDataDetail: t
+            });
+          } else {
+            // Item has been queried already. The item content exists already.
+            this.selectedDesignType = t.designType;
+            this.selectedDesignItem = t.designDataDetail;
+            d(this, u, "m", H).call(this, t.designType);
+            d(this, u, "m", et).call(this, t.designType);
+          }
+          this.renderedTabs.clear();
+          this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
+        }
+      }
+    }));
+    z.set(this, (t => {
+      var e;
+      return (e = d(this, m, "f")) === null || e === void 0 ? void 0 : e.get(t);
+    }));
+    q.set(this, (t => {
+      const e = /^(\/|\.\/|(\w:))[^:*?"<>|]*\.(sketch|gxsketch)$/i;
+ // Match valid file paths
+            const s = /^https?:\/\/(www\.)?figma\.com/;
+ // Match URLs containing "www.figma.com"
+            const i = /^https?:\/\/[^\s/$.?#].[^\s]*\.(sketch|gxsketch)$/i;
+ // Match URLs ending with .sketch or .gxsketch
+            const a = e.test(t) || s.test(t) || i.test(t);
+      return a;
+    }));
+    P.set(this, (t => {
+      const e = Array.from(t.detail.values());
+      let s = null;
+      const i = {};
+      for (const t of e) {
+        if (t.item.id.startsWith(`parent${ft}`)) {
+          s = t.item.id.split(ft)[1];
+          i[s] = [];
+        } else if (t.item.checked && s) {
+          const e = t.item.id.split(ft)[1];
+          if (e === s) {
+            const e = t.item.id.split(ft)[0];
+            i[s].push(e);
+          }
+        }
+      }
+      // const { designSystem, fonts, images, panels, stencils } = result;
+            const {fonts: a, panels: o, stencils: n, images: r} = i;
+      // this.designSystemSelected = designSystem;
+            p(this, x, o, "f");
+      p(this, M, n, "f");
+      p(this, W, r, "f");
+      p(this, I, a, "f");
+    }));
+    A.set(this, (() => {
+      d(this, _, "f").click();
+    }));
+    E.set(this, (t => {
+      this.styleValue = t.target.value;
+      if (this.reactiveSettings.style && this.styleValue !== this.lastLoadCallbackSettingValues.style) {
+        d(this, F, "f").call(this);
+      }
+    }));
+    V.set(this, (t => {
+      if (this.reactiveSettings.module && this.defaultModule.id !== t.detail.id && this.pathIsValid) {
+        d(this, F, "f").call(this);
+      }
+    }));
+    F.set(this, (async () => {
+      var t, e;
+      this.isLoading = true;
+      const s = this.selectedFile ? this.selectedFile : this.path;
+      const i = d(this, k, "f") ? d(this, k, "f").value : undefined;
+      const a = this.styleValue;
+      const o = d(this, w, "f").value === mt;
+      const n = await this.loadCallback(s, a, o, i, d(this, L, "f"));
+      // clear
+            p(this, x, [], "f");
+      p(this, M, [], "f");
+      p(this, I, [], "f");
+      this.selectedDesignType = undefined;
+      this.selectedDesignItem = undefined;
+      this.messages = [];
+      this.designData = n;
+      this.isLoaded = (t = n === null || n === void 0 ? void 0 : n.success) !== null && t !== void 0 ? t : false;
+      this.isLoading = false;
+      const r = (e = n.designSystem[0]) === null || e === void 0 ? void 0 : e.name;
+      if (r && !this.styleValue) this.styleValue = r;
+      // update the settings that were used for the last load
+            if (this.reactiveSettings.path && this.pathIsValid) {
+        this.lastLoadCallbackSettingValues.path = this.path;
+      }
+      if (this.reactiveSettings.style) {
+        this.lastLoadCallbackSettingValues.style = a;
+      }
+      if (this.reactiveSettings.module) {
+        this.lastLoadCallbackSettingValues.moduleId = d(this, v, "f").value.id;
+      }
+      if (this.reactiveSettings.importAsWebPanels) {
+        this.lastLoadCallbackSettingValues.importAsWebPanels = o;
+      }
+    }));
+    L.set(this, (t => {
+      this.messages = [ ...this.messages, t ];
+    }));
+    G.set(this, (async (t, e) => {
+      let s;
+      switch (e) {
+       case dt:
+        s = this.loadImageCallback;
+        break;
+
+       case pt:
+        s = this.loadDesignSystemCallback;
+        break;
+
+       case ut:
+        s = this.loadFontCallback;
+        break;
+
+       case ht:
+       case ct:
+        s = this.loadPanelDataCallback;
+        break;
+      }
+      let i;
+      await s(t).then((t => {
+        this.selectedDesignType = e;
+        this.selectedDesignItem = t;
+        d(this, u, "m", H).call(this, e);
+        d(this, u, "m", et).call(this, e);
+        i = t;
+      }));
+      return i;
+    }));
+    O.set(this, (() => {
+      var t, e;
+      this.confirmCallback({
+        panels: d(this, x, "f"),
+        stencils: d(this, M, "f"),
+        fonts: d(this, I, "f"),
+        images: d(this, W, "f"),
+        moduleId: (e = (t = d(this, v, "f")) === null || t === void 0 ? void 0 : t.value) === null || e === void 0 ? void 0 : e.id,
+        styleName: this.styleValue,
+        importAsWebPanels: d(this, w, "f").value === mt
+      });
+    }));
+    B.set(this, (() => {
+      this.cancelCallback();
+      this.isLoading = false;
+    }));
+    N.set(this, (t => {
+      this.fitImages = t.detail === mt;
+    }));
+    Y.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
+    J.set(this, (() => {
+      const t = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
+      if (t) {
+        d(this, F, "f").call(this);
+      }
+    }));
+    K.set(this, (() => {
+      this.selectedFile = null;
+      this.path = "";
+      this.accessToken = "";
+      this.selectedFile = null;
+      d(this, _, "f").value = null;
+    }));
+    Q.set(this, (t => {
+      var e;
+      const s = t.target;
+      if (((e = s.files) === null || e === void 0 ? void 0 : e.length) > 0) {
+        this.selectedFile = s.files[0];
+        this.path = this.selectedFile.name;
+        // we know the path is valid because the extensions are restricted by "extensions" Prop.
+            }
+    }));
+    R.set(this, (t => {
+      const e = t.target;
+      e.type = "text";
+ // display token on focus
+        }));
+    U.set(this, (t => {
+      const e = t.target;
+      e.type = "password";
+ // hide token on blur
+            this.accessTokenChanged(e.value);
+    }));
+    X.set(this, (async t => {
+      this.path = t.detail;
+      d(this, j, "f").call(this);
+      this.selectedFile = null;
+      if (!this.path.length) this.designData = null;
+    }));
+    // 9.LOCAL METHODS -> RENDERS //
+        Z.set(this, (() => {
+      const t = this.isLoading || this.pathIsValid && this.requiresAccessToken && this.accessToken.length === 0;
+      const s = this.isLoading || this.path.length === 0;
+      const i = this.isLoading;
+      const a = this.isLoading;
+      const n = !this.pathIsValid && this.path.length > 0;
+      const r = !this.pathIsValid && this.path.length > 0;
+      let l;
+      if (this.pathIsValid && this.path === this.lastLoadCallbackSettingValues.path) {
+        l = d(this, f, "f").header.btnReload;
+      } else if (this.pathIsValid) {
+        l = d(this, f, "f").header.btnLoad;
+      } else {
+        l = d(this, f, "f").header.selectFileButton;
+      }
+      return e("header", {
+        class: {
+          header: true,
+          "control-header-with-border": true,
+          "spacing-body-inline": true,
+          "spacing-body-block-start": true,
+          "header--show-access-token": this.requiresAccessToken,
+          "header--hide-access-token": !this.requiresAccessToken,
+          "field-group-cols-2": true
+        }
+      }, e("label", {
+        // path/url label
+        class: "label path-url-label"
+      }, d(this, f, "f").header.path), e("div", {
+        class: "path-url-wrapper buttons-spacer"
+      }, e("ch-edit", {
+        // path/url/file input
+        id: "path-url",
+        class: {
+          input: true,
+          "input-error": n,
+          "path-url-control": true
+        },
+        debounce: o.inputDebounce,
+        part: "option-path",
+        type: "text",
+        value: this.path,
+        onInput: d(this, X, "f"),
+        onBlur: this.reactiveSettings.path && d(this, S, "f"),
+        disabled: this.isLoading,
+        placeholder: `${d(this, f, "f").header.pathPlaceholder}`,
+        startImgSrc: kt,
+        ref: t => p(this, C, t, "f")
+      }), r && e("ch-tooltip", {
+        class: "tooltip",
+        actionElement: d(this, C, "f"),
+        blockAlign: o.tooltipSettings.blockAlign,
+        inlineAlign: o.tooltipSettings.inlineAlign,
+        delay: o.tooltipSettings.delay
+      }, d(this, f, "f").header.pathErrorMessage, " ", d(this, g, "f")), e("input", {
+        hidden: true,
+        type: "file",
+        accept: d(this, g, "f"),
+        onChange: d(this, Q, "f"),
+        ref: t => p(this, _, t, "f")
+      }), e("div", {
+        class: "buttons-spacer"
+      }, e("button", {
+        "aria-label": d(this, f, "f").header.removeFileSelection,
+        title: d(this, f, "f").header.removeFileSelection,
+        id: "reset-all-button",
+        class: "button-tertiary button-icon-only",
+        part: "reset-all-button",
+        disabled: s,
+        onClick: !s && d(this, K, "f")
+      }, e("ch-image", {
+        class: "icon-md",
+        src: bt,
+        disabled: s
+      })), e("button", {
+        // load file button
+        id: "button-load",
+        type: "primary-text-only",
+        onClick: this.pathIsValid ? d(this, F, "f") : d(this, A, "f"),
+        part: "button button--load",
+        disabled: t,
+        class: {
+          "button-primary": this.pathIsValid,
+          "button-secondary": !this.pathIsValid,
+          "select-load-button": true
+        }
+      }, l))), this.requiresAccessToken && [ e("label", {
+        // access token label
+        class: "label access-token-label"
+      }, d(this, f, "f").header.accessToken), e("div", null, e("ch-edit", {
+        class: {
+          input: true,
+          "access-token": true,
+          "input-error": this.accessTokenHasError
+        },
+        ref: t => p(this, k, t, "f"),
+        value: this.accessToken,
+        placeholder: d(this, f, "f").header.accessTokenPlaceholder,
+        onFocus: d(this, R, "f"),
+        onBlur: d(this, U, "f"),
+        part: "access-token",
+        disabled: this.isLoading,
+        type: "password"
+      }), this.accessTokenHasError && e("ch-tooltip", {
+        class: "tooltip",
+        actionElement: d(this, k, "f"),
+        blockAlign: o.tooltipSettings.blockAlign,
+        inlineAlign: o.tooltipSettings.inlineAlign,
+        delay: o.tooltipSettings.delay
+      }, d(this, f, "f").header.accessTokenErrorMessage)) ], e("label", {
+        // style label
+        class: "label style-label"
+      }, d(this, f, "f").header.style), e("ch-combo-box-render", {
+        // style combo box
+        suggest: true,
+        suggestOptions: {
+          alreadyProcessed: true
+        },
+        disabled: i,
+        model: this.stylesAsComboBoxModel,
+        value: this.styleValue,
+        onInput: d(this, E, "f"),
+        part: "option-style",
+        class: "combo-box style"
+      }), e("label", {
+        // module label
+        class: "label module-label"
+      }, d(this, f, "f").header.module), e("gx-ide-entity-selector", {
+        // module entity selector
+        labelPosition: "none",
+        value: this.defaultModule,
+        defaultValue: this.defaultModule,
+        selectEntityCallback: this.selectModuleCallback,
+        ref: t => p(this, v, t, "f"),
+        onValueChanged: this.reactiveSettings.module && d(this, V, "f"),
+        disabled: a,
+        class: "module"
+      }), e("div", {
+        // import as web panels
+        class: "checkboxes-options field-group"
+      }, e("ch-checkbox", {
+        caption: d(this, f, "f").header.importAs,
+        checkedValue: mt,
+        class: "checkbox import-as-web-panels",
+        ref: t => p(this, w, t, "f"),
+        value: this.importAsWebPanels ? mt : undefined,
+        part: "option-import-as-web-panels",
+        disabled: this.isLoading,
+        onInput: d(this, J, "f")
+      }), e("div", {
+        class: {
+          "field-group-inline": true,
+          "checkboxes-options__col-right": true
+        }
+      }, e("ch-checkbox", {
+        // fit images
+        caption: d(this, f, "f").header.fitImages,
+        checkedValue: mt,
+        class: "checkbox",
+        part: "fit-images-checkbox",
+        disabled: this.isLoading || !this.designDataTreeDataModel.length,
+        onInput: d(this, N, "f")
+      }))));
+    }));
+    tt.set(this, (() => this.messages.length > 0 && this.messages.map((t => e("p", {
+      class: {
+        "text-body-regular-m": true,
+        message: true,
+        [`message--${t.type}`]: true
+      }
+    }, t.type, ": ", t.text)))));
+    st.set(this, (() => {
+      var t, s;
+      if (this.isLoading || ((t = this.designData) === null || t === void 0 ? void 0 : t.success) === false) {
+        return e("div", {
+          class: "main main--loading scrollable",
+          ref: t => p(this, y, t, "f")
+        }, d(this, tt, "f").call(this), e("div", {
+          class: "text-body-regular-m spacing-body"
+        }, e("slot", {
+          name: "messages"
+        })));
+      } else if ((s = this.designData) === null || s === void 0 ? void 0 : s.success) {
+        /* #main*/
+        return e("div", {
+          class: "main"
+        }, [ d(this, it, "f").call(this), d(this, lt, "f").call(this) ]);
+      } else {
+        return e("gx-ide-empty-state", {
+          class: "empty-state scrollable",
+          stateIconSrc: gt,
+          isAnimated: d(this, b, "f"),
+          stateTitle: d(this, f, "f").messages.noDesignSelected,
+          key: "no-objects-empty-state"
+        }, e("button", {
+          // begin by selecting a file
+          class: "button-tertiary empty-state-button",
+          onClick: d(this, A, "f")
+        }, d(this, f, "f").messages.selectDesign));
+      }
+    }));
+    it.set(this, (() => e("ch-tree-view-render", {
+      part: "data-tree",
+      class: "tree-view",
+      id: "data-tree",
+      showLines: "last",
+      model: this.designDataTreeDataModel,
+      dragDisabled: true,
+      dropDisabled: true,
+      toggleCheckboxes: true,
+      checkbox: true,
+      checked: true,
+      onCheckedItemsChange: d(this, P, "f"),
+      onSelectedItemsChange: d(this, T, "f")
+    })));
+    at.set(this, (() => {
+      var t;
+      const s = ((t = this.designData) === null || t === void 0 ? void 0 : t.success) !== true || this.isLoading;
+      return e("footer", {
+        class: "control-footer-with-border spacing-body-block-end spacing-body-inline"
+      }, e("div", {
+        class: "buttons-spacer"
+      }, e("button", {
+        // button cancel
+        id: "button-cancel",
+        class: "button-secondary button-cancel",
+        type: "outlined",
+        onClick: d(this, B, "f"),
+        part: "button button--cancel",
+        slot: "footer-end"
+      }, d(this, f, "f").footer.btnCancel), e("button", {
+        // button ok
+        id: "button-ok",
+        class: "button-primary button-ok",
+        type: "primary-text-only",
+        onClick: !s && d(this, O, "f"),
+        part: "button button--ok",
+        disabled: s,
+        slot: "footer-end"
+      }, d(this, f, "f").footer.btnOk)));
+    }));
+    ot.set(this, (() => {
+      var t, s;
+      const i = (this.selectedDesignType === ht || this.selectedDesignType === ct) && this.detailTreeModel.length > 0;
+      return e("div", {
+        class: {
+          "panel-tab": true,
+          "panel-tab--controls-tree": i
+        },
+        part: "data-panel-composition-container"
+      }, ((s = (t = this.selectedDesignItem) === null || t === void 0 ? void 0 : t.composition) === null || s === void 0 ? void 0 : s.preview) ? e("div", {
+        part: "data-panel-composition-preview",
+        class: "panel-item scrollable"
+      }, e("img", {
+        src: this.selectedDesignItem.composition.preview,
+        alt: "Preview"
+      })) : null, i ? e("ch-tree-view-render", {
+        part: "data-panel-composition-tree",
+        class: "tree-view tree-view-panel-item scrollable",
+        showLines: "last",
+        model: this.detailTreeModel,
+        dragDisabled: true,
+        dropDisabled: true
+      }) : null);
+    }));
+    nt.set(this, (() => e("div", {
+      part: "data-panel-composition-preview",
+      class: "data-preview",
+      style: {
+        height: "100%"
+      }
+    }, e("img", {
+      src: this.selectedDesignItem ? this.selectedDesignItem : undefined,
+      alt: "Preview",
+      class: this.selectedDesignType === dt ? "checker-board" : undefined
+    }))));
+    rt.set(this, (t => {
+      this.renderedTabs.clear();
+      this.renderedTabs.add(t.detail.newSelectedId);
+      this.reRenderCounter++;
+      this.activeTabs.set(this.selectedDesignType, t.detail.newSelectedId);
+    }));
+    lt.set(this, (() => e("ch-tab-render", {
+      // main section
+      class: {
+        tab: true,
+        scrollable: true,
+        "fit-images": this.fitImages
+      },
+      direction: "block",
+      model: this.tabsModel,
+      selectedId: this.activeTabs.get(this.selectedDesignType),
+      overflow: "auto",
+      contain: "size",
+      onSelectedItemChange: d(this, rt, "f")
+    }, this.renderedTabs.has(r.tokens.id) && e("div", {
+      slot: r.tokens.slot,
+      class: "spacing-body"
+    }, e("slot", {
+      name: r.tokens.slot
+    })), this.renderedTabs.has(r.styles.id) && e("div", {
+      slot: r.styles.slot,
+      class: "spacing-body"
+    }, e("slot", {
+      name: r.styles.slot
+    })), this.renderedTabs.has(r.composition.id) && e("div", {
+      class: "composition-tab-slot scrollable",
+      slot: r.composition.slot
+    }, this.selectedDesignType === dt || this.selectedDesignType === ut ? d(this, nt, "f").call(this) : d(this, ot, "f").call(this)), this.renderedTabs.has(r.layout.id) && e("div", {
+      slot: r.layout.slot,
+      class: "spacing-body"
+    }, e("slot", {
+      name: r.layout.slot
+    })), this.renderedTabs.has(r.code.id) && e("div", {
+      slot: r.code.slot,
+      class: "spacing-body"
+    }, e("slot", {
+      name: r.code.slot
+    })))));
+    this.reRenderCounter = 0;
+    this.stylesAsComboBoxModel = undefined;
+    this.styleValue = "";
+    this.accessTokenHasError = false;
+    this.pathIsValid = undefined;
+    this.tabsModel = [];
+    this.activeTabs = new Map;
+    this.renderedTabs = new Set;
+    this.designData = null;
+    this.detailTreeModel = [];
+    this.isLoading = false;
+    this.isLoaded = false;
+    this.messages = [];
+    this.selectedFile = undefined;
+    this.selectedDesignType = undefined;
+    this.selectedDesignItem = undefined;
+    this.requiresAccessToken = undefined;
+    this.designDataTreeDataModel = [];
+    this.updateTabsActiveTab = false;
+    this.fitImages = false;
+    this.reactiveSettings = {
+      path: true,
+      style: false,
+      module: false,
+      importAsWebPanels: true
+    };
+    this.lastLoadCallbackSettingValues = {
+      path: undefined,
+      style: undefined,
+      moduleId: undefined,
+      importAsWebPanels: undefined
+    };
+    this.extensions = undefined;
+    this.defaultModule = undefined;
+    this.path = "";
+    this.accessToken = "";
+    this.importAsWebPanels = false;
+    this.selectModuleCallback = undefined;
+    this.cancelCallback = undefined;
+    this.confirmCallback = undefined;
+    this.loadCallback = undefined;
+    this.loadDesignSystemCallback = undefined;
+    this.loadFontCallback = undefined;
+    this.loadImageCallback = undefined;
+    this.loadPanelDataCallback = undefined;
+    this.requiresAccessTokenCallback = undefined;
+    this.styles = undefined;
+    this.textEditorFactoryCallback = undefined;
+  }
+  pathIsValidChanged(t) {
+    if (t) {
+      d(this, j, "f").call(this);
+    } else {
+      // hide access token input if path is not valid
+      this.requiresAccessToken = false;
+    }
+  }
+  designDataChanged(t) {
+    if (t) {
+      const t = d(this, Y, "f").call(this, this.designData.panels);
+      this.designDataTreeDataModel = [ {
+        order: 0,
+        id: `parent${ft}${ht}`,
+        leaf: false,
+        caption: d(this, f, "f").tree.panels,
+        startImgSrc: "objects/panel-for-sd",
+        checkbox: true,
+        checked: true,
+        expanded: true,
+        items: this.designData.panels.map(((e, s) => ({
+          id: `${e.id}${ft}${ht}`,
+          class: "object tree-view-item",
+          leaf: true,
+          caption: e.name,
+          startImgSrc: "objects/panel-for-sd",
+          checkbox: true,
+          checked: true,
+          selected: s === t
+        })))
+      }, {
+        order: 1,
+        id: `parent${ft}${ct}`,
+        leaf: false,
+        caption: d(this, f, "f").tree.stencils,
+        startImgSrc: "objects/stencil",
+        checkbox: true,
+        checked: true,
+        expanded: true,
+        items: this.designData.stencils.map((t => ({
+          id: `${t.id}${ft}${ct}`,
+          class: "object tree-view-item",
+          leaf: true,
+          caption: t.name,
+          startImgSrc: "objects/stencil",
+          checkbox: true,
+          checked: true
+        })))
+      }, {
+        order: 2,
+        id: `parent${ft}${dt}`,
+        parts: "category tree-view-item",
+        leaf: false,
+        caption: d(this, f, "f").tree.images,
+        startImgSrc: "objects/image",
+        checkbox: true,
+        checked: true,
+        expanded: true,
+        items: this.designData.images.map((t => ({
+          id: `${t.id}${ft}${dt}`,
+          class: "object tree-view-item",
+          leaf: true,
+          caption: t.name,
+          startImgSrc: "objects/image",
+          checkbox: true,
+          checked: true
+        })))
+      }, {
+        order: 3,
+        id: `parent${ft}${ut}`,
+        leaf: false,
+        caption: d(this, f, "f").tree.fonts,
+        startImgSrc: "controls/font",
+        checkbox: true,
+        checked: true,
+        expanded: true,
+        items: this.designData.fonts.map((t => ({
+          id: `${t.id}${ft}${ut}`,
+          class: "object tree-view-item",
+          leaf: true,
+          caption: t.name,
+          startImgSrc: "controls/font",
+          checkbox: true,
+          checked: true
+        })))
+      }, {
+        order: 4,
+        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${ft}${pt}`,
+        leaf: true,
+        caption: d(this, f, "f").tree.designSystem,
+        startImgSrc: "objects/dso",
+        checkbox: true,
+        checked: true
+      } ];
+    }
+  }
+  pathChanged(t) {
+    var e;
+    const s = ((e = this.selectedFile) === null || e === void 0 ? void 0 : e.size) > 0;
+    const i = d(this, q, "f").call(this, t) || s;
+    this.pathIsValid = i;
+  }
+  accessTokenChanged(t) {
+    if (!t.trim().length) {
+      this.accessTokenHasError = true;
+      return;
+    }
+    this.accessTokenHasError = false;
+    this.accessToken = t;
+  }
+  stylesChanged(t) {
+    this.stylesAsComboBoxModel = mapStylesToComboBoxItemModel(t);
+  }
+  async componentWillLoad() {
+    var t, e;
+    p(this, f, await n.getComponentStrings(this.el), "f");
+    p(this, g, this.extensions.map((t => `.${t}`)).join(", "), "f");
+    this.stylesChanged(this.styles);
+    d(this, $, "f").call(this);
+    this.pathChanged(this.path);
+    this.styleValue = ((t = this.stylesAsComboBoxModel) === null || t === void 0 ? void 0 : t.length) > 0 ? (e = this.stylesAsComboBoxModel[0]) === null || e === void 0 ? void 0 : e.value : "";
+  }
+  watchMessagesHandler(t, e) {
+    if (t !== e) {
+      if (d(this, y, "f")) {
+        d(this, y, "f").scrollTop = d(this, y, "f").scrollHeight;
+      }
+    }
+  }
+  render() {
+    return e(s, {
+      class: "widget"
+    }, e("ch-theme", {
+      model: wt
+    }), e("section", {
+      class: "section"
+    }, d(this, Z, "f").call(this), d(this, st, "f").call(this), d(this, at, "f").call(this)));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/design-import" ];
+  }
+  get el() {
+    return i(this);
+  }
+  static get watchers() {
+    return {
+      pathIsValid: [ "pathIsValidChanged" ],
+      designData: [ "designDataChanged" ],
+      path: [ "pathChanged" ],
+      accessToken: [ "accessTokenChanged" ],
+      styles: [ "stylesChanged" ],
+      messages: [ "watchMessagesHandler" ]
+    };
+  }
+};
+
+f = new WeakMap, m = new WeakMap, b = new WeakMap, g = new WeakMap, k = new WeakMap, 
+w = new WeakMap, v = new WeakMap, y = new WeakMap, x = new WeakMap, M = new WeakMap, 
+W = new WeakMap, I = new WeakMap, _ = new WeakMap, C = new WeakMap, $ = new WeakMap, 
+j = new WeakMap, S = new WeakMap, T = new WeakMap, z = new WeakMap, q = new WeakMap, 
+P = new WeakMap, A = new WeakMap, E = new WeakMap, V = new WeakMap, F = new WeakMap, 
+L = new WeakMap, G = new WeakMap, O = new WeakMap, B = new WeakMap, N = new WeakMap, 
+Y = new WeakMap, J = new WeakMap, K = new WeakMap, Q = new WeakMap, R = new WeakMap, 
+U = new WeakMap, X = new WeakMap, Z = new WeakMap, tt = new WeakMap, st = new WeakMap, 
+it = new WeakMap, at = new WeakMap, ot = new WeakMap, nt = new WeakMap, rt = new WeakMap, 
+lt = new WeakMap, u = new WeakSet, D = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(t) {
+  const e = [];
+  for (const s of t) {
+    let t = {
+      id: s.name,
+      caption: s.name,
+      startImgSrc: s.type,
+      checkbox: false,
+      expanded: true,
+      leaf: s.leaf
+    };
+    if (s.controls) {
+      t = Object.assign(Object.assign({}, t), {
+        items: d(this, u, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, s.controls)
+      });
+    }
+    e.push(t);
+  }
+  return e;
+}, H = function _GxIdeImportFromDesign_getCodeFactory(t) {
+  switch (t) {
+   case ht:
+   case ct:
+    this.textEditorFactoryCallback("code", r.code.slot, this.selectedDesignItem.code);
+    this.textEditorFactoryCallback("html", r.layout.slot, this.selectedDesignItem.layout);
+    break;
+
+   case pt:
+    this.textEditorFactoryCallback("tokens", r.tokens.slot, this.selectedDesignItem.tokens);
+    this.textEditorFactoryCallback("styles", r.styles.slot, this.selectedDesignItem.styles);
+    break;
+  }
+}, et = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
+  switch (t) {
+   case ht:
+   case ct:
+    this.detailTreeModel = d(this, u, "m", D).call(this, this.selectedDesignItem.composition.controls);
+    break;
+  }
+};
+
+vt.style = c;
+
+export { vt as gx_ide_design_import };
+//# sourceMappingURL=p-406122e5.entry.js.map