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

package/dist/components/arcgis-charts-config-line-chart-series/customElement.d.ts

@@ -2,11 +2,11 @@
 import { LineChartModel } from '../../model';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';
-import { PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { ArcgisChartsConfigLineChartSeriesPopover } from '../arcgis-charts-config-line-chart-series-popover/customElement.js';
 
 /** @private */
-export declare class ArcGISChartsConfigLineChartSeries extends LitElement {
+export declare class ArcgisChartsConfigLineChartSeries extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
     /**
@@ -19,18 +19,21 @@ export declare class ArcGISChartsConfigLineChartSeries 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"];
     /**
@@ -48,6 +51,5 @@ export declare class ArcGISChartsConfigLineChartSeries extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
-    /** @category Private */
     private _messages;
 }

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

@@ -1,18 +1,30 @@
 import { c as f } from "../../chunks/runtime.js";
-import { removePopover as u, ChartSubType as P, createPopover as L, PopoverType as I } from "@arcgis/charts-shared-utils";
-import { LitElement as y, createEvent as h, safeStyleMap as b } from "@arcgis/lumina";
-import { html as r } from "lit";
-import { repeat as x } from "lit-html/directives/repeat.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { h as $ } from "../../chunks/chart-ui-utils.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
+import { keyed as u } from "lit-html/directives/keyed.js";
+import "@arcgis/charts-spec";
+import "lodash-es";
+import "d3-array";
+import { cs 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 { r as L, c as I, P as y } from "../../chunks/popover-ui-utils.js";
+import { LitElement as x, createEvent as h, safeStyleMap as b } from "@arcgis/lumina";
+import { html as o } from "lit";
+import { repeat as O } from "lit-html/directives/repeat.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { g as M } from "../../chunks/chart-ui-utils2.js";
+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 */
-const N = M`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}`;
-class k extends y {
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.1 */
+const N = 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)}`;
+class T extends x {
   constructor() {
-    super(...arguments), this._messages = O(), this.seriesPopover = null, this.seriesNameChange = (e) => {
+    super(...arguments), this._messages = $(), this.seriesPopover = null, this.seriesNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
         const s = e.detail?.name;
         this.model.setSeriesName(s, this.selectedSeriesIndex ?? -1);
@@ -38,85 +50,67 @@ class k extends y {
       this.requestUpdate();
     }, this.openChange = (e) => {
       this.arcgisChartsConfigPopoverOpenChange.emit(e.detail);
-    }, this.isResetAvailable = !1, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigLineChartSeriesPopoverChange = h(), this.arcgisChartsConfigPopoverOpenChange = h();
+    }, this.seriesOrderResetCounter = 0, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigLineChartSeriesPopoverChange = h(), this.arcgisChartsConfigPopoverOpenChange = h();
   }
   static {
-    this.properties = { selectedSeriesIndex: 16, isResetAvailable: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
+    this.properties = { selectedSeriesIndex: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
   }
   static {
     this.styles = N;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
   }
-  /** @category Lifecycle */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
-  async willUpdate(e) {
-    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange(), this.isResetAvailable = await this.model.resetAvailable();
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange();
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, s) {
     s?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /** @category Watch handler */
   selectedSeriesIndexChange() {
     this.selectedSeriesIndex !== void 0 && this.configSeriesOpen ? (this.setupSeriesPopover(), this.seriesPopover !== null && (this.seriesPopover.selectedName = this.model.getSeriesName(this.selectedSeriesIndex), this.seriesPopover.selectedColor = this.model.getSeriesColor(this.selectedSeriesIndex), 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 Private */
   removeSeriesPopover() {
-    this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = u(this.seriesPopover)), this.seriesPopoverChange(!1);
+    this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = L(this.seriesPopover)), this.seriesPopoverChange(!1);
   }
-  /** @category Render UX */
   buildSeriesListItems() {
     const e = this.model.getSeriesLength(), s = Array.from({ length: e }, (i, t) => t);
-    return x(s, (i) => this.model.getSeriesId(i), (i) => {
-      const t = this.model.getSeriesId(i), n = this.model.getSeriesColor(i), d = this.model.getSeriesName(i), c = this.model.getChartSubType() === P.BarAndLineFromFields ? this._messages.series : t, p = this.model.getSeriesLineStyle(i), g = $(p);
+    return O(s, (i) => this.model.getSeriesId(i), (i) => {
+      const t = this.model.getSeriesId(i), n = this.model.getSeriesColor(i), d = this.model.getSeriesName(i), c = this.model.getChartSubType() === P.BarAndLineFromFields ? this._messages.series : t, p = this.model.getSeriesLineStyle(i), m = M(p);
       let l = "#CCCCCC", a = "minus-circle";
       if ((e > 1 || !this.activeColorMatch) && n !== void 0) {
-        a = `line-${g}`;
-        const [m, C, S, v] = [...n];
-        l = `rgba(${m},${C},${S},${v / 255})`;
+        a = `line-${m}`;
+        const [g, C, S, v] = [...n];
+        l = `rgba(${g},${C},${S},${v / 255})`;
       }
-      return r`<calcite-list-item .label=${d ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === i} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${b({ color: l })}></calcite-icon></calcite-list-item>`;
+      return o`<calcite-list-item .label=${d ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === i} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${b({ color: l })}></calcite-icon></calcite-list-item>`;
     });
   }
-  /** @category Render UX */
   buildSeriesList() {
-    return r`<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`;
+    return u(this.seriesOrderResetCounter, o`<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
   }
