/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$c } from './gasco-backdrop2.js';
import { d as defineCustomElement$b } from './gasco-button2.js';
import { d as defineCustomElement$a } from './gasco-button-icon2.js';
import { d as defineCustomElement$9 } from './gasco-datetime2.js';
import { d as defineCustomElement$8 } from './gasco-input2.js';
import { d as defineCustomElement$7 } from './gasco-item2.js';
import { d as defineCustomElement$6 } from './gasco-label2.js';
import { d as defineCustomElement$5 } from './gasco-picker-column-internal2.js';
import { d as defineCustomElement$4 } from './gasco-picker-internal2.js';
import { d as defineCustomElement$3 } from './gasco-popover2.js';
import { d as defineCustomElement$2 } from './icon.js';

const gascoCalendarCss = ":host(.gasco-calendar){position:relative;max-width:350px;width:100%}.native-calendar{max-width:inherit;width:100%}:host(.gasco-calendar) gasco-datetime{position:absolute;left:0;right:0;top:68px;border-radius:0 0 4px 4px;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);max-width:340px;margin-inline:5px;z-index:9999}";

const GascoCalendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.gascoChangeValue = createEvent(this, "gascoChangeValue", 7);
    this.gascoBlur = createEvent(this, "gascoBlur", 7);
    this.gascoFocus = createEvent(this, "gascoFocus", 7);
    this.fireFocusEvents = true;
    this.hasFocus = false;
    this.showCalendar = false;
    this.inputValue = '';
    this.onFocus = (ev) => {
      this.hasFocus = true;
      if (!this.showCalendar) {
        this.showCalendar = true;
      }
      if (this.fireFocusEvents) {
        this.gascoFocus.emit(ev);
      }
    };
    this.onBlur = (ev) => {
      this.hasFocus = false;
      if (this.showCalendar) {
        this.showCalendar = false;
      }
      if (this.fireFocusEvents) {
        this.gascoBlur.emit(ev);
      }
    };
  }
  handleDatetimeReady(ev) {
    const value = ev.detail.value;
    if (value !== '') {
      this.onBlur(ev);
    }
    this.inputValue = value;
    this.gascoChangeValue.emit({ value });
  }
  handleClickWindow(e) {
    if (!this.el.contains(e.target) && this.showCalendar) {
      this.onBlur(e);
    }
  }
  render() {
    const { onFocus, showCalendar, inputValue } = this;
    return (h(Host
    // onBlur={onBlur}
    , {
      // onBlur={onBlur}
      onFocus: onFocus, class: {
        'gasco-color': true,
        'gasco-calendar': true,
        'has-focus': this.hasFocus,
        'gasco-color-primary': true,
      }
    }, h("div", { class: "native-calendar", part: "native" }, h("gasco-input", { label: "Selecciona una fecha", class: "input-datetime", value: inputValue, readonly: true }, h("ion-icon", { name: "calendar-number-outline", slot: "end" })), showCalendar && h("gasco-datetime", { size: "cover" }))));
  }
  get el() { return this; }
  static get style() { return gascoCalendarCss; }
}, [1, "gasco-calendar", {
    "fireFocusEvents": [4, "fire-focus-events"],
    "hasFocus": [32],
    "showCalendar": [32],
    "inputValue": [32]
  }, [[0, "gascoChangeDatetime", "handleDatetimeReady"], [8, "click", "handleClickWindow"]]]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-calendar", "gasco-backdrop", "gasco-button", "gasco-button-icon", "gasco-datetime", "gasco-input", "gasco-item", "gasco-label", "gasco-picker-column-internal", "gasco-picker-internal", "gasco-popover", "ion-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-calendar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoCalendar$1);
      }
      break;
    case "gasco-backdrop":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "gasco-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "gasco-button-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "gasco-datetime":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "gasco-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "gasco-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "gasco-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "gasco-picker-column-internal":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "gasco-picker-internal":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "gasco-popover":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "ion-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const GascoCalendar = GascoCalendar$1;
const defineCustomElement = defineCustomElement$1;

export { GascoCalendar, defineCustomElement };
