@arcgis/charts-components 5.2.0-next.29 → 5.2.0-next.30

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

@@ -1,33 +1,32 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as k } from "../../chunks/runtime.js";
+import { c as v } from "../../chunks/runtime.js";
 import { keyed as p } from "lit/directives/keyed.js";
-import { repeat as v } from "lit/directives/repeat.js";
+import { repeat as k } from "lit/directives/repeat.js";
 import { substitute as $ } from "@arcgis/core/intl.js";
-import { a } from "../../chunks/interfaces.js";
-import { b as u, f as y, e as h, a as L } from "../../chunks/chart-ui-utils2.js";
+import { a as l } from "../../chunks/interfaces.js";
+import { b as f, f as y, e as h, a as P } from "../../chunks/chart-ui-utils2.js";
 import { u as F } from "../../chunks/useT9n.js";
-import { css as P, html as n } from "lit";
-import { createRef as f, ref as m } from "lit/directives/ref.js";
-import { LitElement as I, createEvent as g, renderElement as x, safeStyleMap as D, safeClassMap as d } from "@arcgis/lumina";
+import { css as L, html as n } from "lit";
+import { createRef as u, ref as m } from "lit/directives/ref.js";
+import { LitElement as x, createEvent as g, renderElement as I, safeStyleMap as D, safeClassMap as d } from "@arcgis/lumina";
 import { B as r } from "../../chunks/common.js";
 import { e as S, p as T } from "../../chunks/popover-ui-utils.js";
 import { bh as b, bk as E, a2 as w } from "../../chunks/index2.js";
 import { d as B } from "../../chunks/index3.js";
 import { R as C } from "../../chunks/rest-js-object-literals.js";
