@arcgis/charts-components 4.33.0-next.136 → 4.33.0-next.138

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

@@ -1,7 +1,9 @@
 import { c as A } from "../../chunks/runtime.js";
 import { ref as B } from "lit-html/directives/ref.js";
-import { RESTSimpleLineSymbolStyle as M, RESTSymbolType as f, RESTFontWeight as V, RESTFontStyle as $, RESTFontDecoration as D } from "@arcgis/charts-spec";
-import { isEmpty as u, cloneDeep as r, isArray as E, isObject as L, mergeWith as w } from "lodash-es";
+import { C as M, F as i, L as m } from "../../chunks/common.js";
+import { c as y, h as d, g as c, k as S, o as h, l as T, e as V } from "../../chunks/type-guards.js";
+import { RESTSimpleLineSymbolStyle as $, RESTSymbolType as f, RESTFontWeight as D, RESTFontStyle as w, RESTFontDecoration as N } from "@arcgis/charts-spec";
+import { isEmpty as u, cloneDeep as r, isArray as L, isObject as E, mergeWith as G } from "lodash-es";
 import "d3-array";
 import "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
@@ -11,10 +13,8 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { c as b, e as l } from "../../chunks/index3.js";
-import { r as k, c as N, P as G } from "../../chunks/popover-ui-utils.js";
-import { u as W, F as i, t as m } from "../../chunks/scatter-plot-model.js";
-import { c as y, h as d, g as c, k as S, o as h, l as T, e as O } from "../../chunks/type-guards.js";
+import { c as b, e as l } from "../../chunks/index4.js";
+import { r as k, c as W, P as O } from "../../chunks/popover-ui-utils.js";
 import { n as X } from "../../chunks/chart-ui-utils2.js";
 import { u as R } from "../../chunks/useT9n.js";
 import { html as P } from "lit";
