@sme.up/ketchup 5.2.0-SNAPSHOT → 6.0.0

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

@@ -766,6 +766,41 @@
   outline: none;
 }
 
+.built-in-layout-5 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 0.5em;
+}
+.built-in-layout-5 > table {
+  width: 100%;
+}
+.built-in-layout-5 > table > tr > td > div.value {
+  text-align: right;
+  color: var(--kup-primary-color);
+  border-bottom: 1px solid var(--kup-border-color);
+  min-height: 1.5em;
+}
+.built-in-layout-5 > table > tr > td > .f-button {
+  display: flex;
+  justify-content: center;
+}
+.built-in-layout-5 > table > tr > td > div.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;
+}
+.built-in-layout-5 > table > tr > td > div.number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -2247,6 +2282,7 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
+  --kup-button-font-size: 0.75em;
   font-size: 1.25em;
   margin-top: -0.5em;
   padding: 0 0.25em 0.25em;
@@ -2345,15 +2381,16 @@
 }
 
 .standard-layout-15 {
-  outline: none;
-  display: block;
-  font-size: var(--kup-font-size);
   background: var(--kup-background-color);
-  color: var(--kup-text-color);
-  box-shadow: var(--kup-box-shadow);
   border-radius: 3px;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  color: var(--kup-text-color);
+  display: block;
+  font-size: var(--kup-font-size);
+  outline: none;
 }
 .standard-layout-15 .section-1 {
+  --kup-button-font-size: 0.75em;
   box-sizing: border-box;
   display: flex;
   padding: 1em;
@@ -2370,13 +2407,19 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-15 .section-1 .title {
+  align-items: center;
+  display: flex;
   font-size: 1.25em;
+  font-weight: 600;
   padding: 0 0.25em 0.25em;
   text-align: left;
 }
 .standard-layout-15 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .standard-layout-15 .section-1 .title .label:hover {
   text-decoration: underline;
@@ -2393,6 +2436,7 @@
   width: auto;
 }
 .standard-layout-15 .section-1 .info .value {
+  font-weight: 600;
   width: 100%;
 }
 .standard-layout-15 .section-2 {
@@ -2406,9 +2450,11 @@
 .standard-layout-15 .section-2 .info {
   box-sizing: border-box;
   height: 100%;
+  overflow: auto;
   padding: 1.25em;
 }
 .standard-layout-15 .section-2 .detail-row {
+  align-items: center;
   display: flex;
   justify-content: space-between;
 }
@@ -2419,11 +2465,19 @@
   color: rgba(var(--kup-text-color-rgb), 0.5);
   margin-top: 0.175em;
   max-width: 320px;
+  padding-right: 1.25em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .standard-layout-15 .section-2 .detail-row__value {
   color: var(--kup-text-color);
-  font-size: 120%;
+  font-size: 105%;
+  font-weight: 600;
   max-width: 320px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .standard-layout-15 .section-2 kup-tree {
   text-align: left;
@@ -2442,8 +2496,7 @@
 .standard-layout-15 #open-in-new,
 .standard-layout-15 #search,
 .standard-layout-15 #new {
-  margin: 0;
-  display: inline-flex;
+  margin: 0 0 0.5em 0;
 }
 
 /**

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

@@ -83,7 +83,7 @@ export class KupCard {
     this.scalingActive = false;
     this.componentWrapper = null;
     this.colorPicker = null;
-    this.firstColorPickerChange = null;
+    this.firstColorPickerChange = true;
   }
   onKupClick(id, value) {
     this.kupClick.emit({
@@ -256,7 +256,6 @@ export class KupCard {
           const color = colorPickerOptions
             ? colorPickerOptions.initialValue
             : null;
-          this.firstColorPickerChange = true;
           if (!this.colorPicker) {
             this.colorPicker = new Picker({
               alpha: false,
@@ -351,6 +350,7 @@ export class KupCard {
     root.addEventListener('kup-timepicker-textfieldsubmit', this.cardEvent);
     root.addEventListener('kup-tree-dynamicmassexpansion', this.cardEvent);
     root.addEventListener('kup-tree-buttonclick', this.cardEvent);
+    root.addEventListener('kup-tree-didunload', this.cardEvent);
     root.addEventListener('kup-tree-nodecollapse', this.cardEvent);
     root.addEventListener('kup-tree-nodedblclick', this.cardEvent);
     root.addEventListener('kup-tree-nodeexpand', this.cardEvent);

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

@@ -6,6 +6,7 @@ import { FChipType } from '../../../f-components/f-chip/f-chip-declarations';
 import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
 import { KupColumnMenuIds } from '../../../utils/kup-column-menu/kup-column-menu-declarations';
 import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
+const dom = document.documentElement;
 /**
  * 1st standard card layout, inspired by Material Design.
  * @param {KupCard} component - Card component.
@@ -592,7 +593,7 @@ export function create14(component) {
   if (tabbarArray[0] && tabbarArray[0].data) {
     for (let index = 0; index < tabbarArray[0].data.length; index++) {
       const tab = tabbarArray[0].data[index];
-      tabsValues.push(tab.value);
+      tabsValues.push(tab.id);
       if (tab.active) {
         visibleView = index + 1;
       }
@@ -729,11 +730,19 @@ export function create15(component) {
   }
   // Setting up buttons.
   const buttonsIds = [];
+  const genericButtons = [];
+  const isReservedID = (id) => {
+    return (id === KupColumnMenuIds.BUTTON_OPEN_IN_NEW ||
+      id === KupColumnMenuIds.BUTTON_SEARCH);
+  };
   for (let index = 0; index < buttonArray.length; index++) {
     const button = buttonArray[index];
     if (button['id']) {
       buttonsIds.push(button['id']);
     }
+    if (!isReservedID(button['id'])) {
+      genericButtons.push(button);
+    }
   }
   return (h("div", { class: `standard-layout-${component.layoutNumber}` },
     h("div", { class: "section-1" },
@@ -757,9 +766,8 @@ export function create15(component) {
         h("div", { class: "info" }, sectionTwoDetails.length > 0
           ? sectionTwoDetails
           : null)),
-      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` },
-        h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0])))),
-    buttonArray.length > 0 ? (h("div", { class: "section-3" },
-      compList(buttonArray.slice(0, 4), 'button'),
-      h("kup-button", { id: "view-selector", icon: "menu" }))) : null));
+      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0]))) : null)),
+    genericButtons.length > 0 ? (h("div", { class: "section-3" },
+      compList(genericButtons.slice(0, 5), 'button'),
+      h("kup-button", { title: dom.ketchup.language.translate(KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" }))) : null));
 }

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

@@ -146,7 +146,7 @@ export class KupCombobox {
     });
   }
   onKupItemClick(e) {
-    this.onKupChange(e.detail.selected.value);
+    this.onKupChange(e.detail.selected.id);
     __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
     if (__classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f")) {
       __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").focus();

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

@@ -47,7 +47,6 @@ export var KupDataTableProps;
   KupDataTableProps["showGroups"] = "When set to true enables the column grouping.";
   KupDataTableProps["showHeader"] = "Enables rendering of the table header.";
   KupDataTableProps["showLoadMore"] = "If set to true, displays the button to load more records.";
-  KupDataTableProps["showTooltipOnRightClick"] = "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.";
   KupDataTableProps["sort"] = "Defines the current sorting options.";
   KupDataTableProps["stateId"] = "";
   KupDataTableProps["store"] = "";
@@ -55,9 +54,8 @@ export var KupDataTableProps;
   KupDataTableProps["sortEnabled"] = "When set to true enables the sorting of the columns by clicking on the column header.";
   KupDataTableProps["tableHeight"] = "Sets the height of the table.";
   KupDataTableProps["tableWidth"] = "Sets the width of the table.";
-  KupDataTableProps["tooltipDetailTimeout"] = "Defines the timeout for tooltip detail";
-  KupDataTableProps["tooltipEnabled"] = "Enable show tooltip";
   KupDataTableProps["totals"] = "Defines the current totals options.";
+  KupDataTableProps["transpose"] = "Transposes the data of the data table.";
 })(KupDataTableProps || (KupDataTableProps = {}));
 export var SortMode;
 (function (SortMode) {

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

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

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

@@ -6,7 +6,6 @@ import { numberToFormattedStringNumber, identify, getProps, setProps, } from '..
 import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupDataTableState } from './kup-data-table-state';
-import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { FImage } from '../../f-components/f-image/f-image';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FChip } from '../../f-components/f-chip/f-chip';
@@ -219,10 +218,6 @@ export class KupDataTable {
      * If set to true, displays the button to load more records.
      */
     this.showLoadMore = false;
-    /**
-     * If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.
-     */
-    this.showTooltipOnRightClick = true;
     /**
      * Defines the current sorting options.
      */
@@ -244,10 +239,6 @@ export class KupDataTable {
      * Sets the width of the table.
      */
     this.tableWidth = undefined;
-    /**
-     * Enable show tooltip
-     */
-    this.tooltipEnabled = true;
     /**
      * Transposes the data of the data table
      */
@@ -265,6 +256,7 @@ export class KupDataTable {
     this.openedTotalMenu = null;
     this.openedCustomSettings = false;
     this.fontsize = 'medium';
+    this.initialized = false;
     this.rowsLength = 0;
     this.paginatedRowsLength = 0;
     /**
@@ -564,7 +556,9 @@ export class KupDataTable {
     }
   }
   recalculateData() {
-    this.calculateData();
+    if (this.initialized) {
+      this.calculateData();
+    }
   }
   /**
    * Closes any opened column menu.
@@ -603,6 +597,12 @@ export class KupDataTable {
   async getProps(descriptions) {
     return getProps(this, KupDataTableProps, descriptions);
   }
+  /**
+   * This method will get the selected rows of the component.
+   */
+  async getSelectedRows() {
+    return this.selectedRows;
+  }
   /**
    * Hides the given column.
    * @param {KupDataColumn} column - Column to hide.
@@ -664,7 +664,7 @@ export class KupDataTable {
     }
     this.columnMenuCard.setAttribute('data-column', column);
     this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), column));
-    this.columnMenuInstance.open(this, column, this.tooltip);
+    this.columnMenuInstance.open(this, column);
     this.columnMenuInstance.reposition(this, this.columnMenuCard);
     this.kupDataTableColumnMenu.emit({
       comp: this,
@@ -898,7 +898,6 @@ export class KupDataTable {
     this.groups = [];
     // update data
     this.data = Object.assign({}, totalsMatrixData);
-    // console.log(this.data);
     // calc totals
     // distinct becomes count
     // count becomes sum
@@ -1251,9 +1250,13 @@ export class KupDataTable {
     }
     if (this.dropEnabled) {
       const dataCb = () => {
-        const receivingDetails = this.getEventDetails([
-          this.rootElement.shadowRoot.querySelector('td:hover'),
-        ]);
+        const cell = this.rootElement.shadowRoot.querySelector('td:hover');
+        if (!cell) {
+          this.kupManager.debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
+          return;
+        }
+        const path = this.getEventPath(cell);
+        const receivingDetails = this.getEventDetails(path);
         return {
           cell: receivingDetails.cell,
           column: receivingDetails.column,
@@ -1387,6 +1390,7 @@ export class KupDataTable {
       CSS.supports('position', '-webkit-sticky') ||
         !!(window && window.safari);
     this.calculateData();
+    this.initialized = true;
   }
   componentWillRender() {
     this.kupManager.debug.logRender(this, false);
@@ -1432,9 +1436,8 @@ export class KupDataTable {
     this.kupManager.debug.logLoad(this, true);
   }
   //======== Utility methods ========
-  getEventPath(e) {
-    let path = [];
-    let currentEl = e.target;
+  getEventPath(currentEl) {
+    const path = [];
     while (currentEl &&
       currentEl !== this.rootElement &&
       currentEl !== document.body) {
@@ -1632,7 +1635,7 @@ export class KupDataTable {
     this.detailCard.style.transform = 'translate(' + x + 'px,' + y + 'px)';
     this.rootElement.shadowRoot.append(this.detailCard);
   }
-  getEventDetails(path) {
+  getEventDetails(path, e) {
     let isHeader, isBody, isFooter, td, textfield, th, tr, filterRemove;
     if (path) {
       for (let i = path.length - 1; i >= 0; i--) {
@@ -1716,6 +1719,7 @@ export class KupDataTable {
       column: column ? column : null,
       filterRemove: filterRemove ? filterRemove : null,
       isGroupRow: isGroupRow,
+      originalEvent: e,
       row: row ? row : null,
       td: td ? td : null,
       textfield: textfield ? textfield : null,
@@ -1724,7 +1728,7 @@ export class KupDataTable {
     };
   }
   clickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         if (details.filterRemove) {
@@ -1763,26 +1767,13 @@ export class KupDataTable {
     return details;
   }
   contextMenuHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
         return details;
       }
     }
-    else if (details.area === 'body') {
-      const _hasTooltip = details.cell.obj
-        ? !this.kupManager.objects.isEmptyKupObj(details.cell.obj)
-        : false;
-      if (_hasTooltip &&
-        this.showTooltipOnRightClick &&
-        details.td &&
-        details.cell) {
-        const columnName = details.column ? details.column.name : null;
-        setTooltip(e, details.row.id, columnName, details.cell, this.tooltip);
-        return details;
-      }
-    }
     else if (details.area === 'footer') {
       if (details.td && details.column) {
         this.totalMenuCoords = { x: e.clientX, y: e.clientY };
@@ -1793,7 +1784,7 @@ export class KupDataTable {
     return details;
   }
   dblClickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'body') {
       if (this.selection == SelectionMode.MULTIPLE) {
         this.resetSelectedRows();
@@ -2230,9 +2221,6 @@ export class KupDataTable {
     this.openedTotalMenu = null;
     this.kupManager.removeClickCallback(this.clickCb);
   }
-  closeMenuAndTooltip() {
-    unsetTooltip(this.tooltip);
-  }
   isOpenedTotalMenuForColumn(column) {
     return this.openedTotalMenu === column;
   }
@@ -2546,14 +2534,6 @@ export class KupDataTable {
     });
     return [multiSelectColumn, actionsColumn, ...dataColumns];
   }
-  renderTooltip() {
-    if (this.tooltipEnabled == false) {
-      return null;
-    }
-    return (h("kup-tooltip", { class: "datatable-tooltip", owner: this.rootElement.tagName, loadTimeout: this.showTooltipOnRightClick == true
-        ? 0
-        : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
-  }
   areTotalsSelected(column) {
     return this.totals && this.totals[column.name] ? true : false;
   }
@@ -2564,7 +2544,7 @@ export class KupDataTable {
       // must do this
       // otherwise does not fire the watcher
       const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.value;
+      const value = event.detail.selected.id;
       if (value === TotalLabel.CANC) {
         if (this.totals && this.totals[column.name]) {
           delete totalsCopy[column.name];
@@ -2594,7 +2574,6 @@ export class KupDataTable {
     }
   }
   onTotalMenuOpen(column) {
-    this.closeMenuAndTooltip();
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
@@ -2987,25 +2966,8 @@ export class KupDataTable {
             cellStyle['width'] = colWidth;
           }
         }
-        /**
-         * Controls if current cell needs a tooltip and eventually adds it.
-         * @todo When the option forceOneLine is active, there is a problem with the current implementation of the tooltip. See documentation in the mauer wiki for better understanding.
-         */
-        const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(cell.obj);
         let eventHandlers = undefined;
         let title = undefined;
-        if (_hasTooltip) {
-          if (!this.showTooltipOnRightClick) {
-            eventHandlers = {
-              onMouseEnter: (ev) => {
-                setTooltip(ev, row.id, currentColumn.name, cell, this.tooltip);
-              },
-              onMouseLeave: () => {
-                unsetTooltip(this.tooltip);
-              },
-            };
-          }
-        }
         cellClass = Object.assign({}, cellClass);
         return (h("td", Object.assign({ title: title, colSpan: cell.span && cell.span.col ? cell.span.col : null, rowSpan: cell.span && cell.span.row ? cell.span.row : null, "data-cell": cell, "data-column": name, "data-row": row, style: cellStyle, class: cellClass }, eventHandlers), jsxCell));
       });
@@ -3360,7 +3322,6 @@ export class KupDataTable {
     // for multi selection purposes, this should be called before this.renderedRows has been evaluated
     const header = this.renderHeader();
     const stickyHeader = this.renderStickyHeader();
-    const tooltip = this.renderTooltip();
     let paginatorTop = undefined;
     let paginatorBottom = undefined;
     if ((!this.lazyLoadRows && this.rowsLength > this.rowsPerPage) ||
@@ -3473,7 +3434,6 @@ export class KupDataTable {
             : null,
           h("table", { class: tableClass, ref: (el) => (this.tableRef = el), onMouseLeave: (ev) => {
               ev.stopPropagation();
-              unsetTooltip(this.tooltip);
             }, onContextMenu: (e) => {
               e.preventDefault();
             } },
@@ -3484,7 +3444,6 @@ export class KupDataTable {
               ? this.renderFooter()
               : null),
           stickyEl),
-        tooltip,
         paginatorBottom)));
     return compCreated;
   }
@@ -4411,24 +4370,6 @@ export class KupDataTable {
       "reflect": false,
       "defaultValue": "false"
     },
-    "showTooltipOnRightClick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver."
-      },
-      "attribute": "show-tooltip-on-right-click",
-      "reflect": false,
-      "defaultValue": "true"
-    },
     "sort": {
       "type": "unknown",
       "mutable": true,
@@ -4525,58 +4466,6 @@ export class KupDataTable {
       "reflect": false,
       "defaultValue": "undefined"
     },
-    "tooltipDetailTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip detail"
-      },
-      "attribute": "tooltip-detail-timeout",
-      "reflect": false
-    },
-    "tooltipEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable show tooltip"
-      },
-      "attribute": "tooltip-enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipLoadTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip load"
-      },
-      "attribute": "tooltip-load-timeout",
-      "reflect": false
-    },
     "totals": {
       "type": "unknown",
       "mutable": true,
@@ -4950,6 +4839,29 @@ export class KupDataTable {
           }]
       }
     },
