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

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

@@ -3,16 +3,16 @@ import { c as t } from "../../chunks/runtime.js";
 import { css as o, html as n } from "lit";
 import { u as e } from "../../chunks/useT9n.js";
 import { LitElement as d } from "@arcgis/lumina";
-const u = o`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width)}`;
-class l extends d {
+const l = o`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width)}`;
+class u extends d {
   constructor() {
-    super(...arguments), this._messages = e(), this.open = !1;
+    super(...arguments), this._messages = e(), this.open = !1, this.showMinXBoundOption = !1, this.showMaxXBoundOption = !1, this.showMinYBoundOption = !1, this.showMaxYBoundOption = !1, this.showEnableXLogOption = !1, this.showEnableYLogOption = !1;
   }
   static {
     this.properties = { messageOverrides: 0, model: 0, calculatedDataMinMaxBounds: 0, open: 5, showMinXBoundOption: 5, showMaxXBoundOption: 5, showMinYBoundOption: 5, showMaxYBoundOption: 5, showEnableXLogOption: 5, showEnableYLogOption: 5, calculatedMinMaxBounds: 0 };
   }
   static {
-    this.styles = u;
+    this.styles = l;
   }
   getMinFromCalculatedDataBounds(i) {
     return this.calculatedDataMinMaxBounds?.find((a) => a.isXAxis === i)?.minimum ?? Number.NaN;
@@ -25,7 +25,7 @@ class l extends d {
     return n`<arcgis-charts-config-axis .model=${this.model} is-x-axis .axisTitle=${this._messages.xAxis} .showMinBoundOption=${this.showMinXBoundOption} .showMaxBoundOption=${this.showMaxXBoundOption} .showEnableLogOption=${this.showEnableXLogOption} .dataMinValue=${this.getMinFromCalculatedDataBounds(!0)} .dataMaxValue=${this.getMaxFromCalculatedDataBounds(!0)} .initialMaxBound=${i?.maximum} .initialMinBound=${i?.minimum}></arcgis-charts-config-axis><arcgis-charts-config-axis .model=${this.model} .axisTitle=${this._messages.yAxis} .showMinBoundOption=${this.showMinYBoundOption} .showMaxBoundOption=${this.showMaxYBoundOption} .showEnableLogOption=${this.showEnableYLogOption} .dataMinValue=${this.getMinFromCalculatedDataBounds(!1)} .dataMaxValue=${this.getMaxFromCalculatedDataBounds(!1)} .initialMaxBound=${s?.maximum} .initialMinBound=${s?.minimum}></arcgis-charts-config-axis>`;
   }
 }
-t("arcgis-charts-config-axes", l);
+t("arcgis-charts-config-axes", u);
 export {
-  l as ArcgisChartsConfigAxes
+  u as ArcgisChartsConfigAxes
 };

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

@@ -59,7 +59,7 @@ class L extends C {
       }), e !== a.INVALID && this.maxBoundInputElement.value?.status === a.INVALID && this.onMaxBoundsChange(), this.updateEnableLogarithmic(this.axisModel.getLogarithmic() && (this.dataMinValue ?? Number.NaN) > 0), this.requestUpdate();
     }, this.onMinBoundsChangeDebounced = m(this.onMinBoundsChange, x.DebounceTimer), this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.disableMaxBoundResetBtn = !0, this.disableMinBoundResetBtn = !0, this.isXAxis = !1, this.axisTitle = "";
+    }, this.disableMaxBoundResetBtn = !0, this.disableMinBoundResetBtn = !0, this.isXAxis = !1, this.axisTitle = "", this.showMaxBoundOption = !1, this.showMinBoundOption = !1, this.showEnableLogOption = !1;
   }
   static {
     this.properties = { disableMaxBoundResetBtn: 16, disableMinBoundResetBtn: 16, messageOverrides: 0, model: 0, isXAxis: 5, axisTitle: 1, maxBoundMaxLimit: 9, maxBoundMinLimit: 9, minBoundMinLimit: 9, minBoundMaxLimit: 9, showMaxBoundOption: 5, showMinBoundOption: 5, showEnableLogOption: 5, dataMaxValue: 9, dataMinValue: 9, initialMaxBound: 9, initialMinBound: 9 };

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

@@ -39,7 +39,7 @@ class C extends p {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const i = e?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
-    }, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = g();
+    }, 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, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5 };

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

