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

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -296,6 +296,7 @@ export class KupDataTable {
     this.removeDropareaRef = null;
     this.groupsDropareaRef = null;
     this.clickCb = null;
+    this.clickCbCustomPanel = null;
     /**
      * Reference to the row detail card.
      */
@@ -1288,11 +1289,9 @@ export class KupDataTable {
     }
   }
   customizePanelPosition() {
-    if (this.customizeTopButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef);
-    }
-    if (this.customizeBottomButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeBottomPanelRef, this.customizeBottomButtonRef);
+    if (this.customizeTopButtonRef &&
+      !this.kupManager.dynamicPosition.isRegistered(this.customizeTopPanelRef)) {
+      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef, 0, KupDynamicPositionPlacement.BOTTOM, true);
     }
   }
   rowsPointLength() {
@@ -3040,19 +3039,28 @@ export class KupDataTable {
     }
   }
   openCustomSettings() {
-    this.customizeTopPanelRef.classList.add('visible');
+    this.customizeTopPanelRef.menuVisible = true;
     this.customizeTopButtonRef.classList.add('toggled');
     this.kupManager.dynamicPosition.start(this.customizeTopPanelRef);
     this.openedCustomSettings = true;
+    if (!this.clickCbCustomPanel) {
+      this.clickCbCustomPanel = {
+        cb: () => {
+          this.closeCustomSettings();
+        },
+        el: this.customizeTopPanelRef,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCbCustomPanel, true);
   }
   closeCustomSettings() {
     this.customizeTopButtonRef.classList.remove('toggled');
     if (this.customizeTopPanelRef == null) {
       return;
     }
-    this.customizeTopPanelRef.classList.remove('visible');
-    this.kupManager.dynamicPosition.stop(this.customizeTopPanelRef);
+    this.customizeTopPanelRef.menuVisible = false;
     this.openedCustomSettings = false;
+    this.kupManager.removeClickCallback(this.clickCbCustomPanel);
   }
   renderPaginator(top) {
     return (h("div", { class: "paginator-wrapper" },
@@ -3076,9 +3084,9 @@ export class KupDataTable {
         totalsMatrix = this.renderTotalsMatrix();
       }
     }
-    return (h("div", { class: "kup-menu customize-panel", ref: (el) => {
+    return (h("kup-card", { customStyle: "::slotted(kup-switch) { width: max-content !important; } ::slotted(*) { margin: auto !important; } ::slotted(.customize-element) { margin: auto !important; padding: 0 1em 1em 1em !important; width: max-content !important; } ::slotted(.customize-element):nth-child(1) { padding-top: 1em !important; }", isMenu: true, layoutFamily: KupCardFamily.FREE, ref: (el) => {
         this.customizeTopPanelRef = el;
-      } },
+      }, sizeX: "360px", sizeY: "300px" },
       density,
       grid,
       fontsize,
@@ -3480,6 +3488,9 @@ export class KupDataTable {
     if (dynamicPositionElements.length > 0) {
       this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
     }
+    if (this.customizeTopPanelRef) {
+      this.customizeTopPanelRef.remove();
+    }
     if (this.columnMenuCard) {
       this.columnMenuCard.remove();
     }

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

@@ -3,88 +3,6 @@
   font-size: var(--kup-font-size);
 }
 
-#date-picker-div {
-  outline: none;
-  pointer-events: all;
-  background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
-  color: var(--kup-text-color);
-  display: none;
-  overflow: hidden;
-  padding: 10px;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: center;
-  height: 22em;
-  width: 22em;
-  position: absolute;
-  z-index: 1;
-}
-#date-picker-div.visible {
-  display: block;
-}
-#date-picker-div.dynamic-position-active {
-  display: flex;
-}
-#date-picker-div .section-1 {
-  box-sizing: border-box;
-  height: 5em;
-  overflow: auto;
-  padding-bottom: 1em;
-  width: 100%;
-}
-#date-picker-div .section-1 .sub-1 {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-#date-picker-div .section-2 {
-  height: calc(100% - 60px);
-  overflow: auto;
-  width: 100%;
-}
-#date-picker-div #prev-page {
-  margin-left: auto;
-}
-#date-picker-div #change-view-button {
-  margin: auto;
-  width: 12em;
-  text-align: center;
-}
-#date-picker-div #next-page {
-  margin-right: auto;
-}
-#date-picker-div #calendar {
-  border-collapse: collapse;
-  width: 100%;
-}
-#date-picker-div thead {
-  border-bottom: 1px solid var(--kup-border-color);
-}
-#date-picker-div .item-text {
-  color: rgba(var(--kup-text-color-rgb), 0.5);
-}
-#date-picker-div .item {
-  text-align: center;
-}
-#date-picker-div .item:not(.selected) .item-number:hover {
-  background-color: var(--kup-hover-background-color);
-}
-#date-picker-div .item.selected .item-number, #date-picker-div .item.selected .item-number:hover {
-  background-color: rgba(var(--kup-primary-color-rgb), 0.175);
-}
-#date-picker-div .item-number {
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  line-height: 2.5em;
-  margin: auto;
-  width: 2.5em;
-  transition: background-color 0.25s;
-  text-transform: capitalize;
-}
-
 .f-text-field {
   position: relative;
 }

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

