@arcgis/charts-components 6.0.0-next.1 → 6.0.0-next.11

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

@@ -1,18 +1,17 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as v } from "../../chunks/runtime.js";
 import { keyed as p } from "lit/directives/keyed.js";
 import { repeat as k } from "lit/directives/repeat.js";
 import { substitute as $ } from "@arcgis/core/intl.js";
 import { b as l } from "../../chunks/interfaces.js";
-import { b as f, f as y, e as h, a as P } from "../../chunks/chart-ui-utils.js";
-import { u as L } from "../../chunks/useT9n.js";
-import { css as F, html as n } from "lit";
-import { createRef as u, ref as m } from "lit/directives/ref.js";
+import { b as u, f as y, e as h, a as P } from "../../chunks/chart-ui-utils.js";
+import { u as F } from "../../chunks/useT9n.js";
+import { css as L, html as n } from "lit";
+import { createRef as f, ref as m } from "lit/directives/ref.js";
 import { LitElement as x, createEvent as g, renderElement as I, safeStyleMap as D, safeClassMap as d } from "@arcgis/lumina";
 import { B as r } from "../../chunks/common.js";
 import { e as S, p as T } from "../../chunks/popover-ui-utils.js";
-import { bL as b, aQ as E, E as w } from "../../chunks/index.js";
-import { b as B } from "../../chunks/index2.js";
+import { B as E, c8 as b, b3 as w, J as B } from "../../chunks/index.js";
 import { d as C } from "../../chunks/rest-js-object-literals.js";
 const o = {
   name: "bar-chart-data-popover",
@@ -23,10 +22,10 @@ const o = {
   sortMedian: "sort-median",
   sortOrderPickList: "sort-order-pick-list",
   panel: "panel"
-}, N = 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)}.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}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.sort-icon-color{color:#000}.sort-mean,.sort-median{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
+}, N = L`.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}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.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 x {
   constructor() {
-    super(...arguments), this._messages = L(), this.picklist = u(), this.placement = "leading", this.popoverElement = u(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = g(), this.arcgisChartsConfigPopoverClose = g();
+    super(...arguments), this._messages = F(), this.picklist = f(), this.placement = "leading", this.popoverElement = f(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = g(), this.arcgisChartsConfigPopoverClose = g();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, isCustomSortDisabled: 5, selectedContent: 1 };
@@ -43,7 +42,7 @@ class K extends x {
   updated() {
     setTimeout(() => {
       typeof this.picklist.value?.setFocus == "function" && this.picklist.value?.setFocus();
-    }, f.PopoverTimer), S(this.popoverElement.value, this.open);
+    }, u.PopoverTimer), S(this.popoverElement.value, this.open);
   }
   selectedContentChange(e, t) {
     this.pickListHasChanged = T(e, t);
@@ -68,7 +67,7 @@ class K extends x {
     }), this.open = !1;
   }
   buildPickListItem(e) {
-    return p(e.name, n`<calcite-list-item .label=${B(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${h(e.name, this.selectedContent)}></calcite-list-item>`);
+    return p(e.name, n`<calcite-list-item .label=${E(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${h(e.name, this.selectedContent)}></calcite-list-item>`);
   }
   buildPickListItems(e) {
     const t = this.layerFieldsInfo?.length ?? 0, i = [];
@@ -76,7 +75,7 @@ class K extends x {
       case l.numericFields: {
         for (let s = 0; s < t; s += 1) {
           const a = this.layerFieldsInfo[s];
-          E(a) && i.push(this.buildPickListItem(a));
+          w(a) && i.push(this.buildPickListItem(a));
         }
         break;
       }
@@ -146,7 +145,7 @@ class K extends x {
   }
   createTooltip(e) {
     if (e.target?.label === this._messages.customSort && this.isCustomSortDisabled) {
-      const t = e.target, i = w(t), a = new Intl.NumberFormat(i).format(f.customSortLimit), c = $(this._messages.customSortLimit ?? "", {
+      const t = e.target, i = B(t), a = new Intl.NumberFormat(i).format(u.customSortLimit), c = $(this._messages.customSortLimit ?? "", {
         totalLimit: a
       });
       this.tooltip = I(n`<calcite-tooltip style=${D({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${c}</calcite-tooltip>`), document.body.appendChild(this.tooltip);

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

@@ -1,12 +1,12 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as I } from "../../chunks/runtime.js";
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
+import { c as b } from "../../chunks/runtime.js";
 import { css as P, html as n } from "lit";
 import { keyed as y } from "lit/directives/keyed.js";
 import { repeat as M } from "lit/directives/repeat.js";
-import { u as B } from "../../chunks/useT9n.js";
-import { LitElement as O, renderElement as d, safeStyleMap as h, safeClassMap as a } from "@arcgis/lumina";
+import { u as O } from "../../chunks/useT9n.js";
+import { LitElement as B, renderElement as d, safeStyleMap as h, safeClassMap as a } from "@arcgis/lumina";
 import { a as w } from "../../chunks/chart-ui-utils.js";
-import { a as S } from "../../chunks/index2.js";
+import { x as S } from "../../chunks/index.js";
 import { r as f } from "../../chunks/popover-ui-utils.js";
 import { p as m } from "../../chunks/chart-object-literals.js";
 const l = {
@@ -15,73 +15,82 @@ const l = {
   list: "list",
   infoIcon: "info-icon"
 }, T = 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{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.top-section{margin-top:var(--arcgis-charts-config-margin-minor)}.section-label{display:flex;margin-bottom:var(--arcgis-charts-config-margin-major);margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.info-icon{margin:auto 1rem;pointer-events:auto}`;
-class N extends O {
+class N extends B {
   constructor() {
-    super(...arguments), this._messages = B(), this.resetSeriesOriginal = () => {
-      this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
+    super(...arguments), this._messages = O(), this.resetSeriesOriginal = () => {
+      this.configSeriesOpen = !1, this.selectedSeriesId = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
     }, this.onMultipleSeriesSelect = (e) => {
       if (!this.shouldDisableMeanLinesOption()) {
-        const i = e.target, t = i.value ?? i.parentElement.value ?? "";
-        this.model.showMeanLines = t === m.MeanLines;
+        const i = e.target, s = i.value ?? i.parentElement.value ?? "";
+        this.model.showMeanLines = s === m.MeanLines;
       }
     }, this.seriesNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
-        const i = e.detail?.name;
-        this.model.setSeriesName(i, this.selectedSeriesIndex ?? -1);
+        const i = e.detail?.name, s = this.selectedSeriesIndex;
+        s !== void 0 && s >= 0 && this.model.setSeriesName(i, s);
       }
     }, this.seriesColorChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
         const { color: i } = e.detail;
-        i !== void 0 && (this.meanLinesBoxColorIsSelected ? this.model.meanLinesBoxColor = i : (this.model.colorMatch = !1, this.model.setSeriesColor(i, this.selectedSeriesIndex ?? -1)));
+        if (i !== void 0)
+          if (this.meanLinesBoxColorIsSelected)
+            this.model.meanLinesBoxColor = i;
+          else {
+            const s = this.selectedSeriesIndex;
+            s !== void 0 && s >= 0 && (this.model.colorMatch = !1, this.model.setSeriesColor(i, s));
+          }
       }
     }, this.seriesLineStyleChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { style: i } = e.detail;
-        i !== void 0 && this.model.setSeriesLineStyle(i, this.selectedSeriesIndex ?? -1);
+        const { style: i } = e.detail, s = this.selectedSeriesIndex;
+        i !== void 0 && s !== void 0 && s >= 0 && this.model.setSeriesLineStyle(i, s);
       }
     }, this.seriesLineWidthChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { width: i } = e.detail;
-        i !== void 0 && this.model.setSeriesLineWidth(i, this.selectedSeriesIndex ?? -1);
+        const { width: i } = e.detail, s = this.selectedSeriesIndex;
+        i !== void 0 && s !== void 0 && s >= 0 && this.model.setSeriesLineWidth(i, s);
       }
     }, this.onCalciteListOrderChange = (e) => {
       const i = this.model.boxPlotSeriesIndexWhenMeanLinesShown;
       if (e.detail !== null && e.detail !== void 0) {
-        const { newIndex: t, oldIndex: r } = e.detail;
-        let s = r, o = t;
-        i !== -1 && (s = r >= i ? r + 1 : r, o = t >= i ? t + 1 : t), this.model.moveSeries(s, o), this.seriesOrderResetCounter += 1;
+        const { newIndex: s, oldIndex: r } = e.detail;
+        let t = r, o = s;
+        i !== -1 && (t = r >= i ? r + 1 : r, o = s >= i ? s + 1 : s), this.model.moveSeries(t, o), this.seriesOrderResetCounter += 1;
       }
     }, this.seriesPopoverClose = () => {
-      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = f(this.seriesPopover);
+      this.selectedSeriesId = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = f(this.seriesPopover);
     }, this.openSeriesPopOver = (e) => {
       e.stopImmediatePropagation(), this.removeSeriesPopover();
-      const i = e.target, t = i.localName === "calcite-list-item" ? i : i.parentNode, r = !this.configSeriesOpen, s = this.model.getSeriesIndex(t.value);
-      if (s !== void 0 && s !== -1)
-        this.configSeriesOpen = this.selectedSeriesIndex === s ? r : !0, this.configSeriesOpen ? this.selectedSeriesIndex = s : this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1;
-      else if (t.value === "box-plot-color") {
+      const i = e.target, s = i.localName === "calcite-list-item" ? i : i.parentNode, r = !this.configSeriesOpen, t = this.model.getSeriesIndex(s.value);
+      if (t !== void 0 && t !== -1)
+        this.configSeriesOpen = this.selectedSeriesIndex === t ? r : !0, this.configSeriesOpen ? this.selectedSeriesId = s.value : this.selectedSeriesId = void 0, this.meanLinesBoxColorIsSelected = !1;
+      else if (s.value === "box-plot-color") {
         const o = !this.meanLinesBoxColorIsSelected;
-        this.configSeriesOpen = o, this.meanLinesBoxColorIsSelected = o, this.selectedSeriesIndex = void 0;
+        this.configSeriesOpen = o, this.meanLinesBoxColorIsSelected = o, this.selectedSeriesId = void 0;
       }
     }, this.createTooltip = (e, i) => {
-      const t = e.target;
-      this.tooltip = d(n`<calcite-tooltip style=${h({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${i ?? ""}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
+      const s = e.target;
+      this.tooltip = d(n`<calcite-tooltip style=${h({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${s} open placement=top>${i ?? ""}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
     }, this.destroyTooltip = () => {
       w(this.tooltip);
     }, this.onModelConfigChange = () => {
-      this.requestUpdate();
+      this.selectedSeriesId !== void 0 && this.selectedSeriesIndex === -1 ? this.seriesPopoverClose() : this.seriesPopover && (this.seriesPopover.selectedSeriesIndex = this.selectedSeriesIndex), this.requestUpdate();
     }, this.meanLinesBoxColorIsSelected = !1, this.seriesOrderResetCounter = 0, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading";
   }
   static {
-    this.properties = { selectedSeriesIndex: 16, meanLinesBoxColorIsSelected: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
+    this.properties = { selectedSeriesId: 16, meanLinesBoxColorIsSelected: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
   }
   static {
     this.styles = T;
   }
+  get selectedSeriesIndex() {
+    return this.selectedSeriesId === void 0 ? void 0 : this.model.getSeriesIndex(this.selectedSeriesId);
+  }
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
   }
   willUpdate(e) {
-    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange(), e.has("meanLinesBoxColorIsSelected") && this.meanLinesBoxColorIsSelectedChange();
+    e.has("model") && this.modelChange(this.model, e.get("model")), (e.has("selectedSeriesId") || e.has("meanLinesBoxColorIsSelected")) && this.selectedSeriesChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
@@ -89,26 +98,23 @@ class N extends O {
   modelChange(e, i) {
     i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  selectedSeriesIndexChange() {
-    this.selectedSeriesIndex !== void 0 && this.configSeriesOpen ? this.setupSeriesPopover() : this.removeSeriesPopover();
-  }
-  meanLinesBoxColorIsSelectedChange() {
-    this.meanLinesBoxColorIsSelected && this.configSeriesOpen ? this.setupSeriesPopover() : this.removeSeriesPopover();
+  selectedSeriesChange() {
+    (this.selectedSeriesIndex !== void 0 || this.meanLinesBoxColorIsSelected) && this.configSeriesOpen ? this.setupSeriesPopover() : this.removeSeriesPopover();
   }
   removeSeriesPopover() {
     this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = f(this.seriesPopover));
   }
   buildSeriesListItems() {
-    const e = this.model.seriesLength, i = this.model.boxPlotSeriesIndexWhenMeanLinesShown, t = Array.from({ length: e }, (s, o) => o);
-    return M(t, (s) => this.model.getSeriesId(s), (s) => {
-      const o = this.model.getSeriesId(s), c = this.model.getSeriesColor(s), v = this.model.getSeriesName(s), g = this.model.chartSubType, u = g === S.BoxPlotC1MonoField || g === S.BoxPlotC2MultiFields ? this._messages.series : o;
+    const e = this.model.seriesLength, i = this.model.boxPlotSeriesIndexWhenMeanLinesShown, s = Array.from({ length: e }, (t, o) => o);
+    return M(s, (t) => this.model.getSeriesId(t), (t) => {
+      const o = this.model.getSeriesId(t), c = this.model.getSeriesColor(t), v = this.model.getSeriesName(t), g = this.model.chartSubType, u = g === S.BoxPlotC1MonoField || g === S.BoxPlotC2MultiFields ? this._messages.series : o;
       let p = "#CCCCCC", C = "minus-square";
       if ((e > 1 || !this.activeColorMatch) && c !== void 0) {
         C = this.model.showMeanLines === !0 ? "line-solid" : "square-f";
-        const [x, $, L, b] = [...c];
-        p = `rgba(${x},${$},${L},${b / 255})`;
+        const [x, $, I, L] = [...c];
+        p = `rgba(${x},${$},${I},${L / 255})`;
       }
-      return i !== s ? n`<calcite-list-item .label=${v ?? o ?? ""} .description=${u} .value=${o} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${C} style=${h({ color: p })}></calcite-icon></calcite-list-item>` : null;
+      return i !== t ? n`<calcite-list-item .label=${v ?? o ?? ""} .description=${u} .value=${o} .selected=${this.selectedSeriesId === o} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${C} style=${h({ color: p })}></calcite-icon></calcite-list-item>` : null;
     });
   }
   buildSeriesList() {
@@ -122,11 +128,11 @@ class N extends O {
   }
   renderMeanLinesBoxColorItem() {
     let e = "#CCCCCC", i = "minus-square";
-    const t = this.model.meanLinesBoxColor;
-    if (t !== void 0) {
+    const s = this.model.meanLinesBoxColor;
+    if (s !== void 0) {
       i = "square-f";
-      const [r, s, o, c] = [...t];
-      e = `rgba(${r},${s},${o},${c / 255})`;
+      const [r, t, o, c] = [...s];
+      e = `rgba(${r},${t},${o},${c / 255})`;
     }
     return n`<calcite-list label class=${a(l.list)}><calcite-list-item value=box-plot-color .label=${this._messages.boxPlotColor} .selected=${this.meanLinesBoxColorIsSelected} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${i} style=${h({ color: e })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
@@ -142,7 +148,7 @@ class N extends O {
     return n`${this.renderMultipleSeriesOption()}<div class=${a(l.sectionLabel)}>${this._messages.series}<calcite-button @click=${this.resetSeriesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSeriesList()}`;
   }
 }
-I("arcgis-charts-config-box-plot-series", N);
+b("arcgis-charts-config-box-plot-series", N);
 export {
   N as ArcgisChartsConfigBoxPlotSeries
 };

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as g } from "../../chunks/runtime.js";
 import { css as C, html as a } from "lit";
 import { isEqual as f } from "es-toolkit/compat";
@@ -6,7 +6,7 @@ import { u as v } from "../../chunks/useT9n.js";
 import { createRef as y, ref as S } from "lit/directives/ref.js";
 import { LitElement as b, createEvent as n, safeClassMap as p } from "@arcgis/lumina";
 import { e as u } from "../../chunks/popover-ui-utils.js";
-import { r as m } from "../../chunks/index3.js";
+import { r as m } from "../../chunks/index2.js";
 import { b as $ } from "../../chunks/rest-js-object-literals.js";
 const d = {
   panelChildrenContainer: "panel-children-container"

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
 import { css as l, html as o } from "lit";
 import { i as h, m as r, U as s, s as u } from "../../chunks/chart-ui-utils.js";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
 import { isEmpty as c } from "es-toolkit/compat";
 import { m as h, U as n } from "../../chunks/chart-ui-utils.js";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as s } from "../../chunks/runtime.js";
 import { css as o, html as a } from "lit";
 import { u as l } from "../../chunks/useT9n.js";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
 import { css as l, html as c } from "lit";
 import { g } from "../../chunks/chart-ui-utils.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,