@esri/solutions-components 0.7.41 → 0.7.43

package/dist/collection/components/layer-table/layer-table.js

@@ -59,10 +59,6 @@ export class LayerTable {
          * boolean: When true any onChange handeling will be skipped
          */
         this._skipOnChange = false;
-        /**
-         * bool: When true the table is being sorted
-         */
-        this._tableSorting = false;
         /**
          * Store a reference to the table node after it's first created
          * and initializes the FeatureTable
@@ -99,7 +95,6 @@ export class LayerTable {
         this._selectAllActive = false;
         this._showHideOpen = false;
         this._showOnlySelected = false;
-        this._sortActive = false;
         this._translations = undefined;
     }
     //--------------------------------------------------------------------------
@@ -124,6 +119,16 @@ export class LayerTable {
             this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
         }
     }
+    /**
+     * Update the toolbar when the share button is enabled/disabled
+     */
+    enableShareWatchHandler() {
+        // this should be caught by component did render and is when I test locally
+        // however have had reported case where it is not somehow on devext so adding explicit check here
+        if (this._toolbar) {
+            this._updateToolbar();
+        }
+    }
     /**
      * watch for changes to the list of controls that will currently fit in the display
      */
@@ -149,17 +154,6 @@ export class LayerTable {
             this._initToolInfos();
         }
     }
-    /**
-     * watch for changes in map info and recheck the tool infos
-     */
-    async mapInfoWatchHandler() {
-        var _a;
-        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this._initToolInfos();
-        }
-        this._initLayerExpressions();
-        this._resetColumnTemplates();
-    }
     /**
      * watch for changes in map view and get the first layer
      */
@@ -198,14 +192,6 @@ export class LayerTable {
             this._selectAllActive = false;
         }
     }
-    /**
-     * When sortActive is false the user has not defined a sort and we should use the default sort
-     */
-    async _sortActiveWatchHandler() {
-        if (!this._sortActive) {
-            await this._sortTable();
-        }
-    }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
@@ -634,7 +620,7 @@ export class LayerTable {
                         this._setControlsThatFit(controlsThatFit, skipControls);
                     }
                 }
-            }, 5);
+            }, 250);
         }
     }
     /**
@@ -859,7 +845,6 @@ export class LayerTable {
                     },
                     container: node
                 });
-                this._table.columnPerformanceModeEnabled = false;
             });
             this._initColumnsInfo();
             this._checkEditEnabled();
@@ -867,11 +852,6 @@ export class LayerTable {
                 this._table.highlightIds.on("change", (evt) => {
                     void this._handleOnChange(evt);
                 });
-                this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-                    var _a, _b, _c, _d;
-                    this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
-                        ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
-                });
             });
         }
     }
@@ -992,19 +972,17 @@ export class LayerTable {
         if (!this._table) {
             await this._getTable(this._tableNode, columnTemplates);
         }
-        else if (columnTemplates) {
-            this._table.tableTemplate.columnTemplates = columnTemplates;
-        }
         this._table.layer = this._layer;
         this._table.view = this.mapView;
         this._checkEditEnabled();
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
         this._initToolInfos();
-        await this._table.when(async () => {
+        await this.reactiveUtils.once(() => this._table.state === "loaded")
+            .then(async () => {
             var _a, _b;
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
-            this._initColumnsInfo();
+            this._resetColumnTemplates();
             if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1) {
                 this._selectDefaultFeature(this.defaultOid);
                 this._defaultOidHonored = true;
@@ -1022,10 +1000,10 @@ export class LayerTable {
                 this._filterActive = true;
                 this._defaultFilterHonored = true;
             }
+            this._showOnlySelected = false;
+            await this._sortTable();
+            this._updateToolbar();
         });
-        this._showOnlySelected = false;
-        this._sortActive = false;
-        await this._sortTable();
     }
     /**
      * Store the column names and current hidden status to support show/hide of columns
@@ -1075,15 +1053,11 @@ export class LayerTable {
      * Sort the objectid field in descending order
      */
     async _sortTable() {
-        if (this._table && this._layer && !this._sortActive) {
-            if (!this._tableSorting && this.showNewestFirst) {
-                this._tableSorting = true;
-                await this._table.when();
-                await this._layer.when(() => {
-                    this._table.sortColumn(this._layer.objectIdField, "desc");
-                    this._tableSorting = false;
-                });
-            }
+        if (this._table && this._layer && this.showNewestFirst) {
+            await this._table.when();
+            await this._layer.when(() => {
+                this._table.sortColumn(this._layer.objectIdField, "desc");
+            });
         }
     }
     /**
@@ -1146,7 +1120,7 @@ export class LayerTable {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1768,7 +1742,6 @@ export class LayerTable {
             "_selectAllActive": {},
             "_showHideOpen": {},
             "_showOnlySelected": {},
-            "_sortActive": {},
             "_translations": {}
         };
     }
@@ -1798,15 +1771,15 @@ export class LayerTable {
             }, {
                 "propName": "enableInlineEdit",
                 "methodName": "enableInlineEditWatchHandler"
+            }, {
+                "propName": "enableShare",
+                "methodName": "enableShareWatchHandler"
             }, {
                 "propName": "_controlsThatFit",
                 "methodName": "_controlsThatFitWatchHandler"
             }, {
                 "propName": "isMobile",
                 "methodName": "isMobileWatchHandler"
-            }, {
-                "propName": "mapInfo",
-                "methodName": "mapInfoWatchHandler"
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
@@ -1816,9 +1789,6 @@ export class LayerTable {
             }, {
                 "propName": "selectedIds",
                 "methodName": "selectedIdsWatchHandler"
-            }, {
-                "propName": "_sortActive",
-                "methodName": "_sortActiveWatchHandler"
             }];
     }
     static get listeners() {

package/dist/collection/utils/downloadUtils.js

@@ -606,6 +606,9 @@ export function _prepareAttributeValue(attributeValue, attributeType, attributeD
  * @returns Promise resolving when function is done
  */
 export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = [], useFieldAliasNames = false) {
+    if (fields.length === 0) {
+        fields = layer.fields.map(f => f.name.toLowerCase());
+    }
     // Get the label formatting, if any
     const labelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
     // Because the label may actually come from a related layer, we'll use the layer that comes back from _getLabelFormat.
@@ -664,8 +667,7 @@ export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup =
     }
     else {
         // Get the features to export
-        const outFields = fields.length > 0 ? fields : undefined;
-        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
+        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, fields);
     }
     // Get field data types. Do we have any domain-based fields?
     const attributeOrigNames = {};

