/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c } from "../../chunks/runtime.js";
import { css as p, html as m } from "lit";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { ar as h } from "../../chunks/index.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "@esri/arcgis-html-sanitizer";
import "@arcgis/core/intl.js";
import "@arcgis/core/layers/support/FeatureFilter.js";
import "@arcgis/core/smartMapping/statistics/histogram.js";
import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import "simple-statistics";
import "@arcgis/core/request.js";
import "@arcgis/core/core/sql.js";
import "@arcgis/core/AttributeBinsGraphic.js";
import "@arcgis/core/geometry/support/jsonUtils.js";
import "@arcgis/core/rest/support/AttributeBinsQuery.js";
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 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 o, safeClassMap as i } from "@arcgis/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(--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 x extends u {
  constructor() {
    super(...arguments), this._messages = C(), this.popoverElement = v(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSeriesPopoverColorChange = o(), this.arcgisChartsConfigSeriesPopoverNameChange = o();
  }
  static {
    this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedSeriesIndex: 9, placement: 1, open: 5, nullCategory: 0 };
  }
  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);
  }
  seriesNameChange(e) {
    const t = e.target.value;
    this.selectedName !== t && (this.selectedName = t, this.arcgisChartsConfigSeriesPopoverNameChange.emit({ name: t }));
  }
  closePopover() {
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit({
      selectedSeriesIndex: this.selectedSeriesIndex ?? -1
    });
  }
  colorChange(e) {
    const t = e instanceof CustomEvent ? e.detail : e, [r, a, l] = t, n = h * 255;
    this.selectedColor = [r, a, l, n], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [r, a, l, n] });
  }
  render() {
    const e = this.nullCategory?.symbol?.color ?? this.selectedColor, t = this.nullCategory?.text ?? this.selectedName;
    return m`<div class=${i({
      [s.jsAppFlyout]: !0
    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${f(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${i(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${t} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${i(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
  }
}
c("arcgis-charts-config-bar-chart-series-popover", x);
export {
  x as ArcgisChartsConfigBarChartSeriesPopover
};
