@esri/solutions-components 0.8.5 → 0.8.6-6.2

package/dist/esm/instant-apps-header.entry.js

@@ -3,15 +3,16 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
-import { g as getElementDir } from './languageUtil-035e7728.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
+import { g as getElementDir } from './languageUtil-2b6e191a.js';
 import { S as Sanitizer } from './index-a1e91462.js';
-import { w as widthBreakpoints } from './breakpoints-f0f1417d.js';
-import { g as getFontFamily } from './styles-367380b5.js';
-import './esri-loader-1b324844.js';
-import './_commonjsHelpers-0f74c230.js';
+import { w as widthBreakpoints } from './breakpoints-3afa0fd9.js';
+import { g as getFontFamily } from './styles-b3492d9f.js';
+import './esri-loader-c6842c6b.js';
+import './_commonjsHelpers-089957fe.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;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 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 CSS = {
     base: 'instant-apps-header--standard',
@@ -21,6 +22,7 @@ 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',
@@ -82,7 +84,7 @@ const InstantAppsHeader = class {
         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, 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" }))))));
+        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" })))))));
     }
     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 })) : ('');
@@ -118,6 +120,6 @@ const InstantAppsHeader = class {
         "customHeaderHtml": ["sanitizeCustomHeaderHtml"]
     }; }
 };
-InstantAppsHeader.style = instantAppsHeaderCss;
+InstantAppsHeader.style = InstantAppsHeaderStyle0;
 
 export { InstantAppsHeader as instant_apps_header };

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

@@ -3,22 +3,24 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { h, r as registerInstance, f as forceUpdate, g as getElement } from './index-164d485a.js';
-import { h as handleFilterChange, a as generateData, s as store, i as interactiveLegendState, g as getTheme, v as validateInteractivity, b as getParentLegendElementInfoData, c as getCategoryData, d as checkNoneSelected, e as handleFeatureCount, f as createInteractiveLegendDataForLayer, u as updateStore, j as handleFilter, k as getIntLegendLayerData } from './helpers-f9256189.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-0f74c230.js';
-import { l as loadModules } from './loadModules-7a5f1022.js';
-import './index-477ea182.js';
-import './esri-loader-1b324844.js';
+import { h, r as registerInstance, f as forceUpdate, g as getElement } from './index-e3f04fa1.js';
+import { h as handleFilterChange, g as getTheme, v as validateInteractivity, a as getParentLegendElementInfoData, i as interactiveLegendState, b as getCategoryData, c as checkNoneSelected, d as handleFeatureCount, s as store, e as generateData, f as getAllActiveLayerInfos, j as createInteractiveLegendDataForLayer, u as updateStore, k as handleFilter, l as getIntLegendLayerData } from './helpers-ca6fa5a6.js';
+import { c as commonjsGlobal } from './_commonjsHelpers-089957fe.js';
+import { l as loadModules } from './loadModules-03ba7abe.js';
+import './index-1dc14abf.js';
+import './esri-loader-c6842c6b.js';
 
 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 = createCommonjsModule(function (module, exports) {
+var maquette_umd = {exports: {}};
+
+(function (module, exports) {
 (function (global, factory) {
     factory(exports) ;
 })(commonjsGlobal, (function (exports) {
@@ -940,169 +942,170 @@ var maquette_umd = createCommonjsModule(function (module, exports) {
     exports.h = h;
 
 }));
-});
+}(maquette_umd, maquette_umd.exports));
 
-const projector = maquette_umd.createProjector();
+const projector = maquette_umd.exports.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;
+        }
+        else {
+            const size = stops[index].size;
+            const previewSize = pt2px(size) + (rampAlignment === 'horizontal' ? univariateCardStylePadding : univariateSymbolPadding);
+            sizeRampHeight += previewSize;
+        }
     }
