@arcgis/charts-components 4.34.0-next.5 → 4.34.0-next.51

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

@@ -1,9 +1,9 @@
 import { c as d } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
-import { RESTSymbolType as u, RESTFontWeight as s, RESTFontStyle as c, RESTFontDecoration as r } from "@arcgis/charts-spec";
+import { css as u, html as l } from "lit";
+import { RESTSymbolType as y, 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 { a1 as S } 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";
@@ -11,14 +11,13 @@ 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";
+import { b as g, m as h, s as b, c as m } from "../../chunks/chart-ui-utils2.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { createRef as C, ref as $ } from "lit-html/directives/ref.js";
+import { LitElement as x, createEvent as p, safeClassMap as n } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const E = {
   arial: "Arial",
   arialBlack: "Arial Black",
@@ -39,11 +38,11 @@ const E = {
   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{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 $ {
+}, w = u`.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 x {
   constructor() {
-    super(...arguments), this._messages = b(), this.fontSizeInputElement = v(), this.fontStyle = {
-      type: u.TS
+    super(...arguments), this._messages = v(), this.fontSizeInputElement = C(), this.fontStyle = {
+      type: y.TS
     }, this.arcgisChartsConfigFontStyleChange = p(), this.arcgisChartsConfigFontStyleClose = p();
   }
   static {
@@ -66,7 +65,7 @@ class I extends $ {
   }
   fontSizeChange() {
     const t = this.fontSizeInputElement.value?.value;
-    if (t !== void 0 && S(t, this.fontSizeInputElement.value?.min, this.fontSizeInputElement.value?.max)) {
+    if (t !== void 0 && g(t, this.fontSizeInputElement.value?.min, this.fontSizeInputElement.value?.max)) {
       const e = {
         size: Number.parseInt(t)
       };
@@ -108,11 +107,11 @@ class I extends $ {
     return this.fontStyle?.font?.[t] !== e[t];
   }
   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>`);
+    const t = Object.values(E).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === S().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;
   }
   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>`;
+    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=${b(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${$(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-format/customElement.js

@@ -1,7 +1,7 @@
 import { c as A } from "../../chunks/runtime.js";
-import { ref as B } from "lit-html/directives/ref.js";
+import { ref as B } from "lit/directives/ref.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 { d as y, j as d, h as c, l as S, p as h, m as T, f 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";
@@ -17,12 +17,11 @@ 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 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";
+import { css as Y, html as P } from "lit";
+import { LitElement as j, createEvent as F, safeClassMap as p } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const v = {
   type: f.TS,
   color: [1, 1, 1, 255],
@@ -42,8 +41,8 @@ const v = {
   element: "chart-element",
   elementList: "element-list",
   sectionLabel: "section-label"
-}, 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 {
+}, _ = Y`: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 j {
   constructor() {
     super(...arguments), this._messages = R(), this.formatPopover = null, this.selectableElements = [], this.textProperties = [], this.symbolProperties = [], this.symbolPropertyChange = (t) => {
       const e = t;
@@ -114,7 +113,7 @@ class z extends Y {
     this.properties = { selectedSymbols: 16, selectedTexts: 16, selectedBackground: 16, selectedElement: 16, messageOverrides: 0, model: 0 };
   }
   static {
-    this.styles = j;
+    this.styles = _;
   }
   load() {
     this.modelChange(this.model);

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

@@ -1,5 +1,5 @@
 import { c as i } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
+import { css as a, html as o } from "lit";
 import { RESTSymbolType as r } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
@@ -11,20 +11,19 @@ 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 { e as a } from "../../chunks/popover-ui-utils.js";
-import { u as l } from "../../chunks/useT9n.js";
-import { createRef as n, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as c, createEvent as s, safeClassMap as m } from "@arcgis/lumina";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { e as l } from "../../chunks/popover-ui-utils.js";
+import { u as n } from "../../chunks/useT9n.js";
+import { createRef as p, ref as c } from "lit-html/directives/ref.js";
+import { LitElement as h, createEvent as s, safeClassMap as m } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const g = {
   jsAppFlyout: "js-app-flyout"
-}, C = h``;
-class f extends c {
+}, C = a``;
+class f extends h {
   constructor() {
-    super(...arguments), this._messages = l(), this.popoverElement = n(), this.placement = "leading", this.arcgisChartsConfigFormatPopoverColorChange = s(), this.arcgisChartsConfigFormatPopoverSymbolChange = s(), this.arcgisChartsConfigFormatPopoverTextChange = s(), this.arcgisChartsConfigPopoverClose = s();
+    super(...arguments), this._messages = n(), this.popoverElement = p(), this.placement = "leading", this.arcgisChartsConfigFormatPopoverColorChange = s(), this.arcgisChartsConfigFormatPopoverSymbolChange = s(), this.arcgisChartsConfigFormatPopoverTextChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 2, referenceElement: 2, placement: 3, open: 7 };
@@ -36,7 +35,7 @@ class f extends c {
     await this.popoverElement.value?.reposition();
   }
   updated() {
-    a(this.popoverElement.value, this.open);
+    l(this.popoverElement.value, this.open);
   }
   closePopover() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
@@ -52,7 +51,7 @@ class f extends c {
   }
   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>`;
+    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 ${c(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>`;
   }
 }
 i("arcgis-charts-config-format-popover", f);

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

@@ -1,25 +1,24 @@
 import { c as r } from "../../chunks/runtime.js";
-import { o, g as n, h as c } from "../../chunks/type-guards.js";
+import { p as o, h as n, j as c } from "../../chunks/type-guards.js";
 import { WebChartLegendPositions as l } from "@arcgis/charts-spec";
 import { isEmpty as m } from "lodash-es";
 import { m as g, c as d } from "../../chunks/chart-ui-utils2.js";
 import { u as b } from "../../chunks/useT9n.js";
-import { html as a } from "lit";
-import { createRef as p, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as x, safeClassMap as i } from "@arcgis/lumina";
-import { css as f } from "@lit/reactive-element/css-tag.js";
+import { css as p, html as a } from "lit";
+import { createRef as u, ref as x } from "lit-html/directives/ref.js";
+import { LitElement as f, safeClassMap as i } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const s = {
   textInput: "text-input",
   label: "label",
   labelContainer: "label-container",
   select: "select"
-}, $ = f`.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{display:flex;flex-direction:column;margin-top:var(--arcgis-charts-top-section-margin)}.text-input,.select{margin-bottom:var(--arcgis-charts-inter-section-margin)}.label{display:flex;justify-content:space-between}.label-container{display:flex;flex-direction:column;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}`;
-class C extends x {
+}, $ = p`.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{display:flex;flex-direction:column;margin-top:var(--arcgis-charts-top-section-margin)}.text-input,.select{margin-bottom:var(--arcgis-charts-inter-section-margin)}.label{display:flex;justify-content:space-between}.label-container{display:flex;flex-direction:column;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}`;
+class C extends f {
   constructor() {
-    super(...arguments), this._messages = b(), this.characterLimitInputElement = p(), this.onModelConfigChange = () => {
+    super(...arguments), this._messages = b(), this.characterLimitInputElement = u(), this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.isChartTitleInvalid = !1, this.open = !1;
   }
@@ -97,7 +96,7 @@ class C extends x {
     ] : [];
   }
   render() {
-    return a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.chartTitle}<calcite-switch .checked=${this.model.getChartTitleVisibility()} @calciteSwitchChange=${this.enableChartTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} type=text .disabled=${!this.model.getChartTitleVisibility()} .value=${this.model.getTitleText()} @calciteInputInput=${this.setChartTitle} ${u(this.characterLimitInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.emptyChartTitle} .isInvalid=${this.isChartTitleInvalid}></arcgis-charts-config-invalid-input-message></div>${n(this.model) ? [
+    return a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.chartTitle}<calcite-switch .checked=${this.model.getChartTitleVisibility()} @calciteSwitchChange=${this.enableChartTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} type=text .disabled=${!this.model.getChartTitleVisibility()} .value=${this.model.getTitleText()} @calciteInputInput=${this.setChartTitle} ${x(this.characterLimitInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.emptyChartTitle} .isInvalid=${this.isChartTitleInvalid}></arcgis-charts-config-invalid-input-message></div>${n(this.model) ? [
       a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.xAxisTitle}<calcite-switch .checked=${this.model.getXAxisTitleVisibility()} @calciteSwitchChange=${this.enableXAxisTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} type=text .disabled=${!this.model.getXAxisTitleVisibility()} .value=${this.model.getXAxisTitleText()} @calciteInputInput=${this.setChartXAxisTitle}></calcite-input></div>`,
       c(this.model) ? a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.yAxisTitle}<calcite-switch .checked=${this.model.getYAxisTitleVisibility()} @calciteSwitchChange=${this.enableYAxisTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} tabindex=1 type=text .disabled=${!this.model.getYAxisTitleVisibility()} .value=${this.model.getYAxisTitleText()} @calciteInputInput=${this.setChartYAxisTitle}></calcite-input></div>` : null
     ] : null}${o(this.model) ? a`<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.legendTitle}<calcite-switch .checked=${this.model.getLegendTitleVisibility()} @calciteSwitchChange=${this.enableLegendTitle}></calcite-switch></calcite-label><calcite-input class=${i(s.textInput)} type=text .disabled=${!this.model.getLegendTitleVisibility()} .value=${this.model.getLegendTitleText()} @calciteInputInput=${this.setChartLegendTitle}></calcite-input></div>` : null}<div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.legendPosition}</calcite-label><calcite-combobox clear-disabled label class=${i(s.select)} @calciteComboboxChange=${this.legendPositionChange} selection-mode=single>${this.renderLegendPositions()}</calcite-combobox></div><div class=${i(s.labelContainer)}><calcite-label layout=inline-space-between class=${i(s.label)}>${this._messages.description}<calcite-switch .checked=${this.model.getDescriptionVisibility()} @calciteSwitchChange=${this.enableDescription}></calcite-switch></calcite-label><calcite-text-area .disabled=${!this.model.getDescriptionVisibility()} .value=${this.model.getDescriptionText()} @calciteTextAreaInput=${this.setChartDescription}></calcite-text-area></div>`;

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

@@ -1,5 +1,5 @@
 import { c as X } from "../../chunks/runtime.js";
-import { keyed as B } from "lit-html/directives/keyed.js";
+import { keyed as B } from "lit/directives/keyed.js";
 import { RESTSymbolType as m, WebChartTypes as R, RESTSimpleLineSymbolStyle as O } from "@arcgis/charts-spec";
 import { cloneDeep as E } from "lodash-es";
 import "d3-array";
@@ -17,21 +17,20 @@ import { m as G, d as H, e as U, g as W, k as M, c as S } from "../../chunks/cha
 import { d as A } from "../../chunks/default.js";
 import { g as Y } from "../../chunks/resource.js";
 import { u as j } from "../../chunks/useT9n.js";
-import { html as d } from "lit";
+import { css as J, html as d } from "lit";
 import { createRef as h, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as J, createEvent as $, safeClassMap as o, safeStyleMap as K } from "@arcgis/lumina";
-import { css as Q } from "@lit/reactive-element/css-tag.js";
+import { LitElement as K, createEvent as $, safeClassMap as o, safeStyleMap as Q } from "@arcgis/lumina";
 import { G as T } from "../../chunks/common.js";
-import { h as ee, m as te, n as ie } from "../../chunks/type-guards.js";
+import { j as ee, n as te, o as ie } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const s = {
   row: "row",
   column: "column",
   colorPicker: "color-picker"
-}, oe = Q`.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{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
-class se extends J {
+}, oe = J`.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{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
+class se extends K {
   constructor() {
     super(...arguments), this._messages = j(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
       const t = e.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
@@ -244,7 +243,7 @@ class se extends J {
   }
   renderColorElement() {
     const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? W(e.style) : O.Solid, f = p(a, r) === m.SLS ? `line-${v}` : "square-f";
-    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${K({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
+    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${Q({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   render() {
     const e = this.model.getGuideStart(this.index, this.orientation), t = this.model.getGuideEnd(this.index, this.orientation), i = this.model.getGuideName(this.index, this.orientation), n = this.model.getGuideLabelText(this.index, this.orientation), l = this.model.getGuideAbove(this.index, this.orientation), a = this.model.getGuideVisibility(this.index, this.orientation), r = this.isXAxisDateField;

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

@@ -1,6 +1,6 @@
 import { c as r } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-import { RESTSymbolType as l } from "@arcgis/charts-spec";
+import { css as l, html as o } from "lit";
+import { RESTSymbolType as a } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
 import "../../chunks/interfaces.js";
@@ -11,21 +11,20 @@ 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 { e as a } from "../../chunks/popover-ui-utils.js";
+import { e as n } from "../../chunks/popover-ui-utils.js";
 import { g as i } from "../../chunks/default.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { createRef as p, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as s, safeClassMap as h } from "@arcgis/lumina";
-import { css as g } from "@lit/reactive-element/css-tag.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { createRef as c, ref as m } from "lit-html/directives/ref.js";
+import { LitElement as h, createEvent as s, safeClassMap as g } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const C = {
   jsAppFlyout: "js-app-flyout"
-}, d = g``;
-class f extends m {
+}, d = l``;
+class f extends h {
   constructor() {
-    super(...arguments), this._messages = n(), this.popoverElement = p(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
+    super(...arguments), this._messages = p(), this.popoverElement = c(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 2, referenceElement: 2, placement: 3, open: 7 };
@@ -37,7 +36,7 @@ class f extends m {
     await this.popoverElement.value?.reposition();
   }
   updated() {
-    a(this.popoverElement.value, this.open);
+    n(this.popoverElement.value, this.open);
   }
   guidePopoverClose() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
@@ -52,7 +51,7 @@ class f extends m {
   }
   render() {
     const t = this.selectedElement, e = this.selectedElement;
-    return o`<div class=${h(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${c(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === l.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
+    return o`<div class=${g(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${m(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === a.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
   }
 }
 r("arcgis-charts-config-guide-popover", f);

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

@@ -14,17 +14,16 @@ import { e as A } from "../../chunks/popover-ui-utils.js";
 import { d as c } from "../../chunks/default.js";
 import { g as u, H as g } from "../../chunks/resource.js";
 import { u as b } from "../../chunks/useT9n.js";
-import { html as a } from "lit";
+import { css as C, html as a } from "lit";
 import { createRef as m, ref as G } from "lit-html/directives/ref.js";
-import { LitElement as C, createEvent as $, safeClassMap as p } from "@arcgis/lumina";
-import { css as v } from "@lit/reactive-element/css-tag.js";
+import { LitElement as $, createEvent as v, safeClassMap as p } from "@arcgis/lumina";
 import { G as o } from "../../chunks/common.js";
-import { m as l, n as h } from "../../chunks/type-guards.js";
+import { n as l, o as h } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
-const X = v`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
-class Y extends C {
+v4.34.0-next.51 */
+const X = C`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
+class Y extends $ {
   constructor() {
     super(...arguments), this._messages = b(), this.addGuideButton = m(), this.popoverElement = m(), this.addXGuide = () => {
       if (l(this.model)) {
@@ -44,7 +43,7 @@ class Y extends C {
       this.enableXAxisGuide && this.enableYAxisGuide && (this.showAddButton = !this.showAddButton);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.showAddButton = !0, this.latestGuidePosition = 0, this.open = !1, this.arcgisChartsConfigGuidePopoverChange = $();
+    }, this.showAddButton = !0, this.latestGuidePosition = 0, this.open = !1, this.arcgisChartsConfigGuidePopoverChange = v();
   }
   static {
     this.properties = { showAddButton: 16, latestGuidePosition: 16, messageOverrides: 0, model: 0, timeZone: 3, calculatedMinMaxBounds: 2, enableXAxisGuide: 5, enableYAxisGuide: 5, open: 7 };

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

@@ -12,12 +12,11 @@ import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import { b as d, h as c } from "../../chunks/index4.js";
 import { LitElement as m } from "@arcgis/lumina";
-import { html as t } from "lit";
+import { css as g, html as t } from "lit";
 import { C as s } from "../../chunks/interfaces2.js";
-import { css as g } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.5 */
+v4.34.0-next.51 */
 const p = g`: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 f extends m {
   constructor() {

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { HistogramModel } from '../../model';
-import { IField } from '@arcgis/charts-spec';
+import { IField, ISimpleFillSymbol } from '@arcgis/charts-spec';
 import { DataChangeErrorPayload, PopoverChangePayload, PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';