@esri/solutions-components 0.7.19 → 0.7.20

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const loadModules = require('./loadModules-51c30ab9.js');
 const mode = require('./mode-d6c12b38.js');
 require('./languageUtil-a3b464f8.js');
@@ -44,10 +44,9 @@ const printStyling = `
     position: absolute;
     z-index: -999;
     color: #323232 !important;
-    display: flex;
-    flex-flow: row wrap;
-    align-content: flex-start;
-    gap: 36px;
+    display: grid;
+    gap: 24px;
+    grid-auto-flow: row;
     --esri-calcite-mode-name: "light";
   }
 
@@ -60,26 +59,24 @@ const printStyling = `
   }
 
   .instant-apps-export-print__view-container {
-    height: 60%;
+    height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
   }
 
   .instant-apps-export-print__view-wrapper {
+    height: fit-content;
+    width: fit-content;
     position: relative;
-    height: 100%;
-    width: 100%;
     display: flex;
     flex-direction: column;
     border: 2pt solid #323232;
+    overflow: hidden;
   }
 
   .instant-apps-export-print__view {
-    height: 100%;
-    width: 100%;
-    background-position: center;
-    background-repeat: no-repeat;
+    object-fit: contain;
   }
 
   .instant-apps-export-print__popup-container {
@@ -107,8 +104,8 @@ const printStyling = `
 
   .instant-apps-export-print__legend-container {
     height: min-content;
-    max-width: 300px;
     background: #fff;
+    overflow: unset;
   }
 
   .esri-legend--card, .esri-legend--card__service-content {
@@ -194,6 +191,7 @@ const printStyling = `
   }
 
   .instant-apps-export-print__scale-bar-container {
+    width: 100%;
     position: absolute;
     bottom: 15px;
     left: 15px;
@@ -208,9 +206,14 @@ const printStyling = `
   }
 
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top {
+    width: var(--instant-apps-scale-bar-top) !important;
     border-bottom: 2px solid #323232;
   }
 
+  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom {
+    width: var(--instant-apps-scale-bar-bottom) !important;
+  }
+
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
     color: #323232;
   }
@@ -233,9 +236,76 @@ const printStyling = `
 
   .instant-apps-export-print__popup-content .esri-popup__content {
     margin: 0;
-  }`;
+  }
 
-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-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}";
+  .instant-apps-export-print__content-container {
+    display: flex;
+    gap: 24px;
+    break-inside: avoid;
+    break-before: auto;
+  }`;
+const screenshotStyling = `
+.screenshot-preview.hide, .hide {
+  display: none;
+}
+
+.screenshot-cursor {
+  cursor: crosshair;
+}
+
+.relative {
+  position: relative;
+}
+
+#screenshot-mask {
+  position: absolute;
+  background: var(--instant-apps-screenshot-mask-background);
+  border: var(--instant-apps-screenshot-mask-border);
+}
+
+.screenshot-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.screenshot-preview * {
+  box-sizing: border-box;
+}
+
+.screenshot-img-container img {
+  max-height: 75%;
+  max-width: 75%;
+  object-fit: contain;
+  border: 10px solid white;
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+  margin-bottom: 0.5em;
+}
+
+.screenshot-img-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  margin-bottom: 8px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.screenshot-img-container calcite-button {
+  margin: 5px;
+}
+`;
+
+const instantAppsExportCss = ":host{display:block;--instant-apps-export-action-background:var(--calcite-color-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-color-foreground-2);--instant-apps-export-action-background-press:var(--calcite-color-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-color-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-color-text-1);--instant-apps-export-background:var(--calcite-color-foreground-1);--instant-apps-export-text-color:var(--calcite-color-text-1);--instant-apps-export-popover-width:250px}.instant-apps-export{height:100%}.instant-apps-export *{box-sizing:border-box}.instant-apps-export__popover-container,.instant-apps-export__inline-container{padding:12px;background:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export__popover-container{width:var(--instant-apps-export-popover-width)}.instant-apps-export calcite-action{height:var(--instant-apps-export-action-height);width:var(--instant-apps-export-action-width);--calcite-color-foreground-1:var(--instant-apps-export-action-background);--calcite-color-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-color-foreground-3:var(--instant-apps-export-action-background-press);--calcite-color-text-3:var(--instant-apps-export-action-icon-color);--calcite-color-text-1:var(--instant-apps-export-action-icon-hover-color)}.instant-apps-export .instant-apps-export-print{display:none}.instant-apps-export__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 CSS = {
     baseDark: 'instant-apps-export calcite-mode-dark',
@@ -245,6 +315,7 @@ const CSS = {
     hidden: 'instant-apps-export__visually-hidden',
     print: {
         base: 'instant-apps-export-print',
+        contentContainer: 'instant-apps-export-print__content-container',
         extraContainer: 'instant-apps-export-print__extra-container',
         legendContainer: 'instant-apps-export-print__legend-container',
         compassContainer: 'instant-apps-export-print__compass-container',
@@ -258,6 +329,7 @@ const CSS = {
         viewWrapper: 'instant-apps-export-print__view-wrapper',
     },
 };
+const dragHandlerName = 'instant-app-export-drag';
 const InstantAppsExport = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -282,6 +354,8 @@ const InstantAppsExport = class {
         this.showIncludePopup = true;
         this.showScaleBar = true;
         this.view = undefined;
+        this.maskBackground = 'rgba(255, 51, 0, 0.1)';
+        this.maskBorder = '2px dashed rgb(255, 51, 0)';
         this.baseClass = CSS.baseLight;
         this.exportIsLoading = undefined;
         this.messages = undefined;
@@ -324,14 +398,14 @@ const InstantAppsExport = class {
         ];
     }
     renderPanel() {
-        var _a;
+        var _a, _b;
         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 (index.h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, index.h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), loading: this.exportIsLoading, disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export), print));
