/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as p } from "../../chunks/runtime.js";
import { css as m, html as l } from "lit";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { f as y, a as t } from "../../chunks/rest-js-object-literals.js";
import { i as u, m as o, s as g, U as c } from "../../chunks/chart-ui-utils2.js";
import { u as S } from "../../chunks/useT9n.js";
import { createRef as r, ref as d } from "lit/directives/ref.js";
import { LitElement as f, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
const a = {
  sizeSection: "size-section",
  dropdownText: "dropdown-text",
  colorPickerContainer: "color-picker-container"
}, w = m`.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}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
class v extends f {
  constructor() {
    super(...arguments), this._messages = S(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
      type: y.SLS
    }, this.arcgisChartsConfigLineStyleChange = h(), this.arcgisChartsConfigLineStyleClose = h();
  }
  static {
    this.properties = { messageOverrides: 0, lineStyle: 0, header: 1, open: 5, enableClose: 5, usePanel: 5 };
  }
  static {
    this.styles = w;
  }
  closePanel(e) {
    e.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigLineStyleClose.emit());
  }
  colorChange(e) {
    this.lineStyle.color = e.detail, this.emitLineStyleEvent();
  }
  lineStyleChange() {
    const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
    this.lineStyle.style !== e && (this.lineStyle.style = e, this.lineStyle = { ...this.lineStyle }, this.emitLineStyleEvent());
  }
  selectedLineStyle() {
    let e, i;
    switch (this.lineStyle?.style) {
      case t.Dot:
        e = "line-dotted", i = this._messages.dot ?? "";
        break;
      case t.Dash:
        e = "line-dashed", i = this._messages.dash ?? "";
        break;
      case t.Solid:
      default:
        e = "line-solid", i = this._messages.solid ?? "";
        break;
    }
    return { icon: e, style: i };
  }
  widthChange() {
    const e = this.lineWidthInputElement.value?.value;
    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && o({
      inputElement: this.lineWidthInputElement.value,
      status: c.IDLE
    })) : this.lineWidthInputElement.value && o({
      inputElement: this.lineWidthInputElement.value,
      status: c.INVALID
    });
  }
  emitLineStyleEvent() {
    Number.isNaN(Number.parseInt(this.lineStyle?.color?.[0]?.toString() ?? "")) && (this.lineStyle.color = void 0), this.arcgisChartsConfigLineStyleChange.emit(this.lineStyle);
  }
  render() {
    const e = [
      l`<div class=${s(a.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(a.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${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=${g(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
      l`<div class=${s(a.colorPickerContainer)}><arcgis-charts-config-colors .rgba=${this.lineStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
    ];
    return this.usePanel !== !1 ? l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;
  }
}
p("arcgis-charts-config-line-style", v);
export {
  v as ArcgisChartsConfigLineStyle
};