@@ -22,21 +22,21 @@ import { LitElement as Y, createEvent as F, safeClassMap as p } from "@arcgis/lu
 import { css as _ } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const v = {
   type: f.TS,
   color: [1, 1, 1, 255],
   font: {
     family: "Tahoma",
     size: 12,
-    decoration: D.None,
-    style: $.Normal,
-    weight: V.Normal
+    decoration: N.None,
+    style: w.Normal,
+    weight: D.Normal
   }
 }, C = {
   type: f.SLS,
   color: [1, 1, 1, 255],
-  style: M.Solid,
+  style: $.Solid,
   width: 2
 }, g = {
   element: "chart-element",
@@ -83,7 +83,7 @@ class z extends Y {
         this.setFormatValue(s, e);
       }), this.selectedElement = r(t.target.selectedElement);
     }, this.updateBackground = (t) => {
-      this.setFormatValue(W.Background, t.detail), this.selectedElement = t.detail;
+      this.setFormatValue(M.Background, t.detail), this.selectedElement = t.detail;
     }, this.updateTextProps = (t) => {
       const { font: e, color: s } = t.detail;
       this.selectedTexts.forEach((o) => {
@@ -101,7 +101,7 @@ class z extends Y {
       this.formatPopover === t?.target && (this.selectedTexts = [], this.selectedSymbols = [], this.selectedBackground = [], this.selectedElement = {}, this.removeFormatPopover());
     }, this.mergeFormatValues = (t, e) => {
       let s = !1;
-      E(t) && E(e) || L(t) && L(e) ? s = !0 : s = t === e;
+      L(t) && L(e) || E(t) && E(e) ? s = !0 : s = t === e;
       const o = typeof t == "number" || typeof e == "number" ? Number.NaN : "";
       return s ? void 0 : o;
     }, this.openChange = (t) => {
@@ -147,7 +147,7 @@ class z extends Y {
       const s = r(this.getFormatValue(t[0]));
       this.selectedElement = t?.reduce((o, a) => {
         const n = this.getFormatValue(a);
-        return w(o, n, this.mergeFormatValues);
+        return G(o, n, this.mergeFormatValues);
       }, s);
     } else {
       let s = r(e);
@@ -175,7 +175,7 @@ class z extends Y {
       placement: "auto",
       popoverClose: this.formatPopoverClose
     };
-    this.formatPopover = N(G.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
+    this.formatPopover = W(O.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
     Array.isArray(this.selectedElement) ? (this.formatPopover.open = !0, this.addFormatPopover()) : (this.formatPopover.open = !1, this.removeFormatPopover());
   }
   removeFormatPopover() {
@@ -270,7 +270,7 @@ class z extends Y {
       ...c(this.model) ? [i.AxisLabels] : [],
       ...T(this.model) ? [i.GuideLabels] : [],
       ...S(this.model) ? [i.DataLabels] : []
-    ], O(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
+    ], V(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
       i.Background,
       ...c(this.model) ? [m.AxisLines] : [],
       ...d(this.model) ? [m.GridLines] : [],

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

@@ -18,7 +18,7 @@ import { LitElement as c, createEvent as s, safeClassMap as m } from "@arcgis/lu
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const g = {
   jsAppFlyout: "js-app-flyout"
 }, C = h``;

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

@@ -1,26 +1,16 @@
-import { c as h } from "../../chunks/runtime.js";
+import { c as r } from "../../chunks/runtime.js";
+import { o, g as n, h as c } from "../../chunks/type-guards.js";
 import { WebChartLegendPositions as l } from "@arcgis/charts-spec";
 import { isEmpty as m } from "lodash-es";
-import "d3-array";
-import "../../chunks/interfaces.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import "@arcgis/core/request.js";
-import "../../chunks/scatter-plot-model.js";
-import { o, g as n, h as c } from "../../chunks/type-guards.js";
-import { m as g, c as r } from "../../chunks/chart-ui-utils2.js";
-import { u as p } from "../../chunks/useT9n.js";
+import { m as g, c as d } from "../../chunks/chart-ui-utils2.js";
+import { u as b } from "../../chunks/useT9n.js";
 import { html as a } from "lit";
-import { createRef as b, ref as u } from "lit-html/directives/ref.js";
+import { createRef as p, ref as u } from "lit-html/directives/ref.js";
 import { LitElement as x, safeClassMap as i } from "@arcgis/lumina";
 import { css as f } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const s = {
   textInput: "text-input",
   label: "label",
@@ -29,7 +19,7 @@ const s = {
 }, $ = f`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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;margin-top:var(--arcgis-charts-top-section-margin)}.text-input,.select{margin-bottom:var(--arcgis-charts-inter-section-margin)}.label{display:flex;justify-content:space-between}.label-container{display:flex;flex-direction:column;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}`;
 class C extends x {
   constructor() {
-    super(...arguments), this._messages = p(), this.characterLimitInputElement = b(), this.onModelConfigChange = () => {
+    super(...arguments), this._messages = b(), this.characterLimitInputElement = p(), this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.isChartTitleInvalid = !1, this.open = !1;
   }
@@ -55,7 +45,7 @@ class C extends x {
     const { value: t } = e.target;
     this.isChartTitleInvalid = m(t.trim()), this.characterLimitInputElement.value && g({
       inputElement: this.characterLimitInputElement.value,
-      status: this.isChartTitleInvalid ? r.INVALID : r.IDLE
+      status: this.isChartTitleInvalid ? d.INVALID : d.IDLE
     }), this.isChartTitleInvalid || this.model.setTitleText(t);
   }
   setChartLegendTitle(e) {
@@ -95,8 +85,8 @@ class C extends x {
     this.model.setDescriptionVisibility(t);
   }
   legendPositionChange(e) {
-    const d = e.target?.selectedItems[0]?.value;
-    o(this.model) && this.model.setLegendPosition(d);
+    const h = e.target?.selectedItems[0]?.value;
+    o(this.model) && this.model.setLegendPosition(h);
   }
   renderLegendPositions() {
     return o(this.model) ? [
@@ -113,7 +103,7 @@ class C extends x {
     ] : null}${o(this.model) ? a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.legendTitle}<calcite-switch .checked=${this.model.getLegendTitleVisibility()} @calciteSwitchChange=${this.enableLegendTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} type=text .disabled=${!this.model.getLegendTitleVisibility()} .value=${this.model.getLegendTitleText()} @calciteInputInput=${this.setChartLegendTitle}></calcite-input></div>` : null}<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.legendPosition}</calcite-label><calcite-combobox clear-disabled label class=${i(s.select)} @calciteComboboxChange=${this.legendPositionChange} selection-mode=single>${this.renderLegendPositions()}</calcite-combobox></div><div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.description}<calcite-switch .checked=${this.model.getDescriptionVisibility()} @calciteSwitchChange=${this.enableDescription}></calcite-switch></calcite-label><calcite-text-area .disabled=${!this.model.getDescriptionVisibility()} .value=${this.model.getDescriptionText()} @calciteTextAreaInput=${this.setChartDescription}></calcite-text-area></div>`;
   }
 }
-h("arcgis-charts-config-general", C);
+r("arcgis-charts-config-general", C);
 export {
   C as ArcgisChartsConfigGeneral
 };

package/dist/components/arcgis-charts-config-guide/customElement.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="../../index.d.ts" />
-import { ModelWithGuides, GuideOrientation } from '../../model';
+import { ModelWithGuides } from '../../model/mixins';
 import { CalculatedMinMaxBoundsPayload } from '@arcgis/charts-spec';
 import { default as MapView } from '@arcgis/core/views/MapView';
 import { PopoverChangePayload, PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { GuideChangePayload } from './resource';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { GuideOrientation } from '../../model';
 
 /** @private */
 export declare class ArcgisChartsConfigGuide extends LitElement {

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

@@ -11,29 +11,29 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { c as g, b as Z } from "../../chunks/index3.js";
+import { c as g, b as Z } from "../../chunks/index4.js";
 import { c as q, P as z } from "../../chunks/popover-ui-utils.js";
-import { v as G } from "../../chunks/scatter-plot-model.js";
-import { h as H, m as U, n as W } from "../../chunks/type-guards.js";
-import { m as S, d as Y, e as j, g as J, k as M, c as $ } from "../../chunks/chart-ui-utils2.js";
+import { m as G, d as H, e as U, g as W, k as M, c as S } from "../../chunks/chart-ui-utils2.js";
 import { d as A } from "../../chunks/default.js";
-import { g as K } from "../../chunks/resource.js";
-import { u as Q } from "../../chunks/useT9n.js";
+import { g as Y } from "../../chunks/resource.js";
+import { u as j } from "../../chunks/useT9n.js";
 import { html as d } from "lit";
 import { createRef as h, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as ee, createEvent as T, safeClassMap as o, safeStyleMap as te } from "@arcgis/lumina";
-import { css as ie } from "@lit/reactive-element/css-tag.js";
+import { LitElement as J, createEvent as $, safeClassMap as o, safeStyleMap as K } from "@arcgis/lumina";
+import { css as Q } from "@lit/reactive-element/css-tag.js";
+import { G as T } from "../../chunks/common.js";
+import { h as ee, m as te, n as ie } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const s = {
   row: "row",
   column: "column",
   colorPicker: "color-picker"
-}, oe = ie`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
-class se extends ee {
+}, oe = Q`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
+class se extends J {
   constructor() {
-    super(...arguments), this._messages = Q(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
+    super(...arguments), this._messages = j(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
       const t = e.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
       if (p(i, n) === m.SLS) {
         const l = E(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
@@ -56,7 +56,7 @@ class se extends ee {
       } else t?.color !== void 0 && this.setColor(t.color);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.latestGuidePosition = 0, this.arcgisChartsConfigGuideChange = T(), this.arcgisChartsConfigGuidePopoverChange = T(), this.arcgisChartsConfigPopoverOpenChange = T();
+    }, this.latestGuidePosition = 0, this.arcgisChartsConfigGuideChange = $(), this.arcgisChartsConfigGuidePopoverChange = $(), this.arcgisChartsConfigPopoverOpenChange = $();
   }
   static {
     this.properties = { guidePopover: 16, messageOverrides: 0, model: 0, timeZone: 3, calculatedMinMaxBounds: 2, index: 11, orientation: 3, latestGuidePosition: 9 };
@@ -65,7 +65,7 @@ class se extends ee {
     this.styles = oe;
   }
   get isXAxisDateField() {
-    return this.orientation === G.X && H(this.model) && this.model.getXAxisValueFormat()?.type === R.DateAxisFormat;
+    return this.orientation === T.X && ee(this.model) && this.model.getXAxisValueFormat()?.type === R.DateAxisFormat;
   }
   load() {
     this.modelChange(this.model);
@@ -87,16 +87,16 @@ class se extends ee {
   }
   setGuideStart(e) {
     const { value: t } = e.target;
-    this.startCalciteInput.value !== void 0 && (t === "" ? S({
+    this.startCalciteInput.value !== void 0 && (t === "" ? G({
       inputElement: this.startCalciteInput.value,
-      status: $.INVALID
+      status: S.INVALID
     }) : (this.model.setGuideStart(t, this.index, this.orientation), this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !1
-    }), S({
+    }), G({
       inputElement: this.startCalciteInput.value,
-      status: $.IDLE
+      status: S.IDLE
     }))), this.guidePopover?.open === !0 && this.removeGuidePopover();
   }
   setGuideEnd(e) {
@@ -105,9 +105,9 @@ class se extends ee {
       index: this.index,
       orientation: this.orientation,
       isDelete: !1
-    }), S({
+    }), G({
       inputElement: this.endCalciteInput.value,
-      status: $.IDLE
+      status: S.IDLE
     })), this.guidePopover?.open === !0 && this.removeGuidePopover();
   }
   setGuideDateTimeRange() {
@@ -214,7 +214,7 @@ class se extends ee {
   }
   createTooltip(e) {
     const t = e.target;
-    switch (this.tooltip = Y(t), t.icon) {
+    switch (this.tooltip = H(t), t.icon) {
       case "view-visible":
         this.tooltip.innerHTML = this._messages.hideGuide ?? "";
         break;
@@ -233,22 +233,22 @@ class se extends ee {
     this.model.setGuideVisibility(!e, this.index, this.orientation);
   }
   destroyTooltip() {
-    j(this.tooltip);
+    U(this.tooltip);
   }
   deleteGuide() {
-    this.destroyTooltip(), this.orientation === G.X && U(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === G.Y && W(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
+    this.destroyTooltip(), this.orientation === T.X && te(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === T.Y && ie(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !0
     });
   }
   renderColorElement() {
-    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? J(e.style) : O.Solid, f = p(a, r) === m.SLS ? `line-${v}` : "square-f";
-    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${te({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
+    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? W(e.style) : O.Solid, f = p(a, r) === m.SLS ? `line-${v}` : "square-f";
+    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${K({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   render() {
     const e = this.model.getGuideStart(this.index, this.orientation), t = this.model.getGuideEnd(this.index, this.orientation), i = this.model.getGuideName(this.index, this.orientation), n = this.model.getGuideLabelText(this.index, this.orientation), l = this.model.getGuideAbove(this.index, this.orientation), a = this.model.getGuideVisibility(this.index, this.orientation), r = this.isXAxisDateField;
-    return d`<calcite-block .heading=${i ?? ""} .open=${this.latestGuidePosition === K(this.index, this.orientation, this.model)} collapsible .messageOverrides=${{
+    return d`<calcite-block .heading=${i ?? ""} .open=${this.latestGuidePosition === Y(this.index, this.orientation, this.model)} collapsible .messageOverrides=${{
       expand: this._messages.expand,
       collapse: this._messages.collapse
     }}><calcite-action slot=control text .icon=${a ? "view-visible" : "view-hide"} @click=${this.toggleGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><calcite-action slot=control text icon=trash @click=${this.deleteGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.start}${r ? d`<calcite-input-date-picker .value=${this.getDateStringFromBound(e)} required scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${u(this.startDateCalciteInput)}></calcite-input-date-picker>` : d`<calcite-input type=number required @calciteInputInput=${this.setGuideStart} @keydown=${M} number-button-type=none .value=${e?.toString()} ${u(this.startCalciteInput)}></calcite-input>`}</calcite-label><calcite-label class=${o(s.column)}>${this._messages.end}${r ? d`<calcite-input-date-picker .value=${this.getDateStringFromBound(t)} scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${u(this.endDateCalciteInput)}></calcite-input-date-picker>` : d`<calcite-input type=number @calciteInputInput=${this.setGuideEnd} @keydown=${M} number-button-type=none .value=${t?.toString()} ${u(this.endCalciteInput)}></calcite-input>`}</calcite-label></div>${r ? B("time-picker-row", d`<div class=${o(s.row)}>${e != null ? d`<calcite-label class=${o(s.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(e)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${u(this.startTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}${t != null ? d`<calcite-label class=${o(s.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(t)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${u(this.endTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}</div>`) : null}<div class=${o(s.row)}><div class=${o(s.column)}>${this.renderColorElement()}</div></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.guideName}<calcite-input type=text .value=${i} @calciteInputInput=${this.setGuideName}></calcite-input></calcite-label></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.guideLabel}<calcite-input type=text .value=${n} @calciteInputInput=${this.setGuideLabel}></calcite-input></calcite-label></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.display}<calcite-segmented-control @calciteSegmentedControlChange=${this.setGuideRendered} scale=s><calcite-segmented-control-item .checked=${l} .value=${this._messages.inFront}>${this._messages.inFront}</calcite-segmented-control-item><calcite-segmented-control-item .checked=${!l} .value=${this._messages.inBack}>${this._messages.inBack}</calcite-segmented-control-item></calcite-segmented-control></calcite-label></div></calcite-block>`;

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

@@ -19,7 +19,7 @@ import { LitElement as m, createEvent as s, safeClassMap as h } from "@arcgis/lu
 import { css as g } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const C = {
   jsAppFlyout: "js-app-flyout"
 }, d = g``;

package/dist/components/arcgis-charts-config-guides/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../index.d.ts" />
-import { ModelWithGuides } from '../../model';
+import { ModelWithGuides } from '../../model/mixins';
 import { CalculatedMinMaxBoundsPayload } from '@arcgis/charts-spec';
 import { default as MapView } from '@arcgis/core/views/MapView';
 import { PropertyValues } from 'lit';

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

@@ -11,8 +11,6 @@ import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import { e as A } from "../../chunks/popover-ui-utils.js";
-import { v as o } from "../../chunks/scatter-plot-model.js";
-import { m as l, n as h } from "../../chunks/type-guards.js";
 import { d as c } from "../../chunks/default.js";
 import { g as u, H as g } from "../../chunks/resource.js";
 import { u as b } from "../../chunks/useT9n.js";
@@ -20,9 +18,11 @@ import { html as a } from "lit";
 import { createRef as m, ref as G } from "lit-html/directives/ref.js";
 import { LitElement as C, createEvent as $, safeClassMap as p } from "@arcgis/lumina";
 import { css as v } from "@lit/reactive-element/css-tag.js";
+import { G as o } from "../../chunks/common.js";
+import { m as l, n as h } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const X = v`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
 class Y extends C {
   constructor() {

package/dist/components/arcgis-charts-config-guides/resource.d.ts

@@ -1,4 +1,5 @@
-import { ModelWithGuides, GuideOrientation } from '../../model';
+import { ModelWithGuides } from '../../model/mixins';
+import { GuideOrientation } from '../../model';
 export declare const HTMLClasses: {
     readonly addGuide: "add-guide";
     readonly noMessages: "no-messages";

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

@@ -10,14 +10,14 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { b as d, h as c } from "../../chunks/index3.js";
+import { b as d, h as c } from "../../chunks/index4.js";
 import { LitElement as m } from "@arcgis/lumina";
 import { html as t } from "lit";
 import { C as s } from "../../chunks/interfaces2.js";
 import { css as g } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const p = g`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
 class f extends m {
   constructor() {

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

@@ -3,7 +3,7 @@ import { keyed as f } from "lit-html/directives/keyed.js";
 import { WebChartDataTransformations as v, RESTSymbolType as x } from "@arcgis/charts-spec";
 import { debounce as y } from "lodash-es";
 import "d3-array";
-import { ca as k, $ as T, Z as L } from "../../chunks/interfaces.js";
+import { c9 as k, $ as T, Z as L } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -22,7 +22,7 @@ import { LitElement as z, createEvent as u, safeStyleMap as P, safeClassMap as a
 import { css as j } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const s = {
   label: "label",
   row: "row",

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

@@ -3,7 +3,7 @@ import { keyed as c } from "lit-html/directives/keyed.js";
 import { WebChartDataTransformations as o, RESTSymbolType as v } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { b1 as C, ca as u, P as b } from "../../chunks/interfaces.js";
+import { b1 as C, c9 as u, P as b } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -21,7 +21,7 @@ import { LitElement as w, createEvent as p, safeClassMap as i } from "@arcgis/lu
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const t = {
   symbolPropertyPopover: "symbol-property-popover",
   colorPicker: "color-picker",

package/dist/components/arcgis-charts-config-invalid-input-message/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as a, safeClassMap as e } from "@arcgis/lumina";
 import { css as l } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const n = {
   invalidMessageColor: "invalid-message-color"
 }, o = l`:host{display:block}.invalid-message-color{color:red}`;

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

@@ -10,14 +10,14 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { h as m } from "../../chunks/index3.js";
+import { h as m } from "../../chunks/index4.js";
 import { LitElement as g, createEvent as p } from "@arcgis/lumina";
 import { html as a } from "lit";
 import { C as s } from "../../chunks/interfaces2.js";
 import { css as f } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const C = f`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
 class u extends g {
   constructor() {

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

@@ -9,7 +9,7 @@ import { L as l } from "../../chunks/interfaces2.js";
 import { d as T, s as P } from "../../chunks/store.js";
 import "lodash-es";
 import "d3-array";
-import { b0 as u, aL as I, aM as w, ca as p, ch as B } from "../../chunks/interfaces.js";
+import { b0 as u, aL as I, aM as w, c9 as p, cg as B } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -21,7 +21,7 @@ import { c as k, r as S, P as E } from "../../chunks/popover-ui-utils.js";
 import { css as L } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const N = L`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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);margin-top:var(--arcgis-charts-top-section-margin)}.label,.disabled-label{display:flex;margin-left:.5rem;margin-right:.5rem;margin-bottom:.5rem;justify-content:space-between}.time-binning-header{display:flex;font-weight:700;margin-left:.5rem;margin-right:.5rem;justify-content:space-between}.text{display:flex;margin-left:.5rem;width:calc(100% - 1.5rem);height:2rem;margin-bottom:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:auto}.disabled-label{pointer-events:none}.fab{display:flex;margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5rem;justify-content:center}.link-container{display:flex;justify-content:flex-end}:host(.arcgis-chart-rtl) .text{margin-left:0rem;margin-right:.5rem}`, s = {
   label: "label",
   fieldList: "field-list",

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

@@ -4,7 +4,7 @@ import { keyed as v } from "lit-html/directives/keyed.js";
 import { WebChartTimeAggregationTypes as d, RESTFieldType as h, WebChartTemporalBinningUnits as c } from "@arcgis/charts-spec";
 import { isEqual as f } from "lodash-es";
 import "d3-array";
-import { aL as I, aM as F, ca as P, b3 as x, b1 as C, ch as T } from "../../chunks/interfaces.js";
+import { aL as I, aM as F, c9 as P, b3 as x, b1 as C, cg as T } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -22,7 +22,7 @@ import { j as L, U as $, i as u, h as E, s as z } from "../../chunks/chart-ui-ut
 import { css as S } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const N = S`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.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-y-axis{transform:rotate(90deg)}calcite-panel{max-height:60vh}calcite-panel .size-section{width:19rem;margin:1rem 0;display:flex;flex-wrap:wrap;justify-content:space-evenly}calcite-panel .size-section calcite-label{width:8rem;margin-bottom:.25rem}calcite-panel .apply-button{width:17rem}`, r = {
   jsAppFlyout: "js-app-flyout",
   name: "line-chart-data-popover",