+        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), loading: this.exportIsLoading, disabled: this.exportIsLoading }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export), print));
     }
     renderTitle() {
         var _a;
@@ -354,11 +428,11 @@ 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, popup, extraContent)));
+        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))));
     }
     renderPrintMap() {
         const scaleBar = this.renderScaleBar();
-        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("div", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), scaleBar)));
+        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) }), scaleBar)));
     }
     renderLegend() {
         return index.h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -385,6 +459,7 @@ const InstantAppsExport = class {
         this.updateExportOutput();
     }
     async exportOnClick() {
+        this.removeScreenshotElements();
         await this.beforeExport();
         if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
             this.viewWrapperEl.append(this.compassContainerEl);
@@ -400,9 +475,6 @@ const InstantAppsExport = class {
             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();
@@ -447,6 +519,7 @@ const InstantAppsExport = class {
     resetPrintContent() {
         var _a, _b;
         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();
             this.printStyleEl = undefined;
@@ -592,26 +665,39 @@ const InstantAppsExport = class {
     }
     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.screenshot == null) {
+                this.screenshot = await this.view.takeScreenshot({
+                    width: this.view.width * 2,
+                    height: this.view.height * 2,
+                });
+            }
+            this.handleScaleBarSize();
             if (this.viewEl != null && this.viewWrapperEl != null) {
-                if (this.view.width < maxIMGWidth) {
-                    this.viewWrapperEl.style.width = `${this.view.width}px`;
-                    this.viewWrapperEl.style.maxWidth = '';
+                const { height, width } = this.screenshot.data;
+                if (height > width) {
+                    this.setMaxRowHeightOnViewContainer();
                 }
                 else {
-                    this.viewWrapperEl.style.maxWidth = `${this.view.width}px`;
-                    this.viewWrapperEl.style.width = '';
+                    this.setMaxWidthOnViewContainer();
                 }
-                this.viewWrapperEl.style.height = this.view.height < maxIMGHeight ? `${this.view.height}px` : '';
-                this.viewEl.style.backgroundImage = `url("${screenshot.dataUrl}")`;
+                this.viewEl.src = this.screenshot.dataUrl;
             }
         }
     }
+    setMaxRowHeightOnViewContainer() {
+        this.printEl.style.gridTemplateRows = 'minmax(auto, 70%)';
+        this.viewEl.style.height = '100%';
+        this.viewEl.style.width = '';
+        this.viewWrapperEl.style.height = '100%';
+        this.viewWrapperEl.style.width = 'fit-content';
+    }
+    setMaxWidthOnViewContainer() {
+        this.printEl.style.gridTemplateRows = '';
+        this.viewEl.style.width = '100%';
+        this.viewEl.style.height = '';
+        this.viewWrapperEl.style.height = 'fit-content';
+        this.viewWrapperEl.style.width = '100%';
+    }
     checkPopupOpen() {
         if (this.view != null) {
             const popupContainer = this.view.popup.container;
@@ -642,6 +728,139 @@ const InstantAppsExport = class {
             }
         }
     }
+    createScreenshot() {
+        var _a, _b;
+        if (this.view != null) {
+            this.screenshotPreview = document.createElement('div');
+            this.screenshotPreview.className = 'screenshot-preview hide';
+            this.screenshotImgContainer = document.createElement('div');
+            this.screenshotImgContainer.className = 'screenshot-img-container';
+            this.screenshotImg = document.createElement('img');
+            const screenshotBtnContainer = document.createElement('div');
+            const exportBtn = document.createElement('calcite-button');
+            const returnBtn = document.createElement('calcite-button');
+            exportBtn.innerHTML = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export;
+            returnBtn.innerHTML = (_b = this.messages) === null || _b === void 0 ? void 0 : _b.returnToMap;
+            returnBtn.appearance = 'outline-fill';
+            exportBtn.onclick = this.exportOnClick.bind(this);
+            returnBtn.onclick = this.screenshotReturn.bind(this);
+            screenshotBtnContainer.append(returnBtn, exportBtn);
+            this.screenshotImgContainer.append(this.screenshotImg, screenshotBtnContainer);
+            this.screenshotPreview.append(this.screenshotImgContainer);
+            this.view.container.append(this.screenshotPreview);
+        }
+    }
+    createMaskDiv() {
+        if (this.view != null) {
+            this.maskDivEl = document.createElement('div');
+            this.maskDivEl.id = 'screenshot-mask';
+            this.maskDivEl.className = 'hide screenshot-cursor';
+            this.maskDivEl.style.setProperty('--instant-apps-screenshot-mask-background', this.maskBackground);
+            this.maskDivEl.style.setProperty('--instant-apps-screenshot-mask-border', this.maskBorder);
+            this.screenshotStyle = document.createElement('style');
+            this.screenshotStyle.innerHTML = screenshotStyling;
+            this.view.container.append(this.screenshotStyle);
+            this.view.container.append(this.maskDivEl);
+        }
+    }
+    screenshotReturn() {
+        this.removeScreenshotElements();
+        this.exportIsLoading = false;
+        this.screenshot = null;
+    }
+    setMapAreaOnClick() {
+        if (this.view == null)
+            return;
+        this.exportIsLoading = true;
+        this.createMaskDiv();
+        this.createScreenshot();
+        this.view.container.classList.add('screenshot-cursor', 'relative');
+        this.view.addHandles(this.view.on('drag', async (event) => {
+            if (this.view == null)
+                return;
+            event.stopPropagation();
+            if (event.action !== 'end') {
+                this.updateMaskSize(event);
+            }
+            else {
+                this.maskScreenshot();
+            }
+        }), dragHandlerName);
+    }
+    updateMaskSize(event) {
+        if (this.view != null) {
+            const xmin = this.clamp(Math.min(event.origin.x, event.x), 0, this.view.width);
+            const xmax = this.clamp(Math.max(event.origin.x, event.x), 0, this.view.width);
+            const ymin = this.clamp(Math.min(event.origin.y, event.y), 0, this.view.height);
+            const ymax = this.clamp(Math.max(event.origin.y, event.y), 0, this.view.height);
+            this.area = {
+                x: xmin,
+                y: ymin,
+                width: xmax - xmin,
+                height: ymax - ymin,
+            };
+            this.setMaskPosition(this.area);
+        }
+    }
+    maskScreenshot() {
+        if (this.view != null && this.area != null) {
+            this.view.removeHandles(dragHandlerName);
+            const height = this.area.height;
+            const width = this.area.width;
+            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);
+            });
+        }
+    }
+    setMaskPosition(area) {
+        if (area != null) {
+            this.maskDivEl.classList.remove('hide');
+            this.maskDivEl.style.left = `${area.x}px`;
+            this.maskDivEl.style.top = `${area.y}px`;
+            this.maskDivEl.style.width = `${area.width}px`;
+            this.maskDivEl.style.height = `${area.height}px`;
+        }
+        else {
+            this.maskDivEl.remove();
+        }
+    }
+    clamp(value, from, to) {
+        return value < from ? from : value > to ? to : value;
+    }
+    showPreview() {
+        this.screenshotPreview.classList.remove('hide');
+        if (this.screenshotImg != null && this.screenshot != null) {
+            this.screenshotImg.src = this.screenshot.dataUrl;
+        }
+    }
+    handleScaleBarSize() {
+        var _a;
+        if (((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
+            if (this.scaleBarContainerEl != null) {
+                const topBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--top');
+                const bottomBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--bottom');
+                this.setScalebarWidth(topBar, 'top');
+                this.setScalebarWidth(bottomBar, 'bottom');
+            }
+        }
+    }
+    setScalebarWidth(bar, position) {
+        if (this.view != null && bar != null && this.screenshot != null) {
+            const width = this.screenshot.data.width / 2;
+            const barWidth = Number(bar.style.width.replace('px', ''));
+            const widthPercentage = (barWidth / width) * 100;
+            bar.style.setProperty(`--instant-apps-scale-bar-${position}`, `${widthPercentage}%`);
+        }
+    }
+    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();
+    }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]

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

