@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, Watch, } from '@stencil/core';
 import { Calendar, } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
@@ -11,21 +11,26 @@ 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 '../../utils/kup-manager/kup-manager';
+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 { KupCalendarProps, KupCalendarViewTypes, } from './kup-calendar-declarations';
+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 '../../utils/kup-language/kup-language-declarations';
-import { KupDatesLocales } from '../../utils/kup-dates/kup-dates-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { KupDatesLocales } from '../../managers/kup-dates/kup-dates-declarations';
 export class KupCalendar {
   constructor() {
     /*-------------------------------------------------*/
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
+    /**
+     * Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD).
+     * @default null
+     */
+    this.currentDate = null;
     /**
      * Custom style of the component.
      * @default ""
@@ -37,51 +42,11 @@ export class KupCalendar {
      * @default null
      */
     this.data = null;
-    /**
-     * Column containing events' dates.
-     * @default null
-     */
-    this.dateCol = null;
-    /**
-     * Column containing events' descriptions.
-     * @default null
-     */
-    this.descrCol = null;
-    /**
-     * Column containing events' ending time.
-     * @default null
-     */
-    this.endCol = null;
     /**
      * When disabled, the navigation toolbar won't be displayed.
      * @default false
      */
     this.hideNavigation = false;
-    /**
-     * Column containing events' icons. There can be multiple icons, divided by ";".
-     * @default null
-     */
-    this.iconCol = null;
-    /**
-     * Column containing events' images. There can be multiple images, divided by ";".
-     * @default null
-     */
-    this.imageCol = null;
-    /**
-     * Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD).
-     * @default null
-     */
-    this.initialDate = null;
-    /**
-     * Column containing events' starting time.
-     * @default null
-     */
-    this.startCol = null;
-    /**
-     * Column containing events' CSS styles.
-     * @default null
-     */
-    this.styleCol = null;
     /**
      * Type of the view.
      * @default KupCalendarViewTypes.MONTH
@@ -91,6 +56,142 @@ export class KupCalendar {
     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;
+  }
+  /*-------------------------------------------------*/
+  /*                  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           */
@@ -173,9 +274,9 @@ export class KupCalendar {
     for (const key in KupCalendarViewTypes) {
       const view = KupCalendarViewTypes[key];
       const chipData = {
-        value: key,
-        label: this.kupManager.language.translate(KupLanguageGeneric[key]),
         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));
@@ -236,7 +337,7 @@ export class KupCalendar {
     const to = this.kupManager.dates
       .subtract(this.calendar.view.currentEnd, 1, 'day')
       .toDate();
-    this.kupCalendarViewChanged.emit({
+    this.kupCalendarViewChange.emit({
       comp: this,
       id: this.rootElement.id,
       from: this.calendar.view.currentStart,
@@ -254,105 +355,13 @@ export class KupCalendar {
   /*          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.calendar = new Calendar(this.calendarContainer, {
-      dateClick: ({ date }) => {
-        this.kupCalendarDateClicked.emit({
-          comp: this,
-          id: this.rootElement.id,
-          date: date,
-        });
-      },
-      editable: true,
-      eventClick: ({ event }) => {
-        this.kupCalendarEventClicked.emit({
-          comp: this,
-          id: this.rootElement.id,
-          row: event.extendedProps.row,
-        });
-      },
-      eventDidMount: (info) => {
-        if (this.styleCol) {
-          const row = info.event.extendedProps.row;
-          const cell = row.cells[this.styleCol];
-          const eventCell = info.el.children[0];
-          if (cell && cell.style) {
-            Object.keys(cell.style).forEach((k) => {
-              eventCell.style[k] = cell.style[k];
-            });
-          }
-        }
-        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);
-          }
-        }
-      },
-      eventDrop: ({ event, oldEvent }) => {
-        this.kupCalendarEventDropped.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.initialDate,
-      initialView: this.viewType,
-      locale: this.getLocale(),
-      locales: [
-        esLocale,
-        frLocale,
-        itLocale,
-        plLocale,
-        ruLocale,
-        zhLocale,
-      ],
-      plugins: [
-        dayGridPlugin,
-        interactionPlugin,
-        listPlugin,
-        timeGridPlugin,
-      ],
-    });
-    this.calendar.render();
+    this.setCalendarData();
     this.updateCalendar();
     this.kupManager.resize.observe(this.rootElement);
     this.kupManager.debug.logLoad(this, true);
@@ -386,6 +395,7 @@ export class KupCalendar {
     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);
@@ -399,55 +409,7 @@ export class KupCalendar {
     "$": ["kup-calendar.css"]
   }; }
   static get properties() { return {
-    "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": "TableData",
-        "resolved": "TableData",
-        "references": {
-          "TableData": {
-            "location": "import",
-            "path": "../kup-data-table/kup-data-table-declarations"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Actual data of the calendar."
-      },
-      "defaultValue": "null"
-    },
-    "dateCol": {
+    "currentDate": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -462,13 +424,13 @@ export class KupCalendar {
             "name": "default",
             "text": "null"
           }],
-        "text": "Column containing events' dates."
+        "text": "Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD)."
       },
-      "attribute": "date-col",
+      "attribute": "current-date",
       "reflect": false,
       "defaultValue": "null"
     },
-    "descrCol": {
+    "customStyle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -481,21 +443,29 @@ export class KupCalendar {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "null"
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
-        "text": "Column containing events' descriptions."
+        "text": "Custom style of the component."
       },
-      "attribute": "descr-col",
+      "attribute": "custom-style",
       "reflect": false,
-      "defaultValue": "null"
+      "defaultValue": "''"
     },
-    "endCol": {
-      "type": "string",
+    "data": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "KupCalendarData",
+        "resolved": "KupCalendarData",
+        "references": {
+          "KupCalendarData": {
+            "location": "import",
+            "path": "./kup-calendar-declarations"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -504,10 +474,8 @@ export class KupCalendar {
             "name": "default",
             "text": "null"
           }],
-        "text": "Column containing events' ending time."
+        "text": "Actual data of the calendar."
       },
-      "attribute": "end-col",
-      "reflect": false,
       "defaultValue": "null"
     },
     "hideNavigation": {
@@ -531,111 +499,6 @@ export class KupCalendar {
       "reflect": false,
       "defaultValue": "false"
     },
-    "iconCol": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Column containing events' icons. There can be multiple icons, divided by \";\"."
-      },
-      "attribute": "icon-col",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "imageCol": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Column containing events' images. There can be multiple images, divided by \";\"."
-      },
-      "attribute": "image-col",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "initialDate": {
-      "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": "initial-date",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "startCol": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Column containing events' starting time."
-      },
-      "attribute": "start-col",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "styleCol": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Column containing events' CSS styles."
-      },
-      "attribute": "style-col",
-      "reflect": false,
-      "defaultValue": "null"
-    },
     "viewType": {
       "type": "string",
       "mutable": true,
@@ -664,7 +527,7 @@ export class KupCalendar {
     }
   }; }
   static get events() { return [{
-      "method": "kupCalendarEventClicked",
+      "method": "kupCalendarEventClick",
       "name": "kup-calendar-eventclick",
       "bubbles": true,
       "cancelable": false,
@@ -684,7 +547,7 @@ export class KupCalendar {
         }
       }
     }, {
-      "method": "kupCalendarDateClicked",
+      "method": "kupCalendarDateClick",
       "name": "kup-calendar-dateclick",
       "bubbles": true,
       "cancelable": false,
@@ -704,7 +567,7 @@ export class KupCalendar {
         }
       }
     }, {
-      "method": "kupCalendarEventDropped",
+      "method": "kupCalendarEventDrop",
       "name": "kup-calendar-eventdrop",
       "bubbles": true,
       "cancelable": false,
@@ -724,7 +587,7 @@ export class KupCalendar {
         }
       }
     }, {
-      "method": "kupCalendarViewChanged",
+      "method": "kupCalendarViewChange",
       "name": "kup-calendar-viewchange",
       "bubbles": true,
       "cancelable": false,
@@ -840,4 +703,11 @@ export class KupCalendar {
     }
   }; }
   static get elementRef() { return "rootElement"; }
+  static get watchers() { return [{
+      "propName": "data",
+      "methodName": "setCalendarData"
+    }, {
+      "propName": "currentDate",
+      "methodName": "setCalendarData"
+    }]; }
 }

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

@@ -0,0 +1,38 @@
+import { h } from '@stencil/core';
+import { KupCardCSSClasses } from '../kup-card-declarations';
+import { prepareCalendar } from './kup-card-calendar';
+import { prepareClock } from './kup-card-clock';
+import { prepareColumnDropMenu } from './kup-card-column-drop-menu';
+/**
+ * 1st built-in layout, calendar view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st built-in layout virtual node.
+ */
+export function create1(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareCalendar(component)));
+}
+/**
+ * 2nd built-in layout, clock view.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 2st built-in layout virtual node.
+ */
+export function create2(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareClock(component)));
+}
+/**
+ * 3rd built-in layout, column drop menu - used in data table when a column is dropped onto another one.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 3rd built-in layout virtual node.
+ */
+export function create3(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareColumnDropMenu(component)));
+}
+/**
+ * 4th built-in layout, color picker.
+ * This layout is rendered after the render cycle completes.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 4th built-in layout virtual node.
+ */
+export function create4(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }));
+}

package/dist/collection/components/kup-card/{builtin → built-in}/kup-card-calendar.js

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { FButton } from '../../../f-components/f-button/f-button';
 import { FButtonStyling, } from '../../../f-components/f-button/f-button-declarations';
-import { KupDatesFormats } from '../../../utils/kup-dates/kup-dates-declarations';
+import { KupDatesFormats } from '../../../managers/kup-dates/kup-dates-declarations';
 import { DateTimeFormatOptionsMonth, getMonthsAsStringByLocale, } from '../../../utils/utils';
 import { SourceEvent } from '../../kup-date-picker/kup-date-picker-declarations';
 const dom = document.documentElement;