From c264e21e27fefc1972d54362d3149f2d82a66755 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 14 Mar 2024 15:18:20 +0000
Subject: [PATCH 01/17] chore: setup input panel component

---
 packages/ketchup/src/assets/index.js          |   4 +
 packages/ketchup/src/assets/input-panel.js    |   0
 packages/ketchup/src/components.d.ts          |  37 ++++++
 .../kup-input-panel-declarations.ts           |   1 +
 .../kup-input-panel/kup-input-panel.scss      |   0
 .../kup-input-panel/kup-input-panel.tsx       | 107 ++++++++++++++++++
 packages/ketchup/src/input-panel.html         |  28 +++++
 packages/ketchup/stencil.config.ts            |   1 +
 8 files changed, 178 insertions(+)
 create mode 100644 packages/ketchup/src/assets/input-panel.js
 create mode 100644 packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
 create mode 100644 packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
 create mode 100644 packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
 create mode 100644 packages/ketchup/src/input-panel.html

diff --git a/packages/ketchup/src/assets/index.js b/packages/ketchup/src/assets/index.js
index eaca8fddbc..3375c4e18b 100644
--- a/packages/ketchup/src/assets/index.js
+++ b/packages/ketchup/src/assets/index.js
@@ -138,6 +138,10 @@ components.data = [
         value: 'Image list',
         id: 'image-list.html',
     },
