import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
import { l as lodash_padstart } from './index.esm.js';
import { l as lodash_isnil } from './index3.js';
import { B as BalDate } from './date.js';
import { L as Logger } from './log.js';
import { d as defaultConfig } from './initialize.js';
import { L as ListenToConfig } from './config.decorator.js';
import { b as waitAfterFramePaint } from './helpers.js';
import { B as BEM } from './bem.js';
import { L as ListenToSwipe } from './swipe.decorator.js';
import { i as i18nBalDate } from './bal-date.i18n.js';
import { d as defineCustomElement$2 } from './bal-date-calendar-cell2.js';
import { d as defineCustomElement$1 } from './bal-icon2.js';

function getDaysInMonth(year, month) {
  if (month < 1 || year < 0) {
    return undefined;
  }
  return new Date(year, month, 0).getDate();
}
function isoDateOfDay(day, month, year) {
  return `${year}-${lodash_padstart(`${month}`, 2, '0')}-${lodash_padstart(`${day}`, 2, '0')}`;
}
function isoDateOfToday() {
  const today = new Date();
  return `${today.getFullYear()}-${lodash_padstart(`${today.getMonth() + 1}`, 2, '0')}-${lodash_padstart(`${today.getDate()}`, 2, '0')}`;
}
function generateCalendarGrid(year, month, min, max, allowedDates) {
  const grid = [];
  const numDays = getDaysInMonth(year, month);
  const firstDay = getFirstDayOfMonth(year, month);
  if (numDays !== undefined && firstDay) {
    const isoToday = isoDateOfToday();
    const dateMin = BalDate.fromISO(min);
    const dateMax = BalDate.fromISO(max);
    const allowedDate = (isoDate) => {
      if (lodash_isnil(allowedDates)) {
        return false;
      }
      return !allowedDates(isoDate);
    };
    for (let day = 1; day <= numDays; day++) {
      const isoDate = isoDateOfDay(day, month, year);
      grid.push({
        day,
        month,
        year,
        isoDate,
        fullDate: BalDate.fromISO(isoDate).toFormat(),
        today: isoToday === isoDate,
        disabled: dateMin.isAfter(isoDate) || dateMax.isBefore(isoDate) || allowedDate(isoDate),
      });
    }
  }
  return grid;
}
function getFirstWeekdayOfMonth(year, month) {
  if (month < 1 || year < 0) {
    return 1;
  }
  const date = new Date(year, month - 1, 1);
  const weekday = date.getDay();
  return weekday === 0 ? 7 : weekday;
}
function validateLanguage(language) {
  if (['en', 'de', 'fr', 'it', 'nl', 'es', 'pl', 'pt', 'sv', 'fi'].includes(language)) {
    return language;
  }
  return 'de';
}
function generateYears(currentYear, minYear, maxYear) {
  const list = [];
  const today = new Date();
  const todayYear = today.getFullYear();
  for (let year = minYear; year <= maxYear; year++) {
    list.push({
      value: year,
      label: `${year}`,
      disabled: false,
      today: todayYear === year,
      selected: currentYear === year,
    });
  }
  return list;
}
function generateMonths(language, currentYear, selectedDate, min, max) {
  const locale = validateLanguage(language);
  const months = BalDate.infoMonths({ format: 'long', locale });
  const selected = BalDate.fromISO(selectedDate);
  const today = new Date();
  const todayYear = today.getFullYear();
  const todayMonth = today.getMonth() + 1;
  let minMonth = 0;
  if (min && currentYear !== undefined) {
    const minDate = BalDate.fromISO(min);
    if (minDate.isValid) {
      if (currentYear > minDate.year) {
        minMonth = 0;
      }
      else {
        minMonth = minDate.month || minMonth;
      }
    }
  }
  let maxMonth = 12;
  if (max && currentYear !== undefined) {
    const maxDate = BalDate.fromISO(max);
    if (maxDate.isValid) {
      if (currentYear < maxDate.year) {
        maxMonth = 12;
      }
      else {
        maxMonth = maxDate.month || maxMonth;
      }
    }
  }
  return months.map((label, index) => {
    const value = index + 1;
    return {
      label,
      value,
      today: value === todayMonth && currentYear === todayYear,
      selected: value === selected.month && currentYear === selected.year,
      disabled: value < minMonth || value > maxMonth,
    };
  });
}
function generateWeekDays(language) {
  const locale = validateLanguage(language);
  const weekdaysMin = BalDate.infoWeekdays({ format: 'short', locale });
  const weekdays = BalDate.infoWeekdays({ format: 'long', locale });
  return weekdaysMin.map((weekdayMin, index) => ({
    ariaLabel: weekdays[index],
    textContent: weekdayMin,
  }));
}
function getFirstDayOfMonth(year, month) {
  if (month < 1 || month > 12 || year < 0) {
    return undefined;
  }
  return new Date(year, month - 1, 1);
}

