@sme.up/ketchup 10.1.0 → 10.2.0

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

@@ -1,3 +1,4 @@
+import { FCellTypes } from "../../f-components/f-cell/f-cell-declarations";
 /**
  * Props of the kup-data-table component.
  * Used to export every prop in an object.
@@ -65,6 +66,7 @@ export var KupDataTableProps;
     KupDataTableProps["totals"] = "Defines the current totals options.";
     KupDataTableProps["transpose"] = "Transposes the data of the data table.";
     KupDataTableProps["updatableData"] = "When set to true, editable cells will be rendered using input components and update button will appair below the matrix";
+    KupDataTableProps["updateOnClick"] = "When set to true, editable checkbox will call update";
 })(KupDataTableProps || (KupDataTableProps = {}));
 export var SortMode;
 (function (SortMode) {
@@ -173,3 +175,14 @@ export var SelectionMode;
     SelectionMode["MULTIPLE"] = "multiple";
     SelectionMode["NONE"] = "none";
 })(SelectionMode || (SelectionMode = {}));
+/**
+ * List of types that can duplicate value in all column's cell
+ */
+export const TypesToDuplicate = [
+    FCellTypes.AUTOCOMPLETE,
+    FCellTypes.COMBOBOX,
+    FCellTypes.DATE,
+    FCellTypes.NUMBER,
+    FCellTypes.STRING,
+    FCellTypes.TIME,
+];

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

