@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -2,11 +2,12 @@ import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop,
 import { kupManagerInstance, } from '../../utils/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 { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupTimePickerProps, } from './kup-time-picker-declarations';
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDatesFormats } from '../../utils/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';
 export class KupTimePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -75,7 +76,6 @@ export class KupTimePicker {
   }
   onKupTimePickerItemClick(e, value) {
     if (e != null) {
-      e.stopPropagation();
       if (value == null) {
         value = e.detail.selected.value;
       }
@@ -92,8 +92,7 @@ export class KupTimePicker {
       value: this.value,
     });
   }
-  onKupClearIconClick(e) {
-    e.stopPropagation();
+  onKupClearIconClick() {
     this.setPickerValueSelected('');
     this.kupChange.emit({
       comp: this,
@@ -113,29 +112,17 @@ export class KupTimePicker {
       value: this.value,
     });
   }
-  onKupTextFieldBlur(e) {
-    const eventValue = e.detail.value;
-    if (eventValue) {
-      const newValue = this.getFormattedValue(eventValue);
-      if (newValue) {
-        this.setValue(newValue);
-      }
-    }
-  }
   onKupChange(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupChange);
+    this.refreshPickerValue(e.target.value, this.kupChange);
   }
-  onKupClick(e) {
-    e.stopPropagation();
+  onKupClick() {
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
     });
   }
-  onKupFocus(e) {
-    e.stopPropagation();
+  onKupFocus() {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
@@ -143,15 +130,12 @@ export class KupTimePicker {
     });
   }
   onKupInput(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupInput);
+    this.refreshPickerValue(e.target.value, this.kupInput);
   }
   onKupTextFieldSubmit(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupTextFieldSubmit);
+    this.refreshPickerValue(e.target.value, this.kupTextFieldSubmit);
   }