-  /** @category Private */
   async resetSeriesOriginal() {
-    this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, await this.model.resetSeriesStyling();
+    this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
   }
-  /** @category Event handler */
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
-      const { newIndex: s, oldIndex: o } = e.detail;
-      this.model.moveSeries(o, s);
+      const { newIndex: s, oldIndex: r } = e.detail;
+      this.model.moveSeries(r, s), this.seriesOrderResetCounter += 1;
     }
   }
-  /** @category Event handler */
   seriesPopoverChange(e) {
     this.arcgisChartsConfigLineChartSeriesPopoverChange.emit({
       open: e,
       element: this.seriesPopover
     });
   }
-  /** @category Event handler */
   openSeriesPopOver(e) {
-    const s = e.target, o = s.localName === "calcite-list-item" ? s : s.parentNode, i = !this.configSeriesOpen, t = this.model.getSeriesIndex(o.value);
+    const s = e.target, r = s.localName === "calcite-list-item" ? s : s.parentNode, i = !this.configSeriesOpen, t = this.model.getSeriesIndex(r.value);
     this.configSeriesOpen = this.selectedSeriesIndex === t ? i : !0, this.configSeriesOpen ? this.selectedSeriesIndex = t : this.selectedSeriesIndex = void 0;
   }
-  /** @category Private */
   setupSeriesPopover() {
     if (this.seriesPopover === null && this.el !== void 0) {
       const e = {
@@ -129,21 +123,17 @@ class k extends y {
         openChange: this.openChange,
         popoverClose: this.seriesPopoverClose
       };
-      this.seriesPopover = L(I.LineChartSeriesPopover, e);
+      this.seriesPopover = I(y.LineChartSeriesPopover, e);
     }
   }
-  /** @category Private */
   addSeriesPopover() {
     this.seriesPopover != null && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover), this.seriesPopoverChange(!0);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
-    return r`<calcite-panel .heading=${this._messages.series}><calcite-button slot=header-actions-end @click=${this.resetSeriesOriginal} .disabled=${!this.isResetAvailable} appearance=transparent scale=s icon-end=reset>${this._messages.reset}</calcite-button>${this.buildSeriesList()}</calcite-panel>`;
+    return o`<calcite-panel .heading=${this._messages.series}><calcite-button slot=header-actions-end @click=${this.resetSeriesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent scale=s icon-end=reset>${this._messages.reset}</calcite-button>${this.buildSeriesList()}</calcite-panel>`;
   }
 }