-  }
-  return Math.round(sizeRampHeight);
+    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
@@ -1184,7 +1187,7 @@ const InstantAppsInteractiveLegendClassic = class {
     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 () => {
+            const initLegendCallback = async () => {
                 var _a, _b, _c, _d;
                 try {
                     // Initial data setup
@@ -1217,7 +1220,9 @@ const InstantAppsInteractiveLegendClassic = class {
                     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;
@@ -1516,7 +1521,7 @@ const InstantAppsInteractiveLegendClassic = class {
     }
     setupWatchersAndListeners() {
         // Refreshes interactive legend data on active layer info update
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         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;
@@ -1562,14 +1567,20 @@ const InstantAppsInteractiveLegendClassic = class {
                 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, _b;
+        var _a;
         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 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));
+        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));
             updateStore({ intLegendLayerData: dataForLayer, layerId: fLayer === null || fLayer === void 0 ? void 0 : fLayer.id });
             if (this.featureCount) {
                 const data = await handleFeatureCount(this.legendvm, interactiveLegendState.data);
@@ -1595,6 +1606,6 @@ const InstantAppsInteractiveLegendClassic = class {
         "filterMode": ["handleFilterModeChange"]
     }; }
 };
-InstantAppsInteractiveLegendClassic.style = instantAppsInteractiveLegendClassicCss;
+InstantAppsInteractiveLegendClassic.style = InstantAppsInteractiveLegendClassicStyle0;
 
 export { InstantAppsInteractiveLegendClassic as instant_apps_interactive_legend_classic };

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

@@ -3,14 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent } from './index-164d485a.js';
-import { l as loadModules } from './loadModules-7a5f1022.js';
-import { g as getTheme, i as interactiveLegendState, q as getCategoriesArray, r as checkNestedUniqueSymbol, t as calculateTotalFeatureCountForNestedSymbols, m as checkRelationshipRamp, w as calculateTotalCount, x as getNestedInfoData, k as getIntLegendLayerData, v as validateInteractivity } from './helpers-f9256189.js';
-import './esri-loader-1b324844.js';
-import './_commonjsHelpers-0f74c230.js';
-import './index-477ea182.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent } from './index-e3f04fa1.js';
+import { l as loadModules } from './loadModules-03ba7abe.js';
+import { g as getTheme, i as interactiveLegendState, r as getCategoriesArray, t as checkNestedUniqueSymbol, w as calculateTotalFeatureCountForNestedSymbols, n as checkRelationshipRamp, x as calculateTotalCount, y as getNestedInfoData, l as getIntLegendLayerData, v as validateInteractivity } from './helpers-ca6fa5a6.js';
+import './esri-loader-c6842c6b.js';
+import './_commonjsHelpers-089957fe.js';
+import './index-1dc14abf.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$1 = {
     countText: ' instant-apps-interactive-legend__info-count-text',
@@ -94,9 +95,10 @@ const InstantAppsInteractiveLegendCount = class {
     }
     get el() { return getElement(this); }
 };
-InstantAppsInteractiveLegendCount.style = instantAppsInteractiveLegendCountCss;
+InstantAppsInteractiveLegendCount.style = InstantAppsInteractiveLegendCountStyle0;
 
 const instantAppsInteractiveLegendLayerElementCaptionCss = ".sc-instant-apps-interactive-legend-layer-element-caption-h{display:block;--instant-apps-interactive-legend-heading-font-size:1rem;--instant-apps-interactive-legend-heading-font-weight:normal;--instant-apps-interactive-legend-secondary-color:var(--calcite-color-text-1);--instant-apps-interactive-legend-ui-padding:15px 10px}.sc-instant-apps-interactive-legend-layer-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-layer-element-caption{overflow:hidden;margin:0;overflow-x:hidden;display:inline-block;font-size:var(--instant-apps-interactive-legend-heading-font-size);font-weight:var(--instant-apps-interactive-legend-heading-font-weight)}.sc-instant-apps-interactive-legend-layer-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-layer-element-caption header.sc-instant-apps-interactive-legend-layer-element-caption{padding:var(--instant-apps-interactive-legend-ui-padding)}.sc-instant-apps-interactive-legend-layer-element-caption-h header.sc-instant-apps-interactive-legend-layer-element-caption{display:flex;text-align:left;padding:var(--instant-apps-interactive-legend-ui-padding);background-color:var(--instant-apps-interactive-legend-secondary-background-color);color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-layer-element-caption-h header.sc-instant-apps-interactive-legend-layer-element-caption h3.sc-instant-apps-interactive-legend-layer-element-caption{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;line-height:normal;color:var(--instant-apps-interactive-legend-secondary-color);margin-bottom:5px}.sc-instant-apps-interactive-legend-layer-element-caption-h header.sc-instant-apps-interactive-legend-layer-element-caption .instant-apps-interactive-legend__heading-text--group-item.sc-instant-apps-interactive-legend-layer-element-caption{-webkit-line-clamp:2;line-clamp:2}.sc-instant-apps-interactive-legend-layer-element-caption-h header.sc-instant-apps-interactive-legend-layer-element-caption span.sc-instant-apps-interactive-legend-layer-element-caption{width:100%;font-size:var(--instant-apps-interactive-legend-total-feature-count-font-size);color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-layer-element-caption-h header.sc-instant-apps-interactive-legend-layer-element-caption .instant-apps-interactive-legend__header-action-container.sc-instant-apps-interactive-legend-layer-element-caption{display:flex;align-items:center}.sc-instant-apps-interactive-legend-layer-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-layer-element-caption header.sc-instant-apps-interactive-legend-layer-element-caption{padding:var(--instant-apps-interactive-legend-ui-padding)}.sc-instant-apps-interactive-legend-layer-element-caption-h .esri-widget--panel.sc-instant-apps-interactive-legend-layer-element-caption{margin:0}.calcite-mode-dark.sc-instant-apps-interactive-legend-layer-element-caption-h .instant-apps-interactive-legend__header.sc-instant-apps-interactive-legend-layer-element-caption{background-color:#242424;color:var(--calcite-color-text-1)}.calcite-mode-light.sc-instant-apps-interactive-legend-layer-element-caption-h .instant-apps-interactive-legend__header.sc-instant-apps-interactive-legend-layer-element-caption{background-color:#ffffff;color:var(--calcite-color-text-1)}";
