@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -0,0 +1,321 @@
+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 { KupCardBuiltinClockElements, KupCardCSSClasses, } from '../kup-card-declarations';
+const dom = document.documentElement;
+export function prepareClock(component) {
+  const el = component.rootElement;
+  el.kupData = {};
+  if (component.data && component.data.options) {
+    const opts = component.data.options;
+    const obj = opts.initialValue;
+    if (opts.initialValue) {
+      if (obj && obj.k)
+        el.kupData.value = obj.k;
+      else
+        el.kupData.value = opts.initialValue;
+    }
+    if (opts.manageSeconds != null)
+      el.kupData.manageSeconds = opts.manageSeconds;
+    if (opts.hoursActive != null)
+      el.kupData.hoursActive = opts.hoursActive;
+    if (opts.minutesActive != null)
+      el.kupData.minutesActive = opts.minutesActive;
+    if (opts.secondsActive != null)
+      el.kupData.secondsActive = opts.secondsActive;
+  }
+  else {
+    el.kupData.hoursActive = true;
+  }
+  return prepTimeArea(component);
+}
+function isManageSeconds(component) {
+  const el = component.rootElement;
+  if (el.kupData.manageSeconds != null)
+    return el.kupData.manageSeconds;
+  return false;
+}
+function getValue(component) {
+  const el = component.rootElement;
+  if (el.kupData.value)
+    return el.kupData.value;
+  return '';
+}
+function setValue(component, value) {
+  const el = component.rootElement;
+  el.kupData.value = value;
+}
+function getHoursActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.hoursActive != null)
+    return el.kupData.hoursActive;
+  return false;
+}
+function getMinutesActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.minutesActive != null)
+    return el.kupData.minutesActive;
+  return false;
+}
+function getSecondsActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.secondsActive != null)
+    return el.kupData.secondsActive;
+  return false;
+}
+function setElement(component, elem) {
+  if (elem) {
+    const el = component.rootElement;
+    el.kupData[elem.id] = elem;
+  }
+}
+function getElement(component, elemId) {
+  return component.rootElement.shadowRoot.getElementById(elemId);
+}
+function prepTimeArea(component) {
+  return (h("div", { id: "clock-div", onBlur: (e) => {
+      if (!isRelatedTargetInThisComponent(e, component)) {
+        onKupBlur(component);
+      }
+    } }, createClock(component)));
+}
+function onKupClockItemClick(e, component, value) {
+  if (e != null) {
+    if (value == null) {
+      value = e.detail.selected.value;
+    }
+  }
+  setClockValueSelected(component, value);
+  component.onKupClick(component.rootElement.id, value);
+}
+function setClockValueSelected(component, newValue) {
+  if (newValue == null) {
+    newValue = getValue(component);
+  }
+  if (newValue == null) {
+    return;
+  }
+  setValue(component, newValue);
+}
+function isRelatedTargetInThisComponent(e, component) {
+  if (!e.relatedTarget) {
+    return false;
+  }
+  let id = e.relatedTarget.id;
+  if (id == null || id.trim() == '') {
+    return false;
+  }
+  if (id == getElement(component, KupCardBuiltinClockElements.CLOCK).id) {
+    return true;
+  }
+  let idConc = '#clock-div#confirm#';
+  return idConc.indexOf('#' + id + '#') >= 0;
+}
+function onKupBlur(component) {
+  component.onKupClick(component.rootElement.id, getValue(component));
+}
+function createClock(component) {
+  let selectedTime;
+  if (getValue(component)) {
+    selectedTime = dom.ketchup.dates.toDate(getValue(component), isManageSeconds(component)
+      ? KupDatesFormats.ISO_TIME
+      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
+  }
+  else {
+    selectedTime = new Date();
+  }
+  let hh = selectedTime.getHours().toString();
+  let mm = selectedTime.getMinutes().toString();
+  if (hh.length === 1) {
+    hh = '0' + hh;
+  }
+  if (mm.length === 1) {
+    mm = '0' + mm;
+  }
+  let ss = '';
+  if (isManageSeconds(component)) {
+    ss = selectedTime.getSeconds().toString();
+    if (ss.length === 1) {
+      ss = '0' + ss;
+    }
+  }
+  let seconds;
+  let time = [
+    h("span", { id: KupCardBuiltinClockElements.HOURS, class: `h ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, true, false, false);
+        switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+      }, innerHTML: hh }),
+    ':',
+    h("span", { id: KupCardBuiltinClockElements.MINUTES, class: `m ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, false, true, false);
+        switchView(component, KupCardBuiltinClockElements.MINUTES, KupCardBuiltinClockElements.MINUTESCIRCLE);
+      }, innerHTML: mm }),
+  ];
+  if (isManageSeconds(component)) {
+    seconds = (h("div", { id: KupCardBuiltinClockElements.SECONDSCIRCLE, class: `circle seconds ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss, component),
+      h("div", { class: "mid" })));
+    time.push(':', h("span", { id: KupCardBuiltinClockElements.SECONDS, class: `s ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, false, false, true);
+        switchView(component, KupCardBuiltinClockElements.SECONDS, KupCardBuiltinClockElements.SECONDSCIRCLE);
+      }, innerHTML: ss }));
+  }
+  const confirmButtonProp = {
+    label: 'Ok',
+    styling: FButtonStyling.FLAT,
+    onClick: (e) => {
+      setTimeFromClock(e, component);
+    },
+  };
+  return (h("div", { class: "clock", id: KupCardBuiltinClockElements.CLOCK, ref: (el) => {
+      setElement(component, el);
+    } },
+    h("div", { class: "top" }, time),
+    h("div", { id: KupCardBuiltinClockElements.HOURSCIRCLE, class: `circle hours ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(12, 101, 105, 105, 'hour', 0, 1, hh, component),
+      buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh, component),
+      h("div", { class: "mid" })),
+    h("div", { id: KupCardBuiltinClockElements.MINUTESCIRCLE, class: `circle minutes ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+        setElement(component, el);
+      } },
+      buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm, component),
+      h("div", { class: "mid" })),
+    seconds,
+    h("div", { class: "actions" },
+      h(FButton, Object.assign({}, confirmButtonProp)))));
+}
+function setClockViewActive(component, hoursAct, minutesAct, secondsAct) {
+  const el = component.rootElement;
+  el.kupData.hoursActive = hoursAct;
+  el.kupData.minutesActive = minutesAct;
+  el.kupData.secondsActive = secondsAct;
+}
+function switchView(component, elId, elCircleId) {
+  getElement(component, KupCardBuiltinClockElements.HOURS).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltinClockElements.HOURSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltinClockElements.MINUTES).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltinClockElements.MINUTESCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+  if (isManageSeconds(component)) {
+    getElement(component, KupCardBuiltinClockElements.SECONDS).classList.remove(KupCardCSSClasses.VISIBLE);
+    getElement(component, KupCardBuiltinClockElements.SECONDSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+  }
+  getElement(component, elId).classList.add(KupCardCSSClasses.VISIBLE);
+  getElement(component, elCircleId).classList.add(KupCardCSSClasses.VISIBLE);
+}
+function buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue, component) {
+  let x, y;
+  const divsArray = [];
+  for (let n = 0; n < num; n++) {
+    x = radius * Math.cos((n / num) * 2 * Math.PI);
+    y = radius * Math.sin((n / num) * 2 * Math.PI);
+    let text;
+    let dataValue = {};
+    let style = {};
+    if (separator == 1) {
+      if (n + 3 > 12) {
+        text = n + 3 - 12 + add + '';
+      }
+      else {
+        let calc = n + 3 + add;
+        if (calc !== 24) {
+          text = n + 3 + add + '';
+        }
+        else {
+          text = '00';
+        }
+      }
+      dataValue['data-value'] = text;
+    }
+    else {
+      if (n % separator == 0) {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = n + 15 - 60 + add + '';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = n + 15 + add + '';
+        }
+      }
+      else {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = '⋅';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = '\u00B7';
+        }
+      }
+    }
+    style['left'] = x + offsetX + 'px';
+    style['top'] = y + offsetY + 'px';
+    if (dataValue['data-value'].length === 1) {
+      dataValue['data-value'] = '0' + dataValue['data-value'];
+    }
+    let elClass = className;
+    if (dataValue['data-value'] === selectedValue) {
+      elClass += ' selected';
+    }
+    let div = (h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => setClockTime(e, component) }), text));
+    divsArray.push(div);
+  }
+  return divsArray;
+}
+function setTimeFromClock(e, component) {
+  const hoursEl = getElement(component, KupCardBuiltinClockElements.HOURS);
+  const minutesEl = getElement(component, KupCardBuiltinClockElements.MINUTES);
+  const secondsEl = getElement(component, KupCardBuiltinClockElements.SECONDS);
+  let text = hoursEl.innerText + ':' + minutesEl.innerText;
+  if (isManageSeconds(component)) {
+    text += ':' + secondsEl.innerText;
+  }
+  onKupClockItemClick(e, component, text);
+}
+function setClockTime(e, component) {
+  const hoursEl = getElement(component, KupCardBuiltinClockElements.HOURS);
+  const minutesEl = getElement(component, KupCardBuiltinClockElements.MINUTES);
+  const hoursCircleEl = getElement(component, KupCardBuiltinClockElements.HOURSCIRCLE);
+  const minutesCircleEl = getElement(component, KupCardBuiltinClockElements.MINUTESCIRCLE);
+  const secondsEl = getElement(component, KupCardBuiltinClockElements.SECONDS);
+  const secondsCircleEl = getElement(component, KupCardBuiltinClockElements.SECONDSCIRCLE);
+  let time = e.target.getAttribute('data-value');
+  if (getHoursActive(component)) {
+    hoursEl.innerText = time;
+    hoursCircleEl.querySelector('.selected').classList.remove('selected');
+    setClockViewActive(component, false, true, false);
+    switchView(component, KupCardBuiltinClockElements.MINUTES, KupCardBuiltinClockElements.MINUTESCIRCLE);
+  }
+  else if (getMinutesActive(component)) {
+    minutesEl.innerText = time;
+    minutesCircleEl.querySelector('.selected').classList.remove('selected');
+    if (isManageSeconds(component)) {
+      setClockViewActive(component, false, false, true);
+      switchView(component, KupCardBuiltinClockElements.SECONDS, KupCardBuiltinClockElements.SECONDSCIRCLE);
+    }
+    else {
+      setTimeFromClock(e, component);
+      setClockViewActive(component, true, false, false);
+      switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+    }
+  }
+  else {
+    secondsEl.innerText = time;
+    secondsCircleEl.querySelector('.selected').classList.remove('selected');
+    setTimeFromClock(e, component);
+    setClockViewActive(component, true, false, false);
+    switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+  }
+  e.target.classList.add('selected');
+}

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/free/kup-card-free.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+import { compList } from '../kup-card-helper';
+const dom = document.documentElement;
+/**
+ * 1st free card layout, only slots.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create1(component) {
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (h("div", { class: `free-layout-${component.layoutNumber}` }, slots.length > 0 ? compList(slots, 'slot') : null));
+}

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

@@ -13,17 +13,35 @@ export var KupCardProps;
   KupCardProps["sizeX"] = "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).";
   KupCardProps["sizeY"] = "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
 })(KupCardProps || (KupCardProps = {}));
+/**
+ * Element ids for kup-card clock builtin.
+ */
+export var KupCardBuiltinClockElements;
+(function (KupCardBuiltinClockElements) {
+  KupCardBuiltinClockElements["CLOCK"] = "clockEl";
+  KupCardBuiltinClockElements["HOURS"] = "hoursEl";
+  KupCardBuiltinClockElements["MINUTES"] = "minutesEl";
+  KupCardBuiltinClockElements["SECONDS"] = "secondsEl";
+  KupCardBuiltinClockElements["HOURSCIRCLE"] = "hoursCircleEl";
+  KupCardBuiltinClockElements["MINUTESCIRCLE"] = "minutesCircleEl";
+  KupCardBuiltinClockElements["SECONDSCIRCLE"] = "secondsCircleEl";
+})(KupCardBuiltinClockElements || (KupCardBuiltinClockElements = {}));
 /**
  * Layout families of the kup-card component.
  * @enum {string}
+ * @property {string} BUILTIN - Cards belonging to this family will created automatically by library.
  * @property {string} COLLAPSIBLE - Cards belonging to this family will display an area usable to expand the content of the card.
+ * @property {string} DIALOG - Cards belonging to this family will be movable and usually closable.
+ * @property {string} FREE - This family of card will only receive slots, usually already arranged from the outside style.
  * @property {string} SCALABLE - Content will fit its container, resizing itself automatically.
  * @property {string} STANDARD - Stndard layouts.
  */
 export var KupCardFamily;
 (function (KupCardFamily) {
+  KupCardFamily["BUILTIN"] = "builtin";
   KupCardFamily["COLLAPSIBLE"] = "collapsible";
   KupCardFamily["DIALOG"] = "dialog";
+  KupCardFamily["FREE"] = "free";
   KupCardFamily["SCALABLE"] = "scalable";
   KupCardFamily["STANDARD"] = "standard";
 })(KupCardFamily || (KupCardFamily = {}));
@@ -47,6 +65,7 @@ export var KupCardIds;
  */
 export var KupCardCSSClasses;
 (function (KupCardCSSClasses) {
+  KupCardCSSClasses["BUILTIN_CARD"] = "builtin-card";
   KupCardCSSClasses["CARD_VIEW"] = "card-view";
   KupCardCSSClasses["CLICKABLE_LINK"] = "clickable-link";
   KupCardCSSClasses["COLLAPSIBLE_ACTIVE"] = "collapsible-active";

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