package/dist/collection/utils/downloadUtils.ts

@@ -846,6 +846,9 @@ export async function _prepareLabels(
   fields = [],
   useFieldAliasNames = false
 ): Promise<string[][]> {
+  if (fields.length === 0) {
+    fields = layer.fields.map(f => f.name.toLowerCase())
+  }
   // Get the label formatting, if any
   const labelFormatProps: ILabelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
 
@@ -915,8 +918,7 @@ export async function _prepareLabels(
 
   } else {
     // Get the features to export
-    const outFields = fields.length > 0 ? fields : undefined;
-    featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
+    featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, fields);
   }
 
   // Get field data types. Do we have any domain-based fields?

package/dist/components/downloadUtils.js

@@ -2925,6 +2925,9 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  * @returns Promise resolving when function is done
  */
 async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = [], useFieldAliasNames = false) {
+    if (fields.length === 0) {
+        fields = layer.fields.map(f => f.name.toLowerCase());
+    }
     // Get the label formatting, if any
     const labelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
     // Because the label may actually come from a related layer, we'll use the layer that comes back from _getLabelFormat.
@@ -2983,8 +2986,7 @@ async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true,
     }
     else {
         // Get the features to export
-        const outFields = fields.length > 0 ? fields : undefined;
-        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
+        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, fields);
     }
     // Get field data types. Do we have any domain-based fields?
     const attributeOrigNames = {};

package/dist/components/helpers.js

@@ -70,7 +70,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;
@@ -272,9 +272,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;
@@ -348,7 +350,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
@@ -423,7 +425,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) {
@@ -431,24 +434,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 ||
@@ -460,14 +463,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
@@ -603,7 +606,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) => {
@@ -628,7 +631,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/components/instant-apps-export.js

@@ -197,17 +197,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);
   }
@@ -219,10 +231,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,
@@ -309,8 +327,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}";
 
@@ -361,7 +378,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         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)';
@@ -369,8 +386,8 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         this.exportIsLoading = undefined;
         this.messages = undefined;
     }
-    watchIncludeMap(newValue) {
-        if (newValue) {
+    watchIncludeMap(includeMap) {
+        if (includeMap) {
             this.updateLegend();
         }
     }
@@ -440,7 +457,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         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() {
-        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) }), h("div", { class: CSS.print.scaleBarContainer, ref: this.handleScaleBarContainerEl.bind(this) }))));
+        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) }), h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
     }
     renderLegend() {
         return h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -480,6 +497,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
             document.body.prepend(this.printEl);
             this.handleExtraContent();
             if (this.includeMap) {
+                this.updateScaleBar();
                 this.updatePopupToPrint();
                 this.viewScreenshot();
                 this.handleImgLoaded();
@@ -593,11 +611,11 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         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();
             }
@@ -623,11 +641,11 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         });
     }
     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();
             }
@@ -646,18 +664,22 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         });
     }
     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(['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,
@@ -795,10 +817,15 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         }
     }
     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;
@@ -841,11 +868,12 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         }
     }
     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() {
@@ -853,18 +881,6 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         (_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 this; }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]