@arcgis/charts-components 6.0.0-next.5 → 6.0.0-next.6

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

@@ -9,13 +9,13 @@ import { b as P } from "../../chunks/chart-ui-utils.js";
 import { u as F } from "../../chunks/useT9n.js";
 import { css as _, html as n, nothing as N } from "lit";
 import { createRef as c, ref as m } from "lit/directives/ref.js";
-import { LitElement as U, createEvent as v, safeClassMap as l, renderElement as V } from "@arcgis/lumina";
-import { b as $, o as z, C as K, a as B, p as M } from "../../chunks/index2.js";
-import { x as R } from "../../chunks/data.js";
-import { t as A, bK as j, q as L, aR as H } from "../../chunks/index.js";
+import { LitElement as U, createEvent as f, safeClassMap as l, renderElement as V } from "@arcgis/lumina";
+import { b as $, o as R, C as z, a as B, p as K } from "../../chunks/index2.js";
+import { x as M } from "../../chunks/data.js";
+import { t as A, bK as H, q as L, aR as j } from "../../chunks/index.js";
 import { J as q, K as W } from "../../chunks/index3.js";
 import { r as Z } from "../../chunks/popover-ui-utils.js";
-import { d as h, e as x, a as f, h as y } from "../../chunks/chart-object-literals.js";
+import { d as h, e as x, a as v, h as y } from "../../chunks/chart-object-literals.js";
 import { S as g } from "../../chunks/common.js";
 const r = {
   label: "label",
@@ -89,7 +89,7 @@ class J extends U {
       this.requestUpdate();
     }, this.popoverClose = (e) => {
       this.barChartPopover === e?.target && this.removeBarChartDataPopover();
-    }, this.selectedCustomSortItemId = "", this.sortOrderResetCounter = 0, this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigBarChartDataNumericFieldValidate = v(), this.arcgisChartsConfigCustomizedTimeInterval = v(), this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigResetTimeInterval = v();
+    }, this.selectedCustomSortItemId = "", this.sortOrderResetCounter = 0, this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigBarChartDataNumericFieldValidate = f(), this.arcgisChartsConfigCustomizedTimeInterval = f(), this.arcgisChartsConfigDataChangeError = f(), this.arcgisChartsConfigResetTimeInterval = f();
   }
   static {
     this.properties = { selectedCustomSortItemId: 16, aggregationLabel: 16, timeAggregationLabel: 16, disableSplitBy: 16, sortOrderResetCounter: 16, messageOverrides: 0, model: 0, layerFieldsInfo: 0, open: 5 };
@@ -103,7 +103,7 @@ class J extends U {
   willUpdate(e) {
     e.has("model") && this.modelChange(this.model, e.get("model")), this.aggregationLabel = q(this.model.aggregationType, this.commonStrings), S(this.model.getDataFilters(), this.currentDataFilter) || (this.model.getDataSortOrder() === g.customSort && this.updateCustomSortProps(), this.currentDataFilter = this.model.getDataFilters());
     const t = this.model.timeAggregationType;
-    t !== void 0 && (this.timeAggregationLabel = W(t, this.commonStrings)), this.disableSplitBy = this.model.numericFields.length > 1 || this.model.xAxisField === "" || this.model.xAxisField === j;
+    t !== void 0 && (this.timeAggregationLabel = W(t, this.commonStrings)), this.disableSplitBy = this.model.numericFields.length > 1 || this.model.xAxisField === "" || this.model.xAxisField === H;
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeBarChartDataPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
@@ -114,13 +114,17 @@ class J extends U {
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
       const { newIndex: t, oldIndex: i } = e.detail;
-      this.model.moveCustomSortValuesInOrderByList(i ?? 0, t ?? i ?? 0);
+      this.model.moveCustomSortValuesInOrderByList(i ?? 0, t ?? i ?? 0), this.sortOrderResetCounter += 1;
     }
   }
   onCustomSortItemSelected(e) {
     const { id: t } = e.target;
     this.selectedCustomSortItemId = this.selectedCustomSortItemId === t ? "" : t;
   }
+  onCustomSortItemSortHandleBeforeOpen(e) {
+    const { id: t } = e.target;
+    this.selectedCustomSortItemId = t;
+  }
   onCustomSortListClick(e) {
     e.preventDefault();
   }
@@ -128,7 +132,7 @@ class J extends U {
     const { id: t } = e.target;
     let i = this.model.orderByList.length;
     const s = this.model.orderByList.indexOf(this.selectedCustomSortItemId);
-    t === C.Up ? i = s - 1 : t === C.Down && (i = s + 1), s >= 0 && i >= 0 && i < this.model.orderByList.length && this.model.moveCustomSortValuesInOrderByList(s, i);
+    t === C.Up ? i = s - 1 : t === C.Down && (i = s + 1), s >= 0 && i >= 0 && i < this.model.orderByList.length && (this.model.moveCustomSortValuesInOrderByList(s, i), this.sortOrderResetCounter += 1);
   }
   onEnableTimeBinningChange(e) {
     const t = e.target.checked;
@@ -142,8 +146,8 @@ class J extends U {
   }
   buildCustomSortListItems() {
     return w(this.model.orderByList, (t) => t, (t) => {
-      const i = z(this.layerFieldsInfo, t), o = this.model.nullCategory !== void 0 && t.trim() === K.nullCategory?.text?.trim();
-      return n`<calcite-list-item id=${t ?? N} .label=${t} .closed=${o} .description=${i} .value=${t} .selected=${this.selectedCustomSortItemId === t} @calciteListItemSelect=${this.onCustomSortItemSelected}><calcite-icon slot=content-end></calcite-icon></calcite-list-item>`;
+      const i = R(this.layerFieldsInfo, t), o = this.model.nullCategory !== void 0 && t.trim() === z.nullCategory?.text?.trim();
+      return n`<calcite-list-item id=${t ?? N} .label=${t} .closed=${o} .description=${i} .value=${t} .selected=${this.selectedCustomSortItemId === t} @calciteListItemSelect=${this.onCustomSortItemSelected} @calciteListItemSortHandleBeforeOpen=${this.onCustomSortItemSortHandleBeforeOpen}><calcite-icon slot=content-end></calcite-icon></calcite-list-item>`;
     });
   }
   buildCustomSortList() {
@@ -181,7 +185,7 @@ class J extends U {
     return this.model.splitByField === "" || (this.model.numericFields ?? []).length > 1 ? "" : $(this.layerFieldsInfo, this.model.splitByField);
   }
   getCorrectedCategoryValue() {
-    return R({
+    return M({
       fieldName: this.model.xAxisField,
       fieldList: this.layerFieldsInfo
     }) ? "" : $(this.layerFieldsInfo, this.model.xAxisField);
@@ -244,10 +248,10 @@ class J extends U {
   }
   shouldShowTimeBinning() {
     const e = this.layerFieldsInfo.find((i) => i.name === this.model.xAxisField), t = this.model.aggregationType !== h.NoAggregation;
-    return e !== void 0 && H(e) && t;
+    return e !== void 0 && j(e) && t;
   }
   renderSorting() {
-    return n`<arcgis-charts-config-field-picker .disabled=${this.model.getAxisValueFormat(0)?.type === f.DateAxisFormat} .label=${this.model.getAxisValueFormat(0)?.type === f.DateAxisFormat ? this._messages.xAxisAsc : this._messages[this.model.getDataSortOrder()]} @click=${this.onSortOrderSelect} ${m(this.sortOrderElement)}></arcgis-charts-config-field-picker>`;
+    return n`<arcgis-charts-config-field-picker .disabled=${this.model.getAxisValueFormat(0)?.type === v.DateAxisFormat} .label=${this.model.getAxisValueFormat(0)?.type === v.DateAxisFormat ? this._messages.xAxisAsc : this._messages[this.model.getDataSortOrder()]} @click=${this.onSortOrderSelect} ${m(this.sortOrderElement)}></arcgis-charts-config-field-picker>`;
   }
   renderAggregation() {
     return n`<arcgis-charts-config-field-picker .label=${this.model.aggregationType === h.NoAggregation ? this._messages.noAggregation : this.aggregationLabel} @click=${this.onAggregationSelect} ${m(this.aggregationElement)}></arcgis-charts-config-field-picker>`;
@@ -268,10 +272,10 @@ class J extends U {
   }
   renderCustomSortUI() {
     const e = this.model.getDataSortOrder(), t = this.model.getAxisValueFormat(0)?.type, i = this.model.orderByList.indexOf(this.selectedCustomSortItemId);
-    return t === f.CategoryAxisFormat && e === g.customSort && !this.isCustomSortDisabled ? n`<calcite-label class=${l(r.label)}><div class=${l(r.customSortButtons)}><div><calcite-button appearance=transparent .disabled=${i === 0 || i === -1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-up id=${C.Up} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button><calcite-button appearance=transparent .disabled=${i === -1 || i === this.model.orderByList.length - 1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-down id=${C.Down} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button></div><calcite-button @click=${this.resetToOriginalCustomSortLabels} .disabled=${S(this.model.orderByList, this.originalCustomSortLabels)} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${L(this.model.config.series ?? []) === B.BarAndLineFromFields ? this._messages.values : this._messages.category}${this.buildCustomSortList()}</calcite-label>` : null;
+    return t === v.CategoryAxisFormat && e === g.customSort && !this.isCustomSortDisabled ? n`<calcite-label class=${l(r.label)}><div class=${l(r.customSortButtons)}><div><calcite-button appearance=transparent .disabled=${i === 0 || i === -1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-up id=${C.Up} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button><calcite-button appearance=transparent .disabled=${i === -1 || i === this.model.orderByList.length - 1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-down id=${C.Down} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button></div><calcite-button @click=${this.resetToOriginalCustomSortLabels} .disabled=${S(this.model.orderByList, this.originalCustomSortLabels)} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${L(this.model.config.series ?? []) === B.BarAndLineFromFields ? this._messages.values : this._messages.category}${this.buildCustomSortList()}</calcite-label>` : null;
   }
   renderInterval() {
-    const e = (this.model.temporalBinningSize ?? 0) <= 0, t = this.model.temporalBinningSize ?? "", i = M(this.model.temporalBinningUnit ?? x.Second, this._messages) ?? "", s = E(d), o = {
+    const e = (this.model.temporalBinningSize ?? 0) <= 0, t = this.model.temporalBinningSize ?? "", i = K(this.model.temporalBinningUnit ?? x.Second, this._messages) ?? "", s = E(d), o = {
       size: this.model.temporalBinningSize,
       unit: this.model.temporalBinningUnit
     }, u = S(o, s);
@@ -289,7 +293,7 @@ class J extends U {
   }
   render() {
     const e = this.renderAggregation(), t = this.renderCategory(), i = this.renderSplitBy(), s = this.renderSorting(), o = this.renderNumericFields([...this.model.numericFields ?? []]), u = this.renderCustomSortUI(), b = this.renderInterval(), k = this.renderIntervalAlignment(), T = this.renderEmptyBins();
-    return n`<calcite-label class=${l(r.label)}>${this._messages.category}${t}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.aggregation}${e}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.numericFields}${o}</calcite-label><div class=${l(r.fab)}><calcite-fab appearance=outline-fill kind=neutral scale=m .label=${this._messages.selectNumericFields} text-enabled .text=${this._messages.selectNumericFields} icon=plus @click=${this.onAddNumericFields}></calcite-fab></div><calcite-label class=${l(r.label)}><span class=${l(this.disableSplitBy ? r.dimText : "")}>${this._messages.splitBy}</span>${i}</calcite-label><div .hidden=${!this.shouldShowTimeBinning()}><h3 class=${l(r.timeBinningHeader)}>${this._messages.timeBinningOptions}</h3><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.enableTemporalBinning}<calcite-switch .checked=${this.model.binTemporalData} @calciteSwitchChange=${this.onEnableTimeBinningChange} ${m(this.enableTimeBinningSwitch)}></calcite-switch></calcite-label><div .hidden=${!this.model.binTemporalData || !this.shouldShowTimeBinning()}><calcite-label class=${l(r.label)}>${this._messages.interval}${b}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.intervalAlignment}${k}</calcite-label><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.trimIncompleteInterval}<calcite-switch .checked=${this.model.trimIncompleteTimeInterval} @calciteSwitchChange=${this.onTrimIncompleteIntervalChange}></calcite-switch></calcite-label>${this.model.aggregationType !== h.Count ? n`<calcite-label class=${l(r.label)}>${this._messages.emptyBins}${T}</calcite-label>` : null}</div></div><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.treatNullAsCategory}<calcite-switch .checked=${this.model.fetchNULLValues} @calciteSwitchChange=${this.onTreatNullAsCategoryChange}></calcite-switch></calcite-label><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.showDataLabels}<calcite-switch .checked=${this.model.dataLabelsVisibility} @calciteSwitchChange=${this.onShowDataLabelsChange}></calcite-switch></calcite-label><calcite-label class=${l(this.model.getAxisValueFormat(0)?.type === f.DateAxisFormat ? r.disabledLabel : r.label)}>${this._messages.sortOrder}${s}</calcite-label>${u}`;
+    return n`<calcite-label class=${l(r.label)}>${this._messages.category}${t}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.aggregation}${e}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.numericFields}${o}</calcite-label><div class=${l(r.fab)}><calcite-fab appearance=outline-fill kind=neutral scale=m .label=${this._messages.selectNumericFields} text-enabled .text=${this._messages.selectNumericFields} icon=plus @click=${this.onAddNumericFields}></calcite-fab></div><calcite-label class=${l(r.label)}><span class=${l(this.disableSplitBy ? r.dimText : "")}>${this._messages.splitBy}</span>${i}</calcite-label><div .hidden=${!this.shouldShowTimeBinning()}><h3 class=${l(r.timeBinningHeader)}>${this._messages.timeBinningOptions}</h3><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.enableTemporalBinning}<calcite-switch .checked=${this.model.binTemporalData} @calciteSwitchChange=${this.onEnableTimeBinningChange} ${m(this.enableTimeBinningSwitch)}></calcite-switch></calcite-label><div .hidden=${!this.model.binTemporalData || !this.shouldShowTimeBinning()}><calcite-label class=${l(r.label)}>${this._messages.interval}${b}</calcite-label><calcite-label class=${l(r.label)}>${this._messages.intervalAlignment}${k}</calcite-label><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.trimIncompleteInterval}<calcite-switch .checked=${this.model.trimIncompleteTimeInterval} @calciteSwitchChange=${this.onTrimIncompleteIntervalChange}></calcite-switch></calcite-label>${this.model.aggregationType !== h.Count ? n`<calcite-label class=${l(r.label)}>${this._messages.emptyBins}${T}</calcite-label>` : null}</div></div><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.treatNullAsCategory}<calcite-switch .checked=${this.model.fetchNULLValues} @calciteSwitchChange=${this.onTreatNullAsCategoryChange}></calcite-switch></calcite-label><calcite-label class=${l(r.label)} layout=inline-space-between>${this._messages.showDataLabels}<calcite-switch .checked=${this.model.dataLabelsVisibility} @calciteSwitchChange=${this.onShowDataLabelsChange}></calcite-switch></calcite-label><calcite-label class=${l(this.model.getAxisValueFormat(0)?.type === v.DateAxisFormat ? r.disabledLabel : r.label)}>${this._messages.sortOrder}${s}</calcite-label>${u}`;
   }
 }
 D("arcgis-charts-config-bar-chart-data", J);

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

@@ -32,7 +32,7 @@ class b extends m {
       const [e, t, r] = this.rgba;
       s = { r: e, g: t, b: r };
     }
-    return c`<calcite-label>${this.heading ?? this._messages.color}</calcite-label><calcite-color-picker .value=${g(s)} @calciteColorPickerInput=${this.onColorSelect} .messageOverrides=${{
+    return c`<calcite-label>${this.heading ?? this._messages.color}</calcite-label><calcite-color-picker .value=${g(s)} @calciteColorPickerChange=${this.onColorSelect} .messageOverrides=${{
       g: this._messages.g,
       green: this._messages.green,
       h: this._messages.h,