@arcgis/charts-components 5.1.0-next.82 → 5.1.0-next.83

package/dist/components/arcgis-charts-config-guides/customElement.js

@@ -6,13 +6,13 @@ import { g as l, H as m } from "../../chunks/resource.js";
 import { u as f } from "../../chunks/useT9n.js";
 import { css as A, html as a } from "lit";
 import { createRef as x, ref as C } from "lit/directives/ref.js";
-import { LitElement as v, renderElement as b, safeClassMap as c } from "@arcgis/lumina";
+import { LitElement as b, renderElement as v, safeClassMap as c } from "@arcgis/lumina";
 import { G as s } from "../../chunks/common.js";
 import { p as h, q as u } from "../../chunks/type-guards.js";
 import "@arcgis/toolkit/type";
 import "../../chunks/series-types.js";
 const P = A`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
-class $ extends v {
+class $ extends b {
   constructor() {
     super(...arguments), this._messages = f(), this.addGuideButton = x(), this.guideTypePopover = null, this.addXGuide = (e) => {
       if (h(this.model)) {
@@ -30,7 +30,7 @@ class $ extends v {
       this.requestUpdate();
     }, this.closeAddPopOver = (e) => {
       e.stopImmediatePropagation(), this.showAddButton = !0;
-    }, this.showAddButton = !0, this.latestGuidePosition = 0, this.open = !1;
+    }, this.showAddButton = !0, this.latestGuidePosition = 0, this.enableXAxisGuide = !1, this.enableYAxisGuide = !1, this.open = !1;
   }
   static {
     this.properties = { showAddButton: 16, latestGuidePosition: 16, messageOverrides: 0, model: 0, timeZone: 1, calculatedMinMaxBounds: 0, enableXAxisGuide: 5, enableYAxisGuide: 5, open: 5 };
@@ -78,7 +78,7 @@ class $ extends v {
   }
   renderGuideTypePopover() {
     const e = this.getAllGuidesLength();
-    this.guideTypePopover = b(a`<arcgis-charts-config-guides-type-popover .enableXAxisGuide=${this.enableXAxisGuide} .enableYAxisGuide=${this.enableYAxisGuide} .referenceElement=${this.addGuideButton.value} .placement=${e === 0 ? "bottom" : "top"} .open=${!this.showAddButton} @arcgisChartsAddXAxisGuide=${this.addXGuide} @arcgisChartsAddYAxisGuide=${this.addYGuide} @arcgisChartsConfigPopoverClose=${this.closeAddPopOver}></arcgis-charts-config-guides-type-popover>`), !this.showAddButton && !document.body.contains(this.guideTypePopover) && this.guideTypePopover !== null && document.body.appendChild(this.guideTypePopover);
+    this.guideTypePopover = v(a`<arcgis-charts-config-guides-type-popover .enableXAxisGuide=${this.enableXAxisGuide} .enableYAxisGuide=${this.enableYAxisGuide} .referenceElement=${this.addGuideButton.value} .placement=${e === 0 ? "bottom" : "top"} .open=${!this.showAddButton} @arcgisChartsAddXAxisGuide=${this.addXGuide} @arcgisChartsAddYAxisGuide=${this.addYGuide} @arcgisChartsConfigPopoverClose=${this.closeAddPopOver}></arcgis-charts-config-guides-type-popover>`), !this.showAddButton && !document.body.contains(this.guideTypePopover) && this.guideTypePopover !== null && document.body.appendChild(this.guideTypePopover);
   }
   renderGuide(e, t) {
     let i;

package/dist/components/arcgis-charts-config-heat-chart-data/customElement.js

@@ -11,7 +11,7 @@ import { u as R } from "../../chunks/useT9n.js";
 import { d as s, W as y } from "../../chunks/interfaces.js";
 import { H as z } from "../../chunks/common.js";
 import "@arcgis/toolkit/type";
-import { r as p, m as h, d as b, u as m, h as k, e as v, i as X } from "../../chunks/series-types.js";
+import { r as g, m as h, d as b, u as m, h as k, e as v, i as X } from "../../chunks/series-types.js";
 import { i as Z } from "../../chunks/rest-js-object-literals.js";
 import { x as j } from "../../chunks/data.js";
 import { i as G } from "../../chunks/utils.js";
@@ -56,13 +56,13 @@ class re extends D {
           const { contentKind: t } = e.detail, a = e.detail.value;
           switch (t) {
             case s.aggregation:
-              this.model.aggregationType = a, a === p.Count || a === p.Sum ? this.model.nullPolicy = h.Zero : this.model.nullPolicy = h.Null;
+              this.model.aggregationType = a, a === g.Count || a === g.Sum ? this.model.nullPolicy = h.Zero : this.model.nullPolicy = h.Null;
               break;
             case s.xAxisField:
               this.model.xAxisField = a, this.setDefaultPropertiesForCalendarHeatChart();
               break;
             case s.numericFields:
-              this.model.numericFields = [a.trim() || ""], (this.model.numericFields ?? []).length > 0 && this.model.aggregationType === p.Count && this.model.numericFields[0] !== B(this.model.layer).idField && (this.model.aggregationType = p.Sum);
+              this.model.numericFields = [a.trim() || ""], (this.model.numericFields ?? []).length > 0 && this.model.aggregationType === g.Count && this.model.numericFields[0] !== B(this.model.layer).idField && (this.model.aggregationType = g.Sum);
               break;
             case s.calendarType: {
               this.applyCalendarTypePreset(a);
@@ -114,7 +114,7 @@ class re extends D {
         };
         this.model.emptyCell = i;
       }
-    }, this.isFlipped = !1, this.availableColorRamps = [], this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = P();
+    }, this.isFlipped = !1, this.availableColorRamps = [], this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigDataChangeError = P();
   }
   static {
     this.properties = { availableColorRamps: 16, aggregationLabel: 16, selectedColorRamp: 16, messageOverrides: 0, model: 0, layerFieldsInfo: 0, open: 5 };
@@ -283,9 +283,9 @@ class re extends D {
         break;
       case s.colorScheme:
         t = this.colorSchemeElement.value, a = this._messages.colorScheme;
-        const g = te(this.model.chartRenderer?.classBreakInfos, this.availableColorRamps);
-        i = this.selectedColorRamp?.name ?? g?.name;
-        const C = g ? g.colorsForClassBreaks.find((f) => f.numClasses === this.model.breaksCount)?.colors : void 0;
+        const p = te(this.model.chartRenderer?.classBreakInfos, this.availableColorRamps);
+        i = this.selectedColorRamp?.name ?? p?.name;
+        const C = p ? p.colorsForClassBreaks.find((f) => f.numClasses === this.model.breaksCount)?.colors : void 0;
         d = C ? se(C, this.model.chartRenderer?.classBreakInfos) : d;
         break;
       case s.null:
@@ -298,14 +298,14 @@ class re extends D {
     this.heatChartPopover !== null && (this.heatChartPopover.open = !1, this.heatChartPopover = Y(this.heatChartPopover));
   }
   setDefaultPropertiesForCalendarHeatChart() {
-    G(this.model?.config) || ((this.model.xTemporalBinning === void 0 || this.model.yTemporalBinning === void 0) && this.applyCalendarTypePreset(y.YearByMonthAndDayOfMonth), this.model.yAxisField = this.model.xAxisField, this.model.setYAxisSortOrder(z.Desc), this.model.classificationMethod === void 0 && (this.model.classificationMethod = v.naturalBreaks), this.model.heatRulesType !== k.Renderer && (this.model.heatRulesType = k.Renderer), this.model.viewType === void 0 && (this.model.viewType = X.singleCalendarView), (this.model.aggregationType === p.Count || this.model.aggregationType === p.Sum) && this.model.nullPolicy !== h.Zero && (this.model.nullPolicy = h.Zero));
+    G(this.model?.config) || ((this.model.xTemporalBinning === void 0 || this.model.yTemporalBinning === void 0) && this.applyCalendarTypePreset(y.YearByMonthAndDayOfMonth), this.model.yAxisField = this.model.xAxisField, this.model.setYAxisSortOrder(z.Desc), this.model.classificationMethod === void 0 && (this.model.classificationMethod = v.naturalBreaks), this.model.heatRulesType !== k.Renderer && (this.model.heatRulesType = k.Renderer), this.model.viewType === void 0 && (this.model.viewType = X.singleCalendarView), (this.model.aggregationType === g.Count || this.model.aggregationType === g.Sum) && this.model.nullPolicy !== h.Zero && (this.model.nullPolicy = h.Zero));
   }
   renderXAxisFieldSelect() {
     const e = this.getCorrectedXAxisFieldValue();
     return l`<arcgis-charts-config-field-select .label=${e} @click=${this.onXAxisFieldSelect} ${c(this.xAxisFieldElement)}></arcgis-charts-config-field-select>`;
   }
   renderAggregation() {
-    return l`<arcgis-charts-config-field-select .label=${this.model.aggregationType === p.NoAggregation ? this._messages.noAggregation : this.aggregationLabel} @click=${this.onAggregationSelect} ${c(this.aggregationElement)}></arcgis-charts-config-field-select>`;
+    return l`<arcgis-charts-config-field-select .label=${this.model.aggregationType === g.NoAggregation ? this._messages.noAggregation : this.aggregationLabel} @click=${this.onAggregationSelect} ${c(this.aggregationElement)}></arcgis-charts-config-field-select>`;
   }
   renderNumericFieldsSelect() {
     const e = this.model.numericFields?.[0] === B(this.model.layer).idField ? "" : T(this.layerFieldsInfo, this.model.numericFields?.[0]);
@@ -339,15 +339,15 @@ class re extends D {
     return l`<calcite-table caption="Simple table"><calcite-table-row slot=table-header><calcite-table-header .heading=${this._messages.symbol}></calcite-table-header><calcite-table-header .heading=${this._messages.upperValue}></calcite-table-header></calcite-table-row>${e.map((t) => l`<calcite-table-row><calcite-table-cell><calcite-swatch label scale=m .color=${`rgba(${t.symbol.color?.[0]}, ${t.symbol.color?.[1]}, ${t.symbol.color?.[2]}, ${t.symbol.color?.[3] / 255})`}></calcite-swatch></calcite-table-cell><calcite-table-cell>${t.label}</calcite-table-cell></calcite-table-row>`)}</calcite-table>`;
   }
   renderNullUI() {
-    const e = this.model.emptyCell, t = this._messages.null, a = e?.symbol?.color ?? x.grayColor, [i, d, g, C] = [...a], f = `rgba(${i},${d},${g},${C / 255})`;
+    const e = this.model.emptyCell, t = this._messages.null, a = e?.symbol?.color ?? x.grayColor, [i, d, p, C] = [...a], f = `rgba(${i},${d},${p},${C / 255})`;
     return l`<calcite-list label class=${o(r.list)} selection-mode=none ${c(this.nullElement)}><calcite-list-item .label=${t} .value=${t} @calciteListItemSelect=${this.onNullSelect}><calcite-icon icon=square-f style=${F({ color: f })} slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
   }
   renderEmptyBins() {
     return l`<calcite-radio-button-group name=empty-bins layout=vertical @calciteRadioButtonGroupChange=${this.onNullPolicyChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Zero} .checked=${this.model.nullPolicy === h.Zero}></calcite-radio-button>${this._messages.treatAsZero}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Null} .checked=${this.model.nullPolicy === h.Null}></calcite-radio-button>${this._messages.treatAsNull}</calcite-label></calcite-radio-button-group>`;
   }
   render() {
-    const e = this.renderXAxisFieldSelect(), t = this.renderAggregation(), a = this.renderNumericFieldsSelect(), i = this.renderCalendarTypeSelect(), d = this.renderClassBreakMethodSelect(), g = this.renderColorRampSelect(), C = this.renderClassBreaksTable(), f = this.renderNullUI(), S = this.renderEmptyBins();
-    return l`<calcite-label class=${o(r.label)}>${this._messages.dateRequired}${e}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.calendarType}${i}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.aggregation}${t}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numericField}${a}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.method}${d}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numberOfClasses}<calcite-input type=number .min=${u.min} .max=${u.max} .disabled=${this.model.classificationMethod === void 0 || this.model.classificationMethod === v.manual} step=1 .value=${J(this.model.breaksCount, 5)} @calciteInputInput=${this.onBreaksCountChange} ${c(this.breaksCountElement)}></calcite-input></calcite-label><calcite-label class=${o(r.label)}>${this._messages.colorScheme}${g}</calcite-label>${f}<calcite-accordion class=${o(r.accordion)} appearance=transparent selection-mode=single><calcite-accordion-item .heading=${this._messages.classBreaks}>${C}</calcite-accordion-item></calcite-accordion><calcite-label class=${o(r.label)}>${this._messages.emptyBins}${S}</calcite-label>${$(this.model) === y.YearByMonthAndDayOfMonth ? l`<calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.includeLeapDay}<calcite-switch .checked=${this.model.includeLeapDay} @calciteSwitchChange=${this.onIncludeLeapDayChange}></calcite-switch></calcite-label>` : null}`;
+    const e = this.renderXAxisFieldSelect(), t = this.renderAggregation(), a = this.renderNumericFieldsSelect(), i = this.renderCalendarTypeSelect(), d = this.renderClassBreakMethodSelect(), p = this.renderColorRampSelect(), C = this.renderClassBreaksTable(), f = this.renderNullUI(), S = this.renderEmptyBins();
+    return l`<calcite-label class=${o(r.label)}>${this._messages.dateRequired}${e}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.calendarType}${i}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.aggregation}${t}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numericField}${a}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.method}${d}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numberOfClasses}<calcite-input type=number .min=${u.min} .max=${u.max} .disabled=${this.model.classificationMethod === void 0 || this.model.classificationMethod === v.manual} step=1 .value=${J(this.model.breaksCount, 5)} @calciteInputInput=${this.onBreaksCountChange} ${c(this.breaksCountElement)}></calcite-input></calcite-label><calcite-label class=${o(r.label)}>${this._messages.colorScheme}${p}</calcite-label>${f}<calcite-accordion class=${o(r.accordion)} appearance=transparent selection-mode=single><calcite-accordion-item .heading=${this._messages.classBreaks}>${C}</calcite-accordion-item></calcite-accordion><calcite-label class=${o(r.label)}>${this._messages.emptyBins}${S}</calcite-label>${$(this.model) === y.YearByMonthAndDayOfMonth ? l`<calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.includeLeapDay}<calcite-switch .checked=${this.model.includeLeapDay} @calciteSwitchChange=${this.onIncludeLeapDayChange}></calcite-switch></calcite-label>` : null}`;
   }
 }
 E("arcgis-charts-config-heat-chart-data", re);

