/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as s } from "../../chunks/runtime.js";
import { css as l, html as c } from "lit";
import { LitElement as a, safeClassMap as t } from "@arcgis/lumina";
const e = {
  fieldSelectButtonSection: "field-select-btn-section",
  fieldSelectButton: "field-select-btn",
  fieldSelectButtonText: "field-select-btn-text",
  fieldSelectButtonIcon: "field-select-btn-icon",
  fieldSelectButtonInvalid: "field-select-btn-invalid"
}, r = l`.field-select-btn-section{background-color:var(--arcgis-charts-input-background);min-width:100%}.field-select-btn{background:var(--arcgis-charts-background-clear);border:1px solid;border-radius:var(--arcgis-charts-border-radius);display:flex;align-items:center;justify-content:space-between;padding:var(--arcgis-charts-side-spacing-half) var(--arcgis-charts-side-spacing-quarter);cursor:pointer;width:100%;text-align:unset}.field-select-btn:not(.field-select-btn-invalid){border-color:var(--arcgis-charts-border)}.field-select-btn.field-select-btn-invalid{border-color:var(--arcgis-charts-border-invalid)}.field-select-btn-exp{width:calc(100% - 32px)}.field-select-btn-exp .field-select-btn{border:none;border-radius:0;border-right:1px solid var(--arcgis-charts-border)}.field-select-btn-text{flex:0 1 auto;overflow:hidden;padding:0 var(--arcgis-charts-side-spacing-eighth);text-overflow:ellipsis;white-space:nowrap}.field-select-btn-icon{flex:0 0 0%;padding:0 var(--arcgis-charts-side-spacing-half)}.field-select-btn:disabled{cursor:default}`;
class n extends a {
  constructor() {
    super(...arguments), this.disabled = !1, this.invalid = !1;
  }
  static {
    this.properties = { label: 1, disabled: 5, invalid: 5 };
  }
  static {
    this.styles = r;
  }
  render() {
    const i = `${e.fieldSelectButton} ${this.invalid ? e.fieldSelectButtonInvalid : ""}`;
    return c`<div class=${t(e.fieldSelectButtonSection)}><button class=${t(i)} .disabled=${this.disabled}><span class=${t(e.fieldSelectButtonText)}>${this.label}</span><slot name=fieldSelectSlot></slot><span class=${t(e.fieldSelectButtonIcon)}><calcite-icon scale=s icon=chevron-down></calcite-icon></span></button></div>`;
  }
}
s("arcgis-charts-config-field-select", n);
export {
  n as ArcgisChartsConfigFieldSelect
};
