@sme.up/ketchup 7.1.1 → 7.2.0

package/dist/collection/collection-manifest.json

@@ -22,6 +22,7 @@
     "./components/kup-dash-list/kup-dash-list.js",
     "./components/kup-dashboard/kup-dashboard.js",
     "./components/kup-date-picker/kup-date-picker.js",
+    "./components/kup-dialog/kup-dialog.js",
     "./components/kup-drawer/kup-drawer.js",
     "./components/kup-echart/kup-echart.js",
     "./components/kup-family-tree/kup-family-tree.js",
@@ -50,8 +51,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "3.0.1",
+    "typescriptVersion": "4.9.5"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/kup-autocomplete/kup-autocomplete.js

@@ -74,6 +74,7 @@ export class KupAutocomplete {
         id: this.rootElement.id,
         value: this.value,
         inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+        node: ret.node,
       });
     }
   }
@@ -95,7 +96,7 @@ export class KupAutocomplete {
   }
   onKupInput() {
     __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
+    const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
     __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
     if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
       this.kupInput.emit({
@@ -103,6 +104,7 @@ export class KupAutocomplete {
         id: this.rootElement.id,
         value: this.value,
         inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+        node: ret.node,
       });
     }
   }
@@ -134,6 +136,7 @@ export class KupAutocomplete {
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+      node: e.detail.selected,
     });
   }
   /*-------------------------------------------------*/

package/dist/collection/components/kup-card/dialog/kup-card-dialog.js

@@ -116,6 +116,18 @@ export function create6(component) {
     : [];
   return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), h("div", { class: "section-1" }, datatableArray.length > 0 ? (h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0]))) : (h("kup-spinner", { active: true, dimensions: "7px", layout: 14 })))));
 }
+/**
+ * 7th dialog card layout, a raw slot.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create7(component) {
+  //Dialog title
+  const textArray = component.data && component.data['text'] ? component.data['text'] : [];
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), slots.length > 0 ? compList(slots, 'slot') : null));
+}
 /**
  * Invoked by 4th layout to switch to the previous record of the original data table.
  * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).

package/dist/collection/components/kup-card/kup-card.css

@@ -2851,16 +2851,6 @@
   width: var(--kup_card_width);
 }
 
-:host([show-modal]) #kup-component {
-  position: fixed;
-  z-index: var(--kup-card-zindex);
-  height: var(--kup_card_height);
-  width: var(--kup_card_width);
-  top: var(--kup_card_top);
-  left: var(--kup_card_left);
-  display: var(--kup_card_display, none);
-}
-
 :host([is-menu]) {
   display: none;
   animation: fade-in 0.25s ease-out;
@@ -2876,18 +2866,6 @@
   width: 100%;
 }
 
-.backdrop {
-  background: var(--kup_card_backdrop);
-  display: none;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: calc(var(--kup-card-zindex) - 1);
-  display: block;
-}
-
 .mdc-ripple-surface {
   cursor: pointer;
   flex-direction: column;

package/dist/collection/components/kup-card/kup-card.js

@@ -45,7 +45,6 @@ export class KupCard {
     this.layoutFamily = KupCardFamily.STANDARD;
     this.layoutNumber = 1;
     this.menuVisible = false;
-    this.showModal = false;
     this.sizeX = '100%';
     this.sizeY = '100%';
   }
@@ -414,13 +413,6 @@ export class KupCard {
       }, 0);
     }
     this.kupManager.debug.logRender(this, true);
-    if (this.showModal) {
-      this.rootElement.style.setProperty('--kup_card_left', window.innerWidth / 2 - this.rootElement.clientWidth / 2 + 'px');
-      this.rootElement.style.setProperty('--kup_card_top', window.innerHeight / 2 -
-        this.rootElement.clientHeight / 2 +
-        'px');
-      this.rootElement.style.setProperty('--kup_card_display', 'block');
-    }
   }
   render() {
     if (!this.data && this.rootElement.children.length < 1) {
@@ -430,17 +422,7 @@ export class KupCard {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    const backdropComp = this.showModal ? (h("div", { class: "backdrop", onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, onPointerDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, onTouchStart: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      } })) : null;
-    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), backdropComp, h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
+    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -599,27 +581,6 @@ export class KupCard {
         "reflect": true,
         "defaultValue": "false"
       },
-      "showModal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Sets the card as modal window"
-        },
-        "attribute": "show-modal",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "sizeX": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/kup-chip/kup-chip-declarations.js

@@ -6,5 +6,7 @@ export var KupChipProps;
 (function (KupChipProps) {
   KupChipProps["customStyle"] = "Custom style of the component.";
   KupChipProps["data"] = "List of elements.";
+  KupChipProps["displayId"] = "When enabled, the chip's text will display both the id and the value.";
+  KupChipProps["enableInput"] = "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).";
   KupChipProps["type"] = "The type of chip. Available types: input, filter, choice or empty for default.";
 })(KupChipProps || (KupChipProps = {}));

package/dist/collection/components/kup-chip/kup-chip.js

@@ -1,3 +1,11 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _KupChip_instances, _KupChip_changeHandler, _KupChip_stringifiedValues;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FChip } from '../../f-components/f-chip/f-chip';
@@ -8,6 +16,7 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChip {
   constructor() {
+    _KupChip_instances.add(this);
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -17,6 +26,8 @@ export class KupChip {
     this.kupManager = kupManagerInstance();
     this.customStyle = '';
     this.data = [];
+    this.displayId = false;
+    this.enableInput = false;
     this.type = FChipType.STANDARD;
   }
   onKupBlur(chip) {
@@ -55,6 +66,11 @@ export class KupChip {
       id: this.rootElement.id,
       chip: this.kupManager.data.node.remove(this.data, chip),
     });
+    this.kupChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+    });
     this.refresh();
   }
   /*-------------------------------------------------*/