@@ -110,7 +110,7 @@ class J extends q {
       this.requestUpdate();
     }, this.popoverClose = (e) => {
       this.barChartPopover === e?.target && this.removeBarChartDataPopover();
-    }, this.selectedCustomSortItemId = "", this.sortOrderResetCounter = 0, this.layerFieldsInfo = [], this.arcgisChartsConfigBarChartDataNumericFieldValidate = v(), this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigResetTimeInterval = v(), this.arcgisChartsConfigCustomizedTimeInterval = v();
+    }, this.selectedCustomSortItemId = "", this.sortOrderResetCounter = 0, this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigBarChartDataNumericFieldValidate = v(), this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigResetTimeInterval = v(), this.arcgisChartsConfigCustomizedTimeInterval = v();
   }
   static {
     this.properties = { selectedCustomSortItemId: 16, aggregationLabel: 16, timeAggregationLabel: 16, disableSplitBy: 16, sortOrderResetCounter: 16, messageOverrides: 0, model: 0, layerFieldsInfo: 0, open: 5 };

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

@@ -53,7 +53,7 @@ const R = x`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.a
 };
 class q extends T {
   constructor() {
-    super(...arguments), this._messages = L(), this.commonStrings = L({ name: "common", blocking: !0 }), this.picklist = u(), this.intervalSizeElement = u(), this.intervalTypeElement = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.isNoAggregationDisabled = !1, this.arcgisChartsConfigBarChartDataPopoverChange = y(), this.arcgisChartsConfigPopoverClose = y();
+    super(...arguments), this._messages = L(), this.commonStrings = L({ name: "common", blocking: !0 }), this.picklist = u(), this.intervalSizeElement = u(), this.intervalTypeElement = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.isNoAggregationDisabled = !1, this.arcgisChartsConfigBarChartDataPopoverChange = y(), this.arcgisChartsConfigPopoverClose = y();
   }
   static {
     this.properties = { aggregationLabels: 16, timeAggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1, isCustomSortDisabled: 5, isNoAggregationDisabled: 5 };

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

@@ -40,7 +40,7 @@ const r = {
 }, 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.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSeriesPopoverColorChange = o(), this.arcgisChartsConfigSeriesPopoverNameChange = o();
+    super(...arguments), this._messages = g(), this.popoverElement = C(), this.open = !1, this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSeriesPopoverColorChange = o(), this.arcgisChartsConfigSeriesPopoverNameChange = o();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedSeriesIndex: 9, placement: 1, open: 5, nullCategory: 0 };

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

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

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

@@ -52,7 +52,7 @@ const o = {
 }, N = T`.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-mean,.sort-median{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
 class K extends E {
   constructor() {
-    super(...arguments), this._messages = S(), this.picklist = b(), this.placement = "leading", this.popoverElement = b(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = C(), this.arcgisChartsConfigPopoverClose = C();
+    super(...arguments), this._messages = S(), this.picklist = b(), this.placement = "leading", this.popoverElement = b(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = C(), this.arcgisChartsConfigPopoverClose = C();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, isCustomSortDisabled: 5, selectedContent: 1 };

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

@@ -38,16 +38,16 @@ import { LitElement as $, createEvent as l, safeClassMap as n } from "@arcgis/lu
 const c = {
   jsAppFlyout: "js-app-flyout",
   panelChildrenContainer: "panel-children-container"
-}, P = 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{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 L extends $ {
+}, L = 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{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 P extends $ {
   constructor() {
-    super(...arguments), this._messages = S(), this.popoverElement = u(), this.isLineSymbol = !1, this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigSeriesPopoverColorChange = l(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = l(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = l(), this.arcgisChartsConfigSeriesPopoverNameChange = l();
+    super(...arguments), this._messages = S(), this.popoverElement = u(), this.isLineSymbol = !1, this.open = !1, this.labelCanBeConfigured = !1, this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigSeriesPopoverColorChange = l(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = l(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = l(), this.arcgisChartsConfigSeriesPopoverNameChange = l();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedLineWidth: 9, selectedSeriesIndex: 9, isLineSymbol: 5, placement: 1, open: 5, labelCanBeConfigured: 5 };
   }
   static {
-    this.styles = P;
+    this.styles = L;
   }
   async reposition() {
     await this.popoverElement.value?.reposition();
@@ -56,29 +56,29 @@ class L extends $ {
     y(this.popoverElement.value, this.open);
   }
   seriesNameChange(e) {
-    const t = e.target.value;
-    this.selectedName !== t && (this.selectedName = t, this.arcgisChartsConfigSeriesPopoverNameChange.emit({ name: t }));
+    const i = e.target.value;
+    this.selectedName !== i && (this.selectedName = i, this.arcgisChartsConfigSeriesPopoverNameChange.emit({ name: i }));
   }
   closePopover() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [s, i, o] = t, r = d * 255;
-    this.selectedColor = [s, i, o, r], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [s, i, o, r] });
+    const i = e instanceof CustomEvent ? e.detail : e, [s, t, o] = i, r = d * 255;
+    this.selectedColor = [s, t, o, r], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [s, t, o, r] });
   }
   lineSymbolChange(e) {
-    const { lineStyle: t } = e.target, { color: s, style: i, width: o } = t;
+    const { lineStyle: i } = e.target, { color: s, style: t, width: o } = i;
     if (s !== void 0 && !f(s, this.selectedColor)) {
       const [r, p, h] = s, m = d * 255;
       this.selectedColor = [r, p, h, m], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [r, p, h, m] });
     }
-    i !== void 0 && i !== this.selectedLineStyle && (this.selectedLineStyle = i, this.arcgisChartsConfigSeriesPopoverLineStyleChange.emit({ style: i })), o !== void 0 && o !== this.selectedLineWidth && (this.selectedLineWidth = o, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ width: o }));
+    t !== void 0 && t !== this.selectedLineStyle && (this.selectedLineStyle = t, this.arcgisChartsConfigSeriesPopoverLineStyleChange.emit({ style: t })), o !== void 0 && o !== this.selectedLineWidth && (this.selectedLineWidth = o, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ width: o }));
   }
   render() {
     const e = this.selectedColor;
     return a`<div class=${n({
       [c.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${b(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}>${this.labelCanBeConfigured ? a`<div class=${n(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div>` : null}<div class=${n(c.panelChildrenContainer)}>${this.isLineSymbol ? a`<arcgis-charts-config-line-style .open=${this.open} enable-close .lineStyle=${{
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${b(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}>${this.labelCanBeConfigured ? a`<div class=${n(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div>` : null}<div class=${n(this.isLineSymbol ? "" : c.panelChildrenContainer)}>${this.isLineSymbol ? a`<arcgis-charts-config-line-style .open=${this.open} enable-close .lineStyle=${{
       type: v.SLS,
       style: this.selectedLineStyle,
       width: this.selectedLineWidth,
@@ -86,7 +86,7 @@ class L extends $ {
     }} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.lineSymbolChange}></arcgis-charts-config-line-style>` : a`<arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors>`}</div></calcite-panel></calcite-popover></div>`;
   }
 }
-g("arcgis-charts-config-box-plot-series-popover", L);
+g("arcgis-charts-config-box-plot-series-popover", P);
 export {
-  L as ArcgisChartsConfigBoxPlotSeriesPopover
+  P as ArcgisChartsConfigBoxPlotSeriesPopover
 };

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

@@ -43,7 +43,7 @@ const e = {
 }, v = d`.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)}.chart-rename-component{width:var(--arcgis-charts-config-panel-width-medium);height:var(--arcgis-charts-config-panel-height)}:host{overflow-y:auto;width:min-content}.rename-label-container{display:flex;padding:0 1rem;margin-top:1rem}.rename-label-container calcite-label{flex:1 1 0px;display:flex;width:0px}.rename-panel{width:calc(var(--calcite-panel-width-multiplier) * 20vw);max-width:calc(var(--calcite-panel-width-multiplier) * 420px);min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}`;
 class C extends g {
   constructor() {
-    super(...arguments), this._messages = h(), this.characterLimitInputElement = r(), this.popoverElement = r(), this.isChartTitleInvalid = !1, this.changedName = "", this.name = "", this.arcgisChartsConfigChartRenamePopoverChange = o(), this.arcgisChartsConfigPopoverClose = o();
+    super(...arguments), this._messages = h(), this.characterLimitInputElement = r(), this.popoverElement = r(), this.isChartTitleInvalid = !1, this.changedName = "", this.name = "", this.open = !1, this.arcgisChartsConfigChartRenamePopoverChange = o(), this.arcgisChartsConfigPopoverClose = o();
   }
   static {
     this.properties = { isChartTitleInvalid: 16, changedName: 16, messageOverrides: 0, name: 1, open: 5, referenceElement: 0 };

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

@@ -8,7 +8,7 @@ const n = {
 }, c = 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)}:host{overflow-y:auto;width:min-content}:host calcite-panel .color-style-container{display:flex;padding:0 1rem;margin-top:1rem}:host calcite-panel .color-style-container calcite-label{flex:1 1 0px;display:flex;width:0px}.color-styling-panel>.panel-body{padding:var(--arcgis-charts-panel-padding);margin-top:var(--arcgis-charts-inter-section-margin)}`;
 class h extends i {
   constructor() {
-    super(...arguments), this._messages = l(), this.enableClose = !1, this.arcgisChartsConfigColorStyleChange = t(), this.arcgisChartsConfigColorStyleClose = t();
+    super(...arguments), this._messages = l(), this.open = !1, this.enableClose = !1, this.arcgisChartsConfigColorStyleChange = t(), this.arcgisChartsConfigColorStyleClose = t();
   }
   static {
     this.properties = { messageOverrides: 0, header: 1, selectedColor: 0, open: 5, enableClose: 5 };
@@ -23,7 +23,7 @@ class h extends i {
     this.selectedColor = e.detail, this.arcgisChartsConfigColorStyleChange.emit(this.selectedColor);
   }
   render() {
-    return a`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}><div class=${r(n.colorStyleContainer)}><arcgis-charts-config-colors @arcgisColorSelect=${this.colorChange} .rgba=${this.selectedColor}></arcgis-charts-config-colors></div></calcite-panel>`;
+    return a`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}><div class=${r(n.colorStyleContainer)}><arcgis-charts-config-colors @arcgisColorSelect=${this.colorChange} .rgba=${this.selectedColor}></arcgis-charts-config-colors></div></calcite-panel>`;
   }
 }
 s("arcgis-charts-config-color-style", h);

package/dist/components/arcgis-charts-config-create-flow/customElement.js

@@ -30,7 +30,7 @@ import { C as f } from "../../chunks/index5.js";
 import { a as L } from "../../chunks/chart-ui-utils.js";
 import { r as j } from "../../chunks/popover-ui-utils.js";
 import { substitute as q } from "@arcgis/core/intl.js";
-import { C as l } from "../../chunks/interfaces.js";
+import { C as n } from "../../chunks/interfaces.js";
 import "@arcgis/core/layers/support/FeatureFilter.js";
 import "@arcgis/core/smartMapping/statistics/histogram.js";
 import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
@@ -58,14 +58,14 @@ function B(p, e) {
     (i.has(r) || r === void 0 || r === "") && (a.chartId = `Chart_${Date.now()}_${s}`, e === r && (t = a.chartId)), i.add(r);
   }), t;
 }
-function ne(p, e, i) {
+function le(p, e, i) {
   return p?.filter((t) => F(i, t.config) && t.layer?.id === e) ?? [];
 }
-function le(p) {
+function ne(p) {
   const { modelList: e, layerList: i, activeLayerId: t, disableEditing: a } = p, s = /* @__PURE__ */ new Map();
   return e?.forEach((r) => {
-    const n = r.layer;
-    n && s.set(n.id, n);
+    const l = r.layer;
+    l && s.set(l.id, l);
   }), a || i.forEach((r) => s.set(r.id, r)), Array.from(s.values()).filter((r) => !t || r.id === t);
 }
 function ce(p, e) {
@@ -118,8 +118,8 @@ class pe extends Y {
         switch (s?.chartType) {
           case o.HistogramSeries:
             if (this.chartData = t, a && (a.dataStore.chartData = t, z(a.layer))) {
-              const n = a, c = t?.bins?.length;
-              c !== void 0 && n.binCount !== c && (n.binCount = c);
+              const l = a, c = t?.bins?.length;
+              c !== void 0 && l.binCount !== c && (l.binCount = c);
             }
             break;
           case o.PieSeries: {
@@ -127,25 +127,25 @@ class pe extends Y {
             break;
           }
           case o.ScatterSeries: {
-            const n = t, { dataItems: c, r2: g, aggregated: u } = n;
+            const l = t, { dataItems: c, r2: g, aggregated: u } = l;
             let C = g;
             Number.isFinite(g) || (C = void 0), this.r2 = C, _(a) && (a.dataStore.r2 = C, a.dataStore.aggregated = u, u && (a.additionalTooltipField = void 0)), this.calculatedDataMinMaxBounds = this.getDataExtent(c), a && (a.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
             break;
           }
           case o.LineSeries:
           case o.BarSeries: {
-            const { dataItems: n, timeIntervalInfo: c } = t;
-            if ((S(s) || b(s) && s.binTemporalData) && (c?.size !== void 0 && s.temporalBinningSize !== c?.size && (s.temporalBinningSize = c?.size), c?.unit !== void 0 && s.temporalBinningUnit !== c?.unit && c?.unit !== K.Quarter && (s.temporalBinningUnit = c?.unit), c?.size !== void 0 && c?.unit !== void 0 && ae(x, { size: c.size, unit: c.unit })), this.calculatedDataMinMaxBounds = this.getDataExtent(n), a && (a.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds), b(s)) {
-              const g = s.xAxisField, u = n.some((A) => A[g] === null), C = s.nullCategory;
+            const { dataItems: l, timeIntervalInfo: c } = t;
+            if ((S(s) || b(s) && s.binTemporalData) && (c?.size !== void 0 && s.temporalBinningSize !== c?.size && (s.temporalBinningSize = c?.size), c?.unit !== void 0 && s.temporalBinningUnit !== c?.unit && c?.unit !== K.Quarter && (s.temporalBinningUnit = c?.unit), c?.size !== void 0 && c?.unit !== void 0 && ae(x, { size: c.size, unit: c.unit })), this.calculatedDataMinMaxBounds = this.getDataExtent(l), a && (a.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds), b(s)) {
+              const g = s.xAxisField, u = l.some((A) => A[g] === null), C = s.nullCategory;
               u && C === void 0 && (s.nullCategory = H.nullCategory);
             }
             break;
           }
         }
     }, this.chartAxesMinMaxChange = (e) => {
-      const i = e, { bounds: t, model: a } = i.detail, s = this.getModel(this.selectedChartId), r = a?.isSameChartAs(s), n = s?.chartType;
+      const i = e, { bounds: t, model: a } = i.detail, s = this.getModel(this.selectedChartId), r = a?.isSameChartAs(s), l = s?.chartType;
       if (r)
-        switch (n) {
+        switch (l) {
           case o.BarSeries:
           case o.BoxPlotSeries:
           case o.LineSeries:
@@ -165,14 +165,14 @@ class pe extends Y {
             this.seriesColor = t, a && (a.dataStore.seriesColor = t);
             break;
           case o.PieSeries: {
-            const n = /* @__PURE__ */ new Map([[0, t]]);
-            this.seriesColor = n, a && (a.dataStore.seriesColor = n);
+            const l = /* @__PURE__ */ new Map([[0, t]]);
+            this.seriesColor = l, a && (a.dataStore.seriesColor = l);
             break;
           }
           case o.ScatterSeries:
         }
     }, this.chartNoRenderPropChange = (e) => {
-      const i = e, { propName: t, value: a, model: s } = i.detail, r = this.modelList.find((n) => s?.isSameChartAs(n));
+      const i = e, { propName: t, value: a, model: s } = i.detail, r = this.modelList.find((l) => s?.isSameChartAs(l));
       if (r)
         switch (t) {
           case "rotation":
@@ -204,10 +204,10 @@ class pe extends Y {
         E(i?.layer, i);
       }
       this.requestUpdate();
-    }, this.allowChartSyncing = !1, this.currentChartTypeText = "", this.modelList = [], this.layerList = [], this.disableEditing = !1, this.syncChartsToLayers = !1, this.panelNumber = 0, this.arcgisChartsConfigChartViewChartClose = y(), this.arcgisChartsConfigModelListChange = y(), this.arcgisChartsConfigNewChart = y(), this.arcgisChartsConfigPanelNumberChange = y(), this.arcgisChartsConfigSelectedChartChange = y(), this.addChartEventListeners(), this.listen("arcgisChartsConfigModelListReorder", this.modelListReorderChangeListener);
+    }, this.allowChartSyncing = !1, this.currentChartTypeText = "", this.modelList = [], this.layerList = [], this.disableEditing = !1, this.syncChartsToLayers = !1, this.close = !1, this.usePopupTemplateFieldsInfo = !1, this.panelNumber = 0, this.filterBySelection = !1, this.arcgisChartsConfigChartViewChartClose = y(), this.arcgisChartsConfigModelListChange = y(), this.arcgisChartsConfigNewChart = y(), this.arcgisChartsConfigPanelNumberChange = y(), this.arcgisChartsConfigSelectedChartChange = y(), this.addChartEventListeners(), this.listen("arcgisChartsConfigModelListReorder", this.modelListReorderChangeListener);
   }
   static {
-    this.properties = { selectedPanel: 16, currentChartTypeText: 16, messageOverrides: 0, modelList: [0, { hasChanged: M }], layerList: [0, { hasChanged: M }], selectedChartId: 1, activeLayerId: 1, disableEditing: 5, syncChartsToLayers: 5, timeZone: 1, headerTitle: 1, open: 5, chartData: [0, { hasChanged: M }], r2: 9, calculatedDataMinMaxBounds: [0, { hasChanged: M }], calculatedMinMaxBounds: [0, { hasChanged: M }], seriesColor: [0, { hasChanged: re }], popoverPlacement: 1, usePopupTemplateFieldsInfo: 5, panelNumber: 9, filterBySelection: 5 };
+    this.properties = { selectedPanel: 16, currentChartTypeText: 16, messageOverrides: 0, modelList: [0, { hasChanged: M }], layerList: [0, { hasChanged: M }], selectedChartId: 1, activeLayerId: 1, disableEditing: 5, syncChartsToLayers: 5, timeZone: 1, headerTitle: 1, close: 5, chartData: [0, { hasChanged: M }], r2: 9, calculatedDataMinMaxBounds: [0, { hasChanged: M }], calculatedMinMaxBounds: [0, { hasChanged: M }], seriesColor: [0, { hasChanged: re }], popoverPlacement: 1, usePopupTemplateFieldsInfo: 5, panelNumber: 9, filterBySelection: 5 };
   }
   static {
     this.styles = me;
@@ -245,16 +245,16 @@ class pe extends Y {
     let t = [...this.modelList.filter((a) => i.includes(a.layer?.id ?? ""))];
     for (let a of this.layerList ?? []) {
       if (a.type === "sublayer") {
-        const n = await a.createFeatureLayer();
-        if (!n)
+        const l = await a.createFeatureLayer();
+        if (!l)
           continue;
-        a = n;
+        a = l;
       }
       const r = a.charts;
-      for (const n of r ?? []) {
+      for (const l of r ?? []) {
         const c = await U({
           layer: a,
-          config: n
+          config: l
         });
         c !== void 0 && e.push(c);
       }
@@ -277,7 +277,7 @@ class pe extends Y {
     }) : "", this.syncChartsToLayers && this.allowChartSyncing && ce(this.layerList, e), this.arcgisChartsConfigModelListChange.emit({ modelList: e });
   }
   selectedChartIdChange(e) {
-    this.selectedChartId === void 0 && (this.panelNumber = 0), this.selectedPanel = l.Data;
+    this.selectedChartId === void 0 && (this.panelNumber = 0), this.selectedPanel = n.Data;
     const i = this.getModel(e);
     this.setEventBasedPropsFromModelData(i), this.currentChartTypeText = i?.chartType !== void 0 ? L({
       chartType: i.chartType,
@@ -301,9 +301,9 @@ class pe extends Y {
       const a = W({
         chartConfig: i,
         chartData: e
-      }), { minY: s, maxY: r, minX: n, maxX: c } = a;
+      }), { minY: s, maxY: r, minX: l, maxX: c } = a;
       t = [
-        { isXAxis: !0, minimum: n, maximum: c },
+        { isXAxis: !0, minimum: l, maximum: c },
         { isXAxis: !1, minimum: s, maximum: r }
       ];
     }
@@ -313,10 +313,10 @@ class pe extends Y {
     e?.forEach((i) => {
       const { isXAxis: t, maximum: a, minimum: s } = i, r = this.getModel(this.selectedChartId);
       if (r !== void 0 && v(r) && this.selectedChartId !== void 0) {
-        const n = new se(r, t), c = ie({
+        const l = new se(r, t), c = ie({
           chartId: this.selectedChartId,
           isXAxis: t,
-          isLogarithmic: n.getLogarithmic()
+          isLogarithmic: l.getLogarithmic()
         }), g = x.chartAxesBoundDataMap;
         g[this.selectedChartId] === void 0 && (g[this.selectedChartId] = {});
         const u = g[this.selectedChartId]?.[c], C = {
@@ -370,7 +370,7 @@ class pe extends Y {
     this.onViewChartsSelect(e), this.panelNumber = 1;
   }
   onViewChartClose() {
-    this.open = !1, this.removeSelectChartTypePopover(), this.arcgisChartsConfigChartViewChartClose.emit();
+    this.close = !0, this.removeSelectChartTypePopover(), this.arcgisChartsConfigChartViewChartClose.emit();
   }
   setEventBasedPropsFromModelData(e) {
     this.chartData = e?.dataStore.chartData, this.r2 = e?.dataStore.r2, this.seriesColor = e?.dataStore.seriesColor, this.calculatedMinMaxBounds = e?.dataStore.calculatedMinMaxBounds, this.calculatedDataMinMaxBounds = e?.dataStore.calculatedDataMinMaxBounds;
@@ -412,40 +412,40 @@ class pe extends Y {
     oe(this.tooltip);
   }
   renderViewCharts() {
-    const e = le({
+    const e = ne({
       modelList: this.modelList,
       layerList: this.layerList,
       activeLayerId: this.activeLayerId,
       disableEditing: this.disableEditing
     });
-    return V(e, (i) => i.id, (i) => h`<arcgis-charts-config-view-charts .noGroup=${this.activeLayerId !== void 0} .modelList=${ne(this.modelList, i.id.toString(), X(i.type) ? Z : this.supportedChartTypes)} .selectedChartId=${this.selectedChartId ?? ""} .layer=${i} .disableEditing=${this.disableEditing} @arcgisChartsConfigViewChartSelect=${this.onViewChartsSelect} @arcgisChartsConfigViewChartEdit=${this.onViewChartsEdit} @arcgisChartsConfigViewChartDelete=${this.onViewChartDelete} @arcgisChartsConfigViewChartAddChart=${this.onAddChartClick}></arcgis-charts-config-view-charts>`);
+    return V(e, (i) => i.id, (i) => h`<arcgis-charts-config-view-charts .noGroup=${this.activeLayerId !== void 0} .modelList=${le(this.modelList, i.id.toString(), X(i.type) ? Z : this.supportedChartTypes)} .selectedChartId=${this.selectedChartId ?? ""} .layer=${i} .disableEditing=${this.disableEditing} @arcgisChartsConfigViewChartSelect=${this.onViewChartsSelect} @arcgisChartsConfigViewChartEdit=${this.onViewChartsEdit} @arcgisChartsConfigViewChartDelete=${this.onViewChartDelete} @arcgisChartsConfigViewChartAddChart=${this.onAddChartClick}></arcgis-charts-config-view-charts>`);
   }
   render() {
-    return this.open !== !1 ? h`<calcite-flow>${$("charts-list", h`<calcite-flow-item .selected=${this.panelNumber === 0 || this.disableEditing} .heading=${this.headerTitle ?? this._messages.defaultHeaderTitle} closable @calciteFlowItemClose=${this.onViewChartClose} ${te(this.chartsListFlowItem)}>${this.renderViewCharts()}</calcite-flow-item>`)}${this.panelNumber >= 1 && !this.disableEditing ? this.renderTabs() : null}</calcite-flow>` : null;
+    return this.close ? null : h`<calcite-flow>${$("charts-list", h`<calcite-flow-item .selected=${this.panelNumber === 0 || this.disableEditing} .heading=${this.headerTitle ?? this._messages.defaultHeaderTitle} closable @calciteFlowItemClose=${this.onViewChartClose} ${te(this.chartsListFlowItem)}>${this.renderViewCharts()}</calcite-flow-item>`)}${this.panelNumber >= 1 && !this.disableEditing ? this.renderTabs() : null}</calcite-flow>`;
   }
   renderTabs() {
     const e = this.getModel(this.selectedChartId);
-    return $("chart-edit", h`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? l.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? q(this._messages.pageFlowTitle, {
+    return $("chart-edit", h`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? n.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? q(this._messages.pageFlowTitle, {
       chartName: e?.titleText ?? this.currentChartTypeText,
       layerName: e?.layer?.title ?? ""
-    }) : ""}>${e?.chartType !== void 0 ? h`<calcite-action-bar class=${d(m.tabBar)} layout=horizontal expand-disabled><calcite-action class=${d(m.tab)} icon=configure scale=s alignment=center .active=${this.selectedPanel === l.Data || this.selectedPanel === void 0} @click=${() => {
-      this.selectedPanel = l.Data;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>${e?.chartType === o.BarSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-bar-stacked scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
-      this.selectedPanel = l.Series;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.LineSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-line-series scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
-      this.selectedPanel = l.Series;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.BoxPlotSeries ? h`<calcite-action class=${d(m.tab)} icon=box-chart-series scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
-      this.selectedPanel = l.Series;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.PieSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-pie-slice scale=s alignment=center .active=${this.selectedPanel === l.Slices} @click=${() => {
-      this.selectedPanel = l.Slices;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-axis scale=s alignment=center .active=${this.selectedPanel === l.Axes} @click=${() => {
-      this.selectedPanel = l.Axes;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-guides scale=s alignment=center .active=${this.selectedPanel === l.Guides} @click=${() => {
-      this.selectedPanel = l.Guides;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}<calcite-action class=${d(m.tab)} icon=palette scale=s alignment=center .active=${this.selectedPanel === l.Format} @click=${() => {
-      this.selectedPanel = l.Format;
-    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action><calcite-action class=${d(m.tab)} icon=text scale=s alignment=center .active=${this.selectedPanel === l.General} @click=${() => {
-      this.selectedPanel = l.General;
+    }) : ""}>${e?.chartType !== void 0 ? h`<calcite-action-bar class=${d(m.tabBar)} layout=horizontal expand-disabled><calcite-action class=${d(m.tab)} icon=configure scale=s alignment=center .active=${this.selectedPanel === n.Data || this.selectedPanel === void 0} @click=${() => {
+      this.selectedPanel = n.Data;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>${e?.chartType === o.BarSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-bar-stacked scale=s alignment=center .active=${this.selectedPanel === n.Series} @click=${() => {
+      this.selectedPanel = n.Series;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.LineSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-line-series scale=s alignment=center .active=${this.selectedPanel === n.Series} @click=${() => {
+      this.selectedPanel = n.Series;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.BoxPlotSeries ? h`<calcite-action class=${d(m.tab)} icon=box-chart-series scale=s alignment=center .active=${this.selectedPanel === n.Series} @click=${() => {
+      this.selectedPanel = n.Series;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.PieSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-pie-slice scale=s alignment=center .active=${this.selectedPanel === n.Slices} @click=${() => {
+      this.selectedPanel = n.Slices;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-axis scale=s alignment=center .active=${this.selectedPanel === n.Axes} @click=${() => {
+      this.selectedPanel = n.Axes;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-guides scale=s alignment=center .active=${this.selectedPanel === n.Guides} @click=${() => {
+      this.selectedPanel = n.Guides;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}<calcite-action class=${d(m.tab)} icon=palette scale=s alignment=center .active=${this.selectedPanel === n.Format} @click=${() => {
+      this.selectedPanel = n.Format;
+    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action><calcite-action class=${d(m.tab)} icon=text scale=s alignment=center .active=${this.selectedPanel === n.General} @click=${() => {
+      this.selectedPanel = n.General;
     }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action></calcite-action-bar>` : null}${this.renderChartUIComponent()}</calcite-flow-item>`);
   }
   renderChartUIComponent() {
@@ -454,25 +454,25 @@ class pe extends Y {
     if (e !== void 0 && !this.disableEditing)
       switch (e?.chartType) {
         case o.BarSeries:
-          t = h`<arcgis-charts-config-bar-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-bar-chart>`;
+          t = h`<arcgis-charts-config-bar-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-bar-chart>`;
           break;
         case o.LineSeries:
-          t = h`<arcgis-charts-config-line-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-line-chart>`;
+          t = h`<arcgis-charts-config-line-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-line-chart>`;
           break;
         case o.PieSeries:
-          t = h`<arcgis-charts-config-pie-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .chartData=${this.chartData} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor} .filterBySelection=${this.filterBySelection}></arcgis-charts-config-pie-chart>`;
+          t = h`<arcgis-charts-config-pie-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .chartData=${this.chartData} .page=${this.selectedPanel ?? n.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor} .filterBySelection=${this.filterBySelection}></arcgis-charts-config-pie-chart>`;
           break;
         case o.HistogramSeries:
-          t = h`<arcgis-charts-config-histogram class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data} .chartData=${this.chartData} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-histogram>`;
+          t = h`<arcgis-charts-config-histogram class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data} .chartData=${this.chartData} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-histogram>`;
           break;
         case o.ScatterSeries:
-          t = h`<arcgis-charts-config-scatter-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data} .r2=${this.r2} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></arcgis-charts-config-scatter-plot>`;
+          t = h`<arcgis-charts-config-scatter-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data} .r2=${this.r2} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></arcgis-charts-config-scatter-plot>`;
           break;
         case o.BoxPlotSeries:
-          t = h`<arcgis-charts-config-box-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-box-plot>`;
+          t = h`<arcgis-charts-config-box-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-box-plot>`;
           break;
         case o.HeatSeries:
-          t = h`<arcgis-charts-config-heat-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? l.Data}></arcgis-charts-config-heat-chart>`;
+          t = h`<arcgis-charts-config-heat-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${i} .page=${this.selectedPanel ?? n.Data}></arcgis-charts-config-heat-chart>`;
           break;
       }
     return t;

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

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as y } from "../../chunks/runtime.js";
-import { css as S, html as l } from "lit";
+import { css as S, html as a } from "lit";
 import "@arcgis/toolkit/intl";
 import { merge as i } from "lodash-es";
 import "luxon";
@@ -60,7 +60,7 @@ class z extends E {
   constructor() {
     super(...arguments), this._messages = v(), this.fontSizeInputElement = C(), this.fontStyle = {
       type: u.TS
-    }, this.arcgisChartsConfigFontStyleChange = h(), this.arcgisChartsConfigFontStyleClose = h();
+    }, this.open = !1, this.enableClose = !1, this.arcgisChartsConfigFontStyleChange = h(), this.arcgisChartsConfigFontStyleClose = h();
   }
   static {
     this.properties = { messageOverrides: 0, fontStyle: 0, header: 1, open: 5, enableClose: 5 };
@@ -69,15 +69,15 @@ class z extends E {
     this.styles = x;
   }
   closePanel(t) {
-    t.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigFontStyleClose.emit());
+    t.target.closed && this.enableClose && (this.open = !1, this.arcgisChartsConfigFontStyleClose.emit());
   }
   fontChange(t) {
     const m = t.target.selectedOption.value;
     if (m !== void 0) {
-      const a = {
+      const l = {
         family: m
       };
-      this.isNewFontProperty("family", a) && (this.fontStyle = i(this.fontStyle, { font: a }), this.emitFontStyleEvent({ font: a }));
+      this.isNewFontProperty("family", l) && (this.fontStyle = i(this.fontStyle, { font: l }), this.emitFontStyleEvent({ font: l }));
     }
   }
   fontSizeChange() {
@@ -124,11 +124,11 @@ class z extends E {
     return this.fontStyle?.font?.[t] !== e[t];
   }
   renderFonts() {
-    const t = Object.values(I).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === d().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
-    return this.fontStyle?.font?.family === "" && t.push(l`<calcite-option value selected></calcite-option>`), t;
+    const t = Object.values(I).map((e) => a`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === d().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
+    return this.fontStyle?.font?.family === "" && t.push(a`<calcite-option value selected></calcite-option>`), t;
   }
   render() {
-    return l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.inputLabel)}>${this._messages.size}<calcite-input class=${n(o.numberInput)} type=number min=6 max=40 step=1 .value=${b(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${$(this.fontSizeInputElement)}></calcite-input></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === s.Bold}><calcite-icon scale=s icon=bold></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.italic ?? ""} @click=${this.italicSelect} scale=l .active=${this.fontStyle?.font?.style === c.Italic}><calcite-icon scale=s icon=italicize></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.underline ?? ""} @click=${this.underlineSelect} scale=l .active=${this.fontStyle?.font?.decoration === r.Underline}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(o.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
+    return a`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.inputLabel)}>${this._messages.size}<calcite-input class=${n(o.numberInput)} type=number min=6 max=40 step=1 .value=${b(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${$(this.fontSizeInputElement)}></calcite-input></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === s.Bold}><calcite-icon scale=s icon=bold></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.italic ?? ""} @click=${this.italicSelect} scale=l .active=${this.fontStyle?.font?.style === c.Italic}><calcite-icon scale=s icon=italicize></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.underline ?? ""} @click=${this.underlineSelect} scale=l .active=${this.fontStyle?.font?.decoration === r.Underline}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(o.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
   }
 }
 y("arcgis-charts-config-font-style", z);

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

@@ -6,7 +6,7 @@ import "lodash-es";
 import "luxon";
 import "../../chunks/series-types.js";
 import "@arcgis/toolkit/type";
-import { i as s } from "../../chunks/rest-js-object-literals.js";
+import { i as r } from "../../chunks/rest-js-object-literals.js";
 import "../../chunks/index.js";
 import "@arcgis/core/Graphic.js";
 import "@arcgis/core/renderers/support/jsonUtils.js";
@@ -34,13 +34,13 @@ import "@arcgis/toolkit/dom";
 import { e as l } from "../../chunks/popover-ui-utils.js";
 import { u as p } from "../../chunks/useT9n.js";
 import { createRef as n, ref as m } from "lit/directives/ref.js";
-import { LitElement as c, createEvent as r, safeClassMap as h } from "@arcgis/lumina";
+import { LitElement as c, createEvent as s, safeClassMap as h } from "@arcgis/lumina";
 const g = {
   jsAppFlyout: "js-app-flyout"
 }, C = a``;
 class f extends c {
   constructor() {
-    super(...arguments), this._messages = p(), this.popoverElement = n(), this.placement = "leading", this.arcgisChartsConfigFormatPopoverColorChange = r(), this.arcgisChartsConfigFormatPopoverSymbolChange = r(), this.arcgisChartsConfigFormatPopoverTextChange = r(), this.arcgisChartsConfigPopoverClose = r();
+    super(...arguments), this._messages = p(), this.popoverElement = n(), this.placement = "leading", this.open = !1, this.arcgisChartsConfigFormatPopoverColorChange = s(), this.arcgisChartsConfigFormatPopoverSymbolChange = s(), this.arcgisChartsConfigFormatPopoverTextChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 0, referenceElement: 0, placement: 1, open: 5 };
@@ -68,7 +68,7 @@ class f extends c {
   }
   render() {
     const e = this.selectedElement, t = this.selectedElement;
-    return o`<div class=${h(g.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} label @calcitePopoverClose=${this.closePopover} pointer-disabled auto-close ${m(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.closePopover} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === s.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${t?.type === s.TS ? o`<arcgis-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @arcgisChartsConfigFontStyleClose=${this.closePopover} @arcgisChartsConfigFontStyleChange=${this.updateTextProperties}></arcgis-charts-config-font-style>` : null}</calcite-popover></div>`;
+    return o`<div class=${h(g.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${!this.open} label @calcitePopoverClose=${this.closePopover} pointer-disabled auto-close ${m(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.closePopover} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === r.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${t?.type === r.TS ? o`<arcgis-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @arcgisChartsConfigFontStyleClose=${this.closePopover} @arcgisChartsConfigFontStyleChange=${this.updateTextProperties}></arcgis-charts-config-font-style>` : null}</calcite-popover></div>`;
   }
 }
 i("arcgis-charts-config-format-popover", f);

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

@@ -41,7 +41,7 @@ const C = {
 }, d = p``;
 class f extends h {
   constructor() {
-    super(...arguments), this._messages = n(), this.popoverElement = m(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = i(), this.arcgisChartsConfigGuidePopoverSymbolChange = i(), this.arcgisChartsConfigPopoverClose = i();
+    super(...arguments), this._messages = n(), this.popoverElement = m(), this.placement = "leading", this.open = !1, this.arcgisChartsConfigGuidePopoverColorChange = i(), this.arcgisChartsConfigGuidePopoverSymbolChange = i(), this.arcgisChartsConfigPopoverClose = i();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 0, referenceElement: 0, placement: 1, open: 5 };