@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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

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

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

@@ -125,6 +125,24 @@ export function create5(component) {
       listArray[0] ? (h("div", { class: "section-2" },
         h("kup-list", Object.assign({ id: "list1" }, listArray[0])))) : null)));
 }
+/**
+ * 6th dialog card layout, a datatable or a spinner in its place.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create6(component) {
+  //Datatable
+  const datatableArray = component.data['datatable']
+    ? component.data['datatable']
+    : [];
+  //Dialog title
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  return (h("div", { class: `dialog-layout-${component.layoutNumber}` },
+    textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''),
+    h("div", { class: "section-1" }, datatableArray.length > 0 ? (h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0]))) : (h("kup-spinner", { active: true, dimensions: "7px", layout: 14 })))));
+}
 /**
  * Invoked by 4th layout to switch to the previous record of the original data table.
  * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).

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

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupCardCSSClasses, KupCardIds, KupCardSubEvents, } from './kup-card-declarations';
 import { KupColumnMenuIds } from '../../utils/kup-column-menu/kup-column-menu-declarations';
+import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
 /**
  * This function returns a list of components.
  * @param {GenericObject[]} compArray - Components' props.
@@ -57,7 +58,7 @@ export function compList(compArray, compType) {
 export function dialogHeader(title) {
   return (h("div", { id: KupCardIds.DRAG_HANDLE, class: KupCardCSSClasses.HEADER_BAR },
     title ? (h("div", { class: KupCardCSSClasses.DIALOG_TITLE }, title)) : null,
-    h(FImage, { sizeX: "1.25em", sizeY: "2em", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
+    h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, sizeX: "1.25em", sizeY: "100%", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
 }
 /**
  * Creates the bar used to expand/collapse the card.
@@ -180,4 +181,21 @@ export function layoutSpecificEvents(component, e) {
       e.detail.id === KupCardIds.PREVIOUS_ROW)) {
     component.refresh();
   }
+  /*-------------------------------------------------*/
+  /*      1 5t h   S t a n d a r d  L a y o u t     */
+  /*-------------------------------------------------*/
+  // Tab change: when a tab is clicked, the corresponding view will be activated while the others will become hidden.
+  if (root &&
+    e.type === KupCardSubEvents.BUTTON_CLICK &&
+    e.detail.id === KupCardIds.VIEW_SELECTOR) {
+    const views = root.querySelectorAll('.' + KupCardCSSClasses.CARD_VIEW);
+    if (e.detail.value === 'on') {
+      views[0].classList.remove(KupCardCSSClasses.VISIBLE);
+      views[1].classList.add(KupCardCSSClasses.VISIBLE);
+    }
+    else {
+      views[1].classList.remove(KupCardCSSClasses.VISIBLE);
+      views[0].classList.add(KupCardCSSClasses.VISIBLE);
+    }
+  }
 }