@esri/solutions-components 0.11.30 → 0.11.31

package/dist/components/instant-apps-export.js

@@ -1,2003 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loadModules } from './loadModules2.js';
-import { g as getMessages } from './locale2.js';
-import { g as getMode } from './mode.js';
-import { d as defineCustomElement$2 } from './instant-apps-header2.js';
-
-function resolveUrl(url, baseUrl) {
-    // url is absolute already
-    if (url.match(/^[a-z]+:\/\//i)) {
-        return url;
-    }
-    // url is absolute already, without protocol
-    if (url.match(/^\/\//)) {
-        return window.location.protocol + url;
-    }
-    // dataURI, mailto:, tel:, etc.
-    if (url.match(/^[a-z]+:/i)) {
-        return url;
-    }
-    const doc = document.implementation.createHTMLDocument();
-    const base = doc.createElement('base');
-    const a = doc.createElement('a');
-    doc.head.appendChild(base);
-    doc.body.appendChild(a);
-    if (baseUrl) {
-        base.href = baseUrl;
-    }
-    a.href = url;
-    return a.href;
-}
-const uuid = (() => {
-    // generate uuid for className of pseudo elements.
-    // We should not use GUIDs, otherwise pseudo elements sometimes cannot be captured.
-    let counter = 0;
-    // ref: http://stackoverflow.com/a/6248722/2519373
-    const random = () => 
-    // eslint-disable-next-line no-bitwise
-    `0000${((Math.random() * 36 ** 4) << 0).toString(36)}`.slice(-4);
-    return () => {
-        counter += 1;
-        return `u${random()}${counter}`;
-    };
-})();
-function toArray(arrayLike) {
-    const arr = [];
-    for (let i = 0, l = arrayLike.length; i < l; i++) {
-        arr.push(arrayLike[i]);
-    }
-    return arr;
-}
-function px(node, styleProperty) {
-    const win = node.ownerDocument.defaultView || window;
-    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
-    return val ? parseFloat(val.replace('px', '')) : 0;
-}
-function getNodeWidth(node) {
-    const leftBorder = px(node, 'border-left-width');
-    const rightBorder = px(node, 'border-right-width');
-    return node.clientWidth + leftBorder + rightBorder;
-}
-function getNodeHeight(node) {
-    const topBorder = px(node, 'border-top-width');
-    const bottomBorder = px(node, 'border-bottom-width');
-    return node.clientHeight + topBorder + bottomBorder;
-}
-function getImageSize(targetNode, options = {}) {
-    const width = options.width || getNodeWidth(targetNode);
-    const height = options.height || getNodeHeight(targetNode);
-    return { width, height };
-}
-function getPixelRatio() {
-    let ratio;
-    let FINAL_PROCESS;
-    try {
-        FINAL_PROCESS = process;
-    }
-    catch (e) {
-        // pass
-    }
-    const val = FINAL_PROCESS && FINAL_PROCESS.env
-        ? FINAL_PROCESS.env.devicePixelRatio
-        : null;
-    if (val) {
-        ratio = parseInt(val, 10);
-        if (Number.isNaN(ratio)) {
-            ratio = 1;
-        }
-    }
-    return ratio || window.devicePixelRatio || 1;
-}
-// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
-const canvasDimensionLimit = 16384;
-function checkCanvasDimensions(canvas) {
-    if (canvas.width > canvasDimensionLimit ||
-        canvas.height > canvasDimensionLimit) {
-        if (canvas.width > canvasDimensionLimit &&
-            canvas.height > canvasDimensionLimit) {
-            if (canvas.width > canvas.height) {
-                canvas.height *= canvasDimensionLimit / canvas.width;
-                canvas.width = canvasDimensionLimit;
-            }
-            else {
-                canvas.width *= canvasDimensionLimit / canvas.height;
-                canvas.height = canvasDimensionLimit;
-            }
-        }
-        else if (canvas.width > canvasDimensionLimit) {
-            canvas.height *= canvasDimensionLimit / canvas.width;
-            canvas.width = canvasDimensionLimit;
-        }
-        else {
-            canvas.width *= canvasDimensionLimit / canvas.height;
-            canvas.height = canvasDimensionLimit;
-        }
-    }
-}
-function createImage(url) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.decode = () => resolve(img);
-        img.onload = () => resolve(img);
-        img.onerror = reject;
-        img.crossOrigin = 'anonymous';
-        img.decoding = 'async';
-        img.src = url;
-    });
-}
-async function svgToDataURL(svg) {
-    return Promise.resolve()
-        .then(() => new XMLSerializer().serializeToString(svg))
-        .then(encodeURIComponent)
-        .then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
-}
-async function nodeToDataURL(node, width, height) {
-    const xmlns = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(xmlns, 'svg');
-    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
-    svg.setAttribute('width', `${width}`);
-    svg.setAttribute('height', `${height}`);
-    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
-    foreignObject.setAttribute('width', '100%');
-    foreignObject.setAttribute('height', '100%');
-    foreignObject.setAttribute('x', '0');
-    foreignObject.setAttribute('y', '0');
-    foreignObject.setAttribute('externalResourcesRequired', 'true');
-    svg.appendChild(foreignObject);
-    foreignObject.appendChild(node);
-    return svgToDataURL(svg);
-}
-const isInstanceOfElement = (node, instance) => {
-    if (node instanceof instance)
-        return true;
-    const nodePrototype = Object.getPrototypeOf(node);
-    if (nodePrototype === null)
-        return false;
-    return (nodePrototype.constructor.name === instance.name ||
-        isInstanceOfElement(nodePrototype, instance));
-};
-
-function formatCSSText(style) {
-    const content = style.getPropertyValue('content');
-    return `${style.cssText} content: '${content.replace(/'|"/g, '')}';`;
-}
-function formatCSSProperties(style) {
-    return toArray(style)
-        .map((name) => {
-        const value = style.getPropertyValue(name);
-        const priority = style.getPropertyPriority(name);
-        return `${name}: ${value}${priority ? ' !important' : ''};`;
-    })
-        .join(' ');
-}
-function getPseudoElementStyle(className, pseudo, style) {
-    const selector = `.${className}:${pseudo}`;
-    const cssText = style.cssText
-        ? formatCSSText(style)
-        : formatCSSProperties(style);
-    return document.createTextNode(`${selector}{${cssText}}`);
-}
-function clonePseudoElement(nativeNode, clonedNode, pseudo) {
-    const style = window.getComputedStyle(nativeNode, pseudo);
-    const content = style.getPropertyValue('content');
-    if (content === '' || content === 'none') {
-        return;
-    }
-    const className = uuid();
-    try {
-        clonedNode.className = `${clonedNode.className} ${className}`;
-    }
-    catch (err) {
-        return;
-    }
-    const styleElement = document.createElement('style');
-    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style));
-    clonedNode.appendChild(styleElement);
-}
-function clonePseudoElements(nativeNode, clonedNode) {
-    clonePseudoElement(nativeNode, clonedNode, ':before');
-    clonePseudoElement(nativeNode, clonedNode, ':after');
-}
-
-const WOFF = 'application/font-woff';
-const JPEG = 'image/jpeg';
-const mimes = {
-    woff: WOFF,
-    woff2: WOFF,
-    ttf: 'application/font-truetype',
-    eot: 'application/vnd.ms-fontobject',
-    png: 'image/png',
-    jpg: JPEG,
-    jpeg: JPEG,
-    gif: 'image/gif',
-    tiff: 'image/tiff',
-    svg: 'image/svg+xml',
-    webp: 'image/webp',
-};
-function getExtension(url) {
-    const match = /\.([^./]*?)$/g.exec(url);
-    return match ? match[1] : '';
-}
-function getMimeType(url) {
-    const extension = getExtension(url).toLowerCase();
-    return mimes[extension] || '';
-}
-
-function getContentFromDataUrl(dataURL) {
-    return dataURL.split(/,/)[1];
-}
-function isDataUrl(url) {
-    return url.search(/^(data:)/) !== -1;
-}
-function makeDataUrl(content, mimeType) {
-    return `data:${mimeType};base64,${content}`;
-}
-async function fetchAsDataURL(url, init, process) {
-    const res = await fetch(url, init);
-    if (res.status === 404) {
-        throw new Error(`Resource "${res.url}" not found`);
-    }
-    const blob = await res.blob();
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onerror = reject;
-        reader.onloadend = () => {
-            try {
-                resolve(process({ res, result: reader.result }));
-            }
-            catch (error) {
-                reject(error);
-            }
-        };
-        reader.readAsDataURL(blob);
-    });
-}
-const cache = {};
-function getCacheKey(url, contentType, includeQueryParams) {
-    let key = url.replace(/\?.*/, '');
-    if (includeQueryParams) {
-        key = url;
-    }
-    // font resource
-    if (/ttf|otf|eot|woff2?/i.test(key)) {
-        key = key.replace(/.*\//, '');
-    }
-    return contentType ? `[${contentType}]${key}` : key;
-}
-async function resourceToDataURL(resourceUrl, contentType, options) {
-    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
-    if (cache[cacheKey] != null) {
-        return cache[cacheKey];
-    }
-    // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
-    if (options.cacheBust) {
-        // eslint-disable-next-line no-param-reassign
-        resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime();
-    }
-    let dataURL;
-    try {
-        const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
-            if (!contentType) {
-                // eslint-disable-next-line no-param-reassign
-                contentType = res.headers.get('Content-Type') || '';
-            }
-            return getContentFromDataUrl(result);
-        });
-        dataURL = makeDataUrl(content, contentType);
-    }
-    catch (error) {
-        dataURL = options.imagePlaceholder || '';
-        let msg = `Failed to fetch resource: ${resourceUrl}`;
-        if (error) {
-            msg = typeof error === 'string' ? error : error.message;
-        }
-        if (msg) {
-            console.warn(msg);
-        }
-    }
-    cache[cacheKey] = dataURL;
-    return dataURL;
-}
-
-async function cloneCanvasElement(canvas) {
-    const dataURL = canvas.toDataURL();
-    if (dataURL === 'data:,') {
-        return canvas.cloneNode(false);
-    }
-    return createImage(dataURL);
-}
-async function cloneVideoElement(video, options) {
-    if (video.currentSrc) {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        canvas.width = video.clientWidth;
-        canvas.height = video.clientHeight;
-        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const dataURL = canvas.toDataURL();
-        return createImage(dataURL);
-    }
-    const poster = video.poster;
-    const contentType = getMimeType(poster);
-    const dataURL = await resourceToDataURL(poster, contentType, options);
-    return createImage(dataURL);
-}
-async function cloneIFrameElement(iframe) {
-    var _a;
-    try {
-        if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
-            return (await cloneNode(iframe.contentDocument.body, {}, true));
-        }
-    }
-    catch (_b) {
-        // Failed to clone iframe
-    }
-    return iframe.cloneNode(false);
-}
-async function cloneSingleNode(node, options) {
-    if (isInstanceOfElement(node, HTMLCanvasElement)) {
-        return cloneCanvasElement(node);
-    }
-    if (isInstanceOfElement(node, HTMLVideoElement)) {
-        return cloneVideoElement(node, options);
-    }
-    if (isInstanceOfElement(node, HTMLIFrameElement)) {
-        return cloneIFrameElement(node);
-    }
-    return node.cloneNode(false);
-}
-const isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === 'SLOT';
-async function cloneChildren(nativeNode, clonedNode, options) {
-    var _a, _b;
-    let children = [];
-    if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
-        children = toArray(nativeNode.assignedNodes());
-    }
-    else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
-        ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
-        children = toArray(nativeNode.contentDocument.body.childNodes);
-    }
-    else {
-        children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
-    }
-    if (children.length === 0 ||
-        isInstanceOfElement(nativeNode, HTMLVideoElement)) {
-        return clonedNode;
-    }
-    await children.reduce((deferred, child) => deferred
-        .then(() => cloneNode(child, options))
-        .then((clonedChild) => {
-        if (clonedChild) {
-            clonedNode.appendChild(clonedChild);
-        }
-    }), Promise.resolve());
-    return clonedNode;
-}
-function cloneCSSStyle(nativeNode, clonedNode) {
-    const targetStyle = clonedNode.style;
-    if (!targetStyle) {
-        return;
-    }
-    const sourceStyle = window.getComputedStyle(nativeNode);
-    if (sourceStyle.cssText) {
-        targetStyle.cssText = sourceStyle.cssText;
-        targetStyle.transformOrigin = sourceStyle.transformOrigin;
-    }
-    else {
-        toArray(sourceStyle).forEach((name) => {
-            let value = sourceStyle.getPropertyValue(name);
-            if (name === 'font-size' && value.endsWith('px')) {
-                const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
-                value = `${reducedFont}px`;
-            }
-            if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
-                name === 'display' &&
-                value === 'inline') {
-                value = 'block';
-            }
-            if (name === 'd' && clonedNode.getAttribute('d')) {
-                value = `path(${clonedNode.getAttribute('d')})`;
-            }
-            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
-        });
-    }
-}
-function cloneInputValue(nativeNode, clonedNode) {
-    if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
-        clonedNode.innerHTML = nativeNode.value;
-    }
-    if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
-        clonedNode.setAttribute('value', nativeNode.value);
-    }
-}
-function cloneSelectValue(nativeNode, clonedNode) {
-    if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
-        const clonedSelect = clonedNode;
-        const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute('value'));
-        if (selectedOption) {
-            selectedOption.setAttribute('selected', '');
-        }
-    }
-}
-function decorate(nativeNode, clonedNode) {
-    if (isInstanceOfElement(clonedNode, Element)) {
-        cloneCSSStyle(nativeNode, clonedNode);
-        clonePseudoElements(nativeNode, clonedNode);
-        cloneInputValue(nativeNode, clonedNode);
-        cloneSelectValue(nativeNode, clonedNode);
-    }
-    return clonedNode;
-}
-async function ensureSVGSymbols(clone, options) {
-    const uses = clone.querySelectorAll ? clone.querySelectorAll('use') : [];
-    if (uses.length === 0) {
-        return clone;
-    }
-    const processedDefs = {};
-    for (let i = 0; i < uses.length; i++) {
-        const use = uses[i];
-        const id = use.getAttribute('xlink:href');
-        if (id) {
-            const exist = clone.querySelector(id);
-            const definition = document.querySelector(id);
-            if (!exist && definition && !processedDefs[id]) {
-                // eslint-disable-next-line no-await-in-loop
-                processedDefs[id] = (await cloneNode(definition, options, true));
-            }
-        }
-    }
-    const nodes = Object.values(processedDefs);
-    if (nodes.length) {
-        const ns = 'http://www.w3.org/1999/xhtml';
-        const svg = document.createElementNS(ns, 'svg');
-        svg.setAttribute('xmlns', ns);
-        svg.style.position = 'absolute';
-        svg.style.width = '0';
-        svg.style.height = '0';
-        svg.style.overflow = 'hidden';
-        svg.style.display = 'none';
-        const defs = document.createElementNS(ns, 'defs');
-        svg.appendChild(defs);
-        for (let i = 0; i < nodes.length; i++) {
-            defs.appendChild(nodes[i]);
-        }
-        clone.appendChild(svg);
-    }
-    return clone;
-}
-async function cloneNode(node, options, isRoot) {
-    if (!isRoot && options.filter && !options.filter(node)) {
-        return null;
-    }
-    return Promise.resolve(node)
-        .then((clonedNode) => cloneSingleNode(clonedNode, options))
-        .then((clonedNode) => cloneChildren(node, clonedNode, options))
-        .then((clonedNode) => decorate(node, clonedNode))
-        .then((clonedNode) => ensureSVGSymbols(clonedNode, options));
-}
-
-const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
-const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
-const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
-function toRegex(url) {
-    // eslint-disable-next-line no-useless-escape
-    const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
-    return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, 'g');
-}
-function parseURLs(cssText) {
-    const urls = [];
-    cssText.replace(URL_REGEX, (raw, quotation, url) => {
-        urls.push(url);
-        return raw;
-    });
-    return urls.filter((url) => !isDataUrl(url));
-}
-async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
-    try {
-        const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
-        const contentType = getMimeType(resourceURL);
-        let dataURL;
-        if (getContentFromUrl) {
-            const content = await getContentFromUrl(resolvedURL);
-            dataURL = makeDataUrl(content, contentType);
-        }
-        else {
-            dataURL = await resourceToDataURL(resolvedURL, contentType, options);
-        }
-        return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
-    }
-    catch (error) {
-        // pass
-    }
-    return cssText;
-}
-function filterPreferredFontFormat(str, { preferredFontFormat }) {
-    return !preferredFontFormat
-        ? str
-        : str.replace(FONT_SRC_REGEX, (match) => {
-            // eslint-disable-next-line no-constant-condition
-            while (true) {
-                const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
-                if (!format) {
-                    return '';
-                }
-                if (format === preferredFontFormat) {
-                    return `src: ${src};`;
-                }
-            }
-        });
-}
-function shouldEmbed(url) {
-    return url.search(URL_REGEX) !== -1;
-}
-async function embedResources(cssText, baseUrl, options) {
-    if (!shouldEmbed(cssText)) {
-        return cssText;
-    }
-    const filteredCSSText = filterPreferredFontFormat(cssText, options);
-    const urls = parseURLs(filteredCSSText);
-    return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
-}
-
-async function embedProp(propName, node, options) {
-    var _a;
-    const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
-    if (propValue) {
-        const cssString = await embedResources(propValue, null, options);
-        node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
-        return true;
-    }
-    return false;
-}
-async function embedBackground(clonedNode, options) {
-    if (!(await embedProp('background', clonedNode, options))) {
-        await embedProp('background-image', clonedNode, options);
-    }
-    if (!(await embedProp('mask', clonedNode, options))) {
-        await embedProp('mask-image', clonedNode, options);
-    }
-}
-async function embedImageNode(clonedNode, options) {
-    const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
-    if (!(isImageElement && !isDataUrl(clonedNode.src)) &&
-        !(isInstanceOfElement(clonedNode, SVGImageElement) &&
-            !isDataUrl(clonedNode.href.baseVal))) {
-        return;
-    }
-    const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
-    const dataURL = await resourceToDataURL(url, getMimeType(url), options);
-    await new Promise((resolve, reject) => {
-        clonedNode.onload = resolve;
-        clonedNode.onerror = reject;
-        const image = clonedNode;
-        if (image.decode) {
-            image.decode = resolve;
-        }
-        if (image.loading === 'lazy') {
-            image.loading = 'eager';
-        }
-        if (isImageElement) {
-            clonedNode.srcset = '';
-            clonedNode.src = dataURL;
-        }
-        else {
-            clonedNode.href.baseVal = dataURL;
-        }
-    });
-}
-async function embedChildren(clonedNode, options) {
-    const children = toArray(clonedNode.childNodes);
-    const deferreds = children.map((child) => embedImages(child, options));
-    await Promise.all(deferreds).then(() => clonedNode);
-}
-async function embedImages(clonedNode, options) {
-    if (isInstanceOfElement(clonedNode, Element)) {
-        await embedBackground(clonedNode, options);
-        await embedImageNode(clonedNode, options);
-        await embedChildren(clonedNode, options);
-    }
-}
-
-function applyStyle(node, options) {
-    const { style } = node;
-    if (options.backgroundColor) {
-        style.backgroundColor = options.backgroundColor;
-    }
-    if (options.width) {
-        style.width = `${options.width}px`;
-    }
-    if (options.height) {
-        style.height = `${options.height}px`;
-    }
-    const manual = options.style;
-    if (manual != null) {
-        Object.keys(manual).forEach((key) => {
-            style[key] = manual[key];
-        });
-    }
-    return node;
-}
-
-const cssFetchCache = {};
-async function fetchCSS(url) {
-    let cache = cssFetchCache[url];
-    if (cache != null) {
-        return cache;
-    }
-    const res = await fetch(url);
-    const cssText = await res.text();
-    cache = { url, cssText };
-    cssFetchCache[url] = cache;
-    return cache;
-}
-async function embedFonts(data, options) {
-    let cssText = data.cssText;
-    const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
-    const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
-    const loadFonts = fontLocs.map(async (loc) => {
-        let url = loc.replace(regexUrl, '$1');
-        if (!url.startsWith('https://')) {
-            url = new URL(url, data.url).href;
-        }
-        return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
-            cssText = cssText.replace(loc, `url(${result})`);
-            return [loc, result];
-        });
-    });
-    return Promise.all(loadFonts).then(() => cssText);
-}
-function parseCSS(source) {
-    if (source == null) {
-        return [];
-    }
-    const result = [];
-    const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
-    // strip out comments
-    let cssText = source.replace(commentsRegex, '');
-    // eslint-disable-next-line prefer-regex-literals
-    const keyframesRegex = new RegExp('((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})', 'gi');
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-        const matches = keyframesRegex.exec(cssText);
-        if (matches === null) {
-            break;
-        }
-        result.push(matches[0]);
-    }
-    cssText = cssText.replace(keyframesRegex, '');
-    const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
-    // to match css & media queries together
-    const combinedCSSRegex = '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]' +
-        '*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})';
-    // unified regex
-    const unifiedRegex = new RegExp(combinedCSSRegex, 'gi');
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-        let matches = importRegex.exec(cssText);
-        if (matches === null) {
-            matches = unifiedRegex.exec(cssText);
-            if (matches === null) {
-                break;
-            }
-            else {
-                importRegex.lastIndex = unifiedRegex.lastIndex;
-            }
-        }
-        else {
-            unifiedRegex.lastIndex = importRegex.lastIndex;
-        }
-        result.push(matches[0]);
-    }
-    return result;
-}
-async function getCSSRules(styleSheets, options) {
-    const ret = [];
-    const deferreds = [];
-    // First loop inlines imports
-    styleSheets.forEach((sheet) => {
-        if ('cssRules' in sheet) {
-            try {
-                toArray(sheet.cssRules || []).forEach((item, index) => {
-                    if (item.type === CSSRule.IMPORT_RULE) {
-                        let importIndex = index + 1;
-                        const url = item.href;
-                        const deferred = fetchCSS(url)
-                            .then((metadata) => embedFonts(metadata, options))
-                            .then((cssText) => parseCSS(cssText).forEach((rule) => {
-                            try {
-                                sheet.insertRule(rule, rule.startsWith('@import')
-                                    ? (importIndex += 1)
-                                    : sheet.cssRules.length);
-                            }
-                            catch (error) {
-                                console.error('Error inserting rule from remote css', {
-                                    rule,
-                                    error,
-                                });
-                            }
-                        }))
-                            .catch((e) => {
-                            console.error('Error loading remote css', e.toString());
-                        });
-                        deferreds.push(deferred);
-                    }
-                });
-            }
-            catch (e) {
-                const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
-                if (sheet.href != null) {
-                    deferreds.push(fetchCSS(sheet.href)
-                        .then((metadata) => embedFonts(metadata, options))
-                        .then((cssText) => parseCSS(cssText).forEach((rule) => {
-                        inline.insertRule(rule, sheet.cssRules.length);
-                    }))
-                        .catch((err) => {
-                        console.error('Error loading remote stylesheet', err);
-                    }));
-                }
-                console.error('Error inlining remote css file', e);
-            }
-        }
-    });
-    return Promise.all(deferreds).then(() => {
-        // Second loop parses rules
-        styleSheets.forEach((sheet) => {
-            if ('cssRules' in sheet) {
-                try {
-                    toArray(sheet.cssRules || []).forEach((item) => {
-                        ret.push(item);
-                    });
-                }
-                catch (e) {
-                    console.error(`Error while reading CSS rules from ${sheet.href}`, e);
-                }
-            }
-        });
-        return ret;
-    });
-}
-function getWebFontRules(cssRules) {
-    return cssRules
-        .filter((rule) => rule.type === CSSRule.FONT_FACE_RULE)
-        .filter((rule) => shouldEmbed(rule.style.getPropertyValue('src')));
-}
-async function parseWebFontRules(node, options) {
-    if (node.ownerDocument == null) {
-        throw new Error('Provided element is not within a Document');
-    }
-    const styleSheets = toArray(node.ownerDocument.styleSheets);
-    const cssRules = await getCSSRules(styleSheets, options);
-    return getWebFontRules(cssRules);
-}
-async function getWebFontCSS(node, options) {
-    const rules = await parseWebFontRules(node, options);
-    const cssTexts = await Promise.all(rules.map((rule) => {
-        const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
-        return embedResources(rule.cssText, baseUrl, options);
-    }));
-    return cssTexts.join('\n');
-}
-async function embedWebFonts(clonedNode, options) {
-    const cssText = options.fontEmbedCSS != null
-        ? options.fontEmbedCSS
-        : options.skipFonts
-            ? null
-            : await getWebFontCSS(clonedNode, options);
-    if (cssText) {
-        const styleNode = document.createElement('style');
-        const sytleContent = document.createTextNode(cssText);
-        styleNode.appendChild(sytleContent);
-        if (clonedNode.firstChild) {
-            clonedNode.insertBefore(styleNode, clonedNode.firstChild);
-        }
-        else {
-            clonedNode.appendChild(styleNode);
-        }
-    }
-}
-
-async function toSvg(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const clonedNode = (await cloneNode(node, options, true));
-    await embedWebFonts(clonedNode, options);
-    await embedImages(clonedNode, options);
-    applyStyle(clonedNode, options);
-    const datauri = await nodeToDataURL(clonedNode, width, height);
-    return datauri;
-}
-async function toCanvas(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const svg = await toSvg(node, options);
-    const img = await createImage(svg);
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    const ratio = options.pixelRatio || getPixelRatio();
-    const canvasWidth = options.canvasWidth || width;
-    const canvasHeight = options.canvasHeight || height;
-    canvas.width = canvasWidth * ratio;
-    canvas.height = canvasHeight * ratio;
-    if (!options.skipAutoScale) {
-        checkCanvasDimensions(canvas);
-    }
-    canvas.style.width = `${canvasWidth}`;
-    canvas.style.height = `${canvasHeight}`;
-    if (options.backgroundColor) {
-        context.fillStyle = options.backgroundColor;
-        context.fillRect(0, 0, canvas.width, canvas.height);
-    }
-    context.drawImage(img, 0, 0, canvas.width, canvas.height);
-    return canvas;
-}
-async function toPng(node, options = {}) {
-    const canvas = await toCanvas(node, options);
-    return canvas.toDataURL();
-}
-async function toJpeg(node, options = {}) {
-    const canvas = await toCanvas(node, options);
-    return canvas.toDataURL('image/jpeg', options.quality || 1);
-}
-
-const printStyling = `
-  @media print {
-    @page {
-      size:  Portrait;
-      margin: .25in;
-    }
-
-    html, body {
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-    }
-
-    body > *:not(.instant-apps-export-print) { display: none; }
-  }
-
-  * {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-
-
-  .instant-apps-export-print {
-    position: absolute;
-    z-index: -999;
-    color: #323232 !important;
-    --esri-calcite-mode-name: "light";
-  }
-
-  .instant-apps-export-print__pdf {
-    height: 100%;
-    width: 100%;
-    display: grid;
-    gap: 24px;
-    grid-auto-flow: row;
-  }
-
-  .instant-apps-export-print__img {
-    display: grid;
-    width: auto;
-  }
-
-  .instant-apps-export-print__img--extra-content {
-    grid-template-columns: 2fr minmax(0, 325px);
-  }
-
-  .instant-apps-export-print, .instant-apps-export-print * {
-    box-sizing: border-box;
-  }
-
-  .instant-apps-export-print__view-section {
-    height: 100%;
-  }
-
-  .instant-apps-export-print__view-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  .instant-apps-export-print__img .instant-apps-export-print__view-container {
-    grid-row: 1;
-    grid-column: 1;
-  }
-
-  .instant-apps-export-print__view-wrapper {
-    height: fit-content;
-    width: fit-content;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .instant-apps-export-print__pdf .instant-apps-export-print__view-wrapper {
-    border: 2pt solid #323232;
-  }
-
-  .instant-apps-export-print__img .instant-apps-export-print__view-wrapper {
-    border: 1pt solid #323232;
-  }
-
-  .instant-apps-export-print__view {
-    object-fit: contain;
-  }
-
-  .instant-apps-export-print__extra-container {
-    grid-row: 1 / span 2;
-    grid-column: 2;
-  }
-  
-  .instant-apps-export-print__extra-container .esri-feature.esri-widget .esri-widget__heading.esri-feature__title {
-    display: block;
-  }
-
-  .instant-apps-export-print__popup-container {
-    height: min-content;
-    max-width: 325px;
-    display: none;
-    color: #323232;
-    background: #fff;
-    break-inside: avoid;
-  }
-
-  .instant-apps-export-print__pdf .instant-apps-export-print__popup-container {
-    border: 1pt solid #323232;
-  }
-
-  .instant-apps-export-print__img .instant-apps-export-print__popup-container {
-    grid-row: 1 / span 2;
-    grid-column: 2;
-  }
-
-  .instant-apps-export-print__popup-title {
-    border-bottom: 1pt solid #323232;
-  }
-
-  .instant-apps-export-print__popup-content {
-    background: #fff;
-    padding-top: 8pt;
-  }
-
-  .instant-apps-export-print__popup-content .esri-feature-media__chart {
-    background: #fff;
-  }
-
-  .instant-apps-export-print__legend-container {
-    height: min-content;
-    background: #fff;
-    overflow: unset;
-  }
-
-  .instant-apps-export-print__img .instant-apps-export-print__legend-container {
-    margin: 14px;
-    grid-row: 2;
-    grid-column: 1;
-  }
-
-  .esri-legend--card, .esri-legend--card__service-content {
-    flex-flow: row wrap;
-  }
-
-  .instant-apps-export-print .esri-widget > *:not(.esri-scale-bar.esri-widget > *) {
-    background: #fff;
-    color: #323232;
-  }
-
-  .instant-apps-export-print__popup-content *, .instant-apps-export-print__img .esri-feature.esri-widget * {
-    color: #323232;
-  }
-
-  .instant-apps-export-print .esri-widget__heading {
-    margin: 4pt 7pt;
-    padding: 0;
-    color: #323232;
-  }
-
-  .instant-apps-export-print .esri-legend__ramp-label:before {
-    border-color: rgba(0,0,0,0) rgba(50,50,50,.8) rgba(0,0,0,0) rgba(0,0,0,0);
-  }
-
-  .instant-apps-export-print .esri-legend--card__section {
-    padding: 4pt 0 4pt;
-    min-width: unset;
-    border-left: none;
-  }
-
-  .instant-apps-export-print .esri-legend--card__section:first-child {
-    border-left: none;
-  }
-
-  .instant-apps-export-print .esri-legend--card__service {
-    border: none;
-    flex: 0 1 auto;
-    break-inside: avoid;
-  }
-
-  .instant-apps-export-print .esri-legend--card {
-    border: none;
-    gap: 6pt 12pt;
-  }
-
-  .instant-apps-export-print .esri-legend--card:not(:first-child),
-  .instant-apps-export-print .esri-compass.esri-widget:not(:first-child) {
-    display: none;
-  }
-
-  .instant-apps-export-print .esri-legend--card__service-caption-container {
-    height: unset;
-    padding: 0;
-    border-bottom: none;
-  }
-
-  .instant-apps-export-print .esri-legend--card__service-caption-text {
-    padding-bottom: 4px;
-  }
-
-  .instant-apps-export-print__compass-container {
-    position: absolute;
-    top: 65px;
-    left: 15px;
-    background: #fff;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --calcite-ui-icon-color: #000;
-    border-radius: 50%;
-    height: fit-content;
-  }
-
-  .instant-apps-export-print__compass-container .esri-compass {
-    background: #fff;
-  }
-
-  .instant-apps-export-print__compass-container .esri-compass__icon.esri-icon-compass {
-    color: #000;
-  }
-
-  .instant-apps-export-print__compass-container.esri-compass.esri-widget--button {
-    background: #fff;
-  }
-
-  .instant-apps-export-print__scale-bar-container {
-    width: 100%;
-    position: absolute;
-    bottom: 15px;
-    margin: 0 15px;
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
-    color: #323232;
-    font-size: 10px;
-    padding: 0 4px;
-  }
-  
-  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label {
-    height: 10px;
-    padding: 0 2px;
-    line-height: 11px;
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__bar-container:nth-child(1n+3) {
-    display: none;
-  }
-
-  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__bar-container.esri-scale-bar__bar-container--line {
-    align-items: center;
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line {
-    background-color: rgba(255, 255, 255, 0.66);
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top {
-    width: var(--instant-apps-scale-bar-top) !important;
-    border-bottom: 2px solid #323232;
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom {
-    width: var(--instant-apps-scale-bar-bottom) !important;
-    border-top: 2px solid #323232;
-  }
-
-  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label-container--line {
-    position: unset;
-    margin: 0 2px;
-    background-color: rgba(255, 255, 255, 0.66);
-    height: 10px;
-    display: flex;
-    align-items: center;
-  }
-
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top:before,
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top:after,
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom:before,
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom:after {
-    background-color: #323232;
-    border-right: 2px solid #323232;
-  }
-
-  .instant-apps-export-print__popup-container .esri-feature-media__item-navigation {
-    display: none;
-  }
-
-  .instant-apps-export-print__popup-container .esri-feature-media__chart.esri-feature-media__chart--rendered * {
-    width: 100%!important;
-  }
-
-  .instant-apps-export-print__popup-content .esri-popup__content {
-    margin: 0;
-  }
-
-  .instant-apps-export-print__content-container {
-    display: flex;
-    gap: 24px;
-    break-inside: avoid;
-    break-before: auto;
-  }`;
-const screenshotStyling = `
-.screenshot-preview.hide, .hide {
-  display: none;
-}
-
-.screenshot-cursor {
-  cursor: crosshair;
-}
-
-.relative {
-  position: relative;
-}
-
-#screenshot-mask {
-  position: absolute;
-  background: var(--instant-apps-screenshot-mask-background);
-  border: var(--instant-apps-screenshot-mask-border);
-}
-
-.screenshot-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.screenshot-preview * {
-  box-sizing: border-box;
-}
-
-.screenshot-img-container img {
-  max-height: 75%;
-  max-width: 75%;
-  object-fit: contain;
-  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
-  margin-bottom: 0.5em;
-}
-
-.screenshot-img-container {
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  margin-bottom: 8px;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.screenshot-img-container calcite-button {
-  margin: 5px;
-}`;
-
-const instantAppsExportCss = ":host{display:block;--instant-apps-export-action-background:var(--calcite-color-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-color-foreground-2);--instant-apps-export-action-background-press:var(--calcite-color-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-color-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-color-text-1);--instant-apps-export-background:var(--calcite-color-foreground-1);--instant-apps-export-text-color:var(--calcite-color-text-1);--instant-apps-export-popover-width:250px}.instant-apps-export{height:100%}.instant-apps-export *{box-sizing:border-box}.instant-apps-export__popover-container,.instant-apps-export__inline-container{padding:12px;background:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export__popover-container{width:var(--instant-apps-export-popover-width)}.instant-apps-export calcite-action{height:var(--instant-apps-export-action-height);width:var(--instant-apps-export-action-width);--calcite-color-foreground-1:var(--instant-apps-export-action-background);--calcite-color-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-color-foreground-3:var(--instant-apps-export-action-background-press);--calcite-color-text-3:var(--instant-apps-export-action-icon-color);--calcite-color-text-1:var(--instant-apps-export-action-icon-hover-color)}.instant-apps-export .instant-apps-export-print{display:none}.instant-apps-export .instant-apps-export-print_img{display:flex;flex-flow:row wrap}.instant-apps-export__visually-hidden{position:absolute;top:0;z-index:-1;visibility:hidden}.instant-apps-export calcite-input{--calcite-color-foreground-1:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export calcite-popover{--calcite-color-foreground-1:var(--instant-apps-export-background)}.instant-apps-export calcite-switch{--calcite-color-foreground-1:#fff;--calcite-color-foreground-2:#f3f3f3}.instant-apps-export calcite-button:last-of-type{margin-top:0.5rem}.instant-apps-export .calcite-mode-dark calcite-switch{--calcite-color-foreground-1:#2b2b2b;--calcite-color-foreground-2:#202020}.instant-apps-export__compass-container.esri-widget{background:#fff;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.instant-apps-export__compass-container.esri-widget .esri-compass__icon.esri-icon-compass{color:#6e6e6e}.hide{display:none}.screenshotCursor{cursor:crosshair}";
-const InstantAppsExportStyle0 = instantAppsExportCss;
-
-const CSS = {
-    baseDark: 'instant-apps-export calcite-mode-dark',
-    baseLight: 'instant-apps-export calcite-mode-light',
-    inlineContainer: 'instant-apps-export__inline-container',
-    popoverContainer: 'instant-apps-export__popover-container',
-    hidden: 'instant-apps-export__visually-hidden',
-    print: {
-        pdfBase: 'instant-apps-export-print instant-apps-export-print__pdf',
-        imgBase: 'instant-apps-export-print instant-apps-export-print__img',
-        imgExtraContent: 'instant-apps-export-print__img--extra-content',
-        contentContainer: 'instant-apps-export-print__content-container',
-        extraContainer: 'instant-apps-export-print__extra-container',
-        legendContainer: 'instant-apps-export-print__legend-container',
-        compassContainer: 'instant-apps-export-print__compass-container',
-        scaleBarContainer: 'instant-apps-export-print__scale-bar-container',
-        popupContainer: 'instant-apps-export-print__popup-container',
-        popupContent: 'instant-apps-export-print__popup-content',
-        popupTitle: 'instant-apps-export-print__popup-title',
-        view: 'instant-apps-export-print__view',
-        viewContainer: 'instant-apps-export-print__view-container',
-        viewSection: 'instant-apps-export-print__view-section',
-        viewWrapper: 'instant-apps-export-print__view-wrapper',
-    },
-};
-const dragHandlerName = 'instant-app-export-drag';
-const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsExport extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.exportOutputUpdated = createEvent(this, "exportOutputUpdated", 7);
-        this.fileTypes = ['PDF', 'JPG', 'PNG'];
-        this.output = undefined;
-        this.beforeExport = () => Promise.resolve();
-        this.popoverIcon = 'export';
-        this.extraContent = undefined;
-        this.extraContentLabel = undefined;
-        this.headerTitle = '';
-        this.logoImage = '';
-        this.includeExtraContent = true;
-        this.showExtraContentInImg = false;
-        this.includeLegend = true;
-        this.includeMap = true;
-        this.includePopup = false;
-        this.includeFileFormat = true;
-        this.mode = 'popover';
-        this.popoverPositioning = 'absolute';
-        this.popoverPlacement = 'auto';
-        this.scale = 'm';
-        this.showHeaderTitle = true;
-        this.showIncludeLegend = true;
-        this.showIncludeMap = false;
-        this.showIncludePopup = true;
-        this.showScaleBar = false;
-        this.view = undefined;
-        this.maskBackground = 'rgba(255, 51, 0, 0.1)';
-        this.maskBorder = '2px dashed rgb(255, 51, 0)';
-        this.baseClass = CSS.baseLight;
-        this.exportIsLoading = undefined;
-        this.messages = undefined;
-        this.selectedFileType = 'PDF';
-    }
-    watchIncludeMap(includeMap) {
-        if (includeMap) {
-            this.updateLegend();
-        }
-    }
-    watchView() {
-        this.handleIncludePopup();
-    }
-    async componentWillLoad() {
-        this.baseClass = getMode(this.el) === 'dark' ? CSS.baseDark : CSS.baseLight;
-        getMessages(this);
-        await this.initializeModules();
-    }
-    componentDidLoad() {
-        this.printContainerEl.prepend(this.printEl);
-        this.handleIncludePopup();
-    }
-    async initializeModules() {
-        const [Handles, reactiveUtils] = await loadModules(['esri/core/Handles', 'esri/core/reactiveUtils']);
-        this.handles = new Handles();
-        this.reactiveUtils = reactiveUtils;
-        return Promise.resolve();
-    }
-    render() {
-        const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
-        const compass = this.renderCompass();
-        return (h(Host, { key: '9811c244faf2c794db3edaad498a9a902cb3faad' }, h("div", { key: 'cb880c04d46ec06a9588cedc0bd90ab62d25c0ac', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, h("div", { key: 'fc7ccd1eeb4b6a82bd9804d1aa73c4f242085a56', class: CSS.hidden }, compass))));
-    }
-    renderPopover() {
-        var _a, _b, _c;
-        const panel = this.renderPanel();
-        return [
-            h("calcite-popover", { referenceElement: "export-popover-btn", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.exportPopover, overlayPositioning: this.popoverPositioning, placement: this.popoverPlacement, autoClose: true, ref: (el) => (this.popoverEl = el) }, panel),
-            h("calcite-action", { id: "export-popover-btn", alignment: "center", icon: this.popoverIcon, scale: this.scale, title: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.exportBtn, text: (_c = this.messages) === null || _c === void 0 ? void 0 : _c.exportBtn }),
-        ];
-    }
-    renderPanel() {
-        var _a, _b, _c;
-        const headerTitle = this.showHeaderTitle ? this.renderTitle() : null;
-        const includeExtraContent = this.extraContent != null ? this.renderSwitch('includeExtraContent', this.extraContentLabel, this.selectedFileType !== 'PDF' && !this.showExtraContentInImg) : null;
-        const includeMap = this.showIncludeMap ? this.renderSwitch('includeMap', undefined, this.selectedFileType !== 'PDF') : null;
-        const options = this.includeMap ? this.renderMapOptions() : null;
-        const fileType = this.includeFileFormat ? this.renderSelectFileType() : null;
-        const print = this.selectedFileType === 'PDF' ? this.renderPrint() : this.renderImg();
-        const panelClass = this.mode === 'inline' ? CSS.inlineContainer : CSS.popoverContainer;
-        return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, fileType, this.includeMap ? (h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this, true), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), disabled: this.exportIsLoading }, this.selectedFileType === 'PDF' ? (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export : (_c = this.messages) === null || _c === void 0 ? void 0 : _c.preview), print));
-    }
-    renderTitle() {
-        var _a;
-        return (h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
-            _a.title, h("calcite-input", { value: this.headerTitle, onCalciteInputInput: this.updateHeaderTitle.bind(this) })));
-    }
-    renderSwitch(value, label, disabled) {
-        var _a;
-        const checked = this[value];
-        const title = label != null ? label : (_a = this.messages) === null || _a === void 0 ? void 0 : _a[value];
-        return (h("calcite-label", { layout: "inline-space-between" }, title, h("calcite-switch", { checked: checked, value: value, onCalciteSwitchChange: this.optionOnChange.bind(this), disabled: disabled })));
-    }
-    renderSelectFileType() {
-        var _a;
-        return (h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
-            _a.fileType, h("calcite-select", { label: "", onCalciteSelectChange: this.handleSelectFileType.bind(this) }, this.fileTypes.map(fileType => (h("calcite-option", { value: fileType, selected: fileType === this.selectedFileType }, fileType))))));
-    }
-    renderMapOptions() {
-        const includeLegend = this.showIncludeLegend ? this.renderSwitch('includeLegend') : null;
-        const includePopup = this.showIncludePopup ? this.renderSwitch('includePopup') : null;
-        return (h("div", null, includeLegend, includePopup));
-    }
-    renderPrint() {
-        const printMap = this.includeMap ? this.renderPrintMap() : null;
-        const extraContent = this.renderExtraContent();
-        const legend = this.includeMap && this.showIncludeLegend ? this.renderLegend() : null;
-        const popup = this.includeMap && this.showIncludePopup ? this.renderPopup() : null;
-        return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.pdfBase, ref: (el) => (this.printEl = el) }, printMap, legend, h("div", { class: CSS.print.contentContainer }, popup, extraContent))));
-    }
-    renderPrintMap() {
-        return (h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? (h("instant-apps-header", { logoImage: this.logoImage, logoScale: "s", titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" })) : null, h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
-    }
-    renderLegend() {
-        return h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
-    }
-    renderCompass() {
-        return h("div", { class: CSS.print.compassContainer, ref: (el) => (this.compassContainerEl = el) });
-    }
-    renderPopup() {
-        return (h("div", { class: CSS.print.popupContainer, ref: (el) => (this.popupContainerEl = el) }, h("div", { ref: (el) => (this.popupTitleEl = el), class: CSS.print.popupTitle }), h("div", { ref: (el) => (this.popupContentEl = el), class: CSS.print.popupContent })));
-    }
-    renderExtraContent() {
-        return h("div", { class: CSS.print.extraContainer, id: "export-content", ref: (el) => (this.extraContainerEl = el) });
-    }
-    renderImg() {
-        const printMap = this.includeMap ? this.renderPrintMap() : null;
-        const legend = this.includeMap && this.showIncludeLegend ? this.renderLegend() : null;
-        let content;
-        if (this.includeMap && this.showIncludePopup) {
-            content = this.renderPopup();
-        }
-        else if (this.showExtraContentInImg && this.extraContent != null && this.includeExtraContent) {
-            content = this.renderExtraContent();
-        }
-        return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.imgBase, ref: (el) => (this.printEl = el) }, printMap, legend, content)));
-    }
-    optionOnChange(e) {
-        const { checked, value } = e.target;
-        this[value] = checked;
-        this.updateExportOutput();
-    }
-    updateHeaderTitle(e) {
-        this.headerTitle = e.target.value;
-        this.updateExportOutput();
-    }
-    async exportOnClick() {
-        this.removeScreenshotElements();
-        await this.beforeExport();
-        if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
-            this.viewWrapperEl.append(this.compassContainerEl);
-        }
-        this.handleViewExportOnClick();
-        if (this.popoverEl != null) {
-            this.popoverEl.open = false;
-        }
-    }
-    async exportPreviewOnClick() {
-        if (this.selectedFileType === 'PDF') {
-            await this.exportPDF();
-        }
-        else {
-            this.exportImg();
-        }
-    }
-    async exportPDF() {
-        this.removeScreenshotElements();
-        await this.beforeExport();
-        if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
-            this.viewWrapperEl.append(this.compassContainerEl);
-        }
-        this.handleViewExportOnClick();
-        if (this.popoverEl != null) {
-            this.popoverEl.open = false;
-        }
-    }
-    exportImg() {
-        var _a;
-        this.resetPopupVisibility();
-        if (this.dataUrl == null)
-            return;
-        const downloadLink = document.createElement('a');
-        downloadLink.id = 'download-link';
-        downloadLink.href = this.dataUrl;
-        downloadLink.download = (_a = this.headerTitle) !== null && _a !== void 0 ? _a : document.title;
-        downloadLink.click();
-        this.dataUrl = null;
-        this.exportIsLoading = false;
-        this.removeScreenshotElements();
-        this.resetPrintContent();
-    }
-    async handleViewExportOnClick() {
-        if (this.view != null) {
-            this.addPrintStyling();
-            document.body.prepend(this.printEl);
-            this.handleExtraContent();
-            if (this.includeMap) {
-                this.updateScaleBar();
-                this.viewScreenshot();
-                this.handleImgLoaded();
-            }
-            else {
-                this.handleImgLoaded();
-            }
-        }
-        else {
-            if (this.popoverEl != null) {
-                this.popoverEl.open = false;
-            }
-        }
-    }
-    addPrintStyling() {
-        if (this.printStyleEl == null) {
-            this.printStyleEl = document.createElement('style');
-            this.printStyleEl.innerHTML = printStyling;
-            document.body.prepend(this.printStyleEl);
-        }
-    }
-    handleImgLoaded() {
-        this.exportIsLoading = true;
-        setTimeout(() => {
-            if (this.selectedFileType === 'PDF') {
-                this.exportIsLoading = false;
-            }
-            this.setupViewPrintElements();
-        }, 1500);
-    }
-    handleExtraContent() {
-        const extraContainerEl = this.printEl.querySelector('#export-content');
-        if (extraContainerEl != null) {
-            extraContainerEl.innerHTML = '';
-            const hasExtraContent = this.extraContent != null && this.includeExtraContent;
-            const imgAndFeatureVisible = this.selectedFileType !== 'PDF' && this.showExtraContentInImg && hasExtraContent;
-            this.printEl.classList.toggle(CSS.print.imgExtraContent, imgAndFeatureVisible);
-            if (hasExtraContent) {
-                extraContainerEl.style.display = 'block';
-                extraContainerEl.append(this.extraContent.cloneNode(true));
-            }
-            else {
-                extraContainerEl.style.display = 'none';
-            }
-        }
-        else if (this.showExtraContentInImg && this.selectedFileType !== 'PDF' && !this.includeExtraContent) {
-            this.printEl.classList.toggle(CSS.print.imgExtraContent, false);
-        }
-    }
-    resetPrintContent() {
-        var _a, _b, _c;
-        if (this.view != null) {
-            this.screenshot = null;
-            (_a = this.printContainerEl) === null || _a === void 0 ? void 0 : _a.prepend(this.printEl);
-            (_b = this.printStyleEl) === null || _b === void 0 ? void 0 : _b.remove();
-            (_c = this.tmpPopupTitleEl) === null || _c === void 0 ? void 0 : _c.remove();
-            this.printStyleEl = undefined;
-            const extraContainerEl = this.printEl.querySelector('#export-content');
-            if (extraContainerEl) {
-                extraContainerEl.innerHTML = '';
-            }
-        }
-    }
-    async updatePopupToPrint() {
-        var _a, _b;
-        if (this.view == null || this.popupContainerEl == null)
-            return;
-        this.popupContainerEl.style.display = this.includePopup && this.view.popup.visible ? 'block' : 'none';
-        this.checkPopupOpen();
-        const popupVisible = this.includePopup && (this.view.popup.visible || this.popupHiddenByMapArea) && this.view.popup.selectedFeature != null;
-        this.printEl.classList.toggle(CSS.print.imgExtraContent, this.selectedFileType !== 'PDF' && popupVisible);
-        if (popupVisible) {
-            const heading = document.createElement(`h${(_a = this.view.popup.headingLevel) !== null && _a !== void 0 ? _a : 2}`);
-            heading.innerHTML = (_b = this.view.popup.title) !== null && _b !== void 0 ? _b : '';
-            heading.className = 'esri-widget__heading esri-popup__header-title';
-            if (this.popupTitleEl == null) {
-                this.tmpPopupTitleEl = document.createElement('div');
-                this.tmpPopupTitleEl.prepend(heading);
-                this.tmpPopupTitleEl.style.display = this.view.popup.title ? 'block' : 'none';
-                this.popupContainerEl.prepend(this.tmpPopupTitleEl);
-            }
-            else {
-                this.popupTitleEl.style.display = this.view.popup.title ? 'block' : 'none';
-                this.popupTitleEl.innerHTML = '';
-                this.popupTitleEl.prepend(heading);
-            }
-        }
-    }
-    updateExportOutput() {
-        this.output = {};
-        if (this.showHeaderTitle) {
-            this.output.headerTitle = this.headerTitle;
-        }
-        if (this.showIncludeLegend) {
-            this.output.includeLegend = this.includeLegend;
-        }
-        if (this.showIncludeMap) {
-            this.output.includeMap = this.includeMap;
-        }
-        if (this.showIncludePopup) {
-            this.output.includePopup = this.includePopup;
-        }
-        this.exportOutputUpdated.emit();
-    }
-    setupViewPrintElements() {
-        if (this.view != null) {
-            this.handleLegendSetup();
-            if (this.selectedFileType === 'PDF') {
-                const title = document.title;
-                if (this.showHeaderTitle && this.headerTitle) {
-                    document.title = this.headerTitle;
-                }
-                window.print();
-                document.title = title;
-                setTimeout(() => {
-                    this.resetPrintContent();
-                }, 1000);
-            }
-            else {
-                this.convertToImage();
-            }
-        }
-    }
-    async convertToImage() {
-        const options = { backgroundColor: '#FFF', skipFonts: true };
-        let data = '';
-        try {
-            if (this.selectedFileType === 'JPG') {
-                data = await toJpeg(this.printEl, options);
-            }
-            else {
-                data = await toPng(this.printEl, options);
-            }
-        }
-        catch (_a) {
-            this.logoImage = undefined;
-            await new Promise(resolve => setTimeout(resolve, 500));
-            data = await toJpeg(this.printEl, options);
-        }
-        finally {
-            this.handleGetImage(data);
-        }
-    }
-    handleGetImage(dataUrl) {
-        var _a;
-        this.resetPrintContent();
-        if (!dataUrl)
-            return;
-        this.dataUrl = dataUrl;
-        this.setMapAreaOnClick(false);
-        this.showPreview(dataUrl);
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.container.classList.remove('screenshot-cursor');
-        this.setMaskPosition(null);
-    }
-    handleLegendSetup() {
-        var _a;
-        if (this.showIncludeLegend && this.view != null && this.includeMap && this.legendContainerEl != null) {
-            const hasActiveLayers = this.legend != null && ((_a = this.legend.activeLayerInfos) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            this.legendContainerEl.style.display = this.includeLegend && hasActiveLayers ? 'block' : 'none';
-        }
-    }
-    handleWidgetCreation() {
-        if (this.includeMap) {
-            this.handleLegendCreation();
-            this.handleCompassCreation();
-            this.updatePopupToPrint();
-        }
-    }
-    handleIncludePopup() {
-        var _a, _b;
-        if (this.showIncludePopup) {
-            const handleId = 'includePopup';
-            (_a = this.handles) === null || _a === void 0 ? void 0 : _a.remove(handleId);
-            (_b = this.reactiveUtils) === null || _b === void 0 ? void 0 : _b.whenOnce(() => { var _a; return (_a = this.view) === null || _a === void 0 ? void 0 : _a.ready; }).then(() => {
-                var _a;
-                (_a = this.handles) === null || _a === void 0 ? void 0 : _a.add(this.reactiveUtils.watch(() => { var _a, _b; return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.popup) === null || _b === void 0 ? void 0 : _b.visible; }, (visible) => {
-                    if (this.settingMapArea)
-                        return;
-                    this.includePopup = visible;
-                }), handleId);
-            });
-        }
-    }
-    handleLegendCreation() {
-        var _a, _b, _c, _d, _e;
-        if (this.view != null && this.showIncludeLegend && this.legendContainerEl != null) {
-            const map = this.view.map;
-            const legendMap = (_b = (_a = this.legend) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) != null && ((_d = map === null || map === void 0 ? void 0 : map.portalItem) === null || _d === void 0 ? void 0 : _d.id) === ((_e = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _e === void 0 ? void 0 : _e.id);
-            if (!checkId) {
-                this.updateLegend();
-            }
-        }
-    }
-    updateLegend() {
-        var _a;
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
-            if (this.legend != null) {
-                this.legend.destroy();
-                this.legend = null;
-            }
-            if (this.legendContainerEl != null) {
-                this.legendContainerEl.innerHTML = '';
-                const legendCont = document.createElement('div');
-                this.legendContainerEl.append(legendCont);
-                const [Legend] = await loadModules(['esri/widgets/Legend']);
-                this.legend = new Legend({
-                    container: legendCont,
-                    view,
-                    respectLayerDefinitionExpression: true,
-                    style: {
-                        type: 'card',
-                        layout: 'side-by-side',
-                    },
-                });
-            }
-        });
-    }
-    handleCompassCreation() {
-        var _a, _b, _c, _d;
-        if (this.view != null && this.compassContainerEl != null) {
-            const map = this.view.map;
-            const compassMap = (_b = (_a = this.compass) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = compassMap === null || compassMap === void 0 ? void 0 : compassMap.portalItem) === null || _d === void 0 ? void 0 : _d.id);
-            if (!checkId) {
-                this.updateCompass();
-            }
-        }
-    }
-    updateCompass() {
-        var _a;
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
-            var _a;
-            (_a = this.compass) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.compass = null;
-            const container = document.createElement('div');
-            this.compassContainerEl.append(container);
-            const [Compass] = await loadModules(['esri/widgets/Compass']);
-            this.compass = new Compass({ container, view });
-        });
-    }
-    updateScaleBar() {
-        if (this.scaleBarContainerEl && this.view != null) {
-            this.scaleBarContainerEl.innerHTML = '';
-            if (this.showScaleBar) {
-                const widgets = this.view.ui.getComponents();
-                const scaleBar = widgets === null || widgets === void 0 ? void 0 : widgets.find(({ container }) => { var _a; return (_a = container === null || container === void 0 ? void 0 : container.className) === null || _a === void 0 ? void 0 : _a.includes('esri-scale-bar'); });
-                if ((scaleBar === null || scaleBar === void 0 ? void 0 : scaleBar.container) != null && typeof scaleBar.container !== 'string') {
-                    this.scaleBarContainerEl.append(scaleBar.container.cloneNode(true));
-                }
-            }
-        }
-    }
-    async viewScreenshot() {
-        var _a;
-        if (this.view != null && this.includeMap) {
-            if (this.screenshot == null) {
-                (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('instant-apps-export-print__scale-bar-container--position', this.view.width > 1000);
-                this.screenshot = await this.view.takeScreenshot({
-                    width: this.view.width * 2,
-                    height: this.view.height * 2,
-                });
-            }
-            this.handleScaleBarSize();
-            if (this.viewEl != null && this.viewWrapperEl != null) {
-                const { height, width } = this.screenshot.data;
-                if (height > width) {
-                    this.setMaxRowHeightOnViewContainer();
-                }
-                else {
-                    this.setMaxWidthOnViewContainer();
-                }
-                this.viewEl.src = this.screenshot.dataUrl;
-            }
-        }
-    }
-    setMaxRowHeightOnViewContainer() {
-        if (this.selectedFileType === 'PDF') {
-            this.printEl.style.gridTemplateRows = 'minmax(auto, 70%)';
-        }
-        this.viewEl.style.height = '100%';
-        this.viewEl.style.width = '';
-        this.viewWrapperEl.style.height = '100%';
-        this.viewWrapperEl.style.width = 'fit-content';
-    }
-    setMaxWidthOnViewContainer() {
-        this.printEl.style.gridTemplateRows = '';
-        this.viewEl.style.width = '100%';
-        this.viewEl.style.height = '';
-        this.viewWrapperEl.style.height = 'fit-content';
-        this.viewWrapperEl.style.width = '100%';
-    }
-    checkPopupOpen() {
-        if (this.view != null) {
-            const popupContainer = this.view.popup.container;
-            const popup = popupContainer === null || popupContainer === void 0 ? void 0 : popupContainer.querySelector('.esri-popup .esri-feature__main-container');
-            if (popup != null) {
-                const popupCanvas = popup.querySelectorAll('canvas');
-                this.popupContentEl.innerHTML = '';
-                this.popupContentEl.append(popup.cloneNode(true));
-                const popContCanvas = this.popupContentEl.querySelectorAll('canvas');
-                popupCanvas.forEach((canvas, key) => {
-                    var _a;
-                    const image = canvas.toDataURL();
-                    const img = document.createElement('img');
-                    img.src = image;
-                    const style = canvas.getAttribute('style');
-                    if (style) {
-                        img.setAttribute('style', style);
-                    }
-                    const popCanvas = popContCanvas[key];
-                    if (popCanvas != null) {
-                        popCanvas.replaceWith(img);
-                        if (document.querySelector("link[href*='esri/themes/dark/main.css']") && ((_a = img.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) != null) {
-                            img.parentElement.style.background = '#242424';
-                            img.parentElement.parentElement.style.background = '#242424';
-                        }
-                    }
-                });
-            }
-        }
-    }
-    createScreenshot() {
-        var _a, _b, _c;
-        if (this.view != null) {
-            this.screenshotPreview = document.createElement('div');
-            this.screenshotPreview.className = 'screenshot-preview hide';
-            this.screenshotImgContainer = document.createElement('div');
-            this.screenshotImgContainer.className = 'screenshot-img-container';
-            this.screenshotImg = document.createElement('img');
-            const screenshotBtnContainer = document.createElement('div');
-            const exportBtn = document.createElement('calcite-button');
-            const returnBtn = document.createElement('calcite-button');
-            exportBtn.innerHTML = this.selectedFileType === 'PDF' ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.downloadImage;
-            returnBtn.innerHTML = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.returnToMap;
-            returnBtn.appearance = 'outline-fill';
-            exportBtn.onclick = this.exportPreviewOnClick.bind(this);
-            returnBtn.onclick = this.screenshotReturn.bind(this);
-            screenshotBtnContainer.append(returnBtn, exportBtn);
-            this.screenshotImgContainer.append(this.screenshotImg, screenshotBtnContainer);
-            this.screenshotPreview.append(this.screenshotImgContainer);
-            this.view.container.append(this.screenshotPreview);
-        }
-    }
-    createMaskDiv() {
-        if (this.view != null) {
-            this.maskDivEl = document.createElement('div');
-            this.maskDivEl.id = 'screenshot-mask';
-            this.maskDivEl.className = 'hide screenshot-cursor';
-            this.maskDivEl.style.setProperty('--instant-apps-screenshot-mask-background', this.maskBackground);
-            this.maskDivEl.style.setProperty('--instant-apps-screenshot-mask-border', this.maskBorder);
-            this.screenshotStyle = document.createElement('style');
-            this.screenshotStyle.innerHTML = screenshotStyling;
-            this.view.container.append(this.screenshotStyle);
-            this.view.container.append(this.maskDivEl);
-        }
-    }
-    screenshotReturn() {
-        this.removeScreenshotElements();
-        this.exportIsLoading = false;
-        this.screenshot = null;
-        this.resetPopupVisibility();
-    }
-    setMapAreaOnClick(handlePopup) {
-        if (this.view == null)
-            return;
-        this.settingMapArea = true;
-        if (handlePopup) {
-            if (this.view.popup.visible) {
-                this.popupHiddenByMapArea = true;
-                const popupContainer = this.view.popup.container;
-                popupContainer.style.display = 'none';
-            }
-        }
-        this.exportIsLoading = true;
-        this.createMaskDiv();
-        this.createScreenshot();
-        this.view.container.classList.add('screenshot-cursor', 'relative');
-        this.view.addHandles(this.view.on('drag', async (event) => {
-            if (this.view == null)
-                return;
-            event.stopPropagation();
-            if (event.action !== 'end') {
-                this.updateMaskSize(event);
-            }
-            else {
-                this.maskScreenshot();
-            }
-        }), dragHandlerName);
-    }
-    updateMaskSize(event) {
-        if (this.view != null) {
-            const xmin = this.clamp(Math.min(event.origin.x, event.x), 0, this.view.width);
-            const xmax = this.clamp(Math.max(event.origin.x, event.x), 0, this.view.width);
-            const ymin = this.clamp(Math.min(event.origin.y, event.y), 0, this.view.height);
-            const ymax = this.clamp(Math.max(event.origin.y, event.y), 0, this.view.height);
-            this.area = {
-                x: xmin,
-                y: ymin,
-                width: xmax - xmin,
-                height: ymax - ymin,
-            };
-            this.setMaskPosition(this.area);
-        }
-    }
-    maskScreenshot() {
-        var _a;
-        if (this.view != null && this.area != null) {
-            this.view.removeHandles(dragHandlerName);
-            const height = this.area.height;
-            const width = this.area.width;
-            if (this.showScaleBar) {
-                const moveSBUnit = this.view.width > 1000 && this.view.width * 0.75 < width;
-                (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('instant-apps-export-print__scale-bar-container--position', moveSBUnit);
-            }
-            this.view.takeScreenshot({ area: this.area, width: width * 2, height: height * 2, format: 'jpg' }).then(screenshot => {
-                var _a;
-                this.screenshot = screenshot;
-                (_a = this.view) === null || _a === void 0 ? void 0 : _a.container.classList.remove('screenshot-cursor');
-                this.setMaskPosition(null);
-                if (this.selectedFileType === 'PDF') {
-                    this.showPreview(screenshot === null || screenshot === void 0 ? void 0 : screenshot.dataUrl);
-                    this.resetPopupVisibility();
-                }
-                else {
-                    if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
-                        this.viewWrapperEl.append(this.compassContainerEl);
-                    }
-                    this.handleViewExportOnClick();
-                    if (this.popoverEl != null) {
-                        this.popoverEl.open = false;
-                    }
-                }
-            });
-        }
-    }
-    setMaskPosition(area) {
-        if (area != null) {
-            this.maskDivEl.classList.remove('hide');
-            this.maskDivEl.style.left = `${area.x}px`;
-            this.maskDivEl.style.top = `${area.y}px`;
-            this.maskDivEl.style.width = `${area.width}px`;
-            this.maskDivEl.style.height = `${area.height}px`;
-        }
-        else {
-            this.maskDivEl.remove();
-        }
-    }
-    clamp(value, from, to) {
-        return value < from ? from : value > to ? to : value;
-    }
-    showPreview(dataUrl) {
-        if (!dataUrl)
-            return;
-        this.screenshotPreview.classList.remove('hide');
-        if (this.screenshotImg != null) {
-            this.screenshotImg.src = dataUrl;
-        }
-    }
-    handleScaleBarSize() {
-        var _a;
-        if (this.showScaleBar && ((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
-            if (this.scaleBarContainerEl != null) {
-                const topBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--top');
-                const bottomBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--bottom');
-                this.setScalebarWidth(topBar, 'top');
-                this.setScalebarWidth(bottomBar, 'bottom');
-            }
-        }
-    }
-    setScalebarWidth(bar, position) {
-        var _a;
-        if (bar != null && this.screenshot != null) {
-            const width = this.screenshot.data.width / 2;
-            const barWidth = Number(bar.style.width.replace('px', ''));
-            const widthPercentage = (barWidth / width) * 100;
-            (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.style.setProperty(`--instant-apps-scale-bar-${position}`, `${widthPercentage}%`);
-        }
-    }
-    removeScreenshotElements() {
-        var _a, _b, _c;
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.removeHandles(dragHandlerName);
-        (_b = this.screenshotPreview) === null || _b === void 0 ? void 0 : _b.remove();
-        (_c = this.screenshotStyle) === null || _c === void 0 ? void 0 : _c.remove();
-    }
-    resetPopupVisibility() {
-        if (this.view && this.settingMapArea && this.popupHiddenByMapArea) {
-            const popupContainer = this.view.popup.container;
-            popupContainer.style.display = '';
-        }
-        this.settingMapArea = false;
-        this.popupHiddenByMapArea = false;
-    }
-    handleSelectFileType(e) {
-        const node = e.target;
-        this.selectedFileType = node.value;
-        if (this.selectedFileType === 'PDF') {
-            this.includeMap = this.pdfIncludeMap;
-            if (!this.showExtraContentInImg) {
-                this.includeExtraContent = this.pdfIncludeExtraContent;
-            }
-        }
-        else {
-            this.pdfIncludeMap = this.includeMap;
-            this.includeMap = true;
-            if (!this.showExtraContentInImg) {
-                this.pdfIncludeExtraContent = this.includeExtraContent;
-                this.includeMap = true;
-                this.includeExtraContent = false;
-            }
-        }
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "includeMap": ["watchIncludeMap"],
-        "view": ["watchView"]
-    }; }
-    static get style() { return InstantAppsExportStyle0; }
-}, [1, "instant-apps-export", {
-        "output": [1040],
-        "beforeExport": [16],
-        "popoverIcon": [1, "popover-icon"],
-        "extraContent": [16],
-        "extraContentLabel": [1, "extra-content-label"],
-        "headerTitle": [1025, "header-title"],
-        "logoImage": [1025, "logo-image"],
-        "includeExtraContent": [1028, "include-extra-content"],
-        "showExtraContentInImg": [4, "show-extra-content-in-img"],
-        "includeLegend": [1028, "include-legend"],
-        "includeMap": [1028, "include-map"],
-        "includePopup": [1028, "include-popup"],
-        "includeFileFormat": [1028, "include-file-format"],
-        "mode": [513],
-        "popoverPositioning": [1, "popover-positioning"],
-        "popoverPlacement": [1, "popover-placement"],
-        "scale": [1],
-        "showHeaderTitle": [4, "show-header-title"],
-        "showIncludeLegend": [4, "show-include-legend"],
-        "showIncludeMap": [4, "show-include-map"],
-        "showIncludePopup": [4, "show-include-popup"],
-        "showScaleBar": [4, "show-scale-bar"],
-        "view": [16],
-        "maskBackground": [1, "mask-background"],
-        "maskBorder": [1, "mask-border"],
-        "baseClass": [32],
-        "exportIsLoading": [32],
-        "messages": [32],
-        "selectedFileType": [32]
-    }, undefined, {
-        "includeMap": ["watchIncludeMap"],
-        "view": ["watchView"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["instant-apps-export", "instant-apps-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "instant-apps-export":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, InstantAppsExport$1);
-            }
-            break;
-        case "instant-apps-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const InstantAppsExport = InstantAppsExport$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { InstantAppsExport, defineCustomElement };