'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7cdf1df1.js');
const moment = require('./moment-d48a0164.js');

function cloneDate(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
}
function isBefore(first, second) {
  return first.getTime() < second.getTime();
}
function isAfter(first, second) {
  return first.getTime() > second.getTime();
}
function isSameDay(first, second) {
  return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
}
function moveToDayOfWeek(date, dayOfWeek) {
  while (date.getDay() !== dayOfWeek)
    date.setDate(date.getDate() - 1);
  return date;
}
function pad(value, length = 0) {
  while (value.length < length)
    value = '0' + value;
  return value;
}
function toDayOfMonthString(date) {
  return pad(date.getDate().toString());
}
function toMonthAndYearString(date) {
  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return months[date.getMonth()] + ' ' + date.getFullYear();
}
function iterateMonth(date, count) {
  const clone = new Date(date);
  if (count === 0) {
    return clone;
  }
  return new Date(clone.setMonth(clone.getMonth() + count));
}

const dvnDatePickerCss = "dvn-date-picker{--date-picker-height:180px;--month-spacing:20px;--month-width:250px;--date-picker-width:calc(calc(var(--month-width) * var(--shown-month-count)) + calc(var(--month-spacing) * calc(var(--shown-month-count) - 1)));--transition-duration:450ms;--transition-interpolarator:cubic-bezier(0.23, 1, 0.32, 1);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline:none}dvn-date-picker .calendar-container{position:absolute;z-index:10;background:var(--color-elevated-item-background);width:calc(var(--date-picker-width) + 10px);padding:5px;border-radius:var(--corner-radius);box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.1);overflow:hidden;top:40px;left:5px;transition:visibility 0s 100ms, opacity 100ms linear;opacity:0;visibility:hidden}dvn-date-picker .calendar-container.shown{opacity:1;visibility:visible;transition:opacity 100ms linear}dvn-date-picker .calendar-container.embedded{opacity:1;visibility:visible;position:relative;top:0;left:0;z-index:0;box-shadow:none}dvn-date-picker .calendar-container .month-header{float:left;width:var(--date-picker-width);display:flex;align-items:center;justify-content:space-between}dvn-date-picker .calendar-container .month-header .sliding-month-names-container{position:relative;overflow:hidden;height:1.2em;width:calc(var(--date-picker-width) - calc(32px * 2))}dvn-date-picker .calendar-container .month-header .sliding-month-names-container .sliding-month-name{--sliding-month-name-width:calc(var(--month-width) - calc(32px * 2));color:var(--color-text-title);font-family:var(--font-family-title);text-align:center;width:var(--sliding-month-name-width);position:absolute;user-select:none;pointer-events:none}dvn-date-picker .calendar-container .month-header .sliding-month-names-container .sliding-month-name.other{left:calc(var(--month-order) * calc(var(--month-width) + var(--month-spacing)))}dvn-date-picker .calendar-container .month-header .sliding-month-names-container .sliding-month-name.other.to-right{left:calc(var(--month-order) * calc(var(--month-width) + var(--month-spacing)))}dvn-date-picker .calendar-container .month-header .sliding-month-names-container .sliding-month-name.sliding{transition:transform var(--transition-duration) var(--transition-interpolarator), opacity var(--transition-duration) var(--transition-interpolarator);transform:translate3d(calc(-1 * calc(var(--month-width) + var(--month-spacing))), 0, 0)}dvn-date-picker .calendar-container .month-header .sliding-month-names-container .sliding-month-name.sliding.to-right{transform:translate3d(calc(1 * calc(var(--month-width) + var(--month-spacing))), 0, 0)}dvn-date-picker .calendar-container .month-header .navigation-icon{font-weight:bold;padding:5px 8px;cursor:pointer;font-style:normal;font-size:0.7em;transition:color 0.3s;color:var(--color-neutral);width:32px;height:32px;display:flex;align-items:center;justify-content:center}dvn-date-picker .calendar-container .month-header .navigation-icon:hover{color:var(--color-primary)}dvn-date-picker .calendar-container .week-headers-container{width:100%}dvn-date-picker .calendar-container .week-headers-container .week-header{float:left;width:var(--month-width);margin-top:8px;margin-bottom:8px;margin-right:var(--month-spacing);display:table}dvn-date-picker .calendar-container .week-headers-container .week-header:last-of-type{margin-right:0}dvn-date-picker .calendar-container .week-headers-container .week-header .day-name{float:left;width:14.2857142857%;font-size:0.6em;text-transform:uppercase;color:var(--color-text-secondary);font-weight:bold;text-align:center;user-select:none;padding:4px 0 0 0}dvn-date-picker .calendar-container .month-container{float:left;width:var(--month-width);position:relative;height:var(--date-picker-height)}dvn-date-picker .calendar-container .sliding-month{width:var(--month-width);position:absolute;height:var(--date-picker-height)}dvn-date-picker .calendar-container .sliding-month.other{left:calc(var(--month-order) * calc(var(--month-width) + var(--month-spacing)))}dvn-date-picker .calendar-container .sliding-month.other.to-right{left:calc(var(--month-order) * calc(var(--month-width) + var(--month-spacing)))}dvn-date-picker .calendar-container .sliding-month.sliding{transition:transform var(--transition-duration) var(--transition-interpolarator);transform:translate3d(calc(-1 * calc(var(--month-width) + var(--month-spacing))), 0, 0)}dvn-date-picker .calendar-container .sliding-month.sliding.to-right{transform:translate3d(calc(1 * calc(var(--month-width) + var(--month-spacing))), 0, 0)}dvn-date-picker .calendar-container .week{float:left;width:100%}dvn-date-picker .calendar-container .week .day{float:left;width:14.2857142857%;font-size:0.8em;padding:10px 0;cursor:pointer;text-align:center;border-radius:var(--corner-radius);user-select:none;position:relative}dvn-date-picker .calendar-container .week .day:hover{background:var(--color-background-secondary)}dvn-date-picker .calendar-container .week .day.today:after{content:\"\";position:absolute;border:2px solid var(--color-primary);border-radius:2px;bottom:4px;left:50%;transform:translate(-50%, 0)}dvn-date-picker .calendar-container .week .day.today.selected:after{border:2px solid var(--color-primary)}dvn-date-picker .calendar-container .week .day.selected:not(.other-month){background:var(--color-primary-lightest);color:var(--color-primary)}dvn-date-picker .calendar-container .week .day.other-month{color:var(--color-text-secondary)}dvn-date-picker .calendar-container .week .day.disabled{color:#E0E0E0;cursor:default}dvn-date-picker .calendar-container .week .day.disabled:hover{background:transparent !important}";