+    {
+        value: 'Input panel',
+        id: 'input-panel.html',
+    },
     {
         value: 'KupData',
         id: 'kupdata.html',
diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 195c8e1e1d..b17bb9b415 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -43,6 +43,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations";
 import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 import { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
+import { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
 import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -92,6 +93,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations";
 export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 export { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
+export { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
 export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -2437,6 +2439,19 @@ export namespace Components {
         "stateId": string;
         "store": KupStore;
     }
+    interface KupInputPanel {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * Actual data of the form.
+          * @default null
+         */
+        "data": KupInputPanelData;
+    }
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
@@ -4638,6 +4653,12 @@ declare global {
         prototype: HTMLKupImageListElement;
         new (): HTMLKupImageListElement;
     };
+    interface HTMLKupInputPanelElement extends Components.KupInputPanel, HTMLStencilElement {
+    }
+    var HTMLKupInputPanelElement: {
+        prototype: HTMLKupInputPanelElement;
+        new (): HTMLKupInputPanelElement;
+    };
     interface HTMLKupLazyElementEventMap {
         "kup-lazy-loaded": KupEventPayload;
     }
@@ -5057,6 +5078,7 @@ declare global {
         "kup-iframe": HTMLKupIframeElement;
         "kup-image": HTMLKupImageElement;
         "kup-image-list": HTMLKupImageListElement;
+        "kup-input-panel": HTMLKupInputPanelElement;
         "kup-lazy": HTMLKupLazyElement;
         "kup-list": HTMLKupListElement;
         "kup-magic-box": HTMLKupMagicBoxElement;
@@ -7000,6 +7022,19 @@ declare namespace LocalJSX {
         "stateId"?: string;
         "store"?: KupStore;
     }
+    interface KupInputPanel {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle"?: string;
+        /**
+          * Actual data of the form.
+          * @default null
+         */
+        "data"?: KupInputPanelData;
+    }
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
@@ -8272,6 +8307,7 @@ declare namespace LocalJSX {
         "kup-iframe": KupIframe;
         "kup-image": KupImage;
         "kup-image-list": KupImageList;
+        "kup-input-panel": KupInputPanel;
         "kup-lazy": KupLazy;
         "kup-list": KupList;
         "kup-magic-box": KupMagicBox;
@@ -8342,6 +8378,7 @@ declare module "@stencil/core" {
             "kup-iframe": LocalJSX.KupIframe & JSXBase.HTMLAttributes<HTMLKupIframeElement>;
             "kup-image": LocalJSX.KupImage & JSXBase.HTMLAttributes<HTMLKupImageElement>;
             "kup-image-list": LocalJSX.KupImageList & JSXBase.HTMLAttributes<HTMLKupImageListElement>;
+            "kup-input-panel": LocalJSX.KupInputPanel & JSXBase.HTMLAttributes<HTMLKupInputPanelElement>;
             "kup-lazy": LocalJSX.KupLazy & JSXBase.HTMLAttributes<HTMLKupLazyElement>;
             "kup-list": LocalJSX.KupList & JSXBase.HTMLAttributes<HTMLKupListElement>;
             "kup-magic-box": LocalJSX.KupMagicBox & JSXBase.HTMLAttributes<HTMLKupMagicBoxElement>;
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
new file mode 100644
index 0000000000..091ff49589
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -0,0 +1 @@
+export interface KupInputPanelData {}
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
new file mode 100644
index 0000000000..e69de29bb2
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
new file mode 100644
index 0000000000..3ee67abf6f
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -0,0 +1,107 @@
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { KupInputPanelData } from './kup-input-panel-declarations';
+import {
+    KupManager,
+    kupManagerInstance,
+} from '../../managers/kup-manager/kup-manager';
+import { KupComponent } from '../../types/GenericTypes';
+
+@Component({
+    tag: 'kup-input-panel',
+    styleUrl: 'kup-input-panel.scss',
+    shadow: true,
+})
+export class KupInputPanel {
+    /**
+     * References the root HTML element of the component (<kup-form>).
+     */
+    @Element() rootElement: HTMLElement;
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    @Prop() customStyle: string = '';
+    /**
+     * Actual data of the form.
+     * @default null
+     */
+    @Prop() data: KupInputPanelData = null;
+
+    //#region variables
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+
+    private kupManager: KupManager = kupManagerInstance();
+
+    // TODO ADD VARIABLES HERE
+    //#endregion
+
+    //#region watchers
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+
+    // TODO ADD WATCHERS ??
+    //#endregion
+
+    //#region public methods
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+
+    // TODO ADD METHODS HERE
+    //#endregion
+
+    //#region events
+    /*-------------------------------------------------*/
+    /*           Events                                */
+    /*-------------------------------------------------*/
+
+    // ADD EVENTS HERE
+    //#endregion
+
+    //#region private methods
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+
+    // ADD PRIVATE METHODS HERE
+    //#endregion
+
+    //#region lifecycle hooks
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+
+    componentWillLoad() {
+        this.kupManager.debug.logLoad(this, false);
+    }
+
+    componentDidLoad() {
+        this.kupManager.debug.logLoad(this, true);
+    }
+
+    componentWillRender() {
+        this.kupManager.debug.logRender(this, false);
+    }
+
+    componentDidRender() {
+        this.kupManager.debug.logRender(this, true);
+    }
+
+    render() {
+        return (
+            <Host>
+                <style>
+                    {this.kupManager.theme.setKupStyle(
+                        this.rootElement as KupComponent
+                    )}
+                </style>
+                <div>INPUT PANEL</div>
+            </Host>
+        );
+    }
+    //#endregion
+}
diff --git a/packages/ketchup/src/input-panel.html b/packages/ketchup/src/input-panel.html
new file mode 100644
index 0000000000..3637c19829
--- /dev/null
+++ b/packages/ketchup/src/input-panel.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Form</title>
+
+        <script type="module" src="/build/ketchup.esm.js"></script>
+        <script nomodule src="/build/ketchup.js"></script>
+
+        <style>
+            html {
+                background-color: var(--kup-background-color);
+                color: var(--kup-text-color);
+                font-family: var(--kup-font-family);
+                font-size: var(--kup-font-size);
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Input Panel</h1>
+        <kup-input-panel id="input-panel"></kup-input-panel>
+
+        <script type="text/javascript" src="/assets/input-panel.js"></script>
+    </body>
+</html>
diff --git a/packages/ketchup/stencil.config.ts b/packages/ketchup/stencil.config.ts
index 081ad07d97..0376ca70bf 100644
--- a/packages/ketchup/stencil.config.ts
+++ b/packages/ketchup/stencil.config.ts
@@ -78,6 +78,7 @@ export const config: Config = {
                 { src: 'grid.html' },
                 { src: 'image.html' },
                 { src: 'image-list.html' },
+                { src: 'input-panel.html' },
                 { src: 'kupdata.html' },
                 { src: 'kupinteract.html' },
                 { src: 'kuptooltip.html' },

From cf24e91bdb5d2678917e0a45917792b7b5f5abed Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 14 Mar 2024 15:25:03 +0000
Subject: [PATCH 02/17] chore: generate readme

---
 packages/ketchup-react/src/index.ts           |   1 +
 .../ketchup/src/components/kup-card/readme.md |   2 +
 .../src/components/kup-dialog/readme.md       |   2 +
 .../src/components/kup-input-panel/readme.md  | 176 ++++++++++++++++++
 4 files changed, 181 insertions(+)
 create mode 100644 packages/ketchup/src/components/kup-input-panel/readme.md

diff --git a/packages/ketchup-react/src/index.ts b/packages/ketchup-react/src/index.ts
index f6b43e3781..3442a8c789 100644
--- a/packages/ketchup-react/src/index.ts
+++ b/packages/ketchup-react/src/index.ts
@@ -44,6 +44,7 @@ export const KupHorizontalScroll = /*@__PURE__*/createReactComponent<JSX.KupHori
 export const KupIframe = /*@__PURE__*/createReactComponent<JSX.KupIframe, HTMLKupIframeElement>('kup-iframe');
 export const KupImage = /*@__PURE__*/createReactComponent<JSX.KupImage, HTMLKupImageElement>('kup-image');
 export const KupImageList = /*@__PURE__*/createReactComponent<JSX.KupImageList, HTMLKupImageListElement>('kup-image-list');
+export const KupInputPanel = /*@__PURE__*/createReactComponent<JSX.KupInputPanel, HTMLKupInputPanelElement>('kup-input-panel');
 export const KupLazy = /*@__PURE__*/createReactComponent<JSX.KupLazy, HTMLKupLazyElement>('kup-lazy');
 export const KupList = /*@__PURE__*/createReactComponent<JSX.KupList, HTMLKupListElement>('kup-list');
 export const KupMagicBox = /*@__PURE__*/createReactComponent<JSX.KupMagicBox, HTMLKupMagicBoxElement>('kup-magic-box');
diff --git a/packages/ketchup/src/components/kup-card/readme.md b/packages/ketchup/src/components/kup-card/readme.md
index 2222af06e7..c464ae87f5 100644
--- a/packages/ketchup/src/components/kup-card/readme.md
+++ b/packages/ketchup/src/components/kup-card/readme.md
@@ -126,6 +126,7 @@ Type: `Promise<void>`
  - [kup-iframe](../kup-iframe)
  - [kup-image](../kup-image)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-lazy](../kup-lazy)
  - [kup-list](../kup-list)
  - [kup-magic-box](../kup-magic-box)
@@ -217,6 +218,7 @@ graph TD;
   kup-grid --> kup-card
   kup-iframe --> kup-card
   kup-image-list --> kup-card
+  kup-input-panel --> kup-card
   kup-lazy --> kup-card
   kup-magic-box --> kup-card
   kup-nav-bar --> kup-card
diff --git a/packages/ketchup/src/components/kup-dialog/readme.md b/packages/ketchup/src/components/kup-dialog/readme.md
index bac826b690..424777c943 100644
--- a/packages/ketchup/src/components/kup-dialog/readme.md
+++ b/packages/ketchup/src/components/kup-dialog/readme.md
@@ -132,6 +132,7 @@ Type: `Promise<void>`
  - [kup-iframe](../kup-iframe)
  - [kup-image](../kup-image)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-lazy](../kup-lazy)
  - [kup-list](../kup-list)
  - [kup-magic-box](../kup-magic-box)
@@ -201,6 +202,7 @@ graph TD;
   kup-grid --> kup-dialog
   kup-iframe --> kup-dialog
   kup-image-list --> kup-dialog
+  kup-input-panel --> kup-dialog
   kup-lazy --> kup-dialog
   kup-magic-box --> kup-dialog
   kup-nav-bar --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
new file mode 100644
index 0000000000..114201a447
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -0,0 +1,176 @@
+# kup-input-panel
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                    | Type                | Default |
+| ------------- | -------------- | ------------------------------ | ------------------- | ------- |
+| `customStyle` | `custom-style` | Custom style of the component. | `string`            | `''`    |
+| `data`        | --             | Actual data of the form.       | `KupInputPanelData` | `null`  |
+
+
+## Dependencies
+
+### Depends on
+
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+
+### Graph
+```mermaid
+graph TD;
+  kup-input-panel --> kup-card
+  kup-input-panel --> kup-dialog
+  kup-card --> kup-autocomplete
+  kup-card --> kup-chip
+  kup-card --> kup-text-field
+  kup-card --> kup-color-picker
+  kup-card --> kup-combobox
+  kup-card --> kup-date-picker
+  kup-card --> kup-rating
+  kup-card --> kup-time-picker
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-chart
+  kup-card --> kup-gauge
+  kup-card --> kup-progress-bar
+  kup-card --> kup-badge
+  kup-card --> kup-button
+  kup-card --> kup-list
+  kup-card --> kup-spinner
+  kup-card --> kup-checkbox
+  kup-card --> kup-data-table
+  kup-card --> kup-tab-bar
+  kup-card --> kup-tree
+  kup-card --> kup-switch
+  kup-card --> kup-dropdown-button
+  kup-card --> kup-card
+  kup-card --> kup-dialog
+  kup-autocomplete --> kup-list
+  kup-autocomplete --> kup-card
+  kup-autocomplete --> kup-dialog
+  kup-list --> kup-list
+  kup-list --> kup-radio
+  kup-list --> kup-card
+  kup-list --> kup-dialog
+  kup-list --> kup-badge
+  kup-radio --> kup-card
+  kup-radio --> kup-dialog
+  kup-dialog --> kup-badge
+  kup-dialog --> kup-card
+  kup-dialog --> kup-dialog
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
+  kup-chip --> kup-card
+  kup-chip --> kup-dialog
+  kup-chip --> kup-badge
+  kup-text-field --> kup-card
+  kup-text-field --> kup-dialog
+  kup-color-picker --> kup-card
+  kup-color-picker --> kup-dialog
+  kup-combobox --> kup-list
+  kup-combobox --> kup-card
+  kup-combobox --> kup-dialog
+  kup-date-picker --> kup-card
+  kup-date-picker --> kup-dialog
+  kup-rating --> kup-card
+  kup-rating --> kup-dialog
+  kup-time-picker --> kup-card
+  kup-time-picker --> kup-list
+  kup-time-picker --> kup-dialog
+  kup-image --> kup-spinner
+  kup-image --> kup-card
+  kup-image --> kup-dialog
+  kup-image --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
+  kup-button-list --> kup-dropdown-button
+  kup-button-list --> kup-card
+  kup-button-list --> kup-dialog
+  kup-button-list --> kup-badge
+  kup-dropdown-button --> kup-list
+  kup-dropdown-button --> kup-card
+  kup-dropdown-button --> kup-dialog
+  kup-dropdown-button --> kup-badge
+  kup-chart --> kup-card
+  kup-chart --> kup-dialog
+  kup-gauge --> kup-card
+  kup-gauge --> kup-dialog
+  kup-progress-bar --> kup-card
+  kup-progress-bar --> kup-dialog
+  kup-button --> kup-card
+  kup-button --> kup-dialog
+  kup-button --> kup-badge
+  kup-checkbox --> kup-card
+  kup-checkbox --> kup-dialog
+  kup-data-table --> kup-card
+  kup-data-table --> kup-list
+  kup-data-table --> kup-switch
+  kup-data-table --> kup-button
+  kup-data-table --> kup-spinner
+  kup-data-table --> kup-form
+  kup-data-table --> kup-image
+  kup-data-table --> kup-dialog
+  kup-data-table --> kup-checkbox
+  kup-data-table --> kup-combobox
+  kup-data-table --> kup-badge
+  kup-data-table --> kup-autocomplete
+  kup-data-table --> kup-chip
+  kup-data-table --> kup-text-field
+  kup-data-table --> kup-color-picker
+  kup-data-table --> kup-date-picker
+  kup-data-table --> kup-rating
+  kup-data-table --> kup-time-picker
+  kup-data-table --> kup-button-list
+  kup-data-table --> kup-chart
+  kup-data-table --> kup-gauge
+  kup-data-table --> kup-progress-bar
+  kup-switch --> kup-card
+  kup-switch --> kup-dialog
+  kup-form --> kup-card
+  kup-form --> kup-dialog
+  kup-form --> kup-autocomplete
+  kup-form --> kup-chip
+  kup-form --> kup-text-field
+  kup-form --> kup-color-picker
+  kup-form --> kup-combobox
+  kup-form --> kup-date-picker
+  kup-form --> kup-rating
+  kup-form --> kup-time-picker
+  kup-form --> kup-image
+  kup-form --> kup-button-list
+  kup-form --> kup-chart
+  kup-form --> kup-gauge
+  kup-form --> kup-progress-bar
+  kup-form --> kup-badge
+  kup-tab-bar --> kup-card
+  kup-tab-bar --> kup-dialog
+  kup-tab-bar --> kup-badge
+  kup-tree --> kup-card
+  kup-tree --> kup-list
+  kup-tree --> kup-text-field
+  kup-tree --> kup-dialog
+  kup-tree --> kup-autocomplete
+  kup-tree --> kup-chip
+  kup-tree --> kup-color-picker
+  kup-tree --> kup-combobox
+  kup-tree --> kup-date-picker
+  kup-tree --> kup-rating
+  kup-tree --> kup-time-picker
+  kup-tree --> kup-image
+  kup-tree --> kup-button-list
+  kup-tree --> kup-chart
+  kup-tree --> kup-gauge
+  kup-tree --> kup-progress-bar
+  kup-tree --> kup-badge
+  style kup-input-panel fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

From 2aedbcf66d052ec983d7fdc8eed0d9d426243aa4 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 14 Mar 2024 16:23:46 +0000
Subject: [PATCH 03/17] chore: KupInputPanelData declaration

---
 .../kup-input-panel-declarations.ts           | 60 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
index 091ff49589..b9c675790e 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -1 +1,59 @@
-export interface KupInputPanelData {}
+import { FCellShapes } from '../../f-components/f-cell/f-cell-declarations';
+import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
+
+export interface KupInputPanelData {
+    columns?: KupInputPanelColumn[];
+    rows?: KupInputPanelRow[];
+}
+
+export interface KupInputPanelColumn {
+    name: string;
+    title?: string;
+    visible?: boolean;
+}
+
+export interface KupInputPanelRow {
+    cells?: KupInputPanelRowCells;
+    layout?: KupInputPanelLayout;
+}
+
+export interface KupInputPanelRowCells {
+    [key: string]: KupInputPanelCell;
+}
+
+export interface KupInputPanelCell {
+    value?: string;
+    obj?: KupObj;
+    options?: string[];
+    icon?: string;
+    editable?: boolean;
+    mandatory?: boolean;
+    shape?: FCellShapes;
+    fun?: string;
+}
+
+export interface KupInputPanelLayout {
+    horizontal?: boolean;
+    sections?: KupInputPanelLayoutSection[];
+}
+
+export interface KupInputPanelLayoutSection {
+    id?: string;
+    content?: KupInputPanelLayoutField[];
+    sections?: KupInputPanelLayoutSection[];
+    dim?: string;
+    horizontal?: boolean;
+    gridCols?: number;
+    gridRows?: number;
+    gap?: number;
+}
+
+export interface KupInputPanelLayoutField {
+    id: string;
+    colSpan?: number;
+    colStart?: number;
+    colEnd?: number;
+    rowSpan?: number;
+    rowStart?: number;
+    rowEnd?: number;
+}

From a78e9d01e074813695b5a98d7f4ebb0ecac4545b Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Fri, 15 Mar 2024 12:22:40 +0000
Subject: [PATCH 04/17] feat: add first mock and events

---
 packages/ketchup/src/assets/input-panel.js    | 27 +++++++++
 packages/ketchup/src/components.d.ts          | 19 +++++++
 .../kup-input-panel/kup-input-panel.tsx       | 56 +++++++++++++++----
 3 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index e69de29bb2..41b950df15 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -0,0 +1,27 @@
+const data = {
+    columns: [
+        {
+            name: 'PNL',
+            title: 'Input Panel',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                PNL: {
+                    value: '',
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                },
+            },
+        },
+    ],
+};
+
+const inputPanel = document.getElementById('input-panel');
+inputPanel.data = data;
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index b17bb9b415..6f6e499e78 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -4007,6 +4007,10 @@ export interface KupImageListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupImageListElement;
 }
+export interface KupInputPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupInputPanelElement;
+}
 export interface KupLazyCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupLazyElement;
@@ -4653,7 +4657,18 @@ declare global {
         prototype: HTMLKupImageListElement;
         new (): HTMLKupImageListElement;
     };
+    interface HTMLKupInputPanelElementEventMap {
+        "kup-input-panel-ready": KupEventPayload;
+    }
     interface HTMLKupInputPanelElement extends Components.KupInputPanel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLKupInputPanelElement: {
         prototype: HTMLKupInputPanelElement;
@@ -7034,6 +7049,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "data"?: KupInputPanelData;
+        /**
+          * When component load is complete
+         */
+        "onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
     }
     interface KupLazy {
         /**
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 3ee67abf6f..ef63ac0719 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
@@ -1,10 +1,20 @@
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import {
+    Component,
+    Element,
+    Event,
+    EventEmitter,
+    Host,
+    Prop,
+    Watch,
+    h,
+} from '@stencil/core';
 import { KupInputPanelData } from './kup-input-panel-declarations';
 import {
     KupManager,
     kupManagerInstance,
 } from '../../managers/kup-manager/kup-manager';
-import { KupComponent } from '../../types/GenericTypes';
+import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
+import { componentWrapperId } from '../../variables/GenericVariables';
 
 @Component({
     tag: 'kup-input-panel',
@@ -16,19 +26,27 @@ export class KupInputPanel {
      * References the root HTML element of the component (<kup-form>).
      */
     @Element() rootElement: HTMLElement;
+
+    //#region PROPS
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+
     /**
      * Custom style of the component.
      * @default ""
      * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
     @Prop() customStyle: string = '';
+
     /**
      * Actual data of the form.
      * @default null
      */
     @Prop() data: KupInputPanelData = null;
+    //#endregion
 
-    //#region variables
+    //#region VARIABLES
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -38,15 +56,20 @@ export class KupInputPanel {
     // TODO ADD VARIABLES HERE
     //#endregion
 
-    //#region watchers
+    //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
 
+    @Watch('data')
+    onDataChanged() {
+        console.log('data changed', this.data);
+    }
+
     // TODO ADD WATCHERS ??
     //#endregion
 
-    //#region public methods
+    //#region PUBLIC METHODS
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -54,15 +77,24 @@ export class KupInputPanel {
     // TODO ADD METHODS HERE
     //#endregion
 
-    //#region events
+    //#region EVENTS
     /*-------------------------------------------------*/
     /*           Events                                */
     /*-------------------------------------------------*/
 
-    // ADD EVENTS HERE
+    /**
+     * When component load is complete
+     */
+    @Event({
+        eventName: 'kup-input-panel-ready',
+        composed: true,
+        cancelable: false,
+        bubbles: true,
+    })
+    kupReady: EventEmitter<KupEventPayload>;
     //#endregion
 
-    //#region private methods
+    //#region PRIVATE METHODS
     /*-------------------------------------------------*/
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
@@ -70,16 +102,20 @@ export class KupInputPanel {
     // ADD PRIVATE METHODS HERE
     //#endregion
 
-    //#region lifecycle hooks
+    //#region LIFECYCLE HOOKS
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
 
     componentWillLoad() {
         this.kupManager.debug.logLoad(this, false);
+        this.kupManager.language.register(this);
+        this.kupManager.theme.register(this);
+        this.onDataChanged();
     }
 
     componentDidLoad() {
+        this.kupReady.emit({ comp: this, id: this.rootElement.id });
         this.kupManager.debug.logLoad(this, true);
     }
 
@@ -99,7 +135,7 @@ export class KupInputPanel {
                         this.rootElement as KupComponent
                     )}
                 </style>
-                <div>INPUT PANEL</div>
+                <div id={componentWrapperId}>{JSON.stringify(this.data)}</div>
             </Host>
         );
     }

From 3a05fadfc4bd64ddd634d006a100075569e323e9 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Fri, 15 Mar 2024 12:52:07 +0000
Subject: [PATCH 05/17] wip: first data render

---
 packages/ketchup/src/assets/input-panel.js    | 28 +++++++
 packages/ketchup/src/components.d.ts          | 20 +++++
 .../kup-input-panel/kup-input-panel.tsx       | 79 ++++++++++++++++++-
 3 files changed, 125 insertions(+), 2 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 41b950df15..821c7c15cc 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -4,6 +4,14 @@ const data = {
             name: 'PNL',
             title: 'Input Panel',
         },
+        {
+            name: 'NAM',
+            title: 'Name',
+        },
+        {
+            name: 'SUR',
+            title: 'Surname',
+        },
     ],
     rows: [
         {
@@ -18,6 +26,26 @@ const data = {
                     editable: true,
                     mandatory: true,
                 },
+                NAM: {
+                    value: 'Francesco',
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                },
+                SUR: {
+                    value: 'Totti',
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                },
             },
         },
     ],
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 6f6e499e78..307d29c2cb 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -2451,6 +2451,16 @@ export namespace Components {
           * @default null
          */
         "data": KupInputPanelData;
+        /**
+          * Creates a hidden submit button in order to submit the form with enter.
+          * @default false
+         */
+        "hiddenSubmitButton": boolean;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb": (e: SubmitEvent) => unknown;
     }
     interface KupLazy {
         /**
@@ -7049,10 +7059,20 @@ declare namespace LocalJSX {
           * @default null
          */
         "data"?: KupInputPanelData;
+        /**
+          * Creates a hidden submit button in order to submit the form with enter.
+          * @default false
+         */
+        "hiddenSubmitButton"?: boolean;
         /**
           * When component load is complete
          */
         "onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb"?: (e: SubmitEvent) => unknown;
     }
     interface KupLazy {
         /**
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 ef63ac0719..3240159b39 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
@@ -5,16 +5,22 @@ import {
     EventEmitter,
     Host,
     Prop,
+    VNode,
     Watch,
     h,
 } from '@stencil/core';
-import { KupInputPanelData } from './kup-input-panel-declarations';
+import {
+    KupInputPanelData,
+    KupInputPanelRow,
+} from './kup-input-panel-declarations';
 import {
     KupManager,
     kupManagerInstance,
 } from '../../managers/kup-manager/kup-manager';
 import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { FButton } from '../../f-components/f-button/f-button';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 
 @Component({
     tag: 'kup-input-panel',
@@ -44,6 +50,18 @@ export class KupInputPanel {
      * @default null
      */
     @Prop() data: KupInputPanelData = null;
+
+    /**
+     * Creates a hidden submit button in order to submit the form with enter.
+     * @default false
+     */
+    @Prop() hiddenSubmitButton: boolean = false;
+
+    /**
+     * Sets the callback function on submit form
+     * @default null
+     */
+    @Prop() submitCb: (e: SubmitEvent) => unknown = null;
     //#endregion
 
     //#region VARIABLES
@@ -99,6 +117,47 @@ export class KupInputPanel {
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
 
+    private renderRow(row: KupInputPanelRow) {
+        // todo layout
+        // todo sections
+        const horizontal = row.layout?.horizontal || false;
+
+        const rowContent: VNode[] = [];
+
+        this.data.columns.forEach((col) => {
+            // replace with `renderSection`
+            rowContent.push(
+                <p>
+                    {col.title}: {row.cells[col.name].value || 'no value'}
+                </p>
+            );
+        });
+
+        const classObj = {
+            form: true,
+            'form--column': !horizontal,
+        };
+
+        return (
+            <form
+                class={classObj}
+                name={this.rootElement.id}
+                onSubmit={this.submitCb}
+            >
+                {rowContent}
+                {this.hiddenSubmitButton ? (
+                    <FButton
+                        buttonType="submit"
+                        label={this.kupManager.language.translate(
+                            KupLanguageGeneric.CONFIRM
+                        )}
+                        wrapperClass="form__submit"
+                    ></FButton>
+                ) : null}
+            </form>
+        );
+    }
+
     // ADD PRIVATE METHODS HERE
     //#endregion
 
@@ -128,6 +187,22 @@ export class KupInputPanel {
     }
 
     render() {
+        const inputPanelContent: VNode[] = [];
+
+        this.data.rows?.forEach((row) =>
+            inputPanelContent.push(this.renderRow(row))
+        );
+
+        if (!this.data.rows?.length) {
+            inputPanelContent.push(
+                <p>
+                    {this.kupManager.language.translate(
+                        KupLanguageGeneric.EMPTY_DATA
+                    )}
+                </p>
+            );
+        }
+
         return (
             <Host>
                 <style>
@@ -135,7 +210,7 @@ export class KupInputPanel {
                         this.rootElement as KupComponent
                     )}
                 </style>
-                <div id={componentWrapperId}>{JSON.stringify(this.data)}</div>
+                <div id={componentWrapperId}>{inputPanelContent}</div>
             </Host>
         );
     }

From 8d68bf9c2910c59fb04a82062ad6de2df21bdd27 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Tue, 19 Mar 2024 08:14:36 +0000
Subject: [PATCH 06/17] feata: first input text render

---
 packages/ketchup/src/assets/input-panel.js    |  7 +++-
 .../kup-input-panel/kup-input-panel.tsx       | 40 ++++++++++++++-----
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 821c7c15cc..3f4505a095 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -3,14 +3,17 @@ const data = {
         {
             name: 'PNL',
             title: 'Input Panel',
+            visible: true,
         },
         {
             name: 'NAM',
             title: 'Name',
+            visible: true,
         },
         {
             name: 'SUR',
             title: 'Surname',
+            visible: true,
         },
     ],
     rows: [
@@ -35,6 +38,7 @@ const data = {
                     },
                     editable: true,
                     mandatory: true,
+                    shape: 'ITX',
                 },
                 SUR: {
                     value: 'Totti',
@@ -43,8 +47,9 @@ const data = {
                         p: 'COL',
                         k: '',
                     },
-                    editable: true,
+                    editable: false,
                     mandatory: true,
+                    shape: 'ITX',
                 },
             },
         },
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 3240159b39..7f1ad3b73f 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
@@ -10,6 +10,8 @@ import {
     h,
 } from '@stencil/core';
 import {
+    KupInputPanelCell,
+    KupInputPanelColumn,
     KupInputPanelData,
     KupInputPanelRow,
 } from './kup-input-panel-declarations';
@@ -21,6 +23,7 @@ import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { FButton } from '../../f-components/f-button/f-button';
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { FCellShapes } from '../../f-components/f-cell/f-cell-declarations';
 
 @Component({
     tag: 'kup-input-panel',
@@ -119,19 +122,15 @@ export class KupInputPanel {
 
     private renderRow(row: KupInputPanelRow) {
         // todo layout
-        // todo sections
         const horizontal = row.layout?.horizontal || false;
 
         const rowContent: VNode[] = [];
 
-        this.data.columns.forEach((col) => {
-            // replace with `renderSection`
-            rowContent.push(
-                <p>
-                    {col.title}: {row.cells[col.name].value || 'no value'}
-                </p>
-            );
-        });
+        this.data.columns
+            .filter((col) => col.visible)
+            .forEach((col) => {
+                rowContent.push(this.renderCell(row.cells[col.name], col));
+            });
 
         const classObj = {
             form: true,
@@ -158,6 +157,29 @@ export class KupInputPanel {
         );
     }
 
+    private renderCell(cell: KupInputPanelCell, column: KupInputPanelColumn) {
+        switch (cell.shape) {
+            case FCellShapes.TEXT_FIELD:
+                return (
+                    <kup-text-field
+                        readOnly={!cell.editable}
+                        name={column.name}
+                        label={column.title}
+                        icon={cell.icon}
+                        initialValue={cell.value}
+                    />
+                );
+            case FCellShapes.COMBOBOX:
+                return <kup-combobox />;
+            default:
+                return (
+                    <p>
+                        {column.name}: {cell.value || 'no value'}
+                    </p>
+                );
+        }
+    }
+
     // ADD PRIVATE METHODS HERE
     //#endregion
 

From 789b67e690adbc26d96911460f09e639061e3f66 Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Tue, 19 Mar 2024 11:00:25 +0000
Subject: [PATCH 07/17] kup cmb

---
 packages/ketchup/src/assets/input-panel.js      | 17 +++++++++++++++++
 .../kup-input-panel/kup-input-panel.tsx         |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 3f4505a095..7254b3b1dd 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -15,6 +15,11 @@ const data = {
             title: 'Surname',
             visible: true,
         },
+        {
+            name: 'NAT',
+            title: 'Nation',
+            visible: true,
+        },
     ],
     rows: [
         {
@@ -51,6 +56,18 @@ const data = {
                     mandatory: true,
                     shape: 'ITX',
                 },
+                NAT: {
+                    value: 'CODE_2',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    options: false,
+                    shape: 'CMB',
+                },
             },
         },
     ],
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 7f1ad3b73f..7a7ecc1849 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
@@ -170,7 +170,12 @@ export class KupInputPanel {
                     />
                 );
             case FCellShapes.COMBOBOX:
-                return <kup-combobox />;
+                return (
+                    <kup-combobox
+                        initialValue={cell.value}
+                        disabled={!cell.editable}
+                    />
+                );
             default:
                 return (
                     <p>

From c484ebc859dec770fc185960c5d6b88d1ac60ebd Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Tue, 19 Mar 2024 11:08:52 +0000
Subject: [PATCH 08/17] rework

---
 .../kup-input-panel/kup-input-panel.tsx       | 56 ++++++++-----------
 1 file changed, 24 insertions(+), 32 deletions(-)

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 7a7ecc1849..17350111a5 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
@@ -72,7 +72,7 @@ export class KupInputPanel {
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
 
-    private kupManager: KupManager = kupManagerInstance();
+    #kupManager: KupManager = kupManagerInstance();
 
     // TODO ADD VARIABLES HERE
     //#endregion
@@ -120,17 +120,13 @@ export class KupInputPanel {
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
 
-    private renderRow(row: KupInputPanelRow) {
+    #renderRow(row: KupInputPanelRow) {
         // todo layout
         const horizontal = row.layout?.horizontal || false;
 
-        const rowContent: VNode[] = [];
-
-        this.data.columns
+        const rowContent: VNode[] = this.data.columns
             .filter((col) => col.visible)
-            .forEach((col) => {
-                rowContent.push(this.renderCell(row.cells[col.name], col));
-            });
+            .map((col) => this.#renderCell(row.cells[col.name], col));
 
         const classObj = {
             form: true,
@@ -147,7 +143,7 @@ export class KupInputPanel {
                 {this.hiddenSubmitButton ? (
                     <FButton
                         buttonType="submit"
-                        label={this.kupManager.language.translate(
+                        label={this.#kupManager.language.translate(
                             KupLanguageGeneric.CONFIRM
                         )}
                         wrapperClass="form__submit"
@@ -157,7 +153,7 @@ export class KupInputPanel {
         );
     }
 
-    private renderCell(cell: KupInputPanelCell, column: KupInputPanelColumn) {
+    #renderCell(cell: KupInputPanelCell, column: KupInputPanelColumn) {
         switch (cell.shape) {
             case FCellShapes.TEXT_FIELD:
                 return (
@@ -194,46 +190,42 @@ export class KupInputPanel {
     /*-------------------------------------------------*/
 
     componentWillLoad() {
-        this.kupManager.debug.logLoad(this, false);
-        this.kupManager.language.register(this);
-        this.kupManager.theme.register(this);
+        this.#kupManager.debug.logLoad(this, false);
+        this.#kupManager.language.register(this);
+        this.#kupManager.theme.register(this);
         this.onDataChanged();
     }
 
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
-        this.kupManager.debug.logLoad(this, true);
+        this.#kupManager.debug.logLoad(this, true);
     }
 
     componentWillRender() {
-        this.kupManager.debug.logRender(this, false);
+        this.#kupManager.debug.logRender(this, false);
     }
 
     componentDidRender() {
-        this.kupManager.debug.logRender(this, true);
+        this.#kupManager.debug.logRender(this, true);
     }
 
     render() {
-        const inputPanelContent: VNode[] = [];
-
-        this.data.rows?.forEach((row) =>
-            inputPanelContent.push(this.renderRow(row))
-        );
-
-        if (!this.data.rows?.length) {
-            inputPanelContent.push(
-                <p>
-                    {this.kupManager.language.translate(
-                        KupLanguageGeneric.EMPTY_DATA
-                    )}
-                </p>
-            );
-        }
+        const isEmptyData = Boolean(!this.data.rows?.length);
+
+        const inputPanelContent: VNode[] = isEmptyData
+            ? [
+                  <p>
+                      {this.#kupManager.language.translate(
+                          KupLanguageGeneric.EMPTY_DATA
+                      )}
+                  </p>,
+              ]
+            : this.data.rows?.map((row) => this.#renderRow(row));
 
         return (
             <Host>
                 <style>
-                    {this.kupManager.theme.setKupStyle(
+                    {this.#kupManager.theme.setKupStyle(
                         this.rootElement as KupComponent
                     )}
                 </style>

From 8fc05a20ba5738e4a9119c9ae7c7032451a0d680 Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Tue, 19 Mar 2024 11:39:39 +0000
Subject: [PATCH 09/17] setup autocomplete

---
 packages/ketchup/src/assets/input-panel.js    | 41 ++++++++++++++++++-
 .../kup-input-panel/kup-input-panel.tsx       |  8 ++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 7254b3b1dd..5092e57f3b 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -20,6 +20,11 @@ const data = {
             title: 'Nation',
             visible: true,
         },
+        {
+            name: 'CIT',
+            title: 'City',
+            visible: true,
+        },
     ],
     rows: [
         {
@@ -57,7 +62,29 @@ const data = {
                     shape: 'ITX',
                 },
                 NAT: {
-                    value: 'CODE_2',
+                    value: 'Italy',
+                    data: {
+                        'kup-text-field': {
+                            trailingIcon: true,
+                            label: 'Label',
+                            icon: 'arrow_drop_down',
+                        },
+                        'kup-list': {
+                            data: [
+                                {
+                                    value: 'Italy',
+                                    id: 'Italy',
+                                    selected: true,
+                                },
+                                {
+                                    value: 'Spain',
+                                    id: 'Spain',
+                                    selected: false,
+                                },
+                            ],
+                            showIcons: true,
+                        },
+                    },
                     obj: {
                         t: '',
                         p: '',
@@ -68,6 +95,18 @@ const data = {
                     options: false,
                     shape: 'CMB',
                 },
+                CIT: {
+                    value: 'Rome',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    options: false,
+                    shape: 'ACP',
+                },
             },
         },
     ],
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 17350111a5..0c70793d5d 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
@@ -168,6 +168,14 @@ export class KupInputPanel {
             case FCellShapes.COMBOBOX:
                 return (
                     <kup-combobox
+                        isSelect={true}
+                        initialValue={cell.value}
+                        disabled={!cell.editable}
+                    />
+                );
+            case FCellShapes.AUTOCOMPLETE:
+                return (
+                    <kup-autocomplete
                         initialValue={cell.value}
                         disabled={!cell.editable}
                     />

From abe4289620a4421c6670143d4807779a1125c0a1 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Tue, 19 Mar 2024 16:46:41 +0000
Subject: [PATCH 10/17] feat: use cell for rendering input panel field

---
 packages/ketchup/src/assets/input-panel.js    |  53 +++++---
 .../kup-input-panel-declarations.ts           |  20 +--
 .../kup-input-panel/kup-input-panel.tsx       | 114 ++++++++++++------
 packages/ketchup/src/input-panel.html         |   2 +-
 .../kup-theme/kup-theme-declarations.ts       |   1 +
 packages/ketchup/src/types/GenericTypes.ts    |   1 +
 6 files changed, 126 insertions(+), 65 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 5092e57f3b..0fd1da6610 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -1,10 +1,5 @@
 const data = {
     columns: [
-        {
-            name: 'PNL',
-            title: 'Input Panel',
-            visible: true,
-        },
         {
             name: 'NAM',
             title: 'Name',
@@ -29,16 +24,6 @@ const data = {
     rows: [
         {
             cells: {
-                PNL: {
-                    value: '',
-                    obj: {
-                        t: 'CN',
-                        p: 'COL',
-                        k: '',
-                    },
-                    editable: true,
-                    mandatory: true,
-                },
                 NAM: {
                     value: 'Francesco',
                     obj: {
@@ -63,10 +48,10 @@ const data = {
                 },
                 NAT: {
                     value: 'Italy',
-                    data: {
+                    options: {
                         'kup-text-field': {
                             trailingIcon: true,
-                            label: 'Label',
+                            label: 'Nation',
                             icon: 'arrow_drop_down',
                         },
                         'kup-list': {
@@ -92,7 +77,6 @@ const data = {
                     },
                     editable: true,
                     mandatory: true,
-                    options: false,
                     shape: 'CMB',
                 },
                 CIT: {
@@ -104,7 +88,38 @@ const data = {
                     },
                     editable: true,
                     mandatory: true,
-                    options: false,
+                    options: {
+                        'kup-text-field': {
+                            trailingIcon: true,
+                            label: 'City',
+                            icon: 'arrow_drop_down',
+                        },
+                        'kup-list': {
+                            data: [
+                                {
+                                    value: 'Roma',
+                                    id: 'Roma',
+                                    selected: true,
+                                },
+                                {
+                                    value: 'Flaminio',
+                                    id: 'Flaminio',
+                                    selected: false,
+                                },
+                                {
+                                    value: 'Porta Metronia',
+                                    id: 'Porta Metronia',
+                                    selected: false,
+                                },
+                                {
+                                    value: 'Garbatella',
+                                    id: 'Garbatella',
+                                    selected: false,
+                                },
+                            ],
+                            showIcons: true,
+                        },
+                    },
                     shape: 'ACP',
                 },
             },
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
index b9c675790e..63e07bec1d 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -1,14 +1,16 @@
-import { FCellShapes } from '../../f-components/f-cell/f-cell-declarations';
-import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
+import {
+    KupDataCell,
+    KupDataColumn,
+} from '../../managers/kup-data/kup-data-declarations';
 
 export interface KupInputPanelData {
-    columns?: KupInputPanelColumn[];
+    columns?: KupDataColumn[];
     rows?: KupInputPanelRow[];
 }
 
 export interface KupInputPanelColumn {
     name: string;
-    title?: string;
+    title: string;
     visible?: boolean;
 }
 
@@ -21,14 +23,14 @@ export interface KupInputPanelRowCells {
     [key: string]: KupInputPanelCell;
 }
 
-export interface KupInputPanelCell {
-    value?: string;
-    obj?: KupObj;
+export interface KupInputPanelCell extends KupDataCell {
+    // value?: string;
+    // obj?: KupObj;
     options?: string[];
-    icon?: string;
+    // icon?: string;
     editable?: boolean;
     mandatory?: boolean;
-    shape?: FCellShapes;
+    // shape?: FCellShapes;
     fun?: string;
 }
 
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 0c70793d5d..92330a981f 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
@@ -23,7 +23,9 @@ import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { FButton } from '../../f-components/f-button/f-button';
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { FCellShapes } from '../../f-components/f-cell/f-cell-declarations';
+import { FCellProps } from '../../f-components/f-cell/f-cell-declarations';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { FCell } from '../../f-components/f-cell/f-cell';
 
 @Component({
     tag: 'kup-input-panel',
@@ -126,7 +128,15 @@ export class KupInputPanel {
 
         const rowContent: VNode[] = this.data.columns
             .filter((col) => col.visible)
-            .map((col) => this.#renderCell(row.cells[col.name], col));
+            .map((col) => {
+                const mappedCell = {
+                    ...row.cells[col.name],
+                    data: { data: row.cells[col.name].options },
+                    isEditable: row.cells[col.name].editable,
+                };
+
+                return this.#renderCell(mappedCell, row, col);
+            });
 
         const classObj = {
             form: true,
@@ -153,40 +163,59 @@ export class KupInputPanel {
         );
     }
 
-    #renderCell(cell: KupInputPanelCell, column: KupInputPanelColumn) {
-        switch (cell.shape) {
-            case FCellShapes.TEXT_FIELD:
-                return (
-                    <kup-text-field
-                        readOnly={!cell.editable}
-                        name={column.name}
-                        label={column.title}
-                        icon={cell.icon}
-                        initialValue={cell.value}
-                    />
-                );
-            case FCellShapes.COMBOBOX:
-                return (
-                    <kup-combobox
-                        isSelect={true}
-                        initialValue={cell.value}
-                        disabled={!cell.editable}
-                    />
-                );
-            case FCellShapes.AUTOCOMPLETE:
-                return (
-                    <kup-autocomplete
-                        initialValue={cell.value}
-                        disabled={!cell.editable}
-                    />
-                );
-            default:
-                return (
-                    <p>
-                        {column.name}: {cell.value || 'no value'}
-                    </p>
-                );
-        }
+    #renderCell(
+        cell: KupInputPanelCell,
+        row: KupInputPanelRow,
+        column: KupInputPanelColumn
+    ) {
+        // switch (cell.shape) {
+        //     case FCellShapes.TEXT_FIELD:
+        //         return (
+        //             <FTextField
+        //                 readOnly={!cell.editable}
+        //                 name={column.name}
+        //                 label={column.title}
+        //                 icon={cell.icon}
+        //                 value={cell.value}
+        //             />
+        //         );
+        //     case FCellShapes.COMBOBOX:
+        //         return (
+        //             <kup-combobox
+        //                 isSelect={true}
+        //                 initialValue={cell.value}
+        //                 disabled={!cell.editable}
+        //                 data={cell.options}
+        //                 onKup-combobox-change={(ev) =>
+        //                     console.log('combo value change', ev.detail.value)
+        //                 }
+        //             />
+        //         );
+        //     case FCellShapes.AUTOCOMPLETE:
+        //         return (
+        //             <kup-autocomplete
+        //                 initialValue={cell.value}
+        //                 disabled={!cell.editable}
+        //                 data={cell.options}
+        //             />
+        //         );
+        //     default:
+        //         return (
+        //             <p>
+        //                 {column.name}: {cell.value || 'no value'}
+        //             </p>
+        //         );
+        // }
+        const cellProps: FCellProps = {
+            cell,
+            column,
+            row,
+            component: this,
+            editable: cell.editable,
+            renderKup: true,
+            setSizes: true,
+        };
+        return <FCell {...cellProps} />;
     }
 
     // ADD PRIVATE METHODS HERE
@@ -214,6 +243,14 @@ export class KupInputPanel {
     }
 
     componentDidRender() {
+        const root: ShadowRoot = this.rootElement.shadowRoot;
+        if (root) {
+            const fs: NodeListOf<HTMLElement> =
+                root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
         this.#kupManager.debug.logRender(this, true);
     }
 
@@ -241,5 +278,10 @@ export class KupInputPanel {
             </Host>
         );
     }
+
+    disconnectedCallback() {
+        this.#kupManager.language.unregister(this);
+        this.#kupManager.theme.unregister(this);
+    }
     //#endregion
 }
diff --git a/packages/ketchup/src/input-panel.html b/packages/ketchup/src/input-panel.html
index 3637c19829..de83bc92cc 100644
--- a/packages/ketchup/src/input-panel.html
+++ b/packages/ketchup/src/input-panel.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Form</title>
+        <title>Input Panel</title>
 
         <script type="module" src="/build/ketchup.esm.js"></script>
         <script nomodule src="/build/ketchup.js"></script>
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 ac6094ae29..ba4e9b6e16 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
@@ -145,6 +145,7 @@ export const fTextFieldUsers = [
     KupTagNames.DATA_TABLE,
     KupTagNames.DATE_PICKER,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.NUMERIC_PICKER,
     KupTagNames.PLANNER,
     KupTagNames.TEXT_FIELD,
diff --git a/packages/ketchup/src/types/GenericTypes.ts b/packages/ketchup/src/types/GenericTypes.ts
index 0819e49d38..7cd155f26c 100644
--- a/packages/ketchup/src/types/GenericTypes.ts
+++ b/packages/ketchup/src/types/GenericTypes.ts
@@ -87,6 +87,7 @@ export enum KupTagNames {
     IFRAME = 'KUP-IFRAME',
     IMAGE = 'KUP-IMAGE',
     IMAGE_LIST = 'KUP-IMAGE-LIST',
+    INPUT_PANEL = 'KUP-INPUT-PANEL',
     LAZY = 'KUP-LAZY',
     LIST = 'KUP-LIST',
     MAGIC_BOX = 'KUP-MAGIC-BOX',

From 070e255e3f418e5dbf711a9ec171fb6930638e9b Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 21 Mar 2024 09:28:21 +0000
Subject: [PATCH 11/17] feat: handle options

---
 packages/ketchup/src/assets/input-panel.js    | 68 +++-------------
 .../kup-input-panel-declarations.ts           |  7 +-
 .../kup-input-panel/kup-input-panel.tsx       | 79 ++++++++-----------
 3 files changed, 47 insertions(+), 107 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 0fd1da6610..911ca52810 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -47,29 +47,11 @@ const data = {
                     shape: 'ITX',
                 },
                 NAT: {
-                    value: 'Italy',
-                    options: {
-                        'kup-text-field': {
-                            trailingIcon: true,
-                            label: 'Nation',
-                            icon: 'arrow_drop_down',
-                        },
-                        'kup-list': {
-                            data: [
-                                {
-                                    value: 'Italy',
-                                    id: 'Italy',
-                                    selected: true,
-                                },
-                                {
-                                    value: 'Spain',
-                                    id: 'Spain',
-                                    selected: false,
-                                },
-                            ],
-                            showIcons: true,
-                        },
-                    },
+                    value: 'It',
+                    options: [
+                        { id: 'It', label: 'Italy' },
+                        { id: 'Sp', label: 'Spain' },
+                    ],
                     obj: {
                         t: '',
                         p: '',
@@ -80,7 +62,7 @@ const data = {
                     shape: 'CMB',
                 },
                 CIT: {
-                    value: 'Rome',
+                    value: 'Rom',
                     obj: {
                         t: '',
                         p: '',
@@ -88,38 +70,12 @@ const data = {
                     },
                     editable: true,
                     mandatory: true,
-                    options: {
-                        'kup-text-field': {
-                            trailingIcon: true,
-                            label: 'City',
-                            icon: 'arrow_drop_down',
-                        },
-                        'kup-list': {
-                            data: [
-                                {
-                                    value: 'Roma',
-                                    id: 'Roma',
-                                    selected: true,
-                                },
-                                {
-                                    value: 'Flaminio',
-                                    id: 'Flaminio',
-                                    selected: false,
-                                },
-                                {
-                                    value: 'Porta Metronia',
-                                    id: 'Porta Metronia',
-                                    selected: false,
-                                },
-                                {
-                                    value: 'Garbatella',
-                                    id: 'Garbatella',
-                                    selected: false,
-                                },
-                            ],
-                            showIcons: true,
-                        },
-                    },
+                    options: [
+                        { id: 'Rom', label: 'Roma' },
+                        { id: 'Flam', label: 'Flaminio' },
+                        { id: 'PorMet', label: 'Porta Metronia' },
+                        { id: 'Garbat', label: 'Garbatella' },
+                    ],
                     shape: 'ACP',
                 },
             },
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
index 63e07bec1d..7dcb6af492 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -24,13 +24,10 @@ export interface KupInputPanelRowCells {
 }
 
 export interface KupInputPanelCell extends KupDataCell {
-    // value?: string;
-    // obj?: KupObj;
-    options?: string[];
-    // icon?: string;
+    // TODO tipizzare dopo validazione da SMEUP
+    options?: { id: string; label: string }[];
     editable?: boolean;
     mandatory?: boolean;
-    // shape?: FCellShapes;
     fun?: string;
 }
 
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 92330a981f..a3997b1c6f 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
@@ -75,8 +75,6 @@ export class KupInputPanel {
     /*-------------------------------------------------*/
 
     #kupManager: KupManager = kupManagerInstance();
-
-    // TODO ADD VARIABLES HERE
     //#endregion
 
     //#region WATCHERS
@@ -88,8 +86,6 @@ export class KupInputPanel {
     onDataChanged() {
         console.log('data changed', this.data);
     }
-
-    // TODO ADD WATCHERS ??
     //#endregion
 
     //#region PUBLIC METHODS
@@ -129,10 +125,15 @@ export class KupInputPanel {
         const rowContent: VNode[] = this.data.columns
             .filter((col) => col.visible)
             .map((col) => {
+                const cell = row.cells[col.name];
+
                 const mappedCell = {
-                    ...row.cells[col.name],
-                    data: { data: row.cells[col.name].options },
-                    isEditable: row.cells[col.name].editable,
+                    ...cell,
+                    data: {
+                        data: this.#mapData(cell, col),
+                        label: col.title,
+                    },
+                    isEditable: cell.editable,
                 };
 
                 return this.#renderCell(mappedCell, row, col);
@@ -168,44 +169,6 @@ export class KupInputPanel {
         row: KupInputPanelRow,
         column: KupInputPanelColumn
     ) {
-        // switch (cell.shape) {
-        //     case FCellShapes.TEXT_FIELD:
-        //         return (
-        //             <FTextField
-        //                 readOnly={!cell.editable}
-        //                 name={column.name}
-        //                 label={column.title}
-        //                 icon={cell.icon}
-        //                 value={cell.value}
-        //             />
-        //         );
-        //     case FCellShapes.COMBOBOX:
-        //         return (
-        //             <kup-combobox
-        //                 isSelect={true}
-        //                 initialValue={cell.value}
-        //                 disabled={!cell.editable}
-        //                 data={cell.options}
-        //                 onKup-combobox-change={(ev) =>
-        //                     console.log('combo value change', ev.detail.value)
-        //                 }
-        //             />
-        //         );
-        //     case FCellShapes.AUTOCOMPLETE:
-        //         return (
-        //             <kup-autocomplete
-        //                 initialValue={cell.value}
-        //                 disabled={!cell.editable}
-        //                 data={cell.options}
-        //             />
-        //         );
-        //     default:
-        //         return (
-        //             <p>
-        //                 {column.name}: {cell.value || 'no value'}
-        //             </p>
-        //         );
-        // }
         const cellProps: FCellProps = {
             cell,
             column,
@@ -218,7 +181,31 @@ export class KupInputPanel {
         return <FCell {...cellProps} />;
     }
 
-    // ADD PRIVATE METHODS HERE
+    #mapData(cell: KupInputPanelCell, col: KupInputPanelColumn) {
+        const options = cell.options;
+        const fieldLabel = col.title;
+        const currentValue = cell.value;
+
+        return options?.length
+            ? {
+                  'kup-text-field': {
+                      trailingIcon: true,
+                      label: fieldLabel,
+                      icon: 'arrow_drop_down',
+                  },
+                  'kup-list': {
+                      showIcons: true,
+                      data: options.map(({ id, label }) => ({
+                          value: label,
+                          id,
+                          selected: currentValue === id,
+                      })),
+                  },
+                  label: fieldLabel,
+              }
+            : null;
+    }
+
     //#endregion
 
     //#region LIFECYCLE HOOKS

From 5fa508d3ac898a966f587d1beb61c91a187615e7 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 21 Mar 2024 10:45:37 +0000
Subject: [PATCH 12/17] feat: add mapdata adapter with colorpicker

---
 packages/ketchup/src/assets/input-panel.js    | 24 +++++-
 .../kup-input-panel/kup-input-panel.tsx       | 78 +++++++++++++++----
 .../kup-theme/kup-theme-declarations.ts       |  1 +
 3 files changed, 83 insertions(+), 20 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 911ca52810..50b6689a3d 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -10,6 +10,11 @@ const data = {
             title: 'Surname',
             visible: true,
         },
+        {
+            name: 'COL',
+            title: 'Color Shirt',
+            visible: true,
+        },
         {
             name: 'NAT',
             title: 'Nation',
@@ -38,13 +43,24 @@ const data = {
                 SUR: {
                     value: 'Totti',
                     obj: {
-                        t: 'CN',
-                        p: 'COL',
+                        t: '',
+                        p: '',
                         k: '',
                     },
-                    editable: false,
+                    editable: true,
                     mandatory: true,
-                    shape: 'ITX',
+                    shape: 'INF',
+                },
+                COL: {
+                    value: '#8E1F2F',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'CLP',
                 },
                 NAT: {
                     value: 'It',
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 a3997b1c6f..97492b87d8 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
@@ -23,7 +23,10 @@ import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { FButton } from '../../f-components/f-button/f-button';
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { FCellProps } from '../../f-components/f-cell/f-cell-declarations';
+import {
+    FCellProps,
+    FCellShapes,
+} from '../../f-components/f-cell/f-cell-declarations';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { FCell } from '../../f-components/f-cell/f-cell';
 
@@ -186,24 +189,67 @@ export class KupInputPanel {
         const fieldLabel = col.title;
         const currentValue = cell.value;
 
-        return options?.length
-            ? {
-                  'kup-text-field': {
-                      trailingIcon: true,
-                      label: fieldLabel,
-                      icon: 'arrow_drop_down',
-                  },
-                  'kup-list': {
-                      showIcons: true,
-                      data: options.map(({ id, label }) => ({
+        const dataAdapterMap = new Map<
+            FCellShapes,
+            (
+                options: {
+                    id: string;
+                    label: string;
+                }[],
+                fieldLabel: string,
+                currentValue: string
+            ) => Object
+        >([
+            [FCellShapes.AUTOCOMPLETE, this.#CMBandACPAdapter],
+            [FCellShapes.COLOR_PICKER, this.#CLPAdapter],
+            [FCellShapes.COMBOBOX, this.#CMBandACPAdapter],
+        ]);
+
+        const adapter = dataAdapterMap.get(cell.shape);
+
+        return adapter ? adapter(options, fieldLabel, currentValue) : null;
+    }
+
+    #CMBandACPAdapter(
+        options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        currentValue: string
+    ) {
+        return {
+            'kup-text-field': {
+                trailingIcon: true,
+                label: fieldLabel,
+                icon: 'arrow_drop_down',
+            },
+            'kup-list': {
+                showIcons: true,
+                data: options?.length
+                    ? options.map(({ id, label }) => ({
                           value: label,
                           id,
                           selected: currentValue === id,
-                      })),
-                  },
-                  label: fieldLabel,
-              }
-            : null;
+                      }))
+                    : [],
+            },
+        };
+    }
+
+    #CLPAdapter(
+        options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        currentValue: string
+    ) {
+        return {
+            'kup-text-field': {
+                label: fieldLabel,
+            },
+        };
     }
 
     //#endregion
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 ba4e9b6e16..b85b04806f 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
@@ -30,6 +30,7 @@ export const fCellUsers = [
     KupTagNames.CELL,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.TREE,
 ];
 /**

From 21644f5f2fb94fa28ff8a907b480b03e81d9dba3 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 21 Mar 2024 11:46:05 +0000
Subject: [PATCH 13/17] feat: checkbox

---
 packages/ketchup/src/assets/input-panel.js    | 16 ++++
 .../kup-input-panel-declarations.ts           |  9 ++
 .../kup-input-panel/kup-input-panel.scss      |  6 ++
 .../kup-input-panel/kup-input-panel.tsx       | 87 ++++++++++++-------
 .../kup-theme/kup-theme-declarations.ts       |  1 +
 5 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 50b6689a3d..ace9aa4857 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -25,6 +25,11 @@ const data = {
             title: 'City',
             visible: true,
         },
+        {
+            name: 'CAM',
+            title: 'Campionato vinto',
+            visible: true,
+        },
     ],
     rows: [
         {
@@ -94,6 +99,17 @@ const data = {
                     ],
                     shape: 'ACP',
                 },
+                CAM: {
+                    value: 'on',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'CHK',
+                },
             },
         },
     ],
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
index 7dcb6af492..84885ab258 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -56,3 +56,12 @@ export interface KupInputPanelLayoutField {
     rowStart?: number;
     rowEnd?: number;
 }
+
+export type DataAdapterFn = (
+    options: {
+        id: string;
+        label: string;
+    }[],
+    fieldLabel: string,
+    currentValue: string
+) => Object;
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
index e69de29bb2..1611ec6300 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
@@ -0,0 +1,6 @@
+.input-panel {
+  .f-cell .f-checkbox .checkbox .checkbox__native-control {
+    height: 40px;
+    width: 40px;
+  }
+}
\ No newline at end of file
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 97492b87d8..fc7826bfb3 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
@@ -10,6 +10,7 @@ import {
     h,
 } from '@stencil/core';
 import {
+    DataAdapterFn,
     KupInputPanelCell,
     KupInputPanelColumn,
     KupInputPanelData,
@@ -132,10 +133,7 @@ export class KupInputPanel {
 
                 const mappedCell = {
                     ...cell,
-                    data: {
-                        data: this.#mapData(cell, col),
-                        label: col.title,
-                    },
+                    data: this.#mapData(cell, col),
                     isEditable: cell.editable,
                 };
 
@@ -144,6 +142,7 @@ export class KupInputPanel {
 
         const classObj = {
             form: true,
+            'input-panel': true,
             'form--column': !horizontal,
         };
 
@@ -189,20 +188,12 @@ export class KupInputPanel {
         const fieldLabel = col.title;
         const currentValue = cell.value;
 
-        const dataAdapterMap = new Map<
-            FCellShapes,
-            (
-                options: {
-                    id: string;
-                    label: string;
-                }[],
-                fieldLabel: string,
-                currentValue: string
-            ) => Object
-        >([
+        const dataAdapterMap = new Map<FCellShapes, DataAdapterFn>([
             [FCellShapes.AUTOCOMPLETE, this.#CMBandACPAdapter],
+            [FCellShapes.CHECKBOX, this.#CHKAdapter],
             [FCellShapes.COLOR_PICKER, this.#CLPAdapter],
             [FCellShapes.COMBOBOX, this.#CMBandACPAdapter],
+            [FCellShapes.TEXT_FIELD, this.#ITXAdapter],
         ]);
 
         const adapter = dataAdapterMap.get(cell.shape);
@@ -219,26 +210,29 @@ export class KupInputPanel {
         currentValue: string
     ) {
         return {
-            'kup-text-field': {
-                trailingIcon: true,
-                label: fieldLabel,
-                icon: 'arrow_drop_down',
-            },
-            'kup-list': {
-                showIcons: true,
-                data: options?.length
-                    ? options.map(({ id, label }) => ({
-                          value: label,
-                          id,
-                          selected: currentValue === id,
-                      }))
-                    : [],
+            data: {
+                'kup-text-field': {
+                    trailingIcon: true,
+                    label: fieldLabel,
+                    icon: 'arrow_drop_down',
+                },
+                'kup-list': {
+                    showIcons: true,
+                    data: options?.length
+                        ? options.map(({ id, label }) => ({
+                              value: label,
+                              id,
+                              selected: currentValue === id,
+                          }))
+                        : [],
+                },
             },
+            label: fieldLabel,
         };
     }
 
-    #CLPAdapter(
-        options: {
+    #CHKAdapter(
+        _options: {
             id: string;
             label: string;
         }[],
@@ -246,12 +240,39 @@ export class KupInputPanel {
         currentValue: string
     ) {
         return {
-            'kup-text-field': {
-                label: fieldLabel,
+            checked: currentValue === 'on' || currentValue === '1',
+            label: fieldLabel,
+        };
+    }
+
+    #CLPAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        _currentValue: string
+    ) {
+        return {
+            data: {
+                'kup-text-field': {
+                    label: fieldLabel,
+                },
             },
         };
     }
 
+    #ITXAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        _currentValue: string
+    ) {
+        return { label: fieldLabel };
+    }
+
     //#endregion
 
     //#region LIFECYCLE HOOKS
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 b85b04806f..cc43dba535 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
@@ -43,6 +43,7 @@ export const fCheckboxUsers = [
     KupTagNames.DASHBOARD,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.LIST,
     KupTagNames.TREE,
 ];

From 9935cc1aef0b65a6a6438450b30b87fe02f20974 Mon Sep 17 00:00:00 2001
From: p-bemportato <pierluigi.bemportato@apuliasoft.com>
Date: Thu, 21 Mar 2024 14:02:08 +0000
Subject: [PATCH 14/17] fix: use types instead of shapes

---
 packages/ketchup/src/assets/input-panel.js    | 16 +++++++-------
 .../kup-input-panel/kup-input-panel.tsx       | 21 +++++++++++--------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index ace9aa4857..43f2c58970 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -37,8 +37,8 @@ const data = {
                 NAM: {
                     value: 'Francesco',
                     obj: {
-                        t: 'CN',
-                        p: 'COL',
+                        t: '',
+                        p: '',
                         k: '',
                     },
                     editable: true,
@@ -59,13 +59,13 @@ const data = {
                 COL: {
                     value: '#8E1F2F',
                     obj: {
-                        t: '',
-                        p: '',
+                        t: 'J1',
+                        p: 'COL',
                         k: '',
                     },
                     editable: true,
                     mandatory: true,
-                    shape: 'CLP',
+                    // shape: 'CLP',
                 },
                 NAT: {
                     value: 'It',
@@ -102,13 +102,13 @@ const data = {
                 CAM: {
                     value: 'on',
                     obj: {
-                        t: '',
-                        p: '',
+                        t: 'V2',
+                        p: 'SI/NO',
                         k: '',
                     },
                     editable: true,
                     mandatory: true,
-                    shape: 'CHK',
+                    // shape: 'CHK',
                 },
             },
         },
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 fc7826bfb3..8fb0ffb5a7 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
@@ -26,11 +26,13 @@ import { FButton } from '../../f-components/f-button/f-button';
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import {
     FCellProps,
-    FCellShapes,
+    FCellTypes,
 } from '../../f-components/f-cell/f-cell-declarations';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { FCell } from '../../f-components/f-cell/f-cell';
+import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
 
+const dom: KupDom = document.documentElement as KupDom;
 @Component({
     tag: 'kup-input-panel',
     styleUrl: 'kup-input-panel.scss',
@@ -187,16 +189,17 @@ export class KupInputPanel {
         const options = cell.options;
         const fieldLabel = col.title;
         const currentValue = cell.value;
-
-        const dataAdapterMap = new Map<FCellShapes, DataAdapterFn>([
-            [FCellShapes.AUTOCOMPLETE, this.#CMBandACPAdapter],
-            [FCellShapes.CHECKBOX, this.#CHKAdapter],
-            [FCellShapes.COLOR_PICKER, this.#CLPAdapter],
-            [FCellShapes.COMBOBOX, this.#CMBandACPAdapter],
-            [FCellShapes.TEXT_FIELD, this.#ITXAdapter],
+        const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+
+        const dataAdapterMap = new Map<FCellTypes, DataAdapterFn>([
+            [FCellTypes.AUTOCOMPLETE, this.#CMBandACPAdapter],
+            [FCellTypes.CHECKBOX, this.#CHKAdapter],
+            [FCellTypes.COLOR_PICKER, this.#CLPAdapter],
+            [FCellTypes.COMBOBOX, this.#CMBandACPAdapter],
+            [FCellTypes.STRING, this.#ITXAdapter],
         ]);
 
-        const adapter = dataAdapterMap.get(cell.shape);
+        const adapter = dataAdapterMap.get(cellType);
 
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }

From f4d1f2ef7c7a7d8887c4b91aff394c1177241bec Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Thu, 21 Mar 2024 15:11:07 +0000
Subject: [PATCH 15/17] BTN List incomplete

---
 packages/ketchup/src/assets/input-panel.js    | 63 +++++++++++++++++++
 .../kup-input-panel/kup-input-panel.tsx       | 37 +++++++++++
 2 files changed, 100 insertions(+)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 43f2c58970..64402298cd 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -30,6 +30,11 @@ const data = {
             title: 'Campionato vinto',
             visible: true,
         },
+        {
+            name: 'BUT',
+            title: 'Buttons list',
+            visible: true,
+        },
     ],
     rows: [
         {
@@ -110,6 +115,64 @@ const data = {
                     mandatory: true,
                     // shape: 'CHK',
                 },
+                BUT: {
+                    cssClass: 'strong-text',
+                    data: {
+                        data: [
+                            {
+                                children: [
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'lightbulb-outline',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Collaboratore',
+                                    },
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'briefcase',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Azienda',
+                                    },
+                                ],
+                                data: {
+                                    dropdownOnly: true,
+                                },
+                                disabled: false,
+                                expandable: false,
+                                isExpanded: false,
+                                options: false,
+                            },
+                        ],
+                        customStyle:
+                            ' #kup-component button { padding: 0; font-size: 0.65em; } ',
+                        icon: 'settings',
+                        className: 'kup-slim',
+                    },
+                    editable: true,
+                    obj: {
+                        k: '000050',
+                        p: 'COD_VER',
+                        t: 'VO',
+                    },
+                    shape: 'BTN',
+                    value: '',
+                },
             },
         },
     ],
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 8fb0ffb5a7..ec34e8a629 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
@@ -197,13 +197,50 @@ export class KupInputPanel {
             [FCellTypes.COLOR_PICKER, this.#CLPAdapter],
             [FCellTypes.COMBOBOX, this.#CMBandACPAdapter],
             [FCellTypes.STRING, this.#ITXAdapter],
+            [FCellTypes.BUTTON_LIST, this.#BTNAdapter],
         ]);
 
         const adapter = dataAdapterMap.get(cellType);
+        console.log(cellType, cell.shape, adapter === null);
 
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }
 
+    #BTNAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        _fieldLabel: string,
+        _currentValue: string
+    ) {
+        //TODO: come gestire i button list dal protocollo?
+        return {
+            data: [
+                {
+                    // children: [
+                    //     {
+                    //         children: [],
+                    //         disabled: false,
+                    //         expandable: false,
+                    //         icon: 'lightbulb-outline',
+                    //         isExpanded: false,
+                    //         obj: {
+                    //             k: '000050',
+                    //             p: 'COD_VER',
+                    //             t: 'VO',
+                    //         },
+                    //         options: false,
+                    //         value: 'Collaboratore',
+                    //     },
+                    // ],
+                    data: { dropdownOnly: false, label: 'Pier' },
+                },
+                { data: { dropdownOnly: false, label: 'Valerio' } },
+            ],
+        };
+    }
+
     #CMBandACPAdapter(
         options: {
             id: string;

From a4dc21bb1ae6f021e4b71ba5691adb3c69120ede Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Thu, 21 Mar 2024 15:29:44 +0000
Subject: [PATCH 16/17] fix

---
 packages/ketchup/src/assets/input-panel.js    | 23 +++++++++++++++++++
 .../kup-input-panel/kup-input-panel.tsx       | 20 ++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 64402298cd..628333272f 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -30,6 +30,11 @@ const data = {
             title: 'Campionato vinto',
             visible: true,
         },
+        {
+            name: 'CHA',
+            title: 'Chart',
+            visible: true,
+        },
         {
             name: 'BUT',
             title: 'Buttons list',
@@ -115,6 +120,24 @@ const data = {
                     mandatory: true,
                     // shape: 'CHK',
                 },
+                CHA: {
+                    data: {
+                        sizeX: '50px',
+                        offlineMode: {
+                            value: '8;4;5',
+                        },
+                        id: 'i1012_GREF_0',
+                        cellId: 'i1012_GREF_0',
+                        sizeY: '50px',
+                    },
+                    obj: {
+                        k: '8;4;5',
+                        p: 'GRA_PIE',
+                        t: 'J4',
+                    },
+                    shape: 'Gra',
+                    value: '8;4;5',
+                },
                 BUT: {
                     cssClass: 'strong-text',
                     data: {
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 ec34e8a629..b4400e6e27 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
@@ -193,19 +193,35 @@ export class KupInputPanel {
 
         const dataAdapterMap = new Map<FCellTypes, DataAdapterFn>([
             [FCellTypes.AUTOCOMPLETE, this.#CMBandACPAdapter],
+            [FCellTypes.BUTTON_LIST, this.#BTNAdapter],
+            [FCellTypes.CHART, this.#GRAAdapter],
             [FCellTypes.CHECKBOX, this.#CHKAdapter],
             [FCellTypes.COLOR_PICKER, this.#CLPAdapter],
             [FCellTypes.COMBOBOX, this.#CMBandACPAdapter],
             [FCellTypes.STRING, this.#ITXAdapter],
-            [FCellTypes.BUTTON_LIST, this.#BTNAdapter],
         ]);
 
         const adapter = dataAdapterMap.get(cellType);
-        console.log(cellType, cell.shape, adapter === null);
+        console.log(cellType, cell.shape, adapter === undefined);
 
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }
 
+    #GRAAdapter() {
+        //TODO: definire mapping
+        return {
+            data: {
+                sizeX: '50px',
+                offlineMode: {
+                    value: '8;4;5',
+                },
+                id: 'i1012_GREF_0',
+                cellId: 'i1012_GREF_0',
+                sizeY: '50px',
+            },
+        };
+    }
+
     #BTNAdapter(
         _options: {
             id: string;

From 676765ccc3596238eab1e7cdbe5b1e447c8594bb Mon Sep 17 00:00:00 2001
From: Valerio Como <valerio.como@apuliasoft.com>
Date: Fri, 22 Mar 2024 08:53:26 +0000
Subject: [PATCH 17/17] fix

---
 packages/ketchup/src/assets/input-panel.js     | 12 +++++++++++-
 .../kup-input-panel/kup-input-panel.tsx        | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
index 628333272f..8cd626a28d 100644
--- a/packages/ketchup/src/assets/input-panel.js
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -33,12 +33,17 @@ const data = {
         {
             name: 'CHA',
             title: 'Chart',
+            visible: false,
+        },
+        {
+            name: 'CHI',
+            title: 'Chip',
             visible: true,
         },
         {
             name: 'BUT',
             title: 'Buttons list',
-            visible: true,
+            visible: false,
         },
     ],
     rows: [
@@ -138,6 +143,11 @@ const data = {
                     shape: 'Gra',
                     value: '8;4;5',
                 },
+                CHI: {
+                    // data: {},
+                    shape: 'CHI',
+                    value: 'Chipp',
+                },
                 BUT: {
                     cssClass: 'strong-text',
                     data: {
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 b4400e6e27..9bede0804f 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
@@ -195,6 +195,7 @@ export class KupInputPanel {
             [FCellTypes.AUTOCOMPLETE, this.#CMBandACPAdapter],
             [FCellTypes.BUTTON_LIST, this.#BTNAdapter],
             [FCellTypes.CHART, this.#GRAAdapter],
+            [FCellTypes.CHIP, this.#CHIAdapter],
             [FCellTypes.CHECKBOX, this.#CHKAdapter],
             [FCellTypes.COLOR_PICKER, this.#CLPAdapter],
             [FCellTypes.COMBOBOX, this.#CMBandACPAdapter],
@@ -207,6 +208,23 @@ export class KupInputPanel {
         return adapter ? adapter(options, fieldLabel, currentValue) : null;
     }
 
+    #CHIAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        _fieldLabel: string,
+        _currentValue: string
+    ) {
+        return { data: [{ value: 'Valore1' }], title: 'Chippp' };
+        // return {
+        //     data: {
+        //         label: 'CHipp',
+        //     },
+        //     label: fieldLabel,
+        // };
+    }
+
     #GRAAdapter() {
         //TODO: definire mapping
         return {