+const InstantAppsInteractiveLegendLayerElementCaptionStyle0 = instantAppsInteractiveLegendLayerElementCaptionCss;
 
 const CSS = {
     label: 'esri-legend__service-label',
@@ -116,12 +118,12 @@ const InstantAppsInteractiveLegendLayerElementCaption = class {
         this.expanded = true;
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const isInteractive = validateInteractivity(this.activeLayerInfo);
         const { expanded } = this;
         const expandCollapseText = expanded ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.collapse : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.expand;
         const isChild = this.isChild ? ' instant-apps-interactive-legend__heading-text--group-item' : '';
-        return (h("header", { class: `${CSS.interacitveLegendHeader} ${getTheme(this.el)}` }, h("calcite-action", { onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), h("span", null, h("span", { class: CSS.headerActionContainer }, h("h3", { class: `${CSS.header} ${CSS.label}${isChild}` }, (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title)), this.featureCount && isInteractive ? (h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
+        return (h("header", { key: '3e8966360930dd6fbfc0bf3b822704922263f1fa', class: `${CSS.interacitveLegendHeader} ${getTheme(this.el)}` }, h("calcite-action", { key: 'c12b32be05c449b5a915d813ae8dd5d8b0a22457', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), h("span", { key: 'baba497877c870983107258ef3497950021c3a1a' }, h("span", { key: '495b24d9fc1237f9cd841451513a5e2b272ae467', class: CSS.headerActionContainer }, h("h3", { key: 'dfbb8e1c08b6ce0bac789e983977c284a2b7efb3', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
     }
     toggleExpanded() {
         return () => {
@@ -131,6 +133,6 @@ const InstantAppsInteractiveLegendLayerElementCaption = class {
     }
     get el() { return getElement(this); }
 };
-InstantAppsInteractiveLegendLayerElementCaption.style = instantAppsInteractiveLegendLayerElementCaptionCss;
+InstantAppsInteractiveLegendLayerElementCaption.style = InstantAppsInteractiveLegendLayerElementCaptionStyle0;
 
 export { InstantAppsInteractiveLegendCount as instant_apps_interactive_legend_count, InstantAppsInteractiveLegendLayerElementCaption as instant_apps_interactive_legend_layer_element_caption };

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

@@ -3,14 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-164d485a.js';
-import { v as validateInteractivity, g as getTheme } from './helpers-f9256189.js';
-import './loadModules-7a5f1022.js';
-import './esri-loader-1b324844.js';
-import './_commonjsHelpers-0f74c230.js';
-import './index-477ea182.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e3f04fa1.js';
+import { v as validateInteractivity, g as getTheme } from './helpers-ca6fa5a6.js';
+import './loadModules-03ba7abe.js';
+import './esri-loader-c6842c6b.js';
+import './_commonjsHelpers-089957fe.js';
+import './index-1dc14abf.js';
 
 const instantAppsInteractiveLegendGroupLegendElementCaptionCss = ".sc-instant-apps-interactive-legend-group-legend-element-caption-h{display:block;--instant-apps-interactive-legend-heading-font-size:1rem;--instant-apps-interactive-legend-heading-font-weight:normal;--instant-apps-interactive-legend-secondary-color:var(--calcite-color-text-1);--instant-apps-interactive-legend-ui-padding:15px 10px}.sc-instant-apps-interactive-legend-group-legend-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-group-legend-element-caption{overflow:hidden;margin:0;overflow-x:hidden;display:inline-block;font-size:var(--instant-apps-interactive-legend-heading-font-size);font-weight:var(--instant-apps-interactive-legend-heading-font-weight)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-group-legend-element-caption header.sc-instant-apps-interactive-legend-group-legend-element-caption{padding:var(--instant-apps-interactive-legend-ui-padding)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h header.sc-instant-apps-interactive-legend-group-legend-element-caption{display:flex;text-align:left;padding:var(--instant-apps-interactive-legend-ui-padding);background-color:var(--instant-apps-interactive-legend-secondary-background-color);color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h header.sc-instant-apps-interactive-legend-group-legend-element-caption h3.sc-instant-apps-interactive-legend-group-legend-element-caption{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;line-height:normal;color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h header.sc-instant-apps-interactive-legend-group-legend-element-caption .instant-apps-interactive-legend__heading-text--group-item.sc-instant-apps-interactive-legend-group-legend-element-caption{-webkit-line-clamp:2;line-clamp:2}.sc-instant-apps-interactive-legend-group-legend-element-caption-h header.sc-instant-apps-interactive-legend-group-legend-element-caption span.sc-instant-apps-interactive-legend-group-legend-element-caption{width:100%;font-size:var(--instant-apps-interactive-legend-total-feature-count-font-size);color:var(--instant-apps-interactive-legend-secondary-color)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h header.sc-instant-apps-interactive-legend-group-legend-element-caption .instant-apps-interactive-legend__header-action-container.sc-instant-apps-interactive-legend-group-legend-element-caption{display:flex;align-items:center}.sc-instant-apps-interactive-legend-group-legend-element-caption-h .esri-widget__heading.sc-instant-apps-interactive-legend-group-legend-element-caption header.sc-instant-apps-interactive-legend-group-legend-element-caption{padding:var(--instant-apps-interactive-legend-ui-padding)}.sc-instant-apps-interactive-legend-group-legend-element-caption-h .esri-widget--panel.sc-instant-apps-interactive-legend-group-legend-element-caption{margin:0}.calcite-mode-dark.sc-instant-apps-interactive-legend-group-legend-element-caption-h .instant-apps-interactive-legend__header.sc-instant-apps-interactive-legend-group-legend-element-caption{background-color:#242424;color:var(--calcite-color-text-1)}.calcite-mode-light.sc-instant-apps-interactive-legend-group-legend-element-caption-h .instant-apps-interactive-legend__header.sc-instant-apps-interactive-legend-group-legend-element-caption{background-color:#ffffff;color:var(--calcite-color-text-1)}";
+const InstantAppsInteractiveLegendGroupLegendElementCaptionStyle0 = instantAppsInteractiveLegendGroupLegendElementCaptionCss;
 
 const CSS = {
     label: 'esri-legend__service-label',
@@ -30,14 +31,14 @@ const InstantAppsInteractiveLegendGroupLegendElementCaption = class {
         this.expanded = true;
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const isInteractive = validateInteractivity(this.activeLayerInfo);
         const { expanded } = this;
         const expandCollapseText = expanded ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.collapse : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.expand;
         const isChild = this.isChild ? ' instant-apps-interactive-legend__heading-text--group-item' : '';
-        return (h("header", { class: `${CSS.interacitveLegendHeader} ${getTheme(this.el)}`, style: {
+        return (h("header", { key: '3cecf889edd19104eba5b63577eec50f7baf85be', class: `${CSS.interacitveLegendHeader} ${getTheme(this.el)}`, style: {
                 borderLeft: '1px solid var(--calcite-color-border-3)',
-            } }, h("span", null, h("span", { class: CSS.headerActionContainer }, h("calcite-action", { onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), h("h3", { class: `${CSS.header} ${CSS.label}${isChild}` }, (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title)), this.featureCount && isInteractive ? (h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
+            } }, h("span", { key: '06ef8bfe4d693da481e96ee400fd7f66675ddf99' }, h("span", { key: 'f00fd3b233806ca4f046a1f012b4f7a5122cb064', class: CSS.headerActionContainer }, h("calcite-action", { key: 'e309fb7956f973543673805ff368ebc11fc6825c', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), h("h3", { key: 'f8b70bf17225b5595f0880ed24491cc76b72d06d', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
     }
     toggleExpanded() {
         return () => {
@@ -47,6 +48,6 @@ const InstantAppsInteractiveLegendGroupLegendElementCaption = class {
     }
     get el() { return getElement(this); }
 };
-InstantAppsInteractiveLegendGroupLegendElementCaption.style = instantAppsInteractiveLegendGroupLegendElementCaptionCss;
+InstantAppsInteractiveLegendGroupLegendElementCaption.style = InstantAppsInteractiveLegendGroupLegendElementCaptionStyle0;
 
 export { InstantAppsInteractiveLegendGroupLegendElementCaption as instant_apps_interactive_legend_group_legend_element_caption };