@arcgis/charts-components 6.0.0-next.6 → 6.0.0-next.7

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

@@ -2,11 +2,11 @@
 import { c as h } from "../../chunks/runtime.js";
 import { css as m, html as s } from "lit";
 import { merge as i } from "es-toolkit/compat";
-import { i as p, m as c, U as r, s as y } from "../../chunks/chart-ui-utils.js";
-import { u } from "../../chunks/useT9n.js";
-import { createRef as S, ref as d } from "lit/directives/ref.js";
+import { i as p, m as c, U as r, s as d } from "../../chunks/chart-ui-utils.js";
+import { u as y } from "../../chunks/useT9n.js";
+import { createRef as S, ref as u } from "lit/directives/ref.js";
 import { LitElement as g, createEvent as f, safeClassMap as n } from "@arcgis/lumina";
-import { Q as v } from "../../chunks/index3.js";
+import { Q as v } from "../../chunks/index2.js";
 import { b } from "../../chunks/rest-js-object-literals.js";
 const C = {
   arial: "Arial",
@@ -31,7 +31,7 @@ const C = {
 }, $ = m`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.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 .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{display:flex}:host calcite-panel .font-style-container calcite-action,:host calcite-panel .font-style-container calcite-label{flex:1 1 0px;display:flex;flex-grow:inherit;width:80px}:host calcite-panel .font-style-container calcite-label{flex-grow:2}:host calcite-panel .font-style-container{padding:0 1rem}:host calcite-panel calcite-label.font{display:block;margin-top:1rem}`;
 class I extends g {
   constructor() {
-    super(...arguments), this._messages = u(), this.fontSizeInputElement = S(), this.isFontSizeInvalid = !1, this.fontStyle = {
+    super(...arguments), this._messages = y(), this.fontSizeInputElement = S(), this.isFontSizeInvalid = !1, this.fontStyle = {
       type: b.TS
     }, this.open = !1, this.enableClose = !1, this.arcgisChartsConfigFontStyleChange = f(), this.arcgisChartsConfigFontStyleClose = f();
   }
@@ -66,7 +66,7 @@ class I extends g {
     } else this.fontSizeInputElement.value && (this.isFontSizeInvalid = !0, c({
       inputElement: this.fontSizeInputElement.value,
       status: r.INVALID
-    }));
+    }), this.fontStyle.font?.size !== void 0 && (this.fontStyle.font.size = Number(t)));
   }
   boldSelect() {
     let t = "bold";
@@ -101,7 +101,7 @@ class I extends g {
     return this.fontStyle?.font?.family === "" && t.push(s`<calcite-option value selected></calcite-option>`), t;
   }
   render() {
-    return s`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(a.fontStyleContainer)}><calcite-label class=${n(a.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(a.fontStyleContainer)}><calcite-label class=${n(a.inputLabel)}>${this._messages.size}<calcite-input class=${n(a.numberInput)} type=number min=6 max=40 step=1 .value=${y(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${d(this.fontSizeInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidFontSize} .isInvalid=${this.isFontSizeInvalid}></arcgis-charts-config-invalid-input-message></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === "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 === "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 === "underline"}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(a.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
+    return s`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(a.fontStyleContainer)}><calcite-label class=${n(a.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(a.fontStyleContainer)}><calcite-label class=${n(a.inputLabel)}>${this._messages.size}<calcite-input class=${n(a.numberInput)} type=number min=6 max=40 step=1 .value=${d(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${u(this.fontSizeInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidFontSize} .isInvalid=${this.isFontSizeInvalid}></arcgis-charts-config-invalid-input-message></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === "bold"} .disabled=${this.isFontSizeInvalid}><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 === "italic"} .disabled=${this.isFontSizeInvalid}><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 === "underline"} .disabled=${this.isFontSizeInvalid}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(a.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
   }
 }
 h("arcgis-charts-config-font-style", I);

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

@@ -1,19 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as B } from "../../chunks/runtime.js";
 import { ref as M } from "lit/directives/ref.js";
-import { n as y, l as d, j as h, o as S, c as V, k as w } from "../../chunks/type-guards2.js";
+import { n as y, l as m, j as h, o as S, c as V, k as w } from "../../chunks/type-guards.js";
 import { i as T } from "../../chunks/data-labels-symbol.js";
 import { i as C, a as L, b as P } from "../../chunks/axis-lines-symbol.js";
-import { cloneDeep as n, isArray as F, isObject as A, mergeWith as D, isEmpty as E } from "es-toolkit/compat";
+import { cloneDeep as c, isArray as F, isObject as A, mergeWith as D, isEmpty as E } from "es-toolkit/compat";
 import { h as G } from "../../chunks/chart-ui-utils.js";
 import { R as W, b } from "../../chunks/rest-js-object-literals.js";
 import { u as N } from "../../chunks/useT9n.js";
 import { css as z, html as f } from "lit";
 import { LitElement as H, renderElement as R, safeClassMap as p } from "@arcgis/lumina";
-import { C as j, F as i, L as m } from "../../chunks/common.js";
-import { b as u, bT as r } from "../../chunks/index.js";
+import { C as j, F as i, L as d } from "../../chunks/common.js";
+import { b as u, cg as r, C as I } from "../../chunks/index.js";
 import { r as $ } from "../../chunks/popover-ui-utils.js";