@@ -1,13 +1,12 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { getMonthsAsStringByLocale, getDaysOfWeekAsStringByLocale, fillString, DateTimeFormatOptionsMonth, } from '../../utils/utils';
-import { KupDatePickerProps, SourceEvent, } from './kup-date-picker-declarations';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
+import { KupDatePickerProps, } from './kup-date-picker-declarations';
 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';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupDatePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -52,14 +51,12 @@ export class KupDatePicker {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.calendarView = SourceEvent.DATE;
     this.textfieldEl = null;
     this.pickerContainerEl = null;
     this.pickerEl = {
       value: new Date().toISOString(),
       date: new Date(),
     };
-    this.pickerOpened = false;
     this.clickCb = null;
   }
   onKupDatePickerItemClick(value) {
@@ -74,6 +71,7 @@ export class KupDatePicker {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
   onKupClearIconClick() {
     this.setPickerValueSelected('');
@@ -87,19 +85,6 @@ export class KupDatePicker {
       id: this.rootElement.id,
     });
   }
-  onKupDatePickerMonthYearItemClick(value) {
-    switch (this.calendarView) {
-      case SourceEvent.MONTH: {
-        this.calendarView = SourceEvent.DATE;
-        break;
-      }
-      case SourceEvent.YEAR: {
-        this.calendarView = SourceEvent.MONTH;
-        break;
-      }
-    }
-    this.refreshPickerComponentValue(value);
-  }
   onKupBlur() {
     this.kupBlur.emit({
       id: this.rootElement.id,
@@ -275,20 +260,22 @@ export class KupDatePicker {
     return this.value;
   }
   openPicker() {
-    this.calendarView = SourceEvent.DATE;
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
+    const textfieldEl = this.textfieldEl;
+    this.pickerContainerEl.menuVisible = true;
+    const elStyle = this.pickerContainerEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textfieldEl.parentElement.clientWidth + 'px';
     this.refreshPickerComponentValue(this.getValueForPickerComponent());
     if (textfieldEl != null) {
       textfieldEl.classList.add('toggled');
     }
-    if (containerEl != null) {
-      containerEl.classList.add('visible');
-      const elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      elStyle.minWidth = textfieldEl.clientWidth + 'px';
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerContainerEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerContainerEl, this.textfieldEl.parentElement);
     }
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerContainerEl, this.textfieldEl.parentElement, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.pickerContainerEl);
     if (!this.clickCb) {
       this.clickCb = {
         cb: () => {
@@ -305,22 +292,21 @@ export class KupDatePicker {
       return;
     }
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
     }
-    if (containerEl != null) {
-      containerEl.classList.remove('visible');
-    }
+    this.pickerContainerEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerContainerEl);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerContainerEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   prepTextfield(initialValue) {
+    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 = 'calendar';
@@ -328,7 +314,7 @@ export class KupDatePicker {
     if (textfieldData.icon) {
       textfieldData.trailingIcon = true;
     }
-    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()));
+    return (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, 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);
@@ -350,268 +336,17 @@ export class KupDatePicker {
     return idConc.indexOf('#' + id + '#') >= 0;
   }
   prepDatePicker() {
-    let date = this.pickerEl.date;
-    let months = getMonthsAsStringByLocale();
-    let curYear = date.getFullYear();
-    let yearRange = this.getInitEndYear(curYear);
-    let initYear = yearRange.initYear;
-    let endYear = yearRange.endYear;
-    let changeViewButtonLabel = 'not-set';
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        changeViewButtonLabel =
-          months[date.getMonth()] + ', ' + curYear.toString();
-        break;
-      }
-      case SourceEvent.MONTH: {
-        changeViewButtonLabel = curYear.toString();
-        break;
-      }
-      case SourceEvent.YEAR: {
-        changeViewButtonLabel =
-          initYear.toString() + ' - ' + endYear.toString();
-        break;
-      }
-    }
-    let prevButtonComp = null;
-    let nextButtonComp = null;
-    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": () => this.changeView() }),
-          nextButtonComp)),
-      h("div", { class: "section-2" }, this.createCalendar())));
-  }
-  createCalendar() {
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        return this.createDaysCalendar();
-      }
-      case SourceEvent.MONTH: {
-        return this.createMonthsCalendar();
-      }
-      case SourceEvent.YEAR: {
-        return this.createYearsCalendar();
-      }
-    }
-  }
-  createDaysCalendar() {
-    let days = getDaysOfWeekAsStringByLocale(this.firstDayIndex);
-    let date = this.pickerEl.date;
-    let selecteDate = new Date(date);
-    let thead = [];
-    let tbody = [];
-    for (let index = 0; index < days.length; index++) {
-      thead.push(h("th", null,
-        h("span", { class: "item-text" }, days[index])));
-    }
-    let firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1);
-    let lastMonthDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-    let finish = false;
-    let currentDayIndex = this.firstDayIndex;
-    let firstMonthDayIndex = firstMonthDay.getDay();
-    let row = [];
-    let daysForRowAdded = 0;
-    while (!finish) {
-      if (currentDayIndex == firstMonthDayIndex) {
-        break;
-      }
-      row.push(h("td", { class: "item empty" }));
-      currentDayIndex++;
-      daysForRowAdded++;
-      if (currentDayIndex > 6) {
-        currentDayIndex = 0;
-      }
-    }
-    let dayCount = 1;
-    while (dayCount <= lastMonthDay.getDate()) {
-      for (let i = daysForRowAdded; i < 7; i++) {
-        let dayClass = 'item';
-        let dataIndex = {
-          'data-index': date.getFullYear().toString() +
-            '-' +
-            fillString((date.getMonth() + 1).toString(), '0', 2, true) +
-            '-' +
-            fillString(dayCount.toString(), '0', 2, true),
-        };
-        if (dayCount === selecteDate.getDate() &&
-          date.getMonth() === selecteDate.getMonth() &&
-          date.getFullYear() === selecteDate.getFullYear()) {
-          dayClass += ' selected';
-        }
-        row.push(h("td", { class: dayClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-              this.onKupDatePickerItemClick(dataIndex['data-index']);
-            } }), dayCount)));
-        dayCount++;
-        if (dayCount > lastMonthDay.getDate()) {
-          break;
-        }
-      }
-      if (row.length > 0) {
-        tbody.push(h("tr", null, row));
-        row = [];
-      }
-      daysForRowAdded = 0;
-    }
-    return (h("table", { id: "calendar" },
-      h("thead", null, thead),
-      h("tbody", null, tbody)));
-  }
-  createMonthsCalendar() {
-    let months = getMonthsAsStringByLocale(DateTimeFormatOptionsMonth.SHORT);
-    let date = this.pickerEl.date;
-    let selecteDate;
-    if (this.value == null || this.value.trim() == '') {
-      selecteDate = new Date();
-    }
-    else {
-      selecteDate = new Date(this.value);
-    }
-    let tbody = [];
-    let row = [];
-    let monthCount = 0;
-    while (monthCount < 12) {
-      for (let i = 0; i < 4; i++) {
-        let monthClass = 'item';
-        let dataIndex = {
-          'data-index': date.getFullYear().toString() +
-            '-' +
-            fillString((monthCount + 1).toString(), '0', 2, true) +
-            '-' +
-            fillString(date.getDate().toString(), '0', 2, true),
-        };
-        if (monthCount === selecteDate.getMonth() &&
-          date.getFullYear() == selecteDate.getFullYear()) {
-          monthClass += ' selected';
-        }
-        row.push(h("td", { class: monthClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-              this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
-            } }), months[monthCount])));
-        monthCount++;
-      }
-      if (row.length > 0) {
-        tbody.push(h("tr", null, row));
-        row = [];
-      }
-    }
-    return (h("table", { id: "calendar" },
-      h("tbody", null, tbody)));
-  }
-  createYearsCalendar() {
-    let date = this.pickerEl.date;
-    let curYear = date.getFullYear();
-    let yearRange = this.getInitEndYear(curYear);
-    let initYear = yearRange.initYear;
-    let endYear = yearRange.endYear;
-    let selecteDate;
-    if (this.value == null || this.value.trim() == '') {
-      selecteDate = new Date();
-    }
-    else {
-      selecteDate = new Date(this.value);
-    }
-    let tbody = [];
-    let row = [];
-    let yearCount = initYear;
-    while (yearCount <= endYear) {
-      for (let i = 0; i < 4; i++) {
-        let yearClass = 'item';
-        let dataIndex = {
-          'data-index': yearCount.toString() +
-            '-' +
-            fillString((date.getMonth() + 1).toString(), '0', 2, true) +
-            '-' +
-            fillString(date.getDate().toString(), '0', 2, true),
-        };
-        if (yearCount === selecteDate.getFullYear()) {
-          yearClass += ' selected';
-        }
-        row.push(h("td", { class: yearClass },
-          h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-              this.onKupDatePickerMonthYearItemClick(dataIndex['data-index']);
-            } }), yearCount)));
-        yearCount++;
-      }
-      if (row.length > 0) {
-        tbody.push(h("tr", null, row));
-        row = [];
-      }
-    }
-    return (h("table", { id: "calendar" },
-      h("tbody", null, tbody)));
-  }
-  changeView() {
-    switch (this.calendarView) {
-      case SourceEvent.DATE: {
-        this.calendarView = SourceEvent.MONTH;
-        break;
-      }
-      case SourceEvent.MONTH: {
-        this.calendarView = SourceEvent.YEAR;
-        break;
-      }
-      case SourceEvent.YEAR: {
-        this.calendarView = SourceEvent.DATE;
-      }
-    }
-    this.refresh();
-  }
-  prevPage() {
-    let date = this.pickerEl.date;
-    let yy = date.getFullYear();
-    let mm = date.getMonth();
-    if (this.calendarView == SourceEvent.DATE) {
-      if (mm < 1) {
-        mm = 11;
-        yy--;
-      }
-      else {
-        mm--;
-      }
-    }
-    if (this.calendarView == SourceEvent.MONTH) {
-      yy--;
-    }
-    if (this.calendarView == SourceEvent.YEAR) {
-      let yearRange = this.getInitEndYear(yy);
-      yy = yearRange.initYear - 1;
-    }
-    date.setFullYear(yy);
-    date.setMonth(mm);
-    this.pickerEl.value = date.toISOString();
-    this.pickerEl.date = date;
-    this.refresh();
-  }
-  nextPage() {
-    let date = this.pickerEl.date;
-    let yy = date.getFullYear();
-    let mm = date.getMonth();
-    if (this.calendarView == SourceEvent.DATE) {
-      if (mm > 10) {
-        mm = 0;
-        yy++;
-      }
-      else {
-        mm++;
-      }
-    }
-    if (this.calendarView == SourceEvent.MONTH) {
-      yy++;
-    }
-    if (this.calendarView == SourceEvent.YEAR) {
-      let yearRange = this.getInitEndYear(yy);
-      yy = yearRange.endYear + 1;
-    }
-    date.setFullYear(yy);
-    date.setMonth(mm);
-    this.pickerEl.value = date.toISOString();
-    this.pickerEl.date = date;
-    this.refresh();
+    const data = {
+      options: {
+        initialValue: this.value,
+        firstDayIndex: this.firstDayIndex,
+        resetStatus: true,
+      },
+    };
+    return (h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, "layout-family": "builtin", "layout-number": "1", "size-x": "300px", "size-y": "300px", "is-menu": true, "onkup-card-click": (ev) => {
+        if (ev.detail.value != null && ev.detail.value != '')
+          this.onKupDatePickerItemClick(ev.detail.value);
+      } }));
   }
   getDateForOutput() {
     if (this.value == null || this.value.trim() == '') {
@@ -652,24 +387,15 @@ export class KupDatePicker {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const 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.getDateForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
+    if (this.pickerContainerEl) {
+      this.pickerContainerEl.remove();
+    }
   }
   static get is() { return "kup-date-picker"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/kup-text-field/kup-text-field.css

@@ -9,6 +9,7 @@
 * @prop --kup-textfield-icon-color: Sets icon color of the component.
 * @prop --kup-textfield-primary-color: Sets primary color of the text field.
 * @prop --kup-textfield-primary-color-rgb: Sets primary color RGB values of the text field (used for shaders).
+* @prop --kup-textfield-text-align: Sets the text alignment of the text field.
 *
 * NOTE: These variables are defined in the "kup-theme.css" file, because they must work even without the kup component (it's a functional component)
 *

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
   font-size: var(--kup-font-size);
+  width: max-content;
 }
 
 #time-picker-div {