@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, forceUpdate, getAssetPath, h, Method, Prop, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, } from '@stencil/core';
 import { Calendar, } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
@@ -365,20 +365,22 @@ export class KupCalendar {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    return (h("div", { id: componentWrapperId },
-      h("div", { class: "navigation" },
-        !this.hideNavigation ? (h("div", { class: "navigation__left" },
-          h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }),
-          h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }),
-          h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null,
-        h("div", { class: `navigation__title ${this.hideNavigation
-            ? 'navigation__title--centered'
-            : ''}`, ref: (el) => {
-            this.navTitle = el;
-          } }),
-        !this.hideNavigation ? (h("div", { class: "navigation__right" },
-          h(FChip, Object.assign({}, this.setChipProps())))) : null),
-      h("div", { class: "calendar", ref: (el) => (this.calendarContainer = el) })));
+    return (h(Host, null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId },
+        h("div", { class: "navigation" },
+          !this.hideNavigation ? (h("div", { class: "navigation__left" },
+            h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }),
+            h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }),
+            h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null,
+          h("div", { class: `navigation__title ${this.hideNavigation
+              ? 'navigation__title--centered'
+              : ''}`, ref: (el) => {
+              this.navTitle = el;
+            } }),
+          !this.hideNavigation ? (h("div", { class: "navigation__right" },
+            h(FChip, Object.assign({}, this.setChipProps())))) : null),
+        h("div", { class: "calendar", ref: (el) => (this.calendarContainer = el) }))));
   }
   disconnectedCallback() {
     if (this.calendar) {
@@ -409,11 +411,11 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -438,8 +440,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Actual data of the calendar."
       },
@@ -457,8 +459,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' dates."
       },
@@ -478,8 +480,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' descriptions."
       },
@@ -499,8 +501,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' ending time."
       },
@@ -520,8 +522,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When disabled, the navigation toolbar won't be displayed."
       },
@@ -541,8 +543,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' icons. There can be multiple icons, divided by \";\"."
       },
@@ -562,8 +564,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' images. There can be multiple images, divided by \";\"."
       },
@@ -583,8 +585,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD)."
       },
@@ -604,8 +606,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' starting time."
       },
@@ -625,8 +627,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' CSS styles."
       },
@@ -651,8 +653,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupCalendarViewTypes.MONTH",
-            "name": "default"
+            "name": "default",
+            "text": "KupCalendarViewTypes.MONTH"
           }],
         "text": "Type of the view."
       },
@@ -748,8 +750,8 @@ export class KupCalendar {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -812,8 +814,8 @@ export class KupCalendar {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],

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

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { KupCardCSSClasses } from '../kup-card-declarations';
+import { prepareCalendar } from './kup-card-calendar';
+import { prepareClock } from './kup-card-clock';
+/**
+ * 1st builtin card layout, calendar view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st builtin layout virtual node.
+ */
+export function create1(component) {
+  return (h("div", { class: `builtin-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILTIN_CARD}` }, prepareCalendar(component)));
+}
+/**
+ * 2st builtin card layout, time view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 2st builtin layout virtual node.
+ */
+export function create2(component) {
+  return (h("div", { class: `builtin-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILTIN_CARD}` }, prepareClock(component)));
+}

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);
+}