package/dist/components/arcgis-charts-config-heat-chart-popover/customElement.js

@@ -60,7 +60,7 @@ const j = F`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.a
 };
 class q extends L {
   constructor() {
-    super(...arguments), this._messages = v(), this.commonStrings = v({ name: "common", blocking: !0 }), this.picklist = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.availableColorRamps = [], this.selectedCategory = k.all, this.aggregationLabels = [], this.isFlipped = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigHeatChartColorRampChange = h(), this.arcgisChartsConfigHeatChartDataPopoverChange = h(), this.arcgisChartsConfigPopoverClose = h(), this.arcgisChartsConfigPopoverEmptyCellColorChange = h(), this.arcgisChartsConfigPopoverEmptyCellNameChange = h();
+    super(...arguments), this._messages = v(), this.commonStrings = v({ name: "common", blocking: !0 }), this.picklist = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.availableColorRamps = [], this.selectedCategory = k.all, this.aggregationLabels = [], this.isFlipped = !1, this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigHeatChartColorRampChange = h(), this.arcgisChartsConfigHeatChartDataPopoverChange = h(), this.arcgisChartsConfigPopoverClose = h(), this.arcgisChartsConfigPopoverEmptyCellColorChange = h(), this.arcgisChartsConfigPopoverEmptyCellNameChange = h();
   }
   static {
     this.properties = { availableColorRamps: 16, selectedColorRampName: 16, selectedCategory: 16, aggregationLabels: 16, isFlipped: 5, model: 0, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1, colorRamps: 0 };

package/dist/components/arcgis-charts-config-histogram/customElement.js

@@ -39,7 +39,7 @@ class p extends d {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(t);
-    };
+    }, this.usePopupTemplateFieldsInfo = !1;
   }
   static {
     this.properties = { layerFieldsInfo: 16, model: 0, chartData: 0, seriesColor: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5 };

package/dist/components/arcgis-charts-config-histogram-data/customElement.js

@@ -106,7 +106,7 @@ class q extends U {
         }
     }, this.popoverClose = (e) => {
       this.histogramPopover === e.target && (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = void 0, this.selectedNumericalField = void 0, this.selectedTransformationType = void 0, this.binColorSelected = !1), this.removeHistogramDataPopover();
-    }, this.binColorSelected = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = $(), this.arcgisChartsConfigHistogramDataPopoverChange = $();
+    }, this.binColorSelected = !1, this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigDataChangeError = $(), this.arcgisChartsConfigHistogramDataPopoverChange = $();
   }
   static {
     this.properties = { binColorSelected: 16, selectedBinColorSymbol: 16, selectedOverlaySymbol: 16, selectedNumericalField: 16, selectedTransformationType: 16, selectedOverlaySymbolType: 1, messageOverrides: 0, model: 0, meanValue: 9, medianValue: 9, standardDevValue: 9, minValue: 9, maxValue: 9, sumValue: 9, nullsValue: 9, countValue: 9, layerFieldsInfo: 0, open: 5 };

package/dist/components/arcgis-charts-config-histogram-popover/customElement.js

@@ -48,7 +48,7 @@ const i = {
 }, L = y`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
 class F extends T {
   constructor() {
-    super(...arguments), this._messages = k(), this.picklist = m(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
+    super(...arguments), this._messages = k(), this.picklist = m(), this.popoverElement = m(), this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
   }
   static {
     this.properties = { messageOverrides: 0, layerFieldsInfo: 0, headingTitle: 1, selectedNumericField: 1, selectedTransformationType: 1, selectedOverlaySymbol: 0, selectedBinColor: 0, referenceElement: 0, contentKind: 1, placement: 1, open: 5, selectedOverlaySymbolType: 1 };

package/dist/components/arcgis-charts-config-line-chart/customElement.js

@@ -30,16 +30,16 @@ import "@arcgis/core/applications/Components/imageryUtils.js";
 import "@arcgis/core/geometry/Extent.js";
 import "@arcgis/core/geometry/Point.js";
 import "@arcgis/toolkit/dom";
-import { LitElement as g, createEvent as f } from "@arcgis/lumina";
-import { css as p, html as r } from "lit";
-import { C as a } from "../../chunks/interfaces.js";
+import { LitElement as f, createEvent as g } from "@arcgis/lumina";
+import { css as p, html as a } from "lit";
+import { C as r } from "../../chunks/interfaces.js";
 const u = p`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
-class C extends g {
+class C extends f {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (t) => {
       const i = t?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
-    }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = f();
+    }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.arcgisChartsConfigNoSeriesUpdate = g();
   }
   static {
     this.properties = { layerFieldsInfo: 16, activeColorMatch: 16, model: 0, timeZone: 1, popoverPlacement: 1, seriesColor: 0, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5 };
@@ -78,23 +78,23 @@ class C extends g {
     const t = this.layerFieldsInfo?.find((s) => s.name === this.model.xAxisField), e = t !== void 0 && (h(t) || d(t));
     let i;
     switch (this.page) {
-      case a.Data:
-        i = r`<arcgis-charts-config-line-chart-data .model=${this.model} .resetTimeInterval=${this.model.resetTimeInterval} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-line-chart-data>`;
+      case r.Data:
+        i = a`<arcgis-charts-config-line-chart-data .model=${this.model} .resetTimeInterval=${this.model.resetTimeInterval} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-line-chart-data>`;
         break;
-      case a.Series:
-        i = r`<arcgis-charts-config-line-chart-series .model=${this.model} .activeColorMatch=${this.activeColorMatch} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-line-chart-series>`;
+      case r.Series:
+        i = a`<arcgis-charts-config-line-chart-series .model=${this.model} .activeColorMatch=${this.activeColorMatch} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-line-chart-series>`;
         break;
-      case a.Axes:
-        i = r`<arcgis-charts-config-axes .model=${this.model} show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
+      case r.Axes:
+        i = a`<arcgis-charts-config-axes .model=${this.model} show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
         break;
-      case a.Guides:
-        i = r`<arcgis-charts-config-guides .model=${this.model} .timeZone=${this.timeZone} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .enableXAxisGuide=${e} enable-y-axis-guide></arcgis-charts-config-guides>`;
+      case r.Guides:
+        i = a`<arcgis-charts-config-guides .model=${this.model} .timeZone=${this.timeZone} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .enableXAxisGuide=${e} enable-y-axis-guide></arcgis-charts-config-guides>`;
         break;
-      case a.Format:
-        i = r`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
+      case r.Format:
+        i = a`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
-      case a.General:
-        i = r`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+      case r.General:
+        i = a`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         i = "";

package/dist/components/arcgis-charts-config-line-chart-popover/customElement.js

@@ -50,7 +50,7 @@ const _ = N`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.a
 };
 class H extends z {
   constructor() {
-    super(...arguments), this._messages = L(), this.commonStrings = L({ name: "common", blocking: !0 }), this.picklist = d(), this.intervalSizeElement = d(), this.intervalTypeElement = d(), this.popoverElement = d(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigLineChartDataPopoverChange = C(), this.arcgisChartsConfigLineChartPopoverClose = C();
+    super(...arguments), this._messages = L(), this.commonStrings = L({ name: "common", blocking: !0 }), this.picklist = d(), this.intervalSizeElement = d(), this.intervalTypeElement = d(), this.popoverElement = d(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigLineChartDataPopoverChange = C(), this.arcgisChartsConfigLineChartPopoverClose = C();
   }
   static {
     this.properties = { aggregationLabels: 16, timeAggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1 };

package/dist/components/arcgis-charts-config-line-chart-series-popover/customElement.js

@@ -44,7 +44,7 @@ const o = {
 }, w = C`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
 class x extends E {
   constructor() {
-    super(...arguments), this._messages = b(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
+    super(...arguments), this._messages = b(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedSeriesIndex: 9, selectedLineWidth: 9, placement: 1, open: 5 };

package/dist/components/arcgis-charts-config-line-style/customElement.js

@@ -1,23 +1,23 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
-import { css as m, html as l } from "lit";
+import { css as m, html as s } from "lit";
 import "@arcgis/toolkit/type";
 import "../../chunks/series-types.js";
 import { i as y, g as t } from "../../chunks/rest-js-object-literals.js";
-import { i as u, m as a, s as g, U as c } from "../../chunks/chart-ui-utils2.js";
+import { i as u, m as o, s as g, U as c } from "../../chunks/chart-ui-utils2.js";
 import { u as S } from "../../chunks/useT9n.js";
-import { createRef as r, ref as d } from "lit/directives/ref.js";
-import { LitElement as f, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
-const o = {
+import { createRef as r, ref as h } from "lit/directives/ref.js";
+import { LitElement as f, createEvent as d, safeClassMap as l, nothing as n } from "@arcgis/lumina";
+const a = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   colorPickerContainer: "color-picker-container"
 }, w = m`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
-class v extends f {
+class b extends f {
   constructor() {
     super(...arguments), this._messages = S(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
       type: y.SLS
-    }, this.arcgisChartsConfigLineStyleChange = h(), this.arcgisChartsConfigLineStyleClose = h();
+    }, this.open = !1, this.enableClose = !1, this.usePanel = !1, this.arcgisChartsConfigLineStyleChange = d(), this.arcgisChartsConfigLineStyleClose = d();
   }
   static {
     this.properties = { messageOverrides: 0, lineStyle: 0, header: 1, open: 5, enableClose: 5, usePanel: 5 };
@@ -26,7 +26,7 @@ class v extends f {
     this.styles = w;
   }
   closePanel(e) {
-    e.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigLineStyleClose.emit());
+    e.target.closed && this.enableClose && (this.open = !1, this.arcgisChartsConfigLineStyleClose.emit());
   }
   colorChange(e) {
     this.lineStyle.color = e.detail, this.emitLineStyleEvent();
@@ -53,10 +53,10 @@ class v extends f {
   }
   widthChange() {
     const e = this.lineWidthInputElement.value?.value;
-    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && a({
+    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && o({
       inputElement: this.lineWidthInputElement.value,
       status: c.IDLE
-    })) : this.lineWidthInputElement.value && a({
+    })) : this.lineWidthInputElement.value && o({
       inputElement: this.lineWidthInputElement.value,
       status: c.INVALID
     });
@@ -66,13 +66,13 @@ class v extends f {
   }
   render() {
     const e = [
-      l`<div class=${s(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(o.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${g(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
-      l`<div class=${s(o.colorPickerContainer)}><arcgis-charts-config-colors .rgba=${this.lineStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
+      s`<div class=${l(a.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${h(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${l(a.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${g(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${h(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
+      s`<div class=${l(a.colorPickerContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${this.lineStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
     ];
-    return this.usePanel !== !1 ? l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;
+    return this.usePanel ? s`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;
   }
 }
-p("arcgis-charts-config-line-style", v);
+p("arcgis-charts-config-line-style", b);
 export {
-  v as ArcgisChartsConfigLineStyle
+  b as ArcgisChartsConfigLineStyle
 };

package/dist/components/arcgis-charts-config-pie-chart/customElement.js

@@ -32,21 +32,21 @@ import "@arcgis/core/geometry/Extent.js";
 import "@arcgis/core/geometry/Point.js";
 import "@arcgis/toolkit/dom";
 import { LitElement as F, createEvent as f } from "@arcgis/lumina";
-import { css as L, html as n } from "lit";
+import { css as S, html as n } from "lit";
 import { C as h } from "../../chunks/interfaces.js";
-const S = L`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
+const L = S`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
 class b extends F {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const o = e?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(o);
-    }, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = f(), this.arcgisChartsConfigWebChartChange = f();
+    }, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.filterBySelection = !1, this.arcgisChartsConfigNoSeriesUpdate = f(), this.arcgisChartsConfigWebChartChange = f();
   }
   static {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, seriesColor: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5, filterBySelection: 5, chartData: 0 };
   }
   static {
-    this.styles = S;
+    this.styles = L;
   }
   async load() {
     this.seriesColor !== void 0 && this.seriesColorChange(this.seriesColor), await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
@@ -64,7 +64,7 @@ class b extends F {
   seriesColorChange(e) {
     const { slices: i, groupedSlices: o, groupOfSlices: r } = e?.get(0) ?? {};
     let t = [];
-    this.filterBySelection === !0 ? t = this.model.slices?.map((a) => i?.find((s) => s.sliceId === a.sliceId) ?? o?.find((s) => s.sliceId === a.sliceId) ?? a) ?? [] : t = (i ?? []).concat(o ?? []), t.forEach((a, s) => {
+    this.filterBySelection ? t = this.model.slices?.map((a) => i?.find((s) => s.sliceId === a.sliceId) ?? o?.find((s) => s.sliceId === a.sliceId) ?? a) ?? [] : t = (i ?? []).concat(o ?? []), t.forEach((a, s) => {
       const p = this.model.slices?.find((g) => g.sliceId === t[s].sliceId);
       p && (t[s] = { ...t[s], ...p });
       const l = t[s].fillSymbol;

package/dist/components/arcgis-charts-config-pie-chart-popover/customElement.js

@@ -51,7 +51,7 @@ const n = {
 }, A = S`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.fab{display:flex;justify-content:stretch}.pick-list-item-label{font-size:small}.sort-icon-color{color:#000}.sort-counter-clockwise{transform:scaleX(-1)}.panel{max-height:60vh}`;
 class w extends E {
   constructor() {
-    super(...arguments), this._messages = f(), this.commonStrings = f({ name: "common", blocking: !0 }), this.picklist = C(), this.popoverElement = C(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.layerFieldsInfo = [], this.arcgisChartsConfigPieChartDataPopoverChange = b(), this.arcgisChartsConfigPopoverClose = b();
+    super(...arguments), this._messages = f(), this.commonStrings = f({ name: "common", blocking: !0 }), this.picklist = C(), this.popoverElement = C(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPieChartDataPopoverChange = b(), this.arcgisChartsConfigPopoverClose = b();
   }
   static {
     this.properties = { aggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1 };

package/dist/components/arcgis-charts-config-pie-chart-slices-popover/customElement.js

@@ -40,7 +40,7 @@ const s = {
 }, u = p`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
 class y extends f {
   constructor() {
-    super(...arguments), this._messages = g(), this.popoverElement = C(), this.selectedSliceId = "", this.arcgisChartsConfigPopoverClose = i(), this.arcgisChartsConfigSlicesPopoverColorChange = i(), this.arcgisChartsConfigSlicesPopoverNameChange = i();
+    super(...arguments), this._messages = g(), this.popoverElement = C(), this.selectedSliceId = "", this.open = !1, this.arcgisChartsConfigPopoverClose = i(), this.arcgisChartsConfigSlicesPopoverColorChange = i(), this.arcgisChartsConfigSlicesPopoverNameChange = i();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedSliceId: 1, placement: 1, open: 5 };

package/dist/components/arcgis-charts-config-scatter-plot/customElement.js

@@ -39,7 +39,7 @@ class u extends h {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(t);
-    }, this.popoverPlacement = "leading", this.arcgisChartsConfigWebChartChange = p();
+    }, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.arcgisChartsConfigWebChartChange = p();
   }
   static {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5 };

package/dist/components/arcgis-charts-config-scatter-plot-data/customElement.js

@@ -104,7 +104,7 @@ class K extends _ {
     }, this.segmentedControlRef = (e) => {
       e && (e.focus = () => {
       }, this.items.push(e));
-    }, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = E(), this.arcgisChartsConfigScatterplotPopoverChange = E();
+    }, this.layerFieldsInfo = [], this.isTableLayer = !1, this.arcgisChartsConfigDataChangeError = E(), this.arcgisChartsConfigScatterplotPopoverChange = E();
   }
   static {
     this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 9, layerFieldsInfo: 0, isTableLayer: 5 };
@@ -291,7 +291,7 @@ class K extends _ {
   }
   renderSymbol() {
     const [e, t, s, o] = [...this.model.fixedMarkerSymbol?.color ?? z(0)];
-    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && this.isTableLayer !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${I({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer ? null : r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>`}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && !this.isTableLayer} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${I({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   render() {
     return r`<h3 class=${i(l.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(l.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><calcite-label class=${i(l.label)}><span class=${i(this.model.dataStore.aggregated ? l.dimText : "")}>${this._messages.additionalTooltipFields}</span>${this.renderTooltipField()}</calcite-label><h3 class=${i(l.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(l.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}`;

package/dist/components/arcgis-charts-config-scatter-plot-popover/customElement.js

@@ -47,7 +47,7 @@ const r = {
 }, F = f`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
 class L extends P {
   constructor() {
-    super(...arguments), this.picklist = m(), this._messages = b(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = m(), this._messages = b(), this.popoverElement = m(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, contentKind: 1, selectedContent: 1, referenceElement: 0, placement: 1, open: 5, layerFieldsInfo: 0 };

package/dist/components/arcgis-charts-config-select-chart-type-popover/customElement.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
+import { c } from "../../chunks/runtime.js";
 import { css as o, html as i } from "lit";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
@@ -33,7 +33,7 @@ import "@arcgis/toolkit/dom";
 import { e as p } from "../../chunks/popover-ui-utils.js";
 import { u as n } from "../../chunks/useT9n.js";
 import { createRef as h, ref as m } from "lit/directives/ref.js";
-import { LitElement as d, createEvent as s, safeClassMap as c } from "@arcgis/lumina";
+import { LitElement as d, createEvent as s, safeClassMap as l } from "@arcgis/lumina";
 import { M as e } from "../../chunks/common.js";
 const a = {
   selectChartComponent: "select-chart-component",
@@ -42,7 +42,7 @@ const a = {
 }, g = o`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
 class C extends d {
   constructor() {
-    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
+    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, layerType: 1, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
@@ -77,13 +77,13 @@ class C extends d {
     }, 250);
   }
   render() {
-    return i`<div class=${c({
+    return i`<div class=${l({
       [a.selectChartComponent]: !0,
       [a.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${c(a.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${l(a.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
-l("arcgis-charts-config-select-chart-type-popover", C);
+c("arcgis-charts-config-select-chart-type-popover", C);
 export {
   C as ArcgisChartsConfigSelectChartTypePopover
 };