@sme.up/ketchup 11.0.0-SNAPSHOT-20241129102338 → 11.0.0-SNAPSHOT-20241129170944

package/dist/components/kup-input-panel.js

@@ -69,7 +69,7 @@ const getAbsoluteLeft = (col) => {
     return col * CHAR_WIDTH;
 };
 
-const kupInputPanelCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup-fcell-width:fit-content;--kup_input_panel_background_color:var(\n    --kup-input-panel-background-color,\n    var(--kup-layer-0)\n  );--kup_input_panel_color:var(\n    --kup-input-panel-color,\n    var(--kup-text-secondary)\n  );--kup_input_panel_font_family:var(\n    --kup-input-panel-font-family,\n    var(--kup-font-family)\n  );--kup_input_panel_font_size:var(\n    --kup-input-panel-font-size,\n    var(--kup-font-size)\n  );--kup_input_panel_label_alignment:var(--kup-input-panel-label-alignment);--kup_input_panel_label_width:var(--kup-input-panel-label-width);--kup_input_panel_padding:var(--kup-input-panel-padding, 1em 0);--kup_input_panel_padding--inline:var(--kup-input-panel-padding--inline, 0)}:host .input-panel{background:var(--kup_input_panel_background_color);color:var(--kup_input_panel_color);display:flex;flex-grow:1;overflow:auto;padding:var(--kup_input_panel_padding);position:relative;gap:1rem}:host .input-panel__commands{display:flex;gap:1rem}:host .input-panel__commands.input-panel__commands--right{flex-shrink:0;overflow:hidden}:host .input-panel--inline{flex:1;overflow-x:auto;white-space:nowrap;padding:var(--kup_input_panel_padding--inline)}:host .input-panel--column{flex-direction:column}:host .input-panel__section_label_container{display:flex;flex-direction:column;gap:1rem}:host .input-panel__section{display:grid;min-width:0}:host .input-panel__section .f-cell__content>*{width:100%}:host .input-panel__horizontal-section{display:inline-grid}:host .input-panel__section-inline{display:inline-block;width:max-content}:host .input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}:host .input-panel__label_container{display:flex;flex-direction:column;justify-content:center}:host .input-panel__label_container>.f-cell{flex:1}:host .input-panel__tabs_container{display:flex;flex-direction:column;justify-content:center;gap:2rem}:host .input-panel .f-cell.number-cell .f-cell__content{--kup-textfield-font-family:var(--kup_cell_font_family);font-family:var(--kup_cell_font_family)}:host .input-panel .input-panel-label{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .input-panel--absolute{justify-content:flex-end}:host .input-panel--absolute .input-panel-label{justify-content:start}:host .input-panel--absolute .mdc-text-field{height:unset !important}:host .input-panel-form--inline{display:flex;align-items:end;gap:1rem}";
+const kupInputPanelCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup-fcell-width:fit-content;--kup_input_panel_background_color:var(\n    --kup-input-panel-background-color,\n    var(--kup-layer-0)\n  );--kup_input_panel_color:var(\n    --kup-input-panel-color,\n    var(--kup-text-secondary)\n  );--kup_input_panel_font_family:var(\n    --kup-input-panel-font-family,\n    var(--kup-font-family)\n  );--kup_input_panel_font_size:var(\n    --kup-input-panel-font-size,\n    var(--kup-font-size)\n  );--kup_input_panel_label_alignment:var(--kup-input-panel-label-alignment);--kup_input_panel_label_width:var(--kup-input-panel-label-width);--kup_input_panel_padding:var(--kup-input-panel-padding, 1em 0);--kup_input_panel_padding--inline:var(--kup-input-panel-padding--inline, 0)}:host .input-panel{background:var(--kup_input_panel_background_color);color:var(--kup_input_panel_color);display:flex;flex-grow:1;overflow:auto;padding:var(--kup_input_panel_padding);position:relative;gap:1rem}:host .input-panel__commands{display:flex;gap:1rem}:host .input-panel__commands.input-panel__commands--right{flex-shrink:0;overflow:hidden}:host .input-panel--inline{flex:1;overflow-x:auto;white-space:nowrap;padding:var(--kup_input_panel_padding--inline)}:host .input-panel--column{flex-direction:column}:host .input-panel__section_label_container{display:flex;flex-direction:column;gap:1rem}:host .input-panel__section{display:grid;min-width:0}:host .input-panel__section .f-cell__content>*{width:100%}:host .input-panel__horizontal-section{display:inline-grid}:host .input-panel__section-inline{display:inline-block;width:max-content}:host .input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}:host .input-panel__label_container{display:flex;flex-direction:column;justify-content:center}:host .input-panel__label_container>.f-cell{flex:1}:host .input-panel__tabs_container{display:flex;flex-direction:column;justify-content:center;gap:2rem}:host .input-panel .f-cell.number-cell .f-cell__content{--kup-textfield-font-family:var(--kup_cell_font_family);font-family:var(--kup_cell_font_family)}:host .input-panel .input-panel-label{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .input-panel--absolute{justify-content:flex-end}:host .input-panel--absolute .input-panel-label{justify-content:start}:host .input-panel--absolute .mdc-text-field{height:unset !important}:host .input-panel-form--inline{display:flex;align-items:end;gap:1rem}:host .input-panel__typography{padding:1rem 2rem}";
 const KupInputPanelStyle0 = kupInputPanelCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -260,7 +260,7 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
                 h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
             ]
             : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
