@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -1,5 +1,4 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { getMonthsAsStringByLocale, getDaysOfWeekAsStringByLocale, fillString, DateTimeFormatOptionsMonth, } from '../../utils/utils';
 import { KupDatePickerProps, SourceEvent, } from './kup-date-picker-declarations';
@@ -7,6 +6,8 @@ import { FButtonStyling } from '../../f-components/f-button/f-button-declaration
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDatesFormats, KupDatesNormalize, } 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 KupDatePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -52,16 +53,15 @@ export class KupDatePicker {
      */
     this.kupManager = kupManagerInstance();
     this.calendarView = SourceEvent.DATE;
-    this.textfieldEl = undefined;
-    this.pickerContainerEl = undefined;
+    this.textfieldEl = null;
+    this.pickerContainerEl = null;
     this.pickerEl = {
       value: new Date().toISOString(),
       date: new Date(),
     };
     this.pickerOpened = false;
   }
-  onKupDatePickerItemClick(e, value) {
-    e.stopPropagation();
+  onKupDatePickerItemClick(value) {
     this.setPickerValueSelected(value);
     this.kupChange.emit({
       comp: this,
@@ -74,8 +74,7 @@ export class KupDatePicker {
       value: this.value,
     });
   }
-  onKupClearIconClick(e) {
-    e.stopPropagation();
+  onKupClearIconClick() {
     this.setPickerValueSelected('');
     this.kupChange.emit({
       comp: this,
@@ -87,8 +86,7 @@ export class KupDatePicker {
       id: this.rootElement.id,
     });
   }
-  onKupDatePickerMonthYearItemClick(e, value) {
-    e.stopPropagation();
+  onKupDatePickerMonthYearItemClick(value) {
     switch (this.calendarView) {
       case SourceEvent.MONTH: {
         this.calendarView = SourceEvent.DATE;
@@ -102,7 +100,6 @@ export class KupDatePicker {
     this.refreshPickerComponentValue(value);
   }
   onKupBlur() {
-    this.closePicker();
     this.kupBlur.emit({
       id: this.rootElement.id,
       value: this.value,
@@ -110,19 +107,16 @@ export class KupDatePicker {
     });
   }
   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,
@@ -130,15 +124,14 @@ export class KupDatePicker {
     });
   }
   onKupInput(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupInput, true);
+    this.refreshPickerValue(e.target.value, this.kupInput, true);
   }
   onkupTextFieldSubmit(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupTextFieldSubmit);
+    if (e.key === 'Enter') {
+      this.refreshPickerValue(e.target.value, this.kupTextFieldSubmit);
+    }
   }
-  onKupIconClick(e) {
-    e.stopPropagation();
+  onKupIconClick() {
     if (this.isPickerOpened()) {
       this.closePicker();
     }
@@ -160,7 +153,6 @@ export class KupDatePicker {
         this.closePicker();
       }
       if (e.key === 'Enter') {
-        e.stopPropagation();
         this.setPickerValueSelected();
       }
     }
@@ -216,7 +208,7 @@ export class KupDatePicker {
    */
   async setFocus() {
     if (this.textfieldEl != null) {
-      this.textfieldEl.setFocus();
+      this.textfieldEl.focus();
     }
   }
   /**
@@ -225,14 +217,12 @@ export class KupDatePicker {
    */
   async setValue(value) {
     this.value = value;
-    this.setTextFieldInitalValue(this.getDateForOutput());
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
   /*-------------------------------------------------*/
   refreshPickerValue(eventDetailValue, eventToRaise, isOnInputEvent) {
     let newValue = eventDetailValue;
-    let dayJs = this.kupManager.dates.normalize(eventDetailValue, KupDatesNormalize.DATE);
     if (this.kupManager.dates.isValid(eventDetailValue)) {
       newValue = this.kupManager.dates.format(this.kupManager.dates.normalize(eventDetailValue, KupDatesNormalize.DATE), KupDatesFormats.ISO_DATE);
       this.refreshPickerComponentValue(newValue);
@@ -280,11 +270,6 @@ export class KupDatePicker {
   getPickerValueSelected() {
     return this.pickerEl.value;
   }
-  setTextFieldInitalValue(value) {
-    if (this.textfieldEl !== undefined) {
-      this.textfieldEl.setValue(value);
-    }
-  }
   getValueForPickerComponent() {
     return this.value;
   }
@@ -294,22 +279,22 @@ export class KupDatePicker {
     let containerEl = this.pickerContainerEl;
     this.pickerOpened = true;
     this.refreshPickerComponentValue(this.getValueForPickerComponent());
-    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,
+    });
   }
   closePicker() {
     if (!this.isPickerOpened()) {
@@ -320,10 +305,8 @@ export class KupDatePicker {
     this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
-      textfieldEl.emitSubmitEventOnEnter = true;
     }
     if (containerEl != null) {
-      this.kupManager.dynamicPosition.stop(containerEl);
       containerEl.classList.remove('visible');
     }
   }
@@ -333,19 +316,15 @@ export class KupDatePicker {
   getTextFieldId() {
     return this.textfieldEl.id;
   }
-  prepDateTextfield() {
-    return this.prepTextfield(this.getDateForOutput());
-  }
   prepTextfield(initialValue) {
-    let textfieldData = Object.assign({}, this.data['kup-text-field']);
-    if (!textfieldData['icon']) {
-      textfieldData['icon'] = 'calendar';
+    const textfieldData = Object.assign({}, this.data['kup-text-field']);
+    if (!textfieldData.icon) {
+      textfieldData.icon = 'calendar';
     }
-    if (textfieldData['icon']) {
-      textfieldData['trailingIcon'] = true;
+    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-iconclick": (e) => this.onKupIconClick(e), "onkup-textfield-submit": (e) => this.onkupTextFieldSubmit(e), "onkup-textfield-cleariconclick": (e) => this.onKupClearIconClick(e), ref: (el) => (this.textfieldEl = el) })));
-    return comp;
+    return (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', value: initialValue, onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onkupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), this.prepDatePicker()));
   }
   getInitEndYear(curYear) {
     let initYear = curYear - (curYear % 10);
@@ -392,17 +371,13 @@ export class KupDatePicker {
     }
     let prevButtonComp = null;
     let nextButtonComp = null;
-    prevButtonComp = (h("kup-button", { id: "prev-page", icon: "chevron_left", "onkup-button-click": (e) => this.prevPage(e) }));
-    nextButtonComp = (h("kup-button", { id: "next-page", icon: "chevron_right", "onkup-button-click": (e) => this.nextPage(e) }));
-    return (h("div", { tabindex: "0", id: "date-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
-        if (!this.isRelatedTargetInThisComponent(e)) {
-          this.onKupBlur();
-        }
-      } },
+    prevButtonComp = (h("kup-button", { id: "prev-page", icon: "chevron_left", "onkup-button-click": () => this.prevPage() }));
+    nextButtonComp = (h("kup-button", { id: "next-page", icon: "chevron_right", "onkup-button-click": () => this.nextPage() }));
+    return (h("div", { id: "date-picker-div", ref: (el) => (this.pickerContainerEl = el) },
       h("div", { class: "section-1" },
         h("div", { class: "sub-1 nav" },
           prevButtonComp,
-          h("kup-button", { customStyle: "#kup-component button {text-transform:capitalize}", id: "change-view-button", styling: FButtonStyling.FLAT, label: changeViewButtonLabel, "onkup-button-click": (e) => this.changeView(e) }),
+          h("kup-button", { customStyle: "#kup-component button {text-transform:capitalize}", id: "change-view-button", styling: FButtonStyling.FLAT, label: changeViewButtonLabel, "onkup-button-click": () => this.changeView() }),
           nextButtonComp)),
       h("div", { class: "section-2" }, this.createCalendar())));
   }
@@ -464,8 +439,8 @@ export class KupDatePicker {
           dayClass += ' selected';
         }
         row.push(h("td", { class: dayClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: (e) => {
-              this.onKupDatePickerItemClick(e, dataIndex['data-index']);
+          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+              this.onKupDatePickerItemClick(dataIndex['data-index']);
             } }), dayCount)));
         dayCount++;
         if (dayCount > lastMonthDay.getDate()) {
@@ -510,8 +485,8 @@ export class KupDatePicker {
           monthClass += ' selected';
         }
         row.push(h("td", { class: monthClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: (e) => {
-              this.onKupDatePickerMonthYearItemClick(e, dataIndex['data-index']);
+          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+              this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
             } }), months[monthCount])));
         monthCount++;
       }
@@ -553,8 +528,8 @@ export class KupDatePicker {
           yearClass += ' selected';
         }
         row.push(h("td", { class: yearClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: (e) => {
-              this.onKupDatePickerMonthYearItemClick(e, dataIndex['data-index']);
+          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+              this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
             } }), yearCount)));
         yearCount++;
       }
@@ -566,8 +541,7 @@ export class KupDatePicker {
     return (h("table", { id: "calendar" },
       h("tbody", null, tbody)));
   }
-  changeView(e) {
-    e.stopPropagation();
+  changeView() {
     switch (this.calendarView) {
       case SourceEvent.DATE: {
         this.calendarView = SourceEvent.MONTH;
@@ -583,8 +557,7 @@ export class KupDatePicker {
     }
     this.refresh();
   }
-  prevPage(e) {
-    e.stopPropagation();
+  prevPage() {
     let date = this.pickerEl.date;
     let yy = date.getFullYear();
     let mm = date.getMonth();
@@ -610,8 +583,7 @@ export class KupDatePicker {
     this.pickerEl.date = date;
     this.refresh();
   }
-  nextPage(e) {
-    e.stopPropagation();
+  nextPage() {
     let date = this.pickerEl.date;
     let yy = date.getFullYear();
     let mm = date.getMonth();
@@ -644,11 +616,6 @@ export class KupDatePicker {
     let v1 = this.kupManager.dates.format(this.value);
     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          */
   /*-------------------------------------------------*/
@@ -670,11 +637,18 @@ export class KupDatePicker {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
-    this.recalcPosition();
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const f = root.querySelector('.f-text-field--wrapper');
+      if (f) {
+        this.textfieldEl = f.querySelector('input');
+        FTextFieldMDC(f);
+      }
+    }
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let hostClass = {};
+    const hostClass = {};
     if (this.data &&
       this.data['kup-text-field'] &&
       this.data['kup-text-field']['className'] &&
@@ -687,18 +661,12 @@ export class KupDatePicker {
       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.prepDateTextfield(),
-        this.prepDatePicker())));
+      h("div", { id: componentWrapperId }, this.prepTextfield(this.getDateForOutput()))));
   }
   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-date-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -721,11 +689,11 @@ export class KupDatePicker {
       "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."
       },
@@ -749,8 +717,8 @@ export class KupDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Props of the sub-components."
       },
@@ -768,8 +736,8 @@ export class KupDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -789,8 +757,8 @@ export class KupDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "First day number (0 - sunday, 1 - monday, ...)\nTODO: manage with kupDates.locale, remove prop"
       },
@@ -810,8 +778,8 @@ export class KupDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component"
       },
@@ -1030,8 +998,8 @@ export class KupDatePicker {
         "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."
           }],
@@ -1094,8 +1062,8 @@ export class KupDatePicker {
         "signature": "(value: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "value - Value to be set.",
-                "name": "param"
+                "name": "param",
+                "text": "value - Value to be set."
               }],
             "text": "- Value to be set."
           }],
@@ -1123,7 +1091,7 @@ export class KupDatePicker {
   static get listeners() { return [{
       "name": "keyup",
       "method": "listenKeyup",
-      "target": "document",
+      "target": undefined,
       "capture": false,
       "passive": false
     }]; }

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

@@ -154,11 +154,11 @@ export class KupDrawer {
       "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."
       },
@@ -253,8 +253,8 @@ export class KupDrawer {
         "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."
           }],
@@ -336,8 +336,8 @@ export class KupDrawer {
         "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-dropdown-button/kup-dropdown-button.css

@@ -153,16 +153,19 @@
   width: 4em;
 }
 .f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+.f-button--wrapper .button.button--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;
@@ -374,6 +377,11 @@
   transform: rotate(180deg);
 }
 
+kup-list {
+  position: absolute;
+  z-index: 1;
+}
+
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/