@arcgis/charts-components 5.0.0-next.11 → 5.0.0-next.111

package/dist/components/arcgis-charts-config-pie-chart-slices/customElement.d.ts

@@ -6,26 +6,17 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigPieChartSlices extends LitElement {
-    /** Overwrite localized strings for this component */
+    /** Overwrite localized strings for this component. */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * Pie Chart Model.
-     *
-     * @category Public
-     */
+    /** Pie Chart Model. */
     model: PieChartModel;
     /**
-     * place the popover in this placement.
+     * Place the popover in this placement.
      *
-     * @category Public
      * @default "leading"
      */
     popoverPlacement: HTMLCalcitePopoverElement["placement"];
-    /**
-     * The data used by the chart
-     *
-     * @category Public
-     */
+    /** The data used by the chart. */
     chartData?: WebChartGenericDataItem;
     private _messages;
 }

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

@@ -4,27 +4,36 @@ import { b as h } from "../../chunks/common.js";
 import "../../chunks/series-types.js";
 import { R as E } from "../../chunks/rest-js-object-literals.js";
 import "@arcgis/toolkit/intl";
-import { debounce as C, isEmpty as N, toNumber as x } from "lodash-es";
+import { debounce as C, isEmpty as x, toNumber as N } from "lodash-es";
 import "d3-array";
-import { a_ as $, a1 as S } from "../../chunks/interfaces.js";
+import { bw as $, ax as S } 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 I } from "../../chunks/popover-ui-utils.js";
-import { U as y, d as _, s as g } from "../../chunks/chart-ui-utils2.js";
-import { u as G } from "../../chunks/useT9n.js";
+import { U as y, d as G, s as g } from "../../chunks/chart-ui-utils2.js";
+import { u as _ } from "../../chunks/useT9n.js";
 import { css as w, html as d } from "lit";
 import { createRef as m, ref as p } from "lit/directives/ref.js";
 import { LitElement as M, renderElement as P, safeStyleMap as u, safeClassMap as s } 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.11 */
