@arcgis/charts-components 4.33.0-next.102 → 4.33.0-next.104

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

@@ -2,7 +2,7 @@ import { c as $ } from "../../chunks/runtime.js";
 import { WebChartStackedKinds as a, WebChartStatisticType as p } from "@arcgis/charts-spec";
 import { isNil as y } from "lodash-es";
 import "d3-array";
-import { C as P } from "../../chunks/interfaces.js";
+import { cp as P } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -19,17 +19,16 @@ import { LitElement as O, createEvent as c, safeStyleMap as A, safeClassMap as r
 import { css as N } 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.102 */
+v4.33.0-next.104 */
 const _ = {
   stackedType: "stacked-type"
-}, t = {
-  hostDiv: "host-div",
+}, s = {
   topSection: "top-section",
   sectionLabel: "section-label",
   list: "list",
   disabledInfo: "disabled-info",
   disabledStackingOption: "disabled-stacking-option"
-}, w = N`.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)}.disabled-info{margin:auto 1rem;pointer-events:auto}.disabled-info:active{margin:auto 1rem;pointer-events:none}.disabled-stacking-option{pointer-events:none;opacity:var(--calcite-opacity-disabled)}`;
+}, w = N`: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)}.disabled-info{margin:auto 1rem;pointer-events:auto}.disabled-info:active{margin:auto 1rem;pointer-events:none}.disabled-stacking-option{pointer-events:none;opacity:var(--calcite-opacity-disabled)}`;
 class B extends O {
   constructor() {
     super(...arguments), this._messages = M(), this.seriesNameChange = (e) => {
@@ -86,26 +85,26 @@ class B extends O {
   }
   /** @category Render UX */
   buildSeriesListItems() {
-    const e = this.model.getSeriesLength() ?? 0, i = Array.from({ length: e }, (s, o) => o);
-    return T(i, (s) => this.model.getSeriesId(s), (s) => {
-      const o = this.model.getSeriesId(s), d = this.model.getSeriesColor(s), v = this.model.getSeriesName(s), f = this.model.getChartSubType() === P.BarAndLineFromFields ? this._messages.series : o;
+    const e = this.model.getSeriesLength() ?? 0, i = Array.from({ length: e }, (t, o) => o);
+    return T(i, (t) => this.model.getSeriesId(t), (t) => {
+      const o = this.model.getSeriesId(t), d = this.model.getSeriesColor(t), v = this.model.getSeriesName(t), f = this.model.getChartSubType() === P.BarAndLineFromFields ? this._messages.series : o;
       let h = "#CCCCCC", g = "minus-square";
       if ((e > 1 || !this.activeColorMatch) && d !== void 0) {
         g = "square-f";
         const [C, S, u, b] = [...d];
         h = `rgba(${C},${S},${u},${b / 255})`;
       }
-      return n`<calcite-list-item .label=${v ?? o ?? ""} .description=${f} .value=${o} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon .icon=${g} style=${A({ color: h })} slot=content-end></calcite-icon></calcite-list-item>`;
+      return n`<calcite-list-item .label=${v ?? o ?? ""} .description=${f} .value=${o} .selected=${this.selectedSeriesIndex === t} @click=${this.openSeriesPopOver}><calcite-icon .icon=${g} style=${A({ color: h })} slot=content-end></calcite-icon></calcite-list-item>`;
     });
   }
   /** @category Render UX */
   buildSeriesList() {
-    return n`<calcite-list label class=${r(t.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`;
+    return n`<calcite-list label class=${r(s.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`;
   }
   /** @category Render UX */
   buildMultipleBarTypeList() {
     const e = this.shouldDisableStacking();
-    return e && this.model.getStackedType() !== a.Side && this.model.setStackedType(a.Side), n`<calcite-list label id=${_.stackedType} class=${r(t.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleBarSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${a.Side} .selected=${this.model.getStackedType() === void 0 || this.model.getStackedType() === a.Side}><calcite-icon scale=l icon=graph-bar-side-by-side slot=content-start></calcite-icon></calcite-list-item><calcite-list-item class=${r(e ? t.disabledStackingOption : "")} .label=${this._messages.stacked} .value=${a.Stacked} .selected=${this.model.getStackedType() === a.Stacked}><calcite-icon scale=l icon=graph-bar-stacked slot=content-start></calcite-icon>${e && n`<calcite-icon class=${r(t.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item><calcite-list-item class=${r(e ? t.disabledStackingOption : "")} .label=${this._messages.stacked100} .value=${a.Stacked100} .selected=${this.model.getStackedType() === a.Stacked100}><calcite-icon scale=l icon=graph-bar-100-stacked slot=content-start></calcite-icon>${e && n`<calcite-icon class=${r(t.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item></calcite-list>`;
+    return e && this.model.getStackedType() !== a.Side && this.model.setStackedType(a.Side), n`<calcite-list label id=${_.stackedType} class=${r(s.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleBarSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${a.Side} .selected=${this.model.getStackedType() === void 0 || this.model.getStackedType() === a.Side}><calcite-icon scale=l icon=graph-bar-side-by-side slot=content-start></calcite-icon></calcite-list-item><calcite-list-item class=${r(e ? s.disabledStackingOption : "")} .label=${this._messages.stacked} .value=${a.Stacked} .selected=${this.model.getStackedType() === a.Stacked}><calcite-icon scale=l icon=graph-bar-stacked slot=content-start></calcite-icon>${e && n`<calcite-icon class=${r(s.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item><calcite-list-item class=${r(e ? s.disabledStackingOption : "")} .label=${this._messages.stacked100} .value=${a.Stacked100} .selected=${this.model.getStackedType() === a.Stacked100}><calcite-icon scale=l icon=graph-bar-100-stacked slot=content-start></calcite-icon>${e && n`<calcite-icon class=${r(s.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item></calcite-list>`;
   }
   /** @category Private */
   async resetSeriesOriginal() {
@@ -134,8 +133,8 @@ class B extends O {
   }
   /** @category Event handler */
   openSeriesPopOver(e) {
-    const i = e.target, l = i.localName === "calcite-list-item" ? i : i.parentNode, s = !this.configSeriesOpen, o = this.model.getSeriesIndex(l.value);
-    this.configSeriesOpen = this.selectedSeriesIndex === o ? s : !0, this.configSeriesOpen ? this.selectedSeriesIndex = o : this.selectedSeriesIndex = void 0;
+    const i = e.target, l = i.localName === "calcite-list-item" ? i : i.parentNode, t = !this.configSeriesOpen, o = this.model.getSeriesIndex(l.value);
+    this.configSeriesOpen = this.selectedSeriesIndex === o ? t : !0, this.configSeriesOpen ? this.selectedSeriesIndex = o : this.selectedSeriesIndex = void 0;
   }
   /**
    * Creates a tooltip for the hovered action.
@@ -180,7 +179,7 @@ class B extends O {
   //#region Rendering
   /** @category Lifecycle */
   render() {
-    return n`<div class=${r(t.hostDiv)}><div class=${`${t.sectionLabel} ${t.topSection}`}>${this._messages.displayMultiSeries}</div>${this.buildMultipleBarTypeList()}<div class=${r(t.sectionLabel)}>${this._messages.series}<calcite-button @click=${this.resetSeriesOriginal} .disabled=${!this.isResetAvailable} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSeriesList()}</div>`;
+    return n`<div class=${`${s.sectionLabel} ${s.topSection}`}>${this._messages.displayMultiSeries}</div>${this.buildMultipleBarTypeList()}<div class=${r(s.sectionLabel)}>${this._messages.series}<calcite-button @click=${this.resetSeriesOriginal} .disabled=${!this.isResetAvailable} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSeriesList()}`;
   }
 }
 $("arcgis-charts-config-bar-chart-series", B);

package/dist/components/arcgis-charts-config-bar-chart-series/resource.d.ts

@@ -2,7 +2,6 @@ export declare const HTMLIDs: {
     readonly stackedType: "stacked-type";
 };
 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-bar-chart-series-popover/customElement.js

@@ -2,7 +2,7 @@ import { c as p } from "../../chunks/runtime.js";
 import "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { r as c } from "../../chunks/interfaces.js";
+import { R as c } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -15,16 +15,15 @@ import { U as m } from "../../chunks/chart-ui-utils2.js";
 import { u as d } from "../../chunks/useT9n.js";
 import { html as g } from "lit";
 import { createRef as f, ref as C } from "lit-html/directives/ref.js";
-import { LitElement as v, createEvent as o, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as v, createEvent as o, safeClassMap as i } from "@arcgis/lumina";
 import { css as u } 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.102 */
-const i = {
-  hostDiv: "host-div",
+v4.33.0-next.104 */
+const s = {
   jsAppFlyout: "js-app-flyout",
   panelChildrenContainer: "panel-children-container"
-}, b = u`.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-div{overflow-y:auto;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+}, b = u`.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{overflow-y:auto;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
 class x extends v {
   constructor() {
     super(...arguments), this._messages = d(), this.popoverElement = f(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigPopoverOpenChange = o(), this.arcgisChartsConfigSeriesPopoverColorChange = o(), this.arcgisChartsConfigSeriesPopoverNameChange = o();
@@ -89,10 +88,9 @@ class x extends v {
   /** @category Lifecycle */
   render() {
     const e = this.selectedColor;
-    return g`<div class=${s({
-      [i.jsAppFlyout]: !0,
-      [i.hostDiv]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label ${C(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${s(i.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${s(i.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return g`<div class=${i({
+      [s.jsAppFlyout]: !0
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label ${C(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${i(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${i(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 p("arcgis-charts-config-bar-chart-series-popover", x);

package/dist/components/arcgis-charts-config-bar-chart-series-popover/resource.d.ts

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly jsAppFlyout: "js-app-flyout";
     readonly panelChildrenContainer: "panel-children-container";
 };

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

@@ -1,8 +1,8 @@
-import { c as h } from "../../chunks/runtime.js";
+import { c as l } from "../../chunks/runtime.js";
 import "@arcgis/charts-spec";
-import { isEqual as n } from "lodash-es";
+import { isEqual as r } from "lodash-es";
 import "d3-array";
-import { h as d, j as c } from "../../chunks/interfaces.js";
+import { g as n, aX as h } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -10,29 +10,27 @@ import "@arcgis/core/rest/support/Query.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { h as p } from "../../chunks/index.js";
-import { LitElement as f, safeClassMap as s } from "@arcgis/lumina";
-import { html as a } from "lit";
-import { C as r } from "../../chunks/interfaces2.js";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { j as c } from "../../chunks/index.js";
+import { LitElement as d } from "@arcgis/lumina";
+import { html as s } from "lit";
+import { C as a } from "../../chunks/interfaces3.js";
+import { css as p } 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.102 */
-const g = m`.host-div{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`, l = {
-  hostDiv: "host-div"
-};
-class v extends f {
+v4.33.0-next.104 */
+const m = p`: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 d {
   constructor() {
     super(...arguments), this.popoverElement = null, this.onModelConfigChange = async (e) => {
-      const o = e?.detail.config ?? this.model.getConfig();
-      this.layer === void 0 && await this.updateFetchLayerFieldsInfo(o);
+      const i = e?.detail.config ?? this.model.getConfig();
+      this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
     }, this.activeColorMatch = !1, this.popoverPlacement = "leading";
   }
   static {
     this.properties = { layerFieldsInfo: 16, activeColorMatch: 16, model: 0, popoverPlacement: 3, seriesColor: 2, page: 3, calculatedMinMaxBounds: 2, layer: 0, usePopupTemplateFieldsInfo: 5 };
   }
   static {
-    this.styles = g;
+    this.styles = m;
   }
   //#endregion
   //#region Lifecycle
@@ -52,14 +50,14 @@ class v extends f {
   //#endregion
   //#region Private Methods
   /** @category Watch handler */
-  modelChange(e, i) {
-    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, o) {
+    o?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  async layerChange(e, i) {
-    e !== void 0 && !n(i, e) && await this.updateFetchLayerFieldsInfo();
+  async layerChange(e, o) {
+    e !== void 0 && !r(o, e) && await this.updateFetchLayerFieldsInfo();
   }
-  async usePopupTemplateFieldsInfoChange(e, i) {
-    e !== void 0 && e !== i && await this.updateFetchLayerFieldsInfo();
+  async usePopupTemplateFieldsInfoChange(e, o) {
+    e !== void 0 && e !== o && await this.updateFetchLayerFieldsInfo();
   }
   /**
    * Assigns new colors to the series
@@ -68,56 +66,56 @@ class v extends f {
    * @category Watch handler
    */
   seriesColorChange(e) {
-    this.activeColorMatch = e?.get(0) === void 0, this.model.getColorMatch() && e?.forEach((i, o) => {
+    this.activeColorMatch = e?.get(0) === void 0, this.model.getColorMatch() && e?.forEach((o, i) => {
       let t;
-      i && ("fillSymbol" in i ? t = i.fillSymbol?.color : "lineSymbol" in i && (t = i.lineSymbol.color)), e?.get(0) !== void 0 && t !== void 0 && !n(this.model.getSeriesColor(o), t) && this.model.setSeriesColor(t, o);
+      o && ("fillSymbol" in o ? t = o.fillSymbol?.color : "lineSymbol" in o && (t = o.lineSymbol.color)), e?.get(0) !== void 0 && t !== void 0 && !r(this.model.getSeriesColor(i), t) && this.model.setSeriesColor(t, i);
     });
   }
   /** update the data filter `where` clause with the layer definitionExpression if they are different */
   async updateDataFilters() {
-    const e = this.model.getDataFilter(), i = e?.where, o = this.layer?.definitionExpression ?? void 0;
-    n(i, o) || await this.model.setDataFilter({
+    const e = this.model.getDataFilter(), o = e?.where, i = this.layer?.definitionExpression ?? void 0;
+    r(o, i) || await this.model.setDataFilter({
       ...e,
-      where: o ?? void 0
+      where: i ?? void 0
     });
   }
   /** @category Private */
   async updateFetchLayerFieldsInfo(e) {
-    const i = e ?? this.model.getConfig();
-    let o = this.layer;
-    if (!o) {
-      const t = p(i) ? i.iLayer : void 0;
-      t && (o = await d(t));
+    const o = e ?? this.model.getConfig();
+    let i = this.layer;
+    if (!i) {
+      const t = c(o) ? o.iLayer : void 0;
+      t && (i = await n(t));
     }
-    o && (this.layerFieldsInfo = await c(o, this.usePopupTemplateFieldsInfo));
+    i && (this.layerFieldsInfo = await h(i, this.usePopupTemplateFieldsInfo));
   }
   /** @category Event handler */
   popoverOpen(e) {
-    const { open: i = !1, element: o = null } = { ...e.detail };
-    i === !0 && this.popoverElement !== o ? (this.popoverElement !== null && (this.popoverElement.open = !1), this.popoverElement = o) : i === !1 && this.popoverElement === o && (this.popoverElement = null);
+    const { open: o = !1, element: i = null } = { ...e.detail };
+    o === !0 && this.popoverElement !== i ? (this.popoverElement !== null && (this.popoverElement.open = !1), this.popoverElement = i) : o === !1 && this.popoverElement === i && (this.popoverElement = null);
   }
   //#endregion
   //#region Rendering
   render() {
     let e;
     switch (this.page) {
-      case r.Data:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-box-plot-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-box-plot-data></div>`;
+      case a.Data:
+        e = s`<arcgis-charts-config-box-plot-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-box-plot-data>`;
         break;
-      case r.Series:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-box-plot-series .model=${this.model} .activeColorMatch=${this.activeColorMatch} @arcgisChartsConfigBoxPlotSeriesPopoverChange=${this.popoverOpen} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-box-plot-series></div>`;
+      case a.Series:
+        e = s`<arcgis-charts-config-box-plot-series .model=${this.model} .activeColorMatch=${this.activeColorMatch} @arcgisChartsConfigBoxPlotSeriesPopoverChange=${this.popoverOpen} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-box-plot-series>`;
         break;
-      case r.Axes:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-axes .model=${this.model} show-min-y-bound-option show-max-y-bound-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></arcgis-charts-config-axes></div>`;
+      case a.Axes:
+        e = s`<arcgis-charts-config-axes .model=${this.model} show-min-y-bound-option show-max-y-bound-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></arcgis-charts-config-axes>`;
         break;
-      case r.Guides:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-guides .model=${this.model} enable-y-axis-guide @arcgisChartsConfigGuidePopoverChange=${this.popoverOpen}></arcgis-charts-config-guides></div>`;
+      case a.Guides:
+        e = s`<arcgis-charts-config-guides .model=${this.model} enable-y-axis-guide @arcgisChartsConfigGuidePopoverChange=${this.popoverOpen}></arcgis-charts-config-guides>`;
         break;
-      case r.Format:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-format .model=${this.model} @arcgisChartsConfigFormatPopoverChange=${this.popoverOpen}></arcgis-charts-config-format></div>`;
+      case a.Format:
+        e = s`<arcgis-charts-config-format .model=${this.model} @arcgisChartsConfigFormatPopoverChange=${this.popoverOpen}></arcgis-charts-config-format>`;
         break;
-      case r.General:
-        e = a`<div class=${s(l.hostDiv)}><arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general></div>`;
+      case a.General:
+        e = s`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";
@@ -126,7 +124,7 @@ class v extends f {
     return e;
   }
 }
-h("arcgis-charts-config-box-plot", v);
+l("arcgis-charts-config-box-plot", f);
 export {
-  v as ArcGISChartsConfigBoxPlot
+  f as ArcGISChartsConfigBoxPlot
 };

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

@@ -1,3 +0,0 @@
-export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
-};

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

@@ -3,7 +3,7 @@ import { keyed as S } from "lit-html/directives/keyed.js";
 import { WebChartTypes as C } from "@arcgis/charts-spec";
 import { isEqual as h } from "lodash-es";
 import "d3-array";
-import { T as n, aL as v, c as g } from "../../chunks/interfaces.js";
+import { Y as n, c7 as v, c6 as g } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -12,21 +12,20 @@ import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import { r as u, c as y, P } from "../../chunks/popover-ui-utils.js";
-import { Z as p } from "../../chunks/scatter-plot-model.js";
+import { Q as p } from "../../chunks/scatter-plot-model.js";
 import { repeat as x } from "lit-html/directives/repeat.js";
-import { a as l, e as c } from "../../chunks/interfaces2.js";
+import { a as l, e as c } from "../../chunks/interfaces3.js";
 import { d as $, s as F } from "../../chunks/store.js";
 import { U as w } from "../../chunks/chart-ui-utils2.js";
 import { u as I } from "../../chunks/useT9n.js";
 import { nothing as L, html as a } from "lit";
 import { createRef as d, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as B, createEvent as O, safeClassMap as r } from "@arcgis/lumina";
+import { LitElement as B, createEvent as O, safeClassMap as o } 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.102 */
-const o = {
-  hostDiv: "host-div",
+v4.33.0-next.104 */
+const r = {
   label: "label",
   fieldList: "field-list",
   fab: "fab",
@@ -34,7 +33,7 @@ const o = {
   rtl: "arcgis-charts-rtl",
   list: "list",
   customSortButtons: "custom-sort-buttons"
-}, E = k`.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-div{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: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}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.field-list{max-height:50vh;overflow-y:auto}.disabled-label{pointer-events:none}.fab{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:1.5rem;justify-content:center}.host-div.arcgis-chart-rtl .text{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}.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)}.custom-sort-buttons{display:flex;justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}`;
+}, E = k`.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)}:host .arcgis-chart-rtl .text{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}.label,.disabled-label{display:flex;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}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.field-list{max-height:50vh;overflow-y:auto}.disabled-label{pointer-events:none}.fab{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:1.5rem;justify-content:center}.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)}.custom-sort-buttons{display:flex;justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}`;
 class D extends B {
   constructor() {
     super(...arguments), this._messages = I(), this.boxPlotPopover = null, this.categoryElement = d(), this.numericFieldsElement = d(), this.splitByFieldElement = d(), this.sortOrderElement = d(), this.originalCustomSortLabels = [], this.isCustomSortDisabled = !1, this.onModelConfigChange = () => {
@@ -132,7 +131,7 @@ class D extends B {
   }
   /** @category Render UX */
   buildCustomSortList() {
-    return a`<calcite-list label class=${r(o.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildCustomSortListItems()}</calcite-list>`;
+    return a`<calcite-list label class=${o(r.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildCustomSortListItems()}</calcite-list>`;
   }
   /**
    * Note: using a calcite-action rather than the `closable={true}` property given
@@ -263,14 +262,14 @@ class D extends B {
   //#region Rendering
   renderCustomSortUI() {
     const t = this.model.getSortOrder(), e = this.model.getXAxisValueFormat()?.type, s = this.customSortLabels.indexOf(this.selectedCustomSortItemId);
-    return e === C.CategoryAxisFormat && t === p.customSort && !this.isCustomSortDisabled ? a`<calcite-label class=${r(o.label)}><div class=${r(o.customSortButtons)}><div><calcite-button appearance=transparent .disabled=${s === 0 || s === -1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-up id=${c.Up} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button><calcite-button appearance=transparent .disabled=${s === -1 || s === this.customSortLabels.length - 1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-down id=${c.Down} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button></div><calcite-button @click=${this.resetToOriginalCustomSortLabels} .disabled=${h(this.customSortLabels, this.originalCustomSortLabels)} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.model.getCategory() === n ? this._messages.values : this._messages.category}${this.buildCustomSortList()}</calcite-label>` : null;
+    return e === C.CategoryAxisFormat && t === p.customSort && !this.isCustomSortDisabled ? a`<calcite-label class=${o(r.label)}><div class=${o(r.customSortButtons)}><div><calcite-button appearance=transparent .disabled=${s === 0 || s === -1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-up id=${c.Up} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button><calcite-button appearance=transparent .disabled=${s === -1 || s === this.customSortLabels.length - 1 || this.selectedCustomSortItemId.trim() === ""} icon-start=arrow-bold-down id=${c.Down} kind=neutral scale=s @click=${this.onCustomSortItemMoved}></calcite-button></div><calcite-button @click=${this.resetToOriginalCustomSortLabels} .disabled=${h(this.customSortLabels, this.originalCustomSortLabels)} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.model.getCategory() === n ? this._messages.values : this._messages.category}${this.buildCustomSortList()}</calcite-label>` : null;
   }
   /** @category Render UX */
   renderNumericFields(t) {
     const e = [];
     for (const s of t)
       e.push(this.buildNumericFieldItem(s));
-    return a`<calcite-list label class=${r(o.fieldList)} ${m(this.numericFieldsElement)}>${e}</calcite-list>`;
+    return a`<calcite-list label class=${o(r.fieldList)} ${m(this.numericFieldsElement)}>${e}</calcite-list>`;
   }
   /** @category Render UX */
   renderCategory() {
@@ -289,7 +288,7 @@ class D extends B {
   /** @category Lifecycle */
   render() {
     const t = this.renderCategory(), e = this.renderNumericFields([...this.model.getNumericFields() ?? []]), s = this.renderSplitBy(), i = this.renderSorting(), b = this.renderCustomSortUI();
-    return a`<div class=${r({ [o.rtl]: this.direction === "rtl", [o.hostDiv]: !0 })}><calcite-label class=${r(o.label)}>${this._messages.numericFields}${e}</calcite-label><div class=${r(o.fab)}><calcite-fab appearance=outline-fill kind=neutral scale=m .label=${this._messages.selectNumericFields} text-enabled .text=${this._messages.selectNumericFields} icon=plus @click=${this.onAddNumericFields}></calcite-fab></div><calcite-label class=${r(o.label)}><div>${this._messages.category} <span class=${r(o.dimText)}>(${this._messages.optional})</span></div>${t}</calcite-label><calcite-label class=${r(o.label)}><div class=${r(this.disableSplitBy ? o.dimText : "")}>${this._messages.splitBy} <span class=${r(o.dimText)}>(${this._messages.optional})</span></div>${s}</calcite-label><div>${(this.model.getNumericFields() ?? []).length > 1 ? a`<calcite-label class=${r(o.label)} layout=inline-space-between>${this._messages.standardizeValues}<calcite-switch .checked=${this.model.getStandardizeValues()} @calciteSwitchChange=${this.onStandardizeValuesChange}></calcite-switch></calcite-label>` : null}</div><calcite-label class=${r(o.label)} layout=inline-space-between>${this._messages.showOutliers}<calcite-switch .checked=${this.model.getShowOutliers()} @calciteSwitchChange=${this.onShowOutliersChange}></calcite-switch></calcite-label><calcite-label class=${r(o.label)}>${this._messages.sortOrder}${i}</calcite-label>${b}</div>`;
+    return a`<div class=${o({ [r.rtl]: this.direction === "rtl" })}><calcite-label class=${o(r.label)}>${this._messages.numericFields}${e}</calcite-label><div class=${o(r.fab)}><calcite-fab appearance=outline-fill kind=neutral scale=m .label=${this._messages.selectNumericFields} text-enabled .text=${this._messages.selectNumericFields} icon=plus @click=${this.onAddNumericFields}></calcite-fab></div><calcite-label class=${o(r.label)}><div>${this._messages.category} <span class=${o(r.dimText)}>(${this._messages.optional})</span></div>${t}</calcite-label><calcite-label class=${o(r.label)}><div class=${o(this.disableSplitBy ? r.dimText : "")}>${this._messages.splitBy} <span class=${o(r.dimText)}>(${this._messages.optional})</span></div>${s}</calcite-label><div>${(this.model.getNumericFields() ?? []).length > 1 ? a`<calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.standardizeValues}<calcite-switch .checked=${this.model.getStandardizeValues()} @calciteSwitchChange=${this.onStandardizeValuesChange}></calcite-switch></calcite-label>` : null}</div><calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.showOutliers}<calcite-switch .checked=${this.model.getShowOutliers()} @calciteSwitchChange=${this.onShowOutliersChange}></calcite-switch></calcite-label><calcite-label class=${o(r.label)}>${this._messages.sortOrder}${i}</calcite-label>${b}</div>`;
   }
 }
 f("arcgis-charts-config-box-plot-data", D);

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

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly label: "label";
     readonly text: "text";
     readonly fieldList: "field-list";

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

@@ -4,7 +4,7 @@ import { repeat as v } from "lit-html/directives/repeat.js";
 import { RESTFieldType as u } from "@arcgis/charts-spec";
 import { isEqual as y } from "lodash-es";
 import "d3-array";
-import { c as $, n as g, i as L, a3 as F, f as P } from "../../chunks/interfaces.js";
+import { c6 as $, b0 as g, a_ as L, bO as F, bN as P } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -13,8 +13,8 @@ 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 { Z as l } from "../../chunks/scatter-plot-model.js";
-import { a as n } from "../../chunks/interfaces2.js";
+import { Q as l } from "../../chunks/scatter-plot-model.js";
+import { a as n } from "../../chunks/interfaces3.js";
 import { U as h, e as I, i as f, c as w, d as D } from "../../chunks/chart-ui-utils2.js";
 import { u as T } from "../../chunks/useT9n.js";
 import { html as r } from "lit";
@@ -23,7 +23,7 @@ import { LitElement as S, createEvent as C, safeClassMap as d } from "@arcgis/lu
 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.102 */
+v4.33.0-next.104 */
 const o = {
   jsAppFlyout: "js-app-flyout",
   name: "bar-chart-data-popover",
@@ -36,7 +36,7 @@ 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 N extends S {
   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();
   }
@@ -270,7 +270,7 @@ class A extends S {
     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>`;
   }
 }
-k("arcgis-charts-config-box-plot-popover", A);
+k("arcgis-charts-config-box-plot-popover", N);
 export {
-  A as ArcgisChartsConfigBoxPlotPopover
+  N as ArcgisChartsConfigBoxPlotPopover
 };

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

@@ -1,9 +1,9 @@
 import { c as I } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
+import { html as l } from "lit-html";
 import { WebChartBoxPlotMultipleSeriesKinds as h } from "@arcgis/charts-spec";
 import { isNil as $ } from "lodash-es";
 import "d3-array";
-import { C as g } from "../../chunks/interfaces.js";
+import { cp as g } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
@@ -11,22 +11,21 @@ import "@arcgis/core/rest/support/Query.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { r as v, c as M, P as y } from "../../chunks/popover-ui-utils.js";
+import { r as S, c as M, P as y } from "../../chunks/popover-ui-utils.js";
 import { repeat as B } from "lit-html/directives/repeat.js";
 import { c as O, d as w } from "../../chunks/chart-ui-utils2.js";
 import { u as T } from "../../chunks/useT9n.js";
-import { LitElement as N, createEvent as C, safeStyleMap as S, safeClassMap as l } from "@arcgis/lumina";
+import { LitElement as N, createEvent as C, safeStyleMap as v, safeClassMap as a } from "@arcgis/lumina";
 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.102 */
+v4.33.0-next.104 */
 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}`;
+}, E = _`: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 N {
   constructor() {
     super(...arguments), this._messages = T(), this.resetSeriesOriginal = () => {
@@ -64,7 +63,7 @@ class W extends N {
         i !== -1 && (s = r >= i ? r + 1 : r, o = t >= i ? t + 1 : t), this.model.moveSeries(s, o);
       }
     }, this.seriesPopoverClose = () => {
-      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = v(this.seriesPopover);
+      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = S(this.seriesPopover);
     }, this.seriesPopoverChange = (e) => {
       this.arcgisChartsConfigBoxPlotSeriesPopoverChange.emit({
         open: e,
@@ -125,7 +124,7 @@ class W extends N {
   }
   /** @category Private */
   removeSeriesPopover() {
-    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = v(this.seriesPopover)), this.seriesPopoverChange(!1);
+    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = S(this.seriesPopover)), this.seriesPopoverChange(!1);
   }
   /** @category Render UX */
   buildSeriesListItems() {
@@ -138,12 +137,12 @@ class W extends N {
         const [P, L, x, b] = [...c];
         m = `rgba(${P},${L},${x},${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=${S({ 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 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() {
@@ -181,20 +180,20 @@ 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=${S({ 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);

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";