-import { C as I } from "../../chunks/index2.js";
 import { a } from "../../chunks/chart-object-literals.js";
 const v = {
   type: b.TS,
@@ -55,8 +54,8 @@ class X extends H {
       if (e.target?.localName === "calcite-list-item" ? s = e.target?.value : s = e.target?.parentNode?.value, this.selectedSymbols = [], this.selectedBackground = [], e.shiftKey) {
         this.selectedTexts = [];
         const o = this.textProperties.indexOf(this.lastSelectedText ?? s), l = this.textProperties.indexOf(s);
-        this.textProperties.forEach((c, x) => {
-          x >= Math.min(o, l) && x <= Math.max(o, l) && this.selectedTexts.push(c);
+        this.textProperties.forEach((n, x) => {
+          x >= Math.min(o, l) && x <= Math.max(o, l) && this.selectedTexts.push(n);
         }), this.updateSelectedElement(this.selectedTexts), this.setupFormatPopover();
       } else if (e.ctrlKey)
         this.selectedTexts.includes(s) ? (this.selectedTexts = this.selectedTexts.filter((o) => o !== s), this.updateSelectedElement(this.selectedTexts)) : (this.selectedTexts = [...this.selectedTexts, s], this.updateSelectedElement(this.selectedTexts)), this.setupFormatPopover();
@@ -82,20 +81,20 @@ class X extends H {
       const e = t.detail;
       this.selectedSymbols.forEach((s) => {
         this.setFormatValue(s, e);
-      }), this.selectedElement = n(t.target.selectedElement);
+      }), this.selectedElement = c(t.target.selectedElement);
     }, this.updateBackground = (t) => {
       this.setFormatValue(j.Background, t.detail), this.selectedElement = t.detail;
     }, this.updateTextProps = (t) => {
       const { font: e, color: s } = t.detail;
       this.selectedTexts.forEach((o) => {
-        const l = this.getFormatValue(o), c = r(l) ? l : void 0;
+        const l = this.getFormatValue(o), n = r(l) ? l : void 0;
         this.setFormatValue(o, {
-          ...c,
+          ...n,
           type: b.TS,
-          font: { ...c?.font, ...e },
-          color: s ?? c?.color
+          font: { ...n?.font, ...e },
+          color: s ?? n?.color
         });
-      }), this.selectedElement = n(t.target.selectedElement);
+      }), this.selectedElement = c(t.target.selectedElement);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.formatPopoverClose = (t) => {
@@ -135,23 +134,23 @@ class X extends H {
   }
   updateSelectedElement(t, e) {
     if (this.selectedElement = void 0, e === void 0) {
-      const s = n(this.getFormatValue(t[0]));
+      const s = c(this.getFormatValue(t[0]));
       this.selectedElement = t?.reduce((o, l) => {
-        const c = this.getFormatValue(l);
-        return D(o, c, this.mergeFormatValues);
+        const n = this.getFormatValue(l);
+        return D(o, n, this.mergeFormatValues);
       }, s);
     } else {
-      let s = n(e);
-      E(e) && (this.selectedSymbols?.length > 0 && (s = n(k)), this.selectedTexts?.length > 0 && (s = n(v))), this.selectedElement = s;
+      let s = c(e);
+      E(e) && (this.selectedSymbols?.length > 0 && (s = c(k)), this.selectedTexts?.length > 0 && (s = c(v))), this.selectedElement = s;
     }
   }
   initSelectedTexts(t) {
-    let e = n(t);
-    E(t) && (e = n(v)), this.selectedElement = e;
+    let e = c(t);
+    E(t) && (e = c(v)), this.selectedElement = e;
   }
   initSelectedSymbols(t) {
-    let e = n(t);
-    E(t) && (e = n(k)), this.selectedElement = e;
+    let e = c(t);
+    E(t) && (e = c(k)), this.selectedElement = e;
   }
   setupFormatPopover() {
     this.formatPopover = $(this.formatPopover);
@@ -171,7 +170,7 @@ class X extends H {
       case i.XAxisTitle:
         return P(this.model) ? this.model.xAxisTitleSymbol : void 0;
       case i.YAxisTitle:
-        return d(this.model) ? this.model.getAxisTitleSymbol(1) : void 0;
+        return m(this.model) ? this.model.getAxisTitleSymbol(1) : void 0;
       case i.AxisLabels:
         return L(this.model) ? this.model.axisLabelsSymbol : void 0;
       case i.GuideLabels:
@@ -182,11 +181,11 @@ class X extends H {
         return h(this.model) ? this.model.legendTitleSymbol : void 0;
       case i.DataLabels:
         return T(this.model) ? this.model.dataLabelsSymbol : void 0;
-      case m.AxisLines:
+      case d.AxisLines:
         return C(this.model) ? this.model.axisLinesSymbol : void 0;
-      case m.GridLines:
-        return d(this.model) ? this.model.getGridLinesSymbol() : void 0;
-      case m.LeaderLines:
+      case d.GridLines:
+        return m(this.model) ? this.model.getGridLinesSymbol() : void 0;
+      case d.LeaderLines:
         return y(this.model) ? this.model.ticksSymbol : void 0;
       case i.Background:
         return this.model.backgroundColor;
@@ -206,7 +205,7 @@ class X extends H {
         P(this.model) && r(e) && (this.model.xAxisTitleSymbol = e);
         break;
       case i.YAxisTitle:
-        d(this.model) && r(e) && this.model.setAxisTitleSymbol(e, 1);
+        m(this.model) && r(e) && this.model.setAxisTitleSymbol(e, 1);
         break;
       case i.AxisLabels:
         L(this.model) && r(e) && (this.model.axisLabelsSymbol = e);
@@ -223,14 +222,14 @@ class X extends H {
       case i.DataLabels:
         T(this.model) && r(e) && (this.model.dataLabelsSymbol = e);
         break;
-      case m.AxisLines:
+      case d.AxisLines:
         C(this.model) && u(e) && (this.model.axisLinesSymbol = e);
         break;
-      case m.GridLines:
+      case d.GridLines:
         if (u(e)) {
           if (V(this.model))
             this.model.setGridLinesSymbol(e);
-          else if (d(this.model)) {
+          else if (m(this.model)) {
             const s = this.model.chartType;
             let o = [];
             switch (s) {
@@ -254,7 +253,7 @@ class X extends H {
           }
         }
         break;
-      case m.LeaderLines:
+      case d.LeaderLines:
         y(this.model) && u(e) && (this.model.ticksSymbol = e);
         break;
       case i.Background:
@@ -266,7 +265,7 @@ class X extends H {
     this.textProperties = [
       i.Title,
       ...P(this.model) ? [i.XAxisTitle] : [],
-      ...d(this.model) ? [i.YAxisTitle] : [],
+      ...m(this.model) ? [i.YAxisTitle] : [],
       ...h(this.model) ? [i.LegendTitle] : [],
       i.Description,
       ...h(this.model) ? [i.LegendText] : [],
@@ -275,16 +274,16 @@ class X extends H {
       ...T(this.model) && this.model.chartType !== a.HeatSeries && this.model.chartType !== a.BoxPlotSeries ? [i.DataLabels] : []
     ], w(this.model) && (this.textProperties = this.textProperties.filter((s) => s !== i.DataLabels)), this.symbolProperties = [
       i.Background,
-      ...C(this.model) && this.model.chartType !== a.HeatSeries ? [m.AxisLines] : [],
-      ...d(this.model) ? [m.GridLines] : [],
-      ...y(this.model) ? [m.LeaderLines] : []
+      ...C(this.model) && this.model.chartType !== a.HeatSeries ? [d.AxisLines] : [],
+      ...m(this.model) ? [d.GridLines] : [],
+      ...y(this.model) ? [d.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 };
   }
   renderTextElement(t, e) {
-    const s = G(t), o = this.getFormatValue(t), l = typeof o == "string" ? o : "", c = this.selectedTexts.includes(t) || this.selectedSymbols.includes(t) || this.selectedBackground.includes(t);
-    return f`<calcite-list-item class=${p(g.element)} .label=${this._messages[t]} .description=${l} .value=${t} .selected=${c} @click=${e} ${M(this.updateSelectableElements)}>${s !== void 0 ? f`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
+    const s = G(t), o = this.getFormatValue(t), l = typeof o == "string" ? o : "", n = this.selectedTexts.includes(t) || this.selectedSymbols.includes(t) || this.selectedBackground.includes(t);
+    return f`<calcite-list-item class=${p(g.element)} .label=${this._messages[t]} .description=${l} .value=${t} .selected=${n} @click=${e} ${M(this.updateSelectableElements)}>${s !== void 0 ? f`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>` : null}</calcite-list-item>`;
   }
   render() {
     const { textElements: t, symbolElements: e } = this.renderFormatElements();

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

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as T } from "../../chunks/runtime.js";
-import { l as n, p as r, j as c } from "../../chunks/type-guards2.js";
+import { l as n, p as r, j as c } from "../../chunks/type-guards.js";
 import { i as h, a as m, b as g } from "../../chunks/generate-x-axis-title.js";
 import { isEmpty as x } from "es-toolkit/compat";
 import { m as u, U as b } from "../../chunks/chart-ui-utils.js";
@@ -9,7 +9,7 @@ import { css as C, html as l } from "lit";
 import { createRef as f, ref as $ } from "lit/directives/ref.js";
 import { LitElement as v, safeClassMap as i } from "@arcgis/lumina";
 import { f as a } from "../../chunks/chart-object-literals.js";
-import { i as y } from "../../chunks/index4.js";
+import { i as y } from "../../chunks/index3.js";
 const s = {
   textInput: "text-input",
   label: "label",

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

@@ -2,16 +2,16 @@
 import { c as B } from "../../chunks/runtime.js";
 import { keyed as X } from "lit/directives/keyed.js";
 import { cloneDeep as P } from "es-toolkit/compat";
-import { m as $, U as S, a as V, j as N, k } from "../../chunks/chart-ui-utils.js";
+import { m as $, U as S, a as N, j as V, k } from "../../chunks/chart-ui-utils.js";
 import { d as F } from "../../chunks/default.js";
 import { g as Z } from "../../chunks/resource.js";
 import { u as q } from "../../chunks/useT9n.js";
 import { css as z, html as d } from "lit";
 import { createRef as h, ref as u } from "lit/directives/ref.js";
 import { LitElement as O, createEvent as U, renderElement as M, safeStyleMap as L, safeClassMap as n } from "@arcgis/lumina";
-import { l as W, q as Y, r as j } from "../../chunks/type-guards2.js";
-import { bU as p, b as m, bo as H, bV as A, bW as _, i as J } from "../../chunks/index.js";
-import { t as K } from "../../chunks/index3.js";
+import { l as W, q as j, r as Y } from "../../chunks/type-guards.js";
+import { ch as p, b as m, bI as H, ci as A, cj as _, i as J } from "../../chunks/index.js";
+import { t as K } from "../../chunks/index2.js";
 import { r as Q } from "../../chunks/popover-ui-utils.js";
 import { b as g, R as ee } from "../../chunks/rest-js-object-literals.js";
 import { a as te } from "../../chunks/chart-object-literals.js";
@@ -203,17 +203,17 @@ class se extends O {
     this.model.setGuideVisibility(!e, this.index, this.orientation);
   }
   destroyTooltip() {
-    V(this.tooltip);
+    N(this.tooltip);
   }
   deleteGuide() {
-    this.destroyTooltip(), this.orientation === b.X && Y(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === b.Y && j(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
+    this.destroyTooltip(), this.orientation === b.X && j(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === b.Y && Y(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !0
     });
   }
   renderColorElement() {
-    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, a, l] = [...e?.color ?? [1, 1, 1, 255]], s = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = m(e) ? N(e.style) : ee.Solid, f = p(s, r) === g.SLS ? `line-${v}` : "square-f";
+    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, a, l] = [...e?.color ?? [1, 1, 1, 255]], s = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = m(e) ? V(e.style) : ee.Solid, f = p(s, r) === g.SLS ? `line-${v}` : "square-f";
     return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${n(o.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${L({ color: `rgba(${t},${i},${a},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
   render() {

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

@@ -7,7 +7,7 @@ import { u as f } from "../../chunks/useT9n.js";
 import { css as A, html as a } from "lit";
 import { createRef as x, ref as C } from "lit/directives/ref.js";
 import { LitElement as b, renderElement as v, safeClassMap as c } from "@arcgis/lumina";
-import { q as h, r as u } from "../../chunks/type-guards2.js";
+import { q as h, r as u } from "../../chunks/type-guards.js";
 import { G as s } from "../../chunks/common.js";
 const P = A`: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 $ extends b {

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

@@ -4,7 +4,7 @@ import { LitElement as l } from "@arcgis/lumina";
 import { css as n, html as i } from "lit";
 import { C as s } from "../../chunks/interfaces.js";
 import { isEqual as d } from "es-toolkit/compat";
-import { bM as h, bN as c, u as f } from "../../chunks/index.js";
+import { c9 as h, ca as c, v as f } from "../../chunks/index.js";
 const p = n`:host{margin-bottom:var(--arcgis-charts-intra-section-margin);margin-top:var(--arcgis-charts-intra-section-margin);height:100%}`;
 class m extends l {
   static {

package/dist/components/arcgis-charts-config-heat-chart-data/customElement.js

@@ -7,8 +7,8 @@ import { css as N, html as i } from "lit";
 import { createRef as n, ref as c } from "lit/directives/ref.js";
 import { parseInt as _, camelCase as H } from "es-toolkit/compat";
 import { DateTime as L } from "luxon";
-import { b as T, t as O, C as U } from "../../chunks/index2.js";
-import { u as x } from "../../chunks/useT9n.js";
+import { u as T, B as x, ck as O, C as U } from "../../chunks/index.js";
+import { u as R } from "../../chunks/useT9n.js";
 import { c as s, W as k } from "../../chunks/interfaces.js";
 import { x as W } from "../../chunks/data.js";
 import { l as v, s as q } from "../../chunks/chart-ui-utils.js";
@@ -16,10 +16,9 @@ import { c as $, g as K, a as V, b as z } from "../../chunks/class-breaks.js";
 import { e as X, a as Z } from "../../chunks/store.js";
 import { H as G } from "../../chunks/common.js";
 import { b as j } from "../../chunks/rest-js-object-literals.js";
-import { d as m, h, l as p, a as C, n as u, q as F, r as Y } from "../../chunks/chart-object-literals.js";
-import { J, I as Q, i as ee, R as d } from "../../chunks/index3.js";
-import { t as R } from "../../chunks/index.js";
-import { i as ae } from "../../chunks/index4.js";
+import { d, h, l as p, a as C, n as u, q as F, r as Y } from "../../chunks/chart-object-literals.js";
+import { J, I as Q, i as ee, R as m } from "../../chunks/index2.js";
+import { i as ae } from "../../chunks/index3.js";
 import { r as te } from "../../chunks/popover-ui-utils.js";
 const se = N`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.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;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin);margin-top:var(--arcgis-charts-top-section-margin)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.color-ramp{width:100%;height:20px;overflow:hidden;border-radius:0}.color-ramp-segment{height:100%;display:inline-block}.list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.accordion{margin-top:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}`, r = {
   label: "label",
@@ -30,19 +29,19 @@ const se = N`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.
 };
 class le extends E {
   constructor() {
-    super(...arguments), this._messages = x(), this.commonStrings = x({ name: "common", blocking: !0 }), this.heatChartPopover = null, this.xAxisFieldElement = n(), this.aggregationElement = n(), this.numericFieldsElement = n(), this.calendarTypeElement = n(), this.calendarViewTypeElement = n(), this.classBreakMethodElement = n(), this.nullElement = n(), this.breaksCountElement = n(), this.colorSchemeElement = n(), this.onHeatChartDataPopoverChange = async (e) => {
+    super(...arguments), this._messages = R(), this.commonStrings = R({ name: "common", blocking: !0 }), this.heatChartPopover = null, this.xAxisFieldElement = n(), this.aggregationElement = n(), this.numericFieldsElement = n(), this.calendarTypeElement = n(), this.calendarViewTypeElement = n(), this.classBreakMethodElement = n(), this.nullElement = n(), this.breaksCountElement = n(), this.colorSchemeElement = n(), this.onHeatChartDataPopoverChange = async (e) => {
       try {
         if (e.detail?.value !== void 0) {
           const { contentKind: a } = e.detail, t = e.detail.value;
           switch (a) {
             case s.aggregation:
-              this.model.aggregationType = t, t === m.Count || t === m.Sum ? this.model.nullPolicy = h.Zero : this.model.nullPolicy = h.Null;
+              this.model.aggregationType = t, t === d.Count || t === d.Sum ? this.model.nullPolicy = h.Zero : this.model.nullPolicy = h.Null;
               break;
             case s.xAxisField:
               this.model.xAxisField = t, this.setDefaultPropertiesForCalendarHeatChart();
               break;
             case s.numericFields:
-              this.model.numericFields = [t.trim() || ""], (this.model.numericFields ?? []).length > 0 && this.model.aggregationType === m.Count && this.model.numericFields[0] !== R(this.model.layer).idField && (this.model.aggregationType = m.Sum);
+              this.model.numericFields = [t.trim() || ""], (this.model.numericFields ?? []).length > 0 && this.model.aggregationType === d.Count && this.model.numericFields[0] !== T(this.model.layer).idField && (this.model.aggregationType = d.Sum);
               break;
             case s.calendarType: {
               this.applyCalendarTypePreset(t);
@@ -186,7 +185,7 @@ class le extends E {
     return W({
       fieldName: this.model.xAxisField,
       fieldList: this.layerFieldsInfo
-    }) ? "" : T(this.layerFieldsInfo, this.model.xAxisField);
+    }) ? "" : x(this.layerFieldsInfo, this.model.xAxisField);
   }
   onXAxisFieldSelect(e) {
     this.contentKind = s.xAxisField, this.setupPopover(e);
@@ -205,7 +204,7 @@ class le extends E {
   }
   async onBreaksCountChange(e) {
     let a = _(e.target.value);
-    a < d.min ? a = d.min : a > d.max && (a = d.max), O(a) && (this.breaksCountElement.value && (this.breaksCountElement.value.value = a.toString()), this.requestedBreaksCount = a, this.model.breaksCount = a, await this.generateAndUpdateClassBreaks());
+    a < m.min ? a = m.min : a > m.max && (a = m.max), O(a) && (this.breaksCountElement.value && (this.breaksCountElement.value.value = a.toString()), this.requestedBreaksCount = a, this.model.breaksCount = a, await this.generateAndUpdateClassBreaks());
   }
   onAggregationSelect(e) {
     this.contentKind = s.aggregation, this.setupPopover(e);
@@ -255,17 +254,17 @@ class le extends E {
     this.heatChartPopover !== null && (this.heatChartPopover.open = !1, this.heatChartPopover = te(this.heatChartPopover));
   }
   setDefaultPropertiesForCalendarHeatChart() {
-    this.model.yAxisField = this.model.xAxisField, this.model.setYAxisSortOrder(G.Desc), this.model.classificationMethod === void 0 && (this.model.classificationMethod = F.naturalBreaks), this.model.heatRulesType !== u.Renderer && (this.model.heatRulesType = u.Renderer), this.model.viewType === void 0 && (this.model.viewType = Y.singleCalendarView), (this.model.aggregationType === m.Count || this.model.aggregationType === m.Sum) && this.model.nullPolicy !== h.Zero && (this.model.nullPolicy = h.Zero), this.model.colorRampName === void 0 && (this.model.colorRampName = $.defaultColorRampForCharts?.name);
+    this.model.yAxisField = this.model.xAxisField, this.model.setYAxisSortOrder(G.Desc), this.model.classificationMethod === void 0 && (this.model.classificationMethod = F.naturalBreaks), this.model.heatRulesType !== u.Renderer && (this.model.heatRulesType = u.Renderer), this.model.viewType === void 0 && (this.model.viewType = Y.singleCalendarView), (this.model.aggregationType === d.Count || this.model.aggregationType === d.Sum) && this.model.nullPolicy !== h.Zero && (this.model.nullPolicy = h.Zero), this.model.colorRampName === void 0 && (this.model.colorRampName = $.defaultColorRampForCharts?.name);
   }
   renderXAxisFieldSelect() {
     const e = this.getCorrectedXAxisFieldValue();
     return i`<arcgis-charts-config-field-picker .label=${e} @click=${this.onXAxisFieldSelect} ${c(this.xAxisFieldElement)}></arcgis-charts-config-field-picker>`;
   }
   renderAggregation() {
-    return i`<arcgis-charts-config-field-picker .label=${this.model.aggregationType === m.NoAggregation ? this._messages.noAggregation : this.aggregationLabel} @click=${this.onAggregationSelect} ${c(this.aggregationElement)}></arcgis-charts-config-field-picker>`;
+    return i`<arcgis-charts-config-field-picker .label=${this.model.aggregationType === d.NoAggregation ? this._messages.noAggregation : this.aggregationLabel} @click=${this.onAggregationSelect} ${c(this.aggregationElement)}></arcgis-charts-config-field-picker>`;
   }
   renderNumericFieldsSelect() {
-    const e = this.model.numericFields?.[0] === R(this.model.layer).idField ? "" : T(this.layerFieldsInfo, this.model.numericFields?.[0]);
+    const e = this.model.numericFields?.[0] === T(this.model.layer).idField ? "" : x(this.layerFieldsInfo, this.model.numericFields?.[0]);
     return i`<arcgis-charts-config-field-picker .label=${e} @click=${this.onNumericFieldSelect} ${c(this.numericFieldsElement)}></arcgis-charts-config-field-picker>`;
   }
   renderCalendarTypeSelect() {
@@ -304,7 +303,7 @@ class le extends E {
   }
   render() {
     const e = this.renderXAxisFieldSelect(), a = this.renderAggregation(), t = this.renderNumericFieldsSelect(), l = this.renderCalendarTypeSelect(), g = this.renderClassBreakMethodSelect(), f = this.renderColorRampSelect(), y = this.renderClassBreaksTable(), b = this.renderNullUI(), S = this.renderEmptyBins();
-    return i`<calcite-label class=${o(r.label)}>${this._messages.dateRequired}${e}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.calendarType}${l}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.aggregation}${a}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numericField}${t}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.method}${g}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numberOfClasses}<calcite-input type=number .min=${d.min} .max=${d.max} .disabled=${this.model.classificationMethod === void 0 || this.model.classificationMethod === F.manual} step=1 .value=${q(this.model.breaksCount, 5)} @calciteInputInput=${this.onBreaksCountChange} ${c(this.breaksCountElement)}></calcite-input></calcite-label><calcite-label class=${o(r.label)}>${this._messages.colorScheme}${f}</calcite-label>${b}<calcite-accordion class=${o(r.accordion)} appearance=transparent selection-mode=single><calcite-accordion-item .heading=${this._messages.classBreaks}>${y}</calcite-accordion-item></calcite-accordion><calcite-label class=${o(r.label)}>${this._messages.emptyBins}${S}</calcite-label>${v(this.model) === k.YearByMonthAndDayOfMonth ? i`<calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.includeLeapDay}<calcite-switch .checked=${this.model.includeLeapDay} @calciteSwitchChange=${this.onIncludeLeapDayChange}></calcite-switch></calcite-label>` : null}`;
+    return i`<calcite-label class=${o(r.label)}>${this._messages.dateRequired}${e}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.calendarType}${l}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.aggregation}${a}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numericField}${t}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.method}${g}</calcite-label><calcite-label class=${o(r.label)}>${this._messages.numberOfClasses}<calcite-input type=number .min=${m.min} .max=${m.max} .disabled=${this.model.classificationMethod === void 0 || this.model.classificationMethod === F.manual} step=1 .value=${q(this.model.breaksCount, 5)} @calciteInputInput=${this.onBreaksCountChange} ${c(this.breaksCountElement)}></calcite-input></calcite-label><calcite-label class=${o(r.label)}>${this._messages.colorScheme}${f}</calcite-label>${b}<calcite-accordion class=${o(r.accordion)} appearance=transparent selection-mode=single><calcite-accordion-item .heading=${this._messages.classBreaks}>${y}</calcite-accordion-item></calcite-accordion><calcite-label class=${o(r.label)}>${this._messages.emptyBins}${S}</calcite-label>${v(this.model) === k.YearByMonthAndDayOfMonth ? i`<calcite-label class=${o(r.label)} layout=inline-space-between>${this._messages.includeLeapDay}<calcite-switch .checked=${this.model.includeLeapDay} @calciteSwitchChange=${this.onIncludeLeapDayChange}></calcite-switch></calcite-label>` : null}`;
   }
 }
 P("arcgis-charts-config-heat-chart-data", le);

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

@@ -1,22 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as T } from "../../chunks/runtime.js";
 import { repeat as d } from "lit/directives/repeat.js";
-import { css as F, html as r } from "lit";
+import { css as F, html as l } from "lit";
 import { keyed as f } from "lit/directives/keyed.js";
 import P from "@arcgis/core/Color.js";
-import { LitElement as I, createEvent as h, safeClassMap as l, nothing as g, safeStyleMap as L } from "@arcgis/lumina";
+import { LitElement as I, createEvent as h, safeClassMap as r, nothing as g, safeStyleMap as L } from "@arcgis/lumina";
 import { createRef as u, ref as p } from "lit/directives/ref.js";
 import { isEqual as S } from "es-toolkit/compat";
-import { b as D, C as v } from "../../chunks/index2.js";
+import { B as D, b4 as A, b3 as E, C as v } from "../../chunks/index.js";
 import { u as b } from "../../chunks/useT9n.js";
 import { c, W as $ } from "../../chunks/interfaces.js";
-import { c as y, b as A, e as m } from "../../chunks/chart-ui-utils.js";
+import { c as y, b as _, e as m } from "../../chunks/chart-ui-utils.js";
 import { C as x, d as k } from "../../chunks/class-breaks.js";
-import { d as E } from "../../chunks/rest-js-object-literals.js";
-import { d as _, r as R, q as C } from "../../chunks/chart-object-literals.js";
-import { e as N } from "../../chunks/popover-ui-utils.js";
-import { J as B, r as M } from "../../chunks/index3.js";
-import { aR as H, aQ as O } from "../../chunks/index.js";
+import { d as B } from "../../chunks/rest-js-object-literals.js";
+import { d as N, r as R, q as C } from "../../chunks/chart-object-literals.js";
+import { e as M } from "../../chunks/popover-ui-utils.js";
+import { J as H, r as O } from "../../chunks/index2.js";
 const q = F`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.panel{max-height:60vh}.color-ramp-popover{display:flex;flex-direction:column;gap:.75rem;min-width:320px;max-width:480px}.color-ramp-toolbar{display:flex;gap:.5rem;align-items:center;padding:5px 5px 0}.ramp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;max-height:300px;overflow:auto;padding:.25rem}.ramp-item{display:flex;flex-direction:column;border:1px solid var(--calcite-color-foreground-3);background:var(--calcite-color-foreground-1);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .12s;border-radius:2px;min-height:56px;padding:4px}.ramp-item:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}.ramp-name{font-size:.625rem;line-height:1;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-3)}.ramp-item.selected{background-color:var(--calcite-color-brand)!important;border-color:var(--calcite-color-brand)!important;outline:2px solid var(--calcite-color-brand)!important;color:var(--calcite-color-foreground-1)}.ramp-item.selected .ramp-name{color:var(--calcite-color-foreground-1)}.ramp-item.selected .ramp-strip{box-shadow:none;border:none}.ramp-strips{display:flex;flex:1;height:28px;width:100%;overflow:hidden}.ramp-strip{flex:1;min-width:0}.ramp-strip-fallback{background:repeating-linear-gradient(45deg,var(--calcite-color-foreground-3) 0,var(--calcite-color-foreground-3) 5px,var(--calcite-color-foreground-2) 5px,var(--calcite-color-foreground-2) 10px)}.ramp-empty{grid-column:1/-1;font-size:.75rem;color:var(--calcite-color-text-3)}.panel-children-container{display:flex}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.panel-children-container{padding:0 1rem;margin-top:1rem}.color-ramp-popover-footer{display:flex;padding:.5rem}.color-ramp-popover-footer calcite-button{flex:1}`, s = {
   name: "bar-chart-data-popover",
   header: "header",
@@ -48,36 +47,36 @@ class W extends I {
     await this.popoverElement.value?.reposition();
   }
   willUpdate() {
-    const e = y.map((t) => B(t, this.commonStrings));
+    const e = y.map((t) => H(t, this.commonStrings));
     S(this.aggregationLabels, e) || (this.aggregationLabels = e), this.colorRamps && this.colorRamps !== this.availableColorRamps && (this.availableColorRamps = this.colorRamps), this.contentKind === c.colorScheme && this.selectedContent && !this.selectedColorRampName && (this.selectedColorRampName = this.selectedContent);
   }
   updated() {
     setTimeout(() => {
       this.picklist.value?.setFocus();
-    }, A.PopoverTimer), N(this.popoverElement.value, this.open);
+    }, _.PopoverTimer), M(this.popoverElement.value, this.open);
   }
   buildAggregationListItems() {
-    return d(y.filter((e) => e !== _.NoAggregation), (e) => e, (e, t) => r`<calcite-list-item .label=${this.aggregationLabels[t]} .value=${e} .selected=${m(e, this.selectedContent)}></calcite-list-item>`);
+    return d(y.filter((e) => e !== N.NoAggregation), (e) => e, (e, t) => l`<calcite-list-item .label=${this.aggregationLabels[t]} .value=${e} .selected=${m(e, this.selectedContent)}></calcite-list-item>`);
   }
   buildPickListItem(e) {
-    return f(e.name, r`<calcite-list-item .label=${D(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${m(e.name, this.selectedContent)}></calcite-list-item>`);
+    return f(e.name, l`<calcite-list-item .label=${D(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${m(e.name, this.selectedContent)}></calcite-list-item>`);
   }
   buildPickListItems(e) {
     const t = this.layerFieldsInfo?.length ?? 0, a = [];
     switch (e) {
       case c.numericFields: {
-        const i = f(" ", r`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`);
+        const i = f(" ", l`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`);
         a.push(i);
         for (let o = 0; o < t; o += 1) {
           const n = this.layerFieldsInfo?.[o];
-          n && O(n) && a.push(this.buildPickListItem(n));
+          n && E(n) && a.push(this.buildPickListItem(n));
         }
         break;
       }
       case c.xAxisField: {
         for (let i = 0; i < t; i += 1) {
           const o = this.layerFieldsInfo?.[i];
-          o && H(o) && a.push(this.buildPickListItem(o));
+          o && A(o) && a.push(this.buildPickListItem(o));
         }
         break;
       }
@@ -163,34 +162,34 @@ class W extends I {
     this.model.emptyCellText !== t && (this.model.emptyCellText = t, this.arcgisChartsConfigPopoverEmptyCellNameChange.emit({ name: t }));
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [a, i, o] = t, n = M * 255;
+    const t = e instanceof CustomEvent ? e.detail : e, [a, i, o] = t, n = O * 255;
     this.arcgisChartsConfigPopoverEmptyCellColorChange.emit({ color: [a, i, o, n] });
   }
   renderAggregationType() {
     const e = this.buildAggregationListItems();
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
   }
   renderXAxisFieldSelect() {
     const e = this.buildPickListItems(c.xAxisField);
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
   }
   renderNumericFields() {
     const e = this.buildPickListItems(c.numericFields);
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
   }
   renderCalendarType() {
-    const e = this.layerFieldsInfo.find((i) => i.name === this.model.xAxisField), t = Object.values($).filter((i) => i !== $.WeekByDayOfWeekAndHourOfDay || e?.type !== E.DateOnly), a = d(t, (i) => i, (i) => {
+    const e = this.layerFieldsInfo.find((i) => i.name === this.model.xAxisField), t = Object.values($).filter((i) => i !== $.WeekByDayOfWeekAndHourOfDay || e?.type !== B.DateOnly), a = d(t, (i) => i, (i) => {
       const o = this._messages[i];
-      return r`<calcite-list-item .label=${o} .value=${i} .selected=${m(i, this.selectedContent)}></calcite-list-item>`;
+      return l`<calcite-list-item .label=${o} .value=${i} .selected=${m(i, this.selectedContent)}></calcite-list-item>`;
     });
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${a}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${a}</calcite-list>`;
   }
   renderCalendarViewType() {
     const e = d(Object.values(R), (t) => t, (t) => {
       const a = this._messages[t];
-      return r`<calcite-list-item .label=${a} .value=${t} .disabled=${t !== R.singleCalendarView} .selected=${m(t, this.selectedContent)}></calcite-list-item>`;
+      return l`<calcite-list-item .label=${a} .value=${t} .disabled=${t !== R.singleCalendarView} .selected=${m(t, this.selectedContent)}></calcite-list-item>`;
     });
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
   }
   renderClassBreakMethod() {
     const e = [
@@ -211,9 +210,9 @@ class W extends I {
       }
     ], t = d(Object.values(e), ({ value: a }) => a, (a) => {
       const { title: i, msg: o, value: n } = a;
-      return r`<calcite-list-item .label=${i} .description=${o} .value=${n} .selected=${m(n, this.selectedContent)}></calcite-list-item>`;
+      return l`<calcite-list-item .label=${i} .description=${o} .value=${n} .selected=${m(n, this.selectedContent)}></calcite-list-item>`;
     });
-    return r`<calcite-list label class=${l(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${t}</calcite-list>`;
+    return l`<calcite-list label class=${r(s.popoverPickList)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${t}</calcite-list>`;
   }
   renderPopoverInfo() {
     let e;
@@ -243,24 +242,24 @@ class W extends I {
         e = this.renderEmptyCellUI();
         break;
       default:
-        e = r`<div></div>`;
+        e = l`<div></div>`;
         break;
     }
     return e;
   }
   renderColorRampSelect() {
     const e = this.filterColorRamps(), t = this._messages?.colorRampCategories ? this._messages.colorRampCategories[this.selectedCategory] : this.selectedCategory;
-    return r`<div class=${l(s.colorRampPopover)}><div class=${l(s.colorRampToolbar)}><calcite-dropdown selection-mode=single placement=bottom-start @calciteDropdownSelect=${this.onCategoryDropdownSelect}><calcite-button slot=trigger appearance=outline icon-end=chevron-down>${t}</calcite-button><calcite-dropdown-group group-title=${this._messages?.colorRamp?.allCategories ?? "All color ramps" ?? g}>${Object.keys(k).map((a) => r`<calcite-dropdown-item data-tag=${a ?? g} .selected=${this.selectedCategory === a}>${this._messages?.colorRampCategories ? this._messages.colorRampCategories[a] : a}</calcite-dropdown-item>`)}</calcite-dropdown-group></calcite-dropdown><calcite-button appearance=outline icon-start=arrow-up-down @click=${this.onFlipAll}>${this._messages?.colorRamp?.flipRampColors}</calcite-button></div><div class=${l(s.rampGrid)}>${e.length === 0 && r`<div class=${l(s.rampEmpty)}>${this._messages?.colorRamp?.noRamps} ${this.selectedCategory !== "all" ? `"${this.selectedCategory}"` : ""}</div>` || ""}${e.map((a) => {
+    return l`<div class=${r(s.colorRampPopover)}><div class=${r(s.colorRampToolbar)}><calcite-dropdown selection-mode=single placement=bottom-start @calciteDropdownSelect=${this.onCategoryDropdownSelect}><calcite-button slot=trigger appearance=outline icon-end=chevron-down>${t}</calcite-button><calcite-dropdown-group group-title=${this._messages?.colorRamp?.allCategories ?? "All color ramps" ?? g}>${Object.keys(k).map((a) => l`<calcite-dropdown-item data-tag=${a ?? g} .selected=${this.selectedCategory === a}>${this._messages?.colorRampCategories ? this._messages.colorRampCategories[a] : a}</calcite-dropdown-item>`)}</calcite-dropdown-group></calcite-dropdown><calcite-button appearance=outline icon-start=arrow-up-down @click=${this.onFlipAll}>${this._messages?.colorRamp?.flipRampColors}</calcite-button></div><div class=${r(s.rampGrid)}>${e.length === 0 && l`<div class=${r(s.rampEmpty)}>${this._messages?.colorRamp?.noRamps} ${this.selectedCategory !== "all" ? `"${this.selectedCategory}"` : ""}</div>` || ""}${e.map((a) => {
       const i = this.getRampColors(a), o = a.name === this.selectedColorRampName;
-      return r`<div class=${`${s.rampItem} ${o ? "selected" : ""}`} title=${a.name ?? g} @click=${() => this.onRampSelect(a)}><div class=${l(s.rampName)} aria-hidden=true>${a.name}</div><div class=${l(s.rampStrips)}>${d(i, (n) => n, (n) => r`<div class=${l(s.rampStrip)} style=${L({ backgroundColor: this.rampColorToCss(n) })}></div>`)}${i.length === 0 && r`<div class=${`${s.rampStrip} ${s.rampStripFallback}`}></div>` || ""}</div></div>`;
-    })}</div><div class=${l(s.colorRampPopoverFooter)}><calcite-button appearance=solid kind=brand @click=${this.closePopover}>${this._messages?.colorRamp?.done}</calcite-button></div></div>`;
+      return l`<div class=${`${s.rampItem} ${o ? "selected" : ""}`} title=${a.name ?? g} @click=${() => this.onRampSelect(a)}><div class=${r(s.rampName)} aria-hidden=true>${a.name}</div><div class=${r(s.rampStrips)}>${d(i, (n) => n, (n) => l`<div class=${r(s.rampStrip)} style=${L({ backgroundColor: this.rampColorToCss(n) })}></div>`)}${i.length === 0 && l`<div class=${`${s.rampStrip} ${s.rampStripFallback}`}></div>` || ""}</div></div>`;
+    })}</div><div class=${r(s.colorRampPopoverFooter)}><calcite-button appearance=solid kind=brand @click=${this.closePopover}>${this._messages?.colorRamp?.done}</calcite-button></div></div>`;
   }
   renderEmptyCellUI() {
     const e = this.model.emptyCellSymbol?.color ?? v.grayColor, t = this.model.emptyCellText ?? v.nullCategory?.text ?? "";
-    return r`<div><div class=${l(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${t} @calciteInputInput=${this.nameChange}></calcite-input></calcite-label></div><div class=${l(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages?.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></div>`;
+    return l`<div><div class=${r(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${t} @calciteInputInput=${this.nameChange}></calcite-input></calcite-label></div><div class=${r(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages?.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></div>`;
   }
   render() {
-    return r`<div><calcite-popover class=${l(s.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${p(this.popoverElement)}><calcite-panel class=${l(s.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${l(s.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${void 0}</calcite-panel></calcite-popover></div>`;
+    return l`<div><calcite-popover class=${r(s.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${p(this.popoverElement)}><calcite-panel class=${r(s.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(s.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${void 0}</calcite-panel></calcite-popover></div>`;
   }
 }
 T("arcgis-charts-config-heat-chart-popover", W);