@esri/solutions-components 0.8.6-6.3 → 0.8.6

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

@@ -36,37 +36,36 @@ const baseClassDark = 'instant-apps-filter-list calcite-mode-dark';
 const supportedTypes = ['feature', 'geojson', 'wfs', 'csv', 'scene', 'subtype-group', 'point-cloud', 'map-image', 'sublayer'];
 
 function handleSingleQuote(value) {
-    return value.replaceAll("'", "''");
+  return value.replaceAll("'", "''");
 }
 function convertToDate(date, includeTime = false) {
-    if (date) {
-        const tmpDate = new Date(date);
-        const formattedDate = `${tmpDate.getFullYear()}-${tmpDate.getMonth() + 1}-${tmpDate.getDate()}`;
-        if (includeTime) {
-            const time = `${tmpDate.getHours()}:${tmpDate.getMinutes()}:${tmpDate.getSeconds()}`;
-            return `${formattedDate} ${time}`;
-        }
-        else {
-            return formattedDate;
-        }
-    }
-    return;
+  if (date) {
+    const tmpDate = new Date(date);
+    const formattedDate = `${tmpDate.getFullYear()}-${tmpDate.getMonth() + 1}-${tmpDate.getDate()}`;
+    if (includeTime) {
+      const time = `${tmpDate.getHours()}:${tmpDate.getMinutes()}:${tmpDate.getSeconds()}`;
+      return `${formattedDate} ${time}`;
+    }
+    else {
+      return formattedDate;
+    }
+  }
+  return;
 }
 function resetDatePicker(datePicker) {
-    var _a;
-    if (datePicker != null) {
-        datePicker.value = ['', ''];
-        const inputs = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-input');
-        if (inputs != null) {
-            for (const input of inputs) {
-                input.value = '';
-            }
-        }
-    }
+  var _a;
+  if (datePicker != null) {
+    datePicker.value = ['', ''];
+    const inputs = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-input');
+    if (inputs != null) {
+      for (const input of inputs) {
+        input.value = '';
+      }
+    }
+  }
 }
 
 const instantAppsFilterListCss = ":host{display:block}.instant-apps-filter-list *{box-sizing:border-box}.instant-apps-filter-list__container{height:100%}.instant-apps-filter-list__container calcite-block:last-of-type{margin-bottom:0}.instant-apps-filter-list__footer{padding:12px;display:flex}.instant-apps-filter-list__footer calcite-button:nth-child(2){margin-left:6px}.instant-apps-filter-list__item-container,.instant-apps-filter-list__item-container--user-input{display:flex;justify-content:space-between;align-items:center}.instant-apps-filter-list__item-container:not(:last-child),.instant-apps-filter-list__item-container--user-input:not(:last-child){padding-bottom:20px}.instant-apps-filter-list__item-container--user-input{margin:0;display:flex;flex-direction:column;align-items:flex-start}.instant-apps-filter-list__item-container--user-input>span{margin:0 0 6px;font-size:14px;font-weight:normal}.instant-apps-filter-list__item-container--user-input calcite-combobox{width:100%;font-size:16px;--calcite-combobox-input-height:24px}.instant-apps-filter-list__number-input-container{width:100%;display:flex;justify-content:center}.instant-apps-filter-list__number-input-container calcite-slider{width:90%}.instant-apps-filter-list__date-picker-input-container{display:flex;align-items:center;justify-content:unset;width:100%}.instant-apps-filter-list__date-picker-input-container calcite-action{height:64px;border-top:1px solid var(--calcite-color-border-input);border-right:1px solid var(--calcite-color-border-input);border-bottom:1px solid var(--calcite-color-border-input)}.instant-apps-filter-list__title{margin-right:20px}.instant-apps-filter-list__title>p{font-size:14px;font-weight:normal;margin:0}.instant-apps-filter-list__checkbox-container{display:flex}.instant-apps-filter-list__checkbox-container calcite-checkbox{height:18px}.instant-apps-filter-list__operator-description{margin:0;--calcite-font-size--1:12px}.instant-apps-filter-list__zoom-to{display:flex;justify-content:flex-end;margin:8px 0 20px}.instant-apps-filter-list__zoom-to calcite-action{width:-moz-min-content;width:min-content}.instant-apps-filter-list calcite-input-date-picker{--calcite-font-size--1:16px}@media (prefers-reduced-motion){.instant-apps-filter-list calcite-loader{--calcite-internal-duration-factor:2;--calcite-internal-animation-timing-slow:calc(300ms * 2)}}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__header-container{background:#2b2b2b;color:#fff}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__operator-description{background:#353535}";
-const InstantAppsFilterListStyle0 = instantAppsFilterListCss;
 
 const CSS = {
     base: 'instant-apps-filter-list',
@@ -163,7 +162,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     render() {
         const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
         const footer = this.closeBtn ? this.renderFullFooter() : this.renderFooter();
-        return (h(Host, { key: '5548c6406452810de75b821ef07cd394fbf1dd06' }, h("calcite-panel", { key: '54b4a9bb11b500ae56f71ecbc9928b0e51337d50', class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { key: '69ae0bcf9f347dc3b4813611c9edbb38eba8ee72', slot: "header-content", name: "filter-header-content" }), h("slot", { key: '5122cfc894077bd7dcffe8ec973e9d67293da43a', slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS.filterContainer }, filterConfig, footer))));
+        return (h(Host, null, h("calcite-panel", { class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { slot: "header-content", name: "filter-header-content" }), h("slot", { slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS.filterContainer }, filterConfig, footer))));
     }
     renderLoading() {
         return h("calcite-loader", { label: "Loading filters..." });
@@ -614,12 +613,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             update = this.updateCodedValueExpression(expression, layerField);
         }
         else if (type === 'range') {
-            if (expression.displayOption === 'drop-down') {
-                update = await this.updateStringExpression(layerExpression, expression);
-            }
-            else {
-                update = this.updateRangeExpression(expression, layerField);
-            }
+            update = this.updateRangeExpression(expression, layerField);
         }
         else if (expression.active && (type === 'checkbox' || type == null)) {
             update = true;
@@ -1076,7 +1070,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "view": ["watchViewHandler"],
         "layerExpressions": ["watchLayerExpressions"]
     }; }
