@sme.up/ketchup 11.0.0-SNAPSHOT-20241107091530 → 11.0.0-SNAPSHOT-20241107165833

package/dist/collection/managers/kup-dynamic-position/kup-dynamic-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"kup-dynamic-position.js","sourceRoot":"","sources":["../../../src/managers/kup-dynamic-position/kup-dynamic-position.ts"],"names":[],"mappings":"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","sourcesContent":["import type { KupDom } from '../kup-manager/kup-manager-declarations';\nimport {\n    kupDynamicPositionActiveClass,\n    KupDynamicPositionAnchor,\n    kupDynamicPositionAnchorAttribute,\n    kupDynamicPositionAttribute,\n    KupDynamicPositionElement,\n} from './kup-dynamic-position-declarations';\nimport { KupDynamicPositionPlacement } from './kup-dynamic-position-declarations';\n\nconst dom: KupDom = document.documentElement as KupDom;\n\n/**\n * This class is used to dynamically reposition HTML elements.\n * @module KupDynamicPosition\n */\nexport class KupDynamicPosition {\n    container: HTMLElement;\n    managedElements: Set<KupDynamicPositionElement>;\n    /**\n     * Initializes KupDynamicPosition.\n     */\n    constructor() {\n        this.container = document.createElement('div');\n        this.container.setAttribute('kup-dynamic-position', '');\n        document.body.appendChild(this.container);\n        this.managedElements = new Set();\n    }\n    /**\n     * Function used to check whether the anchor point is an HTMLElement or a set of coordinates.\n     * @param {KupDynamicPositionAnchor} anchor - Anchor point.\n     * @returns {anchor is HTMLElement} Returns true when the anchor point is an HTMLElement.\n     */\n    anchorIsHTMLElement(\n        anchor: KupDynamicPositionAnchor\n    ): anchor is HTMLElement {\n        return (anchor as HTMLElement).tagName !== undefined;\n    }\n    /**\n     * Watches the element eligible to dynamic positioning.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     * @param {KupDynamicPositionAnchor} anchorEl - \"el\" position will be anchored to this element or to these coordinates.\n     * @param {number} margin - \"el\" distance from its parent in pixels.\n     * @param {KupDynamicPositionPlacement} placement - \"el\" placement.\n     * @param {boolean} detach - When true, the function won't be recursive but it will be executed only once. \"el\" will be detached from its original parent and it will be appended to this.container.\n     */\n    register(\n        el: KupDynamicPositionElement,\n        anchorEl: KupDynamicPositionAnchor,\n        margin?: number,\n        placement?: KupDynamicPositionPlacement,\n        detach?: boolean\n    ): void {\n        if (this.isRegistered(el)) {\n            this.changeAnchor(el, anchorEl);\n            return;\n        }\n        el.setAttribute(kupDynamicPositionAttribute, '');\n        if (this.anchorIsHTMLElement(anchorEl)) {\n            anchorEl.setAttribute(kupDynamicPositionAnchorAttribute, '');\n        }\n        el.style.zIndex = `calc(var(--kup-navbar-zindex) + 10)`;\n        const originalPath: HTMLElement[] = [];\n        if (detach) {\n            let currentEl: unknown = el;\n            while (currentEl && currentEl !== document.body) {\n                currentEl = (currentEl as HTMLElement).parentNode\n                    ? (currentEl as HTMLElement).parentNode\n                    : (currentEl as ShadowRoot).host;\n                originalPath.push(currentEl as HTMLElement);\n            }\n            el.style.position = 'absolute';\n            this.container.appendChild(el);\n        } else {\n            el.style.position = 'fixed';\n        }\n        el.kupDynamicPosition = {\n            anchor: anchorEl,\n            detach: detach ? true : false,\n            originalPath: originalPath,\n            margin: margin ? margin : 0,\n            placement: placement ? placement : KupDynamicPositionPlacement.AUTO,\n            rAF: null,\n        };\n        const mutObserver: MutationObserver = new MutationObserver(function (\n            mutations\n        ) {\n            const target: Node = mutations[0].target;\n            if (\n                (target as HTMLElement).classList.contains(\n                    kupDynamicPositionActiveClass\n                )\n            ) {\n                requestAnimationFrame(function () {\n                    dom.ketchup.dynamicPosition.run(el);\n                });\n            }\n        });\n        mutObserver.observe(el, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n        this.managedElements.add(el);\n    }\n    /**\n     * Changes the anchor point of the given element.\n     * @param {KupDynamicPositionElement} elements - Dynamically positioned element previously registered.\n     * @param {KupDynamicPositionAnchor} anchorEl - New anchor point.\n     */\n    changeAnchor(\n        el: KupDynamicPositionElement,\n        anchorEl: KupDynamicPositionAnchor\n    ): void {\n        el.kupDynamicPosition.anchor = anchorEl;\n    }\n    /**\n     * Removes the element from dynamic position management.\n     * @param {KupDynamicPositionElement[]} elements - Elements to remove from the managed elements set.\n     */\n    unregister(elements: KupDynamicPositionElement[]): void {\n        if (this.managedElements) {\n            for (let index = 0; index < elements.length; index++) {\n                this.managedElements.delete(elements[index]);\n            }\n        }\n    }\n    /**\n     * Returns whether an element was previously registered or not.\n     * @param {KupDynamicPositionElement} el - Element to test.\n     * @returns {boolean} True if the element was registered.\n     */\n    isRegistered(el: KupDynamicPositionElement): boolean {\n        return !this.managedElements ? false : this.managedElements.has(el);\n    }\n    /**\n     * Starts the process of dynamically reposition the element (which must be firstly initialized through this.setup()).\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    start(el: KupDynamicPositionElement): void {\n        el.classList.add(kupDynamicPositionActiveClass);\n    }\n    /**\n     * Ends the process of dynamically reposition the element.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    stop(el: KupDynamicPositionElement): void {\n        el.classList.remove(kupDynamicPositionActiveClass);\n    }\n    /**\n     * This function calculates where to place the element in order to correctly display it attached to its anchor point.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    run(el: KupDynamicPositionElement): void {\n        if (!el.isConnected) {\n            dom.ketchup.dynamicPosition.managedElements.delete(el);\n            cancelAnimationFrame(el.kupDynamicPosition.rAF);\n            return;\n        }\n        if (!el.classList.contains(kupDynamicPositionActiveClass)) {\n            cancelAnimationFrame(el.kupDynamicPosition.rAF);\n            return;\n        }\n        // Reset placement\n        el.style.top = '';\n        el.style.right = '';\n        el.style.bottom = '';\n        el.style.left = '';\n        // Fixed position (usually from mouse events).\n        // When anchor doesn't have the tagName property, anchor is considered as a set of coordinates.\n        if (!this.anchorIsHTMLElement(el.kupDynamicPosition.anchor)) {\n            const x: number = el.kupDynamicPosition.anchor.x;\n            const y: number = el.kupDynamicPosition.anchor.y - 1;\n            if (\n                el.offsetWidth >\n                window.innerWidth - el.kupDynamicPosition.anchor.x\n            ) {\n                el.style.left = x - el.offsetWidth + 'px';\n            } else {\n                el.style.left = x + 'px';\n            }\n            if (\n                el.offsetHeight >\n                window.innerHeight - el.kupDynamicPosition.anchor.y\n            ) {\n                el.style.top = y - el.offsetHeight + 'px';\n            } else {\n                el.style.top = y + 'px';\n            }\n            return;\n        }\n        const detached: boolean = !!el.kupDynamicPosition.detach;\n        const offsetH: number = el.clientHeight;\n        const offsetW: number = el.clientWidth;\n        const rect: DOMRect = (\n            el.kupDynamicPosition.anchor as HTMLElement\n        ).getBoundingClientRect();\n        const top: number = detached ? window.pageYOffset + rect.top : rect.top,\n            left: number = detached\n                ? window.pageXOffset + rect.left\n                : rect.left,\n            bottom: number = detached\n                ? window.pageYOffset + rect.bottom\n                : rect.bottom,\n            right: number = detached\n                ? window.pageXOffset + rect.right\n                : rect.right;\n        // Vertical position\n        if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_RIGHT\n        ) {\n            el.style.bottom = `${\n                window.innerHeight - top + el.kupDynamicPosition.margin\n            }px`;\n        } else if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_RIGHT\n        ) {\n            el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`;\n        } else {\n            if (\n                offsetH < rect.top &&\n                window.innerHeight - rect.bottom < offsetH\n            ) {\n                el.style.bottom = `${\n                    window.innerHeight - top + el.kupDynamicPosition.margin\n                }px`;\n            } else {\n                el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`;\n            }\n        }\n        // Horizontal position\n        if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_LEFT\n        ) {\n            el.style.left = `${left}px`;\n        } else if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.RIGHT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_RIGHT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_RIGHT\n        ) {\n            let scrollbarWidth: number =\n                window.innerWidth - document.documentElement.offsetWidth;\n            if (scrollbarWidth > 30) {\n                scrollbarWidth = 0;\n            }\n            el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;\n        } else {\n            if (\n                offsetW < rect.right &&\n                window.innerWidth - rect.left < offsetW\n            ) {\n                let scrollbarWidth: number =\n                    window.innerWidth - document.documentElement.offsetWidth;\n                if (scrollbarWidth > 30) {\n                    scrollbarWidth = 0;\n                }\n                el.style.right = `${\n                    window.innerWidth - scrollbarWidth - right\n                }px`;\n            } else {\n                el.style.left = `${left}px`;\n            }\n        }\n        // Testing behavior: always anchored - 2024-09-25\n        el.kupDynamicPosition.rAF = requestAnimationFrame(function () {\n            dom.ketchup.dynamicPosition.run(el);\n        });\n    }\n}\n"]}
+{"version":3,"file":"kup-dynamic-position.js","sourceRoot":"","sources":["../../../src/managers/kup-dynamic-position/kup-dynamic-position.ts"],"names":[],"mappings":"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","sourcesContent":["import type { KupDom } from '../kup-manager/kup-manager-declarations';\nimport {\n    kupDynamicPositionActiveClass,\n    KupDynamicPositionAnchor,\n    kupDynamicPositionAnchorAttribute,\n    kupDynamicPositionAttribute,\n    KupDynamicPositionElement,\n} from './kup-dynamic-position-declarations';\nimport { KupDynamicPositionPlacement } from './kup-dynamic-position-declarations';\n\nconst dom: KupDom = document.documentElement as KupDom;\n\n/**\n * This class is used to dynamically reposition HTML elements.\n * @module KupDynamicPosition\n */\nexport class KupDynamicPosition {\n    container: HTMLElement;\n    managedElements: Set<KupDynamicPositionElement>;\n    /**\n     * Initializes KupDynamicPosition.\n     */\n    constructor() {\n        this.container = document.createElement('div');\n        this.container.setAttribute('kup-dynamic-position', '');\n        document.body.appendChild(this.container);\n        this.managedElements = new Set();\n    }\n    /**\n     * Function used to check whether the anchor point is an HTMLElement or a set of coordinates.\n     * @param {KupDynamicPositionAnchor} anchor - Anchor point.\n     * @returns {anchor is HTMLElement} Returns true when the anchor point is an HTMLElement.\n     */\n    anchorIsHTMLElement(\n        anchor: KupDynamicPositionAnchor\n    ): anchor is HTMLElement {\n        return (anchor as HTMLElement).tagName !== undefined;\n    }\n    /**\n     * Watches the element eligible to dynamic positioning.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     * @param {KupDynamicPositionAnchor} anchorEl - \"el\" position will be anchored to this element or to these coordinates.\n     * @param {number} margin - \"el\" distance from its parent in pixels.\n     * @param {KupDynamicPositionPlacement} placement - \"el\" placement.\n     * @param {boolean} detach - When true, the function won't be recursive but it will be executed only once. \"el\" will be detached from its original parent and it will be appended to this.container.\n     */\n    register(\n        el: KupDynamicPositionElement,\n        anchorEl: KupDynamicPositionAnchor,\n        margin?: number,\n        placement?: KupDynamicPositionPlacement,\n        detach?: boolean\n    ): void {\n        if (this.isRegistered(el)) {\n            this.changeAnchor(el, anchorEl);\n            return;\n        }\n        el.setAttribute(kupDynamicPositionAttribute, '');\n        if (this.anchorIsHTMLElement(anchorEl)) {\n            anchorEl.setAttribute(kupDynamicPositionAnchorAttribute, '');\n        }\n        el.style.zIndex = `calc(var(--kup-navbar-zindex) + 1000)`;\n        const originalPath: HTMLElement[] = [];\n        if (detach) {\n            let currentEl: unknown = el;\n            while (currentEl && currentEl !== document.body) {\n                currentEl = (currentEl as HTMLElement).parentNode\n                    ? (currentEl as HTMLElement).parentNode\n                    : (currentEl as ShadowRoot).host;\n                originalPath.push(currentEl as HTMLElement);\n            }\n            el.style.position = 'absolute';\n            this.container.appendChild(el);\n        } else {\n            el.style.position = 'fixed';\n        }\n        el.kupDynamicPosition = {\n            anchor: anchorEl,\n            detach: detach ? true : false,\n            originalPath: originalPath,\n            margin: margin ? margin : 0,\n            placement: placement ? placement : KupDynamicPositionPlacement.AUTO,\n            rAF: null,\n        };\n        const mutObserver: MutationObserver = new MutationObserver(function (\n            mutations\n        ) {\n            const target: Node = mutations[0].target;\n            if (\n                (target as HTMLElement).classList.contains(\n                    kupDynamicPositionActiveClass\n                )\n            ) {\n                requestAnimationFrame(function () {\n                    dom.ketchup.dynamicPosition.run(el);\n                });\n            }\n        });\n        mutObserver.observe(el, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n        this.managedElements.add(el);\n    }\n    /**\n     * Changes the anchor point of the given element.\n     * @param {KupDynamicPositionElement} elements - Dynamically positioned element previously registered.\n     * @param {KupDynamicPositionAnchor} anchorEl - New anchor point.\n     */\n    changeAnchor(\n        el: KupDynamicPositionElement,\n        anchorEl: KupDynamicPositionAnchor\n    ): void {\n        el.kupDynamicPosition.anchor = anchorEl;\n    }\n    /**\n     * Removes the element from dynamic position management.\n     * @param {KupDynamicPositionElement[]} elements - Elements to remove from the managed elements set.\n     */\n    unregister(elements: KupDynamicPositionElement[]): void {\n        if (this.managedElements) {\n            for (let index = 0; index < elements.length; index++) {\n                this.managedElements.delete(elements[index]);\n            }\n        }\n    }\n    /**\n     * Returns whether an element was previously registered or not.\n     * @param {KupDynamicPositionElement} el - Element to test.\n     * @returns {boolean} True if the element was registered.\n     */\n    isRegistered(el: KupDynamicPositionElement): boolean {\n        return !this.managedElements ? false : this.managedElements.has(el);\n    }\n    /**\n     * Starts the process of dynamically reposition the element (which must be firstly initialized through this.setup()).\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    start(el: KupDynamicPositionElement): void {\n        el.classList.add(kupDynamicPositionActiveClass);\n    }\n    /**\n     * Ends the process of dynamically reposition the element.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    stop(el: KupDynamicPositionElement): void {\n        el.classList.remove(kupDynamicPositionActiveClass);\n    }\n    /**\n     * This function calculates where to place the element in order to correctly display it attached to its anchor point.\n     * @param {KupDynamicPositionElement} el - Element to reposition.\n     */\n    run(el: KupDynamicPositionElement): void {\n        if (!el.isConnected) {\n            dom.ketchup.dynamicPosition.managedElements.delete(el);\n            cancelAnimationFrame(el.kupDynamicPosition.rAF);\n            return;\n        }\n        if (!el.classList.contains(kupDynamicPositionActiveClass)) {\n            cancelAnimationFrame(el.kupDynamicPosition.rAF);\n            return;\n        }\n        // Reset placement\n        el.style.top = '';\n        el.style.right = '';\n        el.style.bottom = '';\n        el.style.left = '';\n        // Fixed position (usually from mouse events).\n        // When anchor doesn't have the tagName property, anchor is considered as a set of coordinates.\n        if (!this.anchorIsHTMLElement(el.kupDynamicPosition.anchor)) {\n            const x: number = el.kupDynamicPosition.anchor.x;\n            const y: number = el.kupDynamicPosition.anchor.y - 1;\n            if (\n                el.offsetWidth >\n                window.innerWidth - el.kupDynamicPosition.anchor.x\n            ) {\n                el.style.left = x - el.offsetWidth + 'px';\n            } else {\n                el.style.left = x + 'px';\n            }\n            if (\n                el.offsetHeight >\n                window.innerHeight - el.kupDynamicPosition.anchor.y\n            ) {\n                el.style.top = y - el.offsetHeight + 'px';\n            } else {\n                el.style.top = y + 'px';\n            }\n            return;\n        }\n        const detached: boolean = !!el.kupDynamicPosition.detach;\n        const offsetH: number = el.clientHeight;\n        const offsetW: number = el.clientWidth;\n        const rect: DOMRect = (\n            el.kupDynamicPosition.anchor as HTMLElement\n        ).getBoundingClientRect();\n        const top: number = detached ? window.pageYOffset + rect.top : rect.top,\n            left: number = detached\n                ? window.pageXOffset + rect.left\n                : rect.left,\n            bottom: number = detached\n                ? window.pageYOffset + rect.bottom\n                : rect.bottom,\n            right: number = detached\n                ? window.pageXOffset + rect.right\n                : rect.right;\n        // Vertical position\n        if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_RIGHT\n        ) {\n            el.style.bottom = `${\n                window.innerHeight - top + el.kupDynamicPosition.margin\n            }px`;\n        } else if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_RIGHT\n        ) {\n            el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`;\n        } else {\n            if (\n                offsetH < rect.top &&\n                window.innerHeight - rect.bottom < offsetH\n            ) {\n                el.style.bottom = `${\n                    window.innerHeight - top + el.kupDynamicPosition.margin\n                }px`;\n            } else {\n                el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`;\n            }\n        }\n        // Horizontal position\n        if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_LEFT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_LEFT\n        ) {\n            el.style.left = `${left}px`;\n        } else if (\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.RIGHT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.BOTTOM_RIGHT ||\n            el.kupDynamicPosition.placement ===\n                KupDynamicPositionPlacement.TOP_RIGHT\n        ) {\n            let scrollbarWidth: number =\n                window.innerWidth - document.documentElement.offsetWidth;\n            if (scrollbarWidth > 30) {\n                scrollbarWidth = 0;\n            }\n            el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;\n        } else {\n            if (\n                offsetW < rect.right &&\n                window.innerWidth - rect.left < offsetW\n            ) {\n                let scrollbarWidth: number =\n                    window.innerWidth - document.documentElement.offsetWidth;\n                if (scrollbarWidth > 30) {\n                    scrollbarWidth = 0;\n                }\n                el.style.right = `${\n                    window.innerWidth - scrollbarWidth - right\n                }px`;\n            } else {\n                el.style.left = `${left}px`;\n            }\n        }\n        // Testing behavior: always anchored - 2024-09-25\n        el.kupDynamicPosition.rAF = requestAnimationFrame(function () {\n            dom.ketchup.dynamicPosition.run(el);\n        });\n    }\n}\n"]}

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

