@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,690 +1,690 @@
-import { forceUpdate, getAssetPath, h, Host, } from '@stencil/core';
-import { Calendar, } from '@fullcalendar/core';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import listPlugin from '@fullcalendar/list';
-import timeGridPlugin from '@fullcalendar/timegrid';
-import enLocale from '@fullcalendar/core/locales/en-gb';
-import esLocale from '@fullcalendar/core/locales/es';
-import frLocale from '@fullcalendar/core/locales/fr';
-import itLocale from '@fullcalendar/core/locales/it';
-import plLocale from '@fullcalendar/core/locales/pl';
-import ruLocale from '@fullcalendar/core/locales/ru';
-import zhLocale from '@fullcalendar/core/locales/zh-cn';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { getColumnByName } from '../../utils/cell-utils';
-import { componentWrapperId } from '../../variables/GenericVariables';
-import { FButton } from '../../f-components/f-button/f-button';
-import { getProps, setProps } from '../../utils/utils';
-import { KupCalendarOptions, KupCalendarProps, KupCalendarViewTypes, } from './kup-calendar-declarations';
-import { FChip } from '../../f-components/f-chip/f-chip';
-import { FChipType, } from '../../f-components/f-chip/f-chip-declarations';
-import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { KupDatesLocales } from '../../managers/kup-dates/kup-dates-declarations';
-export class KupCalendar {
-  constructor() {
-    this.calendarContainer = null;
-    this.kupManager = kupManagerInstance();
-    this.navTitle = null;
-    this.resizeTimeout = null;
-    this.dateCol = null;
-    this.descrCol = null;
-    this.endCol = null;
-    this.iconCol = null;
-    this.imageCol = null;
-    this.startCol = null;
-    this.styleCol = null;
-    this.currentDate = null;
-    this.customStyle = '';
-    this.data = null;
-    this.hideNavigation = false;
-    this.viewType = KupCalendarViewTypes.MONTH;
-  }
-  /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  setCalendarData() {
-    if (this.calendar) {
-      this.calendar.destroy();
-    }
-    for (let index = 0; this.data && this.data.columns && index < this.data.columns.length; index++) {
-      const column = this.data.columns[index];
-      switch (column.calendarOption) {
-        case KupCalendarOptions.DATE:
-          this.dateCol = column.name;
-          break;
-        case KupCalendarOptions.DESCR:
-          this.descrCol = column.name;
-          break;
-        case KupCalendarOptions.END:
-          this.endCol = column.name;
-          break;
-        case KupCalendarOptions.ICON:
-          this.iconCol = column.name;
-          break;
-        case KupCalendarOptions.IMAGE:
-          this.imageCol = column.name;
-          break;
-        case KupCalendarOptions.START:
-          this.startCol = column.name;
-          break;
-        case KupCalendarOptions.STYLE:
-          this.styleCol = column.name;
-          break;
-      }
-    }
-    this.calendar = new Calendar(this.calendarContainer, {
-      dateClick: ({ date }) => {
-        this.kupCalendarDateClick.emit({
-          comp: this,
-          id: this.rootElement.id,
-          date: date,
-        });
-      },
-      editable: true,
-      eventClick: ({ event }) => {
-        this.kupCalendarEventClick.emit({
-          comp: this,
-          id: this.rootElement.id,
-          row: event.extendedProps.row,
-        });
-      },
-      eventDidMount: (info) => {
-        if (this.iconCol) {
-          const row = info.event.extendedProps.row;
-          const cell = row.cells[this.iconCol];
-          if (cell && cell.value) {
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('icon-wrapper');
-            cell.value.split(';').forEach((icon) => {
-              const span = document.createElement('span');
-              span.className = 'custom-icon';
-              const path = getAssetPath(`./assets/svg/${icon}.svg`);
-              span.style.mask = `url('${path}') no-repeat center`;
-              span.style.webkitMask = `url('${path}') no-repeat center`;
-              wrapper.appendChild(span);
-            });
-            info.el.appendChild(wrapper);
-          }
-        }
-        if (this.imageCol) {
-          const row = info.event.extendedProps.row;
-          const cell = row.cells[this.imageCol];
-          if (cell && cell.value) {
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('image-wrapper');
-            cell.value.split(';').forEach((icon) => {
-              const img = document.createElement('img');
-              img.src = icon;
-              wrapper.appendChild(img);
-            });
-            info.el.appendChild(wrapper);
-          }
-        }
-        if (this.styleCol) {
-          const row = info.event.extendedProps.row;
-          const cell = row.cells[this.styleCol];
-          const eventCell = info.el.children[0];
-          const parent = eventCell.parentElement;
-          if (cell && cell.style) {
-            Object.keys(cell.style).forEach((k) => {
-              parent.style[k] = cell.style[k];
-            });
-          }
-        }
-      },
-      eventDrop: ({ event, oldEvent }) => {
-        this.kupCalendarEventDrop.emit({
-          comp: this,
-          id: this.rootElement.id,
-          fromDate: {
-            start: oldEvent.start,
-            end: oldEvent.end,
-          },
-          toDate: {
-            start: event.start,
-            end: event.end,
-          },
-        });
-      },
-      events: this.getEvents(),
-      headerToolbar: false,
-      initialDate: this.currentDate,
-      initialView: this.viewType,
-      locale: this.getLocale(),
-      locales: [
-        esLocale,
-        frLocale,
-        itLocale,
-        plLocale,
-        ruLocale,
-        zhLocale,
-      ],
-      plugins: [
-        dayGridPlugin,
-        interactionPlugin,
-        listPlugin,
-        timeGridPlugin,
-      ],
-    });
-    this.calendar.render();
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupCalendarProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * This method is invoked by KupManager whenever the component changes size.
-   */
-  async resizeCallback() {
-    window.clearTimeout(this.resizeTimeout);
-    this.resizeTimeout = window.setTimeout(() => {
-      this.refresh();
-    }, 300);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupCalendarProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  changeView(view) {
-    this.viewType = view;
-    this.calendar.changeView(view);
-    this.emitNavEvent();
-  }
-  getColumns() {
-    if (this.data && this.data.rows) {
-      return this.data.columns;
-    }
-    return [];
-  }
-  getLocale() {
-    switch (this.kupManager.dates.locale) {
-      case KupDatesLocales.CHINESE:
-        return zhLocale;
-      case KupDatesLocales.FRENCH:
-        return frLocale;
-      case KupDatesLocales.ITALIAN:
-        return itLocale;
-      case KupDatesLocales.POLISH:
-        return plLocale;
-      case KupDatesLocales.RUSSIAN:
-        return ruLocale;
-      case KupDatesLocales.SPANISH:
-        return esLocale;
-      default:
-        return enLocale;
-    }
-  }
-  getRows() {
-    if (this.data && this.data.rows) {
-      return this.data.rows;
-    }
-    return [];
-  }
-  setChipProps() {
-    const props = {
-      data: [],
-      onClick: [],
-      type: FChipType.CHOICE,
-      wrapperClass: 'navigation__choice',
-    };
-    for (const key in KupCalendarViewTypes) {
-      const view = KupCalendarViewTypes[key];
-      const chipData = {
-        checked: this.viewType === view ? true : false,
-        value: this.kupManager.language.translate(KupLanguageGeneric[key]),
-        id: key,
-      };
-      props.data.push(chipData);
-      props.onClick.push(() => this.changeView(view));
-    }
-    return props;
-  }
-  getEvents() {
-    const isHourRange = this.startCol &&
-      this.endCol &&
-      getColumnByName(this.getColumns(), this.startCol) &&
-      getColumnByName(this.getColumns(), this.endCol);
-    return this.getRows().map((row) => {
-      const cell = row.cells[this.dateCol];
-      let startDate = this.kupManager.dates.toDayjs(cell.value);
-      let endDate = this.kupManager.dates.toDayjs(cell.value);
-      if (isHourRange) {
-        const startCell = row.cells[this.startCol];
-        const endCell = row.cells[this.endCol];
-        if (startCell && endCell) {
-          const dayjsStart = this.kupManager.dates.toDayjs(startCell.value, 'HH:mm:ss');
-          const dayjsEnd = this.kupManager.dates.toDayjs(endCell.value, 'HH:mm:ss');
-          startDate = startDate.hour(dayjsStart.hour());
-          startDate = startDate.minute(dayjsStart.minute());
-          startDate = startDate.second(dayjsStart.second());
-          endDate = endDate.hour(dayjsEnd.hour());
-          endDate = endDate.minute(dayjsEnd.minute());
-          endDate = endDate.second(dayjsEnd.second());
-        }
-      }
-      const el = {
-        allDay: isHourRange ? false : true,
-        end: endDate.toISOString(),
-        extendedProps: {
-          row,
-        },
-        start: startDate.toISOString(),
-        title: row.cells[this.descrCol].value,
-      };
-      return el;
-    });
-  }
-  onPrev() {
-    this.calendar.prev();
-    this.updateCalendar();
-    this.emitNavEvent();
-  }
-  onNext() {
-    this.calendar.next();
-    this.updateCalendar();
-    this.emitNavEvent();
-  }
-  onToday() {
-    this.calendar.today();
-    this.updateCalendar();
-  }
-  emitNavEvent() {
-    // see https://fullcalendar.io/docs/view-object
-    const to = this.kupManager.dates
-      .subtract(this.calendar.view.currentEnd, 1, 'day')
-      .toDate();
-    this.kupCalendarViewChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      from: this.calendar.view.currentStart,
-      to,
-    });
-  }
-  updateCalendar() {
-    if (this.calendar) {
-      this.calendar.setOption('locale', this.getLocale());
-      this.navTitle.innerText = this.calendar.currentData.viewTitle;
-      this.calendar.updateSize();
-    }
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.dates.register(this);
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.language.register(this);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.setCalendarData();
-    this.updateCalendar();
-    this.kupManager.resize.observe(this.rootElement);
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.updateCalendar();
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    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) {
-      this.calendar.destroy();
-    }
-    this.kupManager.dates.unregister(this);
-    this.kupManager.language.unregister(this);
-    this.kupManager.resize.unobserve(this.rootElement);
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-calendar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-calendar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-calendar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "currentDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD)."
-        },
-        "attribute": "current-date",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupCalendarData",
-          "resolved": "KupCalendarData",
-          "references": {
-            "KupCalendarData": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Actual data of the calendar."
-        },
-        "defaultValue": "null"
-      },
-      "hideNavigation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When disabled, the navigation toolbar won't be displayed."
-        },
-        "attribute": "hide-navigation",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "viewType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "KupCalendarViewTypes",
-          "resolved": "KupCalendarViewTypes.DAY | KupCalendarViewTypes.LIST | KupCalendarViewTypes.MONTH | KupCalendarViewTypes.WEEK",
-          "references": {
-            "KupCalendarViewTypes": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "KupCalendarViewTypes.MONTH"
-            }],
-          "text": "Type of the view."
-        },
-        "attribute": "view-type",
-        "reflect": false,
-        "defaultValue": "KupCalendarViewTypes.MONTH"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupCalendarEventClick",
-        "name": "kup-calendar-eventclick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "When an event is clicked."
-        },
-        "complexType": {
-          "original": "KupCalendarEventClickEventPayload",
-          "resolved": "KupCalendarEventClickEventPayload",
-          "references": {
-            "KupCalendarEventClickEventPayload": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        }
-      }, {
-        "method": "kupCalendarDateClick",
-        "name": "kup-calendar-dateclick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "When a date is clicked."
-        },
-        "complexType": {
-          "original": "KupCalendarDateClickEventPayload",
-          "resolved": "KupCalendarDateClickEventPayload",
-          "references": {
-            "KupCalendarDateClickEventPayload": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        }
-      }, {
-        "method": "kupCalendarEventDrop",
-        "name": "kup-calendar-eventdrop",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "When a date is dropped."
-        },
-        "complexType": {
-          "original": "KupCalendarEventDropEventPayload",
-          "resolved": "KupCalendarEventDropEventPayload",
-          "references": {
-            "KupCalendarEventDropEventPayload": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        }
-      }, {
-        "method": "kupCalendarViewChange",
-        "name": "kup-calendar-viewchange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "When the navigation change"
-        },
-        "complexType": {
-          "original": "KupCalendarViewChangeEventPayload",
-          "resolved": "KupCalendarViewChangeEventPayload",
-          "references": {
-            "KupCalendarViewChangeEventPayload": {
-              "location": "import",
-              "path": "./kup-calendar-declarations"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "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."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "resizeCallback": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is invoked by KupManager whenever the component changes size.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "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."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "setCalendarData"
-      }, {
-        "propName": "currentDate",
-        "methodName": "setCalendarData"
-      }];
-  }
-}
+import { forceUpdate, getAssetPath, h, Host, } from '@stencil/core';
+import { Calendar, } from '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import listPlugin from '@fullcalendar/list';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import enLocale from '@fullcalendar/core/locales/en-gb';
+import esLocale from '@fullcalendar/core/locales/es';
+import frLocale from '@fullcalendar/core/locales/fr';
+import itLocale from '@fullcalendar/core/locales/it';
+import plLocale from '@fullcalendar/core/locales/pl';
+import ruLocale from '@fullcalendar/core/locales/ru';
+import zhLocale from '@fullcalendar/core/locales/zh-cn';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getColumnByName } from '../../utils/cell-utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { FButton } from '../../f-components/f-button/f-button';
+import { getProps, setProps } from '../../utils/utils';
+import { KupCalendarOptions, KupCalendarProps, KupCalendarViewTypes, } from './kup-calendar-declarations';
+import { FChip } from '../../f-components/f-chip/f-chip';
+import { FChipType, } from '../../f-components/f-chip/f-chip-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { KupDatesLocales } from '../../managers/kup-dates/kup-dates-declarations';
+export class KupCalendar {
+  constructor() {
+    this.calendarContainer = null;
+    this.kupManager = kupManagerInstance();
+    this.navTitle = null;
+    this.resizeTimeout = null;
+    this.dateCol = null;
+    this.descrCol = null;
+    this.endCol = null;
+    this.iconCol = null;
+    this.imageCol = null;
+    this.startCol = null;
+    this.styleCol = null;
+    this.currentDate = null;
+    this.customStyle = '';
+    this.data = null;
+    this.hideNavigation = false;
+    this.viewType = KupCalendarViewTypes.MONTH;
+  }
+  /*-------------------------------------------------*/
+  /*                  W a t c h e r s                */
+  /*-------------------------------------------------*/
+  setCalendarData() {
+    if (this.calendar) {
+      this.calendar.destroy();
+    }
+    for (let index = 0; this.data && this.data.columns && index < this.data.columns.length; index++) {
+      const column = this.data.columns[index];
+      switch (column.calendarOption) {
+        case KupCalendarOptions.DATE:
+          this.dateCol = column.name;
+          break;
+        case KupCalendarOptions.DESCR:
+          this.descrCol = column.name;
+          break;
+        case KupCalendarOptions.END:
+          this.endCol = column.name;
+          break;
+        case KupCalendarOptions.ICON:
+          this.iconCol = column.name;
+          break;
+        case KupCalendarOptions.IMAGE:
+          this.imageCol = column.name;
+          break;
+        case KupCalendarOptions.START:
+          this.startCol = column.name;
+          break;
+        case KupCalendarOptions.STYLE:
+          this.styleCol = column.name;
+          break;
+      }
+    }
+    this.calendar = new Calendar(this.calendarContainer, {
+      dateClick: ({ date }) => {
+        this.kupCalendarDateClick.emit({
+          comp: this,
+          id: this.rootElement.id,
+          date: date,
+        });
+      },
+      editable: true,
+      eventClick: ({ event }) => {
+        this.kupCalendarEventClick.emit({
+          comp: this,
+          id: this.rootElement.id,
+          row: event.extendedProps.row,
+        });
+      },
+      eventDidMount: (info) => {
+        if (this.iconCol) {
+          const row = info.event.extendedProps.row;
+          const cell = row.cells[this.iconCol];
+          if (cell && cell.value) {
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('icon-wrapper');
+            cell.value.split(';').forEach((icon) => {
+              const span = document.createElement('span');
+              span.className = 'custom-icon';
+              const path = getAssetPath(`./assets/svg/${icon}.svg`);
+              span.style.mask = `url('${path}') no-repeat center`;
+              span.style.webkitMask = `url('${path}') no-repeat center`;
+              wrapper.appendChild(span);
+            });
+            info.el.appendChild(wrapper);
+          }
+        }
+        if (this.imageCol) {
+          const row = info.event.extendedProps.row;
+          const cell = row.cells[this.imageCol];
+          if (cell && cell.value) {
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('image-wrapper');
+            cell.value.split(';').forEach((icon) => {
+              const img = document.createElement('img');
+              img.src = icon;
+              wrapper.appendChild(img);
+            });
+            info.el.appendChild(wrapper);
+          }
+        }
+        if (this.styleCol) {
+          const row = info.event.extendedProps.row;
+          const cell = row.cells[this.styleCol];
+          const eventCell = info.el.children[0];
+          const parent = eventCell.parentElement;
+          if (cell && cell.style) {
+            Object.keys(cell.style).forEach((k) => {
+              parent.style[k] = cell.style[k];
+            });
+          }
+        }
+      },
+      eventDrop: ({ event, oldEvent }) => {
+        this.kupCalendarEventDrop.emit({
+          comp: this,
+          id: this.rootElement.id,
+          fromDate: {
+            start: oldEvent.start,
+            end: oldEvent.end,
+          },
+          toDate: {
+            start: event.start,
+            end: event.end,
+          },
+        });
+      },
+      events: this.getEvents(),
+      headerToolbar: false,
+      initialDate: this.currentDate,
+      initialView: this.viewType,
+      locale: this.getLocale(),
+      locales: [
+        esLocale,
+        frLocale,
+        itLocale,
+        plLocale,
+        ruLocale,
+        zhLocale,
+      ],
+      plugins: [
+        dayGridPlugin,
+        interactionPlugin,
+        listPlugin,
+        timeGridPlugin,
+      ],
+    });
+    this.calendar.render();
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupCalendarProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * This method is invoked by KupManager whenever the component changes size.
+   */
+  async resizeCallback() {
+    window.clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = window.setTimeout(() => {
+      this.refresh();
+    }, 300);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupCalendarProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  changeView(view) {
+    this.viewType = view;
+    this.calendar.changeView(view);
+    this.emitNavEvent();
+  }
+  getColumns() {
+    if (this.data && this.data.rows) {
+      return this.data.columns;
+    }
+    return [];
+  }
+  getLocale() {
+    switch (this.kupManager.dates.locale) {
+      case KupDatesLocales.CHINESE:
+        return zhLocale;
+      case KupDatesLocales.FRENCH:
+        return frLocale;
+      case KupDatesLocales.ITALIAN:
+        return itLocale;
+      case KupDatesLocales.POLISH:
+        return plLocale;
+      case KupDatesLocales.RUSSIAN:
+        return ruLocale;
+      case KupDatesLocales.SPANISH:
+        return esLocale;
+      default:
+        return enLocale;
+    }
+  }
+  getRows() {
+    if (this.data && this.data.rows) {
+      return this.data.rows;
+    }
+    return [];
+  }
+  setChipProps() {
+    const props = {
+      data: [],
+      onClick: [],
+      type: FChipType.CHOICE,
+      wrapperClass: 'navigation__choice',
+    };
+    for (const key in KupCalendarViewTypes) {
+      const view = KupCalendarViewTypes[key];
+      const chipData = {
+        checked: this.viewType === view ? true : false,
+        value: this.kupManager.language.translate(KupLanguageGeneric[key]),
+        id: key,
+      };
+      props.data.push(chipData);
+      props.onClick.push(() => this.changeView(view));
+    }
+    return props;
+  }
+  getEvents() {
+    const isHourRange = this.startCol &&
+      this.endCol &&
+      getColumnByName(this.getColumns(), this.startCol) &&
+      getColumnByName(this.getColumns(), this.endCol);
+    return this.getRows().map((row) => {
+      const cell = row.cells[this.dateCol];
+      let startDate = this.kupManager.dates.toDayjs(cell.value);
+      let endDate = this.kupManager.dates.toDayjs(cell.value);
+      if (isHourRange) {
+        const startCell = row.cells[this.startCol];
+        const endCell = row.cells[this.endCol];
+        if (startCell && endCell) {
+          const dayjsStart = this.kupManager.dates.toDayjs(startCell.value, 'HH:mm:ss');
+          const dayjsEnd = this.kupManager.dates.toDayjs(endCell.value, 'HH:mm:ss');
+          startDate = startDate.hour(dayjsStart.hour());
+          startDate = startDate.minute(dayjsStart.minute());
+          startDate = startDate.second(dayjsStart.second());
+          endDate = endDate.hour(dayjsEnd.hour());
+          endDate = endDate.minute(dayjsEnd.minute());
+          endDate = endDate.second(dayjsEnd.second());
+        }
+      }
+      const el = {
+        allDay: isHourRange ? false : true,
+        end: endDate.toISOString(),
+        extendedProps: {
+          row,
+        },
+        start: startDate.toISOString(),
+        title: row.cells[this.descrCol].value,
+      };
+      return el;
+    });
+  }
+  onPrev() {
+    this.calendar.prev();
+    this.updateCalendar();
+    this.emitNavEvent();
+  }
+  onNext() {
+    this.calendar.next();
+    this.updateCalendar();
+    this.emitNavEvent();
+  }
+  onToday() {
+    this.calendar.today();
+    this.updateCalendar();
+  }
+  emitNavEvent() {
+    // see https://fullcalendar.io/docs/view-object
+    const to = this.kupManager.dates
+      .subtract(this.calendar.view.currentEnd, 1, 'day')
+      .toDate();
+    this.kupCalendarViewChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      from: this.calendar.view.currentStart,
+      to,
+    });
+  }
+  updateCalendar() {
+    if (this.calendar) {
+      this.calendar.setOption('locale', this.getLocale());
+      this.navTitle.innerText = this.calendar.getCurrentData().viewTitle;
+      this.calendar.updateSize();
+    }
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.dates.register(this);
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.language.register(this);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.setCalendarData();
+    this.updateCalendar();
+    this.kupManager.resize.observe(this.rootElement);
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    this.updateCalendar();
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    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) {
+      this.calendar.destroy();
+    }
+    this.kupManager.dates.unregister(this);
+    this.kupManager.language.unregister(this);
+    this.kupManager.resize.unobserve(this.rootElement);
+    this.kupManager.theme.unregister(this);
+  }
+  static get is() { return "kup-calendar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-calendar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-calendar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "currentDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD)."
+        },
+        "attribute": "current-date",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupCalendarData",
+          "resolved": "KupCalendarData",
+          "references": {
+            "KupCalendarData": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Actual data of the calendar."
+        },
+        "defaultValue": "null"
+      },
+      "hideNavigation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When disabled, the navigation toolbar won't be displayed."
+        },
+        "attribute": "hide-navigation",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "viewType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "KupCalendarViewTypes",
+          "resolved": "KupCalendarViewTypes.DAY | KupCalendarViewTypes.LIST | KupCalendarViewTypes.MONTH | KupCalendarViewTypes.WEEK",
+          "references": {
+            "KupCalendarViewTypes": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "KupCalendarViewTypes.MONTH"
+            }],
+          "text": "Type of the view."
+        },
+        "attribute": "view-type",
+        "reflect": false,
+        "defaultValue": "KupCalendarViewTypes.MONTH"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupCalendarEventClick",
+        "name": "kup-calendar-eventclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When an event is clicked."
+        },
+        "complexType": {
+          "original": "KupCalendarEventClickEventPayload",
+          "resolved": "KupCalendarEventClickEventPayload",
+          "references": {
+            "KupCalendarEventClickEventPayload": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        }
+      }, {
+        "method": "kupCalendarDateClick",
+        "name": "kup-calendar-dateclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When a date is clicked."
+        },
+        "complexType": {
+          "original": "KupCalendarDateClickEventPayload",
+          "resolved": "KupCalendarDateClickEventPayload",
+          "references": {
+            "KupCalendarDateClickEventPayload": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        }
+      }, {
+        "method": "kupCalendarEventDrop",
+        "name": "kup-calendar-eventdrop",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When a date is dropped."
+        },
+        "complexType": {
+          "original": "KupCalendarEventDropEventPayload",
+          "resolved": "KupCalendarEventDropEventPayload",
+          "references": {
+            "KupCalendarEventDropEventPayload": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        }
+      }, {
+        "method": "kupCalendarViewChange",
+        "name": "kup-calendar-viewchange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When the navigation change"
+        },
+        "complexType": {
+          "original": "KupCalendarViewChangeEventPayload",
+          "resolved": "KupCalendarViewChangeEventPayload",
+          "references": {
+            "KupCalendarViewChangeEventPayload": {
+              "location": "import",
+              "path": "./kup-calendar-declarations"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "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."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "resizeCallback": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is invoked by KupManager whenever the component changes size.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "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."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "setCalendarData"
+      }, {
+        "propName": "currentDate",
+        "methodName": "setCalendarData"
+      }];
+  }
+}