@esri/solutions-components 0.7.3 → 0.7.4

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

@@ -0,0 +1,648 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
+import { g as getMessages } from './locale-53d724b5.js';
+import { l as loadModules } from './loadModules-037feea8.js';
+import { g as getMode } from './mode-66911cb5.js';
+import './languageUtil-8b54477c.js';
+import './esri-loader-eda07632.js';
+import './_commonjsHelpers-d5f9d613.js';
+
+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 {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: -999;
+    color: #323232 !important;
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    gap: 36px;
+    --esri-calcite-mode-name: "light";
+  }
+
+  .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: 60%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .instant-apps-export-print__view-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 2pt solid #323232;
+  }
+
+  .instant-apps-export-print__view {
+    height: 100%;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .instant-apps-export-print__popup-container {
+    height: min-content;
+    max-width: 350px;
+    display: none;
+    color: #323232;
+    background: #fff;
+    border: 1pt solid #323232;
+    break-inside: avoid;
+  }
+
+  .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;
+    max-width: 300px;
+    background: #fff;
+  }
+
+  .esri-legend--card, .esri-legend--card__service-content {
+    flex-flow: row wrap;
+  }
+
+  .instant-apps-export-print .esri-widget > *:not(.instant-apps-export-print__scale-bar-container > *) {
+    background: #fff;
+    color: #323232;
+  }
+
+  .instant-apps-export-print__popup-content * {
+    color: #323232;
+  }
+
+  .instant-apps-export-print .esri-widget__heading {
+    margin: 2pt 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: 0;
+  }
+
+  .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 {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+  }
+
+  .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 .esri-scale-bar__line {
+    background-color: rgba(255, 255, 255, 0.66);
+  }
+
+  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top {
+    border-bottom: 2px solid #323232;
+  }
+
+  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
+    color: #323232;
+  }
+
+  .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;
+  }`;
+
+const instantAppsExportCss = ":host{display:block;--instant-apps-export-action-background:var(--calcite-ui-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-ui-foreground-2);--instant-apps-export-action-background-press:var(--calcite-ui-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-ui-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-ui-text-1);--instant-apps-export-background:var(--calcite-ui-foreground-1);--instant-apps-export-text-color:var(--calcite-ui-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-ui-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-ui-foreground-1:var(--instant-apps-export-action-background);--calcite-ui-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-ui-foreground-3:var(--instant-apps-export-action-background-press);--calcite-ui-text-3:var(--instant-apps-export-action-icon-color);--calcite-ui-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-ui-foreground-1:var(--instant-apps-export-background);--calcite-ui-text-1:var(--instant-apps-export-text-color)}.instant-apps-export calcite-popover{--calcite-ui-foreground-1:var(--instant-apps-export-background)}.instant-apps-export calcite-switch{--calcite-ui-foreground-1:#fff;--calcite-ui-foreground-2:#f3f3f3}.instant-apps-export .calcite-mode-dark calcite-switch{--calcite-ui-foreground-1:#2b2b2b;--calcite-ui-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}";
+
+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: {
+        base: 'instant-apps-export-print',
+        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 InstantAppsExport = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.exportOutputUpdated = createEvent(this, "exportOutputUpdated", 7);
+        this.output = undefined;
+        this.beforeExport = () => Promise.resolve();
+        this.popoverIcon = 'export';
+        this.extraContent = undefined;
+        this.extraContentLabel = undefined;
+        this.headerTitle = '';
+        this.includeExtraContent = true;
+        this.includeLegend = true;
+        this.includeMap = true;
+        this.includePopup = false;
+        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 = true;
+        this.view = undefined;
+        this.baseClass = CSS.baseLight;
+        this.exportIsLoading = undefined;
+        this.messages = undefined;
+    }
+    watchIncludeMap(newValue) {
+        if (newValue) {
+            this.updateLegend();
+        }
+    }
+    componentWillLoad() {
+        this.baseClass = getMode(this.el) === 'dark' ? CSS.baseDark : CSS.baseLight;
+        getMessages(this);
+        this.initializeModules();
+    }
+    componentDidLoad() {
+        this.printContainerEl.prepend(this.printEl);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.handles) === null || _a === void 0 ? void 0 : _a.removeAll();
+        (_b = this.handles) === null || _b === void 0 ? void 0 : _b.destroy();
+        this.handles = null;
+    }
+    async initializeModules() {
+        const [Handles] = await loadModules(['esri/core/Handles']);
+        this.handles = new Handles();
+        return Promise.resolve();
+    }
+    render() {
+        const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
+        const compass = this.renderCompass();
+        return (h(Host, null, h("div", { class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, h("div", { 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;
+        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 options = this.includeMap ? this.renderMapOptions() : null;
+        const print = this.renderPrint();
+        const panelClass = this.mode === 'inline' ? CSS.inlineContainer : CSS.popoverContainer;
+        return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), loading: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export), 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) {
+        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) })));
+    }
+    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.base, ref: (el) => (this.printEl = el) }, printMap, legend, popup, extraContent)));
+    }
+    renderPrintMap() {
+        const scaleBar = this.renderScaleBar();
+        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", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, h("div", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), scaleBar)));
+    }
+    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) });
+    }
+    renderScaleBar() {
+        return h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = 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) });
+    }
+    optionOnChange(e) {
+        const { checked, value } = e.target;
+        this[value] = checked;
+        this.updateExportOutput();
+    }
+    updateHeaderTitle(e) {
+        this.headerTitle = e.target.value;
+        this.updateExportOutput();
+    }
+    async exportOnClick() {
+        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 handleViewExportOnClick() {
+        if (this.view != null) {
+            this.addPrintStyling();
+            document.body.prepend(this.printEl);
+            this.handleExtraContent();
+            if (this.includeMap) {
+                if (this.viewContainerEl != null) {
+                    this.viewContainerEl.style.display = 'flex';
+                }
+                this.updatePopupToPrint();
+                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(() => {
+            this.exportIsLoading = undefined;
+            this.setupViewPrintElements();
+        }, 1500);
+    }
+    handleExtraContent() {
+        const extraContainerEl = this.printEl.querySelector('#export-content');
+        if (extraContainerEl != null) {
+            extraContainerEl.innerHTML = '';
+            if (this.extraContent != null && this.includeExtraContent) {
+                extraContainerEl.style.display = 'block';
+                extraContainerEl.append(this.extraContent.cloneNode(true));
+            }
+            else {
+                extraContainerEl.style.display = 'none';
+            }
+        }
+    }
+    resetPrintContent() {
+        var _a, _b;
+        if (this.view != 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();
+            this.printStyleEl = undefined;
+            const extraContainerEl = this.printEl.querySelector('#export-content');
+            if (extraContainerEl) {
+                extraContainerEl.innerHTML = '';
+            }
+        }
+    }
+    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);
+                }
+            }
+        }
+    }
+    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();
+            const title = document.title;
+            if (this.showHeaderTitle && this.headerTitle) {
+                document.title = this.headerTitle;
+            }
+            window.print();
+            document.title = title;
+            setTimeout(() => {
+                this.resetPrintContent();
+            }, 1000);
+        }
+    }
+    handleLegendSetup() {
+        if (this.showIncludeLegend && this.view != null && this.includeMap && this.legendContainerEl != null) {
+            this.legendContainerEl.style.display = this.includeLegend ? 'block' : 'none';
+        }
+    }
+    handleWidgetCreation() {
+        this.handleLegendCreation();
+        this.handleCompassCreation();
+        this.handleScaleBarCreation();
+    }
+    handleLegendCreation() {
+        var _a, _b;
+        if (this.includeMap && 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 = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem.id);
+            if (!checkId) {
+                this.updateLegend();
+            }
+        }
+    }
+    updateLegend() {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
+            var _a;
+            (_a = this.legend) === null || _a === void 0 ? void 0 : _a.destroy();
+            if (this.legendContainerEl != null) {
+                this.legendContainerEl.innerHTML = '';
+                const [Legend] = await loadModules(['esri/widgets/Legend']);
+                this.legend = new Legend({
+                    container: this.legendContainerEl,
+                    view,
+                    style: {
+                        type: 'card',
+                        layout: 'side-by-side',
+                    },
+                });
+            }
+        });
+    }
+    handleCompassCreation() {
+        var _a, _b;
+        if (this.includeMap && 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 = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (compassMap === null || compassMap === void 0 ? void 0 : compassMap.portalItem.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 });
+        });
+    }
+    handleScaleBarCreation() {
+        var _a, _b;
+        if (this.showScaleBar && this.includeMap && this.view != null && this.view.type === '2d' && this.scaleBarContainerEl != null) {
+            const map = this.view.map;
+            const scaleBarMap = (_b = (_a = this.scaleBar) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
+            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (scaleBarMap === null || scaleBarMap === void 0 ? void 0 : scaleBarMap.portalItem.id) && this.scaleBarContainerEl.innerHTML;
+            if (!checkId) {
+                this.updateScaleBar();
+            }
+        }
+    }
+    updateScaleBar() {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
+            var _a;
+            (_a = this.scaleBar) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.scaleBar = null;
+            this.scaleBarContainerEl.innerHTML = '';
+            const [ScaleBar] = await loadModules(['esri/widgets/ScaleBar']);
+            this.scaleBar = new ScaleBar({ container: this.scaleBarContainerEl, unit: 'dual', view });
+        });
+    }
+    async viewScreenshot() {
+        if (this.view != null && this.includeMap) {
+            const screenshot = await this.view.takeScreenshot({
+                width: this.view.width,
+                height: this.view.height,
+            });
+            const maxIMGWidth = 800;
+            const maxIMGHeight = 494;
+            if (this.viewEl != null && this.viewWrapperEl != null) {
+                if (this.view.width < maxIMGWidth) {
+                    this.viewWrapperEl.style.width = `${this.view.width}px`;
+                    this.viewWrapperEl.style.maxWidth = '';
+                }
+                else {
+                    this.viewWrapperEl.style.maxWidth = `${this.view.width}px`;
+                    this.viewWrapperEl.style.width = '';
+                }
+                this.viewWrapperEl.style.height = this.view.height < maxIMGHeight ? `${this.view.height}px` : '';
+                this.viewEl.style.backgroundImage = `url("${screenshot.dataUrl}")`;
+            }
+        }
+    }
+    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';
+                        }
+                    }
+                });
+            }
+        }
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "includeMap": ["watchIncludeMap"]
+    }; }
+};
+InstantAppsExport.style = instantAppsExportCss;
+
+export { InstantAppsExport as instant_apps_export };