-        return (h(Host, { key: 'fc0407257eb6c02e4658f2486954c5b1af0432c6' }, h("style", { key: '17299502197b8deb7b571a3955ee627b07ebc634' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4b900f0b0d6ff85eb287083b1f672d4f81d27a42', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: '67d267e88ad82f3a15baf1d57ba972bbcaf193e4' }, h("style", { key: '51f06b604373a081e5c9c11ab154aea736afcf2c' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'dc34201b29b5f7ecd6784df58ffa554aa5104531', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -300,7 +300,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         return cell;
     }, null);
 }, _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
-    var _a;
+    var _a, _b;
     const layout = inputPanelCell.row.layout;
     const horizontal = (layout === null || layout === void 0 ? void 0 : layout.horizontal) || false;
     const styleObj = {};
@@ -356,7 +356,11 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         [`input-panel__commands--${this.buttonPosition}`]: true,
     };
     // We create a form for each row in data
-    return (h("form", { name: this.rootElement.id, id: this.rootElement.id, class: inputPanelClass, ref: (el) => (__classPrivateFieldSet(this, _KupInputPanel_formRef, el, "f")), onSubmit: (e) => {
+    const props = {
+        value: (_b = layout.sections[0]) === null || _b === void 0 ? void 0 : _b.title,
+        type: FTypographyType.LABEL,
+    };
+    return (h("div", null, h("form", { name: this.rootElement.id, id: this.rootElement.id, class: inputPanelClass, ref: (el) => (__classPrivateFieldSet(this, _KupInputPanel_formRef, el, "f")), onSubmit: (e) => {
             e.preventDefault();
             this.submitCb({
                 value: {
@@ -366,7 +370,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             });
         }, onContextMenu: (e) => {
             e.preventDefault();
-        } }, h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.inputPanelCommands)));
+        } }, h("div", { class: "input-panel__typography" }, h(FTypography, Object.assign({}, props))), h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.inputPanelCommands))));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
     if (!cell) {
         return;
@@ -601,20 +605,24 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     if (!field.absoluteHeight) {
         field.absoluteHeight = 1;
     }
-    const width = `${getAbsoluteWidth(length)}px`;
-    const height = `${getAbsoluteHeight(field.absoluteHeight)}px`;
-    const top = `${getAbsoluteTop(field.absoluteRow)}px`;
-    const left = `${getAbsoluteLeft(field.absoluteColumn)}px`;
+    const absoluteWidth = getAbsoluteWidth(length);
+    const absoluteHeight = getAbsoluteHeight(field.absoluteHeight);
+    const absoluteTop = getAbsoluteTop(field.absoluteRow);
+    const absoluteLeft = getAbsoluteLeft(field.absoluteColumn);
     const styleObj = {
         position: 'absolute',
-        width,
-        'min-width': width,
-        'max-width': width,
-        height,
-        'min-height': height,
-        'max-height': height,
-        top,
-        left,
+        width: absoluteWidth !== null ? `${absoluteWidth}px` : null,
+        'min-width': absoluteWidth !== null ? `${absoluteWidth}px` : null,
+        'max-width': absoluteWidth !== null ? `${absoluteWidth}px` : null,
+        height: absoluteHeight !== null ? `${absoluteHeight}px` : null,
+        'min-height': absoluteHeight !== null ? `${absoluteHeight}px` : null,
+        'max-height': absoluteHeight !== null ? `${absoluteHeight}px` : null,
+        top: absoluteTop !== null
+            ? `${getAbsoluteTop(field.absoluteRow)}px`
+            : null,
+        left: absoluteLeft !== null
+            ? `${getAbsoluteLeft(field.absoluteColumn)}px`
+            : null,
         overflow: 'auto',
     };
     fieldCell.cell.data = Object.assign(Object.assign({}, fieldCell.cell.data), { sizing: 'extra-small', customStyle: (fieldCell.cell.data.customStyle || '') +