@arcgis/charts-components 5.0.0-next.13 → 5.0.0-next.131

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

@@ -7,23 +7,17 @@ import { PropertyValues } from 'lit';
 export declare class ArcgisChartsConfigLineChartSeries extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * Line Chart Model.
-     *
-     * @category Public
-     */
+    /** Line Chart Model. */
     model: LineChartModel;
     /**
      * Whether the chart is actively using color match at the moment.
      *
-     * @category Private
      * @default false
      */
     activeColorMatch: boolean;
     /**
-     * place the popover in this placement.
+     * Place the popover in this placement.
      *
-     * @category Public
      * @default "leading"
      */
     popoverPlacement: HTMLCalcitePopoverElement["placement"];

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

@@ -2,16 +2,25 @@ import { c as f } from "../../chunks/runtime.js";
 import { keyed as u } from "lit/directives/keyed.js";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
-import "../../chunks/series-types.js";
 import "d3-array";
-import { cz as I } from "../../chunks/interfaces.js";
+import "../../chunks/series-types.js";
+import { df as I } from "../../chunks/index.js";
+import "@arcgis/core/Graphic.js";
+import "@arcgis/core/renderers/support/jsonUtils.js";
+import "@arcgis/core/symbols/support/symbolUtils.js";
+import "@arcgis/core/intl.js";
+import "@arcgis/core/layers/support/FeatureFilter.js";
+import "@arcgis/core/smartMapping/statistics/histogram.js";
+import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@arcgis/core/request.js";
+import "@arcgis/core/AttributeBinsGraphic.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 "@arcgis/toolkit/dom";
 import { r as d } from "../../chunks/popover-ui-utils.js";
 import { LitElement as $, renderElement as L, safeStyleMap as x } from "@arcgis/lumina";
@@ -21,33 +30,33 @@ import { u as b } from "../../chunks/useT9n.js";
 import { g as M } from "../../chunks/chart-ui-utils2.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.13 */