-f("arcgis-charts-config-line-chart-series", k);
+f("arcgis-charts-config-line-chart-series", T);
 export {
-  k as ArcGISChartsConfigLineChartSeries
+  T as ArcgisChartsConfigLineChartSeries
 };

package/dist/components/arcgis-charts-config-line-chart-series-popover/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { Color, RESTSimpleLineSymbolStyle } 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';
 
@@ -48,6 +48,7 @@ export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement
      * open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
@@ -61,7 +62,7 @@ export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement
      *
      * @category Public
      */
-    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, undefined>;
+    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, void>;
     /**
      * Event emitted when the popover is closed.
      *
@@ -100,6 +101,5 @@ export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement
     readonly arcgisChartsConfigSeriesPopoverNameChange: TargetedEvent<this, {
         name: string;
     }>;
-    /** @category Private */
     private _messages;
 }

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

@@ -1,22 +1,31 @@
 import { c as u } from "../../chunks/runtime.js";
-import { editPopover as f, reducedOpacity as C } from "@arcgis/charts-shared-utils";
 import { RESTSimpleLineSymbolStyle as i } from "@arcgis/charts-spec";
-import { U as v, a as y, m, s as b, b as g } from "../../chunks/chart-ui-utils.js";
+import "lodash-es";
+import "d3-array";
+import { P as f } 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 C } from "../../chunks/popover-ui-utils.js";
+import { U as v, b as y, m, s as b, c as g } from "../../chunks/chart-ui-utils2.js";
 import { u as S } from "../../chunks/useT9n.js";
 import { nothing as a, html as w } from "lit";
-import { createRef as l, ref as c } from "lit-html/directives/ref.js";
+import { createRef as l, ref as r } from "lit-html/directives/ref.js";
 import { LitElement as $, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
 import { css as x } 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 */
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.1 */
 const n = {
-  hostDiv: "host-div",
   jsAppFlyout: "js-app-flyout",
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   panelChildrenContainer: "panel-children-container"
-}, E = x`.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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}.host-div calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}.host-div calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+}, E = x`.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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.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 I extends $ {
   constructor() {
     super(...arguments), this._messages = S(), this.popoverElement = l(), this.lineWidthInputElement = l(), this.lineStyleDropdownElement = l(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigPopoverOpenChange = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
@@ -27,62 +36,38 @@ class I extends $ {
   static {
     this.styles = E;
   }
-  //#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("open") && (this.hasUpdated || !this.open) && this.openChange();
   }
-  /** @category Lifecycle */
-  /** @category Lifecycle */
   updated() {
-    f(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    C(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, v.PopoverTimer);
   }
-  /** @category Lifecycle */
   loaded() {
     this.openChange();
   }
-  //#endregion
-  //#region Private Methods
-  /**
-   * Watch on open popover.
-   *
-   * @category Private
-   */
   openChange() {
     this.arcgisChartsConfigPopoverOpenChange.emit({ open: this.open });
   }
-  /** @category Event handler */
   seriesNameChange(e) {
     const t = e.target.value;
     this.selectedName !== t && (this.selectedName = t, this.arcgisChartsConfigSeriesPopoverNameChange.emit({ name: t }));
   }
-  /** @category Event handler */
   closePopover() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /** @category Event handler */
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [r, d, h] = t, p = C * 255;
-    this.selectedColor = [r, d, h, p], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [r, d, h, p] });
+    const t = e instanceof CustomEvent ? e.detail : e, [c, p, d] = t, h = f * 255;
+    this.selectedColor = [c, p, d, h], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [c, p, d, h] });
   }
-  /** @category Event handler */
   lineStyleChange() {
     const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
     this.selectedLineStyle = e, this.arcgisChartsConfigSeriesPopoverLineStyleChange.emit({ lineStyle: e });
   }
-  /** @category Event handler */
   lineWidthChange() {
     const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
     this.lineWidthInputElement.value?.value !== void 0 && y(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
@@ -93,7 +78,6 @@ class I extends $ {
       status: g.INVALID
     });
   }
