@esri/solutions-components 0.7.42 → 0.7.43

package/dist/components/layer-table2.js

@@ -88,10 +88,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * 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
@@ -128,7 +124,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._selectAllActive = false;
         this._showHideOpen = false;
         this._showOnlySelected = false;
-        this._sortActive = false;
         this._translations = undefined;
     }
     //--------------------------------------------------------------------------
@@ -226,14 +221,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             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.
      *
@@ -894,11 +881,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 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;
-                });
             });
         }
     }
@@ -1048,7 +1030,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 this._defaultFilterHonored = true;
             }
             this._showOnlySelected = false;
-            this._sortActive = false;
             await this._sortTable();
             this._updateToolbar();
         });
@@ -1101,15 +1082,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * 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");
+            });
         }
     }
     /**
@@ -1172,7 +1149,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _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
@@ -1464,8 +1441,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
-        "selectedIds": ["selectedIdsWatchHandler"],
-        "_sortActive": ["_sortActiveWatchHandler"]
+        "selectedIds": ["selectedIdsWatchHandler"]
     }; }
     static get style() { return layerTableCss; }
 }, [0, "layer-table", {
@@ -1496,7 +1472,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "_selectAllActive": [32],
         "_showHideOpen": [32],
         "_showOnlySelected": [32],
-        "_sortActive": [32],
         "_translations": [32]
     }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "levelChanged", "levelChanged"], [8, "noLayersFound", "noLayersFound"]], {
         "enableCSV": ["enableCSVWatchHandler"],
@@ -1506,8 +1481,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
-        "selectedIds": ["selectedIdsWatchHandler"],
-        "_sortActive": ["_sortActiveWatchHandler"]
+        "selectedIds": ["selectedIdsWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/esm/calcite-input-date-picker_3.entry.js

@@ -798,11 +798,13 @@ const InstantAppsFilterList = class {
         this.autoUpdateUrl = false;
         this.closeBtn = false;
         this.closeBtnOnClick = undefined;
+        this.comboboxOverlayPositioning = "absolute";
         this.closeBtnText = undefined;
         this.openFilters = false;
         this.extentSelector = false;
         this.extentSelectorConfig = undefined;
         this.urlParams = undefined;
+        this.filterCount = 0;
         this.view = undefined;
         this.zoomBtn = true;
         this.loading = undefined;
@@ -893,7 +895,7 @@ const InstantAppsFilterList = class {
     }
     renderCombobox(layerExpression, expression) {
         var _a;
-        return (h("label", { key: "combo-select", class: CSS$1.filterUIItemContainer }, h("span", null, expression.name), h("calcite-combobox", { id: expression.id.toString(), onCalciteComboboxChange: this.handleComboSelect.bind(this, expression, layerExpression), label: expression.name, placeholder: expression.placeholder, selectionMode: "multiple", "max-items": "6" }, (_a = expression.fields) === null || _a === void 0 ? void 0 : _a.map((value, index) => this.renderComboboxItem(expression, value, index)))));
+        return (h("label", { key: "combo-select", class: CSS$1.filterUIItemContainer }, h("span", null, expression.name), h("calcite-combobox", { id: expression.id.toString(), onCalciteComboboxChange: this.handleComboSelect.bind(this, expression, layerExpression), label: expression.name, placeholder: expression.placeholder, selectionMode: "multiple", "max-items": "6", overlayPositioning: this.comboboxOverlayPositioning }, (_a = expression.fields) === null || _a === void 0 ? void 0 : _a.map((value, index) => this.renderComboboxItem(expression, value, index)))));
     }
     renderComboboxItem(expression, value, index) {
         var _a;
@@ -1267,8 +1269,8 @@ const InstantAppsFilterList = class {
             let newConstraints = Object.assign({}, constraints);
             const geometry = newConstraints === null || newConstraints === void 0 ? void 0 : newConstraints.geometry;
             if (geometry) {
-                const tmpExtent = this.geometryJsonUtils.fromJSON(geometry);
-                if (tmpExtent && ((tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'extent' || (tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'polygon')) {
+                const tmpExtent = 'extent' in geometry ? geometry : this.geometryJsonUtils.fromJSON(geometry);
+                if ((tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'extent' || (tmpExtent === null || tmpExtent === void 0 ? void 0 : tmpExtent.type) === 'polygon') {
                     return tmpExtent;
                 }
             }
@@ -1397,6 +1399,7 @@ const InstantAppsFilterList = class {
         if ('URLSearchParams' in window) {
             const params = new URLSearchParams(document.location.search);
             const filters = (_a = params.get('filter')) === null || _a === void 0 ? void 0 : _a.split(';');
+            let filterCount = 0;
             filters === null || filters === void 0 ? void 0 : filters.forEach(filter => {
                 var _a;
                 const tmpFilter = JSON.parse(filter);
@@ -1407,6 +1410,7 @@ const InstantAppsFilterList = class {
                             var _a, _b;
                             if (((_a = expression.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_b = tmpFilter === null || tmpFilter === void 0 ? void 0 : tmpFilter.expressionId) === null || _b === void 0 ? void 0 : _b.toString())) {
                                 expression.active = true;
+                                filterCount++;
                                 if (tmpFilter.type === 'range') {
                                     expression.range = tmpFilter.range;
                                 }
@@ -1418,6 +1422,7 @@ const InstantAppsFilterList = class {
                     }
                 });
             });
+            this.filterCount = filterCount;
         }
     }
     createURLParamExpression(layerExpression, expression) {
@@ -1460,15 +1465,18 @@ const InstantAppsFilterList = class {
         if ('URLSearchParams' in window) {
             const params = new URLSearchParams(window.location.search);
             const expressions = [];
+            let filterCount = 0;
             (_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.forEach(layerExpr => {
                 var _a;
                 (_a = layerExpr === null || layerExpr === void 0 ? void 0 : layerExpr.expressions) === null || _a === void 0 ? void 0 : _a.forEach(expression => {
                     if (expression.active) {
+                        filterCount++;
                         const paramExpression = this.createURLParamExpression(layerExpr, expression);
                         expressions.push(JSON.stringify(paramExpression));
                     }
                 });
             });
+            this.filterCount = filterCount;
             if (expressions.length > 0) {
                 params.set('filter', expressions.join(';'));
             }

package/dist/esm/card-manager_3.entry.js

@@ -140,10 +140,6 @@ const LayerTable = class {
          * 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
@@ -180,7 +176,6 @@ const LayerTable = class {
         this._selectAllActive = false;
         this._showHideOpen = false;
         this._showOnlySelected = false;
-        this._sortActive = false;
         this._translations = undefined;
     }
     //--------------------------------------------------------------------------
@@ -278,14 +273,6 @@ const LayerTable = class {
             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.
      *
@@ -946,11 +933,6 @@ const LayerTable = class {
                 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;
-                });
             });
         }
     }
@@ -1100,7 +1082,6 @@ const LayerTable = class {
                 this._defaultFilterHonored = true;
             }
             this._showOnlySelected = false;
-            this._sortActive = false;
             await this._sortTable();
             this._updateToolbar();
         });
@@ -1153,15 +1134,11 @@ const LayerTable = class {
      * 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");
+            });
         }
     }
     /**
@@ -1224,7 +1201,7 @@ const LayerTable = class {
      */
     _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
