@sme.up/ketchup 11.0.0-SNAPSHOT-20250205143327 → 11.0.0-SNAPSHOT-20250205160050

package/dist/cjs/kup-autocomplete_29.cjs.entry.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager$1 = require('./kup-manager-bf9935c7.js');
-const fTextField = require('./f-text-field-87c9a930.js');
+const kupManager$1 = require('./kup-manager-03d0fd95.js');
+const fTextField = require('./f-text-field-e2b84253.js');
 const fTextFieldMdc = require('./f-text-field-mdc-29aae9c9.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const fImage = require('./f-image-d22b012f.js');
 const fButton = require('./f-button-c3ae141e.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
-const fCell = require('./f-cell-1ebce571.js');
+const fCell = require('./f-cell-058178dc.js');
 const kupDates = require('./kup-dates-bc4cf9d0.js');
-const fChip = require('./f-chip-65b2bdfd.js');
+const fChip = require('./f-chip-a97b36ac.js');
 const component = require('./component-a6dd6c14.js');
 const fCheckbox = require('./f-checkbox-59fb7aa5.js');
-const kupDataTableHelper = require('./kup-data-table-helper-dc9310f6.js');
-const fPaginatorUtils = require('./f-paginator-utils-17dbcca2.js');
-require('./f-object-field-055e8cca.js');
+const kupDataTableHelper = require('./kup-data-table-helper-152abe38.js');
+const fPaginatorUtils = require('./f-paginator-utils-d7196260.js');
+require('./f-object-field-4887e74e.js');
 
 /**
  * Props of the kup-autocomplete component.
@@ -5895,9 +5895,12 @@ const KupCard = class {
         if (root) {
             const card = this.rootElement;
             const dragHandle = root.querySelector('#' + kupManager$1.KupCardIds.DRAG_HANDLE);
-            const unresizable = !!root.querySelector('.' + kupManager$1.KupCardCSSClasses.DIALOG_UNRESIZABLE);
+            const isResizable = !!!root.querySelector('.' + kupManager$1.KupCardCSSClasses.DIALOG_UNRESIZABLE);
             if (!this.kupManager.interact.isRegistered(card)) {
-                this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
+                this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, {
+                    isResizable: isResizable,
+                    isDraggable: true,
+                });
             }
         }
     }
@@ -13174,13 +13177,16 @@ var KupDialogProps;
     KupDialogProps["header"] = "Header options.";
     KupDialogProps["modal"] = "Set of options to display the dialog as a modal.";
     KupDialogProps["resizable"] = "Sets whether the dialog is resizable or not.";
+    KupDialogProps["anchor"] = "Sets anchor position (\"none\", \"left\", \"top\", \"right\", \"bottom\")";
+    KupDialogProps["minSizeY"] = "The min height of the dialog.";
+    KupDialogProps["minSizeX"] = "The min width of the dialog.";
     KupDialogProps["sizeX"] = "The width of the dialog, defaults to auto. Accepts any valid CSS format (px, %, vw, etc.).";
     KupDialogProps["sizeY"] = "The height of the dialog, defaults to auto. Accepts any valid CSS format (px, %, vh, etc.).";
     KupDialogProps["maxSizeY"] = "The max height of the dialog, defaults to 90dvh.";
     KupDialogProps["maxSizeX"] = "The max width of the dialog, defaults to 90dvw.";
 })(KupDialogProps || (KupDialogProps = {}));
 
-const kupDialogCss = ".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_dialogheader_text_color:var(\n    --kup-dialogheader-text-color,\n    var(--kup-text-secondary)\n  );--kup_dialog_background_color:var(\n    --kup-dialog-background-color,\n    var(--kup-layer-0)\n  );--kup_dialog_header_background_color:var(\n    --kup-dialog-header-background-color,\n    var(--kup-layer-1)\n  );--kup_dialog_header_height:var(\n    --kup-dialog-header-height,\n    var(--kup-space-09)\n  );--kup_dialog_content_max_height:var(--kup-dialog-content-max-height, 85dvh);box-sizing:border-box;display:block;height:var(--kup_dialog_height);left:var(--kup_dialog_left, -100%);min-height:var(--kup_dialog_height);min-width:var(--kup_dialog_width);max-width:var(--kup_dialog_max_width);max-height:var(--kup_dialog_max_height);position:absolute;top:var(--kup_dialog_top, -100%);transition:opacity 0.25s ease-in;width:var(--kup_dialog_width);-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px;-moz-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px;box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px}#kup-component{height:100%;width:100%}:host([fade-in]){opacity:0}:host([fade-in]) ::slotted{opacity:0}.header{color:var(--kup_dialogheader_text_color);display:flex;flex-direction:row;height:var(--kup_dialog_header_height);position:relative;width:100%;min-height:var(--kup-space-09);background-color:var(--kup_dialog_header_background_color)}.header__title{padding:var(--kup-space-05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.header__close.f-image{--kup-icon-color:var(--kup_dialogheader_text_color);cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:var(--kup-space-05)}.header__close.f-image:hover{opacity:0.5}.content{height:calc(100% - var(--kup_dialog_header_height) - var(--kup-space-05) * 2);padding:var(--kup-space-05);overflow:auto;user-select:text;background-color:var(--kup_dialog_background_color);max-height:var(--kup_dialog_content_max_height)}";
+const kupDialogCss = ".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_dialogheader_text_color:var(\n    --kup-dialogheader-text-color,\n    var(--kup-text-secondary)\n  );--kup_dialog_background_color:var(\n    --kup-dialog-background-color,\n    var(--kup-layer-0)\n  );--kup_dialog_header_background_color:var(\n    --kup-dialog-header-background-color,\n    var(--kup-layer-1)\n  );--kup_dialog_header_height:var(\n    --kup-dialog-header-height,\n    var(--kup-space-09)\n  );--kup_dialog_content_max_height:var(--kup-dialog-content-max-height, 85dvh);box-sizing:border-box;display:block;height:var(--kup_dialog_height);left:var(--kup_dialog_left, -100%);min-height:var(--kup_dialog_min_height);min-width:var(--kup_dialog_min_width);max-width:var(--kup_dialog_max_width);max-height:var(--kup_dialog_max_height);position:absolute;top:var(--kup_dialog_top, -100%);transition:opacity 0.25s ease-in;width:var(--kup_dialog_width);-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px;-moz-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px;box-shadow:rgba(0, 0, 0, 0.3) 0 1px 3px}#kup-component{height:100%;width:100%}:host([fade-in]){opacity:0}:host([fade-in]) ::slotted{opacity:0}:host([data-anchor=none]){inset:0}:host([data-anchor=left]){inset:0 auto 0 0;width:50%;height:100%}:host([data-anchor=top]){inset:0 0 auto 0;height:50%}:host([data-anchor=right]){inset:0 0 0 auto;width:50%}:host([data-anchor=bottom]){inset:auto 0 0 0;height:50%}.header{color:var(--kup_dialogheader_text_color);display:flex;flex-direction:row;height:var(--kup_dialog_header_height);position:relative;width:100%;min-height:var(--kup-space-09);background-color:var(--kup_dialog_header_background_color)}.header__title{padding:var(--kup-space-05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.header__close.f-image{--kup-icon-color:var(--kup_dialogheader_text_color);cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:var(--kup-space-05)}.header__close.f-image:hover{opacity:0.5}.content{height:calc(100% - var(--kup_dialog_header_height) - var(--kup-space-05) * 2);padding:var(--kup-space-05);overflow:auto;user-select:text;background-color:var(--kup_dialog_background_color);max-height:var(--kup_dialog_content_max_height)}";
 const KupDialogStyle0 = kupDialogCss;
 
 var __classPrivateFieldGet$6 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -13199,7 +13205,7 @@ var __classPrivateFieldSet$2 = (undefined && undefined.__classPrivateFieldSet) |
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupDialog_instances, _KupDialog_header, _KupDialog_kupManager, _KupDialog_recalcSafeguard, _KupDialog_disconnectedCallback;
+var _KupDialog_instances, _KupDialog_header, _KupDialog_kupManager, _KupDialog_recalcSafeguard, _KupDialog_disconnectedCallback, _KupDialog_getMinMaxDimensions, _KupDialog_onResize, _KupDialog_dialogify, _KupDialog_undialogify, _KupDialog_getEdgeOptions, _KupDialog_getStyles;
 const KupDialog = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -13217,6 +13223,9 @@ const KupDialog = class {
         this.header = { icons: { close: true } };
         this.modal = { closeOnBackdropClick: true };
         this.resizable = true;
+        this.anchor = 'none';
+        this.minSizeX = '20dvw';
+        this.minSizeY = '20dvh';
         this.sizeX = 'auto';
         this.sizeY = 'auto';
         this.maxSizeX = '90dvw';
@@ -13295,8 +13304,8 @@ const KupDialog = class {
     }
     componentDidLoad() {
         var _a;
-        __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").interact.dialogify(this.rootElement, __classPrivateFieldGet$6(this, _KupDialog_header, "f") ? __classPrivateFieldGet$6(this, _KupDialog_header, "f") : null, !this.resizable);
-        if ((_a = this.autoCenter) === null || _a === void 0 ? void 0 : _a.onReady) {
+        __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_dialogify).call(this);
+        if (((_a = this.autoCenter) === null || _a === void 0 ? void 0 : _a.onReady) && this.anchor == 'none') {
             this.recalcPosition();
         }
         else {
@@ -13315,6 +13324,12 @@ const KupDialog = class {
         });
         __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").debug.logLoad(this, true);
     }
+    componentDidUpdate() {
+        // unregister dialog
+        __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_undialogify).call(this);
+        // register it again
+        __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_dialogify).call(this);
+    }
     componentWillRender() {
         __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").debug.logRender(this, false);
     }
@@ -13322,18 +13337,13 @@ const KupDialog = class {
         __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        var _a;
-        const style = {
-            '--kup_dialog_height': this.sizeY ? this.sizeY : 'auto',
-            '--kup_dialog_width': this.sizeX ? this.sizeX : 'auto',
-            '--kup_dialog_max_width': this.maxSizeX ? this.maxSizeX : '90dvw',
-            '--kup_dialog_max_height': this.maxSizeY ? this.maxSizeY : '90dvh',
-        };
+        var _a, _b;
+        let style = __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_getStyles).call(this);
         const headerSlot = this.rootElement.querySelector('[slot="header"]');
         if (headerSlot) {
             __classPrivateFieldSet$2(this, _KupDialog_header, headerSlot, "f");
         }
-        return (index.h(index.Host, { key: '85b3008a0040995bdac981d0482852f53f696989', "fade-in": true, style: style }, index.h("style", { key: 'fe88280e675258f5604ee2abb4b944a4f8f11f17' }, __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: '872122d576446bb73d501de1a5248c650c1c9268', id: GenericVariables.componentWrapperId }, this.header ? (index.h("div", { class: "header", ref: (el) => (__classPrivateFieldSet$2(this, _KupDialog_header, el, "f")) }, this.header.title ? (index.h("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (index.h(fImage.FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : headerSlot ? (index.h("slot", { name: "header" })) : null, index.h("div", { key: 'c367d4b6a2308ef03b6fb0440a27c77a396f6cb7', class: "content" }, index.h("slot", { key: '619582bc343d3cd073289a8261844d1fc5bd9fc4', name: "content" })))));
+        return (index.h(index.Host, { key: '6b77e120901ad4af2375f3f39aa278645820735e', "fade-in": true, style: style, "data-anchor": ((_a = this.anchor) === null || _a === void 0 ? void 0 : _a.toString()) || 'none' }, index.h("style", { key: 'd8c4a1d878c71cf48259c2a749a18863b04bee2f' }, __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: 'ee15ebb743fe59fc3e4a926eac8e21953b223d29', id: GenericVariables.componentWrapperId }, this.header ? (index.h("div", { class: "header", ref: (el) => (__classPrivateFieldSet$2(this, _KupDialog_header, el, "f")) }, this.header.title ? (index.h("div", { class: "header__title" }, this.header.title)) : null, ((_b = this.header.icons) === null || _b === void 0 ? void 0 : _b.close) ? (index.h(fImage.FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : headerSlot ? (index.h("slot", { name: "header" })) : null, index.h("div", { key: '57fca041982e0a1f47479ce0ccc1369917b0c984', class: "content" }, index.h("slot", { key: 'a0397c07bb34449de093d0290ef4f981d5c70109', name: "content" })))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_disconnectedCallback).call(this);
@@ -13345,6 +13355,97 @@ _KupDialog_header = new WeakMap(), _KupDialog_kupManager = new WeakMap(), _KupDi
         __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").interact.hideModalBackdrop();
     }
     __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").theme.unregister(this);
+}, _KupDialog_getMinMaxDimensions = function _KupDialog_getMinMaxDimensions(element) {
+    const minWidth = getComputedStyle(element).minWidth.replace('px', '');
+    const minHeight = getComputedStyle(element).minHeight.replace('px', '');
+    const maxWidth = getComputedStyle(element).maxWidth.replace('px', '');
+    const maxHeight = getComputedStyle(element).maxHeight.replace('px', '');
+    return {
+        min: {
+            width: parseFloat(minWidth),
+            height: parseFloat(minHeight),
+        },
+        max: {
+            width: parseFloat(maxWidth),
+            height: parseFloat(maxHeight),
+        },
+    };
+}, _KupDialog_onResize = function _KupDialog_onResize(e) {
+    let { width, height } = e.rect;
+    const target = e.target;
+    const dim = __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_getMinMaxDimensions).call(this, this.rootElement);
+    const isDetatched = this.anchor == 'none';
+    const isHorizontalShiftAllowed = width >= dim.min.width - 1 &&
+        width <= dim.max.width + 1 &&
+        isDetatched;
+    const isVerticalShiftAllowed = height >= dim.min.height - 1 &&
+        height <= dim.max.height + 1 &&
+        isDetatched;
+    if (e.edges.left && isHorizontalShiftAllowed) {
+        target.style.left = `${parseFloat(target.style.left || '0') + e.deltaRect.left}px`;
+    }
+    if (e.edges.top && isVerticalShiftAllowed) {
+        target.style.top = `${parseFloat(target.style.top || '0') + e.deltaRect.top}px`;
+    }
+    if (e.edges.right && isHorizontalShiftAllowed) {
+        target.style.right = `${parseFloat(target.style.right || '0') - e.deltaRect.right}px`;
+    }
+    if (e.edges.bottom && isVerticalShiftAllowed) {
+        target.style.bottom = `${parseFloat(target.style.bottom || '0') - e.deltaRect.bottom}px`;
+    }
+}, _KupDialog_dialogify = function _KupDialog_dialogify() {
+    const isDetatched = this.anchor == 'none';
+    __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").interact.dialogify(this.rootElement, __classPrivateFieldGet$6(this, _KupDialog_header, "f") ? __classPrivateFieldGet$6(this, _KupDialog_header, "f") : null, {
+        isResizable: this.resizable || !isDetatched,
+        isDraggable: isDetatched,
+        onResize: __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_onResize).bind(this),
+        resizeConstraints: __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_getMinMaxDimensions).call(this, this.rootElement),
+        edges: __classPrivateFieldGet$6(this, _KupDialog_instances, "m", _KupDialog_getEdgeOptions).call(this),
+    });
+}, _KupDialog_undialogify = function _KupDialog_undialogify() {
+    __classPrivateFieldGet$6(this, _KupDialog_kupManager, "f").interact.undialogify(this.rootElement);
+}, _KupDialog_getEdgeOptions = function _KupDialog_getEdgeOptions() {
+    switch (this.anchor) {
+        case 'none':
+            return { left: true, top: true, right: true, bottom: true };
+        case 'left':
+            return { left: false, top: false, right: true, bottom: false };
+        case 'top':
+            return { left: false, top: false, right: false, bottom: true };
+        case 'right':
+            return { left: true, top: false, right: false, bottom: false };
+        case 'bottom':
+            return { left: false, top: true, right: false, bottom: false };
+    }
+}, _KupDialog_getStyles = function _KupDialog_getStyles() {
+    const minHeight = '--kup_dialog_min_height';
+    const minWidth = '--kup_dialog_min_width';
+    const height = '--kup_dialog_height';
+    const width = '--kup_dialog_width';
+    const maxHeight = '--kup_dialog_max_height';
+    const maxWidth = '--kup_dialog_max_width';
+    const styles = {};
+    if (this.anchor == 'none') {
+        styles[minHeight] = this.minSizeY ? this.minSizeY : '20dvh';
+        styles[minWidth] = this.minSizeX ? this.minSizeX : '20dvw';
+        styles[height] = this.sizeY ? this.sizeY : 'auto';
+        styles[width] = this.sizeX ? this.sizeX : 'auto';
+        styles[maxHeight] = this.maxSizeY ? this.maxSizeY : '90dvh';
+        styles[maxWidth] = this.maxSizeX ? this.maxSizeX : '90dvw';
+    }
+    if (this.anchor == 'left' || this.anchor == 'right') {
+        styles[minHeight] = '100dvh';
+        styles[minWidth] = this.minSizeX ? this.minSizeX : '20dvw';
+        styles[maxHeight] = this.maxSizeY ? this.maxSizeY : '100dvh';
+        styles[maxWidth] = this.maxSizeX ? this.maxSizeX : '80dvw';
+    }
+    if (this.anchor == 'top' || this.anchor == 'bottom') {
+        styles[minHeight] = this.minSizeY ? this.minSizeY : '20dvh';
+        styles[minWidth] = '100dvw';
+        styles[maxHeight] = this.maxSizeY ? this.maxSizeY : '80dvh';
+        styles[maxWidth] = this.maxSizeX ? this.maxSizeX : '100dvw';
+    }
+    return styles;
 };
 KupDialog.style = KupDialogStyle0;
 

package/dist/cjs/kup-box.cjs.entry.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
-const kupDataTableHelper = require('./kup-data-table-helper-dc9310f6.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
+const kupDataTableHelper = require('./kup-data-table-helper-152abe38.js');
 const fImage = require('./f-image-d22b012f.js');
-const fChip = require('./f-chip-65b2bdfd.js');
+const fChip = require('./f-chip-a97b36ac.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-const fCell = require('./f-cell-1ebce571.js');
-const fPaginatorUtils = require('./f-paginator-utils-17dbcca2.js');
+const fCell = require('./f-cell-058178dc.js');
+const fPaginatorUtils = require('./f-paginator-utils-d7196260.js');
 const fTextFieldMdc = require('./f-text-field-mdc-29aae9c9.js');
 require('./kup-dates-bc4cf9d0.js');
 require('./f-button-c3ae141e.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-checkbox-59fb7aa5.js');
-require('./f-object-field-055e8cca.js');
-require('./f-text-field-87c9a930.js');
+require('./f-object-field-4887e74e.js');
+require('./f-text-field-e2b84253.js');
 require('./component-a6dd6c14.js');
 
 /**

package/dist/cjs/kup-calendar.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$4 = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const fButton = require('./f-button-c3ae141e.js');
-const fChip = require('./f-chip-65b2bdfd.js');
+const fChip = require('./f-chip-a97b36ac.js');
 const kupDates = require('./kup-dates-bc4cf9d0.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-image-d22b012f.js');

package/dist/cjs/kup-card-list.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-cell.cjs.entry.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const fButton = require('./f-button-c3ae141e.js');
-const fCell = require('./f-cell-1ebce571.js');
+const fCell = require('./f-cell-058178dc.js');
 require('./kup-dates-bc4cf9d0.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-image-d22b012f.js');
 require('./f-checkbox-59fb7aa5.js');
-require('./f-chip-65b2bdfd.js');
-require('./f-object-field-055e8cca.js');
-require('./f-text-field-87c9a930.js');
+require('./f-chip-a97b36ac.js');
+require('./f-object-field-4887e74e.js');
+require('./f-text-field-e2b84253.js');
 
 const kupCellCss = ".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{display:block;height:fit-content;width:100%}#kup-component{height:fit-content;width:100%}";
 const KupCellStyle0 = kupCellCss;

package/dist/cjs/kup-dashboard.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e8aa3c73.js');
 const fButton = require('./f-button-c3ae141e.js');
 const fCheckbox = require('./f-checkbox-59fb7aa5.js');
-const fTextField = require('./f-text-field-87c9a930.js');
+const fTextField = require('./f-text-field-e2b84253.js');
 const fTextFieldMdc = require('./f-text-field-mdc-29aae9c9.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-image-d22b012f.js');

package/dist/cjs/{kup-data-table-helper-dc9310f6.js → kup-data-table-helper-152abe38.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const kupDates = require('./kup-dates-bc4cf9d0.js');
 
 /**

package/dist/cjs/kup-drawer.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-echart.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-editor.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const kupDates = require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-family-tree.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-e8aa3c73.js');
 const fButton = require('./f-button-c3ae141e.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
 const fImage = require('./f-image-d22b012f.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-grid.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-htm.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-iframe.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 require('./kup-dates-bc4cf9d0.js');
 
 /**

package/dist/cjs/kup-image-list.cjs.entry.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const fImage = require('./f-image-d22b012f.js');
 const fButton = require('./f-button-c3ae141e.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
-const fCell = require('./f-cell-1ebce571.js');
+const fCell = require('./f-cell-058178dc.js');
 const component = require('./component-a6dd6c14.js');
 require('./kup-dates-bc4cf9d0.js');
 require('./f-checkbox-59fb7aa5.js');
-require('./f-chip-65b2bdfd.js');
-require('./f-object-field-055e8cca.js');
-require('./f-text-field-87c9a930.js');
+require('./f-chip-a97b36ac.js');
+require('./f-object-field-4887e74e.js');
+require('./f-text-field-e2b84253.js');
 
 /**
  * Props of the kup-image-list component.

package/dist/cjs/kup-input-panel.cjs.entry.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
 const fButton = require('./f-button-c3ae141e.js');
-const fCell = require('./f-cell-1ebce571.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const fCell = require('./f-cell-058178dc.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const fTextFieldMdc = require('./f-text-field-mdc-29aae9c9.js');
 const fTypography = require('./f-typography-271f5037.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-image-d22b012f.js');
 require('./f-checkbox-59fb7aa5.js');
-require('./f-chip-65b2bdfd.js');
-require('./f-object-field-055e8cca.js');
-require('./f-text-field-87c9a930.js');
+require('./f-chip-a97b36ac.js');
+require('./f-object-field-4887e74e.js');
+require('./f-text-field-e2b84253.js');
 require('./kup-dates-bc4cf9d0.js');
 require('./component-a6dd6c14.js');
 

package/dist/cjs/kup-lazy.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-magic-box.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
 const fImage = require('./f-image-d22b012f.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');

package/dist/cjs/{kup-manager-bf9935c7.js → kup-manager-03d0fd95.js}

@@ -1732,10 +1732,11 @@ class KupInteract {
      * This method gives the element dialog-like features, by activating moving on drag and, optionally, the resize.
      * @param {HTMLElement} el - Dialog element.
      * @param {HTMLElement} handleEl - Element that must be dragged in order to trigger movement. When not provided, dragging anywhere on "el" will move it.
-     * @param {boolean} unresizable - When true, the dialog can't be resized.
+     * @param {KupDialogifyOptions} options - Sets the options for dialogify.
      * @param {RectResolvable<[number, number, Interaction<keyof ActionMap>]>} restrictContainer - When present, it will set the constraint of "el": it can't be moved outside this container.
      */
-    dialogify(el, handleEl, unresizable, restrictContainer) {
+    dialogify(el, handleEl, options, restrictContainer) {
+        var _a;
         el.setAttribute(kupDialogAttribute, '');
         el.style.zIndex = (this.zIndex++).toString();
         const callbacks = {
@@ -1744,34 +1745,54 @@ class KupInteract {
                 el.style.zIndex = (dom$g.ketchup.interact.zIndex++).toString();
             },
         };
-        this.draggable(el, {
-            allowFrom: handleEl ? handleEl : null,
-            modifiers: [
-                interact.modifiers.restrictRect({
-                    restriction: restrictContainer
-                        ? restrictContainer
-                        : dom$g.ketchup.interact.restrictContainer,
-                    endOnly: true,
-                }),
-            ],
-        }, null, exports.KupDragEffect.MOVE, callbacks);
-        if (!unresizable) {
+        if (options === null || options === void 0 ? void 0 : options.isDraggable) {
+            this.draggable(el, {
+                allowFrom: handleEl ? handleEl : null,
+                modifiers: [
+                    interact.modifiers.restrictRect({
+                        restriction: restrictContainer
+                            ? restrictContainer
+                            : dom$g.ketchup.interact.restrictContainer,
+                        endOnly: true,
+                    }),
+                ],
+            }, null, exports.KupDragEffect.MOVE, callbacks);
+        }
+        if (options === null || options === void 0 ? void 0 : options.isResizable) {
             el.classList.add(kupDialogResizableClass);
             this.resizable(el, {
-                edges: {
-                    left: true,
-                    right: true,
-                    bottom: true,
-                    top: false,
-                },
+                edges: options.edges,
                 modifiers: [
-                    interact.modifiers.restrictSize({
+                    interact.modifiers.restrictSize((_a = options === null || options === void 0 ? void 0 : options.resizeConstraints) !== null && _a !== void 0 ? _a : {
                         min: { width: 100, height: 100 },
                     }),
                 ],
-            }, null, true, true);
+            }, {
+                move(e) {
+                    if (options.onResize) {
+                        options.onResize(e);
+                    }
+                },
+            }, (options === null || options === void 0 ? void 0 : options.onResize) ? false : true, true);
         }
     }
+    /**
+     * Undialogify element
+     */
+    undialogify(el) {
+        // unregister dialog
+        this.unregister([el]);
+        // reset Interact.js properties to prevent switch to a wrong position when changing anchor
+        el.style.removeProperty('left');
+        el.style.removeProperty('top');
+        el.style.removeProperty('right');
+        el.style.removeProperty('bottom');
+        el.style.removeProperty('width');
+        el.style.removeProperty('height');
+        el.style.removeProperty('transform');
+        el.removeAttribute('data-x');
+        el.removeAttribute('data-y');
+    }
     /**
      * Hides the modal's backdrop.
      */

package/dist/cjs/kup-nav-bar.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-bc4cf9d0.js');
 

package/dist/cjs/kup-numeric-picker.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-const fTextField = require('./f-text-field-87c9a930.js');
+const fTextField = require('./f-text-field-e2b84253.js');
 const fTextFieldMdc = require('./f-text-field-mdc-29aae9c9.js');
 require('./kup-dates-bc4cf9d0.js');
 require('./f-image-d22b012f.js');

package/dist/cjs/kup-object-field.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const fObjectField = require('./f-object-field-055e8cca.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const fObjectField = require('./f-object-field-4887e74e.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./f-button-c3ae141e.js');
 require('./f-button-declarations-76ef9f87.js');
 require('./f-image-d22b012f.js');
-require('./f-text-field-87c9a930.js');
+require('./f-text-field-e2b84253.js');
 require('./kup-dates-bc4cf9d0.js');
 
 /**

package/dist/cjs/kup-pdf.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-bf9935c7.js');
+const kupManager = require('./kup-manager-03d0fd95.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const kupDates = require('./kup-dates-bc4cf9d0.js');