-  /** @category Private */
   getSelectedLineStyleInfo() {
     let e, t;
     switch (this.selectedLineStyle) {
@@ -110,12 +94,9 @@ class I extends $ {
     }
     return { icon: e, style: t };
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const e = this.selectedColor;
-    return w`<div class=${o({ [n.jsAppFlyout]: !0, [n.hostDiv]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${c(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${o(n.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${o(n.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${c(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${o(n.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? a}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? a}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? a}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${b(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${c(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${o(n.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return w`<div class=${o({ [n.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${r(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${o(n.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${o(n.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${r(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${o(n.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? a}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? a}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? a}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${b(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${r(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${o(n.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 u("arcgis-charts-config-line-chart-series-popover", I);

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

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly jsAppFlyout: "js-app-flyout";
     readonly sizeSection: "size-section";
     readonly dropdownText: "dropdown-text";

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

@@ -22,31 +22,24 @@ export declare class ArcgisChartsConfigLineStyle extends LitElement {
      * boolean to open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
      * boolean to enable the close the panel.
      *
      * @category Public
+     * @default false
      */
     enableClose?: boolean;
     /**
      * boolean to enable wrapping the content in a panel.
      *
      * @category Public
+     * @default false
      */
     usePanel?: boolean;
     readonly arcgisChartsConfigLineStyleChange: TargetedEvent<this, ISimpleLineSymbol>;
-    readonly arcgisChartsConfigLineStyleClose: TargetedEvent<this, undefined>;
-    /**
-     * Event when there is a change in line style.
-     * @event
-     */
-    /**
-     * Event when line style is closed.
-     *
-     * @event
-     */
-    /** @category Private */
+    readonly arcgisChartsConfigLineStyleClose: TargetedEvent<this, void>;
     private _messages;
 }

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

@@ -1,14 +1,14 @@
 import { c as p } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
 import { RESTSymbolType as m, RESTSimpleLineSymbolStyle as t } from "@arcgis/charts-spec";
-import { a as u, m as a, s as g, b as c } from "../../chunks/chart-ui-utils.js";
+import { b as u, m as a, s as g, c } from "../../chunks/chart-ui-utils2.js";
 import { u as y } from "../../chunks/useT9n.js";
 import { createRef as r, ref as d } from "lit-html/directives/ref.js";
 import { LitElement as f, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
 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.99 */
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.1 */
 const o = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
@@ -26,22 +26,16 @@ class b extends f {
   static {
     this.styles = w;
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Event handler */
   closePanel(e) {
     e.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigLineStyleClose.emit());
   }
-  /** @category Event handler */
   colorChange(e) {
     this.lineStyle.color = e.detail, this.emitLineStyleEvent();
   }
-  /** @category Event handler */
   lineStyleChange() {
     const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
     this.lineStyle.style !== e && (this.lineStyle.style = e, this.lineStyle = { ...this.lineStyle }, this.emitLineStyleEvent());
   }
-  /** @category Event handler */
   selectedLineStyle() {
     let e, i;
     switch (this.lineStyle?.style) {
@@ -58,7 +52,6 @@ class b extends f {
     }
     return { icon: e, style: i };
   }
-  /** @category Event handler */
   widthChange() {
     const e = this.lineWidthInputElement.value?.value;
     e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && a({
@@ -69,13 +62,9 @@ class b extends f {
       status: c.INVALID
     });
   }
-  /** @category Private */
   emitLineStyleEvent() {
     Number.isNaN(Number.parseInt(this.lineStyle?.color?.[0]?.toString() ?? "")) && (this.lineStyle.color = void 0), this.arcgisChartsConfigLineStyleChange.emit(this.lineStyle);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const e = [
       l`<div class=${s(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(o.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${g(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,

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

@@ -12,6 +12,5 @@ export declare class ArcgisChartsConfigNumberFormat extends LitElement {
      */
     numberFormat?: Intl.NumberFormatOptions;
     readonly arcgisChartsConfigNumberFormatChange: TargetedEvent<this, Intl.NumberFormatOptions>;
-    /** @category Private */
     private _messages;
 }

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

@@ -1,21 +1,20 @@
 import { c as l } from "../../chunks/runtime.js";
 import { html as u } from "lit-html";
-import { a as h, m as r, s as d, b as o } from "../../chunks/chart-ui-utils.js";
+import { b as h, m as r, s as d, c } from "../../chunks/chart-ui-utils2.js";
 import { u as p } from "../../chunks/useT9n.js";
 import { createRef as g, ref as b } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as v, safeClassMap as i } from "@arcgis/lumina";
+import { LitElement as f, createEvent as v, safeClassMap as a } from "@arcgis/lumina";
 import { css as x } 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 */
-const a = {
-  hostDiv: "host-div",
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.1 */
+const i = {
   container: "container",
   label: "label",
   numberInput: "number-input",
   rtl: "arcgis-charts-rtl"
-}, w = x`.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)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.host-div{display:flex;flex-direction:row}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
-class F extends f {
+}, F = x`.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)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
+class w extends f {
   constructor() {
     super(...arguments), this._messages = p(), this.decimalPlacesInputElement = g(), this.arcgisChartsConfigNumberFormatChange = v();
   }
@@ -23,54 +22,43 @@ class F extends f {
     this.properties = { messageOverrides: 0, numberFormat: 0 };
   }
   static {
-    this.styles = w;
+    this.styles = F;
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Event handler */
   onDecimalPlacesChange() {
     const t = this.decimalPlacesInputElement.value?.value, s = Math.floor(Number(t)), n = s === Number(t) && s >= 0;
     if (t !== void 0 && n && h(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
-      const c = Number.parseInt(t), e = {
+      const m = Number.parseInt(t), e = {
         minimumFractionDigits: this.numberFormat?.minimumFractionDigits,
-        maximumFractionDigits: c
+        maximumFractionDigits: m
       };
       e.maximumFractionDigits !== void 0 && e.minimumFractionDigits !== void 0 && e.minimumFractionDigits > e.maximumFractionDigits && (e.minimumFractionDigits = e.maximumFractionDigits);
-      const m = this.getUpdatedNumberFormat(e);
-      this.arcgisChartsConfigNumberFormatChange.emit(m), this.decimalPlacesInputElement.value && r({
+      const o = this.getUpdatedNumberFormat(e);
+      this.arcgisChartsConfigNumberFormatChange.emit(o), this.decimalPlacesInputElement.value && r({
         inputElement: this.decimalPlacesInputElement.value,
-        status: o.IDLE
+        status: c.IDLE
       });
     } else this.decimalPlacesInputElement.value && r({
       inputElement: this.decimalPlacesInputElement.value,
-      status: o.INVALID
+      status: c.INVALID
     });
   }
-  /** @category Event handler */
   onShowThousandsSeparatorChange(t) {
     const s = t.target.checked, n = this.getUpdatedNumberFormat({
       useGrouping: s
     });
     this.arcgisChartsConfigNumberFormatChange.emit(n);
   }
-  /**
-   * @param prop
-   * @category Private
-   */
   getUpdatedNumberFormat(t) {
     return {
       ...this.numberFormat,
       ...t
     };
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
-    return u`<div class=${i({ [a.hostDiv]: !0, [a.rtl]: this.direction === "rtl" })}><div class=${i(a.container)}><calcite-label class=${i(a.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${i(a.numberInput)} min=0 max=20 step=1 .value=${d(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${b(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${i(a.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div></div>`;
+    return u`<div class=${a({ [i.rtl]: this.direction === "rtl" })}><div class=${a(i.container)}><calcite-label class=${a(i.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${a(i.numberInput)} min=0 max=20 step=1 .value=${d(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${b(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${a(i.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div></div>`;
   }
 }
-l("arcgis-charts-config-number-format", F);
+l("arcgis-charts-config-number-format", w);
 export {
-  F as ArcgisChartsConfigNumberFormat
+  w as ArcgisChartsConfigNumberFormat
 };

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

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly container: "container";
     readonly label: "label";
     readonly numberInput: "number-input";