@sme.up/ketchup 11.0.0-SNAPSHOT-20241125085638 → 11.0.0-SNAPSHOT-20241125095251

package/dist/collection/components/kup-input-panel/kup-input-panel-declarations.js.map

@@ -1 +1 @@
-{"version":3,"file":"kup-input-panel-declarations.js","sourceRoot":"","sources":["../../../src/components/kup-input-panel/kup-input-panel-declarations.ts"],"names":[],"mappings":"AAkEA,MAAM,CAAN,IAAY,8BAEX;AAFD,WAAY,8BAA8B;IACtC,6CAAW,CAAA;AACf,CAAC,EAFW,8BAA8B,KAA9B,8BAA8B,QAEzC;AAuFD,MAAM,CAAN,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC1B,oEAA8C,CAAA;IAC9C,8DAAwC,CAAA;IACxC,mHAA6F,CAAA;IAC7F,4EAAsD,CAAA;IACtD,sFAAgE,CAAA;AACpE,CAAC,EANW,kBAAkB,KAAlB,kBAAkB,QAM7B","sourcesContent":["import { GenericObject, KupEventPayload } from '../../components';\nimport {\n    KupDataCell,\n    KupDataColumn,\n    KupDataCommand,\n} from '../../managers/kup-data/kup-data-declarations';\nimport { KupObj } from '../../managers/kup-objects/kup-objects-declarations';\n\nexport interface KupInputPanelSubmit {\n    value: KupInputPanelSubmitValue;\n    cell?: string;\n}\nexport interface KupInputPanelSubmitValue {\n    after: KupInputPanelData;\n    before: KupInputPanelData;\n}\n\nexport interface KupInputPanelData {\n    columns?: KupDataColumn[];\n    rows?: KupInputPanelRow[];\n    actions?: KupInputPanelAction[];\n    setup?: {\n        commands?: Array<KupDataCommand>;\n    };\n}\n\nexport interface KupInputPanelAction {\n    type?: string;\n    fun?: string;\n}\n\nexport interface KupInputPanelColumn {\n    name: string;\n    title: string;\n    visible?: boolean;\n}\n\nexport interface KupInputPanelRow {\n    cells?: KupInputPanelRowCells;\n    layout?: KupInputPanelLayout;\n}\n\nexport interface KupInputPanelRowCells {\n    [key: string]: KupInputPanelCell;\n}\n\nexport interface KupInputPanelCell extends KupDataCell {\n    options?: GenericObject | GenericObject[];\n    editable?: boolean;\n    mandatory?: boolean;\n    inputSettings?: GenericObject;\n    fun?: string;\n}\n\nexport interface KupInputPanelCellOptions {\n    id: string;\n    label: string;\n}\n\nexport interface KupInputPanelLayout {\n    horizontal?: boolean;\n    absolute?: boolean;\n    sections?: KupInputPanelLayoutSection[];\n    sectionsType?: KupInputPanelLayoutSectionType;\n}\n\nexport enum KupInputPanelLayoutSectionType {\n    TAB = 'tab',\n}\n\nexport interface KupInputPanelLayoutSection {\n    id?: string;\n    title?: string;\n    icon?: string;\n    content?: KupInputPanelLayoutField[];\n    sections?: KupInputPanelLayoutSection[];\n    dim?: string;\n    horizontal?: boolean;\n    gridCols?: number;\n    gridRows?: number;\n    // Gap is in rem\n    gap?: number;\n    sectionsType?: KupInputPanelLayoutSectionType;\n    // absolute Attributes\n    absoluteColumn?: number;\n    absoluteWidth?: number;\n    absoluteRow?: number;\n    absoluteHeight?: number;\n}\n\nexport interface KupInputPanelLayoutField {\n    id: string;\n    // Span is referred to start\n    colSpan?: number;\n    colStart?: number;\n    colEnd?: number;\n    // Span is referred to start\n    rowSpan?: number;\n    rowStart?: number;\n    rowEnd?: number;\n    // absolute Attributes\n    absoluteColumn?: number;\n    absoluteRow?: number;\n    absoluteLength?: number;\n}\n\nexport type DataAdapterFn = (\n    options: GenericObject,\n    fieldLabel: string,\n    currentValue: string,\n    cell?: KupInputPanelCell,\n    id?: string\n) => Object;\n\nexport type InputPanelCells = {\n    cells: { cell: KupDataCell; column: KupDataColumn }[];\n    row?: KupInputPanelRow;\n};\n\nexport type InputPanelEvent = {\n    state: { cell: KupDataCell; column: KupDataColumn }[];\n    data: {\n        field: string;\n        value: number | string | object;\n    };\n};\n\nexport type InputPanelOptionsHandler = (\n    fun: string,\n    inputValue: string,\n    currentState: KupInputPanelData,\n    cellId: string\n) => Promise<GenericObject>;\n\nexport type InputPanelCheckValidObjCallback = (event: {\n    obj: KupObj;\n    currentState: KupInputPanelData;\n    fun?: string;\n}) => Promise<ValidCheckObjResponse>;\n\nexport interface ValidCheckObjResponse {\n    valid: boolean;\n}\n\nexport type InputPanelButtonClickHandler = (event: {\n    fun: string;\n    cellId: string;\n    currentState: KupInputPanelData;\n}) => void;\n\nexport type InputPanelCheckValidValueCallback = (\n    currentState: KupInputPanelSubmitValue,\n    cellId: string\n) => void;\n\nexport enum KupInputPanelProps {\n    customStyle = 'Custom style of the component.',\n    data = 'Actual data of the input panel.',\n    hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.',\n    submitCb = 'Sets the callback function on submit form',\n    optionsHandler = 'Sets the callback function to recieve options',\n}\n\nexport interface KupInputPanelEventHandlerDetails {\n    anchor: HTMLElement;\n    cell: KupDataCell;\n    column: KupDataColumn;\n    originalEvent: PointerEvent;\n}\n\nexport interface KupInputPanelClickEventPayload extends KupEventPayload {\n    details: KupInputPanelEventHandlerDetails;\n}\n"]}
+{"version":3,"file":"kup-input-panel-declarations.js","sourceRoot":"","sources":["../../../src/components/kup-input-panel/kup-input-panel-declarations.ts"],"names":[],"mappings":"AAkEA,MAAM,CAAN,IAAY,8BAEX;AAFD,WAAY,8BAA8B;IACtC,6CAAW,CAAA;AACf,CAAC,EAFW,8BAA8B,KAA9B,8BAA8B,QAEzC;AAuFD,MAAM,CAAN,IAAY,kBAOX;AAPD,WAAY,kBAAkB;IAC1B,oEAA8C,CAAA;IAC9C,8DAAwC,CAAA;IACxC,mHAA6F,CAAA;IAC7F,4EAAsD,CAAA;IACtD,sFAAgE,CAAA;IAChE,oIAA8G,CAAA;AAClH,CAAC,EAPW,kBAAkB,KAAlB,kBAAkB,QAO7B","sourcesContent":["import { GenericObject, KupEventPayload } from '../../components';\nimport {\n    KupDataCell,\n    KupDataColumn,\n    KupDataCommand,\n} from '../../managers/kup-data/kup-data-declarations';\nimport { KupObj } from '../../managers/kup-objects/kup-objects-declarations';\n\nexport interface KupInputPanelSubmit {\n    value: KupInputPanelSubmitValue;\n    cell?: string;\n}\nexport interface KupInputPanelSubmitValue {\n    after: KupInputPanelData;\n    before: KupInputPanelData;\n}\n\nexport interface KupInputPanelData {\n    columns?: KupDataColumn[];\n    rows?: KupInputPanelRow[];\n    actions?: KupInputPanelAction[];\n    setup?: {\n        commands?: Array<KupDataCommand>;\n    };\n}\n\nexport interface KupInputPanelAction {\n    type?: string;\n    fun?: string;\n}\n\nexport interface KupInputPanelColumn {\n    name: string;\n    title: string;\n    visible?: boolean;\n}\n\nexport interface KupInputPanelRow {\n    cells?: KupInputPanelRowCells;\n    layout?: KupInputPanelLayout;\n}\n\nexport interface KupInputPanelRowCells {\n    [key: string]: KupInputPanelCell;\n}\n\nexport interface KupInputPanelCell extends KupDataCell {\n    options?: GenericObject | GenericObject[];\n    editable?: boolean;\n    mandatory?: boolean;\n    inputSettings?: GenericObject;\n    fun?: string;\n}\n\nexport interface KupInputPanelCellOptions {\n    id: string;\n    label: string;\n}\n\nexport interface KupInputPanelLayout {\n    horizontal?: boolean;\n    absolute?: boolean;\n    sections?: KupInputPanelLayoutSection[];\n    sectionsType?: KupInputPanelLayoutSectionType;\n}\n\nexport enum KupInputPanelLayoutSectionType {\n    TAB = 'tab',\n}\n\nexport interface KupInputPanelLayoutSection {\n    id?: string;\n    title?: string;\n    icon?: string;\n    content?: KupInputPanelLayoutField[];\n    sections?: KupInputPanelLayoutSection[];\n    dim?: string;\n    horizontal?: boolean;\n    gridCols?: number;\n    gridRows?: number;\n    // Gap is in rem\n    gap?: number;\n    sectionsType?: KupInputPanelLayoutSectionType;\n    // absolute Attributes\n    absoluteColumn?: number;\n    absoluteWidth?: number;\n    absoluteRow?: number;\n    absoluteHeight?: number;\n}\n\nexport interface KupInputPanelLayoutField {\n    id: string;\n    // Span is referred to start\n    colSpan?: number;\n    colStart?: number;\n    colEnd?: number;\n    // Span is referred to start\n    rowSpan?: number;\n    rowStart?: number;\n    rowEnd?: number;\n    // absolute Attributes\n    absoluteColumn?: number;\n    absoluteRow?: number;\n    absoluteLength?: number;\n}\n\nexport type DataAdapterFn = (\n    options: GenericObject,\n    fieldLabel: string,\n    currentValue: string,\n    cell?: KupInputPanelCell,\n    id?: string\n) => Object;\n\nexport type InputPanelCells = {\n    cells: { cell: KupDataCell; column: KupDataColumn }[];\n    row?: KupInputPanelRow;\n};\n\nexport type InputPanelEvent = {\n    state: { cell: KupDataCell; column: KupDataColumn }[];\n    data: {\n        field: string;\n        value: number | string | object;\n    };\n};\n\nexport type InputPanelOptionsHandler = (\n    fun: string,\n    inputValue: string,\n    currentState: KupInputPanelData,\n    cellId: string\n) => Promise<GenericObject>;\n\nexport type InputPanelCheckValidObjCallback = (event: {\n    obj: KupObj;\n    currentState: KupInputPanelData;\n    fun?: string;\n}) => Promise<ValidCheckObjResponse>;\n\nexport interface ValidCheckObjResponse {\n    valid: boolean;\n}\n\nexport type InputPanelButtonClickHandler = (event: {\n    fun: string;\n    cellId: string;\n    currentState: KupInputPanelData;\n}) => void;\n\nexport type InputPanelCheckValidValueCallback = (\n    currentState: KupInputPanelSubmitValue,\n    cellId: string\n) => void;\n\nexport enum KupInputPanelProps {\n    customStyle = 'Custom style of the component.',\n    data = 'Actual data of the input panel.',\n    hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.',\n    submitCb = 'Sets the callback function on submit form',\n    optionsHandler = 'Sets the callback function to recieve options',\n    buttonPosition = 'Manage the position of the buttons related to the input panel content. It is an enumeration',\n}\n\nexport interface KupInputPanelEventHandlerDetails {\n    anchor: HTMLElement;\n    cell: KupDataCell;\n    column: KupDataColumn;\n    originalEvent: PointerEvent;\n}\n\nexport interface KupInputPanelClickEventPayload extends KupEventPayload {\n    details: KupInputPanelEventHandlerDetails;\n}\n"]}