@@ -49,7 +49,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_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)}: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:2rem}: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}:host .input-panel__section .f-cell__content>*{width:100%}:host .input-panel__horizontal-section{display:inline-grid}: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{height:40ch;justify-content:flex-end}:host .input-panel--absolute .input-panel-label{justify-content:start}:host .input-panel--absolute .mdc-text-field{height:unset !important}";
+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_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)}: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:2rem}:host .input-panel__commands{display:flex;gap:2rem}: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}:host .input-panel__section .f-cell__content>*{width:100%}:host .input-panel__horizontal-section{display:inline-grid}: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{height:40ch;justify-content:flex-end}:host .input-panel--absolute .input-panel-label{justify-content:start}:host .input-panel--absolute .mdc-text-field{height:unset !important}";
 const KupInputPanelStyle0 = kupInputPanelCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -80,7 +80,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _KupInputPanel_eventBlurNames, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_keysShortcut, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_checkOnBlurProp, _KupInputPanel_checkOnBlurEvent, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _KupInputPanel_eventBlurNames, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_keysShortcut, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_checkOnBlurProp, _KupInputPanel_checkOnBlurEvent, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated;
 const dom = document.documentElement;
 const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel extends HTMLElement {
     constructor() {
@@ -147,6 +147,7 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
         this.checkValidObjCallback = null;
         this.checkValidValueCallback = null;
         this.inputPanelCells = [];
+        this.inputPanelCommands = [];
         this.tabSelected = null;
     }
     //#endregion
@@ -231,7 +232,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: '424cf4fea72c35eaf738e96a13da3186cbf86d66' }, h("style", { key: '1ad0a18733d45a7f28f5518d85623ea0530c1d16' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '834d8f4056a8b9f1f913b9f968db4256dca2ff70', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: 'f97b13e882a24cfeeecf5206309f4eda367f4038' }, h("style", { key: '4b50cb265db5f1f2127b6f40f648196aa694ac25' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '75ec785d4135bbce697e78c9221bac1c946e63b3', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -252,6 +253,7 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
         "checkValidObjCallback": [16],
         "checkValidValueCallback": [16],
         "inputPanelCells": [32],
+        "inputPanelCommands": [32],
         "tabSelected": [32],
         "getProps": [64],
         "refresh": [64],
@@ -307,7 +309,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
         'input-panel--absolute': layout === null || layout === void 0 ? void 0 : layout.absolute,
     };
     // We create a form for each row in data
-    return (h("form", { name: this.rootElement.id, onSubmit: (e) => {
+    return (h("form", { name: this.rootElement.id, id: this.rootElement.id, class: { 'input-panel-form': true }, onSubmit: (e) => {
             e.preventDefault();
             this.submitCb({
                 value: {
@@ -315,7 +317,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
                     after: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
                 },
             });
-        } }, h("div", { class: classObj, style: styleObj }, rowContent), !this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
+        } }, h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: "input-panel__commands" }, !this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null, this.inputPanelCommands)));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
     if (!cell) {
         return;
@@ -546,10 +548,20 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
     fieldCell.cell.data = Object.assign(Object.assign({}, fieldCell.cell.data), { customStyle: (fieldCell.cell.data.customStyle || '') +
             '.mdc-text-field {height: unset !important;}' });
     return (h("div", { style: styleObj }, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, fieldCell.cell, cells.row, fieldCell.column)));
+}, _KupInputPanel_mapCommands = function _KupInputPanel_mapCommands() {
+    this.inputPanelCommands = this.data.setup.commands
+        .map((commandObj) => Object.entries(commandObj === null || commandObj === void 0 ? void 0 : commandObj.cells).map(([id, cell]) => {
+        const buttonCell = Object.assign(Object.assign({}, cell), { data: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_BTNAdapter).call(this, null, null, cell.value, cell, id) });
+        return __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderButton).call(this, buttonCell, id);
+    }))
+        .flat();
 }, _KupInputPanel_mapCells = function _KupInputPanel_mapCells(data) {
-    var _a, _b;
-    const layout = (_a = data === null || data === void 0 ? void 0 : data.rows[0]) === null || _a === void 0 ? void 0 : _a.layout;
-    const inpuPanelCells = ((_b = data === null || data === void 0 ? void 0 : data.rows) === null || _b === void 0 ? void 0 : _b.length)
+    var _a, _b, _c, _d;
+    if ((_b = (_a = data.setup) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.length) {
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCommands).call(this);
+    }
+    const layout = (_c = data === null || data === void 0 ? void 0 : data.rows[0]) === null || _c === void 0 ? void 0 : _c.layout;
+    const inpuPanelCells = ((_d = data === null || data === void 0 ? void 0 : data.rows) === null || _d === void 0 ? void 0 : _d.length)
         ? data.rows.reduce((inpuPanelCells, row) => {
             const cells = data.columns
                 .filter((column) => column.visible)