@esri/solutions-components 0.7.18 → 0.7.20

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

@@ -4,7 +4,7 @@
  * 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-89b49505.js';
+import { g as getMessages } from './locale-c7d9e9aa.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
 import { g as getMode } from './mode-66911cb5.js';
 import './languageUtil-8b54477c.js';
@@ -40,10 +40,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";
   }
 
@@ -56,26 +55,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 {
@@ -103,8 +100,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 {
@@ -190,6 +187,7 @@ const printStyling = `
   }
 
   .instant-apps-export-print__scale-bar-container {
+    width: 100%;
     position: absolute;
     bottom: 15px;
     left: 15px;
@@ -204,9 +202,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;
   }
@@ -229,9 +232,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',
@@ -241,6 +311,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',
@@ -254,6 +325,7 @@ const CSS = {
         viewWrapper: 'instant-apps-export-print__view-wrapper',
     },
 };
+const dragHandlerName = 'instant-app-export-drag';
 const InstantAppsExport = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -278,6 +350,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;
@@ -320,14 +394,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 (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, 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 (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, this.includeMap ? (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, 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;
@@ -350,11 +424,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 (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.base, ref: (el) => (this.printEl = el) }, printMap, legend, popup, extraContent)));
+        return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.base, ref: (el) => (this.printEl = el) }, printMap, legend, h("div", { class: CSS.print.contentContainer }, 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)));
+        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("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), scaleBar)));
     }
     renderLegend() {
         return h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -381,6 +455,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);
@@ -396,9 +471,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();
@@ -443,6 +515,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;
@@ -588,26 +661,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;
@@ -638,6 +724,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 getElement(this); }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]

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

@@ -7,6 +7,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { g as getElementDir } from './languageUtil-8b54477c.js';
 import { S as Sanitizer } from './index-a1e91462.js';
 import { w as widthBreakpoints } from './breakpoints-f0f1417d.js';
+import { g as getFontFamily } from './styles-367380b5.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 
@@ -80,7 +81,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 = getFontFamily(this.fontFamily);
         return (h(Host, null, this.customHeaderHtml ? ([h("style", null, this.customHeaderCss), h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, h("div", { class: CSS.headerContainer }, h("span", { class: headerContentClass }, logo, title, this.infoButton ? (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), h("slot", { name: "actions-end" }))))));
     }
     renderLogo(hasEmptyLogo) {

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

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-7183ce4a.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
-import { g as getMessages } from './locale-89b49505.js';
+import { g as getMessages } from './locale-c7d9e9aa.js';
 import { g as getTheme } from './helpers-078591d2.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';

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

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { g as getMessages } from './locale-89b49505.js';
+import { g as getMessages } from './locale-c7d9e9aa.js';
 import './loadModules-b677d6d7.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';

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

@@ -3,7 +3,8 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
+import { g as getFontFamily } from './styles-367380b5.js';
 
 var AlignmentPositions;
 (function (AlignmentPositions) {
@@ -42,6 +43,8 @@ const CSS = {
 const InstantAppsLandingPage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.landingPageOpen = createEvent(this, "landingPageOpen", 7);
+        this.landingPageClose = createEvent(this, "landingPageClose", 7);
         this.titleText = undefined;
         this.subtitleText = undefined;
         this.descriptionText = undefined;
@@ -54,6 +57,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 h(Host, null, this.renderLandingPageContent());
@@ -62,13 +74,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 = getFontFamily(this.fontFamily);
+        const style = {
+            fontFamily,
+        };
         return (h("div", { style: this.backgroundImageSrc
-                ? {
-                    backgroundSize: 'cover',
-                    backgroundImage: `url("${this.backgroundImageSrc}")`,
-                    backgroundRepeat: 'no-repeat',
-                }
-                : {}, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), 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}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), h("slot", { name: "secondary-action" }))));
     }
     renderIconImage() {
         return this.iconImage ? h("img", { class: `${CSS.iconImage}${this.getIconImageScale()}`, src: this.iconImage, alt: this.iconImageAltText }) : null;
@@ -83,7 +94,7 @@ const InstantAppsLandingPage = class {
         return h("p", { class: CSS.descriptionText }, this.descriptionText);
     }
     renderEntryButton() {
-        return (h("calcite-button", { class: CSS.entryButton, onClick: () => (this.open = false), scale: this.entryButtonScale, appearance: "outline-fill" }, this.entryButtonText));
+        return (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}`;
@@ -94,6 +105,9 @@ const InstantAppsLandingPage = class {
         return iconImageScale === 'l' ? l : iconImageScale === 's' ? s : m;
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["emitToggleEvent"]
+    }; }
 };
 InstantAppsLandingPage.style = instantAppsLandingPageCss;
 

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