-  onKupIconClick(e) {
-    e.stopPropagation();
+  onKupIconClick() {
     if (this.isPickerOpened()) {
       this.closePicker();
     }
@@ -173,7 +157,6 @@ export class KupTimePicker {
         this.closePicker();
       }
       if (e.key === 'Enter') {
-        e.stopPropagation();
         this.onKupTimePickerItemClick(null);
       }
     }
@@ -244,7 +227,6 @@ export class KupTimePicker {
    */
   async setValue(value) {
     this.value = value;
-    this.setTextFieldInitalValue(this.getTimeForOutput());
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -259,7 +241,6 @@ export class KupTimePicker {
     if (isValidFormattedStringTime(eventDetailValue, this.manageSeconds)) {
       this.value = eventDetailValue;
       newValue = this.value;
-      this.setTextFieldInitalValue(this.getTimeForOutput());
     }
     if (newValue != null) {
       eventToRaise.emit({
@@ -284,16 +265,10 @@ export class KupTimePicker {
       return;
     }
     this.value = newValue;
-    this.setTextFieldInitalValue(this.getTimeForOutput());
   }
   getPickerValueSelected() {
     return this.value;
   }
-  setTextFieldInitalValue(value) {
-    if (this.textfieldEl !== undefined) {
-      this.textfieldEl.setValue(value);
-    }
-  }
   getValueForPickerComponent() {
     return this.value;
   }
@@ -302,22 +277,22 @@ export class KupTimePicker {
     let containerEl = this.pickerContainerEl;
     this.pickerOpened = true;
     this.setClockViewActive(true, false, false);
-    let textFieldWidth = null;
     if (textfieldEl != null) {
-      textFieldWidth =
-        textfieldEl.shadowRoot.querySelector('.mdc-text-field').clientWidth;
       textfieldEl.classList.add('toggled');
-      textfieldEl.emitSubmitEventOnEnter = false;
     }
     if (containerEl != null) {
-      this.kupManager.dynamicPosition.start(containerEl);
       containerEl.classList.add('visible');
-      let elStyle = containerEl.style;
+      const elStyle = containerEl.style;
       elStyle.height = 'auto';
-      if (textFieldWidth != null) {
-        elStyle.minWidth = textFieldWidth + 'px';
-      }
+      elStyle.minWidth = textfieldEl.clientWidth + 'px';
     }
+    this.kupManager.utilities.pointerDownCallbacks.add({
+      cb: () => {
+        this.closePicker();
+      },
+      onlyOnce: true,
+      el: this.pickerContainerEl,
+    });
     this.refresh();
   }
   closePicker() {
@@ -329,7 +304,6 @@ export class KupTimePicker {
       textfieldEl.emitSubmitEventOnEnter = true;
     }
     if (containerEl != null) {
-      this.kupManager.dynamicPosition.stop(containerEl);
       containerEl.classList.remove('visible');
     }
   }
@@ -342,9 +316,6 @@ export class KupTimePicker {
   getPickerElId() {
     return this.pickerEl.id;
   }
-  prepTimeTextfield() {
-    return this.prepTextfield(this.getTimeForOutput());
-  }
   prepTextfield(initialValue) {
     let textfieldData = Object.assign({}, this.data['kup-text-field']);
     if (!textfieldData['icon']) {
@@ -353,7 +324,7 @@ export class KupTimePicker {
     if (textfieldData['icon']) {
       textfieldData['trailingIcon'] = true;
     }
-    let comp = (h("kup-text-field", Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', initialValue: initialValue, "onkup-textfield-change": (e) => this.onKupChange(e), "onkup-textfield-click": (e) => this.onKupClick(e), "onkup-textfield-focus": (e) => this.onKupFocus(e), "onkup-textfield-input": (e) => this.onKupInput(e), "onkup-textfield-blur": (e) => this.onKupTextFieldBlur(e), "onkup-textfield-iconclick": (e) => this.onKupIconClick(e), "onkup-textfield-submit": (e) => this.onKupTextFieldSubmit(e), "onkup-textfield-cleariconclick": (e) => this.onKupClearIconClick(e), ref: (el) => (this.textfieldEl = el) })));
+    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()));
     return comp;
   }
   isRelatedTargetInThisComponent(e) {
@@ -558,7 +529,7 @@ export class KupTimePicker {
     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("div", { tabindex: "-1", id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
+    return (h("div", { id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
         if (!this.isRelatedTargetInThisComponent(e)) {
           this.onKupBlur();
         }
@@ -606,11 +577,6 @@ export class KupTimePicker {
     let v1 = unformattedStringToFormattedStringTime(this.value, this.manageSeconds);
     return v1;
   }
-  recalcPosition() {
-    if (this.pickerContainerEl != null && this.textfieldEl != null) {
-      this.kupManager.dynamicPosition.register(this.pickerContainerEl, this.textfieldEl);
-    }
-  }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
@@ -633,6 +599,14 @@ export class KupTimePicker {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const f = root.querySelector('.f-text-field--wrapper');
+      if (f) {
+        this.textfieldEl = f.querySelector('input');
+        FTextFieldMDC(f);
+      }
+    }
     if (this.clockVariant) {
       if (this.hoursActive) {
         this.switchView(this.hoursEl, this.hoursCircleEl);
@@ -644,7 +618,6 @@ export class KupTimePicker {
         this.switchView(this.secondsEl, this.secondsCircleEl);
       }
     }
-    this.recalcPosition();
     this.kupManager.debug.logRender(this, true);
   }
   render() {
@@ -661,18 +634,12 @@ export class KupTimePicker {
       hostClass['kup-full-width'] = true;
     }
     const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { class: hostClass, onBlur: () => this.onKupBlur() },
+    return (h(Host, { class: hostClass },
       customStyle ? h("style", null, customStyle) : null,
-      h("div", { id: componentWrapperId },
-        this.prepTimeTextfield(),
-        this.prepTimePicker())));
+      h("div", { id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
-    }
   }
   static get is() { return "kup-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -695,8 +662,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When set to true, the drop down menu will display a clock."
       },
@@ -716,11 +683,11 @@ export class KupTimePicker {
       "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."
       },
@@ -744,8 +711,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{}",
-            "name": "default"
+            "name": "default",
+            "text": "{}"
           }],
         "text": "Props of the sub-components (time input text field)"
       },
@@ -763,8 +730,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -784,8 +751,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component."
       },
@@ -805,8 +772,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Manage seconds."
       },
@@ -826,8 +793,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "10",
-            "name": "default"
+            "name": "default",
+            "text": "10"
           }],
         "text": "Minutes step."
       },
@@ -1026,8 +993,8 @@ export class KupTimePicker {
         "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."
           }],
@@ -1106,8 +1073,8 @@ export class KupTimePicker {
         "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-tooltip/kup-tooltip.js

@@ -1,7 +1,7 @@
 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, KupDynamicPositionPlacement, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
 import { KupCardFamily } from '../kup-card/kup-card-declarations';
 import { getProps, setProps } from '../../utils/utils';
@@ -61,14 +61,21 @@ export class KupTooltip {
       return;
     }
     if (!this.kupManager.dynamicPosition.isRegistered(this.rootElement)) {
-      this.kupManager.dynamicPosition.register(this.rootElement, this.relatedObject.element, 0, KupDynamicPositionPlacement.AUTO);
+      this.kupManager.dynamicPosition.register(this.rootElement, this.relatedObject.element);
     }
     else {
       this.kupManager.dynamicPosition.changeAnchor(this.rootElement, this.relatedObject.element);
     }
+    this.kupManager.utilities.pointerDownCallbacks.add({
+      cb: () => {
+        this.data = null;
+        this.kupManager.dynamicPosition.stop(this.rootElement);
+      },
+      onlyOnce: true,
+      el: this.rootElement,
+    });
     this.kupManager.dynamicPosition.start(this.rootElement);
     this.visible = true;
-    this.rootElement.focus();
     this.startLoadDetail(true);
   }
   onTooltipDetailChanged() {
@@ -184,7 +191,6 @@ export class KupTooltip {
       this.resetAll();
       return;
     }
-    this.rootElement.focus();
     if (this.isViewModeTooltip()) {
       this.cellOptions = null;
       this.kupTooltipLoadDetail.emit({
@@ -671,11 +677,11 @@ export class KupTooltip {
       "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."
       },
@@ -1121,8 +1127,8 @@ export class KupTooltip {
         "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."
           }],
@@ -1153,8 +1159,8 @@ export class KupTooltip {
         "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-tree/kup-tree.css

@@ -393,8 +393,8 @@
 }
 
 tfoot td {
-  border-bottom: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-bottom: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
   box-sizing: border-box;
   height: 36px;
   text-align: right;
@@ -406,7 +406,7 @@ tfoot td:hover {
 }
 tfoot td:first-of-type {
   border: none;
-  border-right: var(--kup_tree_border-color);
+  border-right: var(--kup_tree_border);
 }
 
 .hidden span {
@@ -427,8 +427,8 @@ tfoot td:first-of-type {
   display: table-header-group;
 }
 :host([as-accordion]) .wrapper .kup-tree thead tr {
-  border-left: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-left: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
 }
 :host([as-accordion]) .density-dense .first-node {
   padding: 0.5em 1em;
@@ -463,7 +463,7 @@ tfoot td:first-of-type {
 :host([as-accordion]) .kup-tree__node--first:first-of-type .first-node {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  border-top: var(--kup_tree_border-color);
+  border-top: var(--kup_tree_border);
 }
 :host([as-accordion]) .kup-tree__node--first:last-of-type .first-node {
   border-bottom-left-radius: 4px;
@@ -471,9 +471,9 @@ tfoot td:first-of-type {
 }
 :host([as-accordion]) .kup-tree__node--first .first-node {
   align-items: center;
-  border-bottom: var(--kup_tree_border-color);
-  border-left: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-bottom: var(--kup_tree_border);
+  border-left: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
   box-sizing: border-box;
   color: var(--kup_tree_color);
   cursor: pointer;
@@ -505,7 +505,7 @@ tfoot td:first-of-type {
   transition: transform 0.1s;
 }
 :host([as-accordion]) .kup-tree__node:not(.kup-tree__node--first) + .kup-tree__node--first {
-  border-top: var(--kup_tree_border-color);
+  border-top: var(--kup_tree_border);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }