@arcgis/charts-components 5.1.0-next.6 → 5.1.0-next.8

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

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
-import { css as v, html as o } from "lit";
+import { c as g } from "../../chunks/runtime.js";
+import { css as f, html as o } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
 import "@arcgis/toolkit/type";
 import "../../chunks/series-types.js";
@@ -9,7 +9,7 @@ import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "luxon";
 import "d3-array";
-import { bL as y, cY as u } from "../../chunks/index.js";
+import { bL as v, cY as y } from "../../chunks/index.js";
 import "@arcgis/core/Graphic.js";
 import "@arcgis/core/renderers/support/jsonUtils.js";
 import "@arcgis/core/symbols/support/symbolUtils.js";
@@ -26,12 +26,12 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/toolkit/dom";
-import { e as S } from "../../chunks/popover-ui-utils.js";
+import { e as u } from "../../chunks/popover-ui-utils.js";
 import { S as n } from "../../chunks/interfaces.js";
-import { a as h, l as $, c as m } from "../../chunks/chart-ui-utils2.js";
-import { u as P } from "../../chunks/useT9n.js";
-import { createRef as d, ref as C } from "lit/directives/ref.js";
-import { LitElement as b, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { a as S, l as $, c as h } from "../../chunks/chart-ui-utils2.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { createRef as m, ref as d } from "lit/directives/ref.js";
+import { LitElement as P, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
 const r = {
   jsAppFlyout: "js-app-flyout",
   scatterplotPopover: "scatter-plot-popover",
@@ -39,10 +39,10 @@ const r = {
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
-}, F = v`.hide{display:none}.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{width:100%}.pick-list-panel{max-height:60vh}`;
-class L extends b {
+}, F = f`.hide{display:none}.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{width:100%}.pick-list-panel{max-height:60vh}`;
+class L extends P {
   constructor() {
-    super(...arguments), this.picklist = d(), this._messages = P(), this.popoverElement = d(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = m(), this._messages = b(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, contentKind: 1, selectedContent: 1, referenceElement: 0, placement: 1, open: 5, layerFieldsInfo: 0 };
@@ -56,9 +56,7 @@ class L extends b {
   updated() {
     setTimeout(() => {
       this.picklist.value?.setFocus();
-    }, h.PopoverTimer), S(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
-      this.popoverElement.value?.reposition();
-    }, h.PopoverTimer);
+    }, S.PopoverTimer), u(this.popoverElement.value, this.open);
   }
   seriesPopoverClose() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
@@ -78,22 +76,22 @@ class L extends b {
   }
   render() {
     const e = this.selectedContent, t = this.selectedContent;
-    return o`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${C(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === p.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== p.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
+    return o`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${d(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === p.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== p.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
-    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`));
+    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
       const s = this.layerFieldsInfo?.[i] ?? void 0;
-      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || y(s))) {
-        const g = u(this.layerFieldsInfo, s.name);
-        t.push(c(s.name, o`<calcite-list-item .label=${g} .value=${s.name} .selected=${m(s.name, this.selectedContent)}></calcite-list-item>`));
+      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || v(s))) {
+        const C = y(this.layerFieldsInfo, s.name);
+        t.push(c(s.name, o`<calcite-list-item .label=${C} .value=${s.name} .selected=${h(s.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
-    return o`<calcite-panel class=${a(r.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${a(r.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${a(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${C(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+    return o`<calcite-panel class=${a(r.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${a(r.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${a(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;
   }
 }
-f("arcgis-charts-config-scatter-plot-popover", L);
+g("arcgis-charts-config-scatter-plot-popover", L);
 export {
   L as ArcgisChartsConfigScatterplotPopover
 };

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

@@ -26,33 +26,30 @@ import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/toolkit/dom";
 import { e as r } from "../../chunks/popover-ui-utils.js";
-import { a as p } from "../../chunks/chart-ui-utils2.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { createRef as h, ref as m } from "lit/directives/ref.js";
-import { LitElement as d, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
+import { u as p } from "../../chunks/useT9n.js";
+import { createRef as n, ref as h } from "lit/directives/ref.js";
+import { LitElement as m, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
 import { M as e } from "../../chunks/common.js";
 const i = {
   selectChartComponent: "select-chart-component",
   jsAppFlyout: "js-app-flyout",
   panel: "panel"
-}, g = l`.hide{display:none}.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)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
-class C extends d {
+}, d = l`.hide{display:none}.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)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
+class g extends m {
   constructor() {
-    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
+    super(...arguments), this._messages = p(), this.selectChartTypePopover = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
   }
   static {
-    this.styles = g;
+    this.styles = d;
   }
   async reposition() {
     await this.selectChartTypePopover.value?.reposition();
   }
   updated() {
-    r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
-      this.selectChartTypePopover.value?.reposition();
-    }, p.PopoverTimer);
+    r(this.selectChartTypePopover.value, this.open);
   }
   buildChartTypesList() {
     return a`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.calendarHeatChart} .value=${e.HeatChart} .selected=${this.selectedModelType === e.HeatChart}><calcite-icon slot=content-start icon=calendar-heat-chart></calcite-icon></calcite-list-item></calcite-list>`;
@@ -74,10 +71,10 @@ class C extends d {
     return a`<div class=${o({
       [i.selectChartComponent]: !0,
       [i.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${o(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${h(this.selectChartTypePopover)}><calcite-panel class=${o(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
-c("arcgis-charts-config-select-chart-type-popover", C);
+c("arcgis-charts-config-select-chart-type-popover", g);
 export {
-  C as ArcgisChartsConfigSelectChartTypePopover
+  g as ArcgisChartsConfigSelectChartTypePopover
 };