@sme.up/ketchup 4.2.0-SNAPSHOT → 4.2.0

package/dist/collection/components/kup-card/builtin/kup-card-calendar.js

@@ -0,0 +1,458 @@
+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 '../../../utils/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) {
+  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);
+}