import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-442cf464.js';
import { c as createColorClasses } from './theme-a8bb96f5.js';

const selectCss = ":host{display:inline-block;position:relative;font-size:1em}:host *{box-sizing:border-box}:host(.lu-color) select,:host(.lu-color) option{color:var(--lu-color-base)}:host([full-width]){width:100%}:host([full-width]) .select{width:100%}.select{margin:2px 0 0;padding:0;display:block;position:relative;max-width:450px;height:46px;transition:all 0.15s ease-in-out;border:1px solid var(--lu-global-form-input-outline, var(--select-border-color, #686A6F));background:var(--select-background-color, #ffffff);font-size:1em;overflow:hidden}.select select::-ms-expand{display:none}.select.focused svg{fill:#333}.select--outline{left:0;bottom:0;position:absolute;width:100%;height:46px;transition:all 0.15s ease-in-out;border:2px solid transparent;font-size:1em;pointer-events:none}.select.focused~.select--outline{border-color:#1B2C56}.select select{padding:10px 4em 11px 10px;width:100%;border:none;outline:none;background:none;font-size:1em;line-height:1.5;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select select:-moz-focusring{color:transparent;text-shadow:0 0 0 #333}:host([is-invalid]) .select--outline{border-color:#E4002B}:host([is-valid]) .select--outline{border-color:#00854E}:host(.is-disabled) .select{background-color:#F1F1F1}.select__icon{right:0;bottom:0;padding:0.4em 1em;position:absolute;width:2.883em;height:100%;font-size:1rem;pointer-events:none}.select__icon svg{display:inline-block;width:100%;height:100%;transition:all 0.15s ease-in-out;fill:#9b9b9b}";

const Select = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luComponentError = createEvent(this, "luComponentError", 7);
    this.luInput = createEvent(this, "luInput", 7);
    this.luChange = createEvent(this, "luChange", 7);
    this.luStyle = createEvent(this, "luStyle", 7);
    this.luBlur = createEvent(this, "luBlur", 7);
    this.luFocus = createEvent(this, "luFocus", 7);
    this.selectId = `lu-select-${selectIds++}`;
    /**
     * This is used when the parent form group receives the update event to tell the parent if it should validate or not.
     */
    this.isResetting = false;
    /**
     * id set dynamically
     */
    this.useId = this.selectId + "-wrapper";
    /**
     * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.
     */
    this.ariaLabeledByAddition = '';
    /**
     * Declares input as invalid
     */
    this.invalid = false;
    this.disabled = false;
    this.placeholder = "Select an option";
    /**
     * @internal - used by the form group element to declare it's presence
     */
    this.hasFormGroup = false;
    /**
     * Do you need a placeholder option
     */
    this.showPlaceholderOption = true;
    /**
     * A value from field will be required when used in a lu-form-group
     */
    this.required = false;
    /**
     * Declares input as validated
     */
    this.valid = false;
    this.onBlur = () => {
      this.removeFocus();
      this.luBlur.emit();
    };
    this.onChange = ev => {
      const select = ev.target;
      if (select && this.selectedValueName !== select.value) {
        this.selectedValueName = select.value || "";
      }
    };
    this.onFocus = () => {
      this.addFocus();
      this.luFocus.emit();
    };
    this.onInput = ev => {
      const select = ev.target;
      if (select && this.selectedValueName !== select.value) {
        this.handleSelect(select.value);
      }
      this.luInput.emit(ev);
    };
  }
  valueChanged() {
    this.setInput();
    this.luChange.emit({
      value: this.getValue() === this.placeholder ? "" : this.value,
      isResetting: this.isResetting
    });
    setTimeout(() => {
      this.isResetting = false;
    }, 20);
  }
  /**
   * this gives us a handle to set focus on the element
   */
  async setFocus() {
    if (this.nativeSelect) {
      this.nativeSelect.focus();
    }
  }
  componentDidLoad() {
    if (this.value) {
      this.selectedValueName = this.findNameByValue();
    }
  }
  /**
   * this is used by the form validation/ form group to reset Value without initiating a validity check
   * @param update
   */
  async updateValue(update) {
    this.isResetting = true;
    this.selectedValueName = this.findNameByValue(update);
  }
  addFocus() {
    this.luFocus.emit();
    this.selectContainerDiv.classList.add("focused");
  }
  handleSelect(value) {
    this.selectedValueName = value;
  }
  getValue() {
    return !!this.selectedValueName ? this.findValueByName() : this.placeholder;
  }
  getSelectedNameValue() {
    return this.selectedValueName || this.placeholder;
  }
  getDataValue() {
    const array = this.options.filter(option => this.selectedValueName.toLowerCase() === option.name.toLowerCase());
    if (array.length === 0)
      return null;
    return array[0].value;
  }
  setInput() {
    const inputEl = this.nativeSelect;
    const value = this.getSelectedNameValue();
    this.value = this.getDataValue();
    if (inputEl && inputEl.value !== value) {
      inputEl.value = value;
    }
  }
  findValueByName() {
    const target = this.options.filter((option) => {
      return option.name === this.selectedValueName;
    })[0];
    return target ? target.value : undefined;
  }
  findNameByValue(value) {
    let targetValue = value;
    if (!targetValue) {
      targetValue = this.value;
    }
    const target = this.options.filter((option) => {
      return JSON.stringify(option.value) === JSON.stringify(targetValue);
    })[0];
    return target ? target.name : this.placeholder;
  }
  removeFocus() {
    this.selectContainerDiv.classList.remove("focused");
  }
  hostData() {
    return {
      class: Object.assign(Object.assign({}, createColorClasses(this.color)), { "is-select": true, "is-disabled": this.disabled }),
      "is-invalid": this.invalid,
      "is-valid": this.valid,
      id: this.useId
    };
  }
  __stencil_render() {
    return [
      h("div", { ref: input => (this.selectContainerDiv = input), class: "select" }, h("select", Object.assign({ ref: input => (this.nativeSelect = input), id: this.selectId, name: this.name, disabled: this.disabled, "aria-label": this.ariaLabel, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur }, (this.hasFormGroup || (this.ariaLabeledByAddition && this.ariaLabeledByAddition.length > 0)) &&
        { 'aria-labelledby': `${this.ariaLabeledByAddition} ` + (this.hasFormGroup ? this.selectId + "-label" : '') }), this.showPlaceholderOption ? (h("option", { value: this.placeholder }, this.placeholder)) : null, Array.isArray(this.options)
        ? this.options.map(option => (h("option", { value: option.name }, option.name)))
        : ""), h("div", { class: "select__icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 8" }, h("title", null, "keyboard_arrow_down"), h("g", { id: "Icon/Arrow-Black", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("polyline", { id: "More-Arrow", stroke: "#222222", "stroke-width": "2", transform: "translate(6.000000, 3.500000) rotate(-90.000000) translate(-6.000000, -3.500000) ", points: "8.48579545 -1.52857143 3.51420455 3.49748571 8.48579545 8.52857143" }))))),
      h("div", { class: "select--outline" }),
      h("div", { class: "select--left-border" })
    ];
  }
  get luSelectEl() { return getElement(this); }
  static get watchers() { return {
    "selectedValueName": ["valueChanged"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
let selectIds = 0;
Select.style = selectCss;

export { Select as lu_select };

//# sourceMappingURL=lu-select.entry.js.map