@arcgis/charts-components 4.33.0-next.111 → 4.33.0-next.112

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

@@ -21,7 +21,7 @@ import { LitElement as M, createEvent as P, safeStyleMap as b, safeClassMap as s
 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.111 */
+v4.33.0-next.112 */
 const o = {
   sectionLabel: "section-label",
   label: "label",
@@ -73,27 +73,18 @@ class V extends M {
   static {
     this.styles = z;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
   }
-  /** @category Lifecycle */
   willUpdate(e) {
     e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSliceId") && this.selectedSliceIdChange();
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSlicesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, l) {
     l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /** @category Watch handler */
   selectedSliceIdChange() {
     if (!E(this.selectedSliceId) && this.configSliceOpen) {
       if (this.setupSlicesPopover(), this.slicesPopover !== null) {
@@ -109,11 +100,9 @@ class V extends M {
       this.addSlicesPopover();
     }
   }
-  /** @category Private */
   removeSlicesPopover() {
     this.slicesPopover !== void 0 && this.slicesPopover !== null && (this.slicesPopover.open = !1, this.slicesPopover.selectedName = void 0, this.slicesPopover.selectedColor = void 0, this.slicesPopover = N(this.slicesPopover)), this.slicesPopoverChange(!1);
   }
-  /** @category Render UX */
   buildSliceListItem() {
     let e = "#CCCCCC", l = "minus-square";
     const i = [];
@@ -138,7 +127,6 @@ class V extends M {
     }
     return this.model.getGroupedSliceIds().length > 0 && i?.push(f(r?.sliceId, h`<calcite-list-item .label=${r?.label ?? r?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${r?.sliceId ?? ""} .selected=${this.selectedSliceId === r?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${b({ color: e })}></calcite-icon></calcite-list-item>`)), i;
   }
-  /** @category Render UX */
   buildGroupedSlicesListItem() {
     let e = "#CCCCCC", l = "minus-square";
     const i = [];
@@ -151,61 +139,50 @@ class V extends M {
       t !== void 0 && this.model.getGroupedSliceIds().includes(t.sliceId) && i?.push(f(t.sliceId, h`<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=${b({ color: e })}></calcite-icon></calcite-list-item>`));
     }), i;
   }
-  /** @category Render UX */
   buildSliceList() {
     return h`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
   }
-  /** @category Render UX */
   buildGroupedSliceList() {
     return h`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
   }
-  /** @category Event handler */
   onGroupingThresholdChange(e) {
     const l = e.target.value;
     let i = Number.parseInt(l);
     i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.setGroupingThreshold(0) : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.setGroupingThreshold(i), this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
   }
-  /** @category Event handler */
   onLabelCharacterLimitChange(e) {
     const l = e.target.value;
     let i = Number.parseInt(l);
     i < 1 && (i = 1), Number.isNaN(i) ? this.model.setLabelCharacterLimit(null) : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = i.toString()), this.model.setLabelCharacterLimit(i));
   }
-  /** @category Event handler */
   onDecimalPlacesChange(e) {
     const l = e.target.value;
     let i = Number.parseInt(l);
     i < 0 ? i = 0 : i > 20 && (i = 20), Number.isNaN(i) ? this.model.setDecimalPlaces(0) : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = i.toString()), this.model.setDecimalPlaces(i));
   }
-  /** @category Event handler */
   onDisplayTypeChange(e) {
     const l = e.target.selectedItem;
     this.model.setDisplayType(l.value);
   }
-  /** @category Event handler */
   resetSlicesOriginal() {
     this.configSliceOpen = !1, this.selectedSliceId = void 0, this.model.setColorMatch(!0), this.model.resetSlices();
   }
-  /** @category Event handler */
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
       const { newIndex: l, oldIndex: i } = e.detail;
       this.model.moveSeries(i, l);
     }
   }
-  /** @category Event handler */
   slicesPopoverChange(e) {
     this.arcgisChartsConfigPieChartSlicesPopoverChange.emit({
       open: e,
       element: this.slicesPopover
     });
   }
