@esri/solutions-components 0.10.35 → 0.10.37

package/dist/cjs/instant-apps-export.cjs.entry.js

@@ -15,6 +15,838 @@ require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./languageUtil-a3e1eafd.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 {
@@ -39,15 +871,27 @@ const printStyling = `
 
 
   .instant-apps-export-print {
-    height: 100%;
-    width: 100%;
     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;
-    --esri-calcite-mode-name: "light";
+  }
+
+  .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 * {
@@ -65,30 +909,55 @@ const printStyling = `
     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;
-    border: 2pt solid #323232;
     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__popup-container {
     height: min-content;
-    max-width: 350px;
+    max-width: 325px;
     display: none;
     color: #323232;
     background: #fff;
-    border: 1pt solid #323232;
     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;
   }
@@ -108,6 +977,12 @@ const printStyling = `
     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;
   }
@@ -117,7 +992,7 @@ const printStyling = `
     color: #323232;
   }
 
-  .instant-apps-export-print__popup-content * {
+  .instant-apps-export-print__popup-content *, .instant-apps-export-print__img .esri-feature.esri-widget * {
     color: #323232;
   }
 
@@ -306,7 +1181,6 @@ const screenshotStyling = `
   max-height: 75%;
   max-width: 75%;
   object-fit: contain;
-  border: 10px solid white;
   box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
   margin-bottom: 0.5em;
 }
@@ -326,7 +1200,7 @@ const screenshotStyling = `
   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__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 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 = {
@@ -336,7 +1210,9 @@ const CSS = {
     popoverContainer: 'instant-apps-export__popover-container',
     hidden: 'instant-apps-export__visually-hidden',
     print: {
-        base: 'instant-apps-export-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',
@@ -356,16 +1232,20 @@ const InstantAppsExport = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.exportOutputUpdated = index.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';
@@ -381,6 +1261,7 @@ const InstantAppsExport = class {
         this.baseClass = CSS.baseLight;
         this.exportIsLoading = undefined;
         this.messages = undefined;
+        this.selectedFileType = 'PDF';
     }
     watchIncludeMap(includeMap) {
         if (includeMap) {
@@ -408,7 +1289,7 @@ const InstantAppsExport = class {
     render() {
         const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
         const compass = this.renderCompass();
-        return (index.h(index.Host, { key: 'fb3a0e79a4cdf4d6424677930ef57487a49f323e' }, index.h("div", { key: 'def184b77f3710ae51f32a094ff3c7e8bc44f648', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, index.h("div", { key: '5fb0360e9fcbc112e640e1c8c877cfad59cadd14', class: CSS.hidden }, compass))));
+        return (index.h(index.Host, { key: '9811c244faf2c794db3edaad498a9a902cb3faad' }, index.h("div", { key: 'cb880c04d46ec06a9588cedc0bd90ab62d25c0ac', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, index.h("div", { key: 'fc7ccd1eeb4b6a82bd9804d1aa73c4f242085a56', class: CSS.hidden }, compass))));
     }
     renderPopover() {
         var _a, _b, _c;
@@ -419,25 +1300,31 @@ const InstantAppsExport = class {
         ];
     }
     renderPanel() {
-        var _a, _b;
+        var _a, _b, _c;
         const headerTitle = this.showHeaderTitle ? this.renderTitle() : null;
-        const includeExtraContent = this.extraContent != null ? this.renderSwitch('includeExtraContent', this.extraContentLabel) : null;
-        const includeMap = this.showIncludeMap ? this.renderSwitch('includeMap') : 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 print = this.renderPrint();
+        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 (index.h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, this.includeMap ? (index.h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, index.h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), disabled: this.exportIsLoading }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export), print));
+        return (index.h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, fileType, this.includeMap ? (index.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, index.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 (index.h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
             _a.title, index.h("calcite-input", { value: this.headerTitle, onCalciteInputInput: this.updateHeaderTitle.bind(this) })));
     }
-    renderSwitch(value, label) {
+    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 (index.h("calcite-label", { layout: "inline-space-between" }, title, index.h("calcite-switch", { checked: checked, value: value, onCalciteSwitchChange: this.optionOnChange.bind(this) })));
+        return (index.h("calcite-label", { layout: "inline-space-between" }, title, index.h("calcite-switch", { checked: checked, value: value, onCalciteSwitchChange: this.optionOnChange.bind(this), disabled: disabled })));
+    }
+    renderSelectFileType() {
+        var _a;
+        return (index.h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
+            _a.fileType, index.h("calcite-select", { onCalciteSelectChange: this.handleSelectFileType.bind(this) }, this.fileTypes.map(fileType => (index.h("calcite-option", { value: fileType, selected: fileType === this.selectedFileType }, fileType))))));
     }
     renderMapOptions() {
         const includeLegend = this.showIncludeLegend ? this.renderSwitch('includeLegend') : null;
@@ -449,10 +1336,10 @@ const InstantAppsExport = class {
         const extraContent = this.renderExtraContent();
         const legend = this.includeMap && this.showIncludeLegend ? this.renderLegend() : null;
         const popup = this.includeMap && this.showIncludePopup ? this.renderPopup() : null;
-        return (index.h("div", { ref: (el) => (this.printContainerEl = el) }, index.h("div", { class: CSS.print.base, ref: (el) => (this.printEl = el) }, printMap, legend, index.h("div", { class: CSS.print.contentContainer }, popup, extraContent))));
+        return (index.h("div", { ref: (el) => (this.printContainerEl = el) }, index.h("div", { class: CSS.print.pdfBase, ref: (el) => (this.printEl = el) }, printMap, legend, index.h("div", { class: CSS.print.contentContainer }, popup, extraContent))));
     }
     renderPrintMap() {
-        return (index.h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, index.h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? index.h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, index.h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), index.h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
+        return (index.h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, index.h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? (index.h("instant-apps-header", { logoImage: this.logoImage, logoScale: "s", titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" })) : null, index.h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), index.h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
     }
     renderLegend() {
         return index.h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -466,6 +1353,18 @@ const InstantAppsExport = class {
     renderExtraContent() {
         return index.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 (index.h("div", { ref: (el) => (this.printContainerEl = el) }, index.h("div", { class: CSS.print.imgBase, ref: (el) => (this.printEl = el) }, printMap, legend, content)));
+    }
     optionOnChange(e) {
         const { checked, value } = e.target;
         this[value] = checked;
@@ -486,6 +1385,40 @@ const InstantAppsExport = class {
             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();
@@ -493,7 +1426,6 @@ const InstantAppsExport = class {
             this.handleExtraContent();
             if (this.includeMap) {
                 this.updateScaleBar();
-                this.updatePopupToPrint();
                 this.viewScreenshot();
                 this.handleImgLoaded();
             }
@@ -517,7 +1449,9 @@ const InstantAppsExport = class {
     handleImgLoaded() {
         this.exportIsLoading = true;
         setTimeout(() => {
-            this.exportIsLoading = undefined;
+            if (this.selectedFileType === 'PDF') {
+                this.exportIsLoading = false;
+            }
             this.setupViewPrintElements();
         }, 1500);
     }
@@ -525,7 +1459,10 @@ const InstantAppsExport = class {
         const extraContainerEl = this.printEl.querySelector('#export-content');
         if (extraContainerEl != null) {
             extraContainerEl.innerHTML = '';
-            if (this.extraContent != null && this.includeExtraContent) {
+            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));
             }
@@ -533,13 +1470,17 @@ const InstantAppsExport = class {
                 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;
+        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) {
@@ -549,20 +1490,26 @@ const InstantAppsExport = class {
     }
     async updatePopupToPrint() {
         var _a, _b;
-        if (this.view != null) {
-            if (this.popupContainerEl != null) {
-                this.popupContainerEl.style.display = this.includePopup && this.view.popup.visible ? 'block' : 'none';
-                this.checkPopupOpen();
-            }
-            if (this.view.popup.visible && this.view.popup.selectedFeature != null) {
-                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.popupTitleEl.style.display = this.view.popup.title ? 'block' : 'none';
-                    this.popupTitleEl.innerHTML = '';
-                    this.popupTitleEl.prepend(heading);
-                }
+        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);
             }
         }
     }
@@ -585,17 +1532,40 @@ const InstantAppsExport = class {
     setupViewPrintElements() {
         if (this.view != null) {
             this.handleLegendSetup();
-            const title = document.title;
-            if (this.showHeaderTitle && this.headerTitle) {
-                document.title = this.headerTitle;
+            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();
             }
-            window.print();
-            document.title = title;
-            setTimeout(() => {
-                this.resetPrintContent();
-            }, 1000);
         }
     }
+    convertToImage() {
+        const options = { backgroundColor: '#FFF', skipFonts: true };
+        if (this.selectedFileType === 'JPG') {
+            toJpeg(this.printEl, options).then(this.handleGetImage.bind(this));
+        }
+        else {
+            toPng(this.printEl, options).then(this.handleGetImage.bind(this));
+        }
+    }
+    handleGetImage(dataUrl) {
+        var _a;
+        this.resetPrintContent();
+        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) {
@@ -607,6 +1577,7 @@ const InstantAppsExport = class {
         if (this.includeMap) {
             this.handleLegendCreation();
             this.handleCompassCreation();
+            this.updatePopupToPrint();
         }
     }
     handleIncludePopup() {
@@ -617,6 +1588,8 @@ const InstantAppsExport = class {
             (_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);
             });
@@ -648,6 +1621,7 @@ const InstantAppsExport = class {
                 this.legend = new Legend({
                     container: legendCont,
                     view,
+                    respectLayerDefinitionExpression: true,
                     style: {
                         type: 'card',
                         layout: 'side-by-side',
@@ -715,7 +1689,9 @@ const InstantAppsExport = class {
         }
     }
     setMaxRowHeightOnViewContainer() {
-        this.printEl.style.gridTemplateRows = 'minmax(auto, 70%)';
+        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%';
@@ -759,7 +1735,7 @@ const InstantAppsExport = class {
         }
     }
     createScreenshot() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.view != null) {
             this.screenshotPreview = document.createElement('div');
             this.screenshotPreview.className = 'screenshot-preview hide';
@@ -769,10 +1745,10 @@ const InstantAppsExport = class {
             const screenshotBtnContainer = document.createElement('div');
             const exportBtn = document.createElement('calcite-button');
             const returnBtn = document.createElement('calcite-button');
-            exportBtn.innerHTML = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export;
-            returnBtn.innerHTML = (_b = this.messages) === null || _b === void 0 ? void 0 : _b.returnToMap;
+            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.exportOnClick.bind(this);
+            exportBtn.onclick = this.exportPreviewOnClick.bind(this);
             returnBtn.onclick = this.screenshotReturn.bind(this);
             screenshotBtnContainer.append(returnBtn, exportBtn);
             this.screenshotImgContainer.append(this.screenshotImg, screenshotBtnContainer);
@@ -797,10 +1773,19 @@ const InstantAppsExport = class {
         this.removeScreenshotElements();
         this.exportIsLoading = false;
         this.screenshot = null;
+        this.resetPopupVisibility();
     }
-    setMapAreaOnClick() {
+    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();
@@ -845,9 +1830,21 @@ const InstantAppsExport = class {
             this.view.takeScreenshot({ area: this.area, width: width * 2, height: height * 2, format: 'jpg' }).then(screenshot => {
                 var _a;
                 this.screenshot = screenshot;
-                this.showPreview();
                 (_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;
+                    }
+                }
             });
         }
     }
@@ -866,10 +1863,12 @@ const InstantAppsExport = class {
     clamp(value, from, to) {
         return value < from ? from : value > to ? to : value;
     }
-    showPreview() {
+    showPreview(dataUrl) {
+        if (!dataUrl)
+            return;
         this.screenshotPreview.classList.remove('hide');
-        if (this.screenshotImg != null && this.screenshot != null) {
-            this.screenshotImg.src = this.screenshot.dataUrl;
+        if (this.screenshotImg != null) {
+            this.screenshotImg.src = dataUrl;
         }
     }
     handleScaleBarSize() {
@@ -893,9 +1892,37 @@ const InstantAppsExport = class {
         }
     }
     removeScreenshotElements() {
-        var _a, _b;
-        (_a = this.screenshotPreview) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = this.screenshotStyle) === null || _b === void 0 ? void 0 : _b.remove();
+        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 index.getElement(this); }
     static get watchers() { return {