+v5.0.0-next.131 */
 const O = P`: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 $ {
   constructor() {
     super(...arguments), this._messages = b(), this.seriesPopover = null, this.open = !1, this.seriesNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
-        const s = e.detail?.name;
-        this.model.setSeriesName(s, this.selectedSeriesIndex ?? -1);
+        const i = e.detail?.name;
+        this.model.setSeriesName(i, this.selectedSeriesIndex ?? -1);
       }
     }, this.seriesColorChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { color: s } = e.detail;
-        this.model.colorMatch = !1, s !== void 0 && (this.model.setSeriesColor(s, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerColor(s, this.selectedSeriesIndex ?? -1));
+        const { color: i } = e.detail;
+        this.model.colorMatch = !1, i !== void 0 && (this.model.setSeriesColor(i, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerColor(i, this.selectedSeriesIndex ?? -1));
       }
     }, this.seriesLineStyleChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { lineStyle: s } = e.detail;
-        s !== void 0 && this.model.setSeriesLineStyle(s, this.selectedSeriesIndex ?? -1);
+        const { lineStyle: i } = e.detail;
+        i !== void 0 && this.model.setSeriesLineStyle(i, this.selectedSeriesIndex ?? -1);
       }
     }, this.seriesLineWidthChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { lineWidth: s } = e.detail;
-        s !== void 0 && (this.model.setSeriesLineWidth(s, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerSize(s * 2, this.selectedSeriesIndex ?? -1));
+        const { lineWidth: i } = e.detail;
+        i !== void 0 && (this.model.setSeriesLineWidth(i, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerSize(i * 2, this.selectedSeriesIndex ?? -1));
       }
     }, this.seriesPopoverClose = (e) => {
-      const { selectedSeriesIndex: s } = e.detail;
-      this.selectedSeriesIndex === s && (this.seriesPopover = d(this.seriesPopover), this.selectedSeriesIndex = void 0);
+      const { selectedSeriesIndex: i } = e.detail;
+      this.selectedSeriesIndex === i && (this.seriesPopover = d(this.seriesPopover), this.selectedSeriesIndex = void 0);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.seriesOrderResetCounter = 0, this.activeColorMatch = !1, this.popoverPlacement = "leading";
@@ -67,8 +76,8 @@ class k extends $ {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  modelChange(e, s) {
-    s?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, i) {
+    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSeriesIndexChange() {
     this.selectedSeriesIndex !== void 0 && (this.seriesPopover = L(o`<arcgis-charts-config-line-chart-series-popover .referenceElement=${this.el} .selectedName=${this.model.getSeriesName(this.selectedSeriesIndex)} .selectedColor=${this.model.getSeriesColor(this.selectedSeriesIndex)} .selectedLineStyle=${this.model.getSeriesLineStyle(this.selectedSeriesIndex)} .selectedLineWidth=${this.model.getSeriesLineWidth(this.selectedSeriesIndex)} .placement=${this.popoverPlacement} .open=${this.open} .selectedSeriesIndex=${this.selectedSeriesIndex} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigSeriesPopoverLineStyleChange=${this.seriesLineStyleChange} @arcgisChartsConfigSeriesPopoverLineWidthChange=${this.seriesLineWidthChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-line-chart-series-popover>`), this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover));
@@ -77,34 +86,34 @@ class k extends $ {
     this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = d(this.seriesPopover));
   }
   buildSeriesListItems() {
-    const e = this.model.seriesLength, s = Array.from({ length: e }, (i, t) => t);
-    return y(s, (i) => this.model.getSeriesId(i), (i) => {
-      const t = this.model.getSeriesId(i), l = this.model.getSeriesColor(i), h = this.model.getSeriesName(i), c = this.model.chartSubType === I.BarAndLineFromFields ? this._messages.series : t, m = this.model.getSeriesLineStyle(i), g = M(m);
+    const e = this.model.seriesLength, i = Array.from({ length: e }, (s, t) => t);
+    return y(i, (s) => this.model.getSeriesId(s), (s) => {
+      const t = this.model.getSeriesId(s), l = this.model.getSeriesColor(s), h = this.model.getSeriesName(s), c = this.model.chartSubType === I.BarAndLineFromFields ? this._messages.series : t, m = this.model.getSeriesLineStyle(s), p = M(m);
       let n = "#CCCCCC", a = "minus-circle";
       if ((e > 1 || !this.activeColorMatch) && l !== void 0) {
-        a = `line-${g}`;
-        const [p, C, S, v] = [...l];
-        n = `rgba(${p},${C},${S},${v / 255})`;
+        a = `line-${p}`;
+        const [g, C, S, v] = [...l];
+        n = `rgba(${g},${C},${S},${v / 255})`;
       }
-      return o`<calcite-list-item .label=${h ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === i} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${x({ color: n })}></calcite-icon></calcite-list-item>`;
+      return o`<calcite-list-item .label=${h ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${x({ color: n })}></calcite-icon></calcite-list-item>`;
     });
   }
   buildSeriesList() {
     return u(this.seriesOrderResetCounter, o`<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
   }
-  async resetSeriesOriginal() {
+  resetSeriesOriginal() {
     this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
   }
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
-      const { newIndex: s, oldIndex: r } = e.detail;
-      this.model.moveSeries(r, s), this.seriesOrderResetCounter += 1;
+      const { newIndex: i, oldIndex: r } = e.detail;
+      this.model.moveSeries(r, i), this.seriesOrderResetCounter += 1;
     }
   }
   openSeriesPopOver(e) {
     e.stopImmediatePropagation(), this.removeSeriesPopover();
-    const s = e.target, r = s.localName === "calcite-list-item" ? s : s.parentNode, i = this.model.getSeriesIndex(r.value);
-    this.open = this.selectedSeriesIndex !== i, this.selectedSeriesIndex = this.selectedSeriesIndex !== i ? i : void 0;
+    const i = e.target, r = i.localName === "calcite-list-item" ? i : i.parentNode, s = this.model.getSeriesIndex(r.value);
+    this.open = this.selectedSeriesIndex !== s, this.selectedSeriesIndex = this.selectedSeriesIndex !== s ? s : void 0;
   }
   render() {
     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>`;

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

@@ -4,102 +4,56 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement {
-    /** Overwrite localized strings for this component */
+    /** Overwrite localized strings for this component. */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * property to which the popover needs to be attached.
-     *
-     * @category Public
-     */
+    /** property to which the popover needs to be attached. */
     referenceElement?: HTMLElement;
-    /**
-     * selected name to show in popover
-     *
-     * @category Public
-     */
+    /** Selected name to show in popover. */
     selectedName?: string;
-    /**
-     * selected color to show in popover
-     *
-     * @category Public
-     */
+    /** Selected color to show in popover. */
     selectedColor?: Color;
-    /**
-     * selected line style to show in popover
-     *
-     * @category Public
-     */
+    /** Selected line style to show in popover. */
     selectedLineStyle?: RESTSimpleLineSymbolStyle;
-    /**
-     * Index of the selected series.
-     *
-     * @category Public
-     */
+    /** Index of the selected series. */
     selectedSeriesIndex?: number;
-    /**
-     * selected line width to show in popover
-     *
-     * @category Public
-     */
+    /** Selected line width to show in popover. */
     selectedLineWidth?: number;
-    /**
-     * Reference element to show the popover.
-     *
-     * @category Public
-     */
+    /** Reference element to show the popover. */
     placement?: HTMLCalcitePopoverElement["placement"];
     /**
-     * open or close the popover.
+     * Open or close the popover.
      *
-     * @category Public
      * @default false
      */
     open?: boolean;
-    /**
-     * Calls `reposition()` method on popover element.
-     *
-     * @category Public
-     */
+    /** Calls `reposition()` method on popover element. */
     reposition(): Promise<void>;
-    /**
-     * Event emitted when the popover is closed.
-     *
-     * @category Public
-     */
+    /** Event emitted when the popover is closed. */
     readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, {
         selectedSeriesIndex: number;
     }>;
-    /**
-     * Event when there is a change in series color.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in series color. */
     readonly arcgisChartsConfigSeriesPopoverColorChange: TargetedEvent<this, {
         color: Color;
     }>;
-    /**
-     * Event when there is a change in series line style.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in series line style. */
     readonly arcgisChartsConfigSeriesPopoverLineStyleChange: TargetedEvent<this, {
         lineStyle: RESTSimpleLineSymbolStyle;
     }>;
-    /**
-     * Event when there is a change in series line width.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in series line width. */
     readonly arcgisChartsConfigSeriesPopoverLineWidthChange: TargetedEvent<this, {
         lineWidth: number;
     }>;
-    /**
-     * Event when there is a change in series name.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in series name. */
     readonly arcgisChartsConfigSeriesPopoverNameChange: TargetedEvent<this, {
         name: string;
     }>;
     private _messages;
+    "@eventTypes": {
+        "arcgisChartsConfigPopoverClose": ArcgisChartsConfigLineChartSeriesPopover["arcgisChartsConfigPopoverClose"]["detail"];
+        "arcgisChartsConfigSeriesPopoverColorChange": ArcgisChartsConfigLineChartSeriesPopover["arcgisChartsConfigSeriesPopoverColorChange"]["detail"];
+        "arcgisChartsConfigSeriesPopoverLineStyleChange": ArcgisChartsConfigLineChartSeriesPopover["arcgisChartsConfigSeriesPopoverLineStyleChange"]["detail"];
+        "arcgisChartsConfigSeriesPopoverLineWidthChange": ArcgisChartsConfigLineChartSeriesPopover["arcgisChartsConfigSeriesPopoverLineWidthChange"]["detail"];
+        "arcgisChartsConfigSeriesPopoverNameChange": ArcgisChartsConfigLineChartSeriesPopover["arcgisChartsConfigSeriesPopoverNameChange"]["detail"];
+    };
 }

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

@@ -1,42 +1,51 @@
 import { c as u } from "../../chunks/runtime.js";
-import { css as f, html as C } from "lit";
+import { css as C, html as v } from "lit";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
-import "../../chunks/series-types.js";
-import { c as i } from "../../chunks/rest-js-object-literals.js";
 import "d3-array";
-import { X as v } from "../../chunks/interfaces.js";
+import "../../chunks/series-types.js";
+import { a as i } from "../../chunks/rest-js-object-literals.js";
+import { ap as f } from "../../chunks/index.js";
+import "@arcgis/core/Graphic.js";
+import "@arcgis/core/renderers/support/jsonUtils.js";
+import "@arcgis/core/symbols/support/symbolUtils.js";
+import "@arcgis/core/intl.js";
+import "@arcgis/core/layers/support/FeatureFilter.js";
+import "@arcgis/core/smartMapping/statistics/histogram.js";
+import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@arcgis/core/request.js";
+import "@arcgis/core/AttributeBinsGraphic.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 "@arcgis/toolkit/dom";
 import { e as y } from "../../chunks/popover-ui-utils.js";
-import { U as S, b, m, s as w, c as g } from "../../chunks/chart-ui-utils2.js";
-import { u as x } from "../../chunks/useT9n.js";
+import { U as S, b as $, m, s as b, c as g } from "../../chunks/chart-ui-utils2.js";
+import { u as E } from "../../chunks/useT9n.js";
 import { createRef as n, ref as a } from "lit/directives/ref.js";
-import { LitElement as $, createEvent as s, safeClassMap as o, nothing as r } from "@arcgis/lumina";
+import { LitElement as I, createEvent as s, safeClassMap as l, nothing as r } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.13 */
-const l = {
+v5.0.0-next.131 */
+const o = {
   jsAppFlyout: "js-app-flyout",
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   panelChildrenContainer: "panel-children-container"
-}, E = f`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.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}.am5-layer-30{z-index:100!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:normal;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 $ {
+}, w = C`.hide{display:none}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host 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:normal;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 x extends I {
   constructor() {
-    super(...arguments), this._messages = x(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
+    super(...arguments), this._messages = E(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedSeriesIndex: 9, selectedLineWidth: 9, placement: 1, open: 5 };
   }
   static {
-    this.styles = E;
+    this.styles = w;
   }
   async reposition() {
     await this.popoverElement.value?.reposition();
@@ -56,8 +65,8 @@ class I extends $ {
     });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [c, d, p] = t, h = v * 255;
-    this.selectedColor = [c, d, p, h], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [c, d, p, h] });
+    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] });
   }
   lineStyleChange() {
     const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
@@ -65,7 +74,7 @@ class I extends $ {
   }
   lineWidthChange() {
     const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
-    this.lineWidthInputElement.value?.value !== void 0 && b(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
+    this.lineWidthInputElement.value?.value !== void 0 && $(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
       inputElement: this.lineWidthInputElement.value,
       status: g.IDLE
     })) : this.lineWidthInputElement.value && m({
@@ -91,10 +100,10 @@ class I extends $ {
   }
   render() {
     const e = this.selectedColor;
-    return C`<div class=${o({ [l.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${a(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${o(l.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${o(l.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${a(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${o(l.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 ?? r}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? r}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? r}>${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=${w(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${a(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${o(l.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 v`<div class=${l({ [o.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${a(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${l(o.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${l(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${a(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${l(o.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 ?? r}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? r}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? r}>${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} ${a(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${l(o.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
-u("arcgis-charts-config-line-chart-series-popover", I);
+u("arcgis-charts-config-line-chart-series-popover", x);
 export {
-  I as ArcgisChartsConfigLineChartSeriesPopover
+  x as ArcgisChartsConfigLineChartSeriesPopover
 };

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

@@ -4,42 +4,37 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigLineStyle extends LitElement {
-    /** Overwrite localized strings for this component */
+    /** Overwrite localized strings for this component. */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * style for the line symbol.
-     *
-     * @category Public
-     */
+    /** Style for the line symbol. */
     lineStyle: ISimpleLineSymbol;
-    /**
-     * header for the line style
-     *
-     * @category Public
-     */
+    /** Header for the line style. */
     header?: string;
     /**
-     * boolean to open or close the popover.
+     * Boolean to open or close the popover.
      *
-     * @category Public
      * @default false
      */
     open?: boolean;
     /**
-     * boolean to enable the close the panel.
+     * Boolean to enable the close the panel.
      *
-     * @category Public
      * @default false
      */
     enableClose?: boolean;
     /**
-     * boolean to enable wrapping the content in a panel.
+     * Boolean to enable wrapping the content in a panel.
      *
-     * @category Public
      * @default false
      */
     usePanel?: boolean;
+    /** Event when there is a change in line style. */
     readonly arcgisChartsConfigLineStyleChange: TargetedEvent<this, ISimpleLineSymbol>;
+    /** Event when line style is closed. */
     readonly arcgisChartsConfigLineStyleClose: TargetedEvent<this, void>;
     private _messages;
+    "@eventTypes": {
+        "arcgisChartsConfigLineStyleChange": ArcgisChartsConfigLineStyle["arcgisChartsConfigLineStyleChange"]["detail"];
+        "arcgisChartsConfigLineStyleClose": ArcgisChartsConfigLineStyle["arcgisChartsConfigLineStyleClose"]["detail"];
+    };
 }

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

@@ -1,23 +1,23 @@
 import { c as p } from "../../chunks/runtime.js";
 import { css as m, html as l } from "lit";
 import "../../chunks/series-types.js";
-import { R as u, c as t } from "../../chunks/rest-js-object-literals.js";
-import { b as g, m as o, s as y, c } from "../../chunks/chart-ui-utils2.js";
-import { u as f } from "../../chunks/useT9n.js";
+import { f as y, a as t } from "../../chunks/rest-js-object-literals.js";
+import { b as u, m as o, s as g, c } from "../../chunks/chart-ui-utils2.js";
+import { u as S } from "../../chunks/useT9n.js";
 import { createRef as r, ref as d } from "lit/directives/ref.js";
-import { LitElement as S, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
+import { LitElement as f, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.13 */
+v5.0.0-next.131 */
 const a = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   colorPickerContainer: "color-picker-container"
-}, w = m`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.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}.am5-layer-30{z-index:100!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}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
-class b extends S {
+}, w = m`.hide{display:none}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
+class b extends f {
   constructor() {
-    super(...arguments), this._messages = f(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
-      type: u.SLS
+    super(...arguments), this._messages = S(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
+      type: y.SLS
     }, this.arcgisChartsConfigLineStyleChange = h(), this.arcgisChartsConfigLineStyleClose = h();
   }
   static {
@@ -54,7 +54,7 @@ class b extends S {
   }
   widthChange() {
     const e = this.lineWidthInputElement.value?.value;
-    e !== void 0 && g(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && o({
+    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && o({
       inputElement: this.lineWidthInputElement.value,
       status: c.IDLE
     })) : this.lineWidthInputElement.value && o({
@@ -67,8 +67,8 @@ class b extends S {
   }
   render() {
     const e = [
-      l`<div class=${s(a.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(a.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=${y(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
-      l`<div class=${s(a.colorPickerContainer)}><arcgis-charts-config-colors .rgba=${this.lineStyle?.color ?? void 0} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
+      l`<div class=${s(a.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(a.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>`,
+      l`<div class=${s(a.colorPickerContainer)}><arcgis-charts-config-colors .rgba=${this.lineStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
     ];
     return this.usePanel !== !1 ? l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;
   }

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

@@ -3,14 +3,13 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigNumberFormat extends LitElement {
-    /** Overwrite localized strings for this component */
+    /** Overwrite localized strings for this component. */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * numberFormat property is of type [Intl Numberformat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).
-     *
-     * @category Public
-     */
+    /** `numberFormat` property is of type [Intl Numberformat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). */
     numberFormat?: Intl.NumberFormatOptions;
     readonly arcgisChartsConfigNumberFormatChange: TargetedEvent<this, Intl.NumberFormatOptions>;
     private _messages;
+    "@eventTypes": {
+        "arcgisChartsConfigNumberFormatChange": ArcgisChartsConfigNumberFormat["arcgisChartsConfigNumberFormatChange"]["detail"];
+    };
 }

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

@@ -1,50 +1,50 @@
-import { c as l } from "../../chunks/runtime.js";
+import { c as o } from "../../chunks/runtime.js";
 import { css as u, html as h } from "lit";
-import { b as d, m as r, s as p, c as m } from "../../chunks/chart-ui-utils2.js";
-import { u as g } from "../../chunks/useT9n.js";
+import { b as p, m, s as g, c as r } from "../../chunks/chart-ui-utils2.js";
+import { u as d } from "../../chunks/useT9n.js";
 import { createRef as b, ref as f } from "lit/directives/ref.js";
-import { LitElement as v, createEvent as x, safeClassMap as i } from "@arcgis/lumina";
+import { LitElement as F, createEvent as v, safeClassMap as i } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.13 */
-const n = {
+v5.0.0-next.131 */
+const s = {
   container: "container",
   label: "label",
   numberInput: "number-input"
-}, F = u`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-html-container{z-index:101!important}.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}.am5-layer-30{z-index:100!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 v {
+}, C = u`.hide{display:none}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.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 I extends F {
   constructor() {
-    super(...arguments), this._messages = g(), this.decimalPlacesInputElement = b(), this.arcgisChartsConfigNumberFormatChange = x();
+    super(...arguments), this._messages = d(), this.decimalPlacesInputElement = b(), this.arcgisChartsConfigNumberFormatChange = v();
   }
   static {
     this.properties = { messageOverrides: 0, numberFormat: 0 };
   }
   static {
-    this.styles = F;
+    this.styles = C;
   }
   onDecimalPlacesChange() {
-    const t = this.decimalPlacesInputElement.value?.value, a = Math.floor(Number(t)), s = a === Number(t) && a >= 0;
-    if (t !== void 0 && s && d(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
-      const o = Number.parseInt(t), e = {
+    const t = this.decimalPlacesInputElement.value?.value, a = Math.floor(Number(t)), n = a === Number(t) && a >= 0;
+    if (t !== void 0 && n && p(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
+      const c = Number.parseInt(t), e = {
         minimumFractionDigits: this.numberFormat?.minimumFractionDigits,
-        maximumFractionDigits: o
+        maximumFractionDigits: c
       };
       e.maximumFractionDigits !== void 0 && e.minimumFractionDigits !== void 0 && e.minimumFractionDigits > e.maximumFractionDigits && (e.minimumFractionDigits = e.maximumFractionDigits);
-      const c = this.getUpdatedNumberFormat(e);
-      this.arcgisChartsConfigNumberFormatChange.emit(c), this.decimalPlacesInputElement.value && r({
+      const l = this.getUpdatedNumberFormat(e);
+      this.arcgisChartsConfigNumberFormatChange.emit(l), this.decimalPlacesInputElement.value && m({
         inputElement: this.decimalPlacesInputElement.value,
-        status: m.IDLE
+        status: r.IDLE
       });
-    } else this.decimalPlacesInputElement.value && r({
+    } else this.decimalPlacesInputElement.value && m({
       inputElement: this.decimalPlacesInputElement.value,
-      status: m.INVALID
+      status: r.INVALID
     });
   }
   onShowThousandsSeparatorChange(t) {
-    const a = t.target.checked, s = this.getUpdatedNumberFormat({
+    const a = t.target.checked, n = this.getUpdatedNumberFormat({
       useGrouping: a
     });
-    this.arcgisChartsConfigNumberFormatChange.emit(s);
+    this.arcgisChartsConfigNumberFormatChange.emit(n);
   }
   getUpdatedNumberFormat(t) {
     return {
@@ -53,10 +53,10 @@ class w extends v {
     };
   }
   render() {
-    return h`<div><div class=${i(n.container)}><calcite-label class=${i(n.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${i(n.numberInput)} min=0 max=20 step=1 .value=${p(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${f(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${i(n.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div></div>`;
+    return h`<div class=${i(s.container)}><calcite-label class=${i(s.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${i(s.numberInput)} min=0 max=20 step=1 .value=${g(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${f(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div>`;
   }
 }
-l("arcgis-charts-config-number-format", w);
+o("arcgis-charts-config-number-format", I);
 export {
-  w as ArcgisChartsConfigNumberFormat
+  I as ArcgisChartsConfigNumberFormat
 };