@@ -4,9 +4,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7183ce4a.js';
-import { g as getMessages } from './utils-b1bd777e.js';
+import { g as getMessages } from './utils-5ec65194.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
-import { a as getDefaultLanguage } from './locale-89b49505.js';
+import { a as getDefaultLanguage } from './locale-c7d9e9aa.js';
 import { g as getPortalItemResource, f as fetchResourceData } from './languageSwitcher-62232826.js';
 import './index-857df22e.js';
 import './esri-loader-eda07632.js';

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

@@ -4,9 +4,9 @@
  * 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, a as generateUIData, s as store, E as EIcons, b as getLocales, l as languageTranslatorState, c as getUIDataKeys } from './utils-b1bd777e.js';
+import { g as getMessages, a as generateUIData, s as store, E as EIcons, b as getLocales, l as languageTranslatorState, c as getUIDataKeys } from './utils-5ec65194.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
-import { c as getComponentClosestLanguage } from './locale-89b49505.js';
+import { c as getComponentClosestLanguage } from './locale-c7d9e9aa.js';
 import { g as getPortalItemResource, f as fetchResourceData } from './languageSwitcher-62232826.js';
 import './index-857df22e.js';
 import './esri-loader-eda07632.js';
@@ -195,11 +195,11 @@ const InstantAppsLanguageTranslator = class {
         return (h("calcite-notice", { open: true, icon: "exclamation-mark-triangle", kind: "warning" }, h("div", { slot: "title" }, noLanguage === null || noLanguage === void 0 ? void 0 : noLanguage.title), 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[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[languageTranslatorState.currentLanguage];
         const isLast = `${keyIndex === uiDataKeysLen - 1 ? CSS.lastItem : ''}`;
         const setting = this.appSettings.content.filter(contentItem => contentItem.id === key)[0];
-        return (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 (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/esm/instant-apps-measurement.entry.js

@@ -4,7 +4,7 @@
  * 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-89b49505.js';
+import { g as getMessages } from './locale-c7d9e9aa.js';
 import './loadModules-b677d6d7.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';

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

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement } from './index-7183ce4a.js';
-import { g as getMessages } from './locale-89b49505.js';
+import { g as getMessages } from './locale-c7d9e9aa.js';
 import './loadModules-b677d6d7.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
@@ -41,8 +41,7 @@ const InstantAppsPopover = class {
         this.messageOverrides = undefined;
     }
     async componentDidLoad() {
-        getMessages(this);
-        this.messages = Object.assign(Object.assign({}, this.messages), this.messageOverrides);
+        getMessages(this, this.messageOverrides);
     }
     componentDidUpdate() {
         this.popoverEl.referenceElement = this.referenceElement;

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

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
-import { b as getLocaleComponentStrings } from './locale-89b49505.js';
+import { b as getLocaleComponentStrings } from './locale-c7d9e9aa.js';
 import { w as widthBreakpoints } from './breakpoints-f0f1417d.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';

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

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7183ce4a.js';
 import { S as Sanitizer } from './index-a1e91462.js';
-import { b as getLocaleComponentStrings } from './locale-89b49505.js';
+import { b as getLocaleComponentStrings } from './locale-c7d9e9aa.js';
 import './loadModules-b677d6d7.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
@@ -106,7 +106,7 @@ const InstantAppsSplash = class {
     }
     renderPrimaryButton() {
         const { primaryButtonText } = this;
-        return (h("calcite-button", { onClick: this.close.bind(this), slot: "primary" }, primaryButtonText));
+        return (h("calcite-button", { onClick: this.close.bind(this), slot: "primary" }, primaryButtonText ? primaryButtonText : 'Enter'));
     }
     close() {
         this.open = false;