const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) => {
  const block = BEM.block('date-calendar');
  const blockBody = block.element('body');
  const blockBodyList = blockBody.element('list');
  return (h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
      height: `${girdHeight - 2 - 8 - 8}px`,
    }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (h("li", { id: `${name}-${item.value}` },
    h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), tabIndex: -1, onClick: () => onSelect(item) }, item.label))))));
};

const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOfWeek, onSelectDay, }) => {
  const block = BEM.block('date-calendar');
  const blockBody = block.element('body');
  const blockBodyGrid = blockBody.element('grid');
  return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
    h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
    h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({}, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
};

const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {
  const block = BEM.block('date-calendar');
  const blockNav = block.element('nav');
  const nextMonthLabel = i18nBalDate[language].nextMonth;
  const previousMonthLabel = i18nBalDate[language].previousMonth;
  const selectMonthLabel = i18nBalDate[language].selectMonth;
  return (h("div", { class: Object.assign({}, blockNav.class()) },
    h("div", { class: Object.assign({}, blockNav.modifier('start').class()) },
      h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-test": "change-year-month", onClick: onClickSelectMonthAndYear },
        h("span", null,
          monthFullNames[month - 1],
          " ",
          year),
        h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))),
    h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
        display: isListVisible ? 'none' : 'flex',
      } },
      h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-test": "previous-month" },
        h("bal-icon", { name: "caret-left", color: "primary", size: "small" })),
      h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" },
        h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
};

