@sme.up/ketchup 8.0.1 → 8.1.0

package/dist/collection/components/kup-card/built-in/kup-card-calendar.js

@@ -1,449 +1,393 @@
-import { h } from '@stencil/core';
-import { FButton } from '../../../f-components/f-button/f-button';
-import { FButtonStyling, } from '../../../f-components/f-button/f-button-declarations';
-import { KupDatesFormats } from '../../../managers/kup-dates/kup-dates-declarations';
-import { DateTimeFormatOptionsMonth, getMonthsAsStringByLocale, } from '../../../utils/utils';
-import { SourceEvent } from '../../kup-date-picker/kup-date-picker-declarations';
-const dom = document.documentElement;
-export function prepareCalendar(component) {
-  const el = component.rootElement;
-  if (!el.kupData)
-    el.kupData = {};
-  if (component.data && component.data.options) {
-    const opts = component.data.options;
-    if (opts.resetStatus) {
-      el.kupData = {};
-      const obj = opts.initialValue;
-      if (opts.initialValue) {
-        if (obj && obj.k) {
-          setValue(component, new Date(obj.k));
-        }
-        else {
-          setValue(component, new Date(opts.initialValue));
-        }
-      }
-      if (opts.firstDayIndex)
-        el.kupData.firstDayIndex = opts.firstDayIndex;
-      opts.resetStatus = false;
-    }
-  }
-  if (!el.kupData.value)
-    setValue(component, new Date());
-  const months = getMonthsAsStringByLocale();
-  const curYear = getYear(component);
-  const curMonth = getMonth(component);
-  const yearRange = getInitEndYear(curYear);
-  const initYear = yearRange.initYear;
-  const endYear = yearRange.endYear;
-  let changeViewButtonLabel = 'not-set';
-  switch (getView(component)) {
-    case SourceEvent.DATE: {
-      changeViewButtonLabel =
-        months[curMonth] + ', ' + curYear.toString();
-      break;
-    }
-    case SourceEvent.MONTH: {
-      changeViewButtonLabel = curYear.toString();
-      break;
-    }
-    case SourceEvent.YEAR: {
-      changeViewButtonLabel =
-        initYear.toString() + ' - ' + endYear.toString();
-      break;
-    }
-  }
-  const prevButtonProp = {
-    icon: 'chevron_left',
-    wrapperClass: 'prev-page',
-    onClick: () => prevPage(component),
-  };
-  const prevButtonComp = h(FButton, Object.assign({}, prevButtonProp));
-  const nextButtonProp = {
-    icon: 'chevron_right',
-    wrapperClass: 'next-page',
-    onClick: () => nextPage(component),
-  };
-  const nextButtonComp = h(FButton, Object.assign({}, nextButtonProp));
-  const changeViewButtonProp = {
-    wrapperClass: 'change-view-button',
-    styling: FButtonStyling.FLAT,
-    label: changeViewButtonLabel,
-    onClick: () => changeView(component),
-    id: 'change-view-button',
-  };
-  //text-transform:capitalize
-  return (h("div", { id: component.rootElement.id + '_calendar' }, h("div", { class: "section-1" }, h("div", { class: "sub-1 nav" }, prevButtonComp, h(FButton, Object.assign({}, changeViewButtonProp)), nextButtonComp)), h("div", { class: "section-2" }, createCalendar(component))));
-}
-function setValue(component, value) {
-  if (!!(value instanceof Date)) {
-    value = new Date();
-  }
-  const el = component.rootElement;
-  el.kupData.value = value;
-  el.kupData.day = el.kupData.value.getDate();
-  el.kupData.month = el.kupData.value.getMonth();
-  el.kupData.year = el.kupData.value.getFullYear();
-}
-function getValue(component) {
-  const el = component.rootElement;
-  if (el.kupData.value == null)
-    setValue(component, new Date());
-  return el.kupData.value;
-}
-function getDay(component) {
-  const el = component.rootElement;
-  if (el.kupData.day != null)
-    return el.kupData.day;
-  return null;
-}
-function getMonth(component) {
-  const el = component.rootElement;
-  if (el.kupData.month != null)
-    return el.kupData.month;
-  return null;
-}
-function getYear(component) {
-  const el = component.rootElement;
-  if (el.kupData.year != null)
-    return el.kupData.year;
-  return null;
-}
-function setDay(component, value) {
-  const el = component.rootElement;
-  el.kupData.day = value;
-}
-function setMonth(component, value) {
-  const el = component.rootElement;
-  el.kupData.month = value;
-}
-function setYear(component, value) {
-  const el = component.rootElement;
-  el.kupData.year = value;
-}
-function getFirstDayIndex(component) {
-  const el = component.rootElement;
-  if (el.kupData.firstDayIndex)
-    return el.kupData.firstDayIndex;
-  return 1;
-}
-function getView(component) {
-  const el = component.rootElement;
-  if (el.kupData.calendarView)
-    return el.kupData.calendarView;
-  return SourceEvent.DATE;
-}
-function setView(component, value) {
-  const el = component.rootElement;
-  el.kupData.calendarView = value;
-}
-function createCalendar(component) {
-  switch (getView(component)) {
-    case SourceEvent.DATE: {
-      return createDaysCalendar(component);
-    }
-    case SourceEvent.MONTH: {
-      return createMonthsCalendar(component);
-    }
-    case SourceEvent.YEAR: {
-      return createYearsCalendar(component);
-    }
-  }
-}
-function createDaysCalendar(component) {
-  const days = getDaysOfWeekAsStringByLocale(getFirstDayIndex(component));
-  const selectedDate = getValue(component);
-  const selectedDay = getDay(component);
-  const selectedMonth = getMonth(component);
-  const selectedYear = getYear(component);
-  const thead = [];
-  const tbody = [];
-  for (let index = 0; index < days.length; index++) {
-    thead.push(h("th", null, h("span", { class: "item-text" }, days[index])));
-  }
-  const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
-  const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
-  const finish = false;
-  let currentDayIndex = getFirstDayIndex(component);
-  const firstMonthDayIndex = firstMonthDay.getDay();
-  let row = [];
-  let daysForRowAdded = 0;
-  while (!finish) {
-    if (currentDayIndex == firstMonthDayIndex) {
-      break;
-    }
-    row.push(h("td", { class: "item empty" }));
-    currentDayIndex++;
-    daysForRowAdded++;
-    if (currentDayIndex > 6) {
-      currentDayIndex = 0;
-    }
-  }
-  let dayCount = 1;
-  while (dayCount <= lastMonthDay.getDate()) {
-    for (let i = daysForRowAdded; i < 7; i++) {
-      let dayClass = 'item';
-      let dataIndex = {
-        'data-index': selectedYear.toString() +
-          '-' +
-          fillString((selectedMonth + 1).toString(), '0', 2, true) +
-          '-' +
-          fillString(dayCount.toString(), '0', 2, true),
-      };
-      if ((selectedDay != null && dayCount === selectedDay) ||
-        (dayCount === selectedDate.getDate() &&
-          selectedMonth === selectedDate.getMonth() &&
-          selectedYear === selectedDate.getFullYear())) {
-        dayClass += ' selected';
-      }
-      row.push(h("td", { class: dayClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-          onCalendarItemClick(component, dataIndex['data-index']);
-        } }), dayCount)));
-      dayCount++;
-      if (dayCount > lastMonthDay.getDate()) {
-        break;
-      }
-    }
-    if (row.length > 0) {
-      tbody.push(h("tr", null, row));
-      row = [];
-    }
-    daysForRowAdded = 0;
-  }
-  return (h("table", { class: "calendar" }, h("thead", null, thead), h("tbody", null, tbody)));
-}
-function createMonthsCalendar(component) {
-  const months = getMonthsAsStringByLocale(DateTimeFormatOptionsMonth.SHORT);
-  let selectedDay = getDay(component);
-  const selectedMonth = getMonth(component);
-  const selectedYear = getYear(component);
-  if (selectedDay == null)
-    selectedDay = 1;
-  const tbody = [];
-  let row = [];
-  let monthCount = 0;
-  while (monthCount < 12) {
-    for (let i = 0; i < 4; i++) {
-      let monthClass = 'item';
-      const dataIndex = {
-        'data-index': selectedYear.toString() +
-          '-' +
-          fillString((monthCount + 1).toString(), '0', 2, true) +
-          '-' +
-          fillString(selectedDay.toString(), '0', 2, true),
-      };
-      if (monthCount === selectedMonth) {
-        monthClass += ' selected';
-      }
-      row.push(h("td", { class: monthClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
-        } }), months[monthCount])));
-      monthCount++;
-    }
-    if (row.length > 0) {
-      tbody.push(h("tr", null, row));
-      row = [];
-    }
-  }
-  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
-}
-function createYearsCalendar(component) {
-  let selectedDay = getDay(component);
-  const selectedMonth = getMonth(component);
-  const selectedYear = getYear(component);
-  if (selectedDay == null)
-    selectedDay = 1;
-  const yearRange = getInitEndYear(selectedYear);
-  const initYear = yearRange.initYear;
-  const endYear = yearRange.endYear;
-  const tbody = [];
-  let row = [];
-  let yearCount = initYear;
-  while (yearCount <= endYear) {
-    for (let i = 0; i < 4; i++) {
-      let yearClass = 'item';
-      let dataIndex = {
-        'data-index': yearCount.toString() +
-          '-' +
-          fillString((selectedMonth + 1).toString(), '0', 2, true) +
-          '-' +
-          fillString(selectedDay.toString(), '0', 2, true),
-      };
-      if (yearCount === selectedYear) {
-        yearClass += ' selected';
-      }
-      row.push(h("td", { class: yearClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
-        } }), yearCount)));
-      yearCount++;
-    }
-    if (row.length > 0) {
-      tbody.push(h("tr", null, row));
-      row = [];
-    }
-  }
-  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
-}
-function getDaysOfWeekAsStringByLocale(firstDayIndex) {
-  const thisWeekDays = thisWeek(firstDayIndex);
-  const monday = thisWeekDays.startDate;
-  const days = [];
-  for (var i = 0; i < 7; i++) {
-    var date = new Date(monday.toISOString());
-    date.setDate(date.getDate() + i);
-    days[i] = getDayAsStringByLocale(date);
-  }
-  return days;
-}
-function thisWeek(firstDayIndex) {
-  const firstDay = firstDayThisWeek(firstDayIndex);
-  return {
-    startDate: firstDay,
-    endDate: offsetDate(firstDay, 6),
-  };
-}
-function firstDayThisWeek(firstDayIndex) {
-  const d = new Date();
-  const day = d.getDay();
-  // dayIndex0
-  d.setDate(d.getDate() - day);
-  // dayIndexX
-  d.setDate(d.getDate() + firstDayIndex);
-  return d;
-}
-const offsetDate = (base, count) => {
-  const date = new Date(base);
-  date.setDate(base.getDate() + count);
-  return date;
-};
-function getDayAsStringByLocale(date) {
-  if (date == null) {
-    return '';
-  }
-  const options = {
-    weekday: 'narrow',
-    /** weekday: 'narrow' 'short' 'long' */
-  };
-  const dateTimeFormat = new Intl.DateTimeFormat(dom.ketchup.dates.getLocale(), options);
-  return dateTimeFormat.format(date);
-}
-function fillString(stringIn, stringForFill, finalLen, addBefore) {
-  const initSize = stringIn.length;
-  let stringOut = '';
-  for (let i = initSize; i < finalLen; i += stringForFill.length) {
-    stringOut += stringForFill;
-  }
-  if (addBefore) {
-    return stringOut + stringIn;
-  }
-  else {
-    return stringIn + stringOut;
-  }
-}
-function prevPage(component) {
-  let mm = getMonth(component);
-  let yy = getYear(component);
-  if (getView(component) == SourceEvent.DATE) {
-    if (mm < 1) {
-      mm = 11;
-      yy--;
-    }
-    else {
-      mm--;
-    }
-  }
-  if (getView(component) == SourceEvent.MONTH) {
-    yy--;
-  }
-  if (getView(component) == SourceEvent.YEAR) {
-    let yearRange = getInitEndYear(yy);
-    yy = yearRange.initYear - 1;
-  }
-  setDay(component, null);
-  setMonth(component, mm);
-  setYear(component, yy);
-  refresh(component);
-}
-function nextPage(component) {
-  let mm = getMonth(component);
-  let yy = getYear(component);
-  if (getView(component) == SourceEvent.DATE) {
-    if (mm > 10) {
-      mm = 0;
-      yy++;
-    }
-    else {
-      mm++;
-    }
-  }
-  if (getView(component) == SourceEvent.MONTH) {
-    yy++;
-  }
-  if (getView(component) == SourceEvent.YEAR) {
-    const yearRange = getInitEndYear(yy);
-    yy = yearRange.endYear + 1;
-  }
-  setDay(component, null);
-  setMonth(component, mm);
-  setYear(component, yy);
-  refresh(component);
-}
-function getInitEndYear(curYear) {
-  const initYear = curYear - (curYear % 10);
-  const endYear = initYear + 16 - 1;
-  return { initYear: initYear, endYear: endYear };
-}
-function changeView(component) {
-  setDay(component, null);
-  switch (getView(component)) {
-    case SourceEvent.DATE: {
-      setView(component, SourceEvent.MONTH);
-      break;
-    }
-    case SourceEvent.MONTH: {
-      setView(component, SourceEvent.YEAR);
-      break;
-    }
-    case SourceEvent.YEAR: {
-      setView(component, SourceEvent.DATE);
-      break;
-    }
-  }
-  refresh(component);
-}
-function refresh(component) {
-  component.refresh();
-}
-function onCalendarMonthYearItemClick(component, value) {
-  let d;
-  if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
-    d = new Date(value);
-  }
-  else {
-    d = new Date();
-  }
-  setMonth(component, d.getMonth());
-  setYear(component, d.getFullYear());
-  switch (getView(component)) {
-    case SourceEvent.MONTH: {
-      setView(component, SourceEvent.DATE);
-      break;
-    }
-    case SourceEvent.YEAR: {
-      setView(component, SourceEvent.MONTH);
-      break;
-    }
-  }
-  refresh(component);
-}
-function onCalendarItemClick(component, value) {
-  let d;
-  if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
-    d = new Date(value);
-  }
-  else {
-    d = new Date();
-  }
-  setValue(component, d);
-  component.onKupClick(component.rootElement.id, value);
-  refresh(component);
-}
+import { h } from '@stencil/core';
+import { FButton } from '../../../f-components/f-button/f-button';
+import { FButtonStyling, } from '../../../f-components/f-button/f-button-declarations';
+import { KupDateTimeFormatOptionsMonth, KupDatesFormats, } from '../../../managers/kup-dates/kup-dates-declarations';
+import { SourceEvent } from '../../kup-date-picker/kup-date-picker-declarations';
+import { fillString } from '../../../utils/utils';
+const dom = document.documentElement;
+export function prepareCalendar(component) {
+  const el = component.rootElement;
+  if (!el.kupData)
+    el.kupData = {};
+  if (component.data && component.data.options) {
+    const opts = component.data.options;
+    if (opts.resetStatus) {
+      el.kupData = {};
+      const obj = opts.initialValue;
+      if (opts.initialValue) {
+        if (obj && obj.k) {
+          setValue(component, new Date(obj.k));
+        }
+        else {
+          setValue(component, new Date(opts.initialValue));
+        }
+      }
+      if (opts.firstDayIndex)
+        el.kupData.firstDayIndex = opts.firstDayIndex;
+      opts.resetStatus = false;
+    }
+  }
+  if (!el.kupData.value)
+    setValue(component, new Date());
+  const months = dom.ketchup.dates.getMonthsAsString();
+  const curYear = getYear(component);
+  const curMonth = getMonth(component);
+  const yearRange = getInitEndYear(curYear);
+  const initYear = yearRange.initYear;
+  const endYear = yearRange.endYear;
+  let changeViewButtonLabel = 'not-set';
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      changeViewButtonLabel =
+        months[curMonth] + ', ' + curYear.toString();
+      break;
+    }
+    case SourceEvent.MONTH: {
+      changeViewButtonLabel = curYear.toString();
+      break;
+    }
+    case SourceEvent.YEAR: {
+      changeViewButtonLabel =
+        initYear.toString() + ' - ' + endYear.toString();
+      break;
+    }
+  }
+  const prevButtonProp = {
+    icon: 'chevron_left',
+    wrapperClass: 'prev-page',
+    onClick: () => prevPage(component),
+  };
+  const prevButtonComp = h(FButton, Object.assign({}, prevButtonProp));
+  const nextButtonProp = {
+    icon: 'chevron_right',
+    wrapperClass: 'next-page',
+    onClick: () => nextPage(component),
+  };
+  const nextButtonComp = h(FButton, Object.assign({}, nextButtonProp));
+  const changeViewButtonProp = {
+    wrapperClass: 'change-view-button',
+    styling: FButtonStyling.FLAT,
+    label: changeViewButtonLabel,
+    onClick: () => changeView(component),
+    id: 'change-view-button',
+  };
+  //text-transform:capitalize
+  return (h("div", { id: component.rootElement.id + '_calendar' }, h("div", { class: "section-1" }, h("div", { class: "sub-1 nav" }, prevButtonComp, h(FButton, Object.assign({}, changeViewButtonProp)), nextButtonComp)), h("div", { class: "section-2" }, createCalendar(component))));
+}
+function setValue(component, value) {
+  if (!!(value instanceof Date)) {
+    value = new Date();
+  }
+  const el = component.rootElement;
+  el.kupData.value = value;
+  el.kupData.day = el.kupData.value.getDate();
+  el.kupData.month = el.kupData.value.getMonth();
+  el.kupData.year = el.kupData.value.getFullYear();
+}
+function getValue(component) {
+  const el = component.rootElement;
+  if (el.kupData.value == null)
+    setValue(component, new Date());
+  return el.kupData.value;
+}
+function getDay(component) {
+  const el = component.rootElement;
+  if (el.kupData.day != null)
+    return el.kupData.day;
+  return null;
+}
+function getMonth(component) {
+  const el = component.rootElement;
+  if (el.kupData.month != null)
+    return el.kupData.month;
+  return null;
+}
+function getYear(component) {
+  const el = component.rootElement;
+  if (el.kupData.year != null)
+    return el.kupData.year;
+  return null;
+}
+function setDay(component, value) {
+  const el = component.rootElement;
+  el.kupData.day = value;
+}
+function setMonth(component, value) {
+  const el = component.rootElement;
+  el.kupData.month = value;
+}
+function setYear(component, value) {
+  const el = component.rootElement;
+  el.kupData.year = value;
+}
+function getFirstDayIndex(component) {
+  const el = component.rootElement;
+  if (el.kupData.firstDayIndex)
+    return el.kupData.firstDayIndex;
+  return 1;
+}
+function getView(component) {
+  const el = component.rootElement;
+  if (el.kupData.calendarView)
+    return el.kupData.calendarView;
+  return SourceEvent.DATE;
+}
+function setView(component, value) {
+  const el = component.rootElement;
+  el.kupData.calendarView = value;
+}
+function createCalendar(component) {
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      return createDaysCalendar(component);
+    }
+    case SourceEvent.MONTH: {
+      return createMonthsCalendar(component);
+    }
+    case SourceEvent.YEAR: {
+      return createYearsCalendar(component);
+    }
+  }
+}
+function createDaysCalendar(component) {
+  const days = dom.ketchup.dates.getDaysOfWeekAsString(getFirstDayIndex(component));
+  const selectedDate = getValue(component);
+  const selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  const thead = [];
+  const tbody = [];
+  for (let index = 0; index < days.length; index++) {
+    thead.push(h("th", null, h("span", { class: "item-text" }, days[index])));
+  }
+  const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
+  const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
+  const finish = false;
+  let currentDayIndex = getFirstDayIndex(component);
+  const firstMonthDayIndex = firstMonthDay.getDay();
+  let row = [];
+  let daysForRowAdded = 0;
+  while (!finish) {
+    if (currentDayIndex == firstMonthDayIndex) {
+      break;
+    }
+    row.push(h("td", { class: "item empty" }));
+    currentDayIndex++;
+    daysForRowAdded++;
+    if (currentDayIndex > 6) {
+      currentDayIndex = 0;
+    }
+  }
+  let dayCount = 1;
+  while (dayCount <= lastMonthDay.getDate()) {
+    for (let i = daysForRowAdded; i < 7; i++) {
+      let dayClass = 'item';
+      let dataIndex = {
+        'data-index': selectedYear.toString() +
+          '-' +
+          fillString((selectedMonth + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(dayCount.toString(), '0', 2, true),
+      };
+      if ((selectedDay != null && dayCount === selectedDay) ||
+        (dayCount === selectedDate.getDate() &&
+          selectedMonth === selectedDate.getMonth() &&
+          selectedYear === selectedDate.getFullYear())) {
+        dayClass += ' selected';
+      }
+      row.push(h("td", { class: dayClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarItemClick(component, dataIndex['data-index']);
+        } }), dayCount)));
+      dayCount++;
+      if (dayCount > lastMonthDay.getDate()) {
+        break;
+      }
+    }
+    if (row.length > 0) {
+      tbody.push(h("tr", null, row));
+      row = [];
+    }
+    daysForRowAdded = 0;
+  }
+  return (h("table", { class: "calendar" }, h("thead", null, thead), h("tbody", null, tbody)));
+}
+function createMonthsCalendar(component) {
+  const months = dom.ketchup.dates.getMonthsAsString(KupDateTimeFormatOptionsMonth.SHORT);
+  let selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  if (selectedDay == null)
+    selectedDay = 1;
+  const tbody = [];
+  let row = [];
+  let monthCount = 0;
+  while (monthCount < 12) {
+    for (let i = 0; i < 4; i++) {
+      let monthClass = 'item';
+      const dataIndex = {
+        'data-index': selectedYear.toString() +
+          '-' +
+          fillString((monthCount + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(selectedDay.toString(), '0', 2, true),
+      };
+      if (monthCount === selectedMonth) {
+        monthClass += ' selected';
+      }
+      row.push(h("td", { class: monthClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+        } }), months[monthCount])));
+      monthCount++;
+    }
+    if (row.length > 0) {
+      tbody.push(h("tr", null, row));
+      row = [];
+    }
+  }
+  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
+}
+function createYearsCalendar(component) {
+  let selectedDay = getDay(component);
+  const selectedMonth = getMonth(component);
+  const selectedYear = getYear(component);
+  if (selectedDay == null)
+    selectedDay = 1;
+  const yearRange = getInitEndYear(selectedYear);
+  const initYear = yearRange.initYear;
+  const endYear = yearRange.endYear;
+  const tbody = [];
+  let row = [];
+  let yearCount = initYear;
+  while (yearCount <= endYear) {
+    for (let i = 0; i < 4; i++) {
+      let yearClass = 'item';
+      let dataIndex = {
+        'data-index': yearCount.toString() +
+          '-' +
+          fillString((selectedMonth + 1).toString(), '0', 2, true) +
+          '-' +
+          fillString(selectedDay.toString(), '0', 2, true),
+      };
+      if (yearCount === selectedYear) {
+        yearClass += ' selected';
+      }
+      row.push(h("td", { class: yearClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+        } }), yearCount)));
+      yearCount++;
+    }
+    if (row.length > 0) {
+      tbody.push(h("tr", null, row));
+      row = [];
+    }
+  }
+  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
+}
+function prevPage(component) {
+  let mm = getMonth(component);
+  let yy = getYear(component);
+  if (getView(component) == SourceEvent.DATE) {
+    if (mm < 1) {
+      mm = 11;
+      yy--;
+    }
+    else {
+      mm--;
+    }
+  }
+  if (getView(component) == SourceEvent.MONTH) {
+    yy--;
+  }
+  if (getView(component) == SourceEvent.YEAR) {
+    let yearRange = getInitEndYear(yy);
+    yy = yearRange.initYear - 1;
+  }
+  setDay(component, null);
+  setMonth(component, mm);
+  setYear(component, yy);
+  refresh(component);
+}
+function nextPage(component) {
+  let mm = getMonth(component);
+  let yy = getYear(component);
+  if (getView(component) == SourceEvent.DATE) {
+    if (mm > 10) {
+      mm = 0;
+      yy++;
+    }
+    else {
+      mm++;
+    }
+  }
+  if (getView(component) == SourceEvent.MONTH) {
+    yy++;
+  }
+  if (getView(component) == SourceEvent.YEAR) {
+    const yearRange = getInitEndYear(yy);
+    yy = yearRange.endYear + 1;
+  }
+  setDay(component, null);
+  setMonth(component, mm);
+  setYear(component, yy);
+  refresh(component);
+}
+function getInitEndYear(curYear) {
+  const initYear = curYear - (curYear % 10);
+  const endYear = initYear + 16 - 1;
+  return { initYear: initYear, endYear: endYear };
+}
+function changeView(component) {
+  setDay(component, null);
+  switch (getView(component)) {
+    case SourceEvent.DATE: {
+      setView(component, SourceEvent.MONTH);
+      break;
+    }
+    case SourceEvent.MONTH: {
+      setView(component, SourceEvent.YEAR);
+      break;
+    }
+    case SourceEvent.YEAR: {
+      setView(component, SourceEvent.DATE);
+      break;
+    }
+  }
+  refresh(component);
+}
+function refresh(component) {
+  component.refresh();
+}
+function onCalendarMonthYearItemClick(component, value) {
+  let d;
+  if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
+    d = new Date(value);
+  }
+  else {
+    d = new Date();
+  }
+  setMonth(component, d.getMonth());
+  setYear(component, d.getFullYear());
+  switch (getView(component)) {
+    case SourceEvent.MONTH: {
+      setView(component, SourceEvent.DATE);
+      break;
+    }
+    case SourceEvent.YEAR: {
+      setView(component, SourceEvent.MONTH);
+      break;
+    }
+  }
+  refresh(component);
+}
+function onCalendarItemClick(component, value) {
+  let d;
+  if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
+    d = new Date(value);
+  }
+  else {
+    d = new Date();
+  }
+  setValue(component, d);
+  component.onKupClick(component.rootElement.id, value);
+  refresh(component);
+}