@arcgis/charts-components 4.33.0-next.99 → 4.33.0

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

@@ -1,20 +1,29 @@
 import { c as k } from "../../chunks/runtime.js";
 import { keyed as p } from "lit-html/directives/keyed.js";
 import { repeat as v } from "lit-html/directives/repeat.js";
-import { editPopover as y, getFieldAlias as $, isIntegerField as u, isNumericField as L, getLocaleInfo as F, formatMessage as P } from "@arcgis/charts-shared-utils";
-import { RESTFieldType as g } from "@arcgis/charts-spec";
-import { Z as l } from "../../chunks/scatter-plot-model.js";
-import { isEqual as x } from "lodash-es";
-import { a as n } from "../../chunks/interfaces.js";
-import { U as h, e as I, i as f, c as w, d as D } from "../../chunks/chart-ui-utils.js";
-import { u as T } from "../../chunks/useT9n.js";
+import { B as l } from "../../chunks/common.js";
+import { RESTFieldType as u } from "@arcgis/charts-spec";
+import { isEqual as y } from "lodash-es";
+import "d3-array";
+import { c9 as $, b3 as g, b1 as L, bS as F, bR as P } 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";
+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 { e as x } from "../../chunks/popover-ui-utils.js";
+import { a as n } from "../../chunks/interfaces2.js";
+import { U as h, h as I, i as f, d as w, e as D } from "../../chunks/chart-ui-utils2.js";
+import { u as S } from "../../chunks/useT9n.js";
 import { html as r } from "lit";
 import { createRef as b, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as S, createEvent as C, safeClassMap as d } from "@arcgis/lumina";
+import { LitElement as T, createEvent as C, safeClassMap as d } from "@arcgis/lumina";
 import { css as E } 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.99 */
