@esri/solutions-components 0.7.42 → 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;
     }
     //--------------------------------------------------------------------------
@@ -197,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.
      *
@@ -865,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;
-                });
             });
         }
     }
@@ -1019,7 +1001,6 @@ export class LayerTable {
                 this._defaultFilterHonored = true;
             }
             this._showOnlySelected = false;
-            this._sortActive = false;
             await this._sortTable();
             this._updateToolbar();
         });
@@ -1072,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");
+            });
         }
     }
     /**
@@ -1143,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
@@ -1765,7 +1742,6 @@ export class LayerTable {
             "_selectAllActive": {},
             "_showHideOpen": {},
             "_showOnlySelected": {},
-            "_sortActive": {},
             "_translations": {}
         };
     }
@@ -1813,9 +1789,6 @@ export class LayerTable {
             }, {
                 "propName": "selectedIds",
                 "methodName": "selectedIdsWatchHandler"
-            }, {
-                "propName": "_sortActive",
-                "methodName": "_sortActiveWatchHandler"
             }];
     }
     static get listeners() {

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"]

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

@@ -91,11 +91,13 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         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;
@@ -186,7 +188,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     }
     renderCombobox(layerExpression, expression) {
         var _a;
-        return (h("label", { key: "combo-select", class: CSS.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.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;
@@ -560,8 +562,8 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             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;
                 }
             }
@@ -690,6 +692,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         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);
@@ -700,6 +703,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
                             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;
                                 }
@@ -711,6 +715,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
                     }
                 });
             });
+            this.filterCount = filterCount;
         }
     }
     createURLParamExpression(layerExpression, expression) {
@@ -753,15 +758,18 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         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(';'));
             }
@@ -1068,11 +1076,13 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "autoUpdateUrl": [4, "auto-update-url"],
         "closeBtn": [4, "close-btn"],
         "closeBtnOnClick": [16],
+        "comboboxOverlayPositioning": [1, "combobox-overlay-positioning"],
         "closeBtnText": [1, "close-btn-text"],
         "openFilters": [4, "open-filters"],
         "extentSelector": [4, "extent-selector"],
         "extentSelectorConfig": [16],
         "urlParams": [1040],
+        "filterCount": [1026, "filter-count"],
         "view": [16],
         "zoomBtn": [4, "zoom-btn"],
         "loading": [32],

package/dist/components/instant-apps-interactive-legend-classic2.js

@@ -1191,20 +1191,27 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
         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 generateData(this.legendvm, this.reactiveUtils);
                     store.set('data', Object.assign(Object.assign({}, interactiveLegendState.data), data));
                     this.isLoading = false;
                     this.setupWatchersAndListeners();
                 }
-                catch (_c) {
+                catch (err) {
+                    console.error(err);
                     this.isLoading = false;
                 }
             });
@@ -1457,7 +1464,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     }
     getTitle(messages, titleInfo, // RendererTitle | DotDensityTitle | RampTitle | StretchMultibandTitle | ClusterTitle | string,
     isRamp) {
-        var _a;
+        var _a, _b;
         if (!titleInfo) {
             return undefined;
         }
@@ -1465,7 +1472,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
             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);
@@ -1492,7 +1499,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
             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,
             })