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

package/dist/components/arcgis-charts-config-create-flow/customElement.js

@@ -30,7 +30,7 @@ import { A as q } from "../../chunks/axis-model-wrapper.js";
 import { css as Q } 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.110 */
+v4.33.0-next.112 */
 const m = {
   chartUIComponent: "chart-ui-component",
   tabBar: "tab-bar",
@@ -92,8 +92,6 @@ function y(l, e) {
   return !I(l, e);
 }
 class oe extends W {
-  //#endregion
-  //#region Lifecycle
   constructor() {
     super(), this.chartsListFlowItem = z(), this.supportedChartTypes = [
       o.BarSeries,
@@ -195,21 +193,12 @@ class oe extends W {
   static {
     this.styles = re;
   }
-  //#endregion
-  //#region Public Methods
-  /**
-   * Sets the focus to the calcite flow item.
-   *
-   * @category Public
-   */
   async setFocus() {
     this.chartsListFlowItem.value?.setFocus();
   }
-  /** @category Lifecycle */
   connectedCallback() {
     super.connectedCallback(), this.addChartEventListeners();
   }
-  /** @category Lifecycle */
   async load() {
     await this.layerListChange();
     const e = this.getModel(this.selectedChartId);
@@ -218,17 +207,9 @@ class oe extends W {
   async willUpdate(e) {
     e.has("layerList") && (this.hasUpdated || this.layerList?.length > 0) && await this.layerListChange(), e.has("modelList") && (this.hasUpdated || this.modelList?.length > 0) && await this.modelListChange(this.modelList, e.get("modelList")), e.has("selectedChartId") && await this.selectedChartIdChange(this.selectedChartId), e.has("panelNumber") && (this.hasUpdated || this.panelNumber !== 0) && this.panelNumberChange(this.panelNumber);
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.clearPartialModels(), this.removeSelectChartTypePopover(), this.removeChartEventListeners(), this.selectChartTypePopover = void 0;
   }
-  //#endregion
-  //#region Private Methods
-  /**
-   * Listener callback for the `arcgisChartsConfigModelListReorder` event.
-   *
-   * @category Private
-   */
   modelListReorderChangeListener(e) {
     const { modelList: t } = e.detail;
     if (this.modelList = w({
@@ -243,11 +224,6 @@ class oe extends W {
       }
     }
   }
-  /**
-   * Called every time layerList is updated
-   *
-   * @category Watch handler
-   */
   async layerListChange() {
     const e = [], t = this.layerList.map((a) => a.id.toString()), i = [...this.modelList.filter((a) => t.includes(a.getLayer()?.id ?? ""))];
     for (let a of this.layerList ?? []) {
@@ -271,11 +247,6 @@ class oe extends W {
       i.find((r) => r.isSameChartAs(a)) === void 0 && i.push(a);
     }), this.modelList = i;
   }
-  /**
-   * Called every time modelList is updated
-   *
-   * @category Watch handler
-   */
   async modelListChange(e, t) {
     this.selectedChartId = S(e, this.selectedChartId), t?.forEach((a) => {
       a.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
@@ -285,11 +256,6 @@ class oe extends W {
     const i = this.getModel(this.selectedChartId);
     this.currentChartTypeText = i?.getChartType() !== void 0 ? await x(i.getChartType()) : "", this.syncChartsToLayers && te(this.layerList, e), this.arcgisChartsConfigModelListChange.emit({ modelList: e });
   }
-  /**
-   * Called every time selectedChartId is updated
-   *
-   * @category Watch handler
-   */
   async selectedChartIdChange(e) {
     this.selectedChartId === void 0 && (this.panelNumber = 0), this.selectedPanel = n.Data;
     const t = this.getModel(e);
@@ -298,34 +264,15 @@ class oe extends W {
       model: t
     });
   }
-  /**
-   * Called every time panel number is updated
-   *
-   * @category Watch handler
-   */
   panelNumberChange(e) {
     e === 0 ? this.clearPartialModels() : e === 1 && (this.arcgisChartsConfigPopoverOpenChange.emit({ open: !1 }), this.removeSelectChartTypePopover(), this.selectChartTypePopover = void 0), this.arcgisChartsConfigPanelNumberChange.emit({ panelNumber: e, modelList: this.modelList });
   }
-  /**
-   * Adds event listeners for chart components. These listeners will generally check if the event is for the selected chart, and only update the state if so.
-   *
-   * @category Private
-   */
   addChartEventListeners() {
     document.addEventListener(C.DataProcessComplete, this.chartDataProcessComplete), document.addEventListener(C.AxesMinMaxChange, this.chartAxesMinMaxChange), document.addEventListener(C.SeriesColorChange, this.chartSeriesColorChange), document.addEventListener(C.NoRenderPropChange, this.chartNoRenderPropChange), document.addEventListener(C.LegendItemVisibilityChange, this.chartLegendItemVisibilityChange);
   }
-  /**
-   * Removes event listeners for chart components.
-   *
-   * @category Private
-   */
   removeChartEventListeners() {
     document.removeEventListener(C.DataProcessComplete, this.chartDataProcessComplete), document.removeEventListener(C.AxesMinMaxChange, this.chartAxesMinMaxChange), document.removeEventListener(C.SeriesColorChange, this.chartSeriesColorChange), document.removeEventListener(C.NoRenderPropChange, this.chartNoRenderPropChange), document.removeEventListener(C.LegendItemVisibilityChange, this.chartLegendItemVisibilityChange);
   }
-  /**
-   * @param chartData The chart's data
-   * @category private
-   */
   getDataExtent(e) {
     const t = this.getModel(this.selectedChartId)?.getConfig();
     let i = [];
@@ -341,11 +288,6 @@ class oe extends W {
     }
     return i;
   }
-  /**
-   * Update the axes bounds in the app state for the selected chart when the chart component calculates new min/max bounds.
-   *
-   * @category Private
-   */
   updateAxesBoundsInAppState(e) {
     e?.forEach((t) => {
       const { isXAxis: i, maximum: a, minimum: s } = t, r = this.getModel(this.selectedChartId);
@@ -366,11 +308,6 @@ class oe extends W {
       }
     });
   }
-  /**
-   * Get the popover placement based on chart list length.
-   *
-   * @category private
-   */
   getPlacement() {
     let e;
     if (this.popoverPlacement !== void 0)
@@ -381,28 +318,13 @@ class oe extends W {
     }
     return e;
   }
-  /**
-   * Event handler when a panel back clicked. reduces the drill by one.
-   *
-   * @category Event handler
-   */
   onBackFlow() {
     this.panelNumber -= 1;
   }
-  /**
-   * Event handler on add chart.
-   *
-   * @category Event handler
-   */
   onAddChartClick(e) {
     const { referenceElement: t, layerId: i } = e.detail;
     this.setupSelectChartTypePopover(t, i), this.addSelectChartTypePopover();
   }
-  /**
-   * Setup attributes and events on the popover
-   *
-   * @category Private
-   */
   setupSelectChartTypePopover(e, t) {
     if (this.selectChartTypePopover === void 0) {
       const i = {
@@ -413,43 +335,18 @@ class oe extends W {
     }
     this.selectChartTypePopover !== void 0 && (this.selectChartTypePopover.layerId = t, this.selectChartTypePopover.popoverReferenceElement = e, this.selectChartTypePopover.popoverPlacement = this.getPlacement());
   }
-  /**
-   * Ddd the popover to the dom
-   *
-   * @category Private
-   */
   addSelectChartTypePopover() {
     this.selectChartTypePopover !== void 0 && (document.body.contains(this.selectChartTypePopover) || (this.selectChartTypePopover.open = !0, document.body.appendChild(this.selectChartTypePopover), this.arcgisChartsConfigPopoverOpenChange.emit({ open: !0 })));
   }
-  /**
-   * Gets a model from the list based on the id.
-   *
-   * @param id Id of the model to get.
-   */
   getModel(e) {
     return this.modelList?.find((t) => t.getChartId() === e);
   }
-  /**
-   * Close and remove the popover
-   *
-   * @category Private
-   */
   removeSelectChartTypePopover() {
     this.selectChartTypePopover?.remove(), this.selectChartTypePopover = void 0, this.arcgisChartsConfigPopoverOpenChange.emit({ open: !1 });
   }
-  /**
-   * Clear partial models from the model list
-   *
-   * @category Private
-   */
   clearPartialModels() {
     this.modelList = this.modelList.filter((e) => !B(e.getConfig()));
   }
-  /**
-   * Event handler chart delete.
-   *
-   * @category Event handler
-   */
   onViewChartDelete(e) {
     const { chartId: t } = e.detail;
     if (t !== void 0) {
@@ -457,46 +354,21 @@ class oe extends W {
       this.modelList = [...this.modelList.filter((s) => s.getChartId() !== t)], a && this.syncChartsToLayers && ae(a, t);
     }
   }
-  /**
-   * Event handler chart to be selected.
-   *
-   * @category Event handler
-   */
   onViewChartsSelect(e) {
     this.selectedChartId === e.detail.chartId && this.arcgisChartsConfigSelectedChartChange.emit({
       key: "key",
       model: this.getModel(this.selectedChartId)
     }), this.selectedChartId = e.detail.chartId;
   }
-  /**
-   * event handled when chart config edited.
-   *
-   * @category Event handler
-   */
   onViewChartsEdit(e) {
     this.onViewChartsSelect(e), this.panelNumber = 1;
   }
-  /**
-   * Event handler view charts to be closed.
-   *
-   * @category Event handler
-   */
   onViewChartClose() {
     this.open = !1, this.removeSelectChartTypePopover(), this.selectChartTypePopover = void 0, this.arcgisChartsConfigChartViewChartClose.emit();
   }
-  /**
-   * Sets event-based props from the model data store.
-   *
-   * @param model
-   */
   setEventBasedPropsFromModelData(e) {
     this.chartData = e?.dataStore.chartData, this.r2 = e?.dataStore.r2, this.seriesColor = e?.dataStore.seriesColor, this.calculatedMinMaxBounds = e?.dataStore.calculatedMinMaxBounds, this.calculatedDataMinMaxBounds = e?.dataStore.calculatedDataMinMaxBounds;
   }
-  /**
-   * Creates a tooltip for the hovered action.
-   *
-   * @category Event handler
-   */
   createTooltip(e) {
     const t = e.target;
     switch (this.tooltip = O(t), t.icon) {
@@ -529,17 +401,9 @@ class oe extends W {
     }
     document.body.appendChild(this.tooltip);
   }
-  /**
-   * Destroys tooltip for the action that was being hovered.
-   *
-   * @category Event handler
-   */
   destroyTooltip() {
     Y(this.tooltip);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderViewCharts() {
     const e = ee({
       modelList: this.modelList,
@@ -549,15 +413,9 @@ class oe extends W {
     });
     return A(e, (t) => t.id, (t) => d`<arcgis-charts-config-view-charts .noGroup=${this.activeLayerId !== void 0} .modelList=${J(this.modelList, t.id.toString(), this.supportedChartTypes)} .selectedChartId=${this.selectedChartId ?? ""} .layer=${t} .disableEditing=${this.disableEditing} @arcgisChartsConfigViewChartSelect=${this.onViewChartsSelect} @arcgisChartsConfigViewChartEdit=${this.onViewChartsEdit} @arcgisChartsConfigViewChartDelete=${this.onViewChartDelete} @arcgisChartsConfigViewChartAddChart=${this.onAddChartClick}></arcgis-charts-config-view-charts>`);
   }
-  /** @category Lifecycle */
   render() {
     return this.open !== !1 ? d`<calcite-flow class=${h({ [m.rtl]: this.direction === "rtl" })} dir=${this.direction ?? P}>${L("charts-list", d`<calcite-flow-item .selected=${this.panelNumber === 0 || this.disableEditing} .heading=${this.headerTitle ?? this._messages.defaultHeaderTitle} closable @calciteFlowItemClose=${this.onViewChartClose} ${G(this.chartsListFlowItem)}>${this.renderViewCharts()}</calcite-flow-item>`)}${this.renderTabs()}</calcite-flow>` : null;
   }
-  /**
-   * Renders list of charts authoring tabs and their content.
-   *
-   * @category Private
-   */
   renderTabs() {
     const e = this.getModel(this.selectedChartId);
     return L("chart-edit", d`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? n.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? U(this._messages.pageFlowTitle, {
@@ -583,11 +441,6 @@ class oe extends W {
       this.selectedPanel = n.General;
     }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action></calcite-action-bar>` : null}${this.renderChartUIComponent()}</calcite-flow-item>`);
   }
-  /**
-   * Renders the chart UI editing component.
-   *
-   * @category Private
-   */
   renderChartUIComponent() {
     const e = this.getModel(this.selectedChartId), t = e?.getLayer();
     let i = null;

package/dist/components/arcgis-charts-config-field-select/customElement.d.ts

@@ -13,12 +13,14 @@ export declare class ArcgisChartsConfigFieldSelect extends LitElement {
      * disables the component
      *
      * @category Public
+     * @default false
      */
     disabled: boolean;
     /**
      * input is invalid
      *
      * @category Public
+     * @default false
      */
     invalid: boolean;
 }

package/dist/components/arcgis-charts-config-field-select/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as c, safeClassMap as t } from "@arcgis/lumina";
 import { css as a } 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.110 */
+v4.33.0-next.112 */
 const e = {
   fieldSelectButtonSection: "field-select-btn-section",
   fieldSelectButton: "field-select-btn",
@@ -22,9 +22,6 @@ class n extends c {
   static {
     this.styles = r;
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const i = `${e.fieldSelectButton} ${this.invalid ? e.fieldSelectButtonInvalid : ""}`;
     return l`<div class=${t(e.fieldSelectButtonSection)}><button class=${t(i)} .disabled=${this.disabled}><span class=${t(e.fieldSelectButtonText)}>${this.label}</span><span class=${t(e.fieldSelectButtonIcon)}><calcite-icon scale=s icon=chevron-down></calcite-icon></span></button></div>`;

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

@@ -23,12 +23,14 @@ export declare class ArcgisChartsConfigFontStyle extends LitElement {
      * boolean to open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
      * boolean to enable the close the panel.
      *
      * @category Public
+     * @default false
      */
     enableClose?: boolean;
     /**
@@ -43,6 +45,5 @@ export declare class ArcgisChartsConfigFontStyle extends LitElement {
      * @category
      */
     readonly arcgisChartsConfigFontStyleClose: TargetedEvent<this, undefined>;
-    /** @category Private */
     private _messages;
 }

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

@@ -18,7 +18,7 @@ import { LitElement as $, createEvent as p, safeClassMap as n } from "@arcgis/lu
 import { css as x } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.110 */
+v4.33.0-next.112 */
 const E = {
   arial: "Arial",
   arialBlack: "Arial Black",
@@ -52,13 +52,9 @@ class I extends $ {
   static {
     this.styles = w;
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Event handler */
   closePanel(t) {
     t.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigFontStyleClose.emit());
   }
-  /** @category Event handler */
   fontChange(t) {
     const f = t.target.selectedOption.value;
     if (f !== void 0) {
@@ -68,7 +64,6 @@ class I extends $ {
       this.isNewFontProperty("family", a) && (this.fontStyle = i(this.fontStyle, { font: a }), this.emitFontStyleEvent({ font: a }));
     }
   }
-  /** @category Event handler */
   fontSizeChange() {
     const t = this.fontSizeInputElement.value?.value;
     if (t !== void 0 && S(t, this.fontSizeInputElement.value?.min, this.fontSizeInputElement.value?.max)) {
@@ -84,55 +79,38 @@ class I extends $ {
       status: m.INVALID
     });
   }
-  /** @category Event handler */
   boldSelect() {
     let t = s.Bold;
     this.fontStyle?.font?.weight === t && (t = s.Normal);
     const e = { weight: t };
     this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
   }
-  /** @category Event handler */
   italicSelect() {
     let t = c.Italic;
     this.fontStyle?.font?.style === t && (t = c.Normal);
     const e = { style: t };
     this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
   }
-  /** @category Event handler */
   underlineSelect() {
     let t = r.Underline;
     this.fontStyle?.font?.decoration === t && (t = r.None);
     const e = { decoration: t };
     this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
   }
-  /** @category Event handler */
   colorChange(t) {
     const e = t.detail;
     this.fontStyle = i(this.fontStyle, { color: e }), this.emitFontStyleEvent({ color: e });
   }
-  /**
-   * @param payload
-   * @category Private
-   */
   emitFontStyleEvent(t) {
     this.arcgisChartsConfigFontStyleChange.emit(t);
   }
-  /**
-   * @param property The property of fontStyle.font to compare to
-   * @param font The new font
-   * @category Private
-   */
   isNewFontProperty(t, e) {
     return this.fontStyle?.font?.[t] !== e[t];
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderFonts() {
     const t = Object.values(E).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === y().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
     return this.fontStyle?.font?.family === "" && t.push(l`<calcite-option value selected></calcite-option>`), t;
   }
-  /** @category Lifecycle */
   render() {
     return l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.inputLabel)}>${this._messages.size}<calcite-input class=${n(o.numberInput)} type=number min=6 max=40 step=1 .value=${g(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${C(this.fontSizeInputElement)}></calcite-input></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === s.Bold}><calcite-icon scale=s icon=bold></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.italic ?? ""} @click=${this.italicSelect} scale=l .active=${this.fontStyle?.font?.style === c.Italic}><calcite-icon scale=s icon=italicize></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.underline ?? ""} @click=${this.underlineSelect} scale=l .active=${this.fontStyle?.font?.decoration === r.Underline}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(o.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
   }

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

@@ -30,6 +30,5 @@ export declare class ArcgisChartsConfigFormat extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
-    /** @category Private */
     private _messages;
 }

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

@@ -22,7 +22,7 @@ import { LitElement as Y, createEvent as F, safeClassMap as p } from "@arcgis/lu
 import { css as j } 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.110 */
+v4.33.0-next.112 */
 const v = {
   type: f.TS,
   color: [1, 1, 1, 255],
@@ -116,37 +116,24 @@ class z extends Y {
   static {
     this.styles = _;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model);
   }
   willUpdate(t) {
     t.has("model") && this.modelChange(this.model, t.get("model"));
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeFormatPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(t, e) {
     e?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), t?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /**
-   * Corrects selected text elements in DOM to match selected texts list
-   *
-   * @category Event handler
-   */
   correctTextElementSelection() {
     for (const t of this.selectableElements) {
       const e = this.selectedTexts.includes(t.value) || this.selectedSymbols.includes(t.value) || this.selectedBackground.includes(t.value);
       t.selected = e;
     }
   }
-  /** @category Private */
   formatPopoverChange(t) {
     this.arcgisChartsConfigFormatPopoverChange.emit({
       open: t,
@@ -155,11 +142,6 @@ class z extends Y {
       open: t
     });
   }
-  /**
-   * @param keys
-   * @param elementValue
-   * @category Private
-   */
   updateSelectedElement(t, e) {
     if (this.selectedElement = void 0, e === void 0) {
       const s = r(this.getFormatValue(t[0]));
@@ -172,23 +154,14 @@ class z extends Y {
       u(e) && (this.selectedSymbols?.length > 0 && (s = r(C)), this.selectedTexts?.length > 0 && (s = r(v))), this.selectedElement = s;
     }
   }
-  /**
-   * @param value
-   * @category Private
-   */
   initSelectedTexts(t) {
     let e = r(t);
     u(t) && (e = r(v)), this.selectedElement = e;
   }
-  /**
-   * @param value
-   * @category Private
-   */
   initSelectedSymbols(t) {
     let e = r(t);
     u(t) && (e = r(C)), this.selectedElement = e;
   }
-  /** @category Private */
   setupFormatPopover() {
     this.formatPopover = k(this.formatPopover);
     const t = this.selectedElement, e = {
@@ -205,15 +178,12 @@ class z extends Y {
     this.formatPopover = N(G.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
     Array.isArray(this.selectedElement) ? (this.formatPopover.open = !0, this.addFormatPopover()) : (this.formatPopover.open = !1, this.removeFormatPopover());
   }
-  /** @category Private */
   removeFormatPopover() {
     this.formatPopover !== null && (this.formatPopover.open = !1, this.formatPopover = k(this.formatPopover)), this.formatPopoverChange(!1);
   }
-  /** @category Private */
   addFormatPopover() {
     this.formatPopover !== null && !document.body.contains(this.formatPopover) && document.body.appendChild(this.formatPopover), this.formatPopoverChange(!0);
   }
-  /** @category Private */
   getFormatValue(t) {
     switch (t) {
       case i.Title:
@@ -246,7 +216,6 @@ class z extends Y {
         return;
     }
   }
-  /** @category Private */
   setFormatValue(t, e) {
     switch (t) {
       case i.Title:
@@ -290,13 +259,6 @@ class z extends Y {
         break;
     }
   }
-  //#endregion
-  //#region Rendering
-  /**
-   * render and store format UI elements
-   *
-   * @returns textElements and symbolElements
-   */
   renderFormatElements() {
     this.textProperties = [
       i.Title,
@@ -317,12 +279,10 @@ class z extends Y {
     const t = this.textProperties.map((s) => this.renderTextElement(s, this.textPropertyChange)), e = this.symbolProperties.map((s) => s === i.Background ? this.renderTextElement(s, this.backgroundChange) : this.renderTextElement(s, this.symbolPropertyChange));
     return { textElements: t, symbolElements: e };
   }
-  /** @category Render UX */
   renderTextElement(t, e) {
     const s = O(t), o = this.getFormatValue(t), a = typeof o == "string" ? o : "", n = this.selectedTexts.includes(t) || this.selectedSymbols.includes(t) || this.selectedBackground.includes(t);
     return P`<calcite-list-item class=${p(g.element)} .label=${this._messages[t]} .description=${a} .value=${t} .selected=${n} @click=${e} ${B(this.updateSelectableElements)}>${s !== void 0 ? P`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
   }
-  /** @category Lifecycle */
   render() {
     const { textElements: t, symbolElements: e } = this.renderFormatElements();
     return P`<div class=${p(g.sectionLabel)}>${this._messages.textElements}</div><calcite-list label class=${p(g.elementList)} selection-mode=multiple selection-appearance=border @calciteListChange=${this.correctTextElementSelection}>${t}</calcite-list><div class=${p(g.sectionLabel)}>${this._messages.symbolElements}</div><calcite-list label class=${p(g.elementList)} selection-mode=single selection-appearance=border>${e}</calcite-list>`;

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

@@ -23,12 +23,14 @@ export declare class ArcgisChartsConfigFormatPopover extends LitElement {
      * Place the popover in the give placement.
      *
      * @category Public
+     * @default "leading"
      */
     placement: HTMLCalcitePopoverElement["placement"];
     /**
      * boolean to open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
@@ -61,6 +63,5 @@ export declare class ArcgisChartsConfigFormatPopover extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, undefined>;
-    /** @category Private */
     private _messages;
 }

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

@@ -18,7 +18,7 @@ import { LitElement as c, createEvent as s, safeClassMap as m } from "@arcgis/lu
 import { css as h } 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.110 */
+v4.33.0-next.112 */
 const g = {
   jsAppFlyout: "js-app-flyout"
 }, C = h``;
@@ -32,43 +32,24 @@ class f extends c {
   static {
     this.styles = C;
   }
-  //#endregion
-  //#region Public Methods
-  /**
-   * Calls `reposition()` method on popover element.
-   *
-   * @category Public
-   */
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   updated() {
     a(this.popoverElement.value, this.open);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Private */
   closePopover() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /** @category Event handler */
   updateSymbolProperties(e) {
     this.selectedElement = e.target.lineStyle, this.arcgisChartsConfigFormatPopoverSymbolChange.emit(e.detail);
   }
-  /** @category Event handler */
   updateTextProperties(e) {
     this.selectedElement = e.target.fontStyle, this.arcgisChartsConfigFormatPopoverTextChange.emit(e.detail);
   }
-  /** @category Event handler */
   updateColorProperties(e) {
     this.selectedElement = e.detail, this.arcgisChartsConfigFormatPopoverColorChange.emit(e.detail);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const e = this.selectedElement, t = this.selectedElement;
     return o`<div class=${m(g.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} label @calcitePopoverClose=${this.closePopover} pointer-disabled ${p(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.closePopover} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === r.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${t?.type === r.TS ? o`<arcgis-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @arcgisChartsConfigFontStyleClose=${this.closePopover} @arcgisChartsConfigFontStyleChange=${this.updateTextProperties}></arcgis-charts-config-font-style>` : null}</calcite-popover></div>`;