@sme.up/ketchup 10.3.2 → 10.3.4

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

@@ -65,7 +65,7 @@ export class KupAutocomplete {
         this.minimumChars = 3;
         this.readOnly = false;
         this.selectMode = ItemsDisplayMode.CODE;
-        this.serverHandledFilter = false;
+        this.serverHandledFilter = true;
         this.showDropDownIcon = true;
         this.showMarker = false;
         this.sizing = KupComponentSizing.SMALL;
@@ -73,6 +73,7 @@ export class KupAutocomplete {
         this.placeholder = null;
         this.legacyLook = false;
         this.size = undefined;
+        this.preselect = null;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
@@ -84,11 +85,11 @@ export class KupAutocomplete {
             });
         }
     }
-    onKupChange(value) {
+    onKupChangeSubmit(value, eventToEmit) {
         if (value) {
             const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, undefined, true);
             if (ret.exists || this.allowInconsistentValues) {
-                this.kupChange.emit({
+                eventToEmit.emit({
                     comp: this,
                     id: this.rootElement.id,
                     value: this.value,
@@ -100,7 +101,7 @@ export class KupAutocomplete {
         else {
             this.value = '';
             this.displayedValue = '';
-            this.kupChange.emit({
+            eventToEmit.emit({
                 comp: this,
                 id: this.rootElement.id,
                 value: this.value,
@@ -158,7 +159,7 @@ export class KupAutocomplete {
         });
     }
     onKupItemClick(e) {
-        this.onKupChange(e.detail.selected.id);
+        this.onKupChangeSubmit(e.detail.selected.id, this.kupChange);
         __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
         if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f")) {
             __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").focus();
@@ -239,6 +240,9 @@ export class KupAutocomplete {
                     __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
                     __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").focusPrevious();
                     break;
+                case 'Enter':
+                    this.onKupChangeSubmit(__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, this.kupSubmit);
+                    break;
             }
         }
     }
@@ -309,6 +313,9 @@ export class KupAutocomplete {
         this.placeholder || (this.placeholder = __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").language.translate(KupLanguageGeneric.TYPE_CODE_OR_DESCR));
     }
     componentDidLoad() {
+        if (this.preselect != null) {
+            __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").select(this.preselect);
+        }
         __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, this.initialValueDecode, true);
         __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
     }
@@ -360,9 +367,9 @@ export class KupAutocomplete {
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: '93b9a4c6870519581ca37bf96fbeaa12d8e6d31a', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: 'f441e0889173a7152678b0e09b4ab236d3262888' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '72c71c7890ec8574916f9a7f9ef977036776ce01', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: '8db16287e57a8b2d025326913945e89092a2b0c7' }, props, { icon: this.showDropDownIcon
+        return (h(Host, { key: 'bd65a5abab4ff62f91a6348e03b496711b796d90', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: '7133bd7ceb0365b4bd82846a60addb3085a25d37' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '8b09ee007f909d8f6eadeebda3262b42731a747a', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: '56658e721535c89c971bd7dae0af26c073a6eab6' }, props, { icon: this.showDropDownIcon
                 ? KupThemeIconValues.SEARCH
-                : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
+                : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChangeSubmit(e.target.value, this.kupChange), onFocus: () => this.onKupFocus(), onInput: () => {
                 window.clearTimeout(__classPrivateFieldGet(this, _KupAutocomplete_inputTimeout, "f"));
                 __classPrivateFieldSet(this, _KupAutocomplete_inputTimeout, window.setTimeout(() => this.onKupInput(), this.inputDelay), "f");
             }, onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
@@ -803,7 +810,7 @@ export class KupAutocomplete {
                 },
                 "attribute": "server-handled-filter",
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "showDropDownIcon": {
                 "type": "boolean",
@@ -953,6 +960,24 @@ export class KupAutocomplete {
                 },
                 "attribute": "size",
                 "reflect": false
+            },
+            "preselect": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the element to select. When default selects nothing."
+                },
+                "attribute": "preselect",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -1005,6 +1030,27 @@ export class KupAutocomplete {
                         }
                     }
                 }
+            }, {
+                "method": "kupSubmit",
+                "name": "kup-autocomplete-submit",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupAutocompleteEventPayload",
+                    "resolved": "KupAutocompleteEventPayload",
+                    "references": {
+                        "KupAutocompleteEventPayload": {
+                            "location": "import",
+                            "path": "./kup-autocomplete-declarations",
+                            "id": "src/components/kup-autocomplete/kup-autocomplete-declarations.ts::KupAutocompleteEventPayload"
+                        }
+                    }
+                }
             }, {
                 "method": "kupClick",
                 "name": "kup-autocomplete-click",

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

@@ -137,7 +137,10 @@
 * @prop --kup-box-transition: Sets transition duration for box-shadow and background-color.
 */
 :host {
-  --kup_box_background_color: var(--kup-box-background-color, var(--kup-layer-1));
+  --kup_box_background_color: var(
+    --kup-box-background-color,
+    var(--kup-layer-1)
+  );
   --kup_box_background_color_hover: var(
     --kup-box-background-color-hover,
     var(--kup-layer-1-hover)
@@ -149,9 +152,19 @@
   --kup_box_text_color: var(--kup-box-text-color, var(--kup-text-secondary));
   --kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-03));
   --kup_box_transition: var(--kup-box-transition, 0.25s);
-  --kup_box_border_color_drag:var(--kup-box-border-color-drag, var(--kup-border-interactive))
+  --kup_box_border_color_drag: var(
+    --kup-box-border-color-drag,
+    var(--kup-border-interactive)
+  );
   display: block;
   --kup_box_padding: var(--kup-box-padding, var(--kup-space-05));
+  --kup_box_border_radius: var(--kup-box-border-radius, var(--kup-radius-00));
+  --kup_box_border_color: var(
+    --kup-box-border-color,
+    var(--kup-primary-color-60)
+  );
+  --kup_box_border_width: var(--kup-box-border-width, 0);
+  --kup_box_border_style: var(--kup-box-border-style, none);
 }
 
 .box-component {
@@ -184,7 +197,10 @@
   display: flex;
   align-items: center;
   background-color: var(--kup_box_background_color);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup_box_border_radius);
+  border-color: var(--kup_box_border_color);
+  border-width: var(--kup_box_border_width);
+  border-style: var(--kup_box_border_style);
 }
 #box-container .box-wrapper:hover {
   background-color: var(--kup_box_background_color_hover);

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

@@ -196,15 +196,17 @@ export class KupChip {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h(Host, { key: 'd8cfebdb07ba8edd6dc3537932d0bc0af691f35b', "onKup-autocomplete-itemclick": (e) => {
+        return (h(Host, { key: '9e280d8351e8a26e8c7ab5d130b27c354738257d', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+            }, "onKup-autocomplete-submit": (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);
             }, "onKup-textfield-submit": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h("style", { key: '752eb1a7d0ac346204c4c1cf05c02a7d4d95fd7d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '70df2afbe8e3a484cb6894607fe6e951bf60679d', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: 'f3c578d5f21090cd839b4048e4a5996d96c36eb0', name: "field" }))));
+            } }, h("style", { key: '4cea204a7aa31ca3f91ee3f0f94cc088e7f7373f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '46238eff774c3ff26846cf401a870bfd24d8cd59', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: '2c59e3ee549a3d2797aa81129d85661aa440bb58', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -652,11 +654,11 @@ _KupChip_instances = new WeakSet(), _KupChip_changeHandler =
         e.stopPropagation();
         const data = this.data && this.data.length ? this.data : [];
         // check event type
-        if ('node' in e.detail) {
+        if ('node' in e.detail && e.detail.node) {
             // autocomplete and combobox handler
             const node = e.detail.node;
             // check if node isn't presents in data
-            if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === node.id))) {
+            if (node.value && !((_a = this.data) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === node.id))) {
                 this.data = [
                     ...data,
                     {

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

@@ -65,6 +65,7 @@ export class KupCombobox {
         this.showMarker = false;
         this.legacyLook = false;
         this.size = undefined;
+        this.preselect = null;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
@@ -278,6 +279,9 @@ export class KupCombobox {
         }
     }
     componentDidLoad() {
+        if (this.preselect != null) {
+            __classPrivateFieldGet(this, _KupCombobox_listEl, "f").select(this.preselect);
+        }
         __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, this.initialValueDecode, true);
         __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
     }
@@ -329,7 +333,7 @@ export class KupCombobox {
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: '3a668e909d00508d820581ceb71cec02bf640fa6', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: '8fe26ceec376d17b2fb81825d9e7c3ed9839d8a4' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '56d4ec7e7dc9ec8d95082d7f0f53830c0cd66170', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '61a0a16cb31b1dcdb5d91d5ebe4be550c81a93f2' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h(Host, { key: 'b419cdf58d190601c58d0ab1501e6cfeeb215c4f', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: '9c5b4ad2ae9303e607ab0667cd31d2fe95f50524' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '759809bb42d7f30abdcb5db1abb4a0e5689fc731', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '9e864b76be8ad6602186797f68d237980ebd307d' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -814,6 +818,24 @@ export class KupCombobox {
                 },
                 "attribute": "size",
                 "reflect": false
+            },
+            "preselect": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the element to select. When default selects nothing."
+                },
+                "attribute": "preselect",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

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

@@ -206,7 +206,7 @@
     var(--kup-layer-1-hover)
   );
   --kup_datatable_text_color_hover: var(
-    --kup-datatable-background-color-hover,
+    --kup-datatable-text-color-hover,
     var(--kup-text-primary)
   );
   --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary));

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_checkUpdateState, _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_originalDataLoaded, _KupDataTable_originalDataLoadedMaxId, _KupDataTable_insertedRowIds, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_lastPointerDetails, _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_actionsCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_dropDownActionCardAnchor, _KupDataTable_insertCount, _KupDataTable_lastFocusedColumn, _KupDataTable_lastFocusedCell, _KupDataTable_lastFocusedRow, _KupDataTable_maxRowsPerPage, _KupDataTable_readyPromise, _KupDataTable_readyResolve, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, _KupDataTable_insertNewColumnInVisibleColumnsList, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _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_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_dropDownActions, _KupDataTable_createDropDownActionsCard, _KupDataTable_clearSearchActionsCard, _KupDataTable_filterRowActionsCard, _KupDataTable_closeRowActionsCard, _KupDataTable_closeColumnMenuCard, _KupDataTable_prepareDataForActionsCard, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_getEventDetailsForCurrentSelection, _KupDataTable_getSourceElementCoordsForCurrentSelection, _KupDataTable_clickHandler, _KupDataTable_cellActionsMenuHandler, _KupDataTable_contextMenuHandler, _KupDataTable_tooltipRequestHandler, _KupDataTable_contextMenuHandlerDetailsManager, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_copyCellValueInColumnHandler, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_setCellEditability, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_horNav, _KupDataTable_verNav, _KupDataTable_onKupKeyDown, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _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_handleUpdateClick, _KupDataTable_onBlurHandler, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _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, _KupDataTable_renderCommandButton, _KupDataTable_renderCommandDropDownButton, _KupDataTable_renderUpdateButtons;
+var _KupDataTable_instances, _KupDataTable_checkUpdateState, _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_originalDataLoaded, _KupDataTable_originalDataLoadedMaxId, _KupDataTable_insertedRowIds, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_lastPointerDetails, _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_actionsCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_dropDownActionCardAnchor, _KupDataTable_insertCount, _KupDataTable_lastFocusedColumn, _KupDataTable_lastFocusedCell, _KupDataTable_lastFocusedRow, _KupDataTable_maxRowsPerPage, _KupDataTable_readyPromise, _KupDataTable_readyResolve, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, _KupDataTable_insertNewColumnInVisibleColumnsList, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _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_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_dropDownActions, _KupDataTable_createDropDownActionsCard, _KupDataTable_clearSearchActionsCard, _KupDataTable_filterRowActionsCard, _KupDataTable_closeRowActionsCard, _KupDataTable_closeColumnMenuCard, _KupDataTable_prepareDataForActionsCard, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_getEventDetailsForCurrentSelection, _KupDataTable_getSourceElementCoordsForCurrentSelection, _KupDataTable_clickHandler, _KupDataTable_cellActionsMenuHandler, _KupDataTable_contextMenuHandler, _KupDataTable_tooltipRequestHandler, _KupDataTable_contextMenuHandlerDetailsManager, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_copyCellValueInColumnHandler, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_setCellEditability, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_horNav, _KupDataTable_verNav, _KupDataTable_onKupKeyDown, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _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_handleUpdateClick, _KupDataTable_onBlurHandler, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _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, _KupDataTable_renderCommandButton, _KupDataTable_handleChipsContextMenu, _KupDataTable_renderCommandDropDownButton, _KupDataTable_renderUpdateButtons;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, DataTableAreasEnum, TypesToDuplicate, } from "./kup-data-table-declarations";
 import { getColumnByName, getValueForDisplay, isNegativeNumber, } from "../../utils/cell-utils";
@@ -44,7 +44,7 @@ import { FCellClasses, FCellPadding, FCellShapes, } from "../../f-components/f-c
 import { FCell } from "../../f-components/f-cell/f-cell";
 import { FPaginator } from "../../f-components/f-paginator/f-paginator";
 import { pageChange, rowsPerPageChange, } from "../../f-components/f-paginator/f-paginator-utils";
-import { KupDataNewColumnTypes, } from "../../managers/kup-data/kup-data-declarations";
+import { KupDataNewColumnTypes, UseAsValue, } from "../../managers/kup-data/kup-data-declarations";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FButtonStyling } from "../../f-components/f-button/f-button-declarations";
 import { KupColumnMenuIds } from "../../utils/kup-column-menu/kup-column-menu-declarations";
@@ -733,11 +733,10 @@ export class KupDataTable {
      * Opens the column menu of the given column.
      * @param {string} column - Name of the column.
      */
-    async openColumnMenu(column) {
+    async openColumnMenu(columnName, wrapperClass) {
         if (__classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f")) {
             __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_closeColumnMenuCard).call(this);
         }
-        this.columnMenuAnchor = column;
         __classPrivateFieldSet(this, _KupDataTable_columnMenuCard, document.createElement('kup-card'), "f");
         __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").isMenu = true;
         __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").layoutNumber = 12;
@@ -769,10 +768,10 @@ export class KupDataTable {
             el: __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f"),
         }, "f");
         __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet(this, _KupDataTable_clickCbDropCard, "f"), true);
-        __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").setAttribute('data-column', column);
-        __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getVisibleColumns(), column));
-        __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").open(this, column);
-        __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").reposition(this, __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f"));
+        __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").setAttribute('data-column', columnName);
+        __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getColumns(), columnName));
+        __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").open(this, columnName);
+        __classPrivateFieldGet(this, _KupDataTable_columnMenuInstance, "f").reposition(this, __classPrivateFieldGet(this, _KupDataTable_columnMenuCard, "f"), wrapperClass);
         this.kupDataTableColumnMenu.emit({
             comp: this,
             id: this.rootElement.id,
@@ -1439,7 +1438,7 @@ export class KupDataTable {
         __classPrivateFieldSet(this, _KupDataTable_sizedColumns, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
         let rows = null;
         if (__classPrivateFieldGet(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h("tr", { key: 'e9bb5a44c504b3a03f52738518366355cefe291d', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: 'cba6a258cf3ad8429c376294d311df579632b38b', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h("tr", { key: '5f062c5f8a654d0625ecf2c8bf3ad3e322fbc213', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '496919ae8b4a32c1346bc28bd9b900a451d89138', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -1498,13 +1497,24 @@ export class KupDataTable {
                 const props = {
                     data: chipsData,
                     id: 'group-chips',
-                    type: FChipType.INPUT,
                     onIconClick: [],
+                    onClearFilterClick: [],
+                    type: FChipType.INPUT,
+                    onContextMenu: [],
+                    hasFilter: [],
                 };
                 for (let i = 0; i < chipsData.length; i++) {
+                    const column = getColumnByName(this.getColumns(), chipsData[i].id);
+                    const hasFilterColumn = __classPrivateFieldGet(this, _KupDataTable_filtersColumnMenuInstance, "f").hasFiltersForColumn(this.filters, column);
+                    props.hasFilter.push(hasFilterColumn);
+                    __classPrivateFieldGet(this, _KupDataTable_filtersColumnMenuInstance, "f").hasFiltersForColumn(this.filters, column);
+                    props.onClearFilterClick.push(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onRemoveFilter).call(this, column));
                     props.onIconClick.push(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_removeGroup).call(this, i));
+                    props.onContextMenu.push((chipArg, e) => {
+                        __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_handleChipsContextMenu).call(this, chipArg.id, e);
+                    });
                 }
-                groupChips = h(FChip, Object.assign({ key: '6b0c6ebe05b56d6a219738cfe8a03b56ac8e325f' }, props));
+                groupChips = h(FChip, Object.assign({ key: 'd15147bda3f84ac3725e063621918408efd39773' }, props));
             }
         }
         const tableClass = {
@@ -1536,7 +1546,7 @@ export class KupDataTable {
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
-            stickyEl = (h("sticky-header", { key: '28f9ab1c990c965025cfa247cf8daedd975b2bc4', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: '399a0e7f6f318d542de7de036edbebecdec1585c' }, h("tr-sticky", { key: '25830044da6bd9d1f6f175774ea4f02ed32ff2e8' }, stickyHeader))));
+            stickyEl = (h("sticky-header", { key: 'f6b4b9722ffd82300f53133f7549c4aa97b73158', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: 'c52dfdfb26096da37daf7f089212b522f1ca1afc' }, h("tr-sticky", { key: '2959e9640bd5ca8a4c71d5dca5839be47d0d3fd3' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -1582,7 +1592,7 @@ export class KupDataTable {
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h(Host, { key: 'cfb3e66b92d337ed7146166526fdd7581890f2a1', "onKup-drop": (e) => {
+        const compCreated = (h(Host, { key: 'f1d21f0e667ea40d31ac750ba2fd2e03d61b2463', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
@@ -1597,11 +1607,11 @@ export class KupDataTable {
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: 'f7e4bde3443b24b608c12bbe559e9a6622d78a95' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: 'cd3a1125a1c3f1a6fae0a5a3db40f80abc1ae996', id: componentWrapperId, class: wrapClass }, h("div", { key: 'd44f885a9c4965f85bf3880b05beda7a226ab9f7', class: "group-wrapper" }, groupChips), h("div", { key: 'dd7ca075c3678fdb28090979082b8c8087ee529b', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h("style", { key: '128354f78f311668e84a3fd0b2dc7adc58479f8e' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: 'c680b4feaf43778da11b54eb2d0bb3e3be619541', id: componentWrapperId, class: wrapClass }, h("div", { key: 'dcae989bcbc73bbfa20e2a8e0b487495bc345807', class: "group-wrapper" }, groupChips), h("div", { key: 'f3bcd52b5dfccf4cc66e4d627cad87f76e4e786e', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
-            } }))) : null, h("div", { key: '13c2a56a33c8a16837e4d36b76c31f9de7e4b517', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
+            } }))) : null, h("div", { key: '72cee4628c0aa298fadde0e68dd1f3438e1de342', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -1651,9 +1661,9 @@ export class KupDataTable {
                     this.data.rows.unshift(row);
                     await this.refresh(true);
                 }
-            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: '9580a2c3a9b5066cff9dbdf601c383290cc5b052', class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: '398228e709c0dcc66b471aecf935084a60f34c2d', class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h("div", { key: '27cf3dc8b741058ddb753c393c776897185cf0a6', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h("div", { key: 'c62c79041d2fc7e79930e3a342c3ac84382b9b90', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -1662,7 +1672,7 @@ export class KupDataTable {
                     } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h("table", { key: 'acc357c683c3cdc02448382d9e4127e525da7cec', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h("table", { key: '352e26f5c47b6e14e130dd362fc869a21cf3cd9b', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -1670,7 +1680,7 @@ export class KupDataTable {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
             }, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: '8ac27300459fb808baaa9a2e630b262728ff7649', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '827ad16ec4afbe3b53c88396ef6e1f48b4875c02' }, header)), h("tbody", { key: 'a8acd5290c2e0c74180477faed53915c12731453' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h("thead", { key: 'be7a772c243837b338b8adfb9953aadef589d74e', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: 'ed66d8483c9c394a39148ba7ce621f5cee234407' }, header)), h("tbody", { key: '38b0f196ac0762fdaccc90ba2e79b696566553f1' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -3921,11 +3931,15 @@ export class KupDataTable {
             },
             "openColumnMenu": {
                 "complexType": {
-                    "signature": "(column: string) => Promise<void>",
+                    "signature": "(columnName: string, wrapperClass: string) => Promise<void>",
                     "parameters": [{
-                            "name": "column",
+                            "name": "columnName",
                             "type": "string",
-                            "docs": "- Name of the column."
+                            "docs": ""
+                        }, {
+                            "name": "wrapperClass",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -5875,7 +5889,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_contextMenuHandlerDetailsManager = function _KupDataTable_contextMenuHandlerDetailsManager(details, eventCoords) {
     if (details.area === DataTableAreasEnum.HEADER) {
         if (details.column) {
-            this.openColumnMenu(details.column.name);
+            const colName = details.column.name;
+            this.openColumnMenu(colName, `th[data-column="${colName}"]`);
             return details;
         }
     }
@@ -5913,7 +5928,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_isGrouping = function _KupDataTable_isGrouping() {
     return this.groups && this.groups.length > 0;
 }, _KupDataTable_hasRowActions = function _KupDataTable_hasRowActions() {
-    return this.rowActions !== undefined;
+    var _a;
+    return ((_a = this.rowActions) === null || _a === void 0 ? void 0 : _a.length) > 0;
 }, _KupDataTable_removeGroup = function _KupDataTable_removeGroup(index) {
     if (index >= 0) {
         // removing group from prop
@@ -6005,11 +6021,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_setCellEditability = function _KupDataTable_setCellEditability(column, row, cell) {
     if (column.useAs) {
         if (__classPrivateFieldGet(this, _KupDataTable_insertedRowIds, "f").includes(row.id) &&
-            column.useAs === 'Dec') {
+            column.useAs === UseAsValue.DEC) {
             return false;
         }
         else if (!__classPrivateFieldGet(this, _KupDataTable_insertedRowIds, "f").includes(row.id) &&
-            (column.useAs === 'Dec' || column.useAs === 'Key')) {
+            (column.useAs === UseAsValue.DEC ||
+                column.useAs === UseAsValue.KEY)) {
             return false;
         }
     }
@@ -7138,6 +7155,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         } })));
 }, _KupDataTable_renderCommandButton = function _KupDataTable_renderCommandButton(commandObj, styling) {
     return (h("kup-button", { styling: styling, "onKup-button-click": () => __classPrivateFieldGet(this, _KupDataTable_handleUpdateClick, "f").call(this, commandObj), icon: commandObj.icon, placeholderIcon: commandObj.placeholderIcon, label: commandObj.value }));
+}, _KupDataTable_handleChipsContextMenu = function _KupDataTable_handleChipsContextMenu(chipColumnName, e) {
+    e.preventDefault();
+    this.openColumnMenu(chipColumnName, `.chip[data-value="${chipColumnName}"]`);
 }, _KupDataTable_renderCommandDropDownButton = function _KupDataTable_renderCommandDropDownButton(commandObj, styling) {
     const data = {
         'kup-list': {
@@ -7156,8 +7176,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         var _a;
         let row = { cells: {} };
         (_a = __classPrivateFieldGet(this, _KupDataTable_originalDataLoaded, "f")) === null || _a === void 0 ? void 0 : _a.columns.forEach((c) => {
+            var _a;
             row.cells[c.name] = {
-                shape: FCellShapes.INPUT_FIELD,
+                shape: (_a = c.shape) !== null && _a !== void 0 ? _a : FCellShapes.INPUT_FIELD,
                 obj: Object.assign({}, c.obj),
                 isEditable: true,
             };

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

@@ -6,7 +6,7 @@ export var KupEditorProps;
 (function (KupEditorProps) {
     KupEditorProps["autosaveTimer"] = "When a number is specified, the component will emit the kup-editor-save event at regular intervals. The amount of time every interval will last is specified but the prop itself.";
     KupEditorProps["editorHeight"] = "Sets the height of the component.";
-    KupEditorProps["initialEditType"] = "Initializes editor with the specified editor type. Suported values: \"markdown\", \"wysiwyg\".";
+    KupEditorProps["initialEditType"] = "Initializes editor with the specified editor type. Suported values: \"markdown\", \"wysiwyg\", \"text\".";
     KupEditorProps["initialValue"] = "Initializes editor with the specified string.";
     KupEditorProps["isReadOnly"] = "Defaults at false. When set, When set, the editor\u2019s content can\u2019t be changed..";
     KupEditorProps["selectedTab"] = "Sets the markdown editor with the specified tab. Supported values: \"preview\", \"write\".";