@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,454 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as T } from "../../chunks/runtime.js";
+import { keyed as f } from "lit/directives/keyed.js";
+import { b as h } from "../../chunks/common.js";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { f as E } from "../../chunks/rest-js-object-literals.js";
+import "@geoscene/toolkit/intl";
+import { debounce as C, isEmpty as x, toNumber as N } from "lodash-es";
+import "luxon";
+import "d3-array";
+import { bC as $, ax as S } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { r as I } from "../../chunks/popover-ui-utils.js";
+import { a as y, d as G, s as g } from "../../chunks/chart-ui-utils2.js";
+import { u as _ } from "../../chunks/useT9n.js";
+import { css as w, html as d } from "lit";
+import { createRef as m, ref as p } from "lit/directives/ref.js";
+import {
+  LitElement as M,
+  renderElement as P,
+  safeStyleMap as u,
+  safeClassMap as s,
+} from "@geoscene/lumina";
+const o = {
+    sectionLabel: "section-label",
+    label: "label",
+    sliceList: "slice-list",
+    radioGroup: "radio-group",
+    pieDonutLabelsContainer: "pie-donut-labels-container",
+    sliderInputContainer: "slider-input-container",
+    groupingLabelContainer: "grouping-label-container",
+    numberInput: "number-input",
+  },
+  z = w`:host{display:flex;flex-direction:column;width:var(--geoscene-charts-config-calcite-block-default-width);margin:var(--geoscene-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--geoscene-charts-config-margin-major) var(--geoscene-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.label{display:flex;margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor);margin-bottom:var(--geoscene-charts-config-margin-minor);justify-content:space-between}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container{display:flex}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--geoscene-charts-intra-section-margin) !important;margin-right:var(--geoscene-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.slice-list{margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor);margin-bottom:var(--geoscene-charts-config-margin-major)}.radio-group{margin-top:var(--geoscene-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--geoscene-charts-config-margin-minor) * -3)}`;
+class k extends M {
+  constructor() {
+    super(...arguments),
+      (this._messages = _()),
+      (this.slicesPopover = null),
+      (this.donutSizeSliderElement = m()),
+      (this.groupingThresholdElement = m()),
+      (this.groupingThresholdSliderElement = m()),
+      (this.labelCharacterLimitElement = m()),
+      (this.decimalPlacesElement = m()),
+      (this.open = !1),
+      (this.onDonutSizeSliderChange = C(() => {
+        this.donutSizeSliderElement.value &&
+          Number.isInteger(this.donutSizeSliderElement.value?.value) &&
+          (this.model.innerRadiusSize =
+            this.donutSizeSliderElement.value.value ?? $);
+      }, y.SliderTimer)),
+      (this.onGroupingThresholdSliderChange = C(() => {
+        const e = this.groupingThresholdSliderElement.value?.value;
+        e !== void 0 && !Number.isNaN(e)
+          ? (this.groupingThresholdElement?.value &&
+              (this.groupingThresholdElement.value.value = e.toString()),
+            this.groupingThresholdSliderElement.value &&
+              (this.groupingThresholdSliderElement.value.value = e),
+            (this.model.groupingThreshold = e))
+          : (this.model.groupingThreshold = 0);
+      }, y.SliderTimer)),
+      (this.sliceNameChange = (e) => {
+        if (e.detail !== null || e.detail !== void 0) {
+          const l = e.detail?.name,
+            i = this.model.slices?.findIndex(
+              (r) => r.sliceId === this.selectedSliceId
+            ),
+            t = this.model.sliceGrouping;
+          i != null && i >= 0
+            ? this.model.setSliceName(l, i)
+            : t?.sliceId === this.selectedSliceId &&
+              t !== void 0 &&
+              (this.model.sliceGrouping = {
+                ...t,
+                label: l,
+              });
+        }
+      }),
+      (this.sliceColorChange = (e) => {
+        if (e.detail !== null && e.detail !== void 0) {
+          const { color: l } = e.detail,
+            i = this.model.slices?.findIndex(
+              (r) => r.sliceId === this.selectedSliceId
+            ),
+            t = this.model.sliceGrouping;
+          i != null && i >= 0
+            ? ((this.model.colorMatch = !1), this.model.setSliceColor(l, i))
+            : t?.sliceId === this.selectedSliceId &&
+              t !== void 0 &&
+              ((this.model.colorMatch = !1),
+              (this.model.sliceGrouping = {
+                ...t,
+                fillSymbol: {
+                  ...t.fillSymbol,
+                  type: E.SFS,
+                  color: l,
+                },
+              }));
+        }
+      }),
+      (this.slicesPopoverClose = (e) => {
+        const { selectedSliceId: l } = e.detail;
+        l === this.selectedSliceId &&
+          ((this.selectedSliceId = void 0),
+          (this.slicesPopover = I(this.slicesPopover)));
+      }),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.popoverPlacement = "leading");
+  }
+  static {
+    this.properties = {
+      selectedSliceId: 16,
+      messageOverrides: 0,
+      model: 0,
+      popoverPlacement: 1,
+      chartData: 0,
+    };
+  }
+  static {
+    this.styles = z;
+  }
+  load() {
+    this.modelChange(this.model), this.onModelConfigChange();
+  }
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      e.has("selectedSliceId") && this.selectedSliceIdChange();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.removeSlicesPopover(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(e, l) {
+    l?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  selectedSliceIdChange() {
+    if (!x(this.selectedSliceId)) {
+      const e = this.model.slices,
+        l = this.model.sliceGrouping;
+      let i, t;
+      if (this.selectedSliceId === l?.sliceId)
+        (i = l?.label), (t = l?.fillSymbol?.color);
+      else if (e !== void 0) {
+        const r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
+        (i = this.model.getSliceName(r)), (t = this.model.getSliceColor(r));
+      }
+      (this.slicesPopover = P(
+        d`<geoscene-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${i} .selectedColor=${t} @geosceneChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @geosceneChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @geosceneChartsConfigPopoverClose=${this.slicesPopoverClose}></geoscene-charts-config-pie-chart-slices-popover>`
+      )),
+        this.slicesPopover &&
+          !document.body.contains(this.slicesPopover) &&
+          document.body.appendChild(this.slicesPopover);
+    }
+  }
+  removeSlicesPopover() {
+    this.slicesPopover !== void 0 &&
+      this.slicesPopover !== null &&
+      ((this.slicesPopover.open = !1),
+      (this.slicesPopover.selectedName = void 0),
+      (this.slicesPopover.selectedColor = void 0),
+      (this.slicesPopover = I(this.slicesPopover)));
+  }
+  buildSliceListItem() {
+    let e = "#CCCCCC",
+      l = "minus-square";
+    const i = [];
+    let t = this.model.slices;
+    const r = this.chartData?.dataItems;
+    r &&
+      (t = t?.filter(
+        (a) =>
+          r?.findIndex((c) => c.geoscene_charts_slice_id === a.sliceId) !== -1
+      )),
+      t?.forEach((a) => {
+        if (a.fillSymbol?.color !== void 0) {
+          l = "square-f";
+          const [c, b, v, L] = [...a.fillSymbol.color];
+          e = `rgba(${c},${b},${v},${L / 255})`;
+        }
+        if (a !== void 0 && !this.model.groupedSliceIds.includes(a.sliceId)) {
+          let c = a.sliceId;
+          c === S.emptySliceId
+            ? (c = this._messages.emptySlice ?? "")
+            : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""),
+            i?.push(
+              f(
+                a.sliceId,
+                d`<calcite-list-item .label=${
+                  a.label ?? a.sliceId
+                } .description=${c} .value=${a.sliceId} .selected=${
+                  this.selectedSliceId === a.sliceId
+                } @click=${
+                  this.openSlicesPopover
+                }><calcite-icon slot=content-end .icon=${l} style=${u({
+                  color: e,
+                })}></calcite-icon></calcite-list-item>`
+              )
+            );
+        }
+      });
+    const n = this.model.sliceGrouping;
+    if (n?.fillSymbol?.color !== void 0) {
+      l = "square-f";
+      const [a, c, b, v] = [...n.fillSymbol.color];
+      e = `rgba(${a},${c},${b},${v / 255})`;
+    }
+    return (
+      this.model.groupedSliceIds.length > 0 &&
+        i?.push(
+          f(
+            n?.sliceId,
+            d`<calcite-list-item .label=${
+              n?.label ?? n?.sliceId ?? ""
+            } .description=${this._messages.groupedSlices} .value=${
+              n?.sliceId ?? ""
+            } .selected=${this.selectedSliceId === n?.sliceId} @click=${
+              this.openSlicesPopover
+            }><calcite-icon slot=content-end .icon=${l} style=${u({
+              color: e,
+            })}></calcite-icon></calcite-list-item>`
+          )
+        ),
+      i
+    );
+  }
+  buildGroupedSlicesListItem() {
+    let e = "#CCCCCC",
+      l = "minus-square";
+    const i = [];
+    return (
+      this.model.slices?.forEach((t) => {
+        if (t.fillSymbol?.color !== void 0) {
+          l = "square-f";
+          const [r, n, a, c] = [...t.fillSymbol.color];
+          e = `rgba(${r},${n},${a},${c / 255})`;
+        }
+        t !== void 0 &&
+          this.model.groupedSliceIds.includes(t.sliceId) &&
+          i?.push(
+            f(
+              t.sliceId,
+              d`<calcite-list-item .label=${
+                t.label ?? t.sliceId
+              } .description=${t.sliceId} .value=${t.sliceId} .selected=${
+                this.selectedSliceId === t.sliceId
+              } @click=${
+                this.openSlicesPopover
+              }><calcite-icon slot=content-end .icon=${l} style=${u({
+                color: e,
+              })}></calcite-icon></calcite-list-item>`
+            )
+          );
+      }),
+      i
+    );
+  }
+  buildSliceList() {
+    return d`<calcite-list label class=${s(
+      o.sliceList
+    )} selection-mode=single selection-appearance=border @calciteListOrderChange=${
+      this.onCalciteListOrderChange
+    }>${this.buildSliceListItem()}</calcite-list>`;
+  }
+  buildGroupedSliceList() {
+    return d`<calcite-list label class=${s(
+      o.sliceList
+    )} selection-mode=single selection-appearance=border @calciteListOrderChange=${
+      this.onCalciteListOrderChange
+    }>${this.buildGroupedSlicesListItem()}</calcite-list>`;
+  }
+  onGroupingThresholdChange(e) {
+    const l = e.target.value;
+    let i = Number.parseInt(l);
+    i > 100 ? (i = 100) : i < 0 && (i = 0),
+      Number.isNaN(i)
+        ? (this.model.groupingThreshold = 0)
+        : (this.groupingThresholdElement?.value &&
+            (this.groupingThresholdElement.value.value = i.toString()),
+          (this.model.groupingThreshold = i),
+          this.groupingThresholdSliderElement.value &&
+            (this.groupingThresholdSliderElement.value.value = i));
+  }
+  onLabelCharacterLimitChange(e) {
+    const l = e.target.value;
+    let i = Number.parseInt(l);
+    i < 1 && (i = 1),
+      Number.isNaN(i)
+        ? (this.model.labelCharacterLimit = null)
+        : (this.labelCharacterLimitElement.value &&
+            (this.labelCharacterLimitElement.value.value = i.toString()),
+          (this.model.labelCharacterLimit = i));
+  }
+  onDecimalPlacesChange(e) {
+    const l = e.target.value;
+    let i = Number.parseInt(l);
+    i < 0 ? (i = 0) : i > 20 && (i = 20),
+      Number.isNaN(i)
+        ? (this.model.decimalPlaces = 0)
+        : (this.decimalPlacesElement.value &&
+            (this.decimalPlacesElement.value.value = i.toString()),
+          (this.model.decimalPlaces = i));
+  }
+  onDisplayTypeChange(e) {
+    const l = e.target.selectedItem;
+    this.model.displayType = l.value;
+  }
+  resetSlicesOriginal() {
+    (this.selectedSliceId = void 0),
+      (this.model.colorMatch = !0),
+      this.model.resetSlices();
+  }
+  onCalciteListOrderChange(e) {
+    if (e.detail !== null && e.detail !== void 0) {
+      const { newIndex: l, oldIndex: i } = e.detail;
+      this.model.moveSeries(i, l);
+    }
+  }
+  openSlicesPopover(e) {
+    e.stopImmediatePropagation(), this.removeSlicesPopover();
+    const l = e.target,
+      i = l.localName === "calcite-list-item" ? l : l.parentNode;
+    i.value === this.model.sliceGrouping?.sliceId
+      ? (this.selectedSliceId = this.model.sliceGrouping?.sliceId)
+      : (this.selectedSliceId = i.value),
+      (this.open = !0);
+  }
+  createTooltip(e) {
+    const l = e.target;
+    (this.tooltip = P(
+      d`<calcite-tooltip style=${u({
+        opacity: 1,
+        zIndex: "var(--calcite-floating-ui-z-index)",
+      })} .referenceElement=${l} open placement=top .innerHTML=${
+        this._messages.groupingInfo ?? "" ?? ""
+      }></calcite-tooltip>`
+    )),
+      document.body.appendChild(this.tooltip);
+  }
+  destroyTooltip() {
+    G(this.tooltip);
+  }
+  render() {
+    return d`<div class=${s(o.sectionLabel)}>${
+      this._messages.settings
+    }</div><calcite-label class=${s(o.label)}>${
+      this._messages.shape
+    }<calcite-slider min=0 max=100 step=1 snap .value=${
+      this.model.innerRadiusSize ?? $
+    } @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(
+      this.donutSizeSliderElement
+    )}></calcite-slider></calcite-label><div class=${s(
+      o.pieDonutLabelsContainer
+    )}><calcite-label class=${s(o.label)}>${
+      this._messages.pie
+    }</calcite-label><calcite-label class=${s(o.label)}>${
+      this._messages.donut
+    }</calcite-label></div><calcite-label class=${s(o.label)}><div class=${s(
+      o.groupingLabelContainer
+    )}><div>${
+      this._messages.groupingPercent
+    }</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${
+      this.createTooltip
+    } @mouseout=${this.destroyTooltip}></calcite-icon></div><div class=${s(
+      o.sliderInputContainer
+    )}><calcite-slider min=0 max=50 step=1 snap .value=${N(
+      g(this.model.groupingThreshold ?? 0)
+    )} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(
+      this.groupingThresholdSliderElement
+    )}></calcite-slider><calcite-input class=${s(
+      o.numberInput
+    )} type=number min=0 max=100 step=1 suffix-text=% .value=${g(
+      this.model.groupingThreshold ?? 0
+    )} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
+      e.stopPropagation();
+    }} ${p(
+      this.groupingThresholdElement
+    )}></calcite-input></div></calcite-label><div class=${s(o.sectionLabel)}>${
+      this._messages.labels
+    }</div><calcite-label class=${s(o.label)}>${
+      this._messages.labelCharacterLimit
+    }<calcite-input type=number min=1 step=1 .value=${g(
+      this.model.labelCharacterLimit
+    )} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(
+      this.labelCharacterLimitElement
+    )}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${
+      this._messages.decimalPlaces
+    }<calcite-input type=number min=0 max=20 step=1 .value=${g(
+      this.model.decimalPlaces
+    )} @calciteInputInput=${this.onDecimalPlacesChange} ${p(
+      this.decimalPlacesElement
+    )}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${
+      this._messages.display
+    }<calcite-radio-button-group class=${s(
+      o.radioGroup
+    )} name=display layout=vertical @calciteRadioButtonGroupChange=${
+      this.onDisplayTypeChange
+    }><calcite-label layout=inline><calcite-radio-button .value=${
+      h.Value
+    } .checked=${this.model.displayType === h.Value}></calcite-radio-button>${
+      this._messages.value
+    }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+      h.Percentage
+    } .checked=${
+      this.model.displayType === h.Percentage
+    }></calcite-radio-button>${
+      this._messages.percentage
+    }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+      h.Both
+    } .checked=${this.model.displayType === h.Both}></calcite-radio-button>${
+      this._messages.both
+    }</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(
+      o.sectionLabel
+    )}>${this._messages.slices}<calcite-button @click=${
+      this.resetSlicesOriginal
+    } .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${
+      this._messages.reset
+    }</calcite-button></div>${this.buildSliceList()}<div class=${s(
+      o.sectionLabel
+    )}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
+  }
+}
+T("geoscene-charts-config-pie-chart-slices", k);
+export { k as GeosceneChartsConfigPieChartSlices };

package/dist/components/geoscene-charts-config-pie-chart-slices/index.js

@@ -0,0 +1,12 @@
+import "../geoscene-charts-config-pie-chart-slices-popover/index.js";
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-tooltip";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-slider";
+import "@geoscene/calcite-components/components/calcite-input";
+import "@geoscene/calcite-components/components/calcite-radio-button-group";
+import "@geoscene/calcite-components/components/calcite-radio-button";
+import "@geoscene/calcite-components/components/calcite-button";
+export * from "./customElement.js";

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

@@ -0,0 +1,126 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as n } from "../../chunks/runtime.js";
+import { css as p, html as m } from "lit";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { ar as h } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { e as d } from "../../chunks/popover-ui-utils.js";
+import { a as g } from "../../chunks/chart-ui-utils2.js";
+import { u as C } from "../../chunks/useT9n.js";
+import { createRef as v, ref as f } from "lit/directives/ref.js";
+import {
+  LitElement as u,
+  createEvent as i,
+  safeClassMap as o,
+} from "@geoscene/lumina";
+const s = {
+    jsAppFlyout: "js-app-flyout",
+    panelChildrenContainer: "panel-children-container",
+  },
+  y = 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(--geoscene-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 $ extends u {
+  constructor() {
+    super(...arguments),
+      (this._messages = C()),
+      (this.popoverElement = v()),
+      (this.selectedSliceId = ""),
+      (this.geosceneChartsConfigPopoverClose = i()),
+      (this.geosceneChartsConfigSlicesPopoverColorChange = i()),
+      (this.geosceneChartsConfigSlicesPopoverNameChange = i());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      referenceElement: 0,
+      selectedName: 1,
+      selectedColor: 0,
+      selectedSliceId: 1,
+      placement: 1,
+      open: 5,
+    };
+  }
+  static {
+    this.styles = y;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  updated() {
+    d(this.popoverElement.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.popoverElement.value?.reposition();
+        }, g.PopoverTimer);
+  }
+  sliceNameChange(e) {
+    const t = e.target.value;
+    this.selectedName !== t &&
+      ((this.selectedName = t),
+      this.geosceneChartsConfigSlicesPopoverNameChange.emit({ name: t }));
+  }
+  closePopover() {
+    (this.open = !1),
+      this.geosceneChartsConfigPopoverClose.emit({
+        selectedSliceId: this.selectedSliceId,
+      });
+  }
+  colorChange(e) {
+    const t = e instanceof CustomEvent ? e.detail : e,
+      [r, a, l] = t,
+      c = h * 255;
+    (this.selectedColor = [r, a, l, c]),
+      this.geosceneChartsConfigSlicesPopoverColorChange.emit({
+        color: [r, a, l, c],
+      });
+  }
+  render() {
+    const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
+    return m`<div class=${o({
+      [s.jsAppFlyout]: !0,
+    })}><calcite-popover .referenceElement=${
+      this.referenceElement ?? document.body
+    } .placement=${this.placement} @calcitePopoverClose=${
+      this.closePopover
+    } .open=${this.open} label auto-close ${f(
+      this.popoverElement
+    )}><calcite-panel .heading=${
+      this._messages.sliceStyle
+    } closable .closed=${!this.open} @calcitePanelClose=${
+      this.closePopover
+    }><div class=${o(s.panelChildrenContainer)}><calcite-label>${
+      this._messages.label
+    }<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${
+      this.sliceNameChange
+    }></calcite-input></calcite-label></div><div class=${o(
+      s.panelChildrenContainer
+    )}><geoscene-charts-config-colors .heading=${
+      this._messages.symbolColor
+    } .rgba=${e} @geosceneColorSelect=${
+      this.colorChange
+    }></geoscene-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+  }
+}
+n("geoscene-charts-config-pie-chart-slices-popover", $);
+export { $ as GeosceneChartsConfigPieChartSlicesPopover };

package/dist/components/geoscene-charts-config-pie-chart-slices-popover/index.js

@@ -0,0 +1,6 @@
+import "@geoscene/calcite-components/components/calcite-popover";
+import "@geoscene/calcite-components/components/calcite-panel";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-input";
+import "../geoscene-charts-config-colors/index.js";
+export * from "./customElement.js";