From e4b7ac12128a7a550574b0f9f4a8b69e19715c35 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Fri, 22 Mar 2024 10:24:04 +0000
Subject: [PATCH 1/3] feat: build ketchup

---
 packages/ketchup/src/assets/input-panel.js    |  7 +--
 .../src/components/kup-autocomplete/readme.md |  2 +
 .../src/components/kup-badge/readme.md        |  2 +
 .../src/components/kup-button-list/readme.md  |  2 +
 .../src/components/kup-chart/readme.md        |  2 +
 .../ketchup/src/components/kup-chip/readme.md |  2 +
 .../src/components/kup-color-picker/readme.md |  2 +
 .../src/components/kup-combobox/readme.md     |  2 +
 .../src/components/kup-date-picker/readme.md  |  2 +
 .../src/components/kup-gauge/readme.md        |  2 +
 .../src/components/kup-image/readme.md        |  2 +
 .../kup-input-panel/kup-input-panel.tsx       | 39 ++++++++++++----
 .../src/components/kup-input-panel/readme.md  | 45 +++++++++++++++++--
 .../src/components/kup-progress-bar/readme.md |  2 +
 .../src/components/kup-rating/readme.md       |  2 +
 .../src/components/kup-text-field/readme.md   |  2 +
 .../src/components/kup-time-picker/readme.md  |  2 +
 .../src/f-components/f-cell/f-cell.tsx        |  2 +
 .../src/f-components/f-chip/f-chip.tsx        |  1 +
 .../kup-theme/kup-theme-declarations.ts       |  3 ++
 20 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 8cd626a28d..eff89f53ff 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -43,7 +43,7 @@ const data = {
         {
             name: 'BUT',
             title: 'Buttons list',
-            visible: false,
+            visible: true,
         },
     ],
     rows: [
@@ -144,9 +144,10 @@ const data = {
                     value: '8;4;5',
                 },
                 CHI: {
-                    // data: {},
                     shape: 'CHI',
-                    value: 'Chipp',
+                    value: 'Chi',
+                    editable: true,
+                    options: [{ id: 'Chi', label: 'Chip' }],
                 },
                 BUT: {
                     cssClass: 'strong-text',
diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md
index 3f5eb0bddc..7e8fd0be9c 100644
--- a/packages/ketchup/src/components/kup-autocomplete/readme.md
+++ b/packages/ketchup/src/components/kup-autocomplete/readme.md
@@ -124,6 +124,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -205,6 +206,7 @@ graph TD;
   kup-box --> kup-autocomplete
   kup-cell --> kup-autocomplete
   kup-image-list --> kup-autocomplete
+  kup-input-panel --> kup-autocomplete
   style kup-autocomplete fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-badge/readme.md b/packages/ketchup/src/components/kup-badge/readme.md
index 3ead4cc4ee..60880f30d0 100644
--- a/packages/ketchup/src/components/kup-badge/readme.md
+++ b/packages/ketchup/src/components/kup-badge/readme.md
@@ -98,6 +98,7 @@ Type: `Promise<void>`
  - [kup-form](../kup-form)
  - [kup-image](../kup-image)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-list](../kup-list)
  - [kup-magic-box](../kup-magic-box)
  - [kup-snackbar](../kup-snackbar)
@@ -164,6 +165,7 @@ graph TD;
   kup-dashboard --> kup-badge
   kup-family-tree --> kup-badge
   kup-image-list --> kup-badge
+  kup-input-panel --> kup-badge
   kup-magic-box --> kup-badge
   kup-snackbar --> kup-badge
   style kup-badge fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md
index 3f6445bd6d..f2a174d863 100644
--- a/packages/ketchup/src/components/kup-button-list/readme.md
+++ b/packages/ketchup/src/components/kup-button-list/readme.md
@@ -94,6 +94,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
@@ -177,6 +178,7 @@ graph TD;
   kup-box --> kup-button-list
   kup-cell --> kup-button-list
   kup-image-list --> kup-button-list
+  kup-input-panel --> kup-button-list
   kup-magic-box --> kup-button-list
   style kup-button-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/ketchup/src/components/kup-chart/readme.md b/packages/ketchup/src/components/kup-chart/readme.md
index 9bbad25441..ba2198351b 100644
--- a/packages/ketchup/src/components/kup-chart/readme.md
+++ b/packages/ketchup/src/components/kup-chart/readme.md
@@ -102,6 +102,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
@@ -183,6 +184,7 @@ graph TD;
   kup-box --> kup-chart
   kup-cell --> kup-chart
   kup-image-list --> kup-chart
+  kup-input-panel --> kup-chart
   kup-magic-box --> kup-chart
   style kup-chart fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md
index 27cf264aaf..a5f516b58f 100644
--- a/packages/ketchup/src/components/kup-chip/readme.md
+++ b/packages/ketchup/src/components/kup-chip/readme.md
@@ -99,6 +99,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
@@ -181,6 +182,7 @@ graph TD;
   kup-box --> kup-chip
   kup-cell --> kup-chip
   kup-image-list --> kup-chip
+  kup-input-panel --> kup-chip
   kup-magic-box --> kup-chip
   style kup-chip fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/ketchup/src/components/kup-color-picker/readme.md b/packages/ketchup/src/components/kup-color-picker/readme.md
index 66e98d7dbe..48057e6da1 100644
--- a/packages/ketchup/src/components/kup-color-picker/readme.md
+++ b/packages/ketchup/src/components/kup-color-picker/readme.md
@@ -114,6 +114,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -194,6 +195,7 @@ graph TD;
   kup-box --> kup-color-picker
   kup-cell --> kup-color-picker
   kup-image-list --> kup-color-picker
+  kup-input-panel --> kup-color-picker
   style kup-color-picker fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md
index 51caba25fc..4db298c679 100644
--- a/packages/ketchup/src/components/kup-combobox/readme.md
+++ b/packages/ketchup/src/components/kup-combobox/readme.md
@@ -121,6 +121,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
@@ -203,6 +204,7 @@ graph TD;
   kup-box --> kup-combobox
   kup-cell --> kup-combobox
   kup-image-list --> kup-combobox
+  kup-input-panel --> kup-combobox
   kup-magic-box --> kup-combobox
   style kup-combobox fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/ketchup/src/components/kup-date-picker/readme.md b/packages/ketchup/src/components/kup-date-picker/readme.md
index afea304078..123234e9f6 100644
--- a/packages/ketchup/src/components/kup-date-picker/readme.md
+++ b/packages/ketchup/src/components/kup-date-picker/readme.md
@@ -104,6 +104,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -184,6 +185,7 @@ graph TD;
   kup-box --> kup-date-picker
   kup-cell --> kup-date-picker
   kup-image-list --> kup-date-picker
+  kup-input-panel --> kup-date-picker
   style kup-date-picker fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-gauge/readme.md b/packages/ketchup/src/components/kup-gauge/readme.md
index 18bec20b80..083a05b40b 100644
--- a/packages/ketchup/src/components/kup-gauge/readme.md
+++ b/packages/ketchup/src/components/kup-gauge/readme.md
@@ -163,6 +163,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -243,6 +244,7 @@ graph TD;
   kup-box --> kup-gauge
   kup-cell --> kup-gauge
   kup-image-list --> kup-gauge
+  kup-input-panel --> kup-gauge
   style kup-gauge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-image/readme.md b/packages/ketchup/src/components/kup-image/readme.md
index 5c1d8e63ca..312a062d02 100644
--- a/packages/ketchup/src/components/kup-image/readme.md
+++ b/packages/ketchup/src/components/kup-image/readme.md
@@ -81,6 +81,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -163,6 +164,7 @@ graph TD;
   kup-box --> kup-image
   kup-cell --> kup-image
   kup-image-list --> kup-image
+  kup-input-panel --> kup-image
   style kup-image fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
index 9bede0804f..1fed62b19c 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -136,6 +136,7 @@ export class KupInputPanel {
                 const mappedCell = {
                     ...cell,
                     data: this.#mapData(cell, col),
+                    slotData: this.#slotData(cell, col),
                     isEditable: cell.editable,
                 };
 
@@ -208,21 +209,41 @@ export class KupInputPanel {
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }
 
+    #slotData(cell: KupInputPanelCell, col: KupInputPanelColumn) {
+        const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+
+        if (
+            cellType !== FCellTypes.CHIP &&
+            cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
+            cellType !== FCellTypes.MULTI_COMBOBOX &&
+            !cell.editable
+        ) {
+            return null;
+        }
+
+        return {
+            trailingIcon: true,
+            label: col.title,
+        };
+    }
+
     #CHIAdapter(
-        _options: {
+        options: {
             id: string;
             label: string;
         }[],
         _fieldLabel: string,
-        _currentValue: string
+        currentValue: string
     ) {
-        return { data: [{ value: 'Valore1' }], title: 'Chippp' };
-        // return {
-        //     data: {
-        //         label: 'CHipp',
-        //     },
-        //     label: fieldLabel,
-        // };
+        return {
+            data: options?.length
+                ? options.map(({ id, label }) => ({
+                      value: label,
+                      id,
+                      selected: currentValue === id,
+                  }))
+                : [{ id: currentValue, value: currentValue }],
+        };
     }
 
     #GRAAdapter() {
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
index 114201a447..021f336990 100644
--- a/packages/ketchup/src/components/kup-input-panel/readme.md
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -7,10 +7,19 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                    | Type                | Default |
-| ------------- | -------------- | ------------------------------ | ------------------- | ------- |
-| `customStyle` | `custom-style` | Custom style of the component. | `string`            | `''`    |
-| `data`        | --             | Actual data of the form.       | `KupInputPanelData` | `null`  |
+| Property             | Attribute              | Description                                                            | Type                          | Default |
+| -------------------- | ---------------------- | ---------------------------------------------------------------------- | ----------------------------- | ------- |
+| `customStyle`        | `custom-style`         | Custom style of the component.                                         | `string`                      | `''`    |
+| `data`               | --                     | Actual data of the form.                                               | `KupInputPanelData`           | `null`  |
+| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean`                     | `false` |
+| `submitCb`           | --                     | Sets the callback function on submit form                              | `(e: SubmitEvent) => unknown` | `null`  |
+
+
+## Events
+
+| Event                   | Description                     | Type                           |
+| ----------------------- | ------------------------------- | ------------------------------ |
+| `kup-input-panel-ready` | When component load is complete | `CustomEvent<KupEventPayload>` |
 
 
 ## Dependencies
@@ -19,12 +28,40 @@
 
 - [kup-card](../kup-card)
 - [kup-dialog](../kup-dialog)
+- [kup-badge](../kup-badge)
+- [kup-autocomplete](../kup-autocomplete)
+- [kup-chip](../kup-chip)
+- [kup-text-field](../kup-text-field)
+- [kup-color-picker](../kup-color-picker)
+- [kup-combobox](../kup-combobox)
+- [kup-date-picker](../kup-date-picker)
+- [kup-rating](../kup-rating)
+- [kup-time-picker](../kup-time-picker)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-chart](../kup-chart)
+- [kup-gauge](../kup-gauge)
+- [kup-progress-bar](../kup-progress-bar)
 
 ### Graph
 ```mermaid
 graph TD;
   kup-input-panel --> kup-card
   kup-input-panel --> kup-dialog
+  kup-input-panel --> kup-badge
+  kup-input-panel --> kup-autocomplete
+  kup-input-panel --> kup-chip
+  kup-input-panel --> kup-text-field
+  kup-input-panel --> kup-color-picker
+  kup-input-panel --> kup-combobox
+  kup-input-panel --> kup-date-picker
+  kup-input-panel --> kup-rating
+  kup-input-panel --> kup-time-picker
+  kup-input-panel --> kup-image
+  kup-input-panel --> kup-button-list
+  kup-input-panel --> kup-chart
+  kup-input-panel --> kup-gauge
+  kup-input-panel --> kup-progress-bar
   kup-card --> kup-autocomplete
   kup-card --> kup-chip
   kup-card --> kup-text-field
diff --git a/packages/ketchup/src/components/kup-progress-bar/readme.md b/packages/ketchup/src/components/kup-progress-bar/readme.md
index 6cf3ff4df7..e97069e206 100644
--- a/packages/ketchup/src/components/kup-progress-bar/readme.md
+++ b/packages/ketchup/src/components/kup-progress-bar/readme.md
@@ -87,6 +87,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -167,6 +168,7 @@ graph TD;
   kup-box --> kup-progress-bar
   kup-cell --> kup-progress-bar
   kup-image-list --> kup-progress-bar
+  kup-input-panel --> kup-progress-bar
   style kup-progress-bar fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-rating/readme.md b/packages/ketchup/src/components/kup-rating/readme.md
index 3ab6044d9f..637364e598 100644
--- a/packages/ketchup/src/components/kup-rating/readme.md
+++ b/packages/ketchup/src/components/kup-rating/readme.md
@@ -85,6 +85,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -165,6 +166,7 @@ graph TD;
   kup-box --> kup-rating
   kup-cell --> kup-rating
   kup-image-list --> kup-rating
+  kup-input-panel --> kup-rating
   style kup-rating fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/components/kup-text-field/readme.md b/packages/ketchup/src/components/kup-text-field/readme.md
index 0ac236d76f..e1798da085 100644
--- a/packages/ketchup/src/components/kup-text-field/readme.md
+++ b/packages/ketchup/src/components/kup-text-field/readme.md
@@ -163,6 +163,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
@@ -244,6 +245,7 @@ graph TD;
   kup-box --> kup-text-field
   kup-cell --> kup-text-field
   kup-image-list --> kup-text-field
+  kup-input-panel --> kup-text-field
   kup-magic-box --> kup-text-field
   style kup-text-field fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/ketchup/src/components/kup-time-picker/readme.md b/packages/ketchup/src/components/kup-time-picker/readme.md
index cc39195fa7..bb3d4cae32 100644
--- a/packages/ketchup/src/components/kup-time-picker/readme.md
+++ b/packages/ketchup/src/components/kup-time-picker/readme.md
@@ -122,6 +122,7 @@ Type: `Promise<void>`
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -203,6 +204,7 @@ graph TD;
   kup-box --> kup-time-picker
   kup-cell --> kup-time-picker
   kup-image-list --> kup-time-picker
+  kup-input-panel --> kup-time-picker
   style kup-time-picker fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
index ca63878332..c4c6618a6c 100644
--- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx
+++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -296,6 +296,7 @@ function setEditableCell(
     column: KupDataColumn,
     props: FCellProps
 ): unknown {
+    console.log('setEditableCell', cellType, cell.slotData);
     switch (cellType) {
         case FCellTypes.AUTOCOMPLETE:
             return (
@@ -346,6 +347,7 @@ function setEditableCell(
                 );
             }
         case FCellTypes.CHIP:
+            console.log('chip slotdata', cell.slotData);
             return (
                 <kup-chip
                     {...cell.data}
diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
index 2d3c356ffb..d8d07b9810 100644
--- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx
+++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
@@ -17,6 +17,7 @@ const dom: KupDom = document.documentElement as KupDom;
 /*-------------------------------------------------*/
 
 export const FChip: FunctionalComponent<FChipsProps> = (props: FChipsProps) => {
+    console.log('FChip props', props);
     if (!props.type) {
         props.type = FChipType.STANDARD;
     }
diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
index cc43dba535..0be2578445 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
@@ -18,6 +18,7 @@ export const fButtonUsers = [
     KupTagNames.DROPDOWN_BUTTON,
     KupTagNames.FAMILY_TREE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.IMAGE_LIST,
     KupTagNames.SNACKBAR,
 ];
@@ -57,6 +58,7 @@ export const fChipUsers = [
     KupTagNames.CHIP,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.TREE,
 ];
 /**
@@ -131,6 +133,7 @@ export const fSwitchUsers = [
     KupTagNames.CELL,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.SWITCH,
     KupTagNames.TREE,
 ];

From 873121ccb3c0813c30b667fa746106369d2c12cd Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Fri, 22 Mar 2024 10:43:29 +0000
Subject: [PATCH 2/3] feat: added input panel in showcase

---
 packages/ketchup-showcase/src/App.vue         |  10 +
 .../ketchup-showcase/src/plugins/router.ts    |   6 +
 .../advanced/inputpanel/InputPanel.vue        |  34 +++
 .../inputpanel/examples/InputPanelBasic.vue   |  20 ++
 .../inputpanel/examples/InputPanelDemo.vue    | 200 ++++++++++++++++++
 .../kup-input-panel/kup-input-panel.tsx       |   1 -
 .../src/f-components/f-cell/f-cell.tsx        |   1 -
 .../src/f-components/f-chip/f-chip.tsx        |   1 -
 8 files changed, 270 insertions(+), 3 deletions(-)
 create mode 100644 packages/ketchup-showcase/src/views/components/advanced/inputpanel/InputPanel.vue
 create mode 100644 packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelBasic.vue
 create mode 100644 packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue

diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue
index db55e869ed..3f9f805ba0 100644
--- a/packages/ketchup-showcase/src/App.vue
+++ b/packages/ketchup-showcase/src/App.vue
@@ -403,6 +403,16 @@ export default {
                 value: 'Image list',
                 visible: true,
               },
+              {
+                cells: {
+                  ROUTE: {
+                    value: 'inputpanel',
+                  },
+                },
+                icon: 'mode_edit',
+                value: 'Input Panel',
+                visible: true,
+              },
               {
                 cells: {
                   ROUTE: {
diff --git a/packages/ketchup-showcase/src/plugins/router.ts b/packages/ketchup-showcase/src/plugins/router.ts
index cf18903b04..56c83da956 100644
--- a/packages/ketchup-showcase/src/plugins/router.ts
+++ b/packages/ketchup-showcase/src/plugins/router.ts
@@ -240,6 +240,12 @@ const advancedRoutes = [
     component: () =>
       import(`@/views/components/advanced/imagelist/ImageList.vue`),
   },
+  {
+    path: `/inputpanel`,
+    name: 'inputpanel',
+    component: () =>
+      import(`@/views/components/advanced/inputpanel/InputPanel.vue`),
+  },
   {
     path: `/tree`,
     name: 'tree',
diff --git a/packages/ketchup-showcase/src/views/components/advanced/inputpanel/InputPanel.vue b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/InputPanel.vue
new file mode 100644
index 0000000000..4a46ae2517
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/InputPanel.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <comp :giturl="giturl" :headtitle="headtitle" :titles="titles">
+      <template v-slot:0>
+        <input-panel-demo></input-panel-demo>
+      </template>
+      <template v-slot:1>
+        <input-panel-basic></input-panel-basic>
+      </template>
+    </comp>
+  </div>
+</template>
+
+<script>
+import InputPanelDemo from '@/views/components/advanced/inputpanel/examples/InputPanelDemo';
+import InputPanelBasic from '@/views/components/advanced/inputpanel/examples/InputPanelBasic';
+import Comp from '@/views/templates/Comp';
+export default {
+  components: {
+    InputPanelDemo,
+    InputPanelBasic,
+    Comp,
+  },
+  data() {
+    return {
+      giturl:
+        'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/components/kup-input-panel',
+      headtitle: 'Input Panel',
+      titles: ['Playground', 'Basic usage'],
+    };
+  },
+  title: 'Ketchup | Input Panel',
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelBasic.vue b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelBasic.vue
new file mode 100644
index 0000000000..7642d18473
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelBasic.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>The Input Panel component arranges different input fields.</p>
+      <p class="centered">Sample markup</p>
+      <code class="flat">{{ markupBasic }}</code>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputPanelBasic',
+  data() {
+    return {
+      markupBasic: '<kup-input-panel></kup-input-panel>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue
new file mode 100644
index 0000000000..9c22535e31
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <demo
+      :demoComp="demoComp"
+      :demoEvents="demoEvents"
+      :demoMethods="demoMethods"
+      :demoProps="demoProps"
+    ></demo>
+  </div>
+</template>
+
+<script>
+import Demo from '@/views/templates/Demo';
+import { baseData } from '@/mock/chart';
+
+export default {
+  components: {
+    Demo,
+  },
+  name: 'InputPanelDemo',
+  data() {
+    return {
+      demoComp: createComp(),
+      demoEvents: [
+        {
+          name: 'kup-form-ready',
+          type: 'CustomEvent',
+        },
+      ],
+      demoMethods: [],
+      demoProps: [
+        {
+          prop: 'customStyle',
+          description:
+            'Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization',
+          type: 'string',
+          default: '""',
+          try: 'css',
+        },
+        {
+          prop: 'data',
+          description: 'Actual data of the form.',
+          type: 'KupInputPanelData',
+          default: 'null',
+          try: 'json',
+        },
+        {
+          prop: 'hiddenSubmitButton',
+          description:
+            'Creates a hidden submit button in order to submit the form with enter.',
+          type: 'boolean',
+          default: 'false',
+          try: 'switch',
+        },
+        {
+          prop: 'submitCb',
+          description: 'Sets the callback function on submit form.',
+          type: 'string',
+          default: 'null',
+          try: 'field',
+        },
+      ],
+    };
+  },
+};
+
+function createComp() {
+  const comp = document.createElement('kup-input-panel');
+  comp.data = {
+    columns: [
+      {
+        name: 'NAM',
+        title: 'Name',
+        visible: true,
+      },
+      {
+        name: 'SUR',
+        title: 'Surname',
+        visible: true,
+      },
+      {
+        name: 'COL',
+        title: 'Color Shirt',
+        visible: true,
+      },
+      {
+        name: 'NAT',
+        title: 'Nation',
+        visible: true,
+      },
+      {
+        name: 'CIT',
+        title: 'City',
+        visible: true,
+      },
+      {
+        name: 'CAM',
+        title: 'Campionato vinto',
+        visible: true,
+      },
+      {
+        name: 'CHI',
+        title: 'Chip',
+        visible: true,
+      },
+    ],
+    rows: [
+      {
+        cells: {
+          NAM: {
+            value: 'Francesco',
+            obj: {
+              t: '',
+              p: '',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            shape: 'ITX',
+          },
+          SUR: {
+            value: 'Totti',
+            obj: {
+              t: '',
+              p: '',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            shape: 'INF',
+          },
+          COL: {
+            value: '#8E1F2F',
+            obj: {
+              t: 'J1',
+              p: 'COL',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            // shape: 'CLP',
+          },
+          NAT: {
+            value: 'It',
+            options: [
+              { id: 'It', label: 'Italy' },
+              { id: 'Sp', label: 'Spain' },
+            ],
+            obj: {
+              t: '',
+              p: '',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            shape: 'CMB',
+          },
+          CIT: {
+            value: 'Rom',
+            obj: {
+              t: '',
+              p: '',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            options: [
+              { id: 'Rom', label: 'Roma' },
+              { id: 'Flam', label: 'Flaminio' },
+              { id: 'PorMet', label: 'Porta Metronia' },
+              { id: 'Garbat', label: 'Garbatella' },
+            ],
+            shape: 'ACP',
+          },
+          CAM: {
+            value: 'on',
+            obj: {
+              t: 'V2',
+              p: 'SI/NO',
+              k: '',
+            },
+            editable: true,
+            mandatory: true,
+            // shape: 'CHK',
+          },
+          CHI: {
+            shape: 'CHI',
+            value: 'Chi',
+            editable: true,
+            options: [{ id: 'Chi', label: 'Chip' }],
+          },
+        },
+      },
+    ],
+  };
+  comp.id = 'demo-component';
+
+  return comp;
+}
+</script>
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
index 1fed62b19c..e519dd0324 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -204,7 +204,6 @@ export class KupInputPanel {
         ]);
 
         const adapter = dataAdapterMap.get(cellType);
-        console.log(cellType, cell.shape, adapter === undefined);
 
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }
diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
index c4c6618a6c..5dbb5d8016 100644
--- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx
+++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -347,7 +347,6 @@ function setEditableCell(
                 );
             }
         case FCellTypes.CHIP:
-            console.log('chip slotdata', cell.slotData);
             return (
                 <kup-chip
                     {...cell.data}
diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
index d8d07b9810..2d3c356ffb 100644
--- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx
+++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
@@ -17,7 +17,6 @@ const dom: KupDom = document.documentElement as KupDom;
 /*-------------------------------------------------*/
 
 export const FChip: FunctionalComponent<FChipsProps> = (props: FChipsProps) => {
-    console.log('FChip props', props);
     if (!props.type) {
         props.type = FChipType.STANDARD;
     }

From d549b70b1ce0aded8098c4cd1bb0eeafa21f6982 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Fri, 22 Mar 2024 10:51:14 +0000
Subject: [PATCH 3/3] fix: remove console.log

---
 packages/ketchup/src/f-components/f-cell/f-cell.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
index 5dbb5d8016..ca63878332 100644
--- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx
+++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -296,7 +296,6 @@ function setEditableCell(
     column: KupDataColumn,
     props: FCellProps
 ): unknown {
-    console.log('setEditableCell', cellType, cell.slotData);
     switch (cellType) {
         case FCellTypes.AUTOCOMPLETE:
             return (