import { r as t, h as e, H as s, a as i } from "./p-9b9ccd0c.js";

import { g as a } from "./p-d42e842b.js";

import "./p-6534555e.js";

import "lit";

import "lit/directives/when.js";

import "lit/directives/if-defined.js";

import { c as n } from "./p-c5196b3b.js";

import { L as o } from "./p-311eedf3.js";

const mapStylesToComboBoxItemModel = t => t === null || t === void 0 ? void 0 : t.map((t => ({
  value: t.id,
  caption: t.label || t.name
})));

const l = {
  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 r = {
  panels: [ {
    id: l.composition.id,
    name: l.composition.caption
  }, {
    id: l.layout.id,
    name: l.layout.caption
  }, {
    id: l.code.id,
    name: l.code.caption
  } ],
  stencils: [ {
    id: l.composition.id,
    name: l.composition.caption
  }, {
    id: l.layout.id,
    name: l.layout.caption
  }, {
    id: l.code.id,
    name: l.code.caption
  } ],
  images: [ {
    id: l.composition.id,
    name: l.composition.caption
  } ],
  fonts: [ {
    id: l.composition.id,
    name: l.composition.caption
  } ],
  designSystem: [ {
    id: l.tokens.id,
    name: l.tokens.caption
  }, {
    id: l.styles.id,
    name: l.styles.caption
  } ]
};

const h = new Map([ [ "panels", r.panels ], [ "stencils", r.stencils ], [ "images", r.images ], [ "design_system", r.designSystem ], [ "fonts", r.fonts ] ]);

const c = ':host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none;inline-size:max-content}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}button.button-secondary{border-color:var(--color-border-neutral-default)}: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}.panel-tab:has(>:only-child){grid-template-columns:1fr}.tree-view{padding-block:4px}.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:64px}.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(--timing-fast) ease-in-out forwards}.message--info{color:var(--color-text-neutral-strawberry)}.message--warning{color:var(--color-text-warning-default)}.message--error{color:var(--color-text-error-default)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}';

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 f, u, m, b, g, k, w, y, v, x, M, W, I, _, C, $, j, D, z, S, T, P, q, A, E, F, V, G, L, O, B, H, R, N, Y, J, K, Q, U, X, Z, tt, et, st, it, at, nt, ot, lt, rt, ht, ct, dt, pt, ft, ut;

const mt = "panels";

const bt = "stencils";

const gt = "images";

const kt = "design_system";

const wt = "fonts";

const yt = "@@@";

// ch-checkbox
const vt = "on";

// Icons
const xt = a({
  category: "menus",
  name: "delete",
  colorType: "primary"
});

const Mt = a({
  category: "objects",
  name: "design"
});

const Wt = a({
  category: "controls",
  name: "file-upload"
});

// For empty states
const It = a({
  category: "objects",
  name: "webpanel"
});

const _t = a({
  category: "objects",
  name: "panel-for-sd"
});

const Ct = [ "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 $t = class {
  constructor(s) {
    t(this, s);
    f.add(this);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        u.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);
    k.set(this, {
      all: [],
      none: [ "-" ]
    });
    /* References needed to collect data */    w.set(this, void 0);
    y.set(this, void 0);
    v.set(this, void 0);
    x.set(this, void 0);
    M.set(this, []);
    W.set(this, []);
    I.set(this, []);
    _.set(this, []);
    C.set(this, void 0);
    $.set(this, void 0);
    j.set(this, (t => {
      let e = 0;
      function countItemsRecursively(t) {
        for (const s of t) {
          e++;
          if (s.variants && Array.isArray(s.variants)) {
            countItemsRecursively(s.variants);
          }
        }
      }
      countItemsRecursively(t);
      return e;
    }));
    D.set(this, (t => [ {
      leaf: true,
      caption: `Warning: ${t}`,
      startImgSrc: a({
        category: "system",
        name: "warning",
        colorType: "warning"
      }),
      order: -1,
      checkbox: false,
      disabled: true
    } ]));
    S.set(this, (() => {
      this.activeTabs.set("panels", r.panels[0].id);
      this.activeTabs.set("stencils", r.stencils[0].id);
      this.activeTabs.set("images", r.images[0].id);
      this.activeTabs.set("fonts", r.fonts[0].id);
      this.activeTabs.set("design_system", r.designSystem[0].id);
    }));
    T.set(this, (async () => {
      this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
      // evaluate access token error
            if (this.accessToken.length) {
        this.accessTokenHasError = false;
      }
    }));
    P.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, B, "f").call(this);
      }
    }));
    A.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(yt);
        const n = a[0];
        const o = a[1];
        const l = n && n !== "parent";
        const r = o === "design_system";
        if (l || r) {
          this.tabsModel = h.get(o);
          this.selectedDesignType = o;
          const t = d(this, E, "f").call(this, i);
          if (!t) {
            const t = await d(this, R, "f").call(this, n, 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, f, "m", N).call(this, t.designType);
            d(this, f, "m", ot).call(this, t.designType);
          }
          this.renderedTabs.clear();
          this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
        }
      }
    }));
    E.set(this, (t => {
      var e;
      return (e = d(this, m, "f")) === null || e === void 0 ? void 0 : e.get(t);
    }));
    F.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;
    }));
    V.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${yt}`)) {
          s = t.item.id.split(yt)[1];
          i[s] = [];
        } else if (t.item.checked && s) {
          const e = t.item.id.split(yt)[1];
          if (e === s) {
            const e = t.item.id.split(yt)[0];
            i[s].push(e);
          }
        }
      }
      // const { designSystem, fonts, images, panels, stencils } = result;
            const {fonts: a, panels: n, stencils: o, images: l} = i;
      // this.designSystemSelected = designSystem;
            p(this, M, n, "f");
      p(this, W, o, "f");
      p(this, I, l, "f");
      p(this, _, a, "f");
    }));
    G.set(this, (() => {
      d(this, C, "f").click();
    }));
    L.set(this, (t => {
      this.styleValue = t.target.value;
      if (this.reactiveSettings.style && this.styleValue !== this.lastLoadCallbackSettingValues.style) {
        d(this, B, "f").call(this);
      }
    }));
    O.set(this, (t => {
      if (this.reactiveSettings.module && this.defaultModule.id !== t.detail.id && this.pathIsValid) {
        d(this, B, "f").call(this);
      }
    }));
    B.set(this, (async () => {
      var t, e;
      this.isLoading = true;
      const s = this.selectedFile ? this.selectedFile : this.path;
      const i = d(this, w, "f") ? d(this, w, "f").value : undefined;
      const a = this.styleValue;
      const n = d(this, y, "f").value === vt;
      const o = await this.loadCallback(s, a, n, i, d(this, H, "f"));
      // clear
            p(this, M, [], "f");
      p(this, W, [], "f");
      p(this, _, [], "f");
      this.selectedDesignType = undefined;
      this.selectedDesignItem = undefined;
      this.messages = [];
      this.designData = o;
      this.isLoaded = (t = o === null || o === void 0 ? void 0 : o.success) !== null && t !== void 0 ? t : false;
      this.isLoading = false;
      const l = (e = o.designSystem[0]) === null || e === void 0 ? void 0 : e.name;
      if (l && !this.styleValue) {
        this.styleValue = l;
      }
      // 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 = n;
      }
    }));
    H.set(this, (t => {
      this.messages = [ ...this.messages, t ];
    }));
    R.set(this, (async (t, e) => {
      let s;
      switch (e) {
       case gt:
        s = this.loadImageCallback;
        break;

       case kt:
        s = this.loadDesignSystemCallback;
        break;

       case wt:
        s = this.loadFontCallback;
        break;

       case mt:
       case bt:
        s = this.loadPanelDataCallback;
        break;
      }
      let i;
      await s(t).then((t => {
        this.selectedDesignType = e;
        this.selectedDesignItem = t;
        d(this, f, "m", N).call(this, e);
        d(this, f, "m", ot).call(this, e);
        i = t;
      }));
      return i;
    }));
    Y.set(this, ((t, e) => {
      let s = e;
      const i = d(this, j, "f").call(this, t);
      const a = e.length;
      if (i === a) {
        s = d(this, k, "f").all;
      } else if (a === 0) {
        s = d(this, k, "f").none;
      }
      return s;
    }));
    J.set(this, (() => {
      var t, e;
      const s = d(this, Y, "f").call(this, this.designData.panels, d(this, M, "f"));
      const i = d(this, Y, "f").call(this, this.designData.stencils, d(this, W, "f"));
      const a = d(this, Y, "f").call(this, this.designData.images, d(this, I, "f"));
      const n = d(this, Y, "f").call(this, this.designData.fonts, d(this, _, "f"));
      this.confirmCallback({
        panels: s,
        stencils: i,
        images: a,
        fonts: n,
        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, y, "f").value === vt
      });
    }));
    K.set(this, (() => {
      this.cancelCallback();
      this.isLoading = false;
    }));
    Q.set(this, (t => {
      this.fitImages = t.detail === vt;
    }));
    U.set(this, (t => t.reduce(((t, e, s, i) => i[t].name <= e.name ? t : s), 0)));
    X.set(this, (() => {
      const t = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
      if (t) {
        d(this, B, "f").call(this);
      }
    }));
    Z.set(this, (() => {
      this.selectedFile = null;
      this.path = "";
      this.accessToken = "";
      this.selectedFile = null;
      d(this, C, "f").value = null;
    }));
    tt.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.
            }
    }));
    et.set(this, (t => {
      const e = t.target;
      e.type = "text";
 // display token on focus
        }));
    st.set(this, (t => {
      const e = t.target;
      e.type = "password";
 // hide token on blur
            this.accessTokenChanged(e.value);
    }));
    it.set(this, (async t => {
      this.path = t.detail;
      d(this, T, "f").call(this);
      this.selectedFile = null;
      if (!this.path.length) {
        this.designData = null;
      }
    }));
    at.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 o = !this.pathIsValid && this.path.length > 0;
      const l = !this.pathIsValid && this.path.length > 0;
      const r = this.isLoading || !this.designDataTreeDataModel.length || this.selectedDesignType === "stencils" || this.selectedDesignType === "design_system";
      let h;
      if (this.pathIsValid && this.path === this.lastLoadCallbackSettingValues.path) {
        h = d(this, u, "f").header.btnReload;
      } else if (this.pathIsValid) {
        h = d(this, u, "f").header.btnLoad;
      } else {
        h = d(this, u, "f").header.selectFileButton;
      }
      return e("header", {
        class: {
          header: true,
          "dialog-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-justified-start": true
        }
      }, e("label", {
        // path/url label
        class: "label path-url-label"
      }, d(this, u, "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": o,
          "path-url-control": true
        },
        debounce: n.inputDebounce,
        part: "option-path",
        type: "text",
        value: this.path,
        onInput: d(this, it, "f"),
        onBlur: this.reactiveSettings.path && d(this, P, "f"),
        disabled: this.isLoading,
        placeholder: `${d(this, u, "f").header.pathPlaceholder}`,
        startImgSrc: Wt,
        ref: t => p(this, $, t, "f")
      }), l && e("ch-tooltip", {
        class: "tooltip",
        actionElement: d(this, $, "f"),
        blockAlign: n.tooltipSettings.blockAlign,
        inlineAlign: n.tooltipSettings.inlineAlign,
        delay: n.tooltipSettings.delay
      }, d(this, u, "f").header.pathErrorMessage, " ", d(this, g, "f")), e("input", {
        hidden: true,
        type: "file",
        accept: d(this, g, "f"),
        onChange: d(this, tt, "f"),
        ref: t => p(this, C, t, "f")
      }), e("div", {
        class: "buttons-spacer"
      }, e("button", {
        "aria-label": d(this, u, "f").header.removeFileSelection,
        title: d(this, u, "f").header.removeFileSelection,
        id: "reset-all-button",
        class: "button-tertiary button-icon-only",
        part: "reset-all-button",
        disabled: s,
        onClick: !s && d(this, Z, "f")
      }, e("ch-image", {
        class: "icon-m",
        src: xt,
        disabled: s
      })), e("button", {
        // load file button
        id: "button-load",
        type: "primary-text-only",
        onClick: this.pathIsValid ? d(this, B, "f") : d(this, G, "f"),
        part: "button button--load",
        disabled: t,
        class: {
          "button-primary": this.pathIsValid,
          "button-secondary": !this.pathIsValid,
          "select-load-button": true
        }
      }, h))), this.requiresAccessToken && [ e("label", {
        // access token label
        class: "label access-token-label"
      }, d(this, u, "f").header.accessToken), e("div", null, e("ch-edit", {
        class: {
          input: true,
          "access-token": true,
          "input-error": this.accessTokenHasError
        },
        ref: t => p(this, w, t, "f"),
        value: this.accessToken,
        placeholder: d(this, u, "f").header.accessTokenPlaceholder,
        onFocus: d(this, et, "f"),
        onBlur: d(this, st, "f"),
        part: "access-token",
        disabled: this.isLoading,
        type: "password"
      }), this.accessTokenHasError && e("ch-tooltip", {
        class: "tooltip",
        actionElement: d(this, w, "f"),
        blockAlign: n.tooltipSettings.blockAlign,
        inlineAlign: n.tooltipSettings.inlineAlign,
        delay: n.tooltipSettings.delay
      }, d(this, u, "f").header.accessTokenErrorMessage)) ], e("label", {
        // style label
        class: "label style-label"
      }, d(this, u, "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, L, "f"),
        part: "option-style",
        class: "combo-box style"
      }), e("label", {
        // module label
        class: "label module-label"
      }, d(this, u, "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, O, "f"),
        disabled: a,
        class: "module"
      }), e("div", {
        // import as web panels
        class: "checkboxes-options field-group"
      }, e("ch-checkbox", {
        caption: d(this, u, "f").header.importAs,
        checkedValue: vt,
        class: "checkbox import-as-web-panels",
        ref: t => p(this, y, t, "f"),
        value: this.importAsWebPanels ? vt : undefined,
        part: "option-import-as-web-panels",
        disabled: this.isLoading,
        onInput: d(this, X, "f")
      }), e("div", {
        class: {
          "field-group-inline": true,
          "checkboxes-options__col-right": true
        }
      }, e("ch-checkbox", {
        // fit images
        caption: d(this, u, "f").header.fitImages,
        checkedValue: vt,
        class: "checkbox",
        part: "fit-images-checkbox",
        disabled: r,
        onInput: d(this, Q, "f")
      }))));
    }));
    nt.set(this, (() => this.messages.length > 0 && this.messages.map((t => e("p", {
      class: {
        "body-regular-m": true,
        message: true,
        [`message--${t.type}`]: true
      }
    }, t.type, ": ", t.text)))));
    lt.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, x, t, "f")
        }, d(this, nt, "f").call(this), e("div", {
          class: "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, rt, "f").call(this), d(this, ut, "f").call(this) ]);
      } else {
        return e("gx-ide-empty-state", {
          class: "empty-state scrollable",
          stateIconSrc: Mt,
          isAnimated: d(this, b, "f"),
          stateTitle: d(this, u, "f").messages.noDesignSelected,
          key: "no-objects-empty-state"
        }, e("button", {
          // begin by selecting a file
          class: "button-tertiary empty-state-button",
          onClick: d(this, G, "f")
        }, d(this, u, "f").messages.selectDesign));
      }
    }));
    rt.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,
      expandableButton: "action",
      expandOnClick: false,
      toggleCheckboxes: true,
      checkbox: true,
      checked: true,
      onCheckedItemsChange: d(this, V, "f"),
      onSelectedItemsChange: d(this, A, "f")
    })));
    ht.set(this, (() => {
      var t;
      const s = ((t = this.designData) === null || t === void 0 ? void 0 : t.success) !== true || this.isLoading;
      return e("footer", {
        class: "dialog-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, K, "f"),
        part: "button button--cancel",
        slot: "footer-end"
      }, d(this, u, "f").footer.btnCancel), e("button", {
        // button ok
        id: "button-ok",
        class: "button-primary button-ok",
        type: "primary-text-only",
        onClick: !s && d(this, J, "f"),
        part: "button button--ok",
        disabled: s,
        slot: "footer-end"
      }, d(this, u, "f").footer.btnOk)));
    }));
    ct.set(this, (() => {
      var t, s;
      if (this.selectedDesignType === "panels") {
        return ((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"
        })) : e("gx-ide-empty-state", {
          class: "panel-tab__empty-state",
          stateTitle: d(this, u, "f").messages.noPanelPreviewAvailable,
          stateIconSrc: d(this, y, "f").value === vt ? It : _t
        });
      }
      return null;
    }));
    dt.set(this, (() => {
      const t = (this.selectedDesignType === mt || this.selectedDesignType === bt) && this.detailTreeModel.length > 0;
      return e("div", {
        class: {
          "panel-tab": true,
          "panel-tab--controls-tree": t
        },
        part: "data-panel-composition-container"
      }, d(this, ct, "f").call(this), t ? 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);
    }));
    pt.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 === gt ? "checker-board" : undefined
    }))));
    ft.set(this, (t => {
      this.renderedTabs.clear();
      this.renderedTabs.add(t.detail.newSelectedId);
      this.reRenderCounter++;
      this.activeTabs.set(this.selectedDesignType, t.detail.newSelectedId);
    }));
    ut.set(this, (() => e("ch-tab-render", {
      // main section
      class: {
        tab: true,
        scrollable: true,
        "fit-images": this.fitImages
      },
      tabListPosition: "block-start",
      model: this.tabsModel,
      selectedId: this.activeTabs.get(this.selectedDesignType),
      overflow: "auto",
      contain: "size",
      onSelectedItemChange: d(this, ft, "f")
    }, e("div", {
      slot: l.tokens.slot,
      class: "spacing-body",
      style: {
        display: this.renderedTabs.has(l.tokens.id) ? "" : "none"
      }
    }, e("slot", {
      name: l.tokens.slot
    })), e("div", {
      slot: l.styles.slot,
      class: "spacing-body",
      style: {
        display: this.renderedTabs.has(l.styles.id) ? "" : "none"
      }
    }, e("slot", {
      name: l.styles.slot
    })), e("div", {
      class: "composition-tab-slot scrollable",
      slot: l.composition.slot,
      style: {
        display: this.renderedTabs.has(l.composition.id) ? "" : "none"
      }
    }, this.selectedDesignType === gt || this.selectedDesignType === wt ? d(this, pt, "f").call(this) : d(this, dt, "f").call(this)), e("div", {
      slot: l.layout.slot,
      class: "spacing-body",
      style: {
        display: this.renderedTabs.has(l.layout.id) ? "" : "none"
      }
    }, e("slot", {
      name: l.layout.slot
    })), e("div", {
      slot: l.code.slot,
      class: "spacing-body",
      style: {
        display: this.renderedTabs.has(l.code.id) ? "" : "none"
      }
    }, e("slot", {
      name: l.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, T, "f").call(this);
    } else {
      // hide access token input if path is not valid
      this.requiresAccessToken = false;
    }
  }
  designDataChanged(t) {
    if (t) {
      // panels
      const t = d(this, U, "f").call(this, this.designData.panels);
      const e = d(this, y, "f").value === vt;
      const s = e ? "objects/webpanel" : "objects/panel-for-sd";
      // images
            const i = "objects/image";
      this.designDataTreeDataModel = [ {
        order: 0,
        id: `parent${yt}${mt}`,
        leaf: false,
        caption: e ? d(this, u, "f").tree.webPanels : d(this, u, "f").tree.panels,
        startImgSrc: s,
        checkbox: true,
        checked: true,
        expanded: true,
        items: d(this, f, "m", z).call(this, this.designData.panels, mt, s, t)
      }, {
        order: 1,
        id: `parent${yt}${bt}`,
        leaf: false,
        caption: d(this, u, "f").tree.stencils,
        startImgSrc: "objects/stencil",
        checkbox: true,
        checked: true,
        expanded: true,
        items: this.designData.stencils.map((t => ({
          id: `${t.id}${yt}${bt}`,
          class: "object tree-view-item",
          leaf: !t.warning,
          caption: t.name,
          startImgSrc: "objects/stencil",
          checkbox: true,
          checked: true,
          expanded: true,
          items: t.warning && d(this, D, "f").call(this, t.warning)
        })))
      }, {
        order: 2,
        id: `parent${yt}${gt}`,
        leaf: false,
        caption: d(this, u, "f").tree.images,
        startImgSrc: i,
        checkbox: true,
        checked: true,
        expanded: true,
        items: d(this, f, "m", z).call(this, this.designData.images, gt, i)
      }, {
        order: 3,
        id: `parent${yt}${wt}`,
        leaf: false,
        caption: d(this, u, "f").tree.fonts,
        startImgSrc: "controls/font",
        checkbox: true,
        checked: true,
        expanded: true,
        items: this.designData.fonts.map((t => ({
          id: `${t.id}${yt}${wt}`,
          leaf: !t.warning,
          caption: t.name,
          startImgSrc: "controls/font",
          checkbox: true,
          checked: true,
          expanded: true,
          items: t.warning && d(this, D, "f").call(this, t.warning)
        })))
      }, {
        order: 4,
        id: `${this.designData.designSystem.length > 0 ? this.designData.designSystem[0].id : "parent"}${yt}${kt}`,
        leaf: true,
        caption: d(this, u, "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, F, "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, u, await o.getComponentStrings(this.el), "f");
    p(this, g, this.extensions.map((t => `.${t}`)).join(", "), "f");
    this.stylesChanged(this.styles);
    d(this, S, "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, x, "f")) {
        d(this, x, "f").scrollTop = d(this, x, "f").scrollHeight;
      }
    }
  }
  render() {
    return e(s, {
      class: "widget"
    }, e("ch-theme", {
      model: Ct
    }), e("section", {
      class: "section"
    }, d(this, at, "f").call(this), d(this, lt, "f").call(this), d(this, ht, "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" ]
    };
  }
};

u = new WeakMap, m = new WeakMap, b = new WeakMap, g = new WeakMap, k = new WeakMap, 
w = new WeakMap, y = new WeakMap, v = new WeakMap, x = new WeakMap, M = new WeakMap, 
W = new WeakMap, I = new WeakMap, _ = new WeakMap, C = new WeakMap, $ = new WeakMap, 
j = new WeakMap, D = new WeakMap, S = new WeakMap, T = new WeakMap, P = new WeakMap, 
A = new WeakMap, E = new WeakMap, F = new WeakMap, V = new WeakMap, G = new WeakMap, 
L = new WeakMap, O = new WeakMap, B = new WeakMap, H = new WeakMap, R = new WeakMap, 
Y = new WeakMap, J = new WeakMap, K = new WeakMap, Q = new WeakMap, U = new WeakMap, 
X = new WeakMap, Z = new WeakMap, tt = new WeakMap, et = new WeakMap, st = new WeakMap, 
it = new WeakMap, at = new WeakMap, nt = new WeakMap, lt = new WeakMap, rt = new WeakMap, 
ht = new WeakMap, ct = new WeakMap, dt = new WeakMap, pt = new WeakMap, ft = new WeakMap, 
ut = new WeakMap, f = new WeakSet, z = function _GxIdeImportFromDesign_recursiveDesignTreeItems(t, e, s, i = undefined) {
  return t.map(((t, a) => {
    var n;
    const o = `${t.id}${yt}${e}`;
    const l = ((n = t.variants) === null || n === void 0 ? void 0 : n.length) > 0;
    const r = t.warning ? d(this, D, "f").call(this, t.warning) : [];
    const h = !l && !t.warning;
    return {
      id: o,
      leaf: h,
      caption: t.name,
      startImgSrc: s,
      checkbox: true,
      checked: true,
      expanded: !h,
      selected: i === a,
      order: a,
      items: [ ...r, ...l ? d(this, f, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, t.variants, e, s) : [] ]
    };
  }));
}, q = 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, f, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, s.controls)
      });
    }
    e.push(t);
  }
  return e;
}, N = function _GxIdeImportFromDesign_getCodeFactory(t) {
  switch (t) {
   case mt:
   case bt:
    this.textEditorFactoryCallback("code", l.code.slot, this.selectedDesignItem.code);
    this.textEditorFactoryCallback("html", l.layout.slot, this.selectedDesignItem.layout);
    break;

   case kt:
    this.textEditorFactoryCallback("tokens", l.tokens.slot, this.selectedDesignItem.tokens);
    this.textEditorFactoryCallback("styles", l.styles.slot, this.selectedDesignItem.styles);
    break;
  }
}, ot = function _GxIdeImportFromDesign_renderDetailDataTree(t) {
  switch (t) {
   case mt:
   case bt:
    this.detailTreeModel = d(this, f, "m", q).call(this, this.selectedDesignItem.composition.controls);
    break;
  }
};

$t.style = c;

export { $t as gx_ide_design_import };
//# sourceMappingURL=p-69e7d46b.entry.js.map