import { r as registerInstance, e as createEvent, h } from './index-ee578edf.js';

const inputSelectCss = ".card-select{display:flex;width:115px;height:50px;background-color:#E9EEF6;margin-right:20px;color:#839ECB;font-family:Karla, serif;font-weight:bold;flex-direction:row;align-items:center;padding:20px;border-style:none;border-radius:10px}.card-select:focus{border-radius:0}.card-select:focus-within{background-color:#DFE6F1;color:#5D7FBA;border-radius:10px 10px 0 0}.separator{flex-grow:1}.detail-card-select{display:flex;flex-direction:column}.value-emitted{color:#4C4C4C}.option-elements{cursor:pointer;width:auto;height:5px;background-color:#E9EEF6;color:#839ECB;font-family:Karla, serif;font-weight:bold;flex-direction:row;align-items:center;padding:20px;border-style:none;font-size:14px}.option-elements:active{background-color:#DFE6F1}.hidden{display:none}.all-options-container{overflow:auto;height:191px;width:115px;border-radius:0 0 10px 10px}";

const InputSelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.emitOptionValue = createEvent(this, "emitOptionValue", 7);
    this.isOpenEmit = createEvent(this, "isOpenEmit", 7);
    this.isOpen = false;
    this.clickOutside = false;
    this.isActivateMenuIsTriggered = false;
    this.isInEditMode = true;
  }
  activateMenu() {
    this.isActivateMenuIsTriggered = true;
    this.isOpen = !this.isOpen;
    this.isOpenEmit.emit({ inputNr: this.numberOfInputSelect, isOpen: this.isOpen });
  }
  selectValueOption(str) {
    this.emitOptionValue.emit({ value: str, type: this.text });
    console.log(str);
    this.isOpen = !this.isOpen;
    this.valueToSee = str;
  }
  componentWillRender() {
    this.isOpen = this.triggerIsOpen;
    if (this.valueOfEdit && this.isInEditMode) {
      this.valueToSee = this.valueOfEdit;
      this.isInEditMode = false;
    }
  }
  componentShouldUpdate() {
    if (!this.isActivateMenuIsTriggered) {
      this.isOpen = this.triggerIsOpen;
    }
    if (this.valueOfEdit) {
      this.valueToSee = this.valueOfEdit;
    }
  }
  render() {
    if (this.text === 'Minuti') {
      return (h("div", { class: "items-selections" }, h("button", { class: "card-select", onClick: () => this.activateMenu() }, h("div", { class: "detail-card-select" }, this.text, h("div", { class: "value-emitted" }, this.valueToSee)), h("div", { class: "separator" }), h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.41 0.590027L6 5.17003L10.59 0.590027L12 2.00003L6 8.00003L0 2.00003L1.41 0.590027Z", fill: "#5D7FBA" }))), h("div", { id: "alloptionscontainer", class: "all-options-container" }, this.optionLabels.map((label) => h("div", { class: { 'option-elements': true, 'hidden': !this.isOpen }, onClick: () => this.selectValueOption(label) }, h("div", null, h("div", null, label, " minuti")))))));
    }
    else if (this.text === 'Durata') {
      return (h("div", { class: "items-selections" }, h("button", { class: "card-select", onClick: () => this.activateMenu() }, h("div", { class: "detail-card-select" }, this.text, h("div", { class: "value-emitted" }, this.valueToSee)), h("div", { class: "separator" }), h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.41 0.590027L6 5.17003L10.59 0.590027L12 2.00003L6 8.00003L0 2.00003L1.41 0.590027Z", fill: "#5D7FBA" }))), h("div", { id: "alloptionscontainer", class: "all-options-container" }, this.optionLabels.map((label) => h("div", { class: { 'option-elements': true, 'hidden': !this.isOpen }, onClick: () => this.selectValueOption(label) }, h("div", null, h("div", null, label, " ore")))))));
    }
    else {
      return (h("div", { class: "items-selections" }, h("button", { class: "card-select", onClick: () => this.activateMenu() }, h("div", { class: "detail-card-select" }, this.text, h("div", { class: "value-emitted" }, this.valueToSee)), h("div", { class: "separator" }), h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.41 0.590027L6 5.17003L10.59 0.590027L12 2.00003L6 8.00003L0 2.00003L1.41 0.590027Z", fill: "#5D7FBA" }))), h("div", { id: "alloptionscontainer", class: "all-options-container" }, this.optionLabels.map((label) => h("div", { class: { 'option-elements': true, 'hidden': !this.isOpen }, onClick: () => this.selectValueOption(label) }, h("div", null, h("div", null, label)))))));
    }
  }
};
InputSelect.style = inputSelectCss;

export { InputSelect as input_select };