const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__nav button--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border-grey)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border-grey)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar-cell--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
    r = Reflect.decorate(decorators, target, key, desc);
  else
    for (var i = decorators.length - 1; i >= 0; i--)
      if (d = decorators[i])
        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const DateCalendar = proxyCustomElement(class DateCalendar extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.balChange = createEvent(this, "balChange", 7);
    this.onSelectDay = (isoDate) => {
      this.valueChanged(isoDate, this.selectedDate);
      this.balChange.emit(this.selectedDate);
    };
    this.onClickNextMonth = () => {
      let nextYear = this.year;
      let nextMonth = this.month + 1;
      if (nextMonth > 12) {
        nextMonth = 1;
        nextYear = nextYear + 1;
      }
      this.generateGridByMonthAndYear(nextMonth, nextYear);
    };
    this.onClickPreviousMonth = () => {
      let nextYear = this.year;
      let nextMonth = this.month - 1;
      if (nextMonth < 1) {
        nextMonth = 12;
        nextYear = nextYear - 1;
      }
      this.generateGridByMonthAndYear(nextMonth, nextYear);
    };
    this.onClickSelectMonthAndYear = async () => {
      this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max);
      if (this.isCalendarVisible === true) {
        this.isCalendarVisible = false;
        this.isYearListVisible = true;
        this.isMonthListVisible = false;
        await waitAfterFramePaint();
        if (this.yearListEl) {
          const selectedYearEl = this.yearListEl.querySelector(`#year-${this.year}`);
          if (selectedYearEl) {
            const rowHeight = 26 + 8 + 4;
            this.yearListEl.scrollTop = selectedYearEl.offsetTop - rowHeight * 2;
          }
          else {
            this.yearListEl.scrollTop = 0;
          }
        }
      }
      else {
        this.isCalendarVisible = true;
        this.isYearListVisible = false;
        this.isMonthListVisible = false;
      }
    };
    this.onClickYear = (newYear) => {
      this.isYearListVisible = false;
      this.isMonthListVisible = true;
      this.generateGridByMonthAndYear(this.month, newYear);
      this.months = generateMonths(this.language, newYear, this.selectedDate, this.min, this.max);
    };
    this.onClickMonth = (newMonth) => {
      this.isYearListVisible = false;
      this.isMonthListVisible = false;
      this.isCalendarVisible = true;
      this.generateGridByMonthAndYear(newMonth, this.year);
    };
    this.selectedDate = '';
    this.monthFullNames = [];
    this.weekdays = [];
    this.months = [];
    this.years = [];
    this.calendarGrid = [];
    this.firstDayOfWeek = 0;
    this.month = 0;
    this.year = 0;
    this.language = defaultConfig.language;
    this.isCalendarVisible = true;
    this.isYearListVisible = false;
    this.isMonthListVisible = false;
    this.value = undefined;
    this.defaultDate = undefined;
    this.allowedDates = undefined;
    this.min = undefined;
    this.max = undefined;
    this.minYearProp = undefined;
    this.maxYearProp = undefined;
  }
  createLogger(log) {
    this.log = log;
  }
  valueChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      const date = BalDate.fromISO(newValue);
      if (!date.isValid) {
        this.generateGridByDefaultDate();
        this.selectedDate = '';
      }
      else {
        this.generateGridByDate(date);
        this.selectedDate = date.toISODate();
      }
    }
  }
  rangePropChanged() {
    this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max);
    this.years = generateYears(this.year, this.minYear, this.maxYear);
  }
  yearRangePropChanged() {
    this.years = generateYears(this.year, this.minYear, this.maxYear);
  }
  connectedCallback() {
    this.generateGridByDefaultDate();
    this.valueChanged(this.value, undefined);
  }
  async configChanged(state) {
    this.years = generateYears(this.year, this.minYear, this.maxYear);
    this.months = generateMonths(state.language, this.year, this.selectedDate, this.min, this.max);
    this.weekdays = generateWeekDays(state.language);
    this.monthFullNames = BalDate.infoMonths({ format: 'long', locale: this.language });
    this.language = state.language;
  }
  swipeListener({ left, right }) {
    if (left) {
      this.onClickNextMonth();
    }
    else if (right) {
      this.onClickPreviousMonth();
    }
  }
  get minYear() {
    if (this.minYearProp === undefined) {
      const today = new Date();
      const year = today.getFullYear();
      const defaultMinYear = year - 100;
      if (this.min) {
        const date = BalDate.fromISO(this.min);
        return date.year || defaultMinYear;
      }
      else {
        return defaultMinYear;
      }
    }
    return this.minYearProp;
  }
  get maxYear() {
    if (this.maxYearProp === undefined) {
      const today = new Date();
      const year = today.getFullYear();
      const defaultMaxYear = year + 50;
      if (this.max) {
        const date = BalDate.fromISO(this.max);
        return date.year || defaultMaxYear;
      }
      else {
        return defaultMaxYear;
      }
    }
    return this.maxYearProp;
  }
  generateGridByDate(date) {
    if (date.year !== undefined && date.month !== undefined) {
      this.generateGridByMonthAndYear(date.month, date.year);
    }
  }
  generateGridByDefaultDate() {
    const date = BalDate.fromISO(this.defaultDate);
    if (date.isValid) {
      this.generateGridByDate(date);
    }
    else {
      const today = new Date();
      this.month = today.getMonth() + 1;
      this.year = today.getFullYear();
      this.calendarGrid = generateCalendarGrid(this.year, this.month, this.min, this.max, this.allowedDates);
      this.firstDayOfWeek = getFirstWeekdayOfMonth(this.year, this.month);
    }
  }
  generateGridByMonthAndYear(month, year) {
    if (this.month !== month || this.year !== year) {
      this.calendarGrid = generateCalendarGrid(year, month, this.min, this.max, this.allowedDates);
      this.firstDayOfWeek = getFirstWeekdayOfMonth(year, month);
    }
    this.month = month;
    this.year = year;
  }
  render() {
    var _a;
    const girdHeight = ((_a = this.gridEl) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
    const block = BEM.block('date-calendar');
    const blockBody = block.element('body');
    const blockFoot = block.element('foot');
    return (h(Host, { class: Object.assign({}, block.class()) }, h(CalendarNav, { language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), h("div", { class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), h(CalendarList, { name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { class: Object.assign({}, blockFoot.class()) }, h("slot", null))));
  }
  get el() { return this; }
  static get watchers() { return {
    "value": ["valueChanged"],
    "min": ["rangePropChanged"],
    "max": ["rangePropChanged"],
    "minYearProp": ["yearRangePropChanged"],
    "maxYearProp": ["yearRangePropChanged"]
  }; }
  static get style() { return balDateCalendarCss; }
}, [1, "bal-date-calendar", {
    "value": [1],
    "defaultDate": [1, "default-date"],
    "allowedDates": [16],
    "min": [1025],
    "max": [1025],
    "minYearProp": [2, "min-year"],
    "maxYearProp": [2, "max-year"],
    "selectedDate": [32],
    "monthFullNames": [32],
    "weekdays": [32],
    "months": [32],
    "years": [32],
    "calendarGrid": [32],
    "firstDayOfWeek": [32],
    "month": [32],
    "year": [32],
    "language": [32],
    "isCalendarVisible": [32],
    "isYearListVisible": [32],
    "isMonthListVisible": [32],
    "configChanged": [64]
  }, undefined, {
    "value": ["valueChanged"],
    "min": ["rangePropChanged"],
    "max": ["rangePropChanged"],
    "minYearProp": ["yearRangePropChanged"],
    "maxYearProp": ["yearRangePropChanged"]
  }]);
__decorate([
  Logger('bal-date-calendar')
], DateCalendar.prototype, "createLogger", null);
__decorate([
  ListenToConfig()
], DateCalendar.prototype, "configChanged", null);
__decorate([
  ListenToSwipe({ mobileOnly: true })
], DateCalendar.prototype, "swipeListener", null);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bal-date-calendar", "bal-date-calendar-cell", "bal-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "bal-date-calendar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, DateCalendar);
      }
      break;
    case "bal-date-calendar-cell":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "bal-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { DateCalendar as D, defineCustomElement as d };