package/dist/collection/components/kup-input-panel/kup-input-panel.css

@@ -156,6 +156,7 @@
   --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);
@@ -171,6 +172,16 @@
   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;
 }
@@ -189,6 +200,10 @@
 :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;
@@ -226,4 +241,8 @@
 }
 :host .input-panel--absolute .mdc-text-field {
   height: unset !important;
+}
+:host .input-panel-form--inline {
+  display: flex;
+  align-items: end;
 }

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

@@ -100,6 +100,7 @@ export class KupInputPanel {
         this.customStyle = '';
         this.data = null;
         this.hiddenSubmitButton = false;
+        this.buttonPosition = undefined;
         this.submitCb = null;
         this.optionsHandler = null;
         this.customButtonClickHandler = null;
@@ -195,7 +196,7 @@ export class KupInputPanel {
                 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: '0b29c3e2c24a83ef82f3d2c15a468e386a4b911a' }, h("style", { key: '11db937588ef8530336807aebe8d83046df0ba41' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'fbfd8854ee9e85f57676e46bd7abbb40f1aef21c', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: '50041632fc3d803f7b8701c1dca6dbae7a413796' }, h("style", { key: '7c1f478465b10c318d1bdba68f489e6907b87055' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '56c13788936dbd560b099432d204898b0e10264f', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -285,6 +286,26 @@ export class KupInputPanel {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "buttonPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'CENTER' | 'LEFT' | 'BOTTOM' | 'RIGHT' | 'TOP'",
+                    "resolved": "\"BOTTOM\" | \"CENTER\" | \"LEFT\" | \"RIGHT\" | \"TOP\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"BOTTOM\""
+                        }],
+                    "text": "Select the position of the buttons related to the input panel"
+                },
+                "attribute": "button-position",
+                "reflect": false
+            },
             "submitCb": {
                 "type": "unknown",
                 "mutable": false,
@@ -621,13 +642,22 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             rowContent = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderGridLayout).call(this, inputPanelCell, layout);
         }
     }
+    const inputPanelClass = {
+        'input-panel-form': true,
+        'input-panel-form--inline': this.buttonPosition == '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',
+    };
+    const commandsClass = {
+        'input-panel__commands': true,
+        [`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: { 'input-panel-form': true }, ref: (el) => (__classPrivateFieldSet(this, _KupInputPanel_formRef, el, "f")), onSubmit: (e) => {
+    return (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: {
@@ -637,7 +667,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             });
         }, onContextMenu: (e) => {
             e.preventDefault();
-        } }, h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: "input-panel__commands" }, 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: 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;
@@ -700,14 +730,15 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     const sectionRender = __classPrivateFieldGet(this, _KupInputPanel_sectionRenderMap, "f").get(layout.sectionsType);
     return sectionRender
         ? sectionRender(inputPanelCell, layout.sections)
-        : layout.sections.map((section) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderSection).call(this, inputPanelCell, section));
+        : 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 = {}) {
+}, _KupInputPanel_renderSection = function _KupInputPanel_renderSection(cells, section, customLabelRender = false, styleObj = {}, layout) {
     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,
     };
     styleObj.gap = +section.gap > 0 ? `${section.gap}rem` : '1rem';
     let content = [];