+    "getSelectedRows": {
+      "complexType": {
+        "signature": "() => Promise<Array<KupDataTableRow>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "KupDataTableRow": {
+            "location": "import",
+            "path": "./kup-data-table-declarations"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<KupDataTableRow[]>"
+      },
+      "docs": {
+        "text": "This method will get the selected rows of the component.",
+        "tags": []
+      }
+    },
     "hideColumn": {
       "complexType": {
         "signature": "(column: KupDataColumn) => Promise<void>",

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

@@ -344,7 +344,7 @@ export class KupDatePicker {
         resetStatus: true,
       },
     };
-    return (h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "300px", isMenu: true, "onkup-card-click": (ev) => {
+    return (h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
         if (ev.detail.value != null && ev.detail.value != '')
           this.onKupDatePickerItemClick(ev.detail.value);
       } }));

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

@@ -77,6 +77,7 @@
   --kup-textfield-primary-color-rgb: var(--kup-drawer-color-rgb);
   --kup-tree-color: var(--kup-drawer-color);
   --kup-tree-color-rgb: var(--kup-drawer-color-rgb);
+  --kup-tree-filter-background-color: var(--kup-drawer-background-color);
   --kup-tree-icon-color: var(--kup-drawer-color);
   color: var(--kup-drawer-color);
   fill: var(--kup-drawer-color);

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

@@ -125,9 +125,16 @@ export class KupDrawer {
   render() {
     return (h(Host, { "kup-opened": this.opened },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { class: "backdrop", onPointerDown: (e) => {
+      h("div", { class: "backdrop", onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, onPointerDown: (e) => {
+          e.preventDefault();
           e.stopPropagation();
           this.close();
+        }, onTouchStart: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
         } }),
       h("div", { id: componentWrapperId },
         h("div", { class: drawerClass }, this.content()))));