@@ -1516,8 +1493,7 @@ const LayerTable = class {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
-        "selectedIds": ["selectedIdsWatchHandler"],
-        "_sortActive": ["_sortActiveWatchHandler"]
+        "selectedIds": ["selectedIdsWatchHandler"]
     }; }
 };
 LayerTable.style = layerTableCss;

package/dist/esm/{helpers-e8852b4a.js → helpers-633917fe.js}

@@ -147,7 +147,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;
@@ -349,9 +349,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;
@@ -425,7 +427,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
@@ -500,7 +502,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) {
@@ -508,24 +511,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 ||
@@ -537,14 +540,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
@@ -680,7 +683,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) => {
@@ -705,7 +708,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/esm/instant-apps-export.entry.js

@@ -190,17 +190,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);
   }
@@ -212,10 +224,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,
@@ -302,8 +320,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}";
 
@@ -352,7 +369,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)';
@@ -360,8 +377,8 @@ const InstantAppsExport = class {
         this.exportIsLoading = undefined;
         this.messages = undefined;
     }
-    watchIncludeMap(newValue) {
-        if (newValue) {
+    watchIncludeMap(includeMap) {
+        if (includeMap) {
             this.updateLegend();
         }
     }
@@ -431,7 +448,7 @@ const InstantAppsExport = class {
         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) });
@@ -471,6 +488,7 @@ const InstantAppsExport = class {
             document.body.prepend(this.printEl);
             this.handleExtraContent();
             if (this.includeMap) {
+                this.updateScaleBar();
                 this.updatePopupToPrint();
                 this.viewScreenshot();
                 this.handleImgLoaded();
@@ -584,11 +602,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();
             }
@@ -614,11 +632,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();
             }
@@ -637,18 +655,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(['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,
@@ -786,10 +808,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;
@@ -832,11 +859,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() {
@@ -844,18 +872,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 getElement(this); }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]