-    static get style() { return InstantAppsFilterListStyle0; }
+    static get style() { return instantAppsFilterListCss; }
 }, [1, "instant-apps-filter-list", {
         "layerExpressions": [1040],
         "autoUpdateUrl": [4, "auto-update-url"],

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

@@ -12,8 +12,7 @@ import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const instantAppsHeaderCss = ":host{--instant-apps-header-height:auto;--instant-apps-header-min-height:50px;--instant-apps-header-title-text-link-decoration:underline;--instant-apps-header-height--logo-scale--s:55px;--instant-apps-header-logo-width--logo-scale--s:35px;--instant-apps-header-logo-height--logo-scale--s:35px;--instant-apps-header-height--logo-scale--m:70px;--instant-apps-header-logo-width--logo-scale--m:50px;--instant-apps-header-logo-height--logo-scale--m:50px;--instant-apps-header-height--logo-scale--l:80px;--instant-apps-header-logo-width--logo-scale--l:60px;--instant-apps-header-logo-height--logo-scale--l:60px;--instant-apps-header-actions-end-height:auto;width:100%}:host .image.image_resized img{width:100%}:host .instant-apps-header--standard{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--instant-apps-header-height);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);min-height:var(--instant-apps-header-min-height)}:host .instant-apps-header--standard .instant-apps-header__header-container{display:flex;align-items:center;width:100%;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container slot{display:flex;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*){display:flex;min-height:var(--instant-apps-header-min-height);height:var(--instant-apps-header-height)}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) calcite-button{height:100%}:host .instant-apps-header--standard .instant-apps-header__header-content{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;height:inherit;padding:5px 10px}:host .instant-apps-header--standard .instant-apps-header__header-content a{display:flex;align-items:center;-webkit-text-decoration:var(--instant-apps-header-title-text-link-decoration);text-decoration:var(--instant-apps-header-title-text-link-decoration)}:host .instant-apps-header--standard .instant-apps-header__header-content a img{padding-right:0}:host .instant-apps-header--standard .instant-apps-header__header-content img{margin:10px}:host .instant-apps-header--standard .instant-apps-header__header-content h1{margin:0;font-size:1.25rem;color:var(--calcite-color-text-1);font-weight:430;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .instant-apps-header--standard .instant-apps-header__header-content #infoButton{margin-inline-start:10px}:host .instant-apps-header--standard .instant-apps-header__header-content--center{justify-content:center}:host .instant-apps-header--standard .instant-apps-header__header-content--right{justify-content:end}:host .instant-apps-header__logo-height--s{height:var(--instant-apps-header-height--logo-scale--s)}:host .instant-apps-header__logo-height--s .instant-apps-header__header-content h1{font-size:1.125rem}:host .instant-apps-header__logo-scale--s{width:var(--instant-apps-header-logo-width--logo-scale--s);height:var(--instant-apps-header-logo-height--logo-scale--s)}:host .instant-apps-header__logo-height--m{height:var(--instant-apps-header-height--logo-scale--m)}:host .instant-apps-header__logo-scale--m{width:var(--instant-apps-header-logo-width--logo-scale--m);height:var(--instant-apps-header-logo-height--logo-scale--m)}:host .instant-apps-header__logo-height--l{height:var(--instant-apps-header-height--logo-scale--l)}:host .instant-apps-header__logo-height--l .instant-apps-header__header-content h1{font-size:1.375rem}:host .instant-apps-header__logo-scale--l{width:var(--instant-apps-header-logo-width--logo-scale--l);height:var(--instant-apps-header-logo-height--logo-scale--l)}:host .instant-apps-header__actions-end-container{height:var(--instant-apps-header-actions-end-height);display:flex}:host .instant-apps-header__sign-in-container{height:inherit;display:flex;align-items:center}:host .instant-apps-header__sign-in-container calcite-dropdown,:host .instant-apps-header__sign-in-container calcite-navigation-user{height:100%}:host .instant-apps-header__sign-in-container calcite-button{margin:0 10px}:host .instant-apps-header__sign-in-container calcite-dropdown-group{min-width:140px}";
-const InstantAppsHeaderStyle0 = instantAppsHeaderCss;
+const instantAppsHeaderCss = ":host{--instant-apps-header-height:auto;--instant-apps-header-min-height:50px;--instant-apps-header-title-text-link-decoration:underline;--instant-apps-header-height--logo-scale--s:55px;--instant-apps-header-logo-width--logo-scale--s:35px;--instant-apps-header-logo-height--logo-scale--s:35px;--instant-apps-header-height--logo-scale--m:70px;--instant-apps-header-logo-width--logo-scale--m:50px;--instant-apps-header-logo-height--logo-scale--m:50px;--instant-apps-header-height--logo-scale--l:80px;--instant-apps-header-logo-width--logo-scale--l:60px;--instant-apps-header-logo-height--logo-scale--l:60px;width:100%}:host .image.image_resized img{width:100%}:host .instant-apps-header--standard{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--instant-apps-header-height);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);min-height:var(--instant-apps-header-min-height)}:host .instant-apps-header--standard .instant-apps-header__header-container{display:flex;align-items:center;width:100%;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container slot{display:flex;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*){display:flex;min-height:var(--instant-apps-header-min-height);height:var(--instant-apps-header-height)}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) calcite-button{height:100%}:host .instant-apps-header--standard .instant-apps-header__header-content{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;height:inherit;padding:5px 10px}:host .instant-apps-header--standard .instant-apps-header__header-content a{display:flex;align-items:center;-webkit-text-decoration:var(--instant-apps-header-title-text-link-decoration);text-decoration:var(--instant-apps-header-title-text-link-decoration)}:host .instant-apps-header--standard .instant-apps-header__header-content a img{padding-right:0}:host .instant-apps-header--standard .instant-apps-header__header-content img{margin:10px}:host .instant-apps-header--standard .instant-apps-header__header-content h1{margin:0;font-size:1.25rem;color:var(--calcite-color-text-1);font-weight:430;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .instant-apps-header--standard .instant-apps-header__header-content #infoButton{margin-inline-start:10px}:host .instant-apps-header--standard .instant-apps-header__header-content--center{justify-content:center}:host .instant-apps-header--standard .instant-apps-header__header-content--right{justify-content:end}:host .instant-apps-header__logo-height--s{height:var(--instant-apps-header-height--logo-scale--s)}:host .instant-apps-header__logo-height--s .instant-apps-header__header-content h1{font-size:1.125rem}:host .instant-apps-header__logo-scale--s{width:var(--instant-apps-header-logo-width--logo-scale--s);height:var(--instant-apps-header-logo-height--logo-scale--s)}:host .instant-apps-header__logo-height--m{height:var(--instant-apps-header-height--logo-scale--m)}:host .instant-apps-header__logo-scale--m{width:var(--instant-apps-header-logo-width--logo-scale--m);height:var(--instant-apps-header-logo-height--logo-scale--m)}:host .instant-apps-header__logo-height--l{height:var(--instant-apps-header-height--logo-scale--l)}:host .instant-apps-header__logo-height--l .instant-apps-header__header-content h1{font-size:1.375rem}:host .instant-apps-header__logo-scale--l{width:var(--instant-apps-header-logo-width--logo-scale--l);height:var(--instant-apps-header-logo-height--logo-scale--l)}:host .instant-apps-header__logo-height--s,:host .instant-apps-header__logo-height--m,:host .instant-apps-header__logo-height--l{padding-right:10px}:host .instant-apps-header--rtl.instant-apps-header__logo-height--s,:host .instant-apps-header--rtl.instant-apps-header__logo-height--m,:host .instant-apps-header--rtl.instant-apps-header__logo-height--l{padding-right:0;padding-left:10px}";
 
 const CSS = {
     base: 'instant-apps-header--standard',
@@ -23,7 +22,6 @@ const CSS = {
     logoScale: 'instant-apps-header__logo-scale--',
     logoHeight: 'instant-apps-header__logo-height--',
     standardHeight: 'instant-apps-header__standard-height',
-    actionsEndContainer: 'instant-apps-header__actions-end-container',
     alignment: {
         center: 'instant-apps-header__header-content--center',
         right: 'instant-apps-header__header-content--right',
@@ -87,7 +85,7 @@ const InstantAppsHeader = /*@__PURE__*/ proxyCustomElement(class InstantAppsHead
         const title = this.renderTitle();
         const headerContentClass = this.headerAlignment === 'right' || this.headerAlignment === 'center' ? CSS.headerContent.concat(' ', CSS.alignment[this.headerAlignment]) : CSS.headerContent;
         const fontFamily = getFontFamily(this.fontFamily);
-        return (h(Host, { key: 'f93285efa9fe03f2cdedfe0e870f7cb44802e151' }, this.customHeaderHtml ? ([h("style", null, this.customHeaderCss), h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, h("div", { class: CSS.headerContainer }, h("span", { class: headerContentClass }, logo, title, this.infoButton ? (h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), h("div", { class: CSS.actionsEndContainer }, h("slot", { name: "actions-end" })))))));
+        return (h(Host, null, this.customHeaderHtml ? ([h("style", null, this.customHeaderCss), h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, h("div", { class: CSS.headerContainer }, h("span", { class: headerContentClass }, logo, title, this.infoButton ? (h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), h("slot", { name: "actions-end" }))))));
     }
     renderLogo(hasEmptyLogo) {
         return hasEmptyLogo ? ('') : this.logoImage && this.logoLink ? (h("a", { href: `${this.logoLink}`, target: "_blank" }, h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: `${this.logoImageAltText}` }))) : this.logoImage ? (h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: this.logoImageAltText })) : ('');
@@ -122,7 +120,7 @@ const InstantAppsHeader = /*@__PURE__*/ proxyCustomElement(class InstantAppsHead
     static get watchers() { return {
         "customHeaderHtml": ["sanitizeCustomHeaderHtml"]
     }; }
-    static get style() { return InstantAppsHeaderStyle0; }
+    static get style() { return instantAppsHeaderCss; }
 }, [1, "instant-apps-header", {
         "titleText": [1, "title-text"],
         "titleTextLink": [1, "title-text-link"],

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

@@ -4,10 +4,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { h, proxyCustomElement, HTMLElement, forceUpdate } from '@stencil/core/internal/client';
-import { i as interactiveLegendState, s as store } from './store.js';
-import { c as commonjsGlobal } from './_commonjsHelpers.js';
+import { s as store, i as interactiveLegendState } from './store.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
 import { l as loadModules } from './loadModules2.js';
-import { h as handleFilterChange, g as getTheme, v as validateInteractivity, a as getParentLegendElementInfoData, b as getCategoryData, c as checkNoneSelected, d as handleFeatureCount, e as generateData, f as getAllActiveLayerInfos, i as createInteractiveLegendDataForLayer, u as updateStore, j as handleFilter, k as getIntLegendLayerData } from './helpers.js';
+import { h as handleFilterChange, a as generateData, g as getTheme, v as validateInteractivity, b as getParentLegendElementInfoData, c as getCategoryData, d as checkNoneSelected, e as handleFeatureCount, f as createInteractiveLegendDataForLayer, u as updateStore, i as handleFilter, j as getIntLegendLayerData } from './helpers.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './button.js';
 import { d as defineCustomElement$a } from './icon.js';
@@ -23,15 +23,13 @@ import { d as defineCustomElement$1 } from './instant-apps-interactive-legend-re
 
 const DPI = 96;
 function pt2px(pt) {
-    if (!pt) {
-        return 0;
-    }
-    return (pt / 72) * DPI;
+  if (!pt) {
+    return 0;
+  }
+  return (pt / 72) * DPI;
 }
 
-var maquette_umd = {exports: {}};
-
-(function (module, exports) {
+var maquette_umd = createCommonjsModule(function (module, exports) {
 (function (global, factory) {
     factory(exports) ;
 })(commonjsGlobal, (function (exports) {
@@ -953,170 +951,169 @@ var maquette_umd = {exports: {}};
     exports.h = h;
 
 }));
-}(maquette_umd, maquette_umd.exports));
+});
 
-const projector = maquette_umd.exports.createProjector();
+const projector = maquette_umd.createProjector();
 const separatorWidth = 10;
 const separatorHeight = 20;
 const univariateSymbolPadding = 10;
 const univariateCardStylePadding = 20;
 const CSS$1 = {
-    // univariate above-and-below
-    univariateAboveAndBelowSymbol: 'esri-univariate-above-and-below-ramp__symbol',
-    colorRamp: 'esri-legend__color-ramp',
+  // univariate above-and-below
+  univariateAboveAndBelowSymbol: 'esri-univariate-above-and-below-ramp__symbol',
+  colorRamp: 'esri-legend__color-ramp',
 };
 function renderSeparator(rampAlignment = 'vertical') {
-    const style = 'stroke:rgb(200, 200, 200);stroke-width:1';
-    return rampAlignment === 'vertical' ? (h("svg", { height: "4", width: "10" }, h("line", { x1: "0", y1: "2", x2: "10", y2: "2", style: style }))) : (h("svg", { height: "10", width: "10" }, h("line", { x1: "5", y1: "0", x2: "5", y2: "10", style: style })));
+  const style = 'stroke:rgb(200, 200, 200);stroke-width:1';
+  return rampAlignment === 'vertical' ? (h("svg", { height: "4", width: "10" }, h("line", { x1: "0", y1: "2", x2: "10", y2: "2", style: style }))) : (h("svg", { height: "10", width: "10" }, h("line", { x1: "5", y1: "0", x2: "5", y2: "10", style: style })));
 }
 function getSeparatorPreview(opacity, rampAlignment = 'vertical') {
-    const separator = document.createElement('div');
-    separator.style.height = `${separatorHeight}px`;
-    separator.className = CSS$1.univariateAboveAndBelowSymbol;
-    if (opacity != null) {
-        separator.style.opacity = opacity.toString();
-    }
-    projector.append(separator, renderSeparator.bind(null, rampAlignment));
-    return separator;
+  const separator = document.createElement('div');
+  separator.style.height = `${separatorHeight}px`;
+  separator.className = CSS$1.univariateAboveAndBelowSymbol;
+  if (opacity != null) {
+    separator.style.opacity = opacity.toString();
+  }
+  projector.append(separator, renderSeparator.bind(null, rampAlignment));
+  return separator;
 }
 function updateUnivariateSizeRampElement(sizeRampElement, opacity, rampAlignment = 'vertical', isAboveAndBelow) {
-    sizeRampElement.infos.forEach((stop, index) => {
-        // Replace middle stop preview with separator
-        if (isAboveAndBelow && index === 2) {
-            stop.preview = getSeparatorPreview(opacity, rampAlignment);
-        }
-        else {
-            const { size } = stop;
-            const previewSize = pt2px(size) + (rampAlignment === 'horizontal' ? univariateCardStylePadding : univariateSymbolPadding);
-            const isPreviewDiv = stop.preview.tagName.toLowerCase() === 'div';
-            const preview = isPreviewDiv ? stop.preview : document.createElement('div');
-            if (preview)
-                preview.className = CSS$1.univariateAboveAndBelowSymbol;
-            if (rampAlignment === 'horizontal') {
-                if (preview)
-                    preview.style.width = `${previewSize}px`;
-            }
-            else {
-                if (preview)
-                    preview.style.height = `${previewSize}px`;
-            }
-            if (!isPreviewDiv) {
-                if (preview)
-                    preview.appendChild(stop.preview);
-            }
-            stop.preview = preview;
-        }
-    });
+  sizeRampElement.infos.forEach((stop, index) => {
+    // Replace middle stop preview with separator
+    if (isAboveAndBelow && index === 2) {
+      stop.preview = getSeparatorPreview(opacity, rampAlignment);
+    }
+    else {
+      const { size } = stop;
+      const previewSize = pt2px(size) + (rampAlignment === 'horizontal' ? univariateCardStylePadding : univariateSymbolPadding);
+      const isPreviewDiv = stop.preview.tagName.toLowerCase() === 'div';
+      const preview = isPreviewDiv ? stop.preview : document.createElement('div');
+      if (preview)
+        preview.className = CSS$1.univariateAboveAndBelowSymbol;
+      if (rampAlignment === 'horizontal') {
+        if (preview)
+          preview.style.width = `${previewSize}px`;
+      }
+      else {
+        if (preview)
+          preview.style.height = `${previewSize}px`;
+      }
+      if (!isPreviewDiv) {
+        if (preview)
+          preview.appendChild(stop.preview);
+      }
+      stop.preview = preview;
+    }
+  });
 }
 // Used to align the colorRamp at the middle of first size symbol
 function getUnivariateColorRampMargin(sizeRampElement, style = 'classic') {
-    const stops = sizeRampElement.infos;
-    const firstSize = stops[0].size;
-    const lastSize = stops[stops.length - 1].size;
-    if (style === 'classic') {
-        return (pt2px(firstSize) + univariateSymbolPadding) / 2;
-    }
-    return (pt2px(firstSize) - pt2px(lastSize)) / 2;
+  const stops = sizeRampElement.infos;
+  const firstSize = stops[0].size;
+  const lastSize = stops[stops.length - 1].size;
+  if (style === 'classic') {
+    return (pt2px(firstSize) + univariateSymbolPadding) / 2;
+  }
+  return (pt2px(firstSize) - pt2px(lastSize)) / 2;
 }
 async function getUnivariateColorRampPreview(colorRampElement, options) {
-    if (!colorRampElement) {
-        return Promise.resolve(null);
-    }
-    const colors = colorRampElement.infos.map(stop => stop.color);
-    const [symbolUtils] = await loadModules(['esri/symbols/support/symbolUtils']);
-    const colorRampDiv = symbolUtils.renderColorRampPreviewHTML(options.type === 'full'
-        ? colors
-        : options.type === 'above'
-            ? colors.slice(0, 3) // First 3 colors
-            : colors.slice(2, 5), // Last 3 colors
-    {
-        width: options.width,
-        height: options.height,
-        align: options.rampAlignment,
-        effectList: options.effectList,
-    });
-    colorRampDiv.className = CSS$1.colorRamp;
-    if (options.opacity != null) {
-        colorRampDiv.style.opacity = options.opacity.toString();
-    }
-    return Promise.resolve(colorRampDiv);
+  if (!colorRampElement) {
+    return Promise.resolve(null);
+  }
+  const colors = colorRampElement.infos.map(stop => stop.color);
+  const [symbolUtils] = await loadModules(['esri/symbols/support/symbolUtils']);
+  const colorRampDiv = symbolUtils.renderColorRampPreviewHTML(options.type === 'full'
+    ? colors
+    : options.type === 'above'
+      ? colors.slice(0, 3) // First 3 colors
+      : colors.slice(2, 5), // Last 3 colors
+  {
+    width: options.width,
+    height: options.height,
+    align: options.rampAlignment,
+    effectList: options.effectList,
+  });
+  colorRampDiv.className = CSS$1.colorRamp;
+  if (options.opacity != null) {
+    colorRampDiv.style.opacity = options.opacity.toString();
+  }
+  return Promise.resolve(colorRampDiv);
 }
 function getUnivariateSizeRampSize(sizeRampElement, type, isAboveAndBelow, rampAlignment = 'vertical') {
-    let sizeRampHeight = 0;
-    const stops = sizeRampElement.infos;
-    const midIndex = Math.floor(stops.length / 2);
-    const startIndex = type === 'full' || type === 'above' ? 0 : midIndex;
-    const endIndex = type === 'full' || type === 'below' ? stops.length - 1 : midIndex;
-    for (let index = startIndex; index <= endIndex; index++) {
-        if (isAboveAndBelow && index === midIndex) {
-            sizeRampHeight += rampAlignment === 'horizontal' ? separatorWidth : separatorHeight;
-        }
-        else {
-            const size = stops[index].size;
-            const previewSize = pt2px(size) + (rampAlignment === 'horizontal' ? univariateCardStylePadding : univariateSymbolPadding);
-            sizeRampHeight += previewSize;
-        }
+  let sizeRampHeight = 0;
+  const stops = sizeRampElement.infos;
+  const midIndex = Math.floor(stops.length / 2);
+  const startIndex = type === 'full' || type === 'above' ? 0 : midIndex;
+  const endIndex = type === 'full' || type === 'below' ? stops.length - 1 : midIndex;
+  for (let index = startIndex; index <= endIndex; index++) {
+    if (isAboveAndBelow && index === midIndex) {
+      sizeRampHeight += rampAlignment === 'horizontal' ? separatorWidth : separatorHeight;
     }
-    return Math.round(sizeRampHeight);
+    else {
+      const size = stops[index].size;
+      const previewSize = pt2px(size) + (rampAlignment === 'horizontal' ? univariateCardStylePadding : univariateSymbolPadding);
+      sizeRampHeight += previewSize;
+    }
+  }
+  return Math.round(sizeRampHeight);
 }
 function getUnivariateColorRampSize(sizeRampElement, type, isAboveAndBelow, rampAlignment = 'vertical') {
-    const sizeRampSize = getUnivariateSizeRampSize(sizeRampElement, type, isAboveAndBelow, rampAlignment);
-    const stops = sizeRampElement.infos;
-    const midIndex = Math.floor(stops.length / 2);
-    const startIndex = type === 'full' || type === 'above' ? 0 : midIndex;
-    const endIndex = type === 'full' || type === 'below' ? stops.length - 1 : midIndex;
-    const symbolSize = type === 'full' ? stops[startIndex].size + stops[endIndex].size : type === 'above' ? stops[startIndex].size : stops[endIndex].size;
-    const separatorSize = isAboveAndBelow ? (rampAlignment === 'vertical' ? separatorHeight : separatorWidth) : 0;
-    const padding = rampAlignment === 'vertical' ? univariateSymbolPadding * (type === 'full' ? 2 : 1) : univariateCardStylePadding * (type === 'full' ? 2 : 1);
-    return Math.round(sizeRampSize - (pt2px(symbolSize) / 2 + separatorSize / 2 + padding / 2));
+  const sizeRampSize = getUnivariateSizeRampSize(sizeRampElement, type, isAboveAndBelow, rampAlignment);
+  const stops = sizeRampElement.infos;
+  const midIndex = Math.floor(stops.length / 2);
+  const startIndex = type === 'full' || type === 'above' ? 0 : midIndex;
+  const endIndex = type === 'full' || type === 'below' ? stops.length - 1 : midIndex;
+  const symbolSize = type === 'full' ? stops[startIndex].size + stops[endIndex].size : type === 'above' ? stops[startIndex].size : stops[endIndex].size;
+  const separatorSize = isAboveAndBelow ? (rampAlignment === 'vertical' ? separatorHeight : separatorWidth) : 0;
+  const padding = rampAlignment === 'vertical' ? univariateSymbolPadding * (type === 'full' ? 2 : 1) : univariateCardStylePadding * (type === 'full' ? 2 : 1);
+  return Math.round(sizeRampSize - (pt2px(symbolSize) / 2 + separatorSize / 2 + padding / 2));
 }
 function getUnivariateAboveAndBelowRampElements(legendElement, opacity, rampAlignment = 'vertical') {
-    const elements = legendElement.infos;
-    let sizeRampElement = elements.find(({ type }) => type === 'size-ramp');
-    let colorRampElement = elements.find(({ type }) => type === 'color-ramp');
-    if (sizeRampElement) {
-        sizeRampElement = Object.assign({}, sizeRampElement);
-        sizeRampElement.infos = [...sizeRampElement.infos];
-        updateUnivariateSizeRampElement(sizeRampElement, opacity, rampAlignment, true);
-    }
-    if (colorRampElement) {
-        colorRampElement = Object.assign({}, colorRampElement);
-        colorRampElement.infos = [...colorRampElement.infos];
-    }
-    // For card style
-    if (rampAlignment === 'horizontal') {
-        sizeRampElement === null || sizeRampElement === void 0 ? void 0 : sizeRampElement.infos.reverse();
-        colorRampElement === null || colorRampElement === void 0 ? void 0 : colorRampElement.infos.reverse();
-    }
-    return { sizeRampElement, colorRampElement };
+  const elements = legendElement.infos;
+  let sizeRampElement = elements.find(({ type }) => type === 'size-ramp');
+  let colorRampElement = elements.find(({ type }) => type === 'color-ramp');
+  if (sizeRampElement) {
+    sizeRampElement = Object.assign({}, sizeRampElement);
+    sizeRampElement.infos = [...sizeRampElement.infos];
+    updateUnivariateSizeRampElement(sizeRampElement, opacity, rampAlignment, true);
+  }
+  if (colorRampElement) {
+    colorRampElement = Object.assign({}, colorRampElement);
+    colorRampElement.infos = [...colorRampElement.infos];
+  }
+  // For card style
+  if (rampAlignment === 'horizontal') {
+    sizeRampElement === null || sizeRampElement === void 0 ? void 0 : sizeRampElement.infos.reverse();
+    colorRampElement === null || colorRampElement === void 0 ? void 0 : colorRampElement.infos.reverse();
+  }
+  return { sizeRampElement, colorRampElement };
 }
 function getUnivariateColorSizeRampElements(legendElement, rampAlignment = 'vertical') {
-    const elements = legendElement.infos;
-    let sizeRampElement = elements.find(({ type }) => type === 'size-ramp');
-    let colorRampElement = elements.find(({ type }) => type === 'color-ramp');
-    if (sizeRampElement) {
-        sizeRampElement = Object.assign({}, sizeRampElement);
-        sizeRampElement.infos = [...sizeRampElement.infos];
-        updateUnivariateSizeRampElement(sizeRampElement, null, rampAlignment, false);
-    }
-    if (colorRampElement) {
-        colorRampElement = Object.assign({}, colorRampElement);
-        colorRampElement.infos = [...colorRampElement.infos];
-    }
-    // For card style
-    if (rampAlignment === 'horizontal') {
-        sizeRampElement === null || sizeRampElement === void 0 ? void 0 : sizeRampElement.infos.reverse();
-        colorRampElement === null || colorRampElement === void 0 ? void 0 : colorRampElement.infos.reverse();
-    }
-    return { sizeRampElement, colorRampElement };
+  const elements = legendElement.infos;
+  let sizeRampElement = elements.find(({ type }) => type === 'size-ramp');
+  let colorRampElement = elements.find(({ type }) => type === 'color-ramp');
+  if (sizeRampElement) {
+    sizeRampElement = Object.assign({}, sizeRampElement);
+    sizeRampElement.infos = [...sizeRampElement.infos];
+    updateUnivariateSizeRampElement(sizeRampElement, null, rampAlignment, false);
+  }
+  if (colorRampElement) {
+    colorRampElement = Object.assign({}, colorRampElement);
+    colorRampElement.infos = [...colorRampElement.infos];
+  }
+  // For card style
+  if (rampAlignment === 'horizontal') {
+    sizeRampElement === null || sizeRampElement === void 0 ? void 0 : sizeRampElement.infos.reverse();
+    colorRampElement === null || colorRampElement === void 0 ? void 0 : colorRampElement.infos.reverse();
+  }
+  return { sizeRampElement, colorRampElement };
 }
 
 function isImageryStretchedLegend(_layer, _legendType) {
-    return !0;
+  return !0;
 }
 
 const instantAppsInteractiveLegendClassicCss = ".sc-instant-apps-interactive-legend-classic-h{display:block;--instant-apps-interactive-legend-heading-font-size:1rem;--instant-apps-interactive-legend-heading-font-weight:normal;--instant-apps-interactive-legend-caption-font-weight:normal;--instant-apps-interactive-legend-secondary-color:var(--calcite-color-text-1);--instant-apps-interactive-legend-field-name-font-size:1rem;--instant-apps-interactive-legend-total-feature-count-font-size:0.875rem;--instant-apps-interactive-legend-info-font-size:0.875rem;--instant-apps-interactive-legend-info-item-background--selected:#c7ebff;--instant-apps-interactive-legend-info-item-background--selected--dark:#009af2;--instant-apps-interactive-legend-info-item-background--hover:#e9e9e9;--instant-apps-interactive-legend-info-item-background--hover--dark:#4a4a4a;--instant-apps-interactive-legend-info-item-color--selected:var(--calcite-color-text-2);--instant-apps-interactive-legend-secondary-background-color:var(--calcite-color-background);--instant-apps-interactive-legend-ui-margin:20px 15px;--instant-apps-interactive-legend-ui-padding:20px 15px}.sc-instant-apps-interactive-legend-classic-h .esri-legend__service.sc-instant-apps-interactive-legend-classic{padding:0}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-body.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-table.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__group-layer-child.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-child-table.sc-instant-apps-interactive-legend-classic{margin:0;overflow:hidden}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-caption.sc-instant-apps-interactive-legend-classic{display:flex;align-items:center;font-size:var(--instant-apps-interactive-legend-field-name-font-size);background-color:var(--instant-apps-interactive-legend-secondary-background-color);color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-caption.sc-instant-apps-interactive-legend-classic calcite-action.sc-instant-apps-interactive-legend-classic{margin-right:5px}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-caption-btn-container.sc-instant-apps-interactive-legend-classic{white-space:nowrap}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-caption-btn-container.sc-instant-apps-interactive-legend-classic calcite-button.sc-instant-apps-interactive-legend-classic{margin:2px}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-caption.sc-instant-apps-interactive-legend-classic{font-weight:var(--instant-apps-interactive-legend-caption-font-weight)}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-cell.esri-legend__layer-cell--info.sc-instant-apps-interactive-legend-classic{font-size:var(--instant-apps-interactive-legend-info-font-size);text-align:left}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-cell.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-row.sc-instant-apps-interactive-legend-classic{display:flex;align-items:center}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__non-interactive.sc-instant-apps-interactive-legend-classic .esri-legend__layer-body.sc-instant-apps-interactive-legend-classic{display:block;margin:var(--instant-apps-interactive-legend-ui-margin)}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__non-interactive.instant-apps-interactive-legend__nested-unique-symbol.sc-instant-apps-interactive-legend-classic>.esri-legend__layer-body.sc-instant-apps-interactive-legend-classic{margin:0}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__non-interactive.sc-instant-apps-interactive-legend-classic .esri-legend__layer-row.sc-instant-apps-interactive-legend-classic{display:table-row}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__non-interactive.sc-instant-apps-interactive-legend-classic .esri-legend__layer-cell.sc-instant-apps-interactive-legend-classic{display:table-cell}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-cell--symbols.sc-instant-apps-interactive-legend-classic{justify-content:center;width:20%}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-cell--info.sc-instant-apps-interactive-legend-classic{width:65%}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic{margin:1px;background:transparent;border:none;width:100%}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-cell--info.sc-instant-apps-interactive-legend-classic{color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-row.sc-instant-apps-interactive-legend-classic,.sc-instant-apps-interactive-legend-classic-h .esri-legend__layer-caption.sc-instant-apps-interactive-legend-classic{padding:var(--instant-apps-interactive-legend-ui-padding)}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic{position:relative}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend-element-info--selected.sc-instant-apps-interactive-legend-classic{background-color:var(--instant-apps-interactive-legend-info-item-background--selected)}.sc-instant-apps-interactive-legend-classic-h .calcite-mode-dark.sc-instant-apps-interactive-legend-classic .instant-apps-interactive-legend-element-info--selected.sc-instant-apps-interactive-legend-classic{cursor:pointer;background-color:var(--instant-apps-interactive-legend-info-item-background--selected--dark)}.sc-instant-apps-interactive-legend-classic-h .calcite-mode-dark.sc-instant-apps-interactive-legend-classic .instant-apps-interactive-legend-element-info--selected.sc-instant-apps-interactive-legend-classic .esri-legend__layer-cell--info.sc-instant-apps-interactive-legend-classic{color:var(--calcite-color-text-inverse)}.sc-instant-apps-interactive-legend-classic-h .hide.sc-instant-apps-interactive-legend-classic{display:none}@media (min-width: 992px){.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic{cursor:pointer}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic:hover{background-color:var(--instant-apps-interactive-legend-info-item-background--hover)}.sc-instant-apps-interactive-legend-classic-h .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic:hover.instant-apps-interactive-legend-element-info--selected{background-color:#e2f2fe}.sc-instant-apps-interactive-legend-classic-h .calcite-mode-dark.sc-instant-apps-interactive-legend-classic .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic:hover{background-color:var(--instant-apps-interactive-legend-info-item-background--hover--dark)}.sc-instant-apps-interactive-legend-classic-h .calcite-mode-dark.sc-instant-apps-interactive-legend-classic .instant-apps-interactive-legend__layer-row--interactive.sc-instant-apps-interactive-legend-classic:hover.instant-apps-interactive-legend-element-info--selected{background-color:#26a9f4}}";
-const InstantAppsInteractiveLegendClassicStyle0 = instantAppsInteractiveLegendClassicCss;
 
 const CSS = {
     // jsapi styles
@@ -1199,7 +1196,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     async initLegend() {
         try {
             await this.reactiveUtils.whenOnce(() => { var _a; return (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view; });
-            const initLegendCallback = async () => {
+            this.legendvm.view.when(async () => {
                 var _a, _b, _c, _d;
                 try {
                     // Initial data setup
@@ -1232,9 +1229,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
                     console.error(err);
                     this.isLoading = false;
                 }
-            };
-            this.legendvm.view.when(initLegendCallback);
-            this.legendvm.view.map.layers.on('after-changes', initLegendCallback);
+            });
         }
         catch (_a) {
             this.isLoading = false;
@@ -1533,7 +1528,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     }
     setupWatchersAndListeners() {
         // Refreshes interactive legend data on active layer info update
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         const featureLayers = (_d = (_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.allLayers) === null || _d === void 0 ? void 0 : _d.filter(layer => (layer === null || layer === void 0 ? void 0 : layer.type) === 'feature');
         featureLayers.forEach(async (fLayer) => {
             var _a, _b, _c, _d;
@@ -1579,20 +1574,14 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
                 forceUpdate(this.el);
             }));
         }));
-        (_g = this.handles) === null || _g === void 0 ? void 0 : _g.add(this.reactiveUtils.on(() => { var _a, _b, _c; return (_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.layers; }, 'after-changes', async () => {
-            const data = await handleFeatureCount(this.legendvm, interactiveLegendState.data);
-            store.set('data', Object.assign(Object.assign({}, interactiveLegendState.data), data));
-            this.calculatingFeatureCount = false;
-        }));
     }
     async createDataForLayer(fLayer) {
-        var _a;
+        var _a, _b;
         const data = store.get('data');
         const dataForLayer = data === null || data === void 0 ? void 0 : data[fLayer === null || fLayer === void 0 ? void 0 : fLayer.id];
-        const ALIs = getAllActiveLayerInfos((_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.activeLayerInfos);
-        const ali = ALIs === null || ALIs === void 0 ? void 0 : ALIs.find(ali => { var _a; return ((_a = ali === null || ali === void 0 ? void 0 : ali.layer) === null || _a === void 0 ? void 0 : _a.id) === (fLayer === null || fLayer === void 0 ? void 0 : fLayer.id); });
-        if (!dataForLayer && ali) {
-            const dataForLayer = (await createInteractiveLegendDataForLayer(this.legendvm, ali, this.reactiveUtils));
+        const acl = (_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.activeLayerInfos) === null || _b === void 0 ? void 0 : _b.find(acl => { var _a; return ((_a = acl === null || acl === void 0 ? void 0 : acl.layer) === null || _a === void 0 ? void 0 : _a.id) === (fLayer === null || fLayer === void 0 ? void 0 : fLayer.id); });
+        if (!dataForLayer && acl) {
+            const dataForLayer = (await createInteractiveLegendDataForLayer(this.legendvm, acl, this.reactiveUtils));
             updateStore({ intLegendLayerData: dataForLayer, layerId: fLayer === null || fLayer === void 0 ? void 0 : fLayer.id });
             if (this.featureCount) {
                 const data = await handleFeatureCount(this.legendvm, interactiveLegendState.data);
@@ -1617,7 +1606,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     static get watchers() { return {
         "filterMode": ["handleFilterModeChange"]
     }; }
-    static get style() { return InstantAppsInteractiveLegendClassicStyle0; }
+    static get style() { return instantAppsInteractiveLegendClassicCss; }
 }, [2, "instant-apps-interactive-legend-classic", {
         "legendvm": [16],
         "zoomTo": [4, "zoom-to"],

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

@@ -6,10 +6,9 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules2.js';
 import { i as interactiveLegendState } from './store.js';
-import { g as getTheme, l as getCategoriesArray, m as checkNestedUniqueSymbol, n as calculateTotalFeatureCountForNestedSymbols, o as checkRelationshipRamp, p as calculateTotalCount, q as getNestedInfoData, k as getIntLegendLayerData } from './helpers.js';
+import { g as getTheme, k as getCategoriesArray, l as checkNestedUniqueSymbol, m as calculateTotalFeatureCountForNestedSymbols, n as checkRelationshipRamp, o as calculateTotalCount, p as getNestedInfoData, j as getIntLegendLayerData } from './helpers.js';
 
 const instantAppsInteractiveLegendCountCss = ".sc-instant-apps-interactive-legend-count-h{display:flex;align-items:center}.instant-apps-interactive-legend__info-count-text.sc-instant-apps-interactive-legend-count{font-size:var(--instant-apps-interactive-legend-info-font-size);color:var(--instant-apps-interactive-legend-secondary-color)}.calcite-mode-dark.instant-apps-interactive-legend__info-count-text.instant-apps-interactive-legend__info-count-text--selected.sc-instant-apps-interactive-legend-count{color:var(--calcite-color-text-inverse)}html[dir=rtl] .sc-instant-apps-interactive-legend-count-h{margin-left:0;margin-right:auto}";
-const InstantAppsInteractiveLegendCountStyle0 = instantAppsInteractiveLegendCountCss;
 
 const CSS = {
     countText: ' instant-apps-interactive-legend__info-count-text',
@@ -93,7 +92,7 @@ const InstantAppsInteractiveLegendCount = /*@__PURE__*/ proxyCustomElement(class
         return this.intl.formatNumber(total);
     }
     get el() { return this; }
-    static get style() { return InstantAppsInteractiveLegendCountStyle0; }
+    static get style() { return instantAppsInteractiveLegendCountCss; }
 }, [2, "instant-apps-interactive-legend-count", {
         "showTotal": [4, "show-total"],
         "legendvm": [16],