@@ -130,11 +146,13 @@ export class KupChip {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
+    var _a;
     const props = {
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
       data: this.data,
+      displayId: this.displayId,
       info: this.rootElement.classList.contains('kup-info')
         ? true
         : false,
@@ -167,10 +185,13 @@ export class KupChip {
       props.onFocus.push((chip) => this.onKupFocus(chip));
       props.onIconClick.push((chip) => this.onKupIconClick(chip));
     }
-    if (!this.data || this.data.length === 0) {
-      return;
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FChip, Object.assign({}, props)))));
+    return (h(Host, { "onKup-autocomplete-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      }, "onKup-combobox-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      }, "onKup-textfield-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      } }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { name: "field" }))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -237,6 +258,48 @@ export class KupChip {
         },
         "defaultValue": "[]"
       },
+      "displayId": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When enabled, the chip's text will display both the id and the value."
+        },
+        "attribute": "display-id",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field)."
+        },
+        "attribute": "enable-input",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -286,6 +349,26 @@ export class KupChip {
             }
           }
         }
+      }, {
+        "method": "kupChange",
+        "name": "kup-chip-change",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the chip dataset changes."
+        },
+        "complexType": {
+          "original": "KupChipChangeEventPayload",
+          "resolved": "KupChipChangeEventPayload",
+          "references": {
+            "KupChipChangeEventPayload": {
+              "location": "import",
+              "path": "./kup-chip-declarations"
+            }
+          }
+        }
       }, {
         "method": "kupClick",
         "name": "kup-chip-click",
@@ -437,3 +520,38 @@ export class KupChip {
       }];
   }
 }
+_KupChip_instances = new WeakSet(), _KupChip_changeHandler =
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  async function _KupChip_changeHandler(e) {
+    var _a, _b;
+    e.stopPropagation();
+    const value = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value;
+    const listNode = e.detail.node;
+    if (value) {
+      const node = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find((node) => node.id === value);
+      if (!node) {
+        this.data = [
+          ...this.data,
+          {
+            id: listNode ? listNode.id : value,
+            value: listNode ? listNode.value : value,
+          },
+        ];
+        const slot = this.rootElement.querySelector('[slot=field]');
+        await slot.setValue('');
+        await slot.refresh();
+        await slot.setFocus();
+        this.kupChange.emit({
+          comp: this,
+          id: this.rootElement.id,
+          stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+        });
+      }
+    }
+  }, _KupChip_stringifiedValues = function _KupChip_stringifiedValues() {
+  let stringifiedValues = '';
+  this.data.forEach((node) => (stringifiedValues += node.id + ';'));
+  return stringifiedValues;
+};

package/dist/collection/components/kup-combobox/kup-combobox.js

