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

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -1,13 +1,14 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { isValidFormattedStringTime, formattedStringToCustomUnformattedStringTime, unformattedStringToFormattedStringTime, formatTime, getProps, setProps, } from '../../utils/utils';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { KupTimePickerProps, } from './kup-time-picker-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupDatesFormats } from '../../utils/kup-dates/kup-dates-declarations';
+import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupCardFamily, } from '../kup-card/kup-card-declarations';
+import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupTimePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -69,10 +70,9 @@ export class KupTimePicker {
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
+    this.textFieldContainerEl = undefined;
     this.textfieldEl = undefined;
-    this.pickerContainerEl = undefined;
-    this.pickerEl = undefined;
-    this.pickerOpened = false;
+    this.pickerKupEl = undefined;
     this.clickCb = null;
   }
   onKupTimePickerItemClick(e, value) {
@@ -92,6 +92,7 @@ export class KupTimePicker {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
   onKupClearIconClick() {
     this.setPickerValueSelected('');
@@ -213,7 +214,7 @@ export class KupTimePicker {
    */
   async setFocus() {
     if (this.textfieldEl != null) {
-      this.textfieldEl.setFocus();
+      this.textfieldEl.focus();
     }
   }
   /**
@@ -274,61 +275,61 @@ export class KupTimePicker {
     return this.value;
   }
   openPicker() {
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
-    this.setClockViewActive(true, false, false);
-    if (textfieldEl != null) {
-      textfieldEl.classList.add('toggled');
+    const elStyle = this.pickerKupEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textFieldContainerEl.clientWidth + 'px';
+    this.pickerKupEl.menuVisible = true;
+    if (this.textfieldEl != null) {
+      this.textfieldEl.classList.add('toggled');
+    }
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerKupEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerKupEl, this.textFieldContainerEl);
     }
-    if (containerEl != null) {
-      containerEl.classList.add('visible');
-      const elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      elStyle.minWidth = textfieldEl.clientWidth + 'px';
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerKupEl, this.textFieldContainerEl, 0, KupDynamicPositionPlacement.AUTO, true);
     }
+    this.kupManager.dynamicPosition.start(this.pickerKupEl);
     if (!this.clickCb) {
       this.clickCb = {
         cb: () => {
           this.closePicker();
         },
-        el: this.pickerContainerEl,
+        el: this.pickerKupEl,
       };
     }
     this.kupManager.addClickCallback(this.clickCb, true);
-    this.refresh();
   }
   closePicker() {
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.removeClickCallback(this.clickCb);
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
-      textfieldEl.emitSubmitEventOnEnter = true;
-    }
-    if (containerEl != null) {
-      containerEl.classList.remove('visible');
     }
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerKupEl);
     this.kupManager.removeClickCallback(this.clickCb);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerKupEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   getPickerElId() {
-    return this.pickerEl.id;
+    return this.pickerKupEl.id;
   }
   prepTextfield(initialValue) {
-    let textfieldData = Object.assign({}, this.data['kup-text-field']);
-    if (!textfieldData['icon']) {
-      textfieldData['icon'] = 'access_time';
+    const fullHeight = this.rootElement.classList.contains('kup-full-height');
+    const fullWidth = this.rootElement.classList.contains('kup-full-width');
+    const textfieldData = Object.assign({}, this.data['kup-text-field']);
+    if (!textfieldData.icon) {
+      textfieldData.icon = 'access_time';
     }
-    if (textfieldData['icon']) {
-      textfieldData['trailingIcon'] = true;
+    if (textfieldData.icon) {
+      textfieldData.trailingIcon = true;
     }
-    let comp = (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
+    let comp = (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
     return comp;
   }
   isRelatedTargetInThisComponent(e) {
@@ -348,196 +349,25 @@ export class KupTimePicker {
     let idConc = '#time-picker-div#confirm#';
     return idConc.indexOf('#' + id + '#') >= 0;
   }
-  setTimeFromClock(e) {
-    let text = this.hoursEl.innerText + ':' + this.minutesEl.innerText;
-    if (this.manageSeconds) {
-      text += ':' + this.secondsEl.innerText;
-    }
-    this.onKupTimePickerItemClick(e, text);
-  }
-  createClock() {
-    let selectedTime;
-    if (this.value) {
-      selectedTime = this.kupManager.dates.toDate(this.value, this.manageSeconds
-        ? 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 (this.manageSeconds) {
-      ss = selectedTime.getSeconds().toString();
-      if (ss.length === 1) {
-        ss = '0' + ss;
-      }
-    }
-    let seconds;
-    let time = [
-      h("span", { class: "h", ref: (el) => (this.hoursEl = el), onClick: () => {
-          this.setClockViewActive(true, false, false);
-          this.switchView(this.hoursEl, this.hoursCircleEl);
-        }, innerHTML: hh }),
-      ':',
-      h("span", { class: "m", ref: (el) => (this.minutesEl = el), onClick: () => {
-          this.setClockViewActive(false, true, false);
-          this.switchView(this.minutesEl, this.minutesCircleEl);
-        }, innerHTML: mm }),
-    ];
-    if (this.manageSeconds) {
-      seconds = (h("div", { class: "circle seconds", ref: (el) => (this.secondsCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss),
-        h("div", { class: "mid" })));
-      time.push(':', h("span", { class: "s", ref: (el) => (this.secondsEl = el), onClick: () => {
-          this.setClockViewActive(false, false, true);
-          this.switchView(this.secondsEl, this.secondsCircleEl);
-        }, innerHTML: ss }));
-    }
-    return (h("div", { class: "clock", id: this.rootElement.id + '_clock', ref: (el) => (this.pickerEl = el) },
-      h("div", { class: "top" }, time),
-      h("div", { class: "circle hours", ref: (el) => (this.hoursCircleEl = el) },
-        this.buildClock(12, 101, 105, 105, 'hour', 0, 1, hh),
-        this.buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh),
-        h("div", { class: "mid" })),
-      h("div", { class: "circle minutes", ref: (el) => (this.minutesCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm),
-        h("div", { class: "mid" })),
-      seconds,
-      h("div", { class: "actions" },
-        h("kup-button", { "onkup-button-click": (e) => {
-            this.setTimeFromClock(e);
-          }, id: "confirm", styling: FButtonStyling.FLAT, label: "Ok" }))));
-  }
-  switchView(el, elCircle) {
-    this.hoursEl.classList.remove('active');
-    this.hoursCircleEl.classList.remove('active');
-    this.minutesEl.classList.remove('active');
-    this.minutesCircleEl.classList.remove('active');
-    if (this.secondsEl) {
-      this.secondsEl.classList.remove('active');
-      this.secondsCircleEl.classList.remove('active');
-    }
-    el.classList.add('active');
-    elCircle.classList.add('active');
-  }
-  setClockViewActive(hoursActive, minutesActive, secondsActive) {
-    this.hoursActive = hoursActive;
-    this.minutesActive = minutesActive;
-    this.secondsActive = secondsActive;
-  }
-  buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue) {
-    let x, y;
-    let divsArray = [];
-    for (var 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) => this.setClockTime(e) }), text));
-      divsArray.push(div);
-    }
-    return divsArray;
-  }
-  setClockTime(e) {
-    let time = e.target.getAttribute('data-value');
-    if (this.hoursActive) {
-      this.hoursEl.innerText = time;
-      this.hoursCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setClockViewActive(false, true, false);
-      this.switchView(this.minutesEl, this.minutesCircleEl);
-    }
-    else if (this.minutesActive) {
-      this.minutesEl.innerText = time;
-      this.minutesCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      if (this.manageSeconds) {
-        this.setClockViewActive(false, false, true);
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-      else {
-        this.setTimeFromClock(e);
-      }
-    }
-    else {
-      this.secondsEl.innerText = time;
-      this.secondsCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setTimeFromClock(e);
-    }
-    e.target.classList.add('selected');
-  }
   prepTimePicker() {
-    let widget = undefined;
     if (this.clockVariant) {
-      widget = this.createClock();
+      const data = {
+        options: {
+          initialValue: this.value,
+          manageSeconds: this.manageSeconds,
+          hoursActive: this.hoursActive,
+          minutesActive: this.minutesActive,
+          secondsActive: this.secondsActive,
+        },
+      };
+      return (h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, layoutNumber: 2, sizeX: "300px", sizeY: "450px", isMenu: true, "onkup-card-click": (ev) => {
+          if (ev.detail.value != null && ev.detail.value != '')
+            this.onKupTimePickerItemClick(ev, ev.detail.value);
+        } }));
     }
     else {
-      widget = (h("kup-list", { data: this.createTimeListData(this.value), "is-menu": true, "menu-visible": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list', ref: (el) => (this.pickerEl = el) }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
     }
-    return (h("div", { id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
-        if (!this.isRelatedTargetInThisComponent(e)) {
-          this.onKupBlur();
-        }
-      } }, widget));
   }
   createTimeListData(value) {
     let listData = [];
@@ -585,6 +415,7 @@ export class KupTimePicker {
   /*          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.theme.register(this);
     this.watchTimeMinutesStep();
@@ -607,42 +438,24 @@ export class KupTimePicker {
     if (root) {
       const f = root.querySelector('.f-text-field');
       if (f) {
+        this.textFieldContainerEl = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
       }
     }
-    if (this.clockVariant) {
-      if (this.hoursActive) {
-        this.switchView(this.hoursEl, this.hoursCircleEl);
-      }
-      else if (this.minutesActive) {
-        this.switchView(this.minutesEl, this.minutesCircleEl);
-      }
-      else if (this.secondsActive) {
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-    }
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let hostClass = {};
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['className'] &&
-      this.data['kup-text-field']['className'].indexOf('kup-full-height') > -1) {
-      hostClass['kup-full-height'] = true;
-    }
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['fullWidth']) {
-      hostClass['kup-full-width'] = true;
-    }
-    return (h(Host, { class: hostClass },
+    return (h(Host, null,
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
+    this.kupManager.dates.unregister(this);
     this.kupManager.theme.unregister(this);
+    if (this.pickerKupEl) {
+      this.pickerKupEl.remove();
+    }
   }
   static get is() { return "kup-time-picker"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,8 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { ViewMode, KupTooltipProps, } from './kup-tooltip-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { kupDynamicPositionAttribute, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import { KupCardFamily } from '../kup-card/kup-card-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';

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

@@ -37,11 +37,6 @@ export var KupTreeProps;
   KupTreeProps["totals"] = "Defines the current totals options.";
   KupTreeProps["useDynamicExpansion"] = "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the tree have been passed inside the data property. Therefore, when expanding a node, the tree must emit an event (or run a given callback) and wait for the child nodes to be downloaded from the server.";
 })(KupTreeProps || (KupTreeProps = {}));
-/**
- * The name of the property used by the tree component to store whether a TreeNode is open or closed
- * @constant
- */
-export const treeExpandedPropName = 'isExpanded';
 /**
  * The name of the constant used by the tree component to identify the main tree in column menu
  * @constant

package/dist/collection/components/kup-tree/kup-tree-faker.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
-import { treeExpandedPropName, } from './kup-tree-declarations';
 //---- Constants ----
 /**
  * The data pool usable to populate a fake TreeNode
@@ -81,7 +80,7 @@ export function flattenTree(nodesToFlatten, useIsExpandedFlag = true) {
     for (let i = 0; i < nodesToFlatten.length; i++) {
       flattenedNodes.push(nodesToFlatten[i]);
       if (!useIsExpandedFlag ||
-        (useIsExpandedFlag && nodesToFlatten[i][treeExpandedPropName])) {
+        (useIsExpandedFlag && nodesToFlatten[i].isExpanded)) {
         flattenedNodes = flattenedNodes.concat(flattenTree(nodesToFlatten[i].children));
       }
     }
@@ -206,7 +205,7 @@ function TreeNodeFactory(columns, depth = {
     expandable: !!childrenCount,
     icon: 'account',
     id: depth.path + depthAndIndex + childrenCount.toString(),
-    [treeExpandedPropName]: getBooleanOnProbability(options.isExpandedProbability || 0),
+    isExpanded: getBooleanOnProbability(options.isExpandedProbability || 0),
     obj: {
       t: 'TN',
       p: '',

package/dist/collection/components/kup-tree/kup-tree.css

@@ -137,6 +137,8 @@
   height: 1.5em;
   min-width: 1.5em;
   width: 1.5em;
+}
+.wrapper .kup-tree__node__expander {
   transition: transform 0.1s;
 }
 .wrapper .kup-tree__node {