-const l = {
+const o = {
   name: "bar-chart-data-popover",
-  numericFieldPickList: "bar-chart-data-numeric-fields-pick-list",
   header: "header",
   fab: "fab",
-  pickListItemLabel: "pick-list-item-label",
+  popoverPickList: "popover-pick-list",
   sortMean: "sort-mean",
   sortMedian: "sort-median",
   sortOrderPickList: "sort-order-pick-list",
   panel: "panel"
-}, N = P`.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}.fab{display:flex;justify-content:stretch}.pick-list-item-label{font-size:small}.sort-icon-color{color:#000}.sort-mean,.sort-median{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
-class K extends I {
+}, N = L`.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}.fab{display:flex;justify-content:stretch}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.sort-icon-color{color:#000}.sort-mean,.sort-median{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
+class K extends x {
   constructor() {
-    super(...arguments), this._messages = F(), this.picklist = f(), this.placement = "leading", this.popoverElement = f(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = g(), this.arcgisChartsConfigPopoverClose = g();
+    super(...arguments), this._messages = F(), this.picklist = u(), this.placement = "leading", this.popoverElement = u(), this.offsetDistance = -200, this.pickListHasChanged = !1, this.open = !1, this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.arcgisChartsConfigBoxPlotDataPopoverChange = g(), this.arcgisChartsConfigPopoverClose = g();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, isCustomSortDisabled: 5, selectedContent: 1 };
@@ -44,13 +43,13 @@ class K extends I {
   updated() {
     setTimeout(() => {
       typeof this.picklist.value?.setFocus == "function" && this.picklist.value?.setFocus();
-    }, u.PopoverTimer), S(this.popoverElement.value, this.open);
+    }, f.PopoverTimer), S(this.popoverElement.value, this.open);
   }
   selectedContentChange(e, t) {
     this.pickListHasChanged = T(e, t);
   }
   closePopover() {
-    if (this.contentKind === a.numericFields && this.pickListHasChanged) {
+    if (this.contentKind === l.numericFields && this.pickListHasChanged) {
       const e = {
         pickListElement: this.picklist.value,
         eventEmitter: this.arcgisChartsConfigBoxPlotDataPopoverChange,
@@ -74,27 +73,27 @@ class K extends I {
   buildPickListItems(e) {
     const t = this.layerFieldsInfo?.length ?? 0, i = [];
     switch (e) {
-      case a.numericFields: {
+      case l.numericFields: {
         for (let s = 0; s < t; s += 1) {
-          const o = this.layerFieldsInfo[s];
-          E(o) && i.push(this.buildPickListItem(o));
+          const a = this.layerFieldsInfo[s];
+          E(a) && i.push(this.buildPickListItem(a));
         }
         break;
       }
-      case a.category: {
+      case l.category: {
         const s = p(" ", n`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`);
         i.push(s);
-        for (let o = 0; o < t; o += 1) {
-          const c = this.layerFieldsInfo[o];
+        for (let a = 0; a < t; a += 1) {
+          const c = this.layerFieldsInfo[a];
           (b(c) || c.type === C.String) && i.push(this.buildPickListItem(c));
         }
         break;
       }
-      case a.splitByField: {
+      case l.splitByField: {
         const s = p(" ", n`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`);
         i.push(s);
-        for (let o = 0; o < t; o += 1) {
-          const c = this.layerFieldsInfo[o];
+        for (let a = 0; a < t; a += 1) {
+          const c = this.layerFieldsInfo[a];
           (b(c) || c.type === C.String) && i.push(this.buildPickListItem(c));
         }
         break;
@@ -108,7 +107,7 @@ class K extends I {
   buildSortOrder() {
     const e = Object.keys(r);
     let t;
-    return v(e, (i) => i, (i) => {
+    return k(e, (i) => i, (i) => {
       let s = "";
       switch (i) {
         case r.xAxisAsc: {
@@ -120,18 +119,18 @@ class K extends I {
           break;
         }
         case r.meanAsc:
-          t = "sort-descending", s = l.sortMean;
+          t = "sort-descending", s = o.sortMean;
           break;
         case r.meanDesc: {
-          t = "sort-ascending", s = l.sortMean;
+          t = "sort-ascending", s = o.sortMean;
           break;
         }
         case r.medianAsc: {
-          t = "sort-descending", s = l.sortMedian;
+          t = "sort-descending", s = o.sortMedian;
           break;
         }
         case r.medianDesc: {
-          t = "sort-ascending", s = l.sortMedian;
+          t = "sort-ascending", s = o.sortMedian;
           break;
         }
         case r.customSort: {
@@ -147,44 +146,44 @@ class K extends I {
   }
   createTooltip(e) {
     if (e.target?.label === this._messages.customSort && this.isCustomSortDisabled) {
-      const t = e.target, i = w(t), o = new Intl.NumberFormat(i).format(u.customSortLimit), c = $(this._messages.customSortLimit ?? "", {
-        totalLimit: o
+      const t = e.target, i = w(t), a = new Intl.NumberFormat(i).format(f.customSortLimit), c = $(this._messages.customSortLimit ?? "", {
+        totalLimit: a
       });
-      this.tooltip = x(n`<calcite-tooltip style=${D({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${c}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
+      this.tooltip = I(n`<calcite-tooltip style=${D({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${c}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
     }
   }
   destroyTooltip() {
-    L(this.tooltip);
+    P(this.tooltip);
   }
   renderCategory() {
-    const e = this.buildPickListItems(a.category);
-    return n`<calcite-list label class=${d(l.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
+    const e = this.buildPickListItems(l.category);
+    return n`<calcite-list label class=${d(o.popoverPickList)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
   renderNumericFields() {
-    const e = this.buildPickListItems(a.numericFields);
-    return n`<calcite-list label class=${d(l.numericFieldPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${m(this.picklist)}>${e}</calcite-list>`;
+    const e = this.buildPickListItems(l.numericFields);
+    return n`<calcite-list label class=${d(o.popoverPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
   renderSplitByField() {
-    const e = this.buildPickListItems(a.splitByField);
-    return n`<calcite-list label class=${d(l.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
+    const e = this.buildPickListItems(l.splitByField);
+    return n`<calcite-list label class=${d(o.popoverPickList)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
   }
   renderSortOrder() {
     const e = this.buildSortOrder();
-    return n`<calcite-list label class=${d(l.sortOrderPickList)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
+    return n`<calcite-list label class=${`${o.popoverPickList} ${o.sortOrderPickList}`} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
   }
   renderPopoverInfo() {
     let e;
     switch (this.contentKind) {
-      case a.category:
+      case l.category:
         e = this.renderCategory();
         break;
-      case a.numericFields:
+      case l.numericFields:
         e = this.renderNumericFields();
         break;
-      case a.splitByField:
+      case l.splitByField:
         e = this.renderSplitByField();
         break;
-      case a.sortOrder:
+      case l.sortOrder:
         e = this.renderSortOrder();
         break;
     }
@@ -192,10 +191,10 @@ class K extends I {
   }
   render() {
     let e;
-    return this.contentKind === a.numericFields && (e = n`<div slot=footer><calcite-fab class=${d(l.fab)} appearance=outline-fill kind=neutral .icon=${void 0} .label=${this._messages.selectionDone} scale=s text-enabled .text=${this._messages.selectionDone} @click=${this.onNumericFieldSelectionDone}></calcite-fab></div>`), n`<div><calcite-popover class=${d(l.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${m(this.popoverElement)}><calcite-panel class=${d(l.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${d(l.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
+    return this.contentKind === l.numericFields && (e = n`<div slot=footer><calcite-fab class=${d(o.fab)} appearance=outline-fill kind=neutral .icon=${void 0} .label=${this._messages.selectionDone} scale=s text-enabled .text=${this._messages.selectionDone} @click=${this.onNumericFieldSelectionDone}></calcite-fab></div>`), n`<div><calcite-popover class=${d(o.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${m(this.popoverElement)}><calcite-panel class=${d(o.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${d(o.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
   }
 }
-k("arcgis-charts-config-box-plot-popover", K);
+v("arcgis-charts-config-box-plot-popover", K);
 export {
   K as ArcgisChartsConfigBoxPlotPopover
 };

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as w } from "../../chunks/runtime.js";
+import { c as F } from "../../chunks/runtime.js";
 import { repeat as d } from "lit/directives/repeat.js";
-import { css as F, html as o } from "lit";
+import { css as T, html as l } from "lit";
 import { keyed as f } from "lit/directives/keyed.js";
-import L from "@arcgis/core/Color.js";
-import { LitElement as T, createEvent as h, safeClassMap as r, nothing as g, safeStyleMap as P } from "@arcgis/lumina";
+import P from "@arcgis/core/Color.js";
+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 "lodash-es";
-import { d as D, F as b } from "../../chunks/index3.js";
-import { u as v } from "../../chunks/useT9n.js";
+import { d as D, F as v } from "../../chunks/index3.js";
+import { u as b } from "../../chunks/useT9n.js";
 import { e as c, W as $ } from "../../chunks/interfaces.js";
 import { c as y, b as A, e as m } from "../../chunks/chart-ui-utils2.js";
 import { C as x, k } from "../../chunks/class-breaks.js";
@@ -17,10 +17,10 @@ import { r as _, i as R, e as C } from "../../chunks/chart-object-literals.js";
 import { e as B } from "../../chunks/popover-ui-utils.js";
 import { t as N, aB as M } from "../../chunks/index.js";
 import { bb as H, bk 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}.pick-list-item-label{font-size:small}.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;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.color-ramp-popover-footer{display:flex;padding:.5rem}.color-ramp-popover-footer calcite-button{flex:1}`, s = {
+const q = T`.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;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.color-ramp-popover-footer{display:flex;padding:.5rem}.color-ramp-popover-footer calcite-button{flex:1}`, s = {
   name: "bar-chart-data-popover",
   header: "header",
-  pickListItemLabel: "pick-list-item-label",
+  popoverPickList: "popover-pick-list",
   panel: "panel",
   colorRampPopover: "color-ramp-popover",
   colorRampToolbar: "color-ramp-toolbar",
@@ -34,9 +34,9 @@ const q = F`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.a
   panelChildrenContainer: "panel-children-container",
   colorRampPopoverFooter: "color-ramp-popover-footer"
 };
-class W extends T {
+class W extends I {
   constructor() {
-    super(...arguments), this._messages = v(), this.commonStrings = v({ name: "common", blocking: !0 }), this.picklist = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.availableColorRamps = [], this.selectedCategory = x.all, this.aggregationLabels = [], this.isFlipped = !1, this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigHeatChartColorRampChange = h(), this.arcgisChartsConfigHeatChartDataPopoverChange = h(), this.arcgisChartsConfigPopoverClose = h(), this.arcgisChartsConfigPopoverEmptyCellColorChange = h(), this.arcgisChartsConfigPopoverEmptyCellNameChange = h();
+    super(...arguments), this._messages = b(), this.commonStrings = b({ name: "common", blocking: !0 }), this.picklist = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.availableColorRamps = [], this.selectedCategory = x.all, this.aggregationLabels = [], this.isFlipped = !1, this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigHeatChartColorRampChange = h(), this.arcgisChartsConfigHeatChartDataPopoverChange = h(), this.arcgisChartsConfigPopoverClose = h(), this.arcgisChartsConfigPopoverEmptyCellColorChange = h(), this.arcgisChartsConfigPopoverEmptyCellNameChange = h();
   }
   static {
     this.properties = { availableColorRamps: 16, selectedColorRampName: 16, selectedCategory: 16, aggregationLabels: 16, isFlipped: 5, model: 0, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1, colorRamps: 0 };
@@ -57,27 +57,27 @@ class W extends T {
     }, A.PopoverTimer), B(this.popoverElement.value, this.open);
   }
   buildAggregationListItems() {
-    return d(y.filter((e) => e !== _.NoAggregation), (e) => e, (e, t) => o`<calcite-list-item .label=${this.aggregationLabels[t]} .value=${e} .selected=${m(e, this.selectedContent)}></calcite-list-item>`);
+    return d(y.filter((e) => e !== _.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, o`<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(" ", o`<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 l = 0; l < t; l += 1) {
-          const n = this.layerFieldsInfo?.[l];
+        for (let o = 0; o < t; o += 1) {
+          const n = this.layerFieldsInfo?.[o];
           n && O(n) && a.push(this.buildPickListItem(n));
         }
         break;
       }
       case c.xAxisField: {
         for (let i = 0; i < t; i += 1) {
-          const l = this.layerFieldsInfo?.[i];
-          l && H(l) && a.push(this.buildPickListItem(l));
+          const o = this.layerFieldsInfo?.[i];
+          o && H(o) && a.push(this.buildPickListItem(o));
         }
         break;
       }
@@ -113,16 +113,16 @@ class W extends T {
     let t = "#000000";
     try {
       if (e) {
-        if (e instanceof L) {
+        if (e instanceof P) {
           const a = e.toHex();
           typeof a == "string" && a.length && (t = a);
         } else if (Array.isArray(e)) {
-          const [a, i, l, n] = e;
-          [a, i, l].every((I) => typeof I == "number") && (t = `rgba(${a},${i},${l},${n ?? 1})`);
+          const [a, i, o, n] = e;
+          [a, i, o].every((w) => typeof w == "number") && (t = `rgba(${a},${i},${o},${n ?? 1})`);
         } else if (typeof e == "object" && e) {
-          const { r: a, g: i, b: l, a: n } = e;
-          if (a != null && i != null && l != null)
-            return `rgba(${a},${i},${l},${n ?? 1})`;
+          const { r: a, g: i, b: o, a: n } = e;
+          if (a != null && i != null && o != null)
+            return `rgba(${a},${i},${o},${n ?? 1})`;
         }
       }
     } catch {
@@ -163,34 +163,34 @@ class W extends T {
     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, l] = t, n = M * 255;
-    this.arcgisChartsConfigPopoverEmptyCellColorChange.emit({ color: [a, i, l, n] });
+    const t = e instanceof CustomEvent ? e.detail : e, [a, i, o] = t, n = M * 255;
+    this.arcgisChartsConfigPopoverEmptyCellColorChange.emit({ color: [a, i, o, n] });
   }
   renderAggregationType() {
     const e = this.buildAggregationListItems();
-    return o`<calcite-list label class=${r(s.pickListItemLabel)} 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 o`<calcite-list label class=${r(s.pickListItemLabel)} 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 o`<calcite-list label class=${r(s.pickListItemLabel)} 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 l = this._messages[i];
-      return o`<calcite-list-item .label=${l} .value=${i} .selected=${m(i, this.selectedContent)}></calcite-list-item>`;
+      const o = this._messages[i];
+      return l`<calcite-list-item .label=${o} .value=${i} .selected=${m(i, this.selectedContent)}></calcite-list-item>`;
     });
-    return o`<calcite-list label class=${r(s.pickListItemLabel)} 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 o`<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 o`<calcite-list label class=${r(s.pickListItemLabel)} 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 = [
@@ -210,10 +210,10 @@ class W extends T {
         msg: this._messages?.classBreaksMethod?.quantileMsg
       }
     ], t = d(Object.values(e), ({ value: a }) => a, (a) => {
-      const { title: i, msg: l, value: n } = a;
-      return o`<calcite-list-item .label=${i} .description=${l} .value=${n} .selected=${m(n, this.selectedContent)}></calcite-list-item>`;
+      const { title: i, msg: o, value: n } = a;
+      return l`<calcite-list-item .label=${i} .description=${o} .value=${n} .selected=${m(n, this.selectedContent)}></calcite-list-item>`;
     });
-    return o`<calcite-list label class=${r(s.pickListItemLabel)} 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,27 +243,27 @@ class W extends T {
         e = this.renderEmptyCellUI();
         break;
       default:
-        e = o`<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 o`<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) => o`<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 && o`<div class=${r(s.rampEmpty)}>${this._messages?.colorRamp?.noRamps} ${this.selectedCategory !== "all" ? `"${this.selectedCategory}"` : ""}</div>` || ""}${e.map((a) => {
-      const i = this.getRampColors(a), l = a.name === this.selectedColorRampName;
-      return o`<div class=${`${s.rampItem} ${l ? "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) => o`<div class=${r(s.rampStrip)} style=${P({ backgroundColor: this.rampColorToCss(n) })}></div>`)}${i.length === 0 && o`<div class=${`${s.rampStrip} ${s.rampStripFallback}`}></div>` || ""}</div></div>`;
+    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 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 ?? b.grayColor, t = this.model.emptyCellText ?? b.nullCategory?.text ?? "";
-    return o`<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>`;
+    const e = this.model.emptyCellSymbol?.color ?? v.grayColor, t = this.model.emptyCellText ?? v.nullCategory?.text ?? "";
+    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 o`<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>`;
+    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>`;
   }
 }
-w("arcgis-charts-config-heat-chart-popover", W);
+F("arcgis-charts-config-heat-chart-popover", W);
 export {
   W as ArcgisChartsConfigHeatChartPopover
 };

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

@@ -1,35 +1,35 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as f } from "../../chunks/runtime.js";
-import { css as y, html as t } from "lit";
+import { css as v, html as t } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
 import { H as i } from "../../chunks/interfaces.js";
-import { b as v, o as C } from "../../chunks/chart-ui-utils2.js";
-import { u as b } from "../../chunks/useT9n.js";
+import { b as y, o as C } from "../../chunks/chart-ui-utils2.js";
+import { u } from "../../chunks/useT9n.js";
 import { createRef as m, ref as h } from "lit/directives/ref.js";
-import { LitElement as u, createEvent as p, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as b, createEvent as p, safeClassMap as o } from "@arcgis/lumina";
 import { i as $ } from "../../chunks/rest-js-object-literals.js";
-import { g as o } from "../../chunks/chart-object-literals.js";
+import { g as s } from "../../chunks/chart-object-literals.js";
 import { e as P } from "../../chunks/popover-ui-utils.js";
 import { d as S } from "../../chunks/index3.js";
 import { bk as k } from "../../chunks/index2.js";
-import { aB as L } from "../../chunks/index.js";
+import { aB as T } from "../../chunks/index.js";
 const l = {
   symbolPropertyPopover: "symbol-property-popover",
   colorPicker: "color-picker",
   header: "header",
-  pickListItemLabel: "pick-list-item-label",
+  popoverPickList: "popover-pick-list",
   fieldSelectPanel: "field-select-panel",
   transformationPanel: "transformation-panel"
-}, T = y`.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)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
-class F extends u {
+}, w = v`.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)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
+class x extends b {
   constructor() {
-    super(...arguments), this._messages = b(), this.picklist = m(), this.popoverElement = m(), this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
+    super(...arguments), this._messages = u(), this.picklist = m(), this.popoverElement = m(), this.layerFieldsInfo = [], this.open = !1, this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
   }
   static {
     this.properties = { messageOverrides: 0, layerFieldsInfo: 0, headingTitle: 1, selectedNumericField: 1, selectedTransformationType: 1, selectedOverlaySymbol: 0, selectedBinColor: 0, referenceElement: 0, contentKind: 1, placement: 1, open: 5, selectedOverlaySymbolType: 1 };
   }
   static {
-    this.styles = T;
+    this.styles = w;
   }
   async reposition() {
     await this.popoverElement.value?.reposition();
@@ -37,7 +37,7 @@ class F extends u {
   updated() {
     setTimeout(() => {
       this.picklist.value?.setFocus();
-    }, v.PopoverTimer), P(this.popoverElement.value, this.open);
+    }, y.PopoverTimer), P(this.popoverElement.value, this.open);
   }
   buildPickListItems(e) {
     const n = [];
@@ -48,9 +48,9 @@ class F extends u {
       }
     else {
       const r = [
-        c(o.None, t`<calcite-list-item .label=${this._messages.none} .value=${o.None} .selected=${this.selectedTransformationType === o.None}></calcite-list-item>`),
-        c(o.Log, t`<calcite-list-item .label=${this._messages.log} .value=${o.Log} .selected=${this.selectedTransformationType === o.Log}></calcite-list-item>`),
-        c(o.Sqrt, t`<calcite-list-item .label=${this._messages.sqRt} .value=${o.Sqrt} .selected=${this.selectedTransformationType === o.Sqrt}></calcite-list-item>`)
+        c(s.None, t`<calcite-list-item .label=${this._messages.none} .value=${s.None} .selected=${this.selectedTransformationType === s.None}></calcite-list-item>`),
+        c(s.Log, t`<calcite-list-item .label=${this._messages.log} .value=${s.Log} .selected=${this.selectedTransformationType === s.Log}></calcite-list-item>`),
+        c(s.Sqrt, t`<calcite-list-item .label=${this._messages.sqRt} .value=${s.Sqrt} .selected=${this.selectedTransformationType === s.Sqrt}></calcite-list-item>`)
       ];
       n.push(...r);
     }
@@ -66,7 +66,7 @@ class F extends u {
     this.arcgisChartsConfigHistogramPopoverSymbolChange.emit(e.detail);
   }
   fillColorChange(e) {
-    const n = e.detail, [r, a, d] = n, g = L * 255;
+    const n = e.detail, [r, a, d] = n, g = T * 255;
     this.arcgisChartsConfigHistogramPopoverSymbolChange.emit({
       type: $.SFS,
       color: [r, a, d, g]
@@ -79,21 +79,21 @@ class F extends u {
     }), this.open = !1);
   }
   renderFillColor() {
-    return t`<arcgis-charts-config-color-style class=${s(l.colorPicker)} .header=${this.headingTitle ?? this._messages.fillColor} enable-close .open=${this.open} .selectedColor=${this.selectedBinColor?.color} @arcgisChartsConfigColorStyleChange=${this.fillColorChange} @arcgisChartsConfigColorStyleClose=${this.closePopover}></arcgis-charts-config-color-style>`;
+    return t`<arcgis-charts-config-color-style class=${o(l.colorPicker)} .header=${this.headingTitle ?? this._messages.fillColor} enable-close .open=${this.open} .selectedColor=${this.selectedBinColor?.color} @arcgisChartsConfigColorStyleChange=${this.fillColorChange} @arcgisChartsConfigColorStyleClose=${this.closePopover}></arcgis-charts-config-color-style>`;
   }
   renderOverlayStyle() {
-    return t`<arcgis-charts-config-line-style class=${s(l.colorPicker)} .open=${this.open} enable-close .header=${this.headingTitle ?? this._messages.lineStyle} .lineStyle=${this.selectedOverlaySymbol} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.overlaySymbolChange}></arcgis-charts-config-line-style>`;
+    return t`<arcgis-charts-config-line-style class=${o(l.colorPicker)} .open=${this.open} enable-close .header=${this.headingTitle ?? this._messages.lineStyle} .lineStyle=${this.selectedOverlaySymbol} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.overlaySymbolChange}></arcgis-charts-config-line-style>`;
   }
   renderFieldSelect() {
     const e = this.buildPickListItems(i.numericFields);
-    return t`<calcite-panel class=${s(l.fieldSelectPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${s(l.header)}>${this._messages.numericalFieldHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${s(l.pickListItemLabel)} filter-enabled @calciteListChange=${this.onPickListChange} ${h(this.picklist)}>${e}</calcite-list></calcite-panel>`;
+    return t`<calcite-panel class=${o(l.fieldSelectPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${o(l.header)}>${this._messages.numericalFieldHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${o(l.popoverPickList)} filter-enabled @calciteListChange=${this.onPickListChange} ${h(this.picklist)}>${e}</calcite-list></calcite-panel>`;
   }
   renderTransformationSelect() {
     const e = this.buildPickListItems(i.transformation);
-    return t`<calcite-panel class=${s(l.transformationPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${s(l.header)}>${this._messages.transformationHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${s(l.pickListItemLabel)} @calciteListChange=${this.onPickListChange}>${e}</calcite-list></calcite-panel>`;
+    return t`<calcite-panel class=${o(l.transformationPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${o(l.header)}>${this._messages.transformationHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${o(l.popoverPickList)} @calciteListChange=${this.onPickListChange}>${e}</calcite-list></calcite-panel>`;
   }
   render() {
-    return t`<div><calcite-popover class=${s(this.getPopoverClass())} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} .offsetDistance=${C(this.placement)} label auto-close ${h(this.popoverElement)}>${this.renderContentType()}</calcite-popover></div>`;
+    return t`<div><calcite-popover class=${o(this.getPopoverClass())} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} .offsetDistance=${C(this.placement)} label auto-close ${h(this.popoverElement)}>${this.renderContentType()}</calcite-popover></div>`;
   }
   renderContentType() {
     switch (this.contentKind) {
@@ -110,7 +110,7 @@ class F extends u {
     }
   }
 }
-f("arcgis-charts-config-histogram-popover", F);
+f("arcgis-charts-config-histogram-popover", x);
 export {
-  F as ArcgisChartsConfigHistogramPopover
+  x as ArcgisChartsConfigHistogramPopover
 };