/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as g } from "../../chunks/runtime.js";
import { css as C, html as l } from "lit";
import "@arcgis/toolkit/intl";
import { isEqual as f } from "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { f as v } from "../../chunks/rest-js-object-literals.js";
import { ar as d } 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 y } from "../../chunks/popover-ui-utils.js";
import { a as u } from "../../chunks/chart-ui-utils2.js";
import { u as S } from "../../chunks/useT9n.js";
import { createRef as b, ref as $ } from "lit/directives/ref.js";
import { LitElement as P, createEvent as a, safeClassMap as n } from "@arcgis/lumina";
const c = {
  jsAppFlyout: "js-app-flyout",
  panelChildrenContainer: "panel-children-container"
}, L = C`.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 P {
  constructor() {
    super(...arguments), this._messages = S(), this.popoverElement = b(), this.isLineSymbol = !1, this.arcgisChartsConfigPopoverClose = a(), this.arcgisChartsConfigSeriesPopoverColorChange = a(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = a(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = a(), this.arcgisChartsConfigSeriesPopoverNameChange = a();
  }
  static {
    this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedLineWidth: 9, selectedSeriesIndex: 9, isLineSymbol: 5, placement: 1, open: 5, labelCanBeConfigured: 5 };
  }
  static {
    this.styles = L;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  updated() {
    y(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, u.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();
  }
  colorChange(e) {
    const t = e instanceof CustomEvent ? e.detail : e, [s, i, o] = t, r = d * 255;
    this.selectedColor = [s, i, o, r], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [s, i, o, r] });
  }
  lineSymbolChange(e) {
    const { lineStyle: t } = e.target, { color: s, style: i, width: o } = t;
    if (s !== void 0 && !f(s, this.selectedColor)) {
      const [r, p, h] = s, m = d * 255;
      this.selectedColor = [r, p, h, m], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [r, p, h, m] });
    }
    i !== void 0 && i !== this.selectedLineStyle && (this.selectedLineStyle = i, this.arcgisChartsConfigSeriesPopoverLineStyleChange.emit({ style: i })), o !== void 0 && o !== this.selectedLineWidth && (this.selectedLineWidth = o, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ width: o }));
  }
  render() {
    const e = this.selectedColor;
    return l`<div class=${n({
      [c.jsAppFlyout]: !0
    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${$(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}>${this.labelCanBeConfigured ? l`<div class=${n(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div>` : null}<div class=${n(c.panelChildrenContainer)}>${this.isLineSymbol ? l`<arcgis-charts-config-line-style .open=${this.open} enable-close .lineStyle=${{
      type: v.SLS,
      style: this.selectedLineStyle,
      width: this.selectedLineWidth,
      color: e
    }} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.lineSymbolChange}></arcgis-charts-config-line-style>` : l`<arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors>`}</div></calcite-panel></calcite-popover></div>`;
  }
}
g("arcgis-charts-config-box-plot-series-popover", x);
export {
  x as ArcgisChartsConfigBoxPlotSeriesPopover
};
