import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkCalendar {
  constructor() {
    /** Define un placeholder en el selector */
    this.placeholder = 'dd/mm/aaaa';
    /** Define la cantidad de meses a mostrar en el selector */
    this.months = 1;
    /** Si la candidad de meses a mostrar es 2, define si se muestra el mes siguiente o anterior */
    this.showMonth = 'next';
    /** Define hacia que lado se abrirá el calendario */
    this.openTo = 'bottom-right';
    /** Define si se podrá seleccionar un rango de fechas */
    this.multiselect = false;
    /** El selector del calendario ocupará el 100% del espacio disponible */
    this.full = false;
    /** Se mostrará un mensaje de error */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si el calendario se encuentra vacío, mostrará un mensaje de error */
    this.required = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = 'Por favor selecciona una fecha';
    /** Define si el calendario no contará con manejo de errores. Se omitirá el espacio generado para el mensaje de error */
    this.noHandlingError = false;
    /** Determina si se está mostrando o no el calendario */
    this._showingDates = false;
    /** Fecha inicial a mostra en el calendario */
    this._currentDate = new Date();
    /** Almacena temporalmente el rango mientras se va seleccionando */
    this._tempRange = [];
    /** Configurar algunas opciones en base a las propiedades usadas */
    this.config = () => {
      if (this.multiselect) {
        this.selectedDate = undefined;
        this.placeholder = 'dd/mm/aaaa - dd/mm/aaaa';
        this._settedMultiselect = true;
      }
      else {
        this.selectedDates = undefined;
      }
      if (this.rangeSelector == '') {
        this.rangeSelector = 'none';
      }
      else {
        this.selectRange(null, this.rangeSelector);
      }
    };
    /** Evento al cambiar el tamaño de la pantalla */
    this.resizeWindow = () => {
      window.onresize = () => {
        this.getDatesPosition();
      };
    };
    /** Cierra el dropdown al hacer click fuera del mismo */
    this.bodyClick = () => {
      const body = document.querySelector('body');
      body.addEventListener('click', e => {
        const t = e.target;
        const closest = t.closest('.ibk-calendar');
        if (closest == null) {
          this._showingDates = false;
        }
      });
    };
    /** Define la fecha con el mes siguiente o anterior dependiendo del mes a mostrar */
    this.setOtherDate = () => {
      if (this.selectedDates != undefined) {
        this.host.setAttribute('show-month', 'prev');
      }
      if (this.months == 2) {
        if (this.showMonth == 'next') {
          this._otherDate = new Date(new Date().setMonth(new Date().getMonth() + 1));
        }
        else {
          this._otherDate = new Date(new Date().setMonth(new Date().getMonth() - 1));
        }
      }
    };
    /** Obtener la cantidad de dias que hay por mes */
    this.getDaysPerMonth = (month, year) => {
      let date = new Date(year, month + 1, 0);
      return date.getDate();
    };
    /** Obtener un arreglo por cada semana del mes que contiene los dias y sus estados */
    this.getWeeksPerMonth = (month, year) => {
      let weeks = new Array();
      let firstDay = new Date(year, month, 1).getDay();
      firstDay = firstDay == 0 ? 7 : firstDay;
      let days = new Date(year, month + 1, 0).getDate();
      let allDays = [];
      let day = 1;
      for (let i = 1; i < firstDay; i++) {
        allDays.push(0);
      }
      while (day <= days) {
        allDays.push(day);
        day++;
      }
      let tempWeek = new Array();
      Array.from(allDays, (day) => {
        let d = {};
        if (day != 0) {
          const tempDate = new Date(year, month, day);
          d.day = day;
          if (this.initialDate != undefined && tempDate < this.parseDate(this.initialDate) ||
            this.endDate != undefined && tempDate > this.parseDate(this.endDate)) {
            d.disabled = true;
          }
          else {
            d.disabled = false;
          }
          if (this.selectedDate != undefined && this.parseDate(this.selectedDate).getTime() == tempDate.getTime()) {
            d.selected = true;
          }
          else {
            d.selected = false;
          }
          if (this.selectedDates != undefined) {
            const splitted = this.selectedDates.split('-');
            if (this.parseDate(splitted[0]).getTime() == tempDate.getTime() || this.parseDate(splitted[1]).getTime() == tempDate.getTime()) {
              d.selected = true;
            }
            if (this.parseDate(splitted[0]).getTime() == tempDate.getTime()) {
              d.initRange = true;
            }
            if (this.parseDate(splitted[1]).getTime() == tempDate.getTime()) {
              d.endRange = true;
            }
            if (this.parseDate(splitted[0]) <= tempDate && this.parseDate(splitted[1]) >= tempDate) {
              d.range = true;
            }
          }
          if (this._tempRange.length == 1 && this._tempOverRange != undefined) {
            if (this._tempOverRange > this._tempRange[0].date && tempDate > this._tempRange[0].date && tempDate < this._tempOverRange) {
              d.over = true;
            }
            if (this._tempOverRange > this._tempRange[0].date && tempDate.getTime() == this._tempOverRange.getTime()) {
              d.endRange = true;
            }
          }
          if (this._tempOverRange == undefined && !this.multiselect) {
            d.range = false;
            d.initRange = false;
            d.endRange = false;
          }
        }
        tempWeek.push(d);
      });
      Array.from(tempWeek, (_, index) => {
        if (index % 7 == 0) {
          let sliced = tempWeek.slice(index, index + 7);
          if (sliced.length > 0) {
            weeks.push(sliced);
          }
        }
      });
      return weeks;
    };
    /** Retorna el nombre del mes basado en el índice */
    this.getMonthName = (month) => {
      const monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre', 'Octubre', 'Noviembre', 'Diciembre'];
      return monthNames[month];
    };
    /** Obtiene la fecha en formato "DD/MM/YYYY" y lo convierte a formato Date */
    this.parseDate = (date) => {
      const splitted = date.split('/');
      return new Date(parseInt(splitted[2]), parseInt(splitted[1]) - 1, parseInt(splitted[0]));
    };
    /** Arreglo que contiene los días del mes actual, además del mes anterior o posterior dependiendo del mes a mostrar */
    this.drawDates = () => {
      let dates = new Array();
      let currentMonth = {
        month: this._currentDate.getMonth(),
        year: this._currentDate.getFullYear(),
        weeks: this.getWeeksPerMonth(this._currentDate.getMonth(), this._currentDate.getFullYear()),
        days: this.getDaysPerMonth(this._currentDate.getMonth(), this._currentDate.getFullYear())
      };
      dates.push(currentMonth);
      if (this.months == 2) {
        let otherMonth = {
          month: this._otherDate.getMonth(),
          year: this._otherDate.getFullYear(),
          weeks: this.getWeeksPerMonth(this._otherDate.getMonth(), this._otherDate.getFullYear()),
          days: this.getDaysPerMonth(this._otherDate.getMonth(), this._otherDate.getFullYear())
        };
        if (this.showMonth == 'next') {
          dates.push(otherMonth);
        }
        else {
          dates.unshift(otherMonth);
        }
      }
      return dates;
    };
    /** Obtener la posición del selector para abrir las fechas en base a su posición */
    this.getDatesPosition = () => {
      const selector = this.host.querySelector('.ibk-calendar__selector');
      let position = { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' };
      if (this.openTo == 'bottom-right') {
        position.top = `${selector.offsetTop + selector.getBoundingClientRect().height - 1}px`;
        position.left = `${selector.offsetLeft}px`;
      }
      else if (this.openTo == 'bottom-left') {
        position.top = `${selector.offsetTop + selector.getBoundingClientRect().height - 1}px`;
        position.right = `${window.innerWidth - selector.getBoundingClientRect().width - selector.offsetLeft}px`;
      }
      else if (this.openTo == 'top-right') {
        position.bottom = `${window.innerHeight - selector.offsetTop - 1}px`;
        position.left = `${selector.offsetLeft}px`;
      }
      else if (this.openTo == 'top-left') {
        position.bottom = `${window.innerHeight - selector.offsetTop - 1}px`;
        position.right = `${window.innerWidth - selector.getBoundingClientRect().width - selector.offsetLeft}px`;
      }
      this._datesPosition = position;
    };
    /** Muestra u oculta el calendario */
    this.toggleDates = () => {
      this._showingDates = !this._showingDates;
      this.getDatesPosition();
    };
    /** Configura la clase del día basado en estados y modificadores */
    this.setContainerDayClass = (day, monthDays) => {
      var _a;
      return modifiersToClass('ibk-calendar__day-number', [
        { disabled: (_a = day.disabled) !== null && _a !== void 0 ? _a : true },
        { selected: day.selected },
        { range: day.range },
        { 'init-range': day.initRange },
        { 'end-range': day.endRange },
        { 'shadow-in': day.day == 1 && day.range },
        { 'shadow-out': monthDays != undefined && day.day == monthDays && day.range },
        { over: day.over }
      ]);
    };
    /** Configura el valor del selector */
    this.setSelectorValue = () => {
      if (this.selectedDate) {
        return this.selectedDate;
      }
      else if (this.selectedDates) {
        return this.selectedDates.split('-').join(' - ');
      }
      else {
        return '';
      }
    };
    /** Recibe un formato Date y lo transforma a DD/MM/YYYY */
    this.parseDateToString = (date) => {
      const day = date.getDate().toString().length == 1 ? ('0' + date.getDate()) : date.getDate();
      const month = date.getMonth().toString().length == 1 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;
      return `${day}/${month}/${date.getFullYear()}`;
    };
    /** Función al seleccionar una fecha única o rango */
    this.selectDate = (e, year, month, day) => {
      let emit = {};
      const t = e.target;
      const otherSelected = this.host.querySelectorAll('.ibk-calendar__day-number--selected');
      const selectedDate = new Date(year, month, day);
      this.host.setAttribute('range-selector', 'none');
      if (this._settedMultiselect != undefined) {
        this.host.setAttribute('multiselect', '');
      }
      else {
        this.host.removeAttribute('multiselect');
        this._tempOverRange = null;
      }
      if (!this.multiselect || (this.multiselect && this._tempRange.length == 0)) {
        Array.from(otherSelected, (button) => button.classList.remove('ibk-calendar__day-number--selected'));
      }
      const rangeButton = this.host.querySelector('.ibk-calendar__range-selector__button--selected');
      if (rangeButton != undefined) {
        rangeButton.classList.remove('ibk-calendar__range-selector__button--selected');
      }
      if (!this.multiselect) {
        this.host.removeAttribute('error');
        t.classList.add('ibk-calendar__day-number--selected');
        emit.date = selectedDate,
          emit.parsedDate = this.parseDateToString(selectedDate);
        this.onselect.emit(emit);
        this.host.setAttribute('selected-date', this.parseDateToString(selectedDate));
        this.host.removeAttribute('selected-dates');
      }
      else {
        t.classList.add('ibk-calendar__day-number--selected');
        if (this._tempRange.length == 1 && this._tempRange[0].date >= selectedDate) {
          Array.from(otherSelected, (button) => button.classList.remove('ibk-calendar__day-number--selected'));
          this._tempRange = [];
        }
        emit.date = selectedDate;
        emit.parsedDate = this.parseDateToString(selectedDate);
        this._tempRange.push(emit);
        this.onselect.emit(this._tempRange);
        this.host.setAttribute('selected-dates', `${this.parseDateToString(this._tempRange[0].date)}-${this._tempRange[1] ? this.parseDateToString(this._tempRange[1].date) : ''}`);
        this.host.removeAttribute('selected-date');
        if (this._tempRange.length == 2) {
          this.host.removeAttribute('error');
          this._tempRange = [];
        }
      }
    };
    /** Cambia el calendario dependiendo de la flecha seleccionada */
    this.changeMonth = (to) => {
      this._currentDate.setDate(1);
      this.months == 2 && this._otherDate.setDate(1);
      if (to == 'next') {
        this._currentDate = new Date(this._currentDate.setMonth(this._currentDate.getMonth() + 1));
        this.months == 2 && (this._otherDate = new Date(this._otherDate.setMonth(this._otherDate.getMonth() + 1)));
      }
      else {
        this._currentDate = new Date(this._currentDate.setMonth(this._currentDate.getMonth() - 1));
        this.months == 2 && (this._otherDate = new Date(this._otherDate.setMonth(this._otherDate.getMonth() - 1)));
      }
    };
    /** Selecciona un rango entre dìa, semana y mes */
    this.selectRange = (e, choose) => {
      const otherRanges = this.host.querySelectorAll('.ibk-calendar__range-selector__button');
      Array.from(otherRanges, (button) => button.classList.remove('ibk-calendar__range-selector__button--selected'));
      if (e != null) {
        const t = e.target;
        t.classList.add('ibk-calendar__range-selector__button--selected');
      }
      if (choose == 'day') {
        this.host.removeAttribute('multiselect');
        this.host.removeAttribute('selected-dates');
        this.host.setAttribute('selected-date', this.parseDateToString(new Date()));
        this.host.setAttribute('range-selector', 'day');
        this.onselect.emit({
          date: new Date(),
          parsedDate: this.parseDateToString(new Date())
        });
      }
      else if (choose == 'week') {
        this.host.setAttribute('multiselect', '');
        this.host.removeAttribute('selected-date');
        this.host.setAttribute('selected-dates', `${this.parseDateToString(new Date(new Date().setDate(new Date().getDate() - 7)))}-${this.parseDateToString(new Date())}`);
        this.host.setAttribute('range-selector', 'week');
        this.onselect.emit([
          {
            date: new Date(new Date().setDate(new Date().getDate() - 7)),
            parsedDate: this.parseDateToString(new Date(new Date().setDate(new Date().getDate() - 7)))
          },
          {
            date: new Date(),
            parsedDate: this.parseDateToString(new Date())
          }
        ]);
      }
      else if (choose == 'month') {
        this.host.setAttribute('multiselect', '');
        this.host.removeAttribute('selected-date');
        this.host.setAttribute('selected-dates', `${this.parseDateToString(new Date(new Date().setMonth(new Date().getMonth() - 1)))}-${this.parseDateToString(new Date())}`);
        this.host.setAttribute('range-selector', 'month');
        this.onselect.emit([
          {
            date: new Date(new Date().setMonth(new Date().getMonth() - 1)),
            parsedDate: this.parseDateToString(new Date(new Date().setMonth(new Date().getMonth() - 1)))
          },
          {
            date: new Date(),
            parsedDate: this.parseDateToString(new Date())
          }
        ]);
      }
      this._currentDate = new Date();
      this.setOtherDate();
    };
    /** Hace efecto over sobre el botón del día y aplica un fondo cuando se esta seleccionando un rango de fechas */
    this.overDay = (year, month, day) => {
      if (this._tempRange.length == 1) {
        const overedDate = new Date(year, month, day);
        this._tempOverRange = overedDate;
      }
    };
    /** Detecta cuando el mouse deja de hacer over sobre el botón del día */
    this.leaveDay = (e) => {
      const related = e.relatedTarget;
      if (!related.classList.contains('ibk-calendar__day-number')) {
        this._tempOverRange = null;
      }
    };
  }
  componentDidLoad() {
    this.resizeWindow();
    this.bodyClick();
  }
  componentWillLoad() {
    this.config();
    this.setOtherDate();
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-calendar', [
      { full: this.full },
      { range: this._tempRange.length == 1 },
      { open: this._showingDates },
      { error: this.error }
    ]);
  }
  render() {
    return (h("div", { class: this.containerClass() },
      this.label && h("span", { class: "ibk-calendar__label", innerHTML: this.label }),
      this.subtitle && h("span", { class: "ibk-calendar__subtitle", innerHTML: this.subtitle }),
      h("div", { class: "ibk-calendar__selector", onClick: this.toggleDates },
        h("i", { class: "ibk-calendar__icon icon-m-calendar" }),
        h("input", { class: "ibk-calendar__input", type: "text", readonly: true, value: this.setSelectorValue(), placeholder: this.placeholder }),
        h("i", { class: "ibk-calendar__arrow icon-xs-arrow-down" })),
      !this.noHandlingError && h("span", { class: "ibk-calendar__error-message", innerHTML: this.error && this.requiredMessage }),
      this._showingDates &&
        h("div", { class: "ibk-calendar__dates", style: this._datesPosition },
          (this.rangeSelector && this.months == 2) &&
            h("div", { class: "ibk-calendar__range-selector" },
              h("button", { type: "button", onClick: (e) => this.selectRange(e, 'day'), class: 'ibk-calendar__range-selector__button' + (this.rangeSelector == 'day' ? ' ibk-calendar__range-selector__button--selected' : '') }, "D\u00EDa"),
              h("button", { type: "button", onClick: (e) => this.selectRange(e, 'week'), class: 'ibk-calendar__range-selector__button' + (this.rangeSelector == 'week' ? ' ibk-calendar__range-selector__button--selected' : '') }, "\u00DAltima semana"),
              h("button", { type: "button", onClick: (e) => this.selectRange(e, 'month'), class: 'ibk-calendar__range-selector__button' + (this.rangeSelector == 'month' ? ' ibk-calendar__range-selector__button--selected' : '') }, "\u00DAltimo mes")),
          h("div", { class: "ibk-calendar__months" }, Array.from(this.drawDates(), (date, index) => {
            return (h("div", { class: "ibk-calendar__month" },
              h("p", { class: "ibk-calendar__month-name" },
                (this.months == 2 && index == 0 || this.months == 1) && h("i", { class: "ibk-calendar__month-arrow icon-xs-arrow-left", onClick: () => this.changeMonth('prev') }),
                this.getMonthName(date.month),
                " ",
                date.year,
                (this.months == 2 && index == 1 || this.months == 1) && h("i", { class: "ibk-calendar__month-arrow icon-xs-arrow-right", onClick: () => this.changeMonth('next') })),
              h("div", { class: "ibk-calendar__days" },
                h("span", { class: "ibk-calendar__day-name" }, "lu"),
                h("span", { class: "ibk-calendar__day-name" }, "ma"),
                h("span", { class: "ibk-calendar__day-name" }, "mi"),
                h("span", { class: "ibk-calendar__day-name" }, "ju"),
                h("span", { class: "ibk-calendar__day-name" }, "vi"),
                h("span", { class: "ibk-calendar__day-name" }, "s\u00E1"),
                h("span", { class: "ibk-calendar__day-name" }, "do")),
              Array.from(date.weeks, (week) => {
                return (h("div", { class: "ibk-calendar__days" }, Array.from(week, (day) => {
                  return h("button", { type: "button", class: this.setContainerDayClass(day, date.days), onClick: (e) => this.selectDate(e, date.year, date.month, day.day), onMouseOver: () => this.overDay(date.year, date.month, day.day), onMouseLeave: this.leaveDay }, day.day);
                })));
              })));
          })))));
  }
  static get is() { return "ibk-calendar"; }
  static get originalStyleUrls() { return {
    "$": ["calendar.css"]
  }; }
  static get styleUrls() { return {
    "$": ["calendar.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto de ayuda encima del calendario"
      },
      "attribute": "label",
      "reflect": false
    },
    "subtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se incluye el subtitulo entre el label (si existiera) y el calendario"
      },
      "attribute": "subtitle",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define un placeholder en el selector"
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "'dd/mm/aaaa'"
    },
    "months": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la cantidad de meses a mostrar en el selector"
      },
      "attribute": "months",
      "reflect": false,
      "defaultValue": "1"
    },
    "showMonth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'next' | 'prev'",
        "resolved": "\"next\" | \"prev\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Si la candidad de meses a mostrar es 2, define si se muestra el mes siguiente o anterior"
      },
      "attribute": "show-month",
      "reflect": false,
      "defaultValue": "'next'"
    },
    "openTo": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'",
        "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define hacia que lado se abrir\u00E1 el calendario"
      },
      "attribute": "open-to",
      "reflect": false,
      "defaultValue": "'bottom-right'"
    },
    "initialDate": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la fecha inicial en formato DD/MM/YYYY"
      },
      "attribute": "initial-date",
      "reflect": false
    },
    "endDate": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la fecha final en formato DD/MM/YYYY"
      },
      "attribute": "end-date",
      "reflect": false
    },
    "selectedDate": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la fecha seleccionada cuando se muestra 1 mes en formato DD/MM/YYYY"
      },
      "attribute": "selected-date",
      "reflect": false
    },
    "selectedDates": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define las fechas seleccionadas cuando se muestran 2 meses en formato DD/MM/YYYY y separados por una coma"
      },
      "attribute": "selected-dates",
      "reflect": false
    },
    "multiselect": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si se podr\u00E1 seleccionar un rango de fechas"
      },
      "attribute": "multiselect",
      "reflect": false,
      "defaultValue": "false"
    },
    "full": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El selector del calendario ocupar\u00E1 el 100% del espacio disponible"
      },
      "attribute": "full",
      "reflect": false,
      "defaultValue": "false"
    },
    "rangeSelector": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'day' | 'week' | 'month' | 'none'",
        "resolved": "\"day\" | \"month\" | \"none\" | \"week\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se mostrar\u00E1 una barra de botones para seleccionar r\u00E1pidamente entre d\u00EDa, \u00FAltima semana o \u00FAltimo mes"
      },
      "attribute": "range-selector",
      "reflect": false
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se mostrar\u00E1 un mensaje de error"
      },
      "attribute": "error",
      "reflect": false,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Cuando se encuentra dentro de un \"ibk-form\" al hacer submit si el calendario se encuentra vac\u00EDo, mostrar\u00E1 un mensaje de error"
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "requiredMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Personaliza el mensaje de campo requerido"
      },
      "attribute": "required-message",
      "reflect": false,
      "defaultValue": "'Por favor selecciona una fecha'"
    },
    "noHandlingError": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si el calendario no contar\u00E1 con manejo de errores. Se omitir\u00E1 el espacio generado para el mensaje de error"
      },
      "attribute": "no-handling-error",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "_showingDates": {},
    "_datesPosition": {},
    "_currentDate": {},
    "_otherDate": {},
    "_tempOverRange": {}
  }; }
  static get events() { return [{
      "method": "onselect",
      "name": "onselect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento al seleccionar una fecha \u00FAnica o un rango.\r\nRetorna un objeto \u00FAnico cuando el selector es de una sola fecha y retorna un Array de objetos cuando se selecciona un rango"
      },
      "complexType": {
        "original": "CalendarEvent | Array<CalendarEvent>",
        "resolved": "CalendarEvent | CalendarEvent[]",
        "references": {
          "CalendarEvent": {
            "location": "local"
          },
          "Array": {
            "location": "global"
          }
        }
      }
    }]; }
  static get elementRef() { return "host"; }
}
