feat(kup-input-panel): handle absolute layout

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

@@ -53,14 +53,16 @@ export interface KupInputPanelCellOptions {
 
 export interface KupInputPanelLayout {
     horizontal?: boolean;
-    sections?: KupInputPanelLayoutSection[];
+    absolute?: boolean;
+    sections?:
+        | KupInputPanelLayoutSection[]
+        | KupInputPanelLayoutAbsoluteSection[];
     sectionsType?: KupInputPanelLayoutSectionType;
 }
 
 export enum KupInputPanelLayoutSectionType {
     TAB = 'tab',
 }
-
 export interface KupInputPanelLayoutSection {
     id?: string;
     title?: string;
@@ -76,6 +78,12 @@ export interface KupInputPanelLayoutSection {
     sectionsType?: KupInputPanelLayoutSectionType;
 }
 
+export interface KupInputPanelLayoutAbsoluteSection {
+    attributes: KupInputPanelLayoutAbsoluteSectionAttributes;
+    fields: KupInputPanelLayoutAbsoluteField[];
+    sections?: KupInputPanelLayoutAbsoluteSection[];
+}
+
 export interface KupInputPanelLayoutField {
     id: string;
     // Span is referred to start
@@ -88,6 +96,25 @@ export interface KupInputPanelLayoutField {
     rowEnd?: number;
 }
 
+export interface KupInputPanelLayoutAbsoluteField {
+    attributes: KupInputPanelLayoutAbsoluteFieldsAttributes;
+}
+
+export interface KupInputPanelLayoutAbsoluteSectionAttributes {
+    Col: string;
+    Wid: string;
+    Nam: string;
+    Row: string;
+    Hei: string;
+}
+
+export interface KupInputPanelLayoutAbsoluteFieldsAttributes {
+    Col: string;
+    Lun: string;
+    Nam: string;
+    Row: string;
+}
+
 export type DataAdapterFn = (
     options: GenericObject,
     fieldLabel: string,

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

@@ -0,0 +1,42 @@
+const CHAR_WIDTH = 12;
+const ROW_HEIGHT = 22;
+
+export const getAbsoluteWidth = (length: number) => {
+    if (length == 0) {
+        return CHAR_WIDTH / 2;
+    }
+
+    if (!length) {
+        return null;
+    }
+
+    if (length === 1) {
+        return 1.5 * CHAR_WIDTH;
+    }
+
+    return length * CHAR_WIDTH;
+};
+
+export const getAbsoluteHeight = (height: number) => {
+    if (!height) {
+        return null;
+    }
+
+    return height * ROW_HEIGHT;
+};
+
+export const getAbsoluteTop = (row: number) => {
+    if (!row) {
+        return null;
+    }
+
+    return row * ROW_HEIGHT;
+};
+
+export const getAbsoluteLeft = (col: number) => {
+    if (!col) {
+        return null;
+    }
+
+    return col * CHAR_WIDTH;
+};

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

@@ -92,5 +92,26 @@
         font-family: var(--kup_cell_font_family);
       }
     }
+
+    .input-panel-label {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--absolute {
+      height: 87ch;
+      justify-content: flex-end;
+
+      .input-panel-label {
+        justify-content: start;
+      }
+
+      .mdc-text-field {
+        height: unset !important;
+      }
+    }
   }
 }

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

@@ -53,6 +53,9 @@ import {
     KupInputPanelCell,
     KupInputPanelColumn,
     KupInputPanelData,
+    KupInputPanelLayout,
+    KupInputPanelLayoutAbsoluteField,
+    KupInputPanelLayoutAbsoluteSection,
     KupInputPanelLayoutField,
     KupInputPanelLayoutSection,
     KupInputPanelLayoutSectionType,
@@ -61,6 +64,12 @@ import {
     KupInputPanelSubmit,
 } from './kup-input-panel-declarations';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import {
+    getAbsoluteHeight,
+    getAbsoluteLeft,
+    getAbsoluteTop,
+    getAbsoluteWidth,
+} from './kup-input-panel-utils';
 
 const dom: KupDom = document.documentElement as KupDom;
 @Component({
@@ -200,7 +209,6 @@ export class KupInputPanel {
     @Watch('data')
     onDataChanged() {
         this.#originalData = structuredClone(this.data);
-
         if (this.#listeners.length) {
             this.#listeners.map(({ event, handler }) => {
                 this.rootElement.removeEventListener(event, handler);
@@ -274,6 +282,7 @@ export class KupInputPanel {
 
     #renderRow(inputPanelCell: InputPanelCells) {
         const layout = inputPanelCell.row.layout;
+
         const horizontal = layout?.horizontal || false;
 
         let rowContent: VNode[];
@@ -283,20 +292,15 @@ export class KupInputPanel {
                 this.#renderCell(cell.cell, inputPanelCell.row, cell.column)
             );
         } else {
-            const sectionRender = this.#sectionRenderMap.get(
-                layout.sectionsType
-            );
-
-            rowContent = sectionRender
-                ? sectionRender(inputPanelCell, layout.sections)
-                : layout.sections.map((section) =>
-                      this.#renderSection(inputPanelCell, section)
-                  );
+            rowContent = layout.absolute
+                ? this.#renderAbsoluteLayout(inputPanelCell, layout)
+                : this.#renderGridLayout(inputPanelCell, layout);
         }
 
         const classObj = {
             'input-panel': true,
             'input-panel--column': !horizontal,
+            'input-panel--absolute': layout?.absolute,
         };
 
         // We create a form for each row in data
@@ -424,15 +428,8 @@ export class KupInputPanel {
     }
 
     #renderLabel(cell: KupDataCell, cellId: string) {
-        const styleObj = {
-            display: 'flex',
-            width: '100%',
-            height: '100%',
-            'align-items': 'center',
-            'justify-content': 'center',
-        };
         return (
-            <span style={styleObj} id={cellId}>
+            <span class="input-panel-label" id={cellId}>
                 {cell.value}
             </span>
         );
@@ -452,6 +449,28 @@ export class KupInputPanel {
         return null;
     }
 
+    #renderGridLayout(
+        inputPanelCell: InputPanelCells,
+        layout: KupInputPanelLayout
+    ) {
+        const sectionRender = this.#sectionRenderMap.get(layout.sectionsType);
+
+        return sectionRender
+            ? sectionRender(inputPanelCell, layout.sections)
+            : layout.sections.map((section) =>
+                  this.#renderSection(inputPanelCell, section)
+              );
+    }
+
+    #renderAbsoluteLayout(
+        inputPanelCell: InputPanelCells,
+        layout: KupInputPanelLayout
+    ) {
+        return layout.sections.map((section) =>
+            this.#renderAbsoluteSection(inputPanelCell, section)
+        );
+    }
+
     #renderSection(
         cells: InputPanelCells,
         section: KupInputPanelLayoutSection,
@@ -506,6 +525,43 @@ export class KupInputPanel {
         );
     }
 
+    #renderAbsoluteSection(
+        cells: InputPanelCells,
+        section: KupInputPanelLayoutAbsoluteSection
+    ) {
+        let content = [];
+
+        if (section.sections?.length) {
+            content = section.sections.map((innerSection) =>
+                this.#renderAbsoluteSection(cells, innerSection)
+            );
+        } else if (section.fields?.length) {
+            content = section.fields.map((field) =>
+                this.#renderAbsoluteField(cells, field)
+            );
+        }
+
+        const width = `${getAbsoluteWidth(+section.attributes.Wid)}px`;
+        const height = `${getAbsoluteHeight(+section.attributes.Hei)}px`;
+        const top = `${getAbsoluteTop(+section.attributes.Row)}px`;
+        const left = `${getAbsoluteLeft(+section.attributes.Col)}px`;
+
+        const sectionStyle = {
+            position: 'absolute',
+            width,
+            'min-width': width,
+            'max-width': width,
+            height,
+            'min-height': height,
+            'max-height': height,
+            top,
+            left,
+            overflow: 'auto',
+        };
+
+        return <div style={sectionStyle}>{content}</div>;
+    }
+
     #renderSectionTab(
         cells: InputPanelCells,
         sections: KupInputPanelLayoutSection[]
@@ -600,6 +656,59 @@ export class KupInputPanel {
         );
     }
 
+    #renderAbsoluteField(
+        cells: InputPanelCells,
+        field: KupInputPanelLayoutAbsoluteField
+    ) {
+        const fieldCell = cells.cells.find(
+            (cell) => cell.column.name === field.attributes.Nam
+        );
+        if (!fieldCell || !fieldCell.cell) {
+            return;
+        }
+
+        let length: number;
+        if (fieldCell.cell.shape == FCellShapes.DATE) {
+            length = +field.attributes.Lun > 8 ? +field.attributes.Lun : 8;
+        } else {
+            length = +field.attributes.Lun;
+        }
+
+        const width = `${getAbsoluteWidth(length)}px`;
+        const height = `${getAbsoluteHeight(1)}px`;
+        const top = `${getAbsoluteTop(+field.attributes.Row)}px`;
+        const left = `${getAbsoluteLeft(+field.attributes.Col)}px`;
+
+        const styleObj = {
+            position: 'absolute',
+            width,
+            'min-width': width,
+            'max-width': width,
+            height,
+            'min-height': height,
+            'max-height': height,
+            top,
+            left,
+            overflow: 'auto',
+        };
+
+        const cell = {
+            ...fieldCell.cell,
+            data: {
+                ...fieldCell.cell.data,
+                customStyle:
+                    (fieldCell.cell.data.customStyle || '') +
+                    '.mdc-text-field {height: unset !important;}',
+            },
+        };
+
+        return (
+            <div style={styleObj}>
+                {this.#renderCell(cell, cells.row, fieldCell.column)}
+            </div>
+        );
+    }
+
     #mapCells(data: KupInputPanelData) {
         const inpuPanelCells = data?.rows?.length
             ? data.rows.reduce((inpuPanelCells, row) => {