/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as y } from "../../chunks/runtime.js";
import { css as S, html as l } from "lit";
import "@arcgis/toolkit/intl";
import { merge as i } from "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { f as u, h as s, g as c, i as r } from "../../chunks/rest-js-object-literals.js";
import { aO 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 { i as g, m, s as b, U as h } from "../../chunks/chart-ui-utils2.js";
import { u as v } from "../../chunks/useT9n.js";
import { createRef as C, ref as $ } from "lit/directives/ref.js";
import { LitElement as E, createEvent as p, safeClassMap as n } from "@arcgis/lumina";
const I = {
  arial: "Arial",
  arialBlack: "Arial Black",
  bookman: "Bookman",
  candara: "Candara",
  courier: "Courier",
  courierNew: "Courier New",
  garamond: "Garamond",
  georgia: "Georgia",
  impact: "Impact",
  palatino: "Palatino",
  roboto: "Roboto",
  times: "Times",
  timesNewRoman: "Times New Roman",
  verdana: "Verdana"
}, o = {
  fontStyleContainer: "font-style-container",
  font: "font",
  numberInput: "number-input",
  inputLabel: "input-label"
}, x = S`.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 calcite-panel .font-style-container{display:flex;padding:0 1rem}:host calcite-panel .font-style-container .input-label{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important}:host calcite-panel .font-style-container .number-input{margin-bottom:.5rem;display:flex}:host calcite-panel .font-style-container .number-input>div{width:100%}:host calcite-panel .font-style-container calcite-action,:host calcite-panel .font-style-container calcite-label{flex:1 1 0px;display:flex;flex-grow:inherit;width:80px}:host calcite-panel .font-style-container calcite-label{flex-grow:2}:host calcite-panel calcite-label.font{display:block;margin-top:1rem}`;
class z extends E {
  constructor() {
    super(...arguments), this._messages = v(), this.fontSizeInputElement = C(), this.fontStyle = {
      type: u.TS
    }, this.arcgisChartsConfigFontStyleChange = p(), this.arcgisChartsConfigFontStyleClose = p();
  }
  static {
    this.properties = { messageOverrides: 0, fontStyle: 0, header: 1, open: 5, enableClose: 5 };
  }
  static {
    this.styles = x;
  }
  closePanel(t) {
    t.target.closed && this.enableClose === !0 && (this.open = !1, this.arcgisChartsConfigFontStyleClose.emit());
  }
  fontChange(t) {
    const f = t.target.selectedOption.value;
    if (f !== void 0) {
      const a = {
        family: f
      };
      this.isNewFontProperty("family", a) && (this.fontStyle = i(this.fontStyle, { font: a }), this.emitFontStyleEvent({ font: a }));
    }
  }
  fontSizeChange() {
    const t = this.fontSizeInputElement.value?.value;
    if (t !== void 0 && g(t, this.fontSizeInputElement.value?.min, this.fontSizeInputElement.value?.max)) {
      const e = {
        size: Number.parseInt(t)
      };
      this.isNewFontProperty("size", e) && (this.fontStyle = i(this.fontStyle, { font: e }), this.emitFontStyleEvent({ font: e })), this.fontSizeInputElement.value && m({
        inputElement: this.fontSizeInputElement.value,
        status: h.IDLE
      });
    } else this.fontSizeInputElement.value && m({
      inputElement: this.fontSizeInputElement.value,
      status: h.INVALID
    });
  }
  boldSelect() {
    let t = s.Bold;
    this.fontStyle?.font?.weight === t && (t = s.Normal);
    const e = { weight: t };
    this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
  }
  italicSelect() {
    let t = c.Italic;
    this.fontStyle?.font?.style === t && (t = c.Normal);
    const e = { style: t };
    this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
  }
  underlineSelect() {
    let t = r.Underline;
    this.fontStyle?.font?.decoration === t && (t = r.None);
    const e = { decoration: t };
    this.fontStyle = i(this.fontStyle, { font: e }), this.fontStyle = { ...this.fontStyle }, this.emitFontStyleEvent({ font: e });
  }
  colorChange(t) {
    const e = t.detail;
    this.fontStyle = i(this.fontStyle, { color: e }), this.emitFontStyleEvent({ color: e });
  }
  emitFontStyleEvent(t) {
    this.arcgisChartsConfigFontStyleChange.emit(t);
  }
  isNewFontProperty(t, e) {
    return this.fontStyle?.font?.[t] !== e[t];
  }
  renderFonts() {
    const t = Object.values(I).map((e) => l`<calcite-option .value=${e} .selected=${e === this.fontStyle?.font?.family || e === d().font?.family?.split(",")[0] && this.fontStyle?.font?.family === void 0}>${e}</calcite-option>`);
    return this.fontStyle?.font?.family === "" && t.push(l`<calcite-option value selected></calcite-option>`), t;
  }
  render() {
    return l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose ?? !1} @calcitePanelClose=${this.closePanel}><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.font)}>${this._messages.font}<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${this.fontChange}>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(o.fontStyleContainer)}><calcite-label class=${n(o.inputLabel)}>${this._messages.size}<calcite-input class=${n(o.numberInput)} type=number min=6 max=40 step=1 .value=${b(this.fontStyle?.font?.size)} @calciteInputInput=${this.fontSizeChange} ${$(this.fontSizeInputElement)}></calcite-input></calcite-label><calcite-action appearance=transparent .text=${this._messages.bold ?? ""} @click=${this.boldSelect} scale=l .active=${this.fontStyle?.font?.weight === s.Bold}><calcite-icon scale=s icon=bold></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.italic ?? ""} @click=${this.italicSelect} scale=l .active=${this.fontStyle?.font?.style === c.Italic}><calcite-icon scale=s icon=italicize></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${this._messages.underline ?? ""} @click=${this.underlineSelect} scale=l .active=${this.fontStyle?.font?.decoration === r.Underline}><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(o.fontStyleContainer)}><arcgis-charts-config-colors .rgba=${this.fontStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel>`;
  }
}
y("arcgis-charts-config-font-style", z);
export {
  z as ArcgisChartsConfigFontStyle
};