@@ -107,11 +107,11 @@ function compareRows(r1, r2, sortObj) {
  * @todo This function can be improved in its speed by a refactor in which from two different cycles of execution for
  *    single filters and global filter, all controls on a single column are done in a single cycle.
  */
-export function filterRows(rows = [], filters = {}, globalFilter = '', columns = [], columnFilters, filtersRows) {
+export function filterRows(rows = [], filters = {}, globalFilter = '', columns = [], columnFilters, filtersRows, visibleColumns) {
     if (filtersRows == null) {
         filtersRows = new FiltersRows();
     }
-    return filtersRows.filterRows(rows, filters, globalFilter, columns, columnFilters);
+    return filtersRows.filterRows(rows, filters, globalFilter, columns, columnFilters, visibleColumns);
 }
 export function groupRows(columns = [], rows = [], groups = [], totals = {}) {
     if (!rows) {
@@ -795,6 +795,7 @@ export function decorateDataTable(data) {
             var _a;
             let cell = row.cells[cellKey];
             const value = cell.value;
+            const decode = cell.decode;
             const options = cell['options'];
             cell.isEditable = (_a = cell.isEditable) !== null && _a !== void 0 ? _a : cell['editable'];
             const shapeAdapters = {
@@ -802,8 +803,10 @@ export function decorateDataTable(data) {
                 [FCellShapes.COMBOBOX]: () => CMBandACPAdapter(value, '', options),
                 [FCellShapes.RADIO]: () => RADAdapter(value, options),
                 [FCellShapes.CHECKBOX]: () => CHKAdapter(value, ''),
-                [FCellShapes.CHIP]: () => CHIAdapter(value),
+                [FCellShapes.CHIP]: () => CHIAdapter(value, decode),
                 [FCellShapes.SWITCH]: () => SWTAdapter(value, ''),
+                [FCellShapes.MULTI_AUTOCOMPLETE]: () => CHIAdapter(value, decode),
+                [FCellShapes.MULTI_COMBOBOX]: () => CHIAdapter(value, decode),
             };
             const adapterFunction = shapeAdapters[cell.shape];
             if (adapterFunction) {

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

@@ -21,10 +21,12 @@ export class KupDataTableState {
         this.showHeader = true;
         this.showLoadMore = false;
         this.showPaginator = true;
+        this.hiddenSubmitButton = false;
         this.sortEnabled = true;
         this.sort = [];
         this.sortableColumnsMutateData = true;
         this.pageSelected = 1;
+        this.selectRowsById = '';
         this.dragEnabled = false;
         this.dropEnabled = false;
         this.showFooter = false;

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

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -188,6 +188,11 @@
     --kup-datatable-font-size,
     var(--kup-font-size)
   );
+  --kup_fcell_line_height_extradense: var(
+    --kup-fcell-line-height-extradense,
+    14px
+  );
+  --kup_fcell_font_size_extradense: var(--kup-fcell-font-size-extradense, 12px);
   --kup_datatable_th_border: var(
     --kup-datatable-th-border,
     1px solid var(--kup-gray-color-30)
@@ -205,6 +210,10 @@
     var(--kup-text-primary)
   );
   --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary));
+  --kup_fcell_padding_extradense: var(
+    --kup-fcell-padding-dense,
+    var(--kup-space-01) var(--kup-space-01)
+  );
   --kup_fcell_padding_dense: var(
     --kup-fcell-padding-dense,
     var(--kup-space-01) var(--kup-space-03)
@@ -329,26 +338,28 @@ table tfoot tr td:last-of-type {
   overflow-x: auto;
 }
 
-.density-dense .header-cell__content {
-  padding: var(--kup-fcell-padding-dense, var(--kup_fcell_padding_dense));
+.density-extra_dense .header-cell__content,
+.density-extra_dense tbody > tr.group td {
+  padding: var(--kup-fcell-padding-extradense, var(--kup_fcell_padding_extradense));
 }
-.density-dense tbody > tr.group td {
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
+.density-extra_dense .header-cell__title {
+  font-size: var(--kup_fcell_font_size_extradense);
 }
-.density-medium .header-cell__content {
-  padding: var(--kup-fcell-padding-medium, var(--kup_fcell_padding_medium));
+.density-extra_dense .group-cell-content > span.text {
+  font-size: var(--kup_fcell_font_size_extradense);
+  line-height: var(--kup_fcell_line_height_extradense);
 }
-.density-medium tbody > tr.group > td {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+.density-dense .header-cell__content,
+.density-dense tbody > tr.group td {
+  padding: var(--kup-fcell-padding-dense, var(--kup_fcell_padding_dense));
 }
-.density-wide .header-cell__content {
-  padding: var(--kup-fcell-padding-wide, var(--kup_fcell_padding_wide));
+.density-medium .header-cell__content,
+.density-medium tbody > tr.group > td {
+  padding: var(--kup-fcell-padding-medium, var(--kup_fcell_padding_medium));
 }
+.density-wide .header-cell__content,
 .density-wide tbody > tr.group > td {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding: var(--kup-fcell-padding-wide, var(--kup_fcell_padding_wide));
 }
 
 .fontsize-small {
@@ -388,7 +399,7 @@ th:last-of-type {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -442,6 +453,7 @@ tbody td {
   font-weight: 400;
   letter-spacing: 0.16px;
   font-size: 13px;
+  outline: none;
 }
 tbody td > * {
   border: none !important;
@@ -473,9 +485,6 @@ tbody tr.group.group-total {
   border-top: none;
   line-height: 0.5em;
 }
-tbody tr.group > td {
-  padding: 0.5em 0;
-}
 tbody tr.group > td .group-cell-content .indent {
   float: left;
   margin-left: 0.25em;
@@ -485,7 +494,7 @@ tbody tr.group > td .group-cell-content > span {
   outline: none;
   margin-left: 0.25em;
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -496,7 +505,7 @@ tbody tr.group > td .group-cell-content .kup-icon {
 tbody tr.group > td.total {
   border-bottom: 1px solid var(--kup-border-subtle-selected);
   text-align: right;
-  padding: 0.5em var(--kup-space-03);
+  padding: 0 var(--kup-space-03) 0.25em var(--kup-space-03);
   font-family: var(--kup_datatable_font_family_monospace);
 }
 tbody tr.group > td.total.negative-number {
@@ -543,6 +552,7 @@ th:hover .kup-icon.overlay-action {
 thead th {
   /** it doesn't work with fixed columns... !!! */
   position: relative;
+  box-sizing: content-box;
 }
 
 th.obj:hover span:not(.overlay-action) {
@@ -566,13 +576,16 @@ th.obj:hover span:not(.overlay-action) {
 .totals-value {
   font-weight: bold;
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
   font-size: 13px;
   font-family: var(--kup_datatable_font_family_monospace);
 }
+.totals-value.danger-text {
+  color: var(--kup-danger-color-60) !important;
+}
 
 .settings-trigger {
   cursor: pointer;
@@ -667,18 +680,22 @@ th.obj:hover span:not(.overlay-action) {
 :host([legacy-look]) {
   --kup-textfield-background-color: transparent;
   --kup-fcell-width: 100%;
-  --kup-fcell-padding-dense: 0px;
-  --kup-dense-legacy-look-padding: var(--kup-space-00) var(--kup-space-03);
-  --kup-textfield-extrasmall-padding: var(--kup-dense-legacy-look-padding);
+  --kup-fcell-padding-extradense: 0px;
+  --kup-extradense-legacy-look-padding: var(--kup-space-00) var(--kup-space-03);
+  --kup-textfield-extrasmall-padding: var(--kup-extradense-legacy-look-padding);
+  --kup-textfield-extrasmall-height: 20px;
 }
 :host([legacy-look]) th .header-cell__content {
   font-family: var(--kup_datatable_font_family_monospace);
   white-space: pre !important;
-  font-size: 11px;
-  padding: var(--kup-dense-legacy-look-padding);
+  font-size: 12px;
+  padding: var(--kup-extradense-legacy-look-padding);
 }
 :host([legacy-look]) .f-cell__text {
-  padding: var(--kup-dense-legacy-look-padding);
+  padding: var(--kup-extradense-legacy-look-padding);
+}
+:host([legacy-look]) .f-cell.extra_dense {
+  min-height: var(--kup_fcell_extradense_min_height);
 }
 :host([legacy-look]) .f-cell.dense {
   min-height: var(--kup_fcell_dense_min_height);
@@ -689,6 +706,10 @@ th.obj:hover span:not(.overlay-action) {
 :host([legacy-look]) .f-cell.wide {
   min-height: var(--kup_fcell_wide_min_height);
 }
+:host([legacy-look]) table.row-separation > tbody > tr > td {
+  box-shadow: 0px 1px var(--kup-border-subtle);
+  border-bottom: 0px;
+}
 
 .paginator-wrapper {
   display: flex;
@@ -781,7 +802,7 @@ table.custom-size tfoot td.fixed-column {
 tr:hover .fixed-row,
 tr:hover .fixed-column,
 tr:hover .fixed-column-r {
-  background-color: var(--kup-gray-color-20);
+  background-color: var(--kup-gray-color-20-hover);
 }
 
 tr.selected .fixed-column,
@@ -816,13 +837,13 @@ thead tr .fixed-column,
 thead tr:hover:not(.group):not(.selected) .fixed-column,
 thead tr .fixed-column-r,
 thead tr:hover:not(.group):not(.selected) .fixed-column-r {
-  background-color: var(--kup-gray-color-20);
+  background-color: var(--kup-gray-color-20-hover);
 }
 
 tfoot tr:hover:not(.group):not(.selected) .fixed-row,
 tfoot tr:hover:not(.group):not(.selected) .fixed-column,
 tfoot tr:hover:not(.group):not(.selected) .fixed-column-r {
-  background-color: var(--kup-gray-color-20);
+  background-color: var(--kup-gray-color-20-hover);
 }
 
 :host([drag-enabled]) tr {
@@ -900,7 +921,7 @@ th[kup-draggable] {
   background-image: linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075));
 }
 :host(.kup-cross-selection) #kup-component tr.selected td {
-  background-color: var(--kup-gray-color-20);
+  background-color: var(--kup-gray-color-20-hover);
 }
 :host(.kup-cross-selection) #kup-component tr.selected td:first-of-type {
   box-shadow: inset 4px 0px 0px 0px var(--kup-secondary-color);