+v4.33.0 */
 const o = {
   jsAppFlyout: "js-app-flyout",
   name: "bar-chart-data-popover",
@@ -27,9 +36,9 @@ const o = {
   sortOrderPickList: "sort-order-pick-list",
   panel: "panel"
 }, B = E`.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-mean,.sort-median{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
-class A extends S {
+class A extends T {
   constructor() {
-    super(...arguments), this._messages = T(), 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.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = C(), this.arcgisChartsConfigPopoverClose = C();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 3, referenceElement: 2, open: 7, contentKind: 1, layerFieldsInfo: 0, isCustomSortDisabled: 5, selectedContent: 1 };
@@ -37,43 +46,22 @@ class A extends S {
   static {
     this.styles = B;
   }
-  //#endregion
-  //#region Public Methods
-  /**
-   * Calls `reposition()` method on popover element.
-   *
-   * @category Public
-   */
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  //#endregion
-  //#region Lifecycle
   willUpdate(e) {
     e.has("selectedContent") && this.selectedContentChange(this.selectedContent, e.get("selectedContent"));
   }
-  /** @category Lifecycle */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async updated() {
     setTimeout(async () => {
       typeof this.picklist.value?.setFocus == "function" && await this.picklist.value?.setFocus();
-    }, h.PopoverTimer), y(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    }, h.PopoverTimer), x(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, h.PopoverTimer);
   }
-  //#endregion
-  //#region Private Methods
-  /**
-   * Watches for change to selected content to record if there was a pick list change.
-   *
-   * @param newSelectedContent
-   * @param oldSelectedContent
-   * @category Watch handler
-   */
   selectedContentChange(e, t) {
-    this.pickListHasChanged = !x(e, t);
+    this.pickListHasChanged = !y(e, t);
   }
-  /** @category Event handler */
   closePopover() {
     if (this.contentKind === n.numericFields && this.pickListHasChanged) {
       const e = {
@@ -85,10 +73,6 @@ class A extends S {
     }
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /**
-   * @category Event handler
-   * @param e
-   */
   async onDataContentTypeChange(e) {
     this.pickListHasChanged = !0;
     const t = e.target.selectedItems;
@@ -97,17 +81,9 @@ class A extends S {
       value: t.map((i) => i.value)
     }), this.open = !1;
   }
-  /**
-   * @param field
-   * @category Render UX
-   */
   buildPickListItem(e) {
     return p(e.name, r`<calcite-list-item .label=${$(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${f(e.name, this.selectedContent)}></calcite-list-item>`);
   }
-  /**
-   * @param itemKind
-   * @category Render UX
-   */
   buildPickListItems(e) {
     const t = this.layerFieldsInfo?.length ?? 0, i = [];
     switch (e) {
@@ -123,7 +99,7 @@ class A extends S {
         i.push(s);
         for (let a = 0; a < t; a += 1) {
           const c = this.layerFieldsInfo[a];
-          (u(c) || c.type === g.String) && i.push(this.buildPickListItem(c));
+          (g(c) || c.type === u.String) && i.push(this.buildPickListItem(c));
         }
         break;
       }
@@ -132,21 +108,16 @@ class A extends S {
         i.push(s);
         for (let a = 0; a < t; a += 1) {
           const c = this.layerFieldsInfo[a];
-          (u(c) || c.type === g.String) && i.push(this.buildPickListItem(c));
+          (g(c) || c.type === u.String) && i.push(this.buildPickListItem(c));
         }
         break;
       }
     }
     return i;
   }
-  /**
-   * @category Event handler
-   * @param e
-   */
   onNumericFieldsChange(e) {
     e.target !== null && (this.selectedContent = e.target.selectedItems.map((t) => t.value));
   }
-  /** @category Render UX */
   buildSortOrder() {
     const e = Object.keys(l);
     let t;
@@ -184,15 +155,9 @@ class A extends S {
       return r`<calcite-list-item .disabled=${this.isCustomSortDisabled && i === l.customSort} .label=${this._messages[i]} .selected=${this.selectedContent === i} .value=${l[i]} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}><calcite-icon class=${`sort-icon-color ${s}`} slot=content-start .icon=${t}></calcite-icon></calcite-list-item>`;
     });
   }
-  /** @category Event handler */
   async onNumericFieldSelectionDone() {
     this.pickListHasChanged && this.closePopover();
   }
-  /**
-   * Creates a tooltip for the hovered action.
-   *
-   * @category Event handler
-   */
   createTooltip(e) {
     if (e.target?.label === this._messages.customSort && this.isCustomSortDisabled) {
       const t = e.target, { formatLocale: i } = F(), a = new Intl.NumberFormat(i).format(h.customSortLimit), c = P(this._messages.customSortLimit ?? "", {
@@ -201,42 +166,25 @@ class A extends S {
       this.tooltip = w(t), this.tooltip.innerHTML = c, document.body.appendChild(this.tooltip);
     }
   }
-  /**
-   * Destroys tooltip for the action that was being hovered.
-   *
-   * @category Event handler
-   */
   destroyTooltip() {
     D(this.tooltip);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderCategory() {
     const e = this.buildPickListItems(n.category);
     return r`<calcite-list label class=${d(o.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
-  /** @category Render UX */
   renderNumericFields() {
     const e = this.buildPickListItems(n.numericFields);
     return r`<calcite-list label class=${d(o.numericFieldPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
-  /** @category Render UX */
   renderSplitByField() {
     const e = this.buildPickListItems(n.splitByField);
     return r`<calcite-list label class=${d(o.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
-  /**
-   * @category Render UX
-   * Unlike the other field-based render items, the sort orders
-   * are static. So, a function separate from buildPickListItems()
-   * needs to be used.
-   */
   renderSortOrder() {
     const e = this.buildSortOrder();
     return r`<calcite-list label class=${d(o.sortOrderPickList)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
   }
-  /** @category Render UX */
   renderPopoverInfo() {
     let e;
     switch (this.contentKind) {
@@ -255,7 +203,6 @@ class A extends S {
     }
     return e;
   }
-  /** @category Lifecycle */
   render() {
     let e;
     return this.contentKind === n.numericFields && (e = r`<div slot=footer><calcite-fab class=${d(o.fab)} appearance=outline-fill kind=neutral icon .label=${this._messages.selectionDone} scale=s text-enabled .text=${this._messages.selectionDone} @click=${this.onNumericFieldSelectionDone}></calcite-fab></div>`), r`<div class=${d(o.jsAppFlyout)}><calcite-popover class=${d(o.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label ${m(this.popoverElement)}><calcite-panel class=${d(o.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${d(o.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;

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

@@ -1,11 +1,11 @@
 /// <reference types="../../index.d.ts" />
 import { BoxPlotModel } from '../../model';
-import { PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisChartsConfigBoxPlotSeriesPopover } from '../arcgis-charts-config-box-plot-series-popover/customElement.js';
 
 /** @private */
-export declare class ArcGISChartsConfigBoxPlotSeries extends LitElement {
+export declare class ArcgisChartsConfigBoxPlotSeries extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
     /**
@@ -18,18 +18,21 @@ export declare class ArcGISChartsConfigBoxPlotSeries extends LitElement {
      * To open the config of the selected series.
      *
      * @category Public
+     * @default false
      */
     configSeriesOpen: boolean;
     /**
      * Whether the chart is actively using color match at the moment.
      *
      * @category Private
+     * @default false
      */
     activeColorMatch: boolean;
     /**
      * Place the popover in this placement.
      *
      * @category Public
+     * @default "leading"
      */
     popoverPlacement: HTMLCalcitePopoverElement["placement"];
     /**
@@ -47,6 +50,5 @@ export declare class ArcGISChartsConfigBoxPlotSeries extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
-    /** @category Private */
     private _messages;
 }

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

@@ -1,27 +1,36 @@
 import { c as I } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
-import { removePopover as g, ChartSubType as v, createPopover as $, PopoverType as M } from "@arcgis/charts-shared-utils";
+import { html as l } from "lit-html";
+import { keyed as $ } from "lit-html/directives/keyed.js";
 import { WebChartBoxPlotMultipleSeriesKinds as h } from "@arcgis/charts-spec";
-import { isNil as y } from "lodash-es";
-import { repeat as B } from "lit-html/directives/repeat.js";
-import { c as O, d as w } from "../../chunks/chart-ui-utils.js";
-import { u as T } from "../../chunks/useT9n.js";
-import { LitElement as N, createEvent as S, safeStyleMap as C, safeClassMap as l } from "@arcgis/lumina";
-import { css as _ } from "@lit/reactive-element/css-tag.js";
+import { isNil as M } from "lodash-es";
+import "d3-array";
+import { cs as g } 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";
+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 { r as C, c as y, P as B } from "../../chunks/popover-ui-utils.js";
+import { repeat as O } from "lit-html/directives/repeat.js";
+import { d as w, e as T } from "../../chunks/chart-ui-utils2.js";
+import { u as N } from "../../chunks/useT9n.js";
+import { LitElement as _, createEvent as S, safeStyleMap as v, safeClassMap as a } from "@arcgis/lumina";
+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.99 */
+v4.33.0 */
 const n = {
-  hostDiv: "host-div",
   topSection: "top-section",
   sectionLabel: "section-label",
   list: "list",
   infoIcon: "info-icon"
-}, E = _`.host-div{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 W extends N {
+}, E = k`: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 W extends _ {
   constructor() {
-    super(...arguments), this._messages = T(), this.resetSeriesOriginal = () => {
-      this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling();
+    super(...arguments), this._messages = N(), this.resetSeriesOriginal = () => {
+      this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
     }, this.onMultipleSeriesSelect = async (e) => {
       if (!this.shouldDisableMeanLinesOption()) {
         const i = e.target, t = i.value ?? i.parentElement.value ?? "";
@@ -52,10 +61,10 @@ class W extends N {
       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);
+        i !== -1 && (s = r >= i ? r + 1 : r, o = t >= i ? t + 1 : t), this.model.moveSeries(s, o), this.seriesOrderResetCounter += 1;
       }
     }, this.seriesPopoverClose = () => {
-      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = g(this.seriesPopover);
+      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = C(this.seriesPopover);
     }, this.seriesPopoverChange = (e) => {
       this.arcgisChartsConfigBoxPlotSeriesPopoverChange.emit({
         open: e,
@@ -71,74 +80,64 @@ class W extends N {
       }
     }, this.createTooltip = (e, i) => {
       const t = e.target;
-      this.tooltip = O(t), this.tooltip.innerHTML = i, document.body.appendChild(this.tooltip);
+      this.tooltip = w(t), this.tooltip.innerHTML = i, document.body.appendChild(this.tooltip);
     }, this.destroyTooltip = () => {
-      w(this.tooltip);
+      T(this.tooltip);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.openChange = (e) => {
       this.arcgisChartsConfigPopoverOpenChange.emit(e.detail);
-    }, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigBoxPlotSeriesPopoverChange = S(), this.arcgisChartsConfigPopoverOpenChange = S({
+    }, this.meanLinesBoxColorIsSelected = !1, this.seriesOrderResetCounter = 0, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigBoxPlotSeriesPopoverChange = S(), this.arcgisChartsConfigPopoverOpenChange = S({
       composed: !0,
       cancelable: !0,
       bubbles: !0
     });
   }
   static {
-    this.properties = { selectedSeriesIndex: 16, meanLinesBoxColorIsSelected: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
+    this.properties = { selectedSeriesIndex: 16, meanLinesBoxColorIsSelected: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
   }
   static {
     this.styles = E;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
   }
-  /** @category Lifecycle */
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange(), e.has("meanLinesBoxColorIsSelected") && this.meanLinesBoxColorIsSelectedChange();
+  }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, i) {
     i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /** @category Watch handler */
   selectedSeriesIndexChange() {
     this.selectedSeriesIndex !== void 0 && this.configSeriesOpen ? (this.setupSeriesPopover(), this.seriesPopover && (this.seriesPopover.selectedName = this.model.getSeriesName(this.selectedSeriesIndex), this.seriesPopover.selectedColor = this.model.getSeriesColor(this.selectedSeriesIndex), this.seriesPopover.isLineSymbol = this.model.getShowMeanLines() === !0, this.seriesPopover.selectedLineStyle = this.model.getSeriesLineStyle(this.selectedSeriesIndex), this.seriesPopover.selectedLineWidth = this.model.getSeriesLineWidth(this.selectedSeriesIndex), this.seriesPopover.open || (this.seriesPopover.open = !0)), this.addSeriesPopover()) : this.removeSeriesPopover();
   }
-  /** @category Watch handler */
   meanLinesBoxColorIsSelectedChange() {
     this.meanLinesBoxColorIsSelected && this.configSeriesOpen ? (this.setupSeriesPopover(), this.seriesPopover && (this.seriesPopover.selectedColor = this.model.getMeanLinesBoxColor(), this.seriesPopover.isLineSymbol = !1, this.seriesPopover.open || (this.seriesPopover.open = !0)), this.addSeriesPopover()) : this.removeSeriesPopover();
   }
-  /** @category Private */
   removeSeriesPopover() {
-    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = g(this.seriesPopover)), this.seriesPopoverChange(!1);
+    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = C(this.seriesPopover)), this.seriesPopoverChange(!1);
   }
-  /** @category Render UX */
   buildSeriesListItems() {
     const e = this.model.getSeriesLength(), i = this.model.getBoxPlotSeriesIndexWhenMeanLinesShown(), t = Array.from({ length: e }, (s, o) => o);
-    return B(t, (s) => this.model.getSeriesId(s), (s) => {
-      const o = this.model.getSeriesId(s), c = this.model.getSeriesColor(s), f = this.model.getSeriesName(s), d = this.model.getChartSubType(), u = d === v.BoxPlotMonoField || d === v.BoxPlotMultiFields ? this._messages.series : o;
+    return O(t, (s) => this.model.getSeriesId(s), (s) => {
+      const o = this.model.getSeriesId(s), c = this.model.getSeriesColor(s), f = this.model.getSeriesName(s), d = this.model.getChartSubType(), u = d === g.BoxPlotMonoField || d === g.BoxPlotMultiFields ? this._messages.series : o;
       let m = "#CCCCCC", p = "minus-square";
       if ((e > 1 || !this.activeColorMatch) && c !== void 0) {
         p = this.model.getShowMeanLines() === !0 ? "line-solid" : "square-f";
-        const [L, P, x, b] = [...c];
-        m = `rgba(${L},${P},${x},${b / 255})`;
+        const [L, x, P, b] = [...c];
+        m = `rgba(${L},${x},${P},${b / 255})`;
       }
-      return i !== s ? a`<calcite-list-item .label=${f ?? o ?? ""} .description=${u} .value=${o} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${p} style=${C({ color: m })}></calcite-icon></calcite-list-item>` : null;
+      return i !== s ? l`<calcite-list-item .label=${f ?? o ?? ""} .description=${u} .value=${o} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${p} style=${v({ color: m })}></calcite-icon></calcite-list-item>` : null;
     });
   }
-  /** @category Render UX */
   buildSeriesList() {
-    return a`<calcite-list label class=${l(n.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`;
+    return $(this.seriesOrderResetCounter, l`<calcite-list label class=${a(n.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
   }
-  /** @category Private */
   setupSeriesPopover() {
-    if (y(this.seriesPopover) && this.el !== void 0) {
+    if (M(this.seriesPopover) && this.el !== void 0) {
       const e = {
         seriesNameChange: this.seriesNameChange,
         seriesColorChange: this.seriesColorChange,
@@ -150,20 +149,15 @@ class W extends N {
         labelCanBeConfigured: !this.meanLinesBoxColorIsSelected,
         popoverClose: this.seriesPopoverClose
       };
-      this.seriesPopover = $(M.BoxPlotSeriesPopover, e);
+      this.seriesPopover = y(B.BoxPlotSeriesPopover, e);
     }
   }
-  /** @category Private */
   addSeriesPopover() {
     this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover), this.seriesPopoverChange(!0);
   }
-  /** @category Private */
   shouldDisableMeanLinesOption() {
     return this.model.getSplitByField() === "" || this.model.getSplitByField() === void 0;
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderMeanLinesBoxColorItem() {
     let e = "#CCCCCC", i = "minus-square";
     const t = this.model.getMeanLinesBoxColor();
@@ -172,23 +166,21 @@ class W extends N {
       const [r, s, o, c] = [...t];
       e = `rgba(${r},${s},${o},${c / 255})`;
     }
-    return a`<calcite-list label class=${l(n.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=${C({ color: e })}></calcite-icon></calcite-list-item></calcite-list>`;
+    return l`<calcite-list label class=${a(n.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=${v({ color: e })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
-  /** @category Render UX */
   renderMultipleSeriesOption() {
     const e = this.shouldDisableMeanLinesOption();
     return e ? [] : [
-      a`<div class=${`${n.sectionLabel} ${n.topSection}`}>${this._messages.displayMultipleSeries}</div>`,
-      a`<calcite-list label class=${l(n.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleSeriesSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${h.Side} .selected=${this.model.getShowMeanLines() !== !0}><calcite-icon slot=content-start scale=l icon=graph-box-side-by-side></calcite-icon><calcite-icon class=${l(n.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.sideBySideTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.meanLines} .value=${h.MeanLines} .disabled=${e} .selected=${this.model.getShowMeanLines() === !0}><calcite-icon slot=content-start scale=l icon=graph-box-mean-lines></calcite-icon><calcite-icon class=${l(n.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.meanLinesTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item></calcite-list>`,
+      l`<div class=${`${n.sectionLabel} ${n.topSection}`}>${this._messages.displayMultipleSeries}</div>`,
+      l`<calcite-list label class=${a(n.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleSeriesSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${h.Side} .selected=${this.model.getShowMeanLines() !== !0}><calcite-icon slot=content-start scale=l icon=graph-box-side-by-side></calcite-icon><calcite-icon class=${a(n.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.sideBySideTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.meanLines} .value=${h.MeanLines} .disabled=${e} .selected=${this.model.getShowMeanLines() === !0}><calcite-icon slot=content-start scale=l icon=graph-box-mean-lines></calcite-icon><calcite-icon class=${a(n.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.meanLinesTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item></calcite-list>`,
       this.model.getShowMeanLines() === !0 ? this.renderMeanLinesBoxColorItem() : null
     ];
   }
-  /** @category Lifecycle */
   render() {
-    return a`<div class=${l(n.hostDiv)}>${this.renderMultipleSeriesOption()}<div class=${l(n.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()}</div>`;
+    return l`${this.renderMultipleSeriesOption()}<div class=${a(n.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", W);
 export {
-  W as ArcGISChartsConfigBoxPlotSeries
+  W as ArcgisChartsConfigBoxPlotSeries
 };

package/dist/components/arcgis-charts-config-box-plot-series/resource.d.ts

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly topSection: "top-section";
     readonly sectionLabel: "section-label";
     readonly list: "list";

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { Color, SimpleLineSymbolStyle } from '@arcgis/charts-spec';
-import { PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
@@ -46,6 +46,7 @@ export declare class ArcgisChartsConfigBoxPlotSeriesPopover extends LitElement {
      * Whether the symbol is a line symbol or not.
      *
      * @category Public
+     * @default false
      */
     isLineSymbol?: boolean;
     /**
@@ -58,12 +59,14 @@ export declare class ArcgisChartsConfigBoxPlotSeriesPopover extends LitElement {
      * open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
      * Whether the label can be configured or not.
      *
      * @category Public
+     * @default false
      */
     labelCanBeConfigured?: boolean;
     /**
@@ -77,7 +80,7 @@ export declare class ArcgisChartsConfigBoxPlotSeriesPopover extends LitElement {
      *
      * @category Public
      */
-    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, undefined>;
+    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, void>;
     /**
      * Event emitted when the popover is closed.
      *
@@ -116,6 +119,5 @@ export declare class ArcgisChartsConfigBoxPlotSeriesPopover extends LitElement {
     readonly arcgisChartsConfigSeriesPopoverNameChange: TargetedEvent<this, {
         name: string;
     }>;
-    /** @category Private */
     private _messages;
 }