Merge pull request #1970 from smeup/fix/box/indexOfProblem

Fix/box/index of problem

packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss

@@ -336,17 +336,17 @@ th {
   }
 
   &__drag-handler {
-    background: rgba(var(--kup-title-color-rgb), 0.25);
+    background: var(--kup-border-strong);
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
     touch-action: none;
     user-select: none;
-    width: var(--kup_datatable_th_resize_handle_width);
+    width: var(--kup-space-01);
 
     &:hover {
-      background: rgba(var(--kup-title-color-rgb), 0.5);
+      background: var(--kup-border-strong-hover);
     }
   }
 

packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx

@@ -16,13 +16,15 @@ import {
     KupAutocompleteEventPayload,
     KupComboboxIconClickEventPayload,
     KupDataCell,
+    KupDataTableDataset,
 } from '../../components';
 import { FButton } from '../../f-components/f-button/f-button';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import {
     FCellEventPayload,
     FCellEvents,
     FCellProps,
+    FCellShapes,
     FCellTypes,
 } from '../../f-components/f-cell/f-cell-declarations';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
@@ -54,6 +56,7 @@ import {
     KupInputPanelSubmit,
 } from './kup-input-panel-declarations';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupDataTable } from '../kup-data-table/kup-data-table';
 
 const dom: KupDom = document.documentElement as KupDom;
 @Component({
@@ -526,11 +529,20 @@ export class KupInputPanel {
                             (c) => c.column.name === key
                         )?.cell;
 
+                        let value: any = cellState?.value;
+
+                        if (cellState.shape === FCellShapes.TABLE) {
+                            value = this.#getTableUpdatedCell(
+                                cellState.data,
+                                key
+                            );
+                        }
+
                         return {
                             ...cells,
                             [key]: {
                                 ...curr.row.cells[key],
-                                value: cellState?.value,
+                                value,
                                 obj: cellState?.obj,
                             },
                         };
@@ -787,16 +799,86 @@ export class KupInputPanel {
         cell: KupInputPanelCell,
         id: string
     ) {
-        if ((cell.value as any)?.type !== 'SmeupDataTable') {
+        try {
+            const data = JSON.parse(cell.value);
+
+            if (!data) {
+                this.#kupManager.debug.logMessage(
+                    this,
+                    `Empty value for ${id} cell.`,
+                    KupDebugCategory.WARNING
+                );
+                return null;
+            }
+
+            if ((data as any).type !== 'SmeupDataTable') {
+                this.#kupManager.debug.logMessage(
+                    this,
+                    `Wrong data table type for ${id} cell. Type \`SmeupDataTable\` in value expected`,
+                    KupDebugCategory.ERROR
+                );
+                return null;
+            }
+
+            return data;
+        } catch (e) {
             this.#kupManager.debug.logMessage(
                 this,
-                `Wrong data table type for ${id} cell. Type \`SmeupDataTable\` in value expected`,
+                `Invalid value for ${id} cell. Type \`SmeupDataTable\` expected`,
                 KupDebugCategory.ERROR
             );
             return null;
         }
+    }
 
-        return cell.value;
+    #getTableUpdatedCell(
+        tableValue: KupDataTableDataset,
+        cellId: string
+    ): KupDataTableDataset {
+        const updated: KupDataTableDataset = {
+            ...tableValue,
+            rows: [],
+        };
+
+        const editableColsId = tableValue.columns
+            .filter((col) => col.isEditable)
+            .map((col) => col.name);
+
+        if (!editableColsId.length) {
+            return updated;
+        }
+
+        try {
+            const beforeTableValue = JSON.parse(
+                this.#originalData.rows[0].cells[cellId].value
+            );
+
+            updated.rows = tableValue.rows
+                .map((row, i) =>
+                    editableColsId.reduce((cells, colId) => {
+                        const changed =
+                            row.cells[colId].value !==
+                            beforeTableValue.rows[i].cells[colId].value;
+
+                        if (changed) {
+                            return {
+                                ...cells,
+                                [colId]: {
+                                    ...beforeTableValue.rows[i].cells[colId],
+                                    value: row.cells[colId].value,
+                                },
+                            };
+                        }
+
+                        return cells;
+                    }, {})
+                )
+                .filter((row) => Object.keys(row).length);
+
+            return updated;
+        } catch (e) {
+            return updated;
+        }
     }
 
     #optionsTreeComboAdapter(options: any, currentValue: string) {

packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss

@@ -70,7 +70,7 @@
     --kup-tree-text-hover-color,
     var(--kup-text-primary)
   );
-  --kup_tree_icon_color: var(--kup-tree-icons-color, var(--kup-text-secondary));
+  --kup-icon-color: var(--kup-tree-icon-color, var(--kup-text-secondary));
 
   display: block;
   font-family: var(--kup_tree_font_family);

packages/ketchup/src/f-components/f-button/f-button.scss

@@ -15,6 +15,10 @@
     --kup-button-text-color,
     var(--kup-primary-color-60-rgb)
   );