function getWeekStartDates(view) {
  view.setDate(1);
  view = moveToDayOfWeek(cloneDate(view), 0);
  const current = cloneDate(view);
  current.setDate(current.getDate() + 7);
  const starts = [view], month = current.getMonth();
  while (current.getMonth() === month) {
    starts.push(cloneDate(current));
    current.setDate(current.getDate() + 7);
  }
  return starts;
}
function buildDays(start) {
  const days = [cloneDate(start)];
  let clone = cloneDate(start);
  for (let i = 1; i <= 6; i++) {
    clone = cloneDate(clone);
    clone.setDate(clone.getDate() + 1);
    days.push(clone);
  }
  return days;
}
function getDayClassName(month, selectedDay, day, isDisabled) {
  let className = 'day';
  if (isSameDay(day, new Date()))
    className += ' today';
  if (month !== day.getMonth())
    className += ' other-month';
  if (selectedDay) {
    let isSelected = false;
    if (Array.isArray(selectedDay)) {
      isSelected = !!selectedDay.find(d => day.toDateString() === d.toDateString());
    }
    else {
      isSelected = isSameDay(day, selectedDay);
    }
    if (isSelected)
      className += ' selected';
  }
  if (isDisabled)
    className += ' disabled';
  return className;
}
function isDisabled(minDate, maxDate, day) {
  return (minDate && isBefore(day, minDate)) || (maxDate && isAfter(day, maxDate));
}
function renderWeeks(currentDate, value, minDate, maxDate, onSelect) {
  const starts = getWeekStartDates(currentDate), month = starts[1].getMonth();
  return starts.map((s, i) => {
    const days = buildDays(s);
    return (index.h("div", { key: i, class: "week" }, days.map((day, j) => (index.h("div", { class: {
        day: true,
        [getDayClassName(month, value, day, isDisabled(minDate, maxDate, day))]: true
      }, key: j, onClick: () => onSelect && onSelect(day) }, index.h("div", { class: "real-day" }, toDayOfMonthString(day)))))));
  });
}
function valueLabel(value, dateFormat) {
  if (!value) {
    return '';
  }
  if (Array.isArray(value)) {
    return value.map(d => moment.hooks(d).format(dateFormat)).join(', ');
  }
  return moment.hooks(value).format(dateFormat);
}
function checkIfClickedDateIsOutsideVisibleRange(currentDate, shownMonthCount, day, isSlidingRight) {
  const firstVisibleMonth = isSlidingRight
    ? iterateMonth(currentDate, 1)
    : currentDate;
  const lastVisibleMonth = isSlidingRight
    ? iterateMonth(currentDate, shownMonthCount)
    : iterateMonth(currentDate, shownMonthCount - 1);
  const shouldMoveForward = (day.getMonth() > lastVisibleMonth.getMonth() && day.getFullYear() === lastVisibleMonth.getFullYear()) || day.getFullYear() > lastVisibleMonth.getFullYear();
  const shouldMoveBackward = (firstVisibleMonth.getMonth() > day.getMonth() && day.getFullYear() === firstVisibleMonth.getFullYear()) || day.getFullYear() < firstVisibleMonth.getFullYear();
  return { shouldMoveForward, shouldMoveBackward };
}
const DvnDatePicker = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.change = index.createEvent(this, "change", 7);
    this.currentDate = new Date();
    this.isCalendarShown = false;
    this.isSliding = false;
    this.isSlidingRight = false;
    this.dateFormat = 'MM/DD/YYYY';
    this.leaned = false;
    this.disabled = false;
    this.embedded = false;
    this.multiple = false;
    this.shownMonthCount = 1;
    this.moveBackward = () => {
      if (!this.isSliding) {
        this.move(iterateMonth(this.currentDate, this.isSlidingRight ? 0 : -1), false);
      }
    };
    this.moveForward = () => {
      if (!this.isSliding) {
        this.move(iterateMonth(this.currentDate, 1), true);
      }
    };
    this.onTransitionEnd = () => {
      this.isSliding = false;
      if (!this.isSlidingRight) {
        this.currentDate = iterateMonth(this.currentDate, 1);
      }
      else {
        this.currentDate = iterateMonth(this.currentDate, -1);
      }
    };
    this.onSelectDay = (day) => {
      const { currentDate, shownMonthCount, isSlidingRight, valueInState } = this;
      const { shouldMoveForward, shouldMoveBackward } = checkIfClickedDateIsOutsideVisibleRange(currentDate, shownMonthCount, day, isSlidingRight);
      if (shouldMoveForward) {
        this.moveForward();
      }
      else if (shouldMoveBackward) {
        this.moveBackward();
      }
      if (!this.isDayDisabled(day)) {
        if (!this.multiple) {
          this.valueInState = day;
          this.isCalendarShown = false;
        }
        else {
          const dates = valueInState || [];
          const filtered = dates.filter(d => day.toDateString() !== d.toDateString());
          if (filtered.length === dates.length) {
            // if filtered is same as dates, then the item is not in the list
            this.valueInState = [...dates, day];
          }
          else {
            this.valueInState = filtered;
          }
        }
        this.change.emit(this.valueInState);
      }
    };
  }
  move(date, isForward) {
    if (this.disabled) {
      return;
    }
    if (!isForward || this.isSlidingRight) {
      this.currentDate = cloneDate(date);
    }
    this.isSliding = true;
    this.isSlidingRight = !isForward;
  }
  componentDidLoad() {
    this.currentWeekContainer.addEventListener('transitionend', this.onTransitionEnd);
  }
  isDayDisabled(day) {
    const { minDate, maxDate } = this;
    return (minDate && isBefore(day, minDate)) || (maxDate && isAfter(day, maxDate));
  }
  updateInnerValue(newValue) {
    this.valueInState = newValue;
  }
  componentWillLoad() {
    this.valueInState = this.value;
  }
  render() {
    const { currentDate, embedded, isCalendarShown, isSliding, isSlidingRight, placeholder, value, valueInState, minDate, maxDate, shownMonthCount, } = this;
    const valueToShow = value || valueInState;
    return (index.h(index.Host, { onBlur: () => this.isCalendarShown = false, onFocus: () => this.isCalendarShown = true, tabindex: this.disabled ? -1 : 0, style: {
        '--shown-month-count': `${shownMonthCount}`,
      } }, !embedded &&
      index.h("dvn-input", { placeholder: placeholder, readonly: true, value: valueLabel(valueInState, this.dateFormat), leaned: this.leaned }), index.h("div", { class: {
        'calendar-container': true,
        shown: isCalendarShown,
        embedded,
      } }, index.h("div", { class: "month-header" }, index.h("i", { class: "navigation-icon", onClick: this.moveBackward }, String.fromCharCode(9664)), index.h("div", { class: "sliding-month-names-container" }, Array.apply(null, Array(Number(shownMonthCount) + 1)).map((_, i) => (index.h("div", { class: {
        'sliding-month-name': true,
        'sliding': isSliding,
        'to-right': isSlidingRight,
        'other': true,
      }, ref: el => this.currentWeekContainer = el, style: { '--month-order': `${isSlidingRight ? i - 1 : i}` } }, toMonthAndYearString(iterateMonth(currentDate, i)))))), index.h("i", { class: "navigation-icon", onClick: this.moveForward }, String.fromCharCode(9654))), index.h("div", { class: "week-headers-container" }, Array.apply(null, Array(shownMonthCount)).map((_, i) => (index.h("div", { class: "week-header", key: `week-${i}` }, index.h("div", { class: "day-name" }, "Sun"), index.h("div", { class: "day-name" }, "Mon"), index.h("div", { class: "day-name" }, "Tue"), index.h("div", { class: "day-name" }, "Wed"), index.h("div", { class: "day-name" }, "Thu"), index.h("div", { class: "day-name" }, "Fri"), index.h("div", { class: "day-name" }, "Sat"))))), index.h("div", { class: "month-container" }, Array.apply(null, Array(shownMonthCount + 1)).map((_, i) => (index.h("div", { class: {
        'sliding-month': true,
        'other': true,
        'sliding': isSliding,
        'to-right': isSlidingRight,
      }, style: { '--month-order': `${isSlidingRight ? i - 1 : i}` }, ref: el => this.currentWeekContainer = el }, renderWeeks(iterateMonth(currentDate, i), valueToShow, minDate, maxDate, this.onSelectDay))))))));
  }
  static get watchers() { return {
    "value": ["updateInnerValue"]
  }; }
};
DvnDatePicker.style = dvnDatePickerCss;

exports.dvn_date_picker = DvnDatePicker;
