fix: added state for cell props

packages/ketchup/src/assets/input-panel.js

@@ -108,13 +108,9 @@ const data = {
                 },
                 CHK: {
                     value: 'on',
-                    obj: {
-                        t: 'V2',
-                        p: 'SI/NO',
-                        k: '',
-                    },
                     editable: true,
                     mandatory: true,
+                    shape: 'CHK',
                 },
                 RAD: {
                     value: '1',

packages/ketchup/src/components.d.ts

@@ -2470,6 +2470,10 @@ export namespace Components {
           * @default false
          */
         "hiddenSubmitButton": boolean;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
         /**
           * Sets the callback function on submit form
           * @default null

packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts

@@ -62,3 +62,15 @@ export type DataAdapterFn = (
     fieldLabel: string,
     currentValue: string
 ) => Object;
+
+export type InputPanelCells = {
+    cells: { cell: KupDataCell; column: KupDataColumn }[];
+    row?: KupInputPanelRow;
+};
+
+export enum KupInputPanelProps {
+    customStyle = 'Custom style of the component.',
+    data = 'Actual data of the input panel.',
+    hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.',
+    submitCb = 'Sets the callback function on submit form',
+}

packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts

@@ -320,6 +320,11 @@ describe('kup-input-panel', () => {
 
         const value = await input.getProperty('value');
         expect(value).toBe('off');
+
+        await input.click();
+
+        const updatedValue = await input.getProperty('value');
+        expect(updatedValue).toBe('on');
     });
 
     it('renders radio buttons', async () => {
@@ -378,10 +383,24 @@ describe('kup-input-panel', () => {
             const value = await input.getProperty('value');
             expect(value).toBe(radioOptions[i]);
 
-            if (data.rows[0].cells.RAD.value === radioOptions[i]) {
+            if (data.rows[0].cells.RAD.value === value) {
                 const radioButtonCircle = await radioButton.find('div.radio');
                 expect(radioButtonCircle).toHaveClass('radio--checked');
             }
         }
+
+        const newRadioButtonChecked = await radioButtons[2].find('div.radio');
+
+        await newRadioButtonChecked.click();
+
+        await page.waitForChanges();
+
+        const updatedRadioButtons = await radioButtonsCell.findAll(
+            'div.form-field'
+        );
+        const updateRadioButtonChecked = await updatedRadioButtons[2].find(
+            'div.radio '
+        );
+        expect(updateRadioButtonChecked).toHaveClass('radio--checked');
     });
 });

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

@@ -4,23 +4,32 @@ import {
     Event,
     EventEmitter,
     Host,
+    Method,
     Prop,
+    State,
     VNode,
     Watch,
+    forceUpdate,
     h,
 } from '@stencil/core';
 import {
     DataAdapterFn,
+    InputPanelCells,
     KupInputPanelCell,
     KupInputPanelColumn,
     KupInputPanelData,
+    KupInputPanelProps,
     KupInputPanelRow,
 } from './kup-input-panel-declarations';
 import {
     KupManager,
     kupManagerInstance,
 } from '../../managers/kup-manager/kup-manager';
-import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
+import {
+    GenericObject,
+    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';
@@ -31,7 +40,8 @@ import {
 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';
-import { FRadioData } from '../../components';
+import { KupDataCell } from '../../components';
+import { getProps, setProps } from '../../utils/utils';
 
 const dom: KupDom = document.documentElement as KupDom;
 @Component({
@@ -76,6 +86,18 @@ export class KupInputPanel {
     @Prop() submitCb: (e: SubmitEvent) => unknown = null;
     //#endregion
 
+    //#region STATES
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+
+    /**
+     * Values to send as props to FCell
+     * @default []
+     */
+    @State() private inputPanelCells: InputPanelCells[] = [];
+    //#endregion
+
     //#region VARIABLES
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -91,8 +113,7 @@ export class KupInputPanel {
 
     @Watch('data')
     onDataChanged() {
-        // console.log('data changed', this.data);
-        // this.render();
+        this.#mapCells(this.data);
     }
     //#endregion
 
@@ -101,7 +122,30 @@ export class KupInputPanel {
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
 
-    // TODO ADD METHODS HERE
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    @Method()
+    async getProps(descriptions?: boolean): Promise<GenericObject> {
+        return getProps(this, KupInputPanelProps, descriptions);
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    @Method()
+    async refresh(): Promise<void> {
+        forceUpdate(this);
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    @Method()
+    async setProps(props: GenericObject): Promise<void> {
+        setProps(this, KupInputPanelProps, props);
+    }
     //#endregion
 
     //#region EVENTS
@@ -126,24 +170,13 @@ export class KupInputPanel {
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
 
-    #renderRow(row: KupInputPanelRow) {
+    #renderRow(inputPanelCell: InputPanelCells) {
         // todo layout
-        const horizontal = row.layout?.horizontal || false;
-
-        const rowContent: VNode[] = this.data.columns
-            .filter((col) => col.visible)
-            .map((col) => {
-                const cell = row.cells[col.name];
+        const horizontal = inputPanelCell.row.layout?.horizontal || false;
 
-                const mappedCell = {
-                    ...cell,
-                    data: this.#mapData(cell, col),
-                    slotData: this.#slotData(cell, col),
-                    isEditable: cell.editable,
-                };
-
-                return this.#renderCell(mappedCell, row, col);
-            });
+        const rowContent: VNode[] = inputPanelCell.cells.map((cell) =>
+            this.#renderCell(cell.cell, inputPanelCell.row, cell.column)
+        );
 
         const classObj = {
             form: true,
@@ -172,7 +205,7 @@ export class KupInputPanel {
     }
 
     #renderCell(
-        cell: KupInputPanelCell,
+        cell: KupDataCell,
         row: KupInputPanelRow,
         column: KupInputPanelColumn
     ) {
@@ -181,21 +214,37 @@ export class KupInputPanel {
             column,
             row,
             component: this,
-            editable: cell.editable,
+            editable: cell.isEditable,
             renderKup: true,
             setSizes: true,
         };
 
-        // if (
-        //     dom.ketchup.data.cell.getType(cell, cell.shape) === FCellTypes.RADIO
-        // ) {
-        //     // console.log('cell.data', cell.data);
-        //     return <kup-radio {...cell.data} />;
-        // }
-
         return <FCell {...cellProps} />;
     }
 
+    #mapCells(data: KupInputPanelData) {
+        const inpuPanelCells = data?.rows?.length
+            ? data.rows.reduce((inpuPanelCells, row) => {
+                  const cells = data.columns
+                      .filter((column) => column.visible)
+                      .map((column) => {
+                          const cell = row.cells[column.name];
+                          const mappedCell = {
+                              ...cell,
+                              data: this.#mapData(cell, column),
+                              slotData: this.#slotData(cell, column),
+                              isEditable: cell.editable,
+                          };
+
+                          return { column, cell: mappedCell };
+                      });
+                  return [...inpuPanelCells, { cells, row }];
+              }, [])
+            : [];
+
+        this.inputPanelCells = inpuPanelCells;
+    }
+
     #mapData(cell: KupInputPanelCell, col: KupInputPanelColumn) {
         const options = cell.options;
         const fieldLabel = col.title;
@@ -329,29 +378,12 @@ export class KupInputPanel {
     }
 
     #RADAdapter(options: string[], _fieldLabel: string, currentValue: string) {
-        // const onChange = (i) => {
-        //     this.data = {
-        //         ...this.data,
-        //         rows: this.data.rows.map((row) => ({
-        //             ...row,
-        //             cells: {
-        //                 ...row.cells,
-        //                 RAD: {
-        //                     ...row.cells['RAD'],
-        //                     value: options[i],
-        //                 },
-        //             },
-        //         })),
-        //     };
-        // };
-
         return {
             data: options.map((option) => ({
                 value: option,
                 label: option,
                 checked: option === currentValue,
             })),
-            // onChange,
         };
     }
 
@@ -391,7 +423,7 @@ export class KupInputPanel {
     }
 
     render() {
-        const isEmptyData = Boolean(!this.data?.rows?.length);
+        const isEmptyData = Boolean(!this.inputPanelCells.length);
 
         const inputPanelContent: VNode[] = isEmptyData
             ? [
@@ -401,7 +433,9 @@ export class KupInputPanel {
                       )}
                   </p>,
               ]
-            : this.data.rows.map((row) => this.#renderRow(row));
+            : this.inputPanelCells.map((inputPanelCell) =>
+                  this.#renderRow(inputPanelCell)
+              );
 
         return (
             <Host>

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

@@ -49,6 +49,7 @@ import { FRadio } from '../f-radio/f-radio';
 import { FRating } from '../f-rating/f-rating';
 import type { KupDataTable } from '../../components/kup-data-table/kup-data-table';
 import { FRadioProps } from '../f-radio/f-radio-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 
 const dom: KupDom = document.documentElement as KupDom;
 
@@ -854,7 +855,13 @@ function cellEvent(
         if (cellEventName === FCellEvents.UPDATE) {
             try {
                 (comp as KupComponent).refresh();
-            } catch (error) {}
+            } catch (error) {
+                dom.ketchup.debug.logMessage(
+                    comp,
+                    error,
+                    KupDebugCategory.ERROR
+                );
+            }
         }
     }
 }