+  --kup_button_raised_icon_color_focus: var(
+    --kup-button-raised-icon-color-focus,
+    var(--kup-gray-color-0)
+  );
   --kup_button_border_color: var(
     --kup-button-border-color,
     var(--kup-primary-color-60)
@@ -191,6 +195,10 @@
         --kup_button_border_color_focus: var(--kup-primary-color-90);
         background-color: var(--kup-primary-color-80);
         border-color: var(--kup_button_border_color_focus);
+        .f-image__icon {
+          background: var(--kup_button_raised_icon_color_focus) !important;
+          color: var(--kup-primary-color-60);
+        }
       }
 
       &:active {

packages/ketchup/src/f-components/f-cell/f-cell.scss

@@ -7,6 +7,18 @@
   );
   --kup_cell_font_size: var(--kup-cell-font-size);
   --kup_cell_text_color: var(--kup-cell-text-color);
+  --kup_fcell_padding_dense: var(
+    --kup-fcell-padding-dense,
+    var(--kup-space-01) var(--kup-space-03)
+  );
+  --kup_fcell_padding_medium: var(
+    --kup-fcell-padding-medium,
+    var(--kup-space-02) var(--kup-space-03)
+  );
+  --kup_fcell_padding_wide: var(
+    --kup-fcell-padding-wide,
+    var(--kup-space-04) var(--kup-space-03)
+  );
 
   background: var(--kup_cell_background);
   box-sizing: border-box;
@@ -234,8 +246,8 @@
   }
 
   &.primary-text {
-    --kup-textfield-color: var(--kup-primary-color) !important;
-    color: var(--kup-primary-color) !important;
+    --kup-textfield-color: var(--kup-primary-color-60) !important;
+    color: var(--kup-primary-color-60) !important;
   }
 
   &.secondary-text {
@@ -249,13 +261,13 @@
   }
 
   &.warning-text {
-    --kup-textfield-color: var(--kup-warning-color) !important;
-    color: var(--kup-warning-color) !important;
+    --kup-textfield-color: var(--kup-warning-color-40) !important;
+    color: var(--kup-warning-color-40) !important;
   }
 
   &.danger-text {
-    --kup-textfield-color: var(--kup-danger-color) !important;
-    color: var(--kup-danger-color) !important;
+    --kup-textfield-color: var(--kup-danger-color-60) !important;
+    color: var(--kup-danger-color-60) !important;
   }
 
   &.purple-text {
@@ -269,11 +281,12 @@
   }
 
   &.warning-bg {
-    background: var(--kup-warning-color) !important;
+    background: var(--kup-warning-color-40) !important;
+    color: var(--kup-gray-color-0) !important;
   }
 
   &.danger-bg {
-    background: var(--kup-danger-color) !important;
+    background: var(--kup-danger-color-60) !important;
     color: white !important;
   }
 
@@ -426,13 +439,13 @@
 
   &.c-warning-bg {
     .f-cell__content {
-      background: var(--kup-warning-color) !important;
+      background: var(--kup-warning-color-40) !important;
     }
   }
 
   &.c-danger-bg {
     .f-cell__content {
-      background: var(--kup-danger-color) !important;
+      background: var(--kup-danger-color-60) !important;
       color: white !important;
     }
   }
@@ -477,19 +490,19 @@
     --kup-textfield-fullwidth-padding: 0px;
     --kup-checkbox-padding: 0px;
     --kup-chip-margin: 0 4px;
-    padding: 0.2em 0.6em;
+    padding: var(--kup_fcell_padding_dense);
   }
 
   &.medium {
     --kup-textfield-fullwidth-height: 36px;
     --kup-textfield-fullwidth-padding: 0px;
-    padding: 0.5em 0.6em;
+    padding: var(--kup_fcell_padding_medium);
   }
 
   &.wide {
     --kup-textfield-fullwidth-height: 50px;
     --kup-textfield-fullwidth-padding: 0px;
-    padding: 1em 0.6em;
+    padding: var(--kup_fcell_padding_wide);
   }
 }
 

packages/ketchup/src/f-components/f-image/f-image.tsx

@@ -86,7 +86,9 @@ function createIcon(
         [iconClass]: true,
     };
     const style: GenericObject = {
-        background: color ? color : `var(--kup-text-secondary)`,
+        background: color
+            ? color
+            : `var(--kup-icon-color,var(--kup-text-secondary))`,
     };
     if (icon.indexOf('--kup') > -1) {
         let themeIcon: string = icon.replace('--', '');

packages/ketchup/src/managers/kup-theme/kup-theme-application.scss

@@ -42,6 +42,8 @@
   --kup-border-subtle-selected: var(--kup-gray-color-30);
   --kup-border-subtle-focus: var(--kup-gray-color-40);
   --kup-border-strong: var(--kup-gray-color-50);
+  --kup-border-strong-hover: var(--kup-gray-color-50-hover);
+  --kup-border-strong-focus: var(--kup-gray-color-60);
   --kup-border-disabled: var(--kup-gray-color-30);
 
   // TEXT