-  /** @category Event handler */
   openSlicesPopover(e) {
     const l = e.target, i = l.localName === "calcite-list-item" ? l : l.parentNode, t = !this.configSliceOpen;
     this.configSliceOpen = this.selectedSliceId === i.value ? t : !0, this.configSliceOpen ? i.value === this.model.getSliceGrouping()?.sliceId ? this.selectedSliceId = this.model.getSliceGrouping()?.sliceId : this.selectedSliceId = i.value : this.selectedSliceId = void 0;
   }
-  /** @category Private */
   setupSlicesPopover() {
     if (this.slicesPopover === null && this.el !== void 0) {
       const e = {
@@ -219,30 +196,16 @@ class V extends M {
       this.slicesPopover = x(_.PieChartSlicesPopover, e);
     }
   }
-  /** @category Private */
   addSlicesPopover() {
     this.slicesPopover != null && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover), this.slicesPopoverChange(!0);
   }
-  /**
-   * Creates a tooltip for the hovered action.
-   *
-   * @category Event handler
-   */
   createTooltip(e) {
     const l = e.target;
     this.tooltip = D(l), this.tooltip.innerHTML = this._messages.groupingInfo ?? "", document.body.appendChild(this.tooltip);
   }
-  /**
-   * Destroys tooltip for the action that was being hovered.
-   *
-   * @category Event handler
-   */
   destroyTooltip() {
     O(this.tooltip);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     return h`<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.getInnerRadiusSize() ?? S} @calciteSliderChange=${this.onDonutSizeSliderChange} ${g(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=${G(p(this.model.getGroupingThreshold() ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${g(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(o.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${p(this.model.getGroupingThreshold() ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
       e.stopPropagation();

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

@@ -36,6 +36,7 @@ export declare class ArcgisChartsConfigPieChartSlicesPopover extends LitElement
      * open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
@@ -72,6 +73,5 @@ export declare class ArcgisChartsConfigPieChartSlicesPopover extends LitElement
     readonly arcgisChartsConfigSlicesPopoverNameChange: TargetedEvent<this, {
         name: string;
     }>;
-    /** @category Private */
     private _messages;
 }

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

@@ -19,7 +19,7 @@ import { LitElement as v, createEvent as o, safeClassMap as i } from "@arcgis/lu
 import { css as u } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.111 */
+v4.33.0-next.112 */
 const s = {
   jsAppFlyout: "js-app-flyout",
   panelChildrenContainer: "panel-children-container"
@@ -34,58 +34,34 @@ class x extends v {
   static {
     this.styles = b;
   }
-  //#endregion
-  //#region Public Methods
-  /**
-   * Calls `reposition()` method on popover element.
-   *
-   * @category Public
-   */
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  //#endregion
-  //#region Lifecycle
   willUpdate(e) {
     e.has("open") && (this.hasUpdated || !this.open) && this.openChange();
   }
-  /** @category Lifecycle */
   updated() {
     h(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
     }, m.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 */
   sliceNameChange(e) {
     const t = e.target.value;
     this.selectedName !== t && (this.selectedName = t, this.arcgisChartsConfigSlicesPopoverNameChange.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, [a, r, n] = t, l = p * 255;
     this.selectedColor = [a, r, n, l], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [a, r, n, l] });
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
     return g`<div class=${i({

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

@@ -7,10 +7,6 @@ import { ChartAuthoringPages } from '../../interfaces';
 
 /** @private */
 export declare class ArcgisChartsConfigScatterPlot extends LitElement {
-    /**
-     * Arcgis config change event emitted when there is change in the config.
-     * @event
-     */
     /**
      * Scatter Plot Model.
      *
@@ -21,6 +17,7 @@ export declare class ArcgisChartsConfigScatterPlot extends LitElement {
      * Popover placement use it from the viewer to place the popover.
      *
      * @category Public
+     * @default "leading"
      */
     popoverPlacement: HTMLCalcitePopoverElement["placement"];
     /**
@@ -57,6 +54,7 @@ export declare class ArcgisChartsConfigScatterPlot extends LitElement {
      * usePopupTemplateFieldsInfo can be set to true to read the fields from layer.popupTemplate
      *
      * @category Public
+     * @default false
      */
     usePopupTemplateFieldsInfo?: boolean;
     readonly arcgisChartsConfigWebChartChange: TargetedEvent<this, undefined>;

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

@@ -17,7 +17,7 @@ import { C as o } from "../../chunks/interfaces3.js";
 import { css as m } 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.111 */
+v4.33.0-next.112 */
 const f = m`: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 c {
   constructor() {
@@ -32,29 +32,15 @@ class u extends c {
   static {
     this.styles = f;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   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();
   }
-  /** @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("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();
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, a) {
     a?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /**
-   * Secures the value assigned to the r2 property
-   *
-   * @param newR2Value the new r2 value assigned to the component
-   * @category Watch handler
-   */
   r2Change(e) {
     Number.isFinite(e) || (this.r2 = void 0);
   }
@@ -64,12 +50,10 @@ class u extends c {
   async usePopupTemplateFieldsInfoChange(e, a) {
     e !== void 0 && e !== a && await this.updateFetchLayerFieldsInfo();
   }
-  /** @category Event handler */
   popoverOpen(e) {
     const { open: a = !1, element: t = null } = { ...e.detail };
     a === !0 && this.popoverElement !== t ? (this.popoverElement !== null && (this.popoverElement.open = !1), this.popoverElement = t) : a === !1 && this.popoverElement === t && (this.popoverElement = null);
   }
-  /** @category Private */
   async updateFetchLayerFieldsInfo(e) {
     const a = e ?? this.model.getConfig();
     let t = this.layer;
@@ -79,9 +63,6 @@ class u extends c {
     }
     t && (this.layerFieldsInfo = await h(t, this.usePopupTemplateFieldsInfo));
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     let e;
     switch (this.page) {

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

@@ -9,10 +9,6 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 export declare class ArcgisChartsConfigScatterPlotData extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
-    /**
-     * Event emitted upon catching an error in an async function.
-     * @event
-     */
     /**
      * Scatter Plot Model.
      *
@@ -35,9 +31,14 @@ export declare class ArcgisChartsConfigScatterPlotData extends LitElement {
      * Whether the Feature Layer is a table
      *
      * @category Public
+     * @default false
      */
     isTableLayer?: boolean;
-    /** When true, the content of the component will be displayed. */
+    /**
+     * When true, the content of the component will be displayed.
+     *
+     * @default false
+     */
     open?: boolean;
     readonly arcgisChartsConfigDataChangeError: TargetedEvent<this, DataChangeErrorPayload>;
     /**
@@ -52,6 +53,5 @@ export declare class ArcgisChartsConfigScatterPlotData extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigScatterPlotPopoverChange: TargetedEvent<this, undefined>;
-    /** @category Private */
     private _messages;
 }

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

@@ -21,7 +21,7 @@ import { LitElement as D, createEvent as v, safeClassMap as i, safeStyleMap as x
 import { css as N } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.111 */
+v4.33.0-next.112 */
 const s = {
   label: "label",
   r2: "r2",
@@ -96,49 +96,33 @@ class K extends D {
   static {
     this.styles = R;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   async load() {
     this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterPlotData[m.selectedChartId] = {
       ...m.scatterPlotData[m.selectedChartId],
       sizePolicyField: this.model.getSizePolicy()?.field
     });
   }
-  /** @category Lifecycle */
   willUpdate(e) {
     e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedElement") && this.openPopover();
   }
-  /** @category Lifecycle */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async loaded() {
     await (async (t) => void await new Promise((o) => setTimeout(() => o(), t)))(250), this.items.forEach((t) => {
       delete t.focus;
     });
   }
-  /** @category Lifecycle */
-  // TODO: as of Nov 2020, only fixed symbol is supported.
-  // When proportionalSymbol is supported, need to rework on the UI
-  // to replace select element with another calcite component.
-  // This function will no longer needed.
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeScatterPlotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, t) {
     t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   openPopover() {
     (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupScatterPlotPopover();
   }
-  /** @category Event handler */
   setShowTrendLine(e) {
     const t = e.target.checked;
     this.model.setShowLinearTrend(t), !t && this.contentKind === l.trendLine && this.closeScatterPlotPopover(e);
   }
-  /** @category Event handler */
   symbolSizeChange(e) {
     const t = e.target, { value: o } = t;
     if (o !== void 0 && f(o, t.min, t.max)) {
@@ -173,7 +157,6 @@ class K extends D {
         status: p.INVALID
       });
   }
-  /** @category Event handler */
   symbolSizeRangeSliderInput(e) {
     const t = e.target, { minValue: o, maxValue: n } = t, c = this.model.getSizePolicy();
     c !== void 0 && (this.model.setSizePolicy({
@@ -182,12 +165,10 @@ class K extends D {
       maxSize: n
     }), this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${o}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${n}`));
   }
-  /** @category Event handler */
   changeColorTypeToggle() {
     const e = this.colorModeElement.value?.selectedItem?.value;
     this.model.setColorMatch(e === this._messages.useLayerColors);
   }
-  /** @category Event handler */
   changeSymbolSizeTypeToggle() {
     const e = this.symbolSizeModeElement.value?.value;
     this.selectedSizeType = e;
@@ -202,39 +183,19 @@ class K extends D {
       field: ""
     });
   }
-  /**
-   *
-   * @category Event handler
-   */
   changeElementStyle(e) {
     let t = e.target;
     t.localName === "calcite-icon" && (t = t.parentElement), t.value === "selectColor" ? (this.contentKind = l.symbol, this.selectedElement = this.model.getFixedMarkerSymbol()?.color) : t.value === "selectTrendLine" && (this.contentKind = l.trendLine, this.selectedElement = this.model.getLinearTrendSymbol());
   }
-  /**
-   * @category Event handler
-   *
-   * called when the X-axis variable is clicked
-   */
   onXVariableSelectChange() {
     this.contentKind = l.xAxisField, this.selectedElement = this.model.getXAxisField();
   }
-  /**
-   * @category Event handler
-   *
-   * called when the Y-axis variable is clicked
-   */
   onYVariableSelectChange() {
     this.contentKind = l.yAxisField, this.selectedElement = this.model.getYAxisField();
   }
-  /**
-   * @category Event handler
-   *
-   * called when the size variable is clicked
-   */
   onSizeVariableSelectChange() {
     this.contentKind = l.sizeVariable, this.selectedElement = this.model.getSizePolicy()?.field ?? "";
   }
-  /** @category Private */
   setupScatterPlotPopover() {
     this.scatterPlotPopover = C(this.scatterPlotPopover);
     const e = {
@@ -267,64 +228,48 @@ class K extends D {
     }
     this.contentKind !== l.none && (this.scatterPlotPopover.open = !0, this.addScatterPlotPopover());
   }
-  /** @category Private */
   removeScatterPlotPopover() {
     this.scatterPlotPopover !== null && (this.scatterPlotPopover = C(this.scatterPlotPopover)), this.selectedElement = {};
   }
-  /** @category Private */
   addScatterPlotPopover() {
     !document.body.contains(this.scatterPlotPopover) && this.scatterPlotPopover !== void 0 && this.scatterPlotPopover !== null && document.body.appendChild(this.scatterPlotPopover);
   }
-  /** @category Private */
   getCurrentSymbolSizeType() {
     const e = this.model.getSizePolicy();
     return e === void 0 || e.field === "" ? h.Fixed : h.Proportional;
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderXVariable() {
     return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getXAxisField() ?? "")} @click=${this.onXVariableSelectChange} ${a(this.xAxisElement)}></arcgis-charts-config-field-select>`;
   }
-  /** @category Render UX */
   renderYVariable() {
     return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${a(this.yAxisElement)}></arcgis-charts-config-field-select>`;
   }
-  /** @category Render UX */
   renderStatistics() {
     const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? $(0)];
     return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(s.switchElement)} .checked=${this.model.getShowLinearTrend()} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.getShowLinearTrend()} .selected=${this.selectedElement?.type === P.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(s.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
   }
-  /** @category Render UX */
   renderFixedSymbol() {
     return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(s.numberInput)} min=1 max=100 step=1 .value=${u(this.model.getFixedMarkerSymbol()?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
   }
-  /** @category Render UX */
   renderSizeVariable() {
     return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getSizePolicy()?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.getSizePolicy()?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${a(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
   }
-  /** @category Render UX */
   renderMinSizeInput() {
     return r`<calcite-input type=number name=proportional-symbol-min-size class=${i(s.numberInput)} min=1 .max=${this.model.getSizePolicy()?.maxSize ?? 100} step=1 .value=${u(this.model.getSizePolicy()?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${a(this.minSizeInputElement)}></calcite-input>`;
   }
-  /** @category Render UX */
   renderMaxSizeInput() {
     return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(s.numberInput)} .min=${this.model.getSizePolicy()?.minSize ?? 1} max=100 step=1 .value=${u(this.model.getSizePolicy()?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${a(this.maxSizeInputElement)}></calcite-input>`;
   }
-  /** @category Render UX */
   renderProportionalSymbol() {
     return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(s.multiInputSection)}><calcite-label class=${i(s.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${z(u(this.model.getSizePolicy()?.minSize))} .maxValue=${z(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
   }
-  /** @category Render UX */
   renderSymbolSizeType() {
     return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${a(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${h.Fixed} .checked=${h.Fixed === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${h.Proportional} .checked=${h.Proportional === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
   }
-  /** @category Render UX */
   renderSymbol() {
     const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? $(0)];
     return r`<div class=${i(s.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === h.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(s.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${a(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.getColorMatch() && this.isTableLayer !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${a(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
-  /** @category Lifecycle */
   render() {
     return r`<div class=${i({ [s.rtl]: this.direction === "rtl" })}><h3 class=${i(s.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(s.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><h3 class=${i(s.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(s.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
   }

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

@@ -43,6 +43,7 @@ export declare class ArcgisChartsConfigScatterPlotPopover extends LitElement {
      * boolean to open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
@@ -89,9 +90,9 @@ export declare class ArcgisChartsConfigScatterPlotPopover extends LitElement {
     readonly arcgisChartsConfigScatterPlotSizeVariableFieldChange: TargetedEvent<this, undefined>;
     /**
      * Event emitted when there is a change in X-axis or Y-axis field type.
+     *
      * @event
      */
     readonly arcgisChartsConfigScatterPlotXYFieldChange: TargetedEvent<this, undefined>;
-    /** @category Private */
     private _messages;
 }

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

@@ -21,7 +21,7 @@ import { LitElement as $, createEvent as a, safeClassMap as l } from "@arcgis/lu
 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.111 */
+v4.33.0-next.112 */
 const r = {
   jsAppFlyout: "js-app-flyout",
   scatterPlotPopover: "scatter-plot-popover",
@@ -40,25 +40,12 @@ class F extends $ {
   static {
     this.styles = k;
   }
-  //#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.openChange();
   }
-  /** @category Lifestyle */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
-  /** @category Lifecycle */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async updated() {
     setTimeout(async () => {
       await this.picklist.value?.setFocus();
@@ -66,55 +53,32 @@ class F extends $ {
       this.popoverElement.value?.reposition();
     }, h.PopoverTimer);
   }
-  /** @category Lifecycle */
   loaded() {
     this.openChange();
   }
-  //#endregion
-  //#region Private Methods
-  /**
-   * Watch on open popover.
-   *
-   * @category Private
-   */
   openChange() {
     this.arcgisChartsConfigPopoverOpenChange.emit({ open: this.open });
   }
-  /** @category Private */
   seriesPopoverClose() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /** @category Event handler */
   closePopover() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /** @category Event handler */
   updateSymbolProperties(e) {
     this.selectedContent = e.target.lineStyle, this.arcgisChartsConfigScatterPlotLineStyleChange.emit(e.detail);
   }
-  /** @category Event handler */
   updateColorProperties(e) {
     this.selectedContent = e.detail, this.arcgisChartsConfigScatterPlotFillColorChange.emit(e.detail);
   }
-  /**
-   * @category Event handler
-   * @param e
-   */
   onFieldSelectionChange(e) {
     const t = e.target.selectedItems;
     this.contentKind === p.sizeVariable ? this.arcgisChartsConfigScatterPlotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterPlotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const e = this.selectedContent, t = this.selectedContent;
     return o`<div class=${l({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${l(r.scatterPlotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${P(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${g(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${l(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === c.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== c.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
-  /**
-   * @param axis
-   * @category Render UX
-   */
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
     this.contentKind === p.sizeVariable && t.push(n(" ", o`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`));