import { r as registerInstance, h, H as Host, a as getElement } from './index-b153bfd0.js';
import { g as getIconPath } from './assets-manager-7d6fc08f.js';
import './mer-animated-dots-7cbae6ef.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';
import { c as config } from './config-5a775b7a.js';
import { L as Locale } from './locale-e5107fad.js';

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

const TAB_DATA = {
    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 TAB_MODEL = {
    panels: [
        {
            id: TAB_DATA.composition.id,
            name: TAB_DATA.composition.caption
        },
        {
            id: TAB_DATA.layout.id,
            name: TAB_DATA.layout.caption
        },
        {
            id: TAB_DATA.code.id,
            name: TAB_DATA.code.caption
        }
    ],
    stencils: [
        {
            id: TAB_DATA.composition.id,
            name: TAB_DATA.composition.caption
        },
        {
            id: TAB_DATA.layout.id,
            name: TAB_DATA.layout.caption
        },
        {
            id: TAB_DATA.code.id,
            name: TAB_DATA.code.caption
        }
    ],
    images: [
        {
            id: TAB_DATA.composition.id,
            name: TAB_DATA.composition.caption
        }
    ],
    fonts: [
        {
            id: TAB_DATA.composition.id,
            name: TAB_DATA.composition.caption
        }
    ],
    designSystem: [
        {
            id: TAB_DATA.tokens.id,
            name: TAB_DATA.tokens.caption
        },
        {
            id: TAB_DATA.styles.id,
            name: TAB_DATA.styles.caption
        }
    ]
};
const DESIGN_TYPE_TO_TAB_MODEL_MAP = new Map([
    ["panels", TAB_MODEL.panels],
    ["stencils", TAB_MODEL.stencils],
    ["images", TAB_MODEL.images],
    ["design_system", TAB_MODEL.designSystem],
    ["fonts", TAB_MODEL.fonts]
]);

const designImportCss = ":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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeImportFromDesign_instances, _GxIdeImportFromDesign_componentLocale, _GxIdeImportFromDesign_loadedItems, _GxIdeImportFromDesign_emptyStateAnimated, _GxIdeImportFromDesign_formattedExtensions, _GxIdeImportFromDesign_objectTreeCheckedStatus, _GxIdeImportFromDesign_accessTokenEl, _GxIdeImportFromDesign_importAsWebPanelsEl, _GxIdeImportFromDesign_moduleEl, _GxIdeImportFromDesign_messagesList, _GxIdeImportFromDesign_panelsSelected, _GxIdeImportFromDesign_stencilsSelected, _GxIdeImportFromDesign_imagesSelected, _GxIdeImportFromDesign_fontsSelected, _GxIdeImportFromDesign_fileInputHiddenEl, _GxIdeImportFromDesign_pathEl, _GxIdeImportFromDesign_countDesignDataItems, _GxIdeImportFromDesign_warningTreeItem, _GxIdeImportFromDesign_recursiveDesignTreeItems, _GxIdeImportFromDesign_initializeActiveTabs, _GxIdeImportFromDesign_evaluateAccessTokenRender, _GxIdeImportFromDesign_pathURLBlurHandler, _GxIdeImportFromDesign_loadTreeItemCompositionModel, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, _GxIdeImportFromDesign_getLoadedItem, _GxIdeImportFromDesign_validatePath, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, _GxIdeImportFromDesign_selectFileHandler, _GxIdeImportFromDesign_styleComboBoxInputHandler, _GxIdeImportFromDesign_moduleInputHandler, _GxIdeImportFromDesign_loadData, _GxIdeImportFromDesign_messageCallback, _GxIdeImportFromDesign_getDesignDataDetail, _GxIdeImportFromDesign_getCodeFactory, _GxIdeImportFromDesign_evaluateDesignItemsChecked, _GxIdeImportFromDesign_confirm, _GxIdeImportFromDesign_cancel, _GxIdeImportFromDesign_fitImagesHandler, _GxIdeImportFromDesign_getPanelsSelectedItem, _GxIdeImportFromDesign_importAsWebPanelsChangedHandler, _GxIdeImportFromDesign_removeFileSelection, _GxIdeImportFromDesign_selectFileInputChangedHandler, _GxIdeImportFromDesign_accessFocusHandler, _GxIdeImportFromDesign_accessBlurHandler, _GxIdeImportFromDesign_pathUrlInputHandler, _GxIdeImportFromDesign_renderHeader, _GxIdeImportFromDesign_renderMessages, _GxIdeImportFromDesign_renderDetailDataTree, _GxIdeImportFromDesign_renderMain, _GxIdeImportFromDesign_renderDesignTree, _GxIdeImportFromDesign_renderFooter, _GxIdeImportFromDesign_evaluatePanelPreview, _GxIdeImportFromDesign_renderPanelTab, _GxIdeImportFromDesign_renderImageTab, _GxIdeImportFromDesign_tabSelectionChangedHandler, _GxIdeImportFromDesign_renderDesignTabsCh;
const DESIGN_DATA_TYPE_PANELS = "panels";
const DESIGN_DATA_TYPE_STENCILS = "stencils";
const DESIGN_DATA_TYPE_IMAGES = "images";
const DESIGN_DATA_TYPE_DESIGN_SYSTEM = "design_system";
const DESIGN_DATA_TYPE_FONTS = "fonts";
const ITEM_COMPOSE_ID_SEPARATOR = "@@@";
// ch-checkbox
const CHECKED_VALUE = "on";
// Icons
const MENU_DELETE = getIconPath({
    category: "menus",
    name: "delete",
    colorType: "primary"
});
const DESIGN = getIconPath({
    category: "objects",
    name: "design"
});
const FILE_UPLOAD = getIconPath({
    category: "controls",
    name: "file-upload"
});
// For empty states
const WEBPANEL_ICON = getIconPath({
    category: "objects",
    name: "webpanel"
});
const PANEL_FOR_SD_ICON = getIconPath({
    category: "objects",
    name: "panel-for-sd"
});
const CSS_BUNDLES = [
    "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 GxIdeImportFromDesign = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        _GxIdeImportFromDesign_instances.add(this);
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeImportFromDesign_componentLocale.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
        _GxIdeImportFromDesign_loadedItems.set(this, new Map());
        _GxIdeImportFromDesign_emptyStateAnimated.set(this, false);
        _GxIdeImportFromDesign_formattedExtensions.set(this, void 0);
        _GxIdeImportFromDesign_objectTreeCheckedStatus.set(this, {
            all: [],
            none: ["-"]
        });
        /* References needed to collect data */
        _GxIdeImportFromDesign_accessTokenEl.set(this, void 0);
        _GxIdeImportFromDesign_importAsWebPanelsEl.set(this, void 0);
        _GxIdeImportFromDesign_moduleEl.set(this, void 0);
        _GxIdeImportFromDesign_messagesList.set(this, void 0);
        _GxIdeImportFromDesign_panelsSelected.set(this, []);
        _GxIdeImportFromDesign_stencilsSelected.set(this, []);
        _GxIdeImportFromDesign_imagesSelected.set(this, []);
        _GxIdeImportFromDesign_fontsSelected.set(this, []);
        _GxIdeImportFromDesign_fileInputHiddenEl.set(this, void 0);
        _GxIdeImportFromDesign_pathEl.set(this, void 0);
        _GxIdeImportFromDesign_countDesignDataItems.set(this, (tree) => {
            let count = 0;
            function countItemsRecursively(designItemsArray) {
                for (const designItem of designItemsArray) {
                    count++;
                    if (designItem.variants && Array.isArray(designItem.variants)) {
                        countItemsRecursively(designItem.variants);
                    }
                }
            }
            countItemsRecursively(tree);
            return count;
        });
        _GxIdeImportFromDesign_warningTreeItem.set(this, (caption) => {
            return [
                {
                    leaf: true,
                    caption: `Warning: ${caption}`,
                    startImgSrc: getIconPath({
                        category: "system",
                        name: "warning",
                        colorType: "warning"
                    }),
                    order: -1,
                    checkbox: false,
                    disabled: true
                }
            ];
        });
        _GxIdeImportFromDesign_initializeActiveTabs.set(this, () => {
            this.activeTabs.set("panels", TAB_MODEL.panels[0].id);
            this.activeTabs.set("stencils", TAB_MODEL.stencils[0].id);
            this.activeTabs.set("images", TAB_MODEL.images[0].id);
            this.activeTabs.set("fonts", TAB_MODEL.fonts[0].id);
            this.activeTabs.set("design_system", TAB_MODEL.designSystem[0].id);
        });
        _GxIdeImportFromDesign_evaluateAccessTokenRender.set(this, async () => {
            this.requiresAccessToken = await this.requiresAccessTokenCallback(this.path);
            // evaluate access token error
            if (this.accessToken.length) {
                this.accessTokenHasError = false;
            }
        });
        _GxIdeImportFromDesign_pathURLBlurHandler.set(this, async () => {
            const loadDataCondition1 = this.isLoaded &&
                this.reactiveSettings.path &&
                this.pathIsValid &&
                this.path !== this.lastLoadCallbackSettingValues.path;
            const loadDataCondition2 = !this.requiresAccessToken ||
                (this.requiresAccessToken && this.accessToken.length > 0);
            if (loadDataCondition1 && loadDataCondition2) {
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
            }
        });
        _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler.set(this, async (event) => {
            var _a;
            if (event.detail.length) {
                const item = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item;
                const itemComposedId = item.id;
                const idList = itemComposedId.split(ITEM_COMPOSE_ID_SEPARATOR);
                const itemId = idList[0];
                const itemDesignType = idList[1];
                const isChildNode = itemId && itemId !== "parent";
                const isDesignSystem = itemDesignType === "design_system";
                if (isChildNode || isDesignSystem) {
                    this.tabsModel = DESIGN_TYPE_TO_TAB_MODEL_MAP.get(itemDesignType);
                    this.selectedDesignType = itemDesignType;
                    const loadedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getLoadedItem, "f").call(this, itemComposedId);
                    if (!loadedItem) {
                        const designDataDetail = await __classPrivateFieldGet(this, _GxIdeImportFromDesign_getDesignDataDetail, "f").call(this, itemId, this.selectedDesignType);
                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadedItems, "f").set(itemComposedId, {
                            designType: this.selectedDesignType,
                            designDataDetail: designDataDetail
                        });
                    }
                    else {
                        // Item has been queried already. The item content exists already.
                        this.selectedDesignType = loadedItem.designType;
                        this.selectedDesignItem = loadedItem.designDataDetail;
                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_getCodeFactory).call(this, loadedItem.designType);
                        __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_renderDetailDataTree).call(this, loadedItem.designType);
                    }
                    this.renderedTabs.clear();
                    this.renderedTabs.add(this.activeTabs.get(this.selectedDesignType));
                }
            }
        });
        _GxIdeImportFromDesign_getLoadedItem.set(this, (id) => {
            var _a;
            return (_a = __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadedItems, "f")) === null || _a === void 0 ? void 0 : _a.get(id);
        });
        _GxIdeImportFromDesign_validatePath.set(this, (path) => {
            const validPathRegex = /^(\/|\.\/|(\w:))[^:*?"<>|]*\.(sketch|gxsketch)$/i; // Match valid file paths
            const figmaURLRegex = /^https?:\/\/(www\.)?figma\.com/; // Match URLs containing "www.figma.com"
            const urlWithExtensionRegex = /^https?:\/\/[^\s/$.?#].[^\s]*\.(sketch|gxsketch)$/i; // Match URLs ending with .sketch or .gxsketch
            const pathIsValid = validPathRegex.test(path) ||
                figmaURLRegex.test(path) ||
                urlWithExtensionRegex.test(path);
            return pathIsValid;
        });
        _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler.set(this, (event) => {
            const items = Array.from(event.detail.values());
            let currentParentId = null;
            const result = {};
            for (const item of items) {
                if (item.item.id.startsWith(`parent${ITEM_COMPOSE_ID_SEPARATOR}`)) {
                    currentParentId = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[1];
                    result[currentParentId] = [];
                }
                else if (item.item.checked && currentParentId) {
                    const parentId = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[1];
                    if (parentId === currentParentId) {
                        const id = item.item.id.split(ITEM_COMPOSE_ID_SEPARATOR)[0];
                        result[currentParentId].push(id);
                    }
                }
            }
            // const { designSystem, fonts, images, panels, stencils } = result;
            const { fonts, panels, stencils, images } = result;
            // this.designSystemSelected = designSystem;
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_panelsSelected, panels, "f");
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_stencilsSelected, stencils, "f");
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_imagesSelected, images, "f");
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_fontsSelected, fonts, "f");
        });
        _GxIdeImportFromDesign_selectFileHandler.set(this, () => {
            __classPrivateFieldGet(this, _GxIdeImportFromDesign_fileInputHiddenEl, "f").click();
        });
        _GxIdeImportFromDesign_styleComboBoxInputHandler.set(this, (event) => {
            this.styleValue = event.target.value;
            if (this.reactiveSettings.style &&
                this.styleValue !== this.lastLoadCallbackSettingValues.style) {
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
            }
        });
        _GxIdeImportFromDesign_moduleInputHandler.set(this, (event) => {
            if (this.reactiveSettings.module &&
                this.defaultModule.id !== event.detail.id &&
                this.pathIsValid) {
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
            }
        });
        _GxIdeImportFromDesign_loadData.set(this, async () => {
            var _a, _b;
            this.isLoading = true;
            const source = this.selectedFile ? this.selectedFile : this.path;
            const token = __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f") ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f").value : undefined;
            const style = this.styleValue;
            const importAsWebPanels = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE;
            const designData = await this.loadCallback(source, style, importAsWebPanels, token, __classPrivateFieldGet(this, _GxIdeImportFromDesign_messageCallback, "f"));
            // clear
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_panelsSelected, [], "f");
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_stencilsSelected, [], "f");
            __classPrivateFieldSet(this, _GxIdeImportFromDesign_fontsSelected, [], "f");
            this.selectedDesignType = undefined;
            this.selectedDesignItem = undefined;
            this.messages = [];
            this.designData = designData;
            this.isLoaded = (_a = designData === null || designData === void 0 ? void 0 : designData.success) !== null && _a !== void 0 ? _a : false;
            this.isLoading = false;
            const firstDesignSystemName = (_b = designData.designSystem[0]) === null || _b === void 0 ? void 0 : _b.name;
            if (firstDesignSystemName && !this.styleValue) {
                this.styleValue = firstDesignSystemName;
            }
            // 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 = style;
            }
            if (this.reactiveSettings.module) {
                this.lastLoadCallbackSettingValues.moduleId = __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleEl, "f").value.id;
            }
            if (this.reactiveSettings.importAsWebPanels) {
                this.lastLoadCallbackSettingValues.importAsWebPanels = importAsWebPanels;
            }
        });
        _GxIdeImportFromDesign_messageCallback.set(this, message => {
            this.messages = [...this.messages, message];
        });
        _GxIdeImportFromDesign_getDesignDataDetail.set(this, async (id, designType) => {
            let loadFn;
            switch (designType) {
                case DESIGN_DATA_TYPE_IMAGES:
                    loadFn = this.loadImageCallback;
                    break;
                case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
                    loadFn = this.loadDesignSystemCallback;
                    break;
                case DESIGN_DATA_TYPE_FONTS:
                    loadFn = this.loadFontCallback;
                    break;
                case DESIGN_DATA_TYPE_PANELS:
                case DESIGN_DATA_TYPE_STENCILS:
                    loadFn = this.loadPanelDataCallback;
                    break;
            }
            let returnedData;
            await loadFn(id).then((data) => {
                this.selectedDesignType = designType;
                this.selectedDesignItem = data;
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_getCodeFactory).call(this, designType);
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_renderDetailDataTree).call(this, designType);
                returnedData = data;
            });
            return returnedData;
        });
        _GxIdeImportFromDesign_evaluateDesignItemsChecked.set(this, (designItemsData, selectedItems) => {
            let itemsToImport = selectedItems;
            const totalItemsInTree = __classPrivateFieldGet(this, _GxIdeImportFromDesign_countDesignDataItems, "f").call(this, designItemsData);
            const selectedItemsLength = selectedItems.length;
            if (totalItemsInTree === selectedItemsLength) {
                itemsToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectTreeCheckedStatus, "f").all;
            }
            else if (selectedItemsLength === 0) {
                itemsToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectTreeCheckedStatus, "f").none;
            }
            return itemsToImport;
        });
        _GxIdeImportFromDesign_confirm.set(this, () => {
            var _a, _b;
            const panelsToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateDesignItemsChecked, "f").call(this, this.designData.panels, __classPrivateFieldGet(this, _GxIdeImportFromDesign_panelsSelected, "f"));
            const stencilsToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateDesignItemsChecked, "f").call(this, this.designData.stencils, __classPrivateFieldGet(this, _GxIdeImportFromDesign_stencilsSelected, "f"));
            const imagesToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateDesignItemsChecked, "f").call(this, this.designData.images, __classPrivateFieldGet(this, _GxIdeImportFromDesign_imagesSelected, "f"));
            const fontsToImport = __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateDesignItemsChecked, "f").call(this, this.designData.fonts, __classPrivateFieldGet(this, _GxIdeImportFromDesign_fontsSelected, "f"));
            this.confirmCallback({
                panels: panelsToImport,
                stencils: stencilsToImport,
                images: imagesToImport,
                fonts: fontsToImport,
                moduleId: (_b = (_a = __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleEl, "f")) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id,
                styleName: this.styleValue,
                importAsWebPanels: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
            });
        });
        _GxIdeImportFromDesign_cancel.set(this, () => {
            this.cancelCallback();
            this.isLoading = false;
        });
        _GxIdeImportFromDesign_fitImagesHandler.set(this, (event) => {
            this.fitImages = event.detail === CHECKED_VALUE;
        });
        _GxIdeImportFromDesign_getPanelsSelectedItem.set(this, (panels) => {
            return panels.reduce((minIndex, item, index, panels) => {
                return panels[minIndex].name <= item.name ? minIndex : index;
            }, 0);
        });
        _GxIdeImportFromDesign_importAsWebPanelsChangedHandler.set(this, () => {
            const loadData = this.reactiveSettings.importAsWebPanels && this.pathIsValid;
            if (loadData) {
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f").call(this);
            }
        });
        _GxIdeImportFromDesign_removeFileSelection.set(this, () => {
            this.selectedFile = null;
            this.path = "";
            this.accessToken = "";
            this.selectedFile = null;
            __classPrivateFieldGet(this, _GxIdeImportFromDesign_fileInputHiddenEl, "f").value = null;
        });
        _GxIdeImportFromDesign_selectFileInputChangedHandler.set(this, (event) => {
            var _a;
            const target = event.target;
            if (((_a = target.files) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                this.selectedFile = target.files[0];
                this.path = this.selectedFile.name;
                // we know the path is valid because the extensions are restricted by "extensions" Prop.
            }
        });
        _GxIdeImportFromDesign_accessFocusHandler.set(this, (event) => {
            const element = event.target;
            element.type = "text"; // display token on focus
        });
        _GxIdeImportFromDesign_accessBlurHandler.set(this, (event) => {
            const element = event.target;
            element.type = "password"; // hide token on blur
            this.accessTokenChanged(element.value);
        });
        _GxIdeImportFromDesign_pathUrlInputHandler.set(this, async (event) => {
            this.path = event.detail;
            __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateAccessTokenRender, "f").call(this);
            this.selectedFile = null;
            if (!this.path.length) {
                this.designData = null;
            }
        });
        _GxIdeImportFromDesign_renderHeader.set(this, () => {
            const primaryButtonDisabled = this.isLoading ||
                (this.pathIsValid &&
                    this.requiresAccessToken &&
                    this.accessToken.length === 0);
            const clearFileButtonDisabled = this.isLoading || this.path.length === 0;
            const stylesComboDisabled = this.isLoading;
            const moduleDisabled = this.isLoading;
            const pathWithErrorStyles = !this.pathIsValid && this.path.length > 0;
            const displayPathErrorTooltip = !this.pathIsValid && this.path.length > 0;
            const fitImagesIsDisabled = this.isLoading ||
                !this.designDataTreeDataModel.length ||
                this.selectedDesignType === "stencils" ||
                this.selectedDesignType === "design_system";
            let primaryButtonCaption;
            if (this.pathIsValid &&
                this.path === this.lastLoadCallbackSettingValues.path) {
                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.btnReload;
            }
            else if (this.pathIsValid) {
                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.btnLoad;
            }
            else {
                primaryButtonCaption = __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.selectFileButton;
            }
            return (h("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
                } }, h("label", {
                // path/url label
                class: "label path-url-label"
            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.path), h("div", { class: "path-url-wrapper buttons-spacer" }, h("ch-edit", {
                // path/url/file input
                id: "path-url", class: {
                    "input": true,
                    "input-error": pathWithErrorStyles,
                    "path-url-control": true
                }, debounce: config.inputDebounce, part: "option-path", type: "text", value: this.path, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathUrlInputHandler, "f"), onBlur: this.reactiveSettings.path && __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathURLBlurHandler, "f"), disabled: this.isLoading, placeholder: `${__classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.pathPlaceholder}`, startImgSrc: FILE_UPLOAD, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_pathEl, el, "f"))
            }), displayPathErrorTooltip && (h("ch-tooltip", { class: "tooltip", actionElement: __classPrivateFieldGet(this, _GxIdeImportFromDesign_pathEl, "f"), blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.pathErrorMessage, " ", __classPrivateFieldGet(this, _GxIdeImportFromDesign_formattedExtensions, "f"))), h("input", { hidden: true, type: "file", accept: __classPrivateFieldGet(this, _GxIdeImportFromDesign_formattedExtensions, "f"), onChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileInputChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_fileInputHiddenEl, el, "f")) }), h("div", { class: "buttons-spacer" }, h("button", { "aria-label": __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.removeFileSelection, title: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.removeFileSelection, id: "reset-all-button", class: "button-tertiary button-icon-only", part: "reset-all-button", disabled: clearFileButtonDisabled, onClick: !clearFileButtonDisabled && __classPrivateFieldGet(this, _GxIdeImportFromDesign_removeFileSelection, "f") }, h("ch-image", { class: "icon-m", src: MENU_DELETE, disabled: clearFileButtonDisabled })), h("button", {
                // load file button
                id: "button-load", type: "primary-text-only", onClick: this.pathIsValid ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_loadData, "f") : __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileHandler, "f"), part: "button button--load", disabled: primaryButtonDisabled, class: {
                    "button-primary": this.pathIsValid,
                    "button-secondary": !this.pathIsValid,
                    "select-load-button": true
                }
            }, primaryButtonCaption))), this.requiresAccessToken && [
                h("label", {
                    // access token label
                    class: "label access-token-label"
                }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessToken),
                h("div", null, h("ch-edit", { class: {
                        "input": true,
                        "access-token": true,
                        "input-error": this.accessTokenHasError
                    }, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_accessTokenEl, el, "f")), value: this.accessToken, placeholder: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessTokenPlaceholder, onFocus: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessFocusHandler, "f"), onBlur: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessBlurHandler, "f"), part: "access-token", disabled: this.isLoading, type: "password" }), this.accessTokenHasError && (h("ch-tooltip", { class: "tooltip", actionElement: __classPrivateFieldGet(this, _GxIdeImportFromDesign_accessTokenEl, "f"), blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.accessTokenErrorMessage)))
            ], h("label", {
                // style label
                class: "label style-label"
            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.style), h("ch-combo-box-render", {
                // style combo box
                suggest: true, suggestOptions: {
                    alreadyProcessed: true
                }, disabled: stylesComboDisabled, model: this.stylesAsComboBoxModel, value: this.styleValue, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_styleComboBoxInputHandler, "f"), part: "option-style", class: "combo-box style"
            }), h("label", {
                // module label
                class: "label module-label"
            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.module), h("gx-ide-entity-selector", {
                // module entity selector
                labelPosition: "none", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_moduleEl, el, "f")), onValueChanged: this.reactiveSettings.module && __classPrivateFieldGet(this, _GxIdeImportFromDesign_moduleInputHandler, "f"), disabled: moduleDisabled, class: "module"
            }), h("div", {
                // import as web panels
                class: "checkboxes-options field-group"
            }, h("ch-checkbox", { caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.importAs, checkedValue: CHECKED_VALUE, class: "checkbox import-as-web-panels", ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, el, "f")), value: this.importAsWebPanels ? CHECKED_VALUE : undefined, part: "option-import-as-web-panels", disabled: this.isLoading, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsChangedHandler, "f") }), h("div", { class: {
                    "field-group-inline": true,
                    "checkboxes-options__col-right": true
                } }, h("ch-checkbox", {
                // fit images
                caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").header.fitImages, checkedValue: CHECKED_VALUE, class: "checkbox", part: "fit-images-checkbox", disabled: fitImagesIsDisabled, onInput: __classPrivateFieldGet(this, _GxIdeImportFromDesign_fitImagesHandler, "f")
            })))));
        });
        _GxIdeImportFromDesign_renderMessages.set(this, () => {
            return (this.messages.length > 0 &&
                this.messages.map(message => (h("p", { class: {
                        "body-regular-m": true,
                        "message": true,
                        [`message--${message.type}`]: true
                    } }, message.type, ": ", message.text))));
        });
        _GxIdeImportFromDesign_renderMain.set(this, () => {
            var _a, _b;
            if (this.isLoading || ((_a = this.designData) === null || _a === void 0 ? void 0 : _a.success) === false) {
                return (h("div", { class: "main main--loading scrollable", ref: (el) => (__classPrivateFieldSet(this, _GxIdeImportFromDesign_messagesList, el, "f")) }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderMessages, "f").call(this), h("div", { class: "body-regular-m spacing-body" }, h("slot", { name: "messages" }))));
            }
            else if ((_b = this.designData) === null || _b === void 0 ? void 0 : _b.success) {
                return (
                /* #main*/
                h("div", { class: "main" }, [__classPrivateFieldGet(this, _GxIdeImportFromDesign_renderDesignTree, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderDesignTabsCh, "f").call(this)]));
            }
            else {
                return (h("gx-ide-empty-state", { class: "empty-state scrollable", stateIconSrc: DESIGN, isAnimated: __classPrivateFieldGet(this, _GxIdeImportFromDesign_emptyStateAnimated, "f"), stateTitle: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.noDesignSelected, key: "no-objects-empty-state" }, h("button", {
                    // begin by selecting a file
                    class: "button-tertiary empty-state-button", onClick: __classPrivateFieldGet(this, _GxIdeImportFromDesign_selectFileHandler, "f")
                }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.selectDesign)));
            }
        });
        _GxIdeImportFromDesign_renderDesignTree.set(this, () => {
            return (h("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: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler, "f") }));
        });
        _GxIdeImportFromDesign_renderFooter.set(this, () => {
            var _a;
            const buttonOkDisabled = ((_a = this.designData) === null || _a === void 0 ? void 0 : _a.success) !== true || this.isLoading;
            return (h("footer", { class: "dialog-footer-with-border spacing-body-block-end spacing-body-inline" }, h("div", { class: "buttons-spacer" }, h("button", {
                // button cancel
                id: "button-cancel", class: "button-secondary button-cancel", type: "outlined", onClick: __classPrivateFieldGet(this, _GxIdeImportFromDesign_cancel, "f"), part: "button button--cancel", slot: "footer-end"
            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").footer.btnCancel), h("button", {
                // button ok
                id: "button-ok", class: "button-primary button-ok", type: "primary-text-only", onClick: !buttonOkDisabled && __classPrivateFieldGet(this, _GxIdeImportFromDesign_confirm, "f"), part: "button button--ok", disabled: buttonOkDisabled, slot: "footer-end"
            }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").footer.btnOk))));
        });
        _GxIdeImportFromDesign_evaluatePanelPreview.set(this, () => {
            var _a, _b;
            if (this.selectedDesignType === "panels") {
                return ((_b = (_a = this.selectedDesignItem) === null || _a === void 0 ? void 0 : _a.composition) === null || _b === void 0 ? void 0 : _b.preview) ? (h("div", { part: "data-panel-composition-preview", class: "panel-item scrollable" }, h("img", { src: this.selectedDesignItem.composition.preview, alt: "Preview" }))) : (h("gx-ide-empty-state", { class: "panel-tab__empty-state", stateTitle: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").messages.noPanelPreviewAvailable, stateIconSrc: __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE
                        ? WEBPANEL_ICON
                        : PANEL_FOR_SD_ICON }));
            }
            return null;
        });
        _GxIdeImportFromDesign_renderPanelTab.set(this, () => {
            const renderControlsTree = (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||
                this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&
                this.detailTreeModel.length > 0;
            return (h("div", { class: {
                    "panel-tab": true,
                    "panel-tab--controls-tree": renderControlsTree
                }, part: "data-panel-composition-container" }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluatePanelPreview, "f").call(this), renderControlsTree ? (h("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));
        });
        _GxIdeImportFromDesign_renderImageTab.set(this, () => {
            return (h("div", { part: "data-panel-composition-preview", class: "data-preview", style: { height: "100%" } }, h("img", { src: this.selectedDesignItem ? this.selectedDesignItem : undefined, alt: "Preview", class: this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES
                    ? "checker-board"
                    : undefined })));
        });
        _GxIdeImportFromDesign_tabSelectionChangedHandler.set(this, (event) => {
            this.renderedTabs.clear();
            this.renderedTabs.add(event.detail.newSelectedId);
            this.reRenderCounter++;
            this.activeTabs.set(this.selectedDesignType, event.detail.newSelectedId);
        });
        _GxIdeImportFromDesign_renderDesignTabsCh.set(this, () => {
            return (h("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: __classPrivateFieldGet(this, _GxIdeImportFromDesign_tabSelectionChangedHandler, "f")
            }, h("div", { slot: TAB_DATA.tokens.slot, class: "spacing-body", style: {
                    display: this.renderedTabs.has(TAB_DATA.tokens.id) ? "" : "none"
                } }, h("slot", { name: TAB_DATA.tokens.slot })), h("div", { slot: TAB_DATA.styles.slot, class: "spacing-body", style: {
                    display: this.renderedTabs.has(TAB_DATA.styles.id) ? "" : "none"
                } }, h("slot", { name: TAB_DATA.styles.slot })), h("div", { class: "composition-tab-slot scrollable", slot: TAB_DATA.composition.slot, style: {
                    display: this.renderedTabs.has(TAB_DATA.composition.id)
                        ? ""
                        : "none"
                } }, this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||
                this.selectedDesignType === DESIGN_DATA_TYPE_FONTS
                ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderImageTab, "f").call(this)
                : __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderPanelTab, "f").call(this)), h("div", { slot: TAB_DATA.layout.slot, class: "spacing-body", style: {
                    display: this.renderedTabs.has(TAB_DATA.layout.id) ? "" : "none"
                } }, h("slot", { name: TAB_DATA.layout.slot })), h("div", { slot: TAB_DATA.code.slot, class: "spacing-body", style: {
                    display: this.renderedTabs.has(TAB_DATA.code.id) ? "" : "none"
                } }, h("slot", { name: TAB_DATA.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(pathIsValid) {
        if (pathIsValid) {
            __classPrivateFieldGet(this, _GxIdeImportFromDesign_evaluateAccessTokenRender, "f").call(this);
        }
        else {
            // hide access token input if path is not valid
            this.requiresAccessToken = false;
        }
    }
    designDataChanged(newDesignData) {
        if (newDesignData) {
            // panels
            const panelsSelectedItem = __classPrivateFieldGet(this, _GxIdeImportFromDesign_getPanelsSelectedItem, "f").call(this, this.designData.panels);
            const isForWeb = __classPrivateFieldGet(this, _GxIdeImportFromDesign_importAsWebPanelsEl, "f").value === CHECKED_VALUE;
            const panelsIconSrc = isForWeb
                ? "objects/webpanel"
                : "objects/panel-for-sd";
            // images
            const imagesIconSrc = "objects/image";
            this.designDataTreeDataModel = [
                {
                    order: 0,
                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_PANELS}`,
                    leaf: false,
                    caption: isForWeb
                        ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.webPanels
                        : __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.panels,
                    startImgSrc: panelsIconSrc,
                    checkbox: true,
                    checked: true,
                    expanded: true,
                    items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, this.designData.panels, DESIGN_DATA_TYPE_PANELS, panelsIconSrc, panelsSelectedItem)
                },
                {
                    order: 1,
                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_STENCILS}`,
                    leaf: false,
                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.stencils,
                    startImgSrc: "objects/stencil",
                    checkbox: true,
                    checked: true,
                    expanded: true,
                    items: this.designData.stencils.map(item => ({
                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_STENCILS}`,
                        class: "object tree-view-item",
                        leaf: !item.warning,
                        caption: item.name,
                        startImgSrc: "objects/stencil",
                        checkbox: true,
                        checked: true,
                        expanded: true,
                        items: item.warning && __classPrivateFieldGet(this, _GxIdeImportFromDesign_warningTreeItem, "f").call(this, item.warning)
                    }))
                },
                {
                    order: 2,
                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_IMAGES}`,
                    leaf: false,
                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.images,
                    startImgSrc: imagesIconSrc,
                    checkbox: true,
                    checked: true,
                    expanded: true,
                    items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, this.designData.images, DESIGN_DATA_TYPE_IMAGES, imagesIconSrc)
                },
                {
                    order: 3,
                    id: `parent${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_FONTS}`,
                    leaf: false,
                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.fonts,
                    startImgSrc: "controls/font",
                    checkbox: true,
                    checked: true,
                    expanded: true,
                    items: this.designData.fonts.map(item => ({
                        id: `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_FONTS}`,
                        leaf: !item.warning,
                        caption: item.name,
                        startImgSrc: "controls/font",
                        checkbox: true,
                        checked: true,
                        expanded: true,
                        items: item.warning && __classPrivateFieldGet(this, _GxIdeImportFromDesign_warningTreeItem, "f").call(this, item.warning)
                    }))
                },
                {
                    order: 4,
                    id: `${this.designData.designSystem.length > 0
                        ? this.designData.designSystem[0].id
                        : "parent"}${ITEM_COMPOSE_ID_SEPARATOR}${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,
                    leaf: true,
                    caption: __classPrivateFieldGet(this, _GxIdeImportFromDesign_componentLocale, "f").tree.designSystem,
                    startImgSrc: "objects/dso",
                    checkbox: true,
                    checked: true
                }
            ];
        }
    }
    pathChanged(newPath) {
        var _a;
        const fileIsLoaded = ((_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.size) > 0;
        const validatePathResult = __classPrivateFieldGet(this, _GxIdeImportFromDesign_validatePath, "f").call(this, newPath) || fileIsLoaded;
        this.pathIsValid = validatePathResult;
    }
    accessTokenChanged(newAccessToken) {
        if (!newAccessToken.trim().length) {
            this.accessTokenHasError = true;
            return;
        }
        this.accessTokenHasError = false;
        this.accessToken = newAccessToken;
    }
    stylesChanged(newStyles) {
        this.stylesAsComboBoxModel = mapStylesToComboBoxItemModel(newStyles);
    }
    async componentWillLoad() {
        var _a, _b;
        __classPrivateFieldSet(this, _GxIdeImportFromDesign_componentLocale, await Locale.getComponentStrings(this.el), "f");
        __classPrivateFieldSet(this, _GxIdeImportFromDesign_formattedExtensions, this.extensions
            .map(ext => `.${ext}`)
            .join(", "), "f");
        this.stylesChanged(this.styles);
        __classPrivateFieldGet(this, _GxIdeImportFromDesign_initializeActiveTabs, "f").call(this);
        this.pathChanged(this.path);
        this.styleValue =
            ((_a = this.stylesAsComboBoxModel) === null || _a === void 0 ? void 0 : _a.length) > 0
                ? (_b = this.stylesAsComboBoxModel[0]) === null || _b === void 0 ? void 0 : _b.value
                : "";
    }
    watchMessagesHandler(newValue, oldValue) {
        if (newValue !== oldValue) {
            if (__classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f")) {
                __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").scrollTop = __classPrivateFieldGet(this, _GxIdeImportFromDesign_messagesList, "f").scrollHeight;
            }
        }
    }
    render() {
        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderHeader, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderMain, "f").call(this), __classPrivateFieldGet(this, _GxIdeImportFromDesign_renderFooter, "f").call(this))));
    }
    static get assetsDirs() { return ["gx-ide-assets/design-import"]; }
    get el() { return getElement(this); }
    static get watchers() { return {
        "pathIsValid": ["pathIsValidChanged"],
        "designData": ["designDataChanged"],
        "path": ["pathChanged"],
        "accessToken": ["accessTokenChanged"],
        "styles": ["stylesChanged"],
        "messages": ["watchMessagesHandler"]
    }; }
};
_GxIdeImportFromDesign_componentLocale = new WeakMap(), _GxIdeImportFromDesign_loadedItems = new WeakMap(), _GxIdeImportFromDesign_emptyStateAnimated = new WeakMap(), _GxIdeImportFromDesign_formattedExtensions = new WeakMap(), _GxIdeImportFromDesign_objectTreeCheckedStatus = new WeakMap(), _GxIdeImportFromDesign_accessTokenEl = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsEl = new WeakMap(), _GxIdeImportFromDesign_moduleEl = new WeakMap(), _GxIdeImportFromDesign_messagesList = new WeakMap(), _GxIdeImportFromDesign_panelsSelected = new WeakMap(), _GxIdeImportFromDesign_stencilsSelected = new WeakMap(), _GxIdeImportFromDesign_imagesSelected = new WeakMap(), _GxIdeImportFromDesign_fontsSelected = new WeakMap(), _GxIdeImportFromDesign_fileInputHiddenEl = new WeakMap(), _GxIdeImportFromDesign_pathEl = new WeakMap(), _GxIdeImportFromDesign_countDesignDataItems = new WeakMap(), _GxIdeImportFromDesign_warningTreeItem = new WeakMap(), _GxIdeImportFromDesign_initializeActiveTabs = new WeakMap(), _GxIdeImportFromDesign_evaluateAccessTokenRender = new WeakMap(), _GxIdeImportFromDesign_pathURLBlurHandler = new WeakMap(), _GxIdeImportFromDesign_objectsTreeSelectedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_getLoadedItem = new WeakMap(), _GxIdeImportFromDesign_validatePath = new WeakMap(), _GxIdeImportFromDesign_objectsTreeCheckedItemsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_selectFileHandler = new WeakMap(), _GxIdeImportFromDesign_styleComboBoxInputHandler = new WeakMap(), _GxIdeImportFromDesign_moduleInputHandler = new WeakMap(), _GxIdeImportFromDesign_loadData = new WeakMap(), _GxIdeImportFromDesign_messageCallback = new WeakMap(), _GxIdeImportFromDesign_getDesignDataDetail = new WeakMap(), _GxIdeImportFromDesign_evaluateDesignItemsChecked = new WeakMap(), _GxIdeImportFromDesign_confirm = new WeakMap(), _GxIdeImportFromDesign_cancel = new WeakMap(), _GxIdeImportFromDesign_fitImagesHandler = new WeakMap(), _GxIdeImportFromDesign_getPanelsSelectedItem = new WeakMap(), _GxIdeImportFromDesign_importAsWebPanelsChangedHandler = new WeakMap(), _GxIdeImportFromDesign_removeFileSelection = new WeakMap(), _GxIdeImportFromDesign_selectFileInputChangedHandler = new WeakMap(), _GxIdeImportFromDesign_accessFocusHandler = new WeakMap(), _GxIdeImportFromDesign_accessBlurHandler = new WeakMap(), _GxIdeImportFromDesign_pathUrlInputHandler = new WeakMap(), _GxIdeImportFromDesign_renderHeader = new WeakMap(), _GxIdeImportFromDesign_renderMessages = new WeakMap(), _GxIdeImportFromDesign_renderMain = new WeakMap(), _GxIdeImportFromDesign_renderDesignTree = new WeakMap(), _GxIdeImportFromDesign_renderFooter = new WeakMap(), _GxIdeImportFromDesign_evaluatePanelPreview = new WeakMap(), _GxIdeImportFromDesign_renderPanelTab = new WeakMap(), _GxIdeImportFromDesign_renderImageTab = new WeakMap(), _GxIdeImportFromDesign_tabSelectionChangedHandler = new WeakMap(), _GxIdeImportFromDesign_renderDesignTabsCh = new WeakMap(), _GxIdeImportFromDesign_instances = new WeakSet(), _GxIdeImportFromDesign_recursiveDesignTreeItems = function _GxIdeImportFromDesign_recursiveDesignTreeItems(items, designType, iconSrc, selectedIndex = undefined) {
    return items.map((item, i) => {
        var _a;
        const id = `${item.id}${ITEM_COMPOSE_ID_SEPARATOR}${designType}`;
        const hasVariants = ((_a = item.variants) === null || _a === void 0 ? void 0 : _a.length) > 0;
        const itemWithWarning = item.warning
            ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_warningTreeItem, "f").call(this, item.warning)
            : [];
        const isLeaf = !hasVariants && !item.warning;
        return {
            id: id,
            leaf: isLeaf,
            caption: item.name,
            startImgSrc: iconSrc,
            checkbox: true,
            checked: true,
            expanded: !isLeaf,
            selected: selectedIndex === i,
            order: i,
            items: [
                ...itemWithWarning,
                ...(hasVariants
                    ? __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_recursiveDesignTreeItems).call(this, item.variants, designType, iconSrc)
                    : [])
            ]
        };
    });
}, _GxIdeImportFromDesign_loadTreeItemCompositionModel = function _GxIdeImportFromDesign_loadTreeItemCompositionModel(controls) {
    const modelList = [];
    for (const control of controls) {
        let model = {
            id: control.name,
            caption: control.name,
            startImgSrc: control.type,
            checkbox: false,
            expanded: true,
            leaf: control.leaf
        };
        if (control.controls) {
            model = Object.assign(Object.assign({}, model), { items: __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, control.controls) });
        }
        modelList.push(model);
    }
    return modelList;
}, _GxIdeImportFromDesign_getCodeFactory = function _GxIdeImportFromDesign_getCodeFactory(designType) {
    switch (designType) {
        case DESIGN_DATA_TYPE_PANELS:
        case DESIGN_DATA_TYPE_STENCILS:
            this.textEditorFactoryCallback("code", TAB_DATA.code.slot, this.selectedDesignItem.code);
            this.textEditorFactoryCallback("html", TAB_DATA.layout.slot, this.selectedDesignItem.layout);
            break;
        case DESIGN_DATA_TYPE_DESIGN_SYSTEM:
            this.textEditorFactoryCallback("tokens", TAB_DATA.tokens.slot, this.selectedDesignItem.tokens);
            this.textEditorFactoryCallback("styles", TAB_DATA.styles.slot, this.selectedDesignItem.styles);
            break;
    }
}, _GxIdeImportFromDesign_renderDetailDataTree = function _GxIdeImportFromDesign_renderDetailDataTree(designType) {
    switch (designType) {
        case DESIGN_DATA_TYPE_PANELS:
        case DESIGN_DATA_TYPE_STENCILS:
            this.detailTreeModel = __classPrivateFieldGet(this, _GxIdeImportFromDesign_instances, "m", _GxIdeImportFromDesign_loadTreeItemCompositionModel).call(this, this.selectedDesignItem.composition.controls);
            break;
    }
};
GxIdeImportFromDesign.style = designImportCss;

export { GxIdeImportFromDesign as gx_ide_design_import };

//# sourceMappingURL=gx-ide-design-import.entry.js.map