@arcgis/charts-components 5.2.0-next.10 → 5.2.0-next.12

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

@@ -3,11 +3,10 @@ import { c as n } from "../../chunks/runtime.js";
 import { css as p, html as h } from "lit";
 import { u as m } from "../../chunks/useT9n.js";
 import { createRef as d, ref as g } from "lit/directives/ref.js";
-import { LitElement as C, createEvent as s, safeClassMap as i } from "@arcgis/lumina";
+import { LitElement as C, createEvent as s, safeClassMap as r } from "@arcgis/lumina";
 import { e as v } from "../../chunks/popover-ui-utils.js";
 import { aB as f } from "../../chunks/index.js";
-const o = {
-  jsAppFlyout: "js-app-flyout",
+const c = {
   panelChildrenContainer: "panel-children-container"
 }, u = 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)}:host{overflow-y:auto;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
 class y extends C {
@@ -36,14 +35,12 @@ class y extends C {
     });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [a, l, r] = t, c = f * 255;
-    this.selectedColor = [a, l, r, c], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [a, l, r, c] });
+    const t = e instanceof CustomEvent ? e.detail : e, [i, o, a] = t, l = f * 255;
+    this.selectedColor = [i, o, a, l], this.arcgisChartsConfigSlicesPopoverColorChange.emit({ color: [i, o, a, l] });
   }
   render() {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
-    return h`<div class=${i({
-      [o.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${i(o.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${i(o.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return h`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${r(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${r(c.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 n("arcgis-charts-config-pie-chart-slices-popover", y);

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

@@ -2,26 +2,25 @@
 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 { S as n } from "../../chunks/interfaces.js";
+import { S as a } from "../../chunks/interfaces.js";
 import { b as v, o as y, e as p } from "../../chunks/chart-ui-utils2.js";
-import { u } from "../../chunks/useT9n.js";
+import { u as S } from "../../chunks/useT9n.js";
 import { createRef as h, ref as d } from "lit/directives/ref.js";
-import { LitElement as S, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { LitElement as u, createEvent as l, safeClassMap as r } from "@arcgis/lumina";
 import { i as m } from "../../chunks/rest-js-object-literals.js";
 import { e as $ } from "../../chunks/popover-ui-utils.js";
 import { d as b } from "../../chunks/index3.js";
 import { bk as P } from "../../chunks/index2.js";
-const r = {
-  jsAppFlyout: "js-app-flyout",
+const n = {
   scatterplotPopover: "scatter-plot-popover",
   fillColor: "fill-color",
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
 }, F = 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)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
-class L extends S {
+class L extends u {
   constructor() {
-    super(...arguments), this.picklist = h(), this._messages = u(), this.popoverElement = h(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = h(), this._messages = S(), this.popoverElement = h(), this.open = !1, 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 };
@@ -51,23 +50,23 @@ class L extends S {
   }
   onFieldSelectionChange(e) {
     const t = e.target.selectedItems;
-    this.contentKind === n.sizeVariable ? this.arcgisChartsConfigScatterplotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.contentKind === n.additionalTooltipFields ? this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterplotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
+    this.contentKind === a.sizeVariable ? this.arcgisChartsConfigScatterplotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.contentKind === a.additionalTooltipFields ? this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterplotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
   }
   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=${y(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 === m.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 !== m.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
+    return o`<div><calcite-popover class=${r(n.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${y(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=${r(n.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === m.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 !== m.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=${p("", this.selectedContent)}></calcite-list-item>`));
+    (this.contentKind === a.sizeVariable || this.contentKind === a.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${p("", 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 || P(s))) {
+      if (s !== void 0 && (this.contentKind === a.additionalTooltipFields || P(s))) {
         const C = b(this.layerFieldsInfo, s.name);
         t.push(c(s.name, o`<calcite-list-item .label=${C} .value=${s.name} .selected=${p(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} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+    return o`<calcite-panel class=${r(n.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(n.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${r(n.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;
   }
 }
 g("arcgis-charts-config-scatter-plot-popover", L);

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

@@ -1,20 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c } from "../../chunks/runtime.js";
+import { c as l } from "../../chunks/runtime.js";
 import { css as o, html as i } from "lit";
 import { u as r } from "../../chunks/useT9n.js";
 import { createRef as n, ref as h } from "lit/directives/ref.js";
-import { LitElement as p, createEvent as s, safeClassMap as l } from "@arcgis/lumina";
+import { LitElement as p, createEvent as a, safeClassMap as s } from "@arcgis/lumina";
 import { e as m } from "../../chunks/popover-ui-utils.js";
 import { d } from "../../chunks/type-guards.js";
 import { M as e } from "../../chunks/common.js";
-const a = {
+const c = {
   selectChartComponent: "select-chart-component",
-  jsAppFlyout: "js-app-flyout",
   panel: "panel"
 }, g = o`.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)}.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 p {
   constructor() {
-    super(...arguments), this._messages = r(), this.selectChartTypePopover = n(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
+    super(...arguments), this._messages = r(), this.selectChartTypePopover = n(), this.open = !1, this.arcgisChartsConfigPopoverClose = a(), this.arcgisChartsConfigSelectChartTypeChange = a();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, layerType: 1, isRasterBarChartSupported: 5, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
@@ -50,13 +49,12 @@ class C extends p {
     }, 250);
   }
   render() {
-    return i`<div class=${l({
-      [a.selectChartComponent]: !0,
-      [a.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 ${h(this.selectChartTypePopover)}><calcite-panel class=${l(a.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+    return i`<div class=${s({
+      [c.selectChartComponent]: !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 ${h(this.selectChartTypePopover)}><calcite-panel class=${s(c.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);
+l("arcgis-charts-config-select-chart-type-popover", C);
 export {
   C as ArcgisChartsConfigSelectChartTypePopover
 };