@esri/solutions-components 0.7.42 → 0.7.43

package/dist/cjs/{helpers-981dd775.js → helpers-e328869d.js}

@@ -149,7 +149,7 @@ async function createInteractiveLegendDataForLayer(legendViewModel, activeLayerI
     // Get Feature Layer View to query
     const fLayerView = await legendViewModel.view.whenLayerView(fLayer);
     await reactiveUtils.whenOnce(() => (fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.updating) === false);
-    const field = (_g = fLayer.renderer) === null || _g === void 0 ? void 0 : _g.get('field');
+    const field = (_g = fLayer.renderer) === null || _g === void 0 ? void 0 : _g.field;
     if (legendElement !== undefined) {
       (_h = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _h === void 0 ? void 0 : _h.forEach(legendElementInfo => {
         var _a;
@@ -351,9 +351,11 @@ function generateQueryExpressions(data, info, infoIndex, parentLegendElementInfo
   let queryExpression = isPredominance
     ? handlePredominanceExpression(info, fLayerView)
     : generateQueryExpression(info, field, infoIndex, legendElement, legendElementInfos, '');
-  const category = parentLegendElementInfo
-    ? (_b = (_a = categories.get(parentLegendElementInfo.title)) === null || _a === void 0 ? void 0 : _a.nestedInfos) === null || _b === void 0 ? void 0 : _b[infoIndex]
-    : categories.get((_c = info.label) !== null && _c !== void 0 ? _c : (_d = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.layer) === null || _d === void 0 ? void 0 : _d.id);
+  const category = categories
+    ? parentLegendElementInfo
+      ? (_b = (_a = categories.get(parentLegendElementInfo.title)) === null || _a === void 0 ? void 0 : _a.nestedInfos) === null || _b === void 0 ? void 0 : _b[infoIndex]
+      : categories.get((_c = info.label) !== null && _c !== void 0 ? _c : (_d = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.layer) === null || _d === void 0 ? void 0 : _d.id)
+    : null;
   if (category)
     category.selected = !(category === null || category === void 0 ? void 0 : category.selected);
   const hasOneValue = legendElementInfos && legendElementInfos.length === 1;
@@ -427,7 +429,7 @@ function generateQueryExpressions(data, info, infoIndex, parentLegendElementInfo
 }
 function generateQueryExpression(info, field, infoIndex, legendElement, legendElementInfos, normalizationField) {
   const { value } = info;
-  if (legendElement.type === 'symbol-table') {
+  if ((legendElement === null || legendElement === void 0 ? void 0 : legendElement.type) === 'symbol-table') {
     // Classify data size/color ramp
     if (!info.hasOwnProperty('value') || (Array.isArray(info.value) && (legendElementInfos === null || legendElementInfos === void 0 ? void 0 : legendElementInfos.length) === 1)) {
       // Classify data size/color ramp - 'Other' category
@@ -502,7 +504,8 @@ function checkNoneSelected(data) {
   }
 }
 function checkPredominance(fLayerView) {
-  const authoringInfoType = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.get('layer.renderer.authoringInfo.type');
+  var _a, _b, _c;
+  const authoringInfoType = (_c = (_b = (_a = fLayerView === null || fLayerView === void 0 ? void 0 : fLayerView.layer) === null || _a === void 0 ? void 0 : _a.renderer) === null || _b === void 0 ? void 0 : _b.authoringInfo) === null || _c === void 0 ? void 0 : _c.type;
   return authoringInfoType === 'predominance';
 }
 function checkRelationshipRamp(activeLayerInfo) {
@@ -510,24 +513,24 @@ function checkRelationshipRamp(activeLayerInfo) {
   return ((_a = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements[1]) === null || _a === void 0 ? void 0 : _a.type) === 'relationship-ramp';
 }
 function validateInteractivity(activeLayerInfo, legendElement, legendElementIndex) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const fLayer = activeLayerInfo.layer;
   const field = (_a = fLayer === null || fLayer === void 0 ? void 0 : fLayer.renderer) === null || _a === void 0 ? void 0 : _a.field;
   const type = legendElement === null || legendElement === void 0 ? void 0 : legendElement.type;
-  const layerView = activeLayerInfo.get('layerView');
-  const classBreakInfos = layerView === null || layerView === void 0 ? void 0 : layerView.get('layer.renderer.classBreakInfos');
-  const uniqueValueInfos = (layerView === null || layerView === void 0 ? void 0 : layerView.get('layer.renderer.uniqueValueInfos')) && field;
+  const layerView = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.layerView;
+  const classBreakInfos = (_c = (_b = layerView === null || layerView === void 0 ? void 0 : layerView.layer) === null || _b === void 0 ? void 0 : _b.renderer) === null || _c === void 0 ? void 0 : _c.classBreakInfos;
+  const uniqueValueInfos = ((_e = (_d = layerView === null || layerView === void 0 ? void 0 : layerView.layer) === null || _d === void 0 ? void 0 : _d.renderer) === null || _e === void 0 ? void 0 : _e.uniqueValueInfos) && field;
   const isSizeRamp = type === 'size-ramp';
   const isColorRamp = type === 'color-ramp';
   const opacityRamp = type === 'opacity-ramp';
   const heatmapRamp = type === 'heatmap-ramp';
   const hasMoreThanOneClassBreak = layerView && classBreakInfos && classBreakInfos.length > 1;
-  const authoringInfoType = layerView === null || layerView === void 0 ? void 0 : layerView.get('layer.renderer.authoringInfo.type');
+  const authoringInfoType = (_h = (_g = (_f = layerView === null || layerView === void 0 ? void 0 : layerView.layer) === null || _f === void 0 ? void 0 : _f.renderer) === null || _g === void 0 ? void 0 : _g.authoringInfo) === null || _h === void 0 ? void 0 : _h.type;
   const classifyDataCheckedColorRamp = authoringInfoType === 'class-breaks-color';
   const classifyDataCheckedSizeRamp = authoringInfoType === 'class-breaks-size';
-  const singleSymbol = ((_b = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _b === void 0 ? void 0 : _b.length) === 1 && !field;
+  const singleSymbol = ((_j = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _j === void 0 ? void 0 : _j.length) === 1 && !field;
   const isRelationshipRamp = authoringInfoType === 'relationship' && (legendElement === null || legendElement === void 0 ? void 0 : legendElement.type) !== 'size-ramp' && (legendElement === null || legendElement === void 0 ? void 0 : legendElement.type) !== 'symbol-table';
-  const isFeatureLayer = (activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.get('layer.type')) === 'feature';
+  const isFeatureLayer = ((_k = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.layer) === null || _k === void 0 ? void 0 : _k.type) === 'feature';
   const moreThanOneClassBreak = isFeatureLayer && field && !isColorRamp && !isSizeRamp && hasMoreThanOneClassBreak;
   const oneClassBreak = isFeatureLayer && field && !isColorRamp && !isSizeRamp && !hasMoreThanOneClassBreak ? true : false;
   const validate = oneClassBreak ||
@@ -539,14 +542,14 @@ function validateInteractivity(activeLayerInfo, legendElement, legendElementInde
     uniqueValueInfos
     ? true
     : false;
-  const hasClustering = (activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.get('layer.featureReduction')) && ((_c = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements[legendElementIndex]) === null || _c === void 0 ? void 0 : _c.type) === 'size-ramp';
-  const isSingleSymbol = (legendElement === null || legendElement === void 0 ? void 0 : legendElement.type) === 'symbol-table' && ((_d = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _d === void 0 ? void 0 : _d.length) === 1;
+  const hasClustering = ((_l = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.layer) === null || _l === void 0 ? void 0 : _l.featureReduction) && ((_o = (_m = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements) === null || _m === void 0 ? void 0 : _m[legendElementIndex]) === null || _o === void 0 ? void 0 : _o.type) === 'size-ramp';
+  const isSingleSymbol = (legendElement === null || legendElement === void 0 ? void 0 : legendElement.type) === 'symbol-table' && ((_p = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _p === void 0 ? void 0 : _p.length) === 1;
   const hasColorRamp = !(activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements.every(legendElement => legendElement.type !== 'color-ramp'));
   const hasSizeRamp = !(activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements.every(legendElement => legendElement.type !== 'size-ramp'));
   const singleSymbolColor = isSingleSymbol && hasColorRamp;
   const singleSymbolSize = isSingleSymbol && hasSizeRamp;
-  const isUnclassifiedSizeRamp = (_e = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _e === void 0 ? void 0 : _e.every(info => typeof info.value === 'number');
-  const isBinning = ((_g = (_f = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.type) === 'symbol-table' && ((_j = (_h = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements) === null || _h === void 0 ? void 0 : _h[1]) === null || _j === void 0 ? void 0 : _j.type) === 'color-ramp';
+  const isUnclassifiedSizeRamp = (_q = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _q === void 0 ? void 0 : _q.every(info => typeof info.value === 'number');
+  const isBinning = ((_s = (_r = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements) === null || _r === void 0 ? void 0 : _r[0]) === null || _s === void 0 ? void 0 : _s.type) === 'symbol-table' && ((_u = (_t = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.legendElements) === null || _t === void 0 ? void 0 : _t[1]) === null || _u === void 0 ? void 0 : _u.type) === 'color-ramp';
   const isDotDensity = authoringInfoType === 'dot-density';
   const isValidated = isFeatureLayer && !hasClustering && !opacityRamp && !heatmapRamp && !singleSymbolColor && !singleSymbolSize && !isUnclassifiedSizeRamp && !isBinning && !isDotDensity
     ? classBreakInfos
@@ -682,7 +685,7 @@ async function handleFeatureCount(legendViewModel, data) {
     const legendElement = activeLayerInfo.legendElements[0];
     const fLayer = activeLayerInfo.layer;
     const fLayerView = (_b = data[(_a = activeLayerInfo === null || activeLayerInfo === void 0 ? void 0 : activeLayerInfo.layer) === null || _a === void 0 ? void 0 : _a.id]) === null || _b === void 0 ? void 0 : _b.fLayerView;
-    const field = (_c = fLayer.renderer) === null || _c === void 0 ? void 0 : _c.get('field');
+    const field = (_c = fLayer.renderer) === null || _c === void 0 ? void 0 : _c.field;
     const counts = [];
     countPromises[activeLayerInfo.layer.id] = [];
     (_d = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _d === void 0 ? void 0 : _d.forEach((info, infoIndex) => {
@@ -707,7 +710,7 @@ async function handleFeatureCount(legendViewModel, data) {
       const legendElement = aliChild.legendElements[0];
       const fLayer = aliChild.layer;
       const fLayerView = (_b = data[(_a = aliChild === null || aliChild === void 0 ? void 0 : aliChild.layer) === null || _a === void 0 ? void 0 : _a.id]) === null || _b === void 0 ? void 0 : _b.fLayerView;
-      const field = (_c = fLayer.renderer) === null || _c === void 0 ? void 0 : _c.get('field');
+      const field = (_c = fLayer.renderer) === null || _c === void 0 ? void 0 : _c.field;
       (_d = legendElement === null || legendElement === void 0 ? void 0 : legendElement.infos) === null || _d === void 0 ? void 0 : _d.forEach((info, infoIndex) => childCounts.push(getInfoCount(legendViewModel.view.extent, fLayerView, field, info, infoIndex, legendElement)));
       countPromises[aliChild.layer.id] = childCounts;
     };

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

@@ -194,17 +194,29 @@ const printStyling = `
     width: 100%;
     position: absolute;
     bottom: 15px;
-    left: 15px;
+    margin: 0 15px;
   }
 
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
+    color: #323232;
     font-size: 10px;
+    padding: 0 4px;
+  }
+  
+  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label {
+    height: 10px;
+    padding: 0 2px;
+    line-height: 11px;
   }
 
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__bar-container:nth-child(1n+3) {
     display: none;
   }
 
+  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__bar-container.esri-scale-bar__bar-container--line {
+    align-items: center;
+  }
+
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__line {
     background-color: rgba(255, 255, 255, 0.66);
   }
@@ -216,10 +228,16 @@ const printStyling = `
 
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom {
     width: var(--instant-apps-scale-bar-bottom) !important;
+    border-top: 2px solid #323232;
   }
 
-  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
-    color: #323232;
+  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label-container--line {
+    position: unset;
+    margin: 0 2px;
+    background-color: rgba(255, 255, 255, 0.66);
+    height: 10px;
+    display: flex;
+    align-items: center;
   }
 
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top:before,
@@ -306,8 +324,7 @@ const screenshotStyling = `
 
 .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}";
 
@@ -356,7 +373,7 @@ const InstantAppsExport = class {
         this.showIncludeLegend = true;
         this.showIncludeMap = false;
         this.showIncludePopup = true;
-        this.showScaleBar = true;
+        this.showScaleBar = false;
         this.view = undefined;
         this.maskBackground = 'rgba(255, 51, 0, 0.1)';
         this.maskBorder = '2px dashed rgb(255, 51, 0)';
@@ -364,8 +381,8 @@ const InstantAppsExport = class {
         this.exportIsLoading = undefined;
         this.messages = undefined;
     }
-    watchIncludeMap(newValue) {
-        if (newValue) {
+    watchIncludeMap(includeMap) {
+        if (includeMap) {
             this.updateLegend();
         }
     }
@@ -435,7 +452,7 @@ const InstantAppsExport = class {
         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() {
-        return (index.h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, index.h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? index.h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, index.h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), index.h("div", { class: CSS.print.scaleBarContainer, ref: this.handleScaleBarContainerEl.bind(this) }))));
+        return (index.h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, index.h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? index.h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, index.h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), index.h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
     }
     renderLegend() {
         return index.h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -475,6 +492,7 @@ const InstantAppsExport = class {
             document.body.prepend(this.printEl);
             this.handleExtraContent();
             if (this.includeMap) {
+                this.updateScaleBar();
                 this.updatePopupToPrint();
                 this.viewScreenshot();
                 this.handleImgLoaded();
@@ -588,11 +606,11 @@ const InstantAppsExport = class {
         this.handleCompassCreation();
     }
     handleLegendCreation() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (this.includeMap && this.view != null && this.showIncludeLegend && this.legendContainerEl != null) {
             const map = this.view.map;
             const legendMap = (_b = (_a = this.legend) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem.id);
+            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _d === void 0 ? void 0 : _d.id);
             if (!checkId) {
                 this.updateLegend();
             }
@@ -618,11 +636,11 @@ const InstantAppsExport = class {
         });
     }
     handleCompassCreation() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (this.includeMap && this.view != null && this.compassContainerEl != null) {
             const map = this.view.map;
             const compassMap = (_b = (_a = this.compass) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (compassMap === null || compassMap === void 0 ? void 0 : compassMap.portalItem.id);
+            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = compassMap === null || compassMap === void 0 ? void 0 : compassMap.portalItem) === null || _d === void 0 ? void 0 : _d.id);
             if (!checkId) {
                 this.updateCompass();
             }
@@ -641,18 +659,22 @@ const InstantAppsExport = class {
         });
     }
     updateScaleBar() {
-        var _a;
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
-            var _a;
-            (_a = this.scaleBar) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.scaleBar = null;
-            const [ScaleBar] = await loadModules.loadModules(['esri/widgets/ScaleBar']);
-            this.scaleBar = new ScaleBar({ container: this.scaleBarContainerEl, unit: 'dual', view });
-        });
+        var _a, _b, _c;
+        if (this.scaleBarContainerEl) {
+            this.scaleBarContainerEl.innerHTML = '';
+            if (this.showScaleBar) {
+                const scaleBar = (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelector('.esri-scale-bar.esri-widget')) === null || _c === void 0 ? void 0 : _c.cloneNode(true);
+                if (scaleBar != null) {
+                    this.scaleBarContainerEl.append(scaleBar);
+                }
+            }
+        }
     }
     async viewScreenshot() {
+        var _a;
         if (this.view != null && this.includeMap) {
             if (this.screenshot == null) {
+                (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('instant-apps-export-print__scale-bar-container--position', this.view.width > 1000);
                 this.screenshot = await this.view.takeScreenshot({
                     width: this.view.width * 2,
                     height: this.view.height * 2,
@@ -790,10 +812,15 @@ const InstantAppsExport = class {
         }
     }
     maskScreenshot() {
+        var _a;
         if (this.view != null && this.area != null) {
             this.view.removeHandles(dragHandlerName);
             const height = this.area.height;
             const width = this.area.width;
+            if (this.showScaleBar) {
+                const moveSBUnit = this.view.width > 1000 && this.view.width * 0.75 < width;
+                (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('instant-apps-export-print__scale-bar-container--position', moveSBUnit);
+            }
             this.view.takeScreenshot({ area: this.area, width: width * 2, height: height * 2, format: 'jpg' }).then(screenshot => {
                 var _a;
                 this.screenshot = screenshot;
@@ -836,11 +863,12 @@ const InstantAppsExport = class {
         }
     }
     setScalebarWidth(bar, position) {
+        var _a;
         if (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}%`);
+            (_a = this.scaleBarContainerEl) === null || _a === void 0 ? void 0 : _a.style.setProperty(`--instant-apps-scale-bar-${position}`, `${widthPercentage}%`);
         }
     }
     removeScreenshotElements() {
@@ -848,18 +876,6 @@ const InstantAppsExport = class {
         (_a = this.screenshotPreview) === null || _a === void 0 ? void 0 : _a.remove();
         (_b = this.screenshotStyle) === null || _b === void 0 ? void 0 : _b.remove();
     }
-    handleScaleBarContainerEl(el) {
-        var _a, _b, _c;
-        if (this.showScaleBar && ((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
-            const map = this.view.map;
-            const scaleBarMap = (_c = (_b = this.scaleBar) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.map;
-            this.scaleBarContainerEl = el;
-            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (scaleBarMap === null || scaleBarMap === void 0 ? void 0 : scaleBarMap.portalItem.id);
-            if (!checkId) {
-                this.updateScaleBar();
-            }
-        }
-    }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
-const helpers = require('./helpers-981dd775.js');
+const helpers = require('./helpers-e328869d.js');
 const _commonjsHelpers = require('./_commonjsHelpers-384729db.js');
 const loadModules = require('./loadModules-51c30ab9.js');
 require('./index-ae65e42f.js');
@@ -1183,20 +1183,27 @@ const InstantAppsInteractiveLegendClassic = class {
         this.intl = intl;
     }
     async componentDidLoad() {
+        this.initLegend();
+    }
+    async initLegend() {
         try {
             await this.reactiveUtils.whenOnce(() => { var _a; return (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view; });
             this.legendvm.view.when(async () => {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 try {
-                    await ((_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map).loadAll();
-                    await this.reactiveUtils.whenOnce(() => { var _a, _b; return ((_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.updating) === false; });
                     // Initial data setup
+                    const map = await ((_c = (_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.load());
+                    await ((_d = map === null || map === void 0 ? void 0 : map.basemap) === null || _d === void 0 ? void 0 : _d.load());
+                    const allLayers = map === null || map === void 0 ? void 0 : map.allLayers;
+                    const promises = allLayers === null || allLayers === void 0 ? void 0 : allLayers.map(layer => layer.load());
+                    await Promise.allSettled(promises);
                     const data = await helpers.generateData(this.legendvm, this.reactiveUtils);
                     helpers.store.set('data', Object.assign(Object.assign({}, helpers.interactiveLegendState.data), data));
                     this.isLoading = false;
                     this.setupWatchersAndListeners();
                 }
-                catch (_c) {
+                catch (err) {
+                    console.error(err);
                     this.isLoading = false;
                 }
             });
@@ -1449,7 +1456,7 @@ const InstantAppsInteractiveLegendClassic = class {
     }
     getTitle(messages, titleInfo, // RendererTitle | DotDensityTitle | RampTitle | StretchMultibandTitle | ClusterTitle | string,
     isRamp) {
-        var _a;
+        var _a, _b;
         if (!titleInfo) {
             return undefined;
         }
@@ -1457,7 +1464,7 @@ const InstantAppsInteractiveLegendClassic = class {
             return titleInfo;
         }
         if ('value' in titleInfo || 'unit' in titleInfo) {
-            return this.intl.substitute(messages.dotValue, titleInfo);
+            return this.intl.substitute((_a = messages === null || messages === void 0 ? void 0 : messages.dotValue) !== null && _a !== void 0 ? _a : '', titleInfo);
         }
         if ('colorName' in titleInfo || 'bandName' in titleInfo) {
             return messages[titleInfo.colorName] + ': ' + (messages[titleInfo.bandName] || titleInfo.bandName);
@@ -1484,7 +1491,7 @@ const InstantAppsInteractiveLegendClassic = class {
             bundleKey = titleInfo.normField ? 'showNormField' : titleInfo.normByPct ? 'showNormPct' : titleInfo.field ? 'showField' : null;
         }
         return bundleKey
-            ? (_a = this.intl) === null || _a === void 0 ? void 0 : _a.substitute(bundleKey === 'showField' ? '{field}' : messages[bundleKey], {
+            ? (_b = this.intl) === null || _b === void 0 ? void 0 : _b.substitute(bundleKey === 'showField' ? '{field}' : messages[bundleKey], {
                 field: titleInfo.field,
                 normField: titleInfo.normField,
             })

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const helpers = require('./helpers-981dd775.js');
+const helpers = require('./helpers-e328869d.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 require('./index-ae65e42f.js');

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
-const helpers = require('./helpers-981dd775.js');
+const helpers = require('./helpers-e328869d.js');
 require('./loadModules-51c30ab9.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
-const helpers = require('./helpers-981dd775.js');
+const helpers = require('./helpers-e328869d.js');
 const loadModules = require('./loadModules-51c30ab9.js');
 require('./index-ae65e42f.js');
 require('./esri-loader-a91c0ec1.js');

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-105cf2b9.js');
 const loadModules = require('./loadModules-51c30ab9.js');
 const locale = require('./locale-dab3f46a.js');
-const helpers = require('./helpers-981dd775.js');
+const helpers = require('./helpers-e328869d.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 require('./languageUtil-a3b464f8.js');