/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as u } from "../../chunks/runtime.js";
import { css as C, html as v } from "lit";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { a as i } from "../../chunks/rest-js-object-literals.js";
import { ar as f } 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 S, i as $, m, s as b, U as g } from "../../chunks/chart-ui-utils2.js";
import { u as E } from "../../chunks/useT9n.js";
import { createRef as n, ref as a } from "lit/directives/ref.js";
import { LitElement as I, createEvent as s, safeClassMap as l, nothing as r } from "@arcgis/lumina";
const o = {
  jsAppFlyout: "js-app-flyout",
  sizeSection: "size-section",
  dropdownText: "dropdown-text",
  panelChildrenContainer: "panel-children-container"
}, w = 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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.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 I {
  constructor() {
    super(...arguments), this._messages = E(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
  }
  static {
    this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedSeriesIndex: 9, selectedLineWidth: 9, placement: 1, open: 5 };
  }
  static {
    this.styles = w;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  updated() {
    y(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, S.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, [c, p, d] = t, h = f * 255;
    this.selectedColor = [c, p, d, h], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [c, p, d, h] });
  }
  lineStyleChange() {
    const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
    this.selectedLineStyle = e, this.arcgisChartsConfigSeriesPopoverLineStyleChange.emit({ lineStyle: e });
  }
  lineWidthChange() {
    const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
    this.lineWidthInputElement.value?.value !== void 0 && $(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
      inputElement: this.lineWidthInputElement.value,
      status: g.IDLE
    })) : this.lineWidthInputElement.value && m({
      inputElement: this.lineWidthInputElement.value,
      status: g.INVALID
    });
  }
  getSelectedLineStyleInfo() {
    let e, t;
    switch (this.selectedLineStyle) {
      case i.Dot:
        e = "line-dotted", t = this._messages.dot ?? "";
        break;
      case i.Dash:
        e = "line-dashed", t = this._messages.dash ?? "";
        break;
      case i.Solid:
      default:
        e = "line-solid", t = this._messages.solid ?? "";
        break;
    }
    return { icon: e, style: t };
  }
  render() {
    const e = this.selectedColor;
    return v`<div class=${l({ [o.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${a(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${l(o.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${l(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${a(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${l(o.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? r}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? r}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? r}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${b(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${a(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${l(o.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
  }
}
u("arcgis-charts-config-line-chart-series-popover", x);
export {
  x as ArcgisChartsConfigLineChartSeriesPopover
};