-const a = {
+v5.0.0-next.111 */
+const o = {
   sectionLabel: "section-label",
   label: "label",
   sliceList: "slice-list",
@@ -36,7 +45,7 @@ const a = {
 }, z = w`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) 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)}.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}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container{display:flex}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important;margin-right:var(--arcgis-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.slice-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)}.radio-group{margin-top:var(--arcgis-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--arcgis-charts-config-margin-minor) * -3)}`;
 class k extends M {
   constructor() {
-    super(...arguments), this._messages = G(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
+    super(...arguments), this._messages = _(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
       this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? $);
     }, y.SliderTimer), this.onGroupingThresholdSliderChange = C(() => {
       const e = this.groupingThresholdSliderElement.value?.value;
@@ -87,7 +96,7 @@ class k extends M {
     l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSliceIdChange() {
-    if (!N(this.selectedSliceId)) {
+    if (!x(this.selectedSliceId)) {
       const e = this.model.slices, l = this.model.sliceGrouping;
       let i, t;
       if (this.selectedSliceId === l?.sliceId)
@@ -107,22 +116,22 @@ class k extends M {
     const i = [];
     let t = this.model.slices;
     const r = this.chartData?.dataItems;
-    r && (t = t?.filter((o) => r?.findIndex((c) => c.arcgis_charts_slice_id === o.sliceId) !== -1)), t?.forEach((o) => {
-      if (o.fillSymbol?.color !== void 0) {
+    r && (t = t?.filter((a) => r?.findIndex((c) => c.arcgis_charts_slice_id === a.sliceId) !== -1)), t?.forEach((a) => {
+      if (a.fillSymbol?.color !== void 0) {
         l = "square-f";
-        const [c, b, v, L] = [...o.fillSymbol.color];
+        const [c, b, v, L] = [...a.fillSymbol.color];
         e = `rgba(${c},${b},${v},${L / 255})`;
       }
-      if (o !== void 0 && !this.model.groupedSliceIds.includes(o.sliceId)) {
-        let c = o.sliceId;
-        c === S.emptySliceId ? c = this._messages.emptySlice ?? "" : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(o.sliceId, d`<calcite-list-item .label=${o.label ?? o.sliceId} .description=${c} .value=${o.sliceId} .selected=${this.selectedSliceId === o.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+      if (a !== void 0 && !this.model.groupedSliceIds.includes(a.sliceId)) {
+        let c = a.sliceId;
+        c === S.emptySliceId ? c = this._messages.emptySlice ?? "" : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(a.sliceId, d`<calcite-list-item .label=${a.label ?? a.sliceId} .description=${c} .value=${a.sliceId} .selected=${this.selectedSliceId === a.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
       }
     });
     const n = this.model.sliceGrouping;
     if (n?.fillSymbol?.color !== void 0) {
       l = "square-f";
-      const [o, c, b, v] = [...n.fillSymbol.color];
-      e = `rgba(${o},${c},${b},${v / 255})`;
+      const [a, c, b, v] = [...n.fillSymbol.color];
+      e = `rgba(${a},${c},${b},${v / 255})`;
     }
     return this.model.groupedSliceIds.length > 0 && i?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), i;
   }
@@ -132,17 +141,17 @@ class k extends M {
     return this.model.slices?.forEach((t) => {
       if (t.fillSymbol?.color !== void 0) {
         l = "square-f";
-        const [r, n, o, c] = [...t.fillSymbol.color];
-        e = `rgba(${r},${n},${o},${c / 255})`;
+        const [r, n, a, c] = [...t.fillSymbol.color];
+        e = `rgba(${r},${n},${a},${c / 255})`;
       }
       t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && i?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
     }), i;
   }
   buildSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
+    return d`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
   }
   buildGroupedSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
+    return d`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
   }
   onGroupingThresholdChange(e) {
     const l = e.target.value;
@@ -182,12 +191,12 @@ class k extends M {
     this.tooltip = P(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${l} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
   }
   destroyTooltip() {
-    _(this.tooltip);
+    G(this.tooltip);
   }
   render() {
-    return d`<div class=${s(a.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(a.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? $} @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(a.pieDonutLabelsContainer)}><calcite-label class=${s(a.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(a.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(a.label)}><div class=${s(a.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon></div><div class=${s(a.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(g(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(a.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${g(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
+    return d`<div class=${s(o.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(o.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? $} @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(o.pieDonutLabelsContainer)}><calcite-label class=${s(o.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(o.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(o.label)}><div class=${s(o.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon></div><div class=${s(o.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${N(g(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(o.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${g(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
       e.stopPropagation();
-    }} ${p(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(a.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${g(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${g(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${p(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.display}<calcite-radio-button-group class=${s(a.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Value} .checked=${this.model.displayType === h.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Percentage} .checked=${this.model.displayType === h.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Both} .checked=${this.model.displayType === h.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.slices}<calcite-button @click=${this.resetSlicesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSliceList()}<div class=${s(a.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
+    }} ${p(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(o.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(o.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${g(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${g(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${p(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.display}<calcite-radio-button-group class=${s(o.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Value} .checked=${this.model.displayType === h.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Percentage} .checked=${this.model.displayType === h.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Both} .checked=${this.model.displayType === h.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(o.sectionLabel)}>${this._messages.slices}<calcite-button @click=${this.resetSlicesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSliceList()}<div class=${s(o.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
   }
 }
 T("arcgis-charts-config-pie-chart-slices", k);

package/dist/components/arcgis-charts-config-pie-chart-slices-popover/customElement.d.ts

@@ -4,75 +4,46 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigPieChartSlicesPopover 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;
     /**
-     * Index of the selected slice id
+     * Index of the selected slice id.
      *
-     * @category Public
      * @default ""
      */
     selectedSliceId: string;
-    /**
-     * 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, {
         selectedSliceId: string;
     }>;
-    /**
-     * Event when there is a change in slice color.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in slice color. */
     readonly arcgisChartsConfigSlicesPopoverColorChange: TargetedEvent<this, {
         color: Color;
     }>;
-    /**
-     * Event when there is a change in slice name.
-     *
-     * @category Public
-     */
+    /** Event when there is a change in slice name. */
     readonly arcgisChartsConfigSlicesPopoverNameChange: TargetedEvent<this, {
         name: string;
     }>;
     private _messages;
+    "@eventTypes": {
+        "arcgisChartsConfigPopoverClose": ArcgisChartsConfigPieChartSlicesPopover["arcgisChartsConfigPopoverClose"]["detail"];
+        "arcgisChartsConfigSlicesPopoverColorChange": ArcgisChartsConfigPieChartSlicesPopover["arcgisChartsConfigSlicesPopoverColorChange"]["detail"];
+        "arcgisChartsConfigSlicesPopoverNameChange": ArcgisChartsConfigPieChartSlicesPopover["arcgisChartsConfigSlicesPopoverNameChange"]["detail"];
+    };
 }

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

@@ -4,14 +4,23 @@ import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "../../chunks/series-types.js";
 import "d3-array";
-import { X as d } from "../../chunks/interfaces.js";
+import { ar as d } 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 h } from "../../chunks/popover-ui-utils.js";
 import { U as g } from "../../chunks/chart-ui-utils2.js";
@@ -20,7 +29,7 @@ import { createRef as C, ref as v } from "lit/directives/ref.js";
 import { LitElement as u, createEvent as o, 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.11 */
+v5.0.0-next.111 */
 const s = {
   jsAppFlyout: "js-app-flyout",
   panelChildrenContainer: "panel-children-container"
@@ -60,7 +69,7 @@ class x extends u {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
     return m`<div class=${i({
       [s.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${v(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} 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.sliceNameChange}></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>`;
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${v(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} 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.sliceNameChange}></calcite-input></calcite-label></div><div class=${i(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 c("arcgis-charts-config-pie-chart-slices-popover", x);

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

@@ -1,61 +1,39 @@
 /// <reference path="../../index.d.ts" />
 import { ScatterplotModel } from '../../model';
-import { CalculatedMinMaxBoundsPayload, SupportedLayer } from '../../spec';
+import { CalculatedMinMaxBoundsPayload } from '../../spec';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';
-import { ChartAuthoringPages } from '../../interfaces';
+import { SupportedLayer, ChartAuthoringPages } from '../../interfaces';
 
 /** @private */
 export declare class ArcgisChartsConfigScatterplot extends LitElement {
-    /**
-     * Scatterplot Model.
-     *
-     * @category Public
-     */
+    /** Scatterplot Model. */
     model: ScatterplotModel;
     /**
      * Popover placement use it from the viewer to place the popover.
      *
-     * @category Public
      * @default "leading"
      */
     popoverPlacement: HTMLCalcitePopoverElement["placement"];
-    /**
-     * r2 value for the scatterplot chart.
-     *
-     * @category Public
-     */
+    /** r2 value for the scatterplot chart. */
     r2?: number;
-    /**
-     * Data min and max values for x and y fields
-     *
-     * @category Public
-     */
+    /** Data min and max values for x and y fields. */
     calculatedDataMinMaxBounds?: CalculatedMinMaxBoundsPayload[];
-    /**
-     * Min/Max bounds computed by the chart
-     *
-     * @category Public
-     */
+    /** Min/Max bounds computed by the chart. */
     calculatedMinMaxBounds?: CalculatedMinMaxBoundsPayload[];
-    /**
-     * Specific page to be opened
-     *
-     * @category Public
-     */
+    /** Specific page to be opened. */
     page?: ChartAuthoringPages;
-    /**
-     * layer instance on which the charts are created or edited.
-     *
-     * @category Public
-     */
+    /** Layer instance on which the charts are created or edited. */
     layer?: SupportedLayer;
     /**
-     * usePopupTemplateFieldsInfo can be set to true to read the fields from layer.popupTemplate
+     * `usePopupTemplateFieldsInfo` can be set to `true` to read the fields from `layer.popupTemplate`.
      *
-     * @category Public
      * @default false
      */
     usePopupTemplateFieldsInfo?: boolean;
+    /** Event emitted when there is change in the config. */
     readonly arcgisChartsConfigWebChartChange: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisChartsConfigWebChartChange": ArcgisChartsConfigScatterplot["arcgisChartsConfigWebChartChange"]["detail"];
+    };
 }

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

@@ -3,29 +3,38 @@ import "@arcgis/toolkit/intl";
 import { isEqual as n } from "lodash-es";
 import "../../chunks/series-types.js";
 import "d3-array";
-import { g as l, b9 as h, bZ as d } from "../../chunks/interfaces.js";
+import { g as l, bH as c, cy as h } 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 { h as c } from "../../chunks/index4.js";
+import { h as d } from "../../chunks/index3.js";
 import "@arcgis/toolkit/dom";
-import { LitElement as g, createEvent as m } from "@arcgis/lumina";
-import { css as p, html as t } from "lit";
-import { C as o } from "../../chunks/interfaces3.js";
+import { LitElement as m, createEvent as g } from "@arcgis/lumina";
+import { css as p, html as a } from "lit";
+import { C as o } from "../../chunks/interfaces.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.11 */
+v5.0.0-next.111 */
 const f = 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 u extends g {
+class u extends m {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const i = e?.detail.config ?? this.model.config;
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(i);
-    }, this.popoverPlacement = "leading", this.arcgisChartsConfigWebChartChange = m();
+    }, this.popoverPlacement = "leading", this.arcgisChartsConfigWebChartChange = g();
   }
   static {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5 };
@@ -34,49 +43,44 @@ class u extends g {
     this.styles = f;
   }
   async load() {
-    this.layer !== void 0 && await this.layerChange(this.layer, void 0), this.usePopupTemplateFieldsInfo !== void 0 && await this.usePopupTemplateFieldsInfoChange(this.usePopupTemplateFieldsInfo, void 0), this.modelChange(this.model), this.onModelConfigChange();
+    await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
   }
-  async willUpdate(e) {
-    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("r2") && this.r2Change(this.r2), e.has("layer") && await this.layerChange(this.layer, e.get("layer")), e.has("usePopupTemplateFieldsInfo") && await this.usePopupTemplateFieldsInfoChange(this.usePopupTemplateFieldsInfo, e.get("usePopupTemplateFieldsInfo")), this.layerFieldsInfo === void 0 && await this.updateFetchLayerFieldsInfo();
+  willUpdate(e) {
+    let t = !1;
+    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("r2") && this.r2Change(this.r2), e.has("layer") && this.layer !== void 0 && !n(e.get("layer"), this.layer) && (t = !0), e.has("usePopupTemplateFieldsInfo") && this.usePopupTemplateFieldsInfo !== e.get("usePopupTemplateFieldsInfo") && (t = !0), this.layerFieldsInfo === void 0 && (t = !0), t && this.updateFetchLayerFieldsInfo();
   }
-  modelChange(e, a) {
-    a?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, t) {
+    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   r2Change(e) {
     Number.isFinite(e) || (this.r2 = void 0);
   }
-  async layerChange(e, a) {
-    e !== void 0 && !n(a, e) && await this.updateFetchLayerFieldsInfo();
-  }
-  async usePopupTemplateFieldsInfoChange(e, a) {
-    e !== void 0 && e !== a && await this.updateFetchLayerFieldsInfo();
-  }
   async updateFetchLayerFieldsInfo(e) {
-    const a = e ?? this.model.config;
+    const t = e ?? this.model.config;
     let i = this.layer;
     if (!i) {
-      const s = c(a) ? a.iLayer : void 0;
+      const s = d(t) ? t.iLayer : void 0;
       s && (i = await l(s));
     }
-    i && (this.layerFieldsInfo = await h(i, this.usePopupTemplateFieldsInfo));
+    i && (this.layerFieldsInfo = await c(i, this.usePopupTemplateFieldsInfo));
   }
   render() {
     let e;
     switch (this.page) {
       case o.Data:
-        e = t`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${d(this.layer)?.isTable}></arcgis-charts-config-scatter-plot-data>`;
+        e = a`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${h(this.layer)?.isTable}></arcgis-charts-config-scatter-plot-data>`;
         break;
       case o.Axes:
-        e = t`<arcgis-charts-config-axes .model=${this.model} show-min-x-bound-option show-max-x-bound-option show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
+        e = a`<arcgis-charts-config-axes .model=${this.model} show-min-x-bound-option show-max-x-bound-option show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;
         break;
       case o.Guides:
-        e = t`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
+        e = a`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
         break;
       case o.Format:
-        e = t`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
+        e = a`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
       case o.General:
-        e = t`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+        e = a`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";

package/dist/components/arcgis-charts-config-scatter-plot-data/customElement.d.ts

@@ -7,39 +7,26 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 
 /** @private */
 export declare class ArcgisChartsConfigScatterplotData extends LitElement {
-    /** Overwrite localized strings for this component */
+    /** Overwrite localized strings for this component. */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * Scatterplot Model.
-     *
-     * @category Public
-     */
+    /** Scatterplot Model. */
     model: ScatterplotModel;
-    /**
-     * r2 value for the scatterplot chart.
-     *
-     * @category Public
-     */
+    /** r2 value for the scatterplot chart. */
     r2?: number;
-    /**
-     * Fields Information of the Feature layer
-     *
-     * @category Public
-     */
+    /** Fields Information of the feature layer. */
     layerFieldsInfo: IField[];
     /**
-     * Whether the Feature Layer is a table
+     * Whether the feature layer is a table.
      *
-     * @category Public
      * @default false
      */
     isTableLayer?: boolean;
     readonly arcgisChartsConfigDataChangeError: TargetedEvent<this, DataChangeErrorPayload>;
-    /**
-     * Event when there is change in scatterplot data popover.
-     *
-     * @category Public
-     */
+    /** Event when there is change in scatterplot data popover. */
     readonly arcgisChartsConfigScatterplotPopoverChange: TargetedEvent<this, void>;
     private _messages;
+    "@eventTypes": {
+        "arcgisChartsConfigDataChangeError": ArcgisChartsConfigScatterplotData["arcgisChartsConfigDataChangeError"]["detail"];
+        "arcgisChartsConfigScatterplotPopoverChange": ArcgisChartsConfigScatterplotData["arcgisChartsConfigScatterplotPopoverChange"]["detail"];
+    };
 }