@sme.up/ketchup 11.0.0-SNAPSHOT-20241126095140 → 11.0.0-SNAPSHOT-20241126132827

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

@@ -16,7 +16,25 @@ var KupInputPanelProps;
     KupInputPanelProps["submitCb"] = "Sets the callback function on submit form";
     KupInputPanelProps["optionsHandler"] = "Sets the callback function to recieve options";
     KupInputPanelProps["buttonPosition"] = "Manage the position of the buttons related to the input panel content. It is an enumeration";
+    KupInputPanelProps["inputPanelPosition"] = "Manage the global layout of the input panel fields. The default is COLUMNS.";
 })(KupInputPanelProps || (KupInputPanelProps = {}));
+var KupInputPanelPosition;
+(function (KupInputPanelPosition) {
+    KupInputPanelPosition["COLUMNS"] = "COLUMNS";
+    KupInputPanelPosition["INLINE"] = "INLINE";
+    KupInputPanelPosition["STRETCHED"] = "STRETCHED";
+    KupInputPanelPosition["UPINLINE"] = "UPINLINE";
+    KupInputPanelPosition["UPCOLUMNS"] = "UPCOLUMNS";
+    KupInputPanelPosition["WATERMARK"] = "WATERMARK";
+})(KupInputPanelPosition || (KupInputPanelPosition = {}));
+var kupInputPanelButtonsPositions;
+(function (kupInputPanelButtonsPositions) {
+    kupInputPanelButtonsPositions["CENTER"] = "CENTER";
+    kupInputPanelButtonsPositions["LEFT"] = "LEFT";
+    kupInputPanelButtonsPositions["BOTTOM"] = "BOTTOM";
+    kupInputPanelButtonsPositions["RIGHT"] = "RIGHT";
+    kupInputPanelButtonsPositions["TOP"] = "TOP";
+})(kupInputPanelButtonsPositions || (kupInputPanelButtonsPositions = {}));
 
 const CHAR_WIDTH = 12;
 const ROW_HEIGHT = 22;
@@ -51,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:2rem}: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}";
 const KupInputPanelStyle0 = kupInputPanelCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -142,16 +160,17 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
             [KupInputPanelLayoutSectionType.TAB, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderSectionTab).bind(this)],
         ]));
         _KupInputPanel_keysShortcut.set(this, []);
+        this.buttonPosition = kupInputPanelButtonsPositions.BOTTOM;
         this.customStyle = '';
+        this.dashboardMode = false;
         this.data = null;
         this.hiddenSubmitButton = false;
-        this.buttonPosition = undefined;
+        this.inputPanelPosition = KupInputPanelPosition.COLUMNS;
         this.submitCb = null;
         this.optionsHandler = null;
         this.customButtonClickHandler = null;
         this.checkValidObjCallback = null;
         this.checkValidValueCallback = null;
-        this.dashboardMode = false;
         this.inputPanelCells = [];
         this.inputPanelCommands = [];
         this.tabSelected = null;
@@ -241,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: '9bd509478c583014f8d068fdfe66e41dce11e414' }, h("style", { key: '861e0d64ed51632c7a753c0d3d21e5369e1b28a2' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '1489d6a2efd99950da48bb5cd9422a412ae20b6e', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: '0281ff8a6e4090655b6b8edecd3e33d5be8e0dd7' }, h("style", { key: '1b8000a1c0cc8e76748c8c58d699a0977ab69f6f' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4955c59f186cee73f5e438224fbff4a8d087d3e1', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -253,16 +272,17 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
     }; }
     static get style() { return KupInputPanelStyle0; }
 }, [1, "kup-input-panel", {
+        "buttonPosition": [1, "button-position"],
         "customStyle": [1, "custom-style"],
+        "dashboardMode": [4, "dashboard-mode"],
         "data": [16],
         "hiddenSubmitButton": [4, "hidden-submit-button"],
-        "buttonPosition": [1, "button-position"],
+        "inputPanelPosition": [1, "input-panel-position"],
         "submitCb": [16],
         "optionsHandler": [16],
         "customButtonClickHandler": [16],
         "checkValidObjCallback": [16],
         "checkValidValueCallback": [16],
-        "dashboardMode": [4, "dashboard-mode"],
         "inputPanelCells": [32],
         "inputPanelCommands": [32],
         "tabSelected": [32],
@@ -298,6 +318,9 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             if (!layout.sectionsType) {
                 const hasDim = layout.sections.some((sec) => sec.dim);
                 styleObj.display = 'grid';
+                if (this.inputPanelPosition == 'INLINE') {
+                    styleObj.display = '';
+                }
                 if (layout.horizontal) {
                     styleObj.gridTemplateColumns = hasDim
                         ? layout.sections
@@ -320,13 +343,13 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     const inputPanelClass = {
         'input-panel-form': true,
-        'input-panel-form--inline': this.buttonPosition == 'RIGHT',
+        'input-panel-form--inline': this.buttonPosition == kupInputPanelButtonsPositions.RIGHT,
     };
     const classObj = {
         'input-panel': true,
         'input-panel--column': !horizontal,
         'input-panel--absolute': layout === null || layout === void 0 ? void 0 : layout.absolute,
-        'input-panel--inline': this.buttonPosition == 'RIGHT',
+        'input-panel--inline': this.inputPanelPosition == KupInputPanelPosition.INLINE,
     };
     const commandsClass = {
         'input-panel__commands': true,
@@ -409,12 +432,12 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         : layout.sections.map((section) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderSection).call(this, inputPanelCell, section, false));
 }, _KupInputPanel_renderAbsoluteLayout = function _KupInputPanel_renderAbsoluteLayout(inputPanelCell, layout) {
     return layout.sections.map((section) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderAbsoluteSection).call(this, inputPanelCell, section));
-}, _KupInputPanel_renderSection = function _KupInputPanel_renderSection(cells, section, customLabelRender = false, styleObj = {}, layout) {
+}, _KupInputPanel_renderSection = function _KupInputPanel_renderSection(cells, section, customLabelRender = false, styleObj = {}) {
     var _a, _b;
     const classObj = {
         'input-panel__section': !section.horizontal,
         'input-panel__horizontal-section': section.horizontal,
-        'input-panel__section-inline': layout === null || layout === void 0 ? void 0 : layout.horizontal,
+        'input-panel__section-inline': this.inputPanelPosition == 'INLINE',
     };
     styleObj.gap = +section.gap > 0 ? `${section.gap}rem` : '1rem';
     let content = [];
@@ -575,8 +598,11 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     else {
         length = field.absoluteLength;
     }
+    if (!field.absoluteHeight) {
+        field.absoluteHeight = 1;
+    }
     const width = `${getAbsoluteWidth(length)}px`;
-    const height = `${getAbsoluteHeight(1)}px`;
+    const height = `${getAbsoluteHeight(field.absoluteHeight)}px`;
     const top = `${getAbsoluteTop(field.absoluteRow)}px`;
     const left = `${getAbsoluteLeft(field.absoluteColumn)}px`;
     const styleObj = {