@arcgis/charts-components 4.33.0-next.98 → 4.34.0-next.0

package/dist/components/arcgis-charts-config-create-flow/resource.d.ts

@@ -1,9 +1,8 @@
 import { ChartModel } from '../../model';
-import { SupportedCharts } from '@arcgis/charts-shared-utils';
+import { SupportedCharts } from '../../utils';
 import { SupportedLayer } from '@arcgis/charts-spec';
 import { default as Sublayer } from '@arcgis/core/layers/support/Sublayer.js';
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly chartUIComponent: "chart-ui-component";
     readonly addChartContainer: "add-chart-container";
     readonly addChart: "add-chart";
@@ -47,13 +46,6 @@ export declare function updateAllChartsOnLayers(layers: (Sublayer | SupportedLay
  * @param model The chart model to update the layer based on.
  */
 export declare function updateChartOnLayer(layer: Sublayer | SupportedLayer | undefined, model: ChartModel): void;
-/**
- * Add a new chart to the layer's `charts` array.
- *
- * @param layer The layer to add the chart to.
- * @param model The chart model to add to the layer.
- */
-export declare function addChartToLayer(layer: Sublayer | SupportedLayer | undefined, model: ChartModel): void;
 /**
  * Delete a chart from the layer's `charts` array.
  *

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

@@ -3,15 +3,15 @@ import { html as l } from "lit-html";
 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.98 */
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.0 */
 const e = {
   fieldSelectButtonSection: "field-select-btn-section",
   fieldSelectButton: "field-select-btn",
   fieldSelectButtonText: "field-select-btn-text",
   fieldSelectButtonIcon: "field-select-btn-icon",
   fieldSelectButtonInvalid: "field-select-btn-invalid"
-}, r = a`.field-select-btn-section{background-color:var(--arcgis-charts-input-background);min-width:100%}.field-select-btn{background:var(--arcgis-charts-background-clear);border:1px solid;border-radius:var(--arcgis-charts-border-radius);display:flex;align-items:center;justify-content:space-between;padding:var(--arcgis-charts-side-spacing-half) var(--arcgis-charts-side-spacing-quarter);cursor:pointer;width:100%;text-align:unset}.field-select-btn:not(.field-select-btn-invalid){border-color:var(--arcgis-charts-border)}.field-select-btn.field-select-btn-invalid{border-color:var(--arcgis-charts-border-invalid)}.field-select-btn-exp{width:calc(100% - 32px)}.field-select-btn-exp .field-select-btn{border:none;border-radius:0;border-right:1px solid var(--arcgis-charts-border)}.field-select-btn-text{flex:0 1 auto;overflow:hidden;padding:0 var(--arcgis-charts-side-spacing-eighth);text-overflow:ellipsis;white-space:nowrap}.field-select-btn-icon{flex:0 0 0%;padding:0 var(--arcgis-charts-side-spacing-half)}`;
+}, r = a`.field-select-btn-section{background-color:var(--arcgis-charts-input-background);min-width:100%}.field-select-btn{background:var(--arcgis-charts-background-clear);border:1px solid;border-radius:var(--arcgis-charts-border-radius);display:flex;align-items:center;justify-content:space-between;padding:var(--arcgis-charts-side-spacing-half) var(--arcgis-charts-side-spacing-quarter);cursor:pointer;width:100%;text-align:unset}.field-select-btn:not(.field-select-btn-invalid){border-color:var(--arcgis-charts-border)}.field-select-btn.field-select-btn-invalid{border-color:var(--arcgis-charts-border-invalid)}.field-select-btn-exp{width:calc(100% - 32px)}.field-select-btn-exp .field-select-btn{border:none;border-radius:0;border-right:1px solid var(--arcgis-charts-border)}.field-select-btn-text{flex:0 1 auto;overflow:hidden;padding:0 var(--arcgis-charts-side-spacing-eighth);text-overflow:ellipsis;white-space:nowrap}.field-select-btn-icon{flex:0 0 0%;padding:0 var(--arcgis-charts-side-spacing-half)}.field-select-btn:disabled{cursor:default}`;
 class n extends c {
   constructor() {
     super(...arguments), this.disabled = !1, this.invalid = !1;
@@ -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;
     /**
@@ -42,7 +44,6 @@ export declare class ArcgisChartsConfigFontStyle extends LitElement {
      *
      * @category
      */
-    readonly arcgisChartsConfigFontStyleClose: TargetedEvent<this, undefined>;
-    /** @category Private */
+    readonly arcgisChartsConfigFontStyleClose: TargetedEvent<this, void>;
     private _messages;
 }

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

@@ -1,16 +1,24 @@
 import { c as d } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
-import { getDefaultTextSymbol as u } from "@arcgis/charts-shared-utils";
-import { RESTSymbolType as y, RESTFontWeight as s, RESTFontStyle as c, RESTFontDecoration as r } from "@arcgis/charts-spec";
-import { merge as o } from "lodash-es";
-import { a as S, m as h, s as g, b as m } from "../../chunks/chart-ui-utils.js";
-import { u as v } from "../../chunks/useT9n.js";
-import { createRef as b, ref as C } from "lit-html/directives/ref.js";
-import { LitElement as $, createEvent as p, safeClassMap as i } from "@arcgis/lumina";
+import { RESTSymbolType as u, RESTFontWeight as s, RESTFontStyle as c, RESTFontDecoration as r } from "@arcgis/charts-spec";
+import { merge as i } from "lodash-es";
+import "d3-array";
+import { a1 as y } from "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { b as S, m as h, s as g, c as m } from "../../chunks/chart-ui-utils2.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { createRef as v, ref as C } from "lit-html/directives/ref.js";
+import { LitElement as $, createEvent as p, safeClassMap as n } from "@arcgis/lumina";
 import { css as x } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.98 */
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.0 */
 const E = {
   arial: "Arial",
   arialBlack: "Arial Black",
@@ -26,17 +34,16 @@ const E = {
   times: "Times",
   timesNewRoman: "Times New Roman",
   verdana: "Verdana"
-}, n = {
-  hostDiv: "host-div",
+}, o = {
   fontStyleContainer: "font-style-container",
   font: "font",
   numberInput: "number-input",
   inputLabel: "input-label"
-}, w = x`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.host-div{overflow-y:auto}.host-div calcite-panel .font-style-container{display:flex;padding:0 1rem}.host-div calcite-panel .font-style-container .input-label{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important}.host-div calcite-panel .font-style-container .number-input{margin-bottom:.5rem;display:flex}.host-div calcite-panel .font-style-container .number-input>div{width:100%}.host-div calcite-panel .font-style-container calcite-action,.host-div calcite-panel .font-style-container calcite-label{flex:1 1 0px;display:flex;width:0px}.host-div calcite-panel .font-style-container calcite-label{flex-grow:2}.host-div calcite-panel calcite-label.font{display:block;margin-top:1rem}`;
+}, w = x`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto}:host calcite-panel .font-style-container{display:flex;padding:0 1rem}:host calcite-panel .font-style-container .input-label{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important}:host calcite-panel .font-style-container .number-input{margin-bottom:.5rem;display:flex}:host calcite-panel .font-style-container .number-input>div{width:100%}:host calcite-panel .font-style-container calcite-action,:host calcite-panel .font-style-container calcite-label{flex:1 1 0px;display:flex;width:0px}:host calcite-panel .font-style-container calcite-label{flex-grow:2}:host calcite-panel calcite-label.font{display:block;margin-top:1rem}`;
 class I extends $ {
   constructor() {
-    super(...arguments), this._messages = v(), this.fontSizeInputElement = b(), this.fontStyle = {
-      type: y.TS
+    super(...arguments), this._messages = b(), this.fontSizeInputElement = v(), this.fontStyle = {
+      type: u.TS
     }, this.arcgisChartsConfigFontStyleChange = p(), this.arcgisChartsConfigFontStyleClose = p();
   }
   static {
@@ -45,30 +52,25 @@ 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) {
       const a = {
         family: f
       };
-      this.isNewFontProperty("family", a) && (this.fontStyle = o(this.fontStyle, { font: a }), this.emitFontStyleEvent({ font: a }));
+      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)) {
       const e = {
         size: Number.parseInt(t)
       };
-      this.isNewFontProperty("size", e) && (this.fontStyle = o(this.fontStyle, { font: e }), this.emitFontStyleEvent({ font: e })), this.fontSizeInputElement.value && h({
+      this.isNewFontProperty("size", e) && (this.fontStyle = i(this.fontStyle, { font: e }), this.emitFontStyleEvent({ font: e })), this.fontSizeInputElement.value && h({
         inputElement: this.fontSizeInputElement.value,
         status: m.IDLE
       });
@@ -77,57 +79,40 @@ 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 = o(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
+    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 = o(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
+    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 = o(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
+    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 = o(this.fontStyle, { color: e }), this.emitFontStyleEvent({ color: e });
+    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 === u().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
+    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`<div class=${i(n.hostDiv)}><calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${i(n.fontStyleContainer)}><calcite-label class=${i(n.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${i(n.fontStyleContainer)}><calcite-label class=${i(n.inputLabel)}>${this._messages.size}<calcite-input class=${i(n.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=${i(n.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></div>`;
+    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>`;
   }
 }
 d("arcgis-charts-config-font-style", I);

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

@@ -1,6 +1,5 @@
 import { Color, IFont } from '@arcgis/charts-spec';
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly fontStyleContainer: "font-style-container";
     readonly font: "font";
     readonly numberInput: "number-input";

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { ChartModel } from '../../model';
-import { PopoverOpenChangePayload } from '../../utils/event-payloads';
+import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisChartsConfigFormatPopover } from '../arcgis-charts-config-format-popover/customElement.js';
@@ -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

@@ -1,19 +1,29 @@
 import { c as A } from "../../chunks/runtime.js";
 import { ref as B } from "lit-html/directives/ref.js";
-import { isSLS as u, isWebChartTextSymbol as l, removePopover as E, createPopover as V, PopoverType as $ } from "@arcgis/charts-shared-utils";
-import { RESTSimpleLineSymbolStyle as M, RESTSymbolType as f, RESTFontWeight as D, RESTFontStyle as w, RESTFontDecoration as N } from "@arcgis/charts-spec";
-import { U as G, V as i, W as c } from "../../chunks/scatter-plot-model.js";
-import { isEmpty as b, cloneDeep as r, isArray as L, isObject as k, mergeWith as W } from "lodash-es";
-import { e as y, b as m, d, f as S, c as h, g as T, h as O } from "../../chunks/type-guards.js";
-import { l as X } from "../../chunks/chart-ui-utils.js";
+import { C as M, F as i, L as m } from "../../chunks/common.js";
+import { c as y, h as d, g as c, k as S, o as h, l as T, e as V } from "../../chunks/type-guards.js";
+import { RESTSimpleLineSymbolStyle as $, RESTSymbolType as f, RESTFontWeight as D, RESTFontStyle as w, RESTFontDecoration as N } from "@arcgis/charts-spec";
+import { isEmpty as u, cloneDeep as r, isArray as L, isObject as E, mergeWith as G } from "lodash-es";
+import "d3-array";
+import "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { c as b, e as l } from "../../chunks/index4.js";
+import { r as k, c as W, P as O } from "../../chunks/popover-ui-utils.js";
+import { n as X } from "../../chunks/chart-ui-utils2.js";
 import { u as R } from "../../chunks/useT9n.js";
-import { html as v } from "lit";
-import { LitElement as Y, createEvent as F, safeClassMap as g } from "@arcgis/lumina";
+import { html as P } from "lit";
+import { LitElement as Y, createEvent as F, safeClassMap as p } from "@arcgis/lumina";
 import { css as _ } 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.98 */
-const P = {
+See https://js.arcgis.com/4.34/esri/copyright.txt for details.
+v4.34.0-next.0 */
+const v = {
   type: f.TS,
   color: [1, 1, 1, 255],
   font: {
@@ -26,14 +36,13 @@ const P = {
 }, C = {
   type: f.SLS,
   color: [1, 1, 1, 255],
-  style: M.Solid,
+  style: $.Solid,
   width: 2
-}, p = {
-  hostDiv: "host-div",
+}, g = {
   element: "chart-element",
   elementList: "element-list",
   sectionLabel: "section-label"
-}, j = _`.host-div{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)}.element-list{margin:var(--arcgis-charts-config-margin-minor)}.element{user-select:none}`;
+}, j = _`:host{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)}.element-list{margin:var(--arcgis-charts-config-margin-minor)}.element{user-select:none}`;
 class z extends Y {
   constructor() {
     super(...arguments), this._messages = R(), this.formatPopover = null, this.selectableElements = [], this.textProperties = [], this.symbolProperties = [], this.symbolPropertyChange = (t) => {
@@ -43,7 +52,7 @@ class z extends Y {
         this.selectedSymbols = [], this.updateSelectedElement(this.selectedSymbols);
       else {
         const o = this.getFormatValue(s);
-        this.selectedSymbols = [s], this.initSelectedSymbols(u(o) ? o : C);
+        this.selectedSymbols = [s], this.initSelectedSymbols(b(o) ? o : C);
       }
       this.setupFormatPopover();
     }, this.textPropertyChange = (t) => {
@@ -61,20 +70,20 @@ class z extends Y {
         this.selectedTexts = [], this.updateSelectedElement(this.selectedTexts), this.setupFormatPopover();
       else {
         const o = this.getFormatValue(s);
-        this.selectedTexts = [s], this.initSelectedTexts(l(o) ? o : P), this.setupFormatPopover();
+        this.selectedTexts = [s], this.initSelectedTexts(l(o) ? o : v), this.setupFormatPopover();
       }
       this.lastSelectedText = s;
     }, this.backgroundChange = (t) => {
       const e = t;
       let s;
-      e.target?.localName === "calcite-list-item" ? s = e.target?.value : s = e.target?.parentNode?.value, this.selectedSymbols = [], this.selectedTexts = [], this.selectedBackground.includes(s) ? (this.selectedBackground = [], this.selectedElement = {}) : (this.selectedBackground = [s], this.selectedElement = b(this.getFormatValue(s)) ? void 0 : this.getFormatValue(s)), this.setupFormatPopover();
+      e.target?.localName === "calcite-list-item" ? s = e.target?.value : s = e.target?.parentNode?.value, this.selectedSymbols = [], this.selectedTexts = [], this.selectedBackground.includes(s) ? (this.selectedBackground = [], this.selectedElement = {}) : (this.selectedBackground = [s], this.selectedElement = u(this.getFormatValue(s)) ? void 0 : this.getFormatValue(s)), this.setupFormatPopover();
     }, this.updateSymbolProps = (t) => {
       const e = t.detail;
       this.selectedSymbols.forEach((s) => {
         this.setFormatValue(s, e);
       }), this.selectedElement = r(t.target.selectedElement);
     }, this.updateBackground = (t) => {
-      this.setFormatValue(G.Background, t.detail), this.selectedElement = t.detail;
+      this.setFormatValue(M.Background, t.detail), this.selectedElement = t.detail;
     }, this.updateTextProps = (t) => {
       const { font: e, color: s } = t.detail;
       this.selectedTexts.forEach((o) => {
@@ -92,7 +101,7 @@ class z extends Y {
       this.formatPopover === t?.target && (this.selectedTexts = [], this.selectedSymbols = [], this.selectedBackground = [], this.selectedElement = {}, this.removeFormatPopover());
     }, this.mergeFormatValues = (t, e) => {
       let s = !1;
-      L(t) && L(e) || k(t) && k(e) ? s = !0 : s = t === e;
+      L(t) && L(e) || E(t) && E(e) ? s = !0 : s = t === e;
       const o = typeof t == "number" || typeof e == "number" ? Number.NaN : "";
       return s ? void 0 : o;
     }, this.openChange = (t) => {
@@ -107,37 +116,24 @@ class z extends Y {
   static {
     this.styles = j;
   }
-  //#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,
@@ -146,42 +142,28 @@ 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]));
       this.selectedElement = t?.reduce((o, a) => {
         const n = this.getFormatValue(a);
-        return W(o, n, this.mergeFormatValues);
+        return G(o, n, this.mergeFormatValues);
       }, s);
     } else {
       let s = r(e);
-      b(e) && (this.selectedSymbols?.length > 0 && (s = r(C)), this.selectedTexts?.length > 0 && (s = r(P))), this.selectedElement = s;
+      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);
-    b(t) && (e = r(P)), this.selectedElement = e;
+    u(t) && (e = r(v)), this.selectedElement = e;
   }
-  /**
-   * @param value
-   * @category Private
-   */
   initSelectedSymbols(t) {
     let e = r(t);
-    b(t) && (e = r(C)), this.selectedElement = e;
+    u(t) && (e = r(C)), this.selectedElement = e;
   }
-  /** @category Private */
   setupFormatPopover() {
-    this.formatPopover = E(this.formatPopover);
+    this.formatPopover = k(this.formatPopover);
     const t = this.selectedElement, e = {
       selectedElement: this.selectedElement,
       referenceElement: this.el,
@@ -193,18 +175,15 @@ class z extends Y {
       placement: "auto",
       popoverClose: this.formatPopoverClose
     };
-    this.formatPopover = V($.FormatPopover, e), t?.type === f.TS || t?.type === f.SLS || // To check if the selected element is background.
+    this.formatPopover = W(O.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 = E(this.formatPopover)), this.formatPopoverChange(!1);
+    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:
@@ -212,11 +191,11 @@ class z extends Y {
       case i.Description:
         return this.model.getDescriptionSymbol();
       case i.XAxisTitle:
-        return d(this.model) ? this.model.getXAxisTitleSymbol() : void 0;
+        return c(this.model) ? this.model.getXAxisTitleSymbol() : void 0;
       case i.YAxisTitle:
-        return m(this.model) ? this.model.getYAxisTitleSymbol() : void 0;
+        return d(this.model) ? this.model.getYAxisTitleSymbol() : void 0;
       case i.AxisLabels:
-        return d(this.model) ? this.model.getAxisLabelsSymbol() : void 0;
+        return c(this.model) ? this.model.getAxisLabelsSymbol() : void 0;
       case i.GuideLabels:
         return T(this.model) ? this.model.getGuideLabelsSymbol() : void 0;
       case i.LegendText:
@@ -225,11 +204,11 @@ class z extends Y {
         return h(this.model) ? this.model.getLegendTitleSymbol() : void 0;
       case i.DataLabels:
         return S(this.model) ? this.model.getDataLabelsSymbol() : void 0;
-      case c.AxisLines:
-        return d(this.model) ? this.model.getAxisLinesSymbol() : void 0;
-      case c.GridLines:
-        return m(this.model) ? this.model.getGridLinesSymbol() : void 0;
-      case c.LeaderLines:
+      case m.AxisLines:
+        return c(this.model) ? this.model.getAxisLinesSymbol() : void 0;
+      case m.GridLines:
+        return d(this.model) ? this.model.getGridLinesSymbol() : void 0;
+      case m.LeaderLines:
         return y(this.model) ? this.model.getTicksSymbol() : void 0;
       case i.Background:
         return this.model.getBackgroundColor();
@@ -237,7 +216,6 @@ class z extends Y {
         return;
     }
   }
-  /** @category Private */
   setFormatValue(t, e) {
     switch (t) {
       case i.Title:
@@ -247,13 +225,13 @@ class z extends Y {
         l(e) && this.model.setDescriptionSymbol(e);
         break;
       case i.XAxisTitle:
-        d(this.model) && l(e) && this.model.setXAxisTitleSymbol(e);
+        c(this.model) && l(e) && this.model.setXAxisTitleSymbol(e);
         break;
       case i.YAxisTitle:
-        m(this.model) && l(e) && this.model.setYAxisTitleSymbol(e);
+        d(this.model) && l(e) && this.model.setYAxisTitleSymbol(e);
         break;
       case i.AxisLabels:
-        d(this.model) && l(e) && this.model.setAxisLabelsSymbol(e);
+        c(this.model) && l(e) && this.model.setAxisLabelsSymbol(e);
         break;
       case i.GuideLabels:
         T(this.model) && l(e) && this.model.setGuideLabelsSymbol(e);
@@ -267,56 +245,47 @@ class z extends Y {
       case i.DataLabels:
         S(this.model) && l(e) && this.model.setDataLabelsSymbol(e);
         break;
-      case c.AxisLines:
-        d(this.model) && u(e) && this.model.setAxisLinesSymbol(e);
+      case m.AxisLines:
+        c(this.model) && b(e) && this.model.setAxisLinesSymbol(e);
         break;
-      case c.GridLines:
-        m(this.model) && u(e) && this.model.setGridLinesSymbol(e);
+      case m.GridLines:
+        d(this.model) && b(e) && this.model.setGridLinesSymbol(e);
         break;
-      case c.LeaderLines:
-        y(this.model) && u(e) && this.model.setTicksSymbol(e);
+      case m.LeaderLines:
+        y(this.model) && b(e) && this.model.setTicksSymbol(e);
         break;
       case i.Background:
         Array.isArray(e) && this.model.setBackgroundColor(e);
         break;
     }
   }
-  //#endregion
-  //#region Rendering
-  /**
-   * render and store format UI elements
-   *
-   * @returns textElements and symbolElements
-   */
   renderFormatElements() {
     this.textProperties = [
       i.Title,
-      ...d(this.model) ? [i.XAxisTitle] : [],
-      ...m(this.model) ? [i.YAxisTitle] : [],
+      ...c(this.model) ? [i.XAxisTitle] : [],
+      ...d(this.model) ? [i.YAxisTitle] : [],
       ...h(this.model) ? [i.LegendTitle] : [],
       i.Description,
       ...h(this.model) ? [i.LegendText] : [],
-      ...d(this.model) ? [i.AxisLabels] : [],
+      ...c(this.model) ? [i.AxisLabels] : [],
       ...T(this.model) ? [i.GuideLabels] : [],
       ...S(this.model) ? [i.DataLabels] : []
-    ], O(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
+    ], V(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
       i.Background,
-      ...d(this.model) ? [c.AxisLines] : [],
-      ...m(this.model) ? [c.GridLines] : [],
-      ...y(this.model) ? [c.LeaderLines] : []
+      ...c(this.model) ? [m.AxisLines] : [],
+      ...d(this.model) ? [m.GridLines] : [],
+      ...y(this.model) ? [m.LeaderLines] : []
     ];
     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 = X(t), o = this.getFormatValue(t), a = typeof o == "string" ? o : "", n = this.selectedTexts.includes(t) || this.selectedSymbols.includes(t) || this.selectedBackground.includes(t);
-    return v`<calcite-list-item class=${g(p.element)} .label=${this._messages[t]} .description=${a} .value=${t} .selected=${n} @click=${e} ${B(this.updateSelectableElements)}>${s !== void 0 ? v`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
+    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 v`<div class=${g(p.hostDiv)}><div class=${g(p.sectionLabel)}>${this._messages.textElements}</div><calcite-list label class=${g(p.elementList)} selection-mode=multiple selection-appearance=border @calciteListChange=${this.correctTextElementSelection}>${t}</calcite-list><div class=${g(p.sectionLabel)}>${this._messages.symbolElements}</div><calcite-list label class=${g(p.elementList)} selection-mode=single selection-appearance=border>${e}</calcite-list></div>`;
+    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>`;
   }
 }
 A("arcgis-charts-config-format", z);

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

@@ -1,5 +1,4 @@
 export declare const HTMLClasses: {
-    readonly hostDiv: "host-div";
     readonly element: "chart-element";
     readonly elementList: "element-list";
     readonly sectionLabel: "section-label";