@@ -61,12 +61,13 @@ export class KupCombobox {
     });
   }
   onKupChange(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+    let ret = __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
+      node: ret.node,
     });
   }
   onKupClick() {
@@ -94,13 +95,14 @@ export class KupCombobox {
     });
   }
   onKupInput() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    let ret = __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
     __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
+      node: ret.node,
     });
   }
   onKupIconClick() {

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _KupDataTable_instances, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_confirmDeleteCard, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_insertCount, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchToTotalsMatrix, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_setDynPosElements, _KupDataTable_getEventPath, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_clickHandler, _KupDataTable_contextMenuHandler, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onDefaultRowActionClick, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_renderActions, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderGridPanel;
+var _KupDataTable_instances, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_insertCount, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchToTotalsMatrix, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_setDynPosElements, _KupDataTable_getEventPath, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_clickHandler, _KupDataTable_contextMenuHandler, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onDefaultRowActionClick, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_renderActions, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderGridPanel;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, } from './kup-data-table-declarations';
 import { getColumnByName } from '../../utils/cell-utils';
@@ -114,6 +114,7 @@ export class KupDataTable {
     _KupDataTable_detailCard.set(this, null);
     _KupDataTable_insertCard.set(this, null);
     _KupDataTable_confirmDeleteCard.set(this, null);
+    _KupDataTable_confirmDeleteDialog.set(this, null);
     _KupDataTable_columnMenuCard.set(this, null);
     _KupDataTable_columnDropCard.set(this, null);
     _KupDataTable_columnDropCardAnchor.set(this, null);
@@ -509,9 +510,10 @@ export class KupDataTable {
    * Closes the delete confirm card (called by backend, on success)
    */
   async closeConfirmDeleteCard() {
-    if (__classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f")) {
-      __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").remove();
+    if (__classPrivateFieldGet(this, _KupDataTable_confirmDeleteDialog, "f")) {
+      __classPrivateFieldGet(this, _KupDataTable_confirmDeleteDialog, "f").close();
       __classPrivateFieldSet(this, _KupDataTable_confirmDeleteCard, null, "f");
+      __classPrivateFieldSet(this, _KupDataTable_confirmDeleteDialog, null, "f");
     }
   }
   /**
@@ -1239,7 +1241,7 @@ export class KupDataTable {
             cells[column.name] = {
               isEditable: column.isKey ||
                 column.isEditable,
-              obj: column.obj,
+              obj: Object.assign({}, column.obj),
               shape: column.shape,
               value: '',
             };
@@ -3322,7 +3324,7 @@ export class KupDataTable {
       }];
   }
 }
-_KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _KupDataTable_rowsLength = new WeakMap(), _KupDataTable_paginatedRows = new WeakMap(), _KupDataTable_paginatedRowsLength = new WeakMap(), _KupDataTable_footer = new WeakMap(), _KupDataTable_kupManager = new WeakMap(), _KupDataTable_renderedRows = new WeakMap(), _KupDataTable_loadMoreEventCounter = new WeakMap(), _KupDataTable_loadMoreEventPreviousQuantity = new WeakMap(), _KupDataTable_theadRef = new WeakMap(), _KupDataTable_tableRef = new WeakMap(), _KupDataTable_originalData = new WeakMap(), _KupDataTable_tableAreaRef = new WeakMap(), _KupDataTable_stickyTheadRef = new WeakMap(), _KupDataTable_customizeTopButtonRef = new WeakMap(), _KupDataTable_customizeTopPanelRef = new WeakMap(), _KupDataTable_sizedColumns = new WeakMap(), _KupDataTable_intObserver = new WeakMap(), _KupDataTable_navBarHeight = new WeakMap(), _KupDataTable_theadIntersecting = new WeakMap(), _KupDataTable_tableIntersecting = new WeakMap(), _KupDataTable_isSafariBrowser = new WeakMap(), _KupDataTable_isRestoringState = new WeakMap(), _KupDataTable_globalFilterTimeout = new WeakMap(), _KupDataTable_totalMenuCoords = new WeakMap(), _KupDataTable_clickTimeout = new WeakMap(), _KupDataTable_thRefs = new WeakMap(), _KupDataTable_rowsRefs = new WeakMap(), _KupDataTable_oldWidth = new WeakMap(), _KupDataTable_hold = new WeakMap(), _KupDataTable_interactableDrag = new WeakMap(), _KupDataTable_interactableDrop = new WeakMap(), _KupDataTable_interactableResize = new WeakMap(), _KupDataTable_interactableTouch = new WeakMap(), _KupDataTable_dropareaRef = new WeakMap(), _KupDataTable_removeDropareaRef = new WeakMap(), _KupDataTable_groupsDropareaRef = new WeakMap(), _KupDataTable_clickCb = new WeakMap(), _KupDataTable_clickCbCustomPanel = new WeakMap(), _KupDataTable_clickCbDropCard = new WeakMap(), _KupDataTable_resizeTimeout = new WeakMap(), _KupDataTable_columnMenuInstance = new WeakMap(), _KupDataTable_filtersColumnMenuInstance = new WeakMap(), _KupDataTable_filtersRowsInstance = new WeakMap(), _KupDataTable_detailCard = new WeakMap(), _KupDataTable_insertCard = new WeakMap(), _KupDataTable_confirmDeleteCard = new WeakMap(), _KupDataTable_columnMenuCard = new WeakMap(), _KupDataTable_columnDropCard = new WeakMap(), _KupDataTable_columnDropCardAnchor = new WeakMap(), _KupDataTable_insertCount = new WeakMap(), _KupDataTable_BUTTON_CANCEL_ID = new WeakMap(), _KupDataTable_BUTTON_SUBMIT_ID = new WeakMap(), _KupDataTable_FIELDS_FORM_ID = new WeakMap(), _KupDataTable_MESSAGE_ID = new WeakMap(), _KupDataTable_MESSAGE_WRAPPER_ID = new WeakMap(), _KupDataTable_INSERT_PREFIX = new WeakMap(), _KupDataTable_stickyHeaderPosition = new WeakMap(), _KupDataTable_FONTSIZE_CODES = new WeakMap(), _KupDataTable_FONTSIZE_DECODES = new WeakMap(), _KupDataTable_FONTSIZE_ICONS = new WeakMap(), _KupDataTable_DENSITY_DECODES = new WeakMap(), _KupDataTable_DENSITY_ICONS = new WeakMap(), _KupDataTable_GRID_CODES = new WeakMap(), _KupDataTable_GRID_DECODES = new WeakMap(), _KupDataTable_GRID_ICONS = new WeakMap(), _KupDataTable_instances = new WeakSet(), _KupDataTable_closeDropCard = function _KupDataTable_closeDropCard() {
+_KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _KupDataTable_rowsLength = new WeakMap(), _KupDataTable_paginatedRows = new WeakMap(), _KupDataTable_paginatedRowsLength = new WeakMap(), _KupDataTable_footer = new WeakMap(), _KupDataTable_kupManager = new WeakMap(), _KupDataTable_renderedRows = new WeakMap(), _KupDataTable_loadMoreEventCounter = new WeakMap(), _KupDataTable_loadMoreEventPreviousQuantity = new WeakMap(), _KupDataTable_theadRef = new WeakMap(), _KupDataTable_tableRef = new WeakMap(), _KupDataTable_originalData = new WeakMap(), _KupDataTable_tableAreaRef = new WeakMap(), _KupDataTable_stickyTheadRef = new WeakMap(), _KupDataTable_customizeTopButtonRef = new WeakMap(), _KupDataTable_customizeTopPanelRef = new WeakMap(), _KupDataTable_sizedColumns = new WeakMap(), _KupDataTable_intObserver = new WeakMap(), _KupDataTable_navBarHeight = new WeakMap(), _KupDataTable_theadIntersecting = new WeakMap(), _KupDataTable_tableIntersecting = new WeakMap(), _KupDataTable_isSafariBrowser = new WeakMap(), _KupDataTable_isRestoringState = new WeakMap(), _KupDataTable_globalFilterTimeout = new WeakMap(), _KupDataTable_totalMenuCoords = new WeakMap(), _KupDataTable_clickTimeout = new WeakMap(), _KupDataTable_thRefs = new WeakMap(), _KupDataTable_rowsRefs = new WeakMap(), _KupDataTable_oldWidth = new WeakMap(), _KupDataTable_hold = new WeakMap(), _KupDataTable_interactableDrag = new WeakMap(), _KupDataTable_interactableDrop = new WeakMap(), _KupDataTable_interactableResize = new WeakMap(), _KupDataTable_interactableTouch = new WeakMap(), _KupDataTable_dropareaRef = new WeakMap(), _KupDataTable_removeDropareaRef = new WeakMap(), _KupDataTable_groupsDropareaRef = new WeakMap(), _KupDataTable_clickCb = new WeakMap(), _KupDataTable_clickCbCustomPanel = new WeakMap(), _KupDataTable_clickCbDropCard = new WeakMap(), _KupDataTable_resizeTimeout = new WeakMap(), _KupDataTable_columnMenuInstance = new WeakMap(), _KupDataTable_filtersColumnMenuInstance = new WeakMap(), _KupDataTable_filtersRowsInstance = new WeakMap(), _KupDataTable_detailCard = new WeakMap(), _KupDataTable_insertCard = new WeakMap(), _KupDataTable_confirmDeleteCard = new WeakMap(), _KupDataTable_confirmDeleteDialog = new WeakMap(), _KupDataTable_columnMenuCard = new WeakMap(), _KupDataTable_columnDropCard = new WeakMap(), _KupDataTable_columnDropCardAnchor = new WeakMap(), _KupDataTable_insertCount = new WeakMap(), _KupDataTable_BUTTON_CANCEL_ID = new WeakMap(), _KupDataTable_BUTTON_SUBMIT_ID = new WeakMap(), _KupDataTable_FIELDS_FORM_ID = new WeakMap(), _KupDataTable_MESSAGE_ID = new WeakMap(), _KupDataTable_MESSAGE_WRAPPER_ID = new WeakMap(), _KupDataTable_INSERT_PREFIX = new WeakMap(), _KupDataTable_stickyHeaderPosition = new WeakMap(), _KupDataTable_FONTSIZE_CODES = new WeakMap(), _KupDataTable_FONTSIZE_DECODES = new WeakMap(), _KupDataTable_FONTSIZE_ICONS = new WeakMap(), _KupDataTable_DENSITY_DECODES = new WeakMap(), _KupDataTable_DENSITY_ICONS = new WeakMap(), _KupDataTable_GRID_CODES = new WeakMap(), _KupDataTable_GRID_DECODES = new WeakMap(), _KupDataTable_GRID_ICONS = new WeakMap(), _KupDataTable_instances = new WeakSet(), _KupDataTable_closeDropCard = function _KupDataTable_closeDropCard() {
   __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet(this, _KupDataTable_columnDropCard, "f"));
   __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupDataTable_clickCbDropCard, "f"));
   __classPrivateFieldGet(this, _KupDataTable_columnDropCard, "f").remove();
@@ -4109,7 +4111,6 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   const CARD_WIDTH = 400;
   const CARD_HEIGHT = 400;
   __classPrivateFieldSet(this, _KupDataTable_insertCard, document.createElement('kup-card'), "f");
-  __classPrivateFieldGet(this, _KupDataTable_insertCard, "f").showModal = true;
   __classPrivateFieldGet(this, _KupDataTable_insertCard, "f").layoutFamily = KupCardFamily.FREE;
   __classPrivateFieldGet(this, _KupDataTable_insertCard, "f").layoutNumber = 1;
   __classPrivateFieldGet(this, _KupDataTable_insertCard, "f").sizeX = CARD_WIDTH + 'px';
@@ -4198,14 +4199,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   this.rootElement.shadowRoot.append(__classPrivateFieldGet(this, _KupDataTable_insertCard, "f"));
 }, _KupDataTable_rowsDelete = function _KupDataTable_rowsDelete() {
   const createDeleteCard = () => {
-    const CARD_WIDTH = 250;
-    const CARD_HEIGHT = 200;
+    __classPrivateFieldSet(this, _KupDataTable_confirmDeleteDialog, document.createElement('kup-dialog'), "f");
     __classPrivateFieldSet(this, _KupDataTable_confirmDeleteCard, document.createElement('kup-card'), "f");
-    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").showModal = true;
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").layoutFamily = KupCardFamily.FREE;
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").layoutNumber = 1;
-    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").sizeX = CARD_WIDTH + 'px';
-    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").sizeY = CARD_HEIGHT + 'px';
+    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").sizeX = 'auto';
+    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").sizeY = 'auto';
     const style = document.createElement('style');
     style.innerText =
       '.button-wrapper, .message-wrapper { display: flex; justify-content: space-around; z-index: var(--kup-card-zindex); } .message-wrapper { padding-bottom: 20px; }';
@@ -4221,16 +4220,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     messageWrapper.append(message);
     const buttonWrapper = document.createElement('div');
     buttonWrapper.className = 'button-wrapper';
-    const cancel = document.createElement('kup-button');
     const confirm = document.createElement('kup-button');
-    cancel.id = __classPrivateFieldGet(this, _KupDataTable_BUTTON_CANCEL_ID, "f");
-    cancel.icon = 'clear';
-    cancel.label = __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.ABORT);
-    cancel.styling = FButtonStyling.FLAT;
-    cancel.addEventListener('kup-button-click', () => {
-      __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").remove();
-      __classPrivateFieldSet(this, _KupDataTable_confirmDeleteCard, null, "f");
-    });
     confirm.id = __classPrivateFieldGet(this, _KupDataTable_BUTTON_SUBMIT_ID, "f");
     confirm.icon = 'check';
     confirm.label = __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM);
@@ -4241,20 +4231,19 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     confirm.appendChild(innerComp);
     confirm.addEventListener('kup-button-click', () => {
       confirm.showSpinner = true;
-      cancel.disabled = true;
       this.kupDeleteRow.emit({
         comp: this,
         id: this.rootElement.id,
         selectedRows: this.selectedRows,
       });
     });
-    buttonWrapper.append(cancel);
     buttonWrapper.append(confirm);
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").append(style);
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").append(messageWrapper);
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").append(buttonWrapper);
     __classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f").data = {};
-    this.rootElement.shadowRoot.append(__classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f"));
+    __classPrivateFieldGet(this, _KupDataTable_confirmDeleteDialog, "f").append(__classPrivateFieldGet(this, _KupDataTable_confirmDeleteCard, "f"));
+    document.querySelector('body').append(__classPrivateFieldGet(this, _KupDataTable_confirmDeleteDialog, "f"));
   };
   const insertRowsIds = [];
   const startingRows = [];

package/dist/collection/components/kup-dialog/kup-dialog-declarations.js

@@ -0,0 +1,14 @@
+/**
+ * Props of the kup-dialog component.
+ * Used to export every prop in an object.
+ */
+export var KupDialogProps;
+(function (KupDialogProps) {
+  KupDialogProps["autoCenter"] = "Auto centers the dialog relatively to the viewport.";
+  KupDialogProps["customStyle"] = "Custom style of the component.";
+  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["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 || (KupDialogProps = {}));

package/dist/collection/components/kup-dialog/kup-dialog.css

@@ -0,0 +1,64 @@
+/**
+* @prop --kup-dialog-header-height: Sets the height of the header bar.
+*/
+:host {
+  --kup_dialog_header_height: var(--kup-dialog-header-height, 2em);
+  box-sizing: border-box;
+  display: block;
+  height: var(--kup_dialog_height);
+  left: var(--kup_dialog_left);
+  min-height: var(--kup_dialog_height);
+  min-width: var(--kup_dialog_width);
+  position: absolute;
+  top: var(--kup_dialog_top);
+  transition: opacity 0.25s ease-in;
+  width: var(--kup_dialog_width);
+}
+
+#kup-component {
+  height: 100%;
+  width: 100%;
+}
+
+[fade-in] {
+  opacity: 0;
+}
+[fade-in] ::slotted {
+  display: none;
+}
+
+.header {
+  background-color: var(--kup-title-background-color);
+  color: var(--kup-title-color);
+  display: flex;
+  flex-direction: row;
+  height: var(--kup_dialog_header_height);
+  position: relative;
+  width: 100%;
+}
+.header__title {
+  font-weight: bold;
+  line-height: 2em;
+  padding-left: 0.5em;
+  padding-right: 2em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.header__close.f-image {
+  --kup-icon-color: var(--kup-title-color);
+  cursor: pointer;
+  margin-right: 0;
+  transition: opacity 0.25s;
+  position: absolute;
+  right: 0;
+  background: var(--kup-title-background-color);
+}
+.header__close.f-image:hover {
+  opacity: 0.5;
+}
+
+.content {
+  height: calc(100% - var(--kup_dialog_header_height));
+  overflow: auto;
+}