@@ -11,6 +11,7 @@ const index = require('./index-b8a649fc.js');
 const languageUtil = require('./languageUtil-a3b464f8.js');
 const index$1 = require('./index-f64944ad.js');
 const breakpoints = require('./breakpoints-fcd0f2a0.js');
+const styles = require('./styles-c9e1375a.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 
@@ -84,7 +85,7 @@ const InstantAppsHeader = class {
         const logo = this.renderLogo(hasEmptyLogo);
         const title = this.renderTitle();
         const headerContentClass = this.headerAlignment === 'right' || this.headerAlignment === 'center' ? CSS.headerContent.concat(' ', CSS.alignment[this.headerAlignment]) : CSS.headerContent;
-        const fontFamily = this.fontFamily == null ? `"Avenir Next","Avenir","Helvetica Neue",sans-serif` : this.fontFamily;
+        const fontFamily = styles.getFontFamily(this.fontFamily);
         return (index.h(index.Host, null, this.customHeaderHtml ? ([index.h("style", null, this.customHeaderCss), index.h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (index.h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, index.h("div", { class: CSS.headerContainer }, index.h("span", { class: headerContentClass }, logo, title, this.infoButton ? (index.h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), index.h("slot", { name: "actions-end" }))))));
     }
     renderLogo(hasEmptyLogo) {

package/dist/cjs/instant-apps-interactive-legend.cjs.entry.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const helpers = require('./helpers-a0719076.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

package/dist/cjs/instant-apps-keyboard-shortcuts.cjs.entry.js

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

package/dist/cjs/instant-apps-landing-page.cjs.entry.js

@@ -8,6 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
+const styles = require('./styles-c9e1375a.js');
 
 var AlignmentPositions;
 (function (AlignmentPositions) {
@@ -46,6 +47,8 @@ const CSS = {
 const InstantAppsLandingPage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.landingPageOpen = index.createEvent(this, "landingPageOpen", 7);
+        this.landingPageClose = index.createEvent(this, "landingPageClose", 7);
         this.titleText = undefined;
         this.subtitleText = undefined;
         this.descriptionText = undefined;
@@ -58,6 +61,15 @@ const InstantAppsLandingPage = class {
         this.backgroundImageSrc = undefined;
         this.open = true;
         this.entryButtonScale = 'l';
+        this.fontFamily = 'var(--calcite-sans-family);';
+    }
+    emitToggleEvent() {
+        if (this.open) {
+            this.landingPageOpen.emit();
+        }
+        else {
+            this.landingPageClose.emit();
+        }
     }
     render() {
         return index.h(index.Host, null, this.renderLandingPageContent());
@@ -66,13 +78,12 @@ const InstantAppsLandingPage = class {
         const closed = !this.open ? (this.disableTransition ? ` ${CSS.closedNoTransition}` : ` ${CSS.closed}`) : '';
         const alignmentClass = this.getAlignmentClass();
         const removeTransition = this.disableTransition ? ` ${CSS.removeTransition}` : '';
+        const fontFamily = styles.getFontFamily(this.fontFamily);
+        const style = {
+            fontFamily,
+        };
         return (index.h("div", { style: this.backgroundImageSrc
-                ? {
-                    backgroundSize: 'cover',
-                    backgroundImage: `url("${this.backgroundImageSrc}")`,
-                    backgroundRepeat: 'no-repeat',
-                }
-                : {}, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, index.h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), index.h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), index.h("slot", { name: "secondary-action" }))));
+                ? Object.assign(Object.assign({}, style), { backgroundSize: 'cover', backgroundImage: `url("${this.backgroundImageSrc}")`, backgroundRepeat: 'no-repeat' }) : style, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, index.h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), index.h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), index.h("slot", { name: "secondary-action" }))));
     }
     renderIconImage() {
         return this.iconImage ? index.h("img", { class: `${CSS.iconImage}${this.getIconImageScale()}`, src: this.iconImage, alt: this.iconImageAltText }) : null;
@@ -87,7 +98,7 @@ const InstantAppsLandingPage = class {
         return index.h("p", { class: CSS.descriptionText }, this.descriptionText);
     }
     renderEntryButton() {
-        return (index.h("calcite-button", { class: CSS.entryButton, onClick: () => (this.open = false), scale: this.entryButtonScale, appearance: "outline-fill" }, this.entryButtonText));
+        return (index.h("calcite-button", { class: CSS.entryButton, onClick: () => (this.open = false), scale: this.entryButtonScale, appearance: "outline-fill" }, this.entryButtonText ? this.entryButtonText : 'Enter'));
     }
     getAlignmentClass() {
         return ` ${CSS.alignment}${this.alignment}`;
@@ -98,6 +109,9 @@ const InstantAppsLandingPage = class {
         return iconImageScale === 'l' ? l : iconImageScale === 's' ? s : m;
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["emitToggleEvent"]
+    }; }
 };
 InstantAppsLandingPage.style = instantAppsLandingPageCss;
 

package/dist/cjs/instant-apps-language-switcher.cjs.entry.js

@@ -8,9 +8,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const utils = require('./utils-35b31785.js');
+const utils = require('./utils-6c713ba8.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const languageSwitcher = require('./languageSwitcher-7de41e17.js');
 require('./index-22bb61da.js');
 require('./esri-loader-a91c0ec1.js');

package/dist/cjs/instant-apps-language-translator.cjs.entry.js

@@ -8,9 +8,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const utils = require('./utils-35b31785.js');
+const utils = require('./utils-6c713ba8.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const languageSwitcher = require('./languageSwitcher-7de41e17.js');
 require('./index-22bb61da.js');
 require('./esri-loader-a91c0ec1.js');
@@ -199,11 +199,11 @@ const InstantAppsLanguageTranslator = class {
         return (index.h("calcite-notice", { open: true, icon: "exclamation-mark-triangle", kind: "warning" }, index.h("div", { slot: "title" }, noLanguage === null || noLanguage === void 0 ? void 0 : noLanguage.title), index.h("div", { slot: "message" }, noLanguage === null || noLanguage === void 0 ? void 0 : noLanguage.message)));
     }
     renderUIDataItem(key, keyIndex, uiDataKeysLen) {
-        var _a, _b, _c;
-        const translatedLabel = (_c = (_b = (_a = this.appSettings) === null || _a === void 0 ? void 0 : _a.translatedLanguageLabels) === null || _b === void 0 ? void 0 : _b[utils.languageTranslatorState.currentLanguage]) === null || _c === void 0 ? void 0 : _c[key];
+        var _a, _b;
+        const translatedLanguageLabels = (_b = (_a = this.appSettings) === null || _a === void 0 ? void 0 : _a.translatedLanguageLabels) === null || _b === void 0 ? void 0 : _b[utils.languageTranslatorState.currentLanguage];
         const isLast = `${keyIndex === uiDataKeysLen - 1 ? CSS.lastItem : ''}`;
         const setting = this.appSettings.content.filter(contentItem => contentItem.id === key)[0];
-        return (index.h("instant-apps-language-translator-item", { key: `${key}-${keyIndex}`, class: isLast, fieldName: key, translatedLanguageLabel: translatedLabel, type: setting.type, userLocaleInputOnChangeCallback: this.userLocaleInputOnChangeCallback, translatedLocaleInputOnChangeCallback: this.translatedLocaleInputOnChangeCallback }));
+        return (index.h("instant-apps-language-translator-item", { key: `${key}-${keyIndex}`, class: isLast, fieldName: key, translatedLanguageLabels: translatedLanguageLabels, setting: setting, userLocaleInputOnChangeCallback: this.userLocaleInputOnChangeCallback, translatedLocaleInputOnChangeCallback: this.translatedLocaleInputOnChangeCallback }));
     }
     renderPrimaryButton() {
         var _a;

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
@@ -45,8 +45,7 @@ const InstantAppsPopover = class {
         this.messageOverrides = undefined;
     }
     async componentDidLoad() {
-        locale.getMessages(this);
-        this.messages = Object.assign(Object.assign({}, this.messages), this.messageOverrides);
+        locale.getMessages(this, this.messageOverrides);
     }
     componentDidUpdate() {
         this.popoverEl.referenceElement = this.referenceElement;

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const breakpoints = require('./breakpoints-fcd0f2a0.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
 const index$1 = require('./index-f64944ad.js');
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
@@ -110,7 +110,7 @@ const InstantAppsSplash = class {
     }
     renderPrimaryButton() {
         const { primaryButtonText } = this;
-        return (index.h("calcite-button", { onClick: this.close.bind(this), slot: "primary" }, primaryButtonText));
+        return (index.h("calcite-button", { onClick: this.close.bind(this), slot: "primary" }, primaryButtonText ? primaryButtonText : 'Enter'));
     }
     close() {
         this.open = false;