@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -22,707 +22,707 @@ 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.editableEvents = true;
-    this.viewType = KupCalendarViewTypes.MONTH;
-  }
-  /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  setCalendarData() {
-    if (!this.calendarContainer) {
-      return;
+    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.editableEvents = true;
+        this.viewType = KupCalendarViewTypes.MONTH;
     }
-    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);
-          }
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    setCalendarData() {
+        if (!this.calendarContainer) {
+            return;
         }
-        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.calendar) {
+            this.calendar.destroy();
         }
-        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];
-            });
-          }
+        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;
+            }
         }
-      },
-      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,
-          },
+        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,
+            ],
         });
-      },
-      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;
+        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);
     }
-    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;
+    /**
+     * This method is invoked by KupManager whenever the component changes size.
+     */
+    async resizeCallback() {
+        window.clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = window.setTimeout(() => {
+            this.refresh();
+        }, 300);
     }
-  }
-  getRows() {
-    if (this.data && this.data.rows) {
-      return this.data.rows;
+    /**
+     * 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);
     }
-    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));
+    /*-------------------------------------------------*/
+    /*           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();
     }
-    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());
+    getColumns() {
+        if (this.data && this.data.rows) {
+            return this.data.columns;
         }
-      }
-      const el = {
-        allDay: isHourRange ? false : true,
-        editable: this.editableEvents,
-        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();
+        return [];
     }
-  }
-  /*-------------------------------------------------*/
-  /*          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();
+    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;
+        }
     }
-    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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarData"
-            }
-          }
-        },
-        "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"
-      },
-      "editableEvents": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "true"
-            }],
-          "text": "When true, events are editable."
-        },
-        "attribute": "editable-events",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarViewTypes"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarEventClickEventPayload"
-            }
-          }
+    getRows() {
+        if (this.data && this.data.rows) {
+            return this.data.rows;
         }
-      }, {
-        "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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarDateClickEventPayload"
-            }
-          }
+        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));
         }
-      }, {
-        "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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarEventDropEventPayload"
+        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,
+                editable: this.editableEvents,
+                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();
         }
-      }, {
-        "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",
-              "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarViewChangeEventPayload"
-            }
-          }
+    }
+    /*-------------------------------------------------*/
+    /*          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();
         }
-      }];
-  }
-  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",
-              "id": "global::Promise"
+        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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarData"
+                        }
+                    }
+                },
+                "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"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "editableEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "When true, events are editable."
+                },
+                "attribute": "editable-events",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarViewTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "KupCalendarViewTypes.MONTH"
+                        }],
+                    "text": "Type of the view."
+                },
+                "attribute": "view-type",
+                "reflect": false,
+                "defaultValue": "KupCalendarViewTypes.MONTH"
             }
-          },
-          "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."
+        };
+    }
+    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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarEventClickEventPayload"
+                        }
+                    }
+                }
             }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "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",
-              "id": "global::Promise"
-            }
-          },
-          "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",
-              "id": "global::Promise"
+                "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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarDateClickEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarEventDropEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-calendar/kup-calendar-declarations.ts::KupCalendarViewChangeEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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."
+                        }]
+                }
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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."
+                        }]
+                }
             }
-          },
-          "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"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "setCalendarData"
+            }, {
+                "propName": "currentDate",
+                "methodName": "setCalendarData"
+            }];
+    }
 }