@esri/solutions-components 0.7.18 → 0.7.20

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

@@ -47,10 +47,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";
   }
 
@@ -63,26 +62,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 {
@@ -110,8 +107,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 {
@@ -197,6 +194,7 @@ const printStyling = `
   }
 
   .instant-apps-export-print__scale-bar-container {
+    width: 100%;
     position: absolute;
     bottom: 15px;
     left: 15px;
@@ -211,9 +209,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;
   }
@@ -236,9 +239,76 @@ const printStyling = `
 
   .instant-apps-export-print__popup-content .esri-popup__content {
     margin: 0;
+  }
+
+  .instant-apps-export-print__content-container {
+    display: flex;
+    gap: 24px;
+    break-inside: avoid;
+    break-before: auto;
   }`;
+const screenshotStyling = `
+.screenshot-preview.hide, .hide {
+  display: none;
+}
+
+.screenshot-cursor {
+  cursor: crosshair;
+}
 
-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}";
+.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',
@@ -248,6 +318,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',
@@ -261,6 +332,7 @@ const CSS = {
         viewWrapper: 'instant-apps-export-print__view-wrapper',
     },
 };
+const dragHandlerName = 'instant-app-export-drag';
 const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsExport extends HTMLElement {
     constructor() {
         super();
@@ -287,6 +359,8 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         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;
@@ -329,14 +403,14 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         ];
     }
     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;
@@ -359,11 +433,11 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         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) });
@@ -390,6 +464,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         this.updateExportOutput();
     }
     async exportOnClick() {
+        this.removeScreenshotElements();
         await this.beforeExport();
         if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
             this.viewWrapperEl.append(this.compassContainerEl);
@@ -405,9 +480,6 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
             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();
@@ -452,6 +524,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     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;
@@ -597,26 +670,39 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     }
     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;
@@ -647,6 +733,139 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
             }
         }
     }
+    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 this; }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]
@@ -673,6 +892,8 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         "showIncludePopup": [4, "show-include-popup"],
         "showScaleBar": [4, "show-scale-bar"],
         "view": [16],
+        "maskBackground": [1, "mask-background"],
+        "maskBorder": [1, "mask-border"],
         "baseClass": [32],
         "exportIsLoading": [32],
         "messages": [32]

package/dist/components/instant-apps-filter-list2.js

@@ -97,6 +97,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         this.extentSelectorConfig = undefined;
         this.urlParams = undefined;
         this.view = undefined;
+        this.zoomBtn = true;
         this.loading = undefined;
         this.filterLayerExpressions = undefined;
         this.messages = undefined;
@@ -251,7 +252,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     renderZoomTo(layerExpression) {
         var _a;
         const id = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `zoom-to-${layerExpression.id}`;
-        return (h("div", { class: CSS.zoomTo }, h("calcite-button", { id: id, appearance: "transparent", kind: "neutral", scale: "s", iconStart: "magnifying-glass-plus", onClick: this.handleZoomTo.bind(this, layerExpression) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.zoomTo)));
+        return this.zoomBtn ? (h("div", { class: CSS.zoomTo }, h("calcite-button", { id: id, appearance: "transparent", kind: "neutral", scale: "s", iconStart: "magnifying-glass-plus", onClick: this.handleZoomTo.bind(this, layerExpression) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.zoomTo))) : undefined;
     }
     handleResetDatePicker(expression, layerExpression) {
         const datePicker = this.panelEl.querySelector(`[id='${expression.id}']`);
@@ -1023,6 +1024,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "extentSelectorConfig": [16],
         "urlParams": [1040],
         "view": [16],
+        "zoomBtn": [4, "zoom-btn"],
         "loading": [32],
         "filterLayerExpressions": [32],
         "messages": [32],

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

@@ -7,6 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as getElementDir } from './languageUtil.js';
 import { S as Sanitizer } from './index3.js';
 import { w as widthBreakpoints } from './breakpoints.js';
+import { g as getFontFamily } from './styles.js';
 import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
@@ -83,7 +84,7 @@ const InstantAppsHeader = /*@__PURE__*/ proxyCustomElement(class InstantAppsHead
         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/components/instant-apps-landing-page.js

@@ -3,7 +3,8 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getFontFamily } from './styles.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
@@ -47,6 +48,8 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.landingPageOpen = createEvent(this, "landingPageOpen", 7);
+        this.landingPageClose = createEvent(this, "landingPageClose", 7);
         this.titleText = undefined;
         this.subtitleText = undefined;
         this.descriptionText = undefined;
@@ -59,6 +62,15 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         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());
@@ -67,13 +79,12 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         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;
@@ -88,7 +99,7 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         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}`;
@@ -99,6 +110,9 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         return iconImageScale === 'l' ? l : iconImageScale === 's' ? s : m;
     }
     get el() { return this; }
+    static get watchers() { return {
+        "open": ["emitToggleEvent"]
+    }; }
     static get style() { return instantAppsLandingPageCss; }
 }, [1, "instant-apps-landing-page", {
         "titleText": [1, "title-text"],
@@ -112,7 +126,10 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         "disableTransition": [4, "disable-transition"],
         "backgroundImageSrc": [1, "background-image-src"],
         "open": [1028],
-        "entryButtonScale": [1, "entry-button-scale"]
+        "entryButtonScale": [1, "entry-button-scale"],
+        "fontFamily": [513, "font-family"]
+    }, undefined, {
+        "open": ["emitToggleEvent"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {