@sme.up/ketchup 10.3.2 → 10.3.4

package/dist/collection/components/kup-editor/kup-editor.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 _KupEditor_autosaveInterval, _KupEditor_hasChanges, _KupEditor_initialContent, _KupEditor_kupManager, _KupEditor_unsavedChangesIndex, _KupEditor_unsavedChangesItem;
+var _KupEditor_instances, _KupEditor_autosaveInterval, _KupEditor_hasChanges, _KupEditor_initialContent, _KupEditor_kupManager, _KupEditor_unsavedChangesIndex, _KupEditor_unsavedChangesItem, _KupEditor_textareaRef, _KupEditor_isPlainTextEditor, _KupEditor_handleUnsavedChanges;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { componentWrapperId } from "../../variables/GenericVariables";
@@ -24,6 +24,7 @@ import Viewer from "@toast-ui/editor/dist/toastui-editor-viewer";
 import { getProps, setProps } from "../../utils/utils";
 export class KupEditor {
     constructor() {
+        _KupEditor_instances.add(this);
         /*-------------------------------------------------*/
         /*       I n t e r n a l   V a r i a b l e s       */
         /*-------------------------------------------------*/
@@ -40,6 +41,7 @@ export class KupEditor {
             },
             type: 'button',
         });
+        _KupEditor_textareaRef.set(this, void 0);
         this.editor = null;
         this.editorRef = undefined;
         this.viewer = null;
@@ -185,36 +187,12 @@ export class KupEditor {
     async setProps(props) {
         setProps(this, KupEditorProps, props);
     }
-    /*-------------------------------------------------*/
-    /*          P r i v a t e   M e t h o d s          */
-    /*-------------------------------------------------*/
     createEditor() {
         var _a;
         const editorProps = {
             el: this.editorRef,
             events: {
-                change: () => {
-                    if (__classPrivateFieldGet(this, _KupEditor_initialContent, "f") !== this.editor.getMarkdown()) {
-                        if (!__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
-                            __classPrivateFieldSet(this, _KupEditor_unsavedChangesIndex, this.editor.getUI().getToolbar().getItems()
-                                .length - 1, "f");
-                            this.editor
-                                .getUI()
-                                .getToolbar()
-                                .insertItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"), __classPrivateFieldGet(this, _KupEditor_unsavedChangesItem, "f"));
-                        }
-                        __classPrivateFieldSet(this, _KupEditor_hasChanges, true, "f");
-                    }
-                    else {
-                        if (__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
-                            this.editor
-                                .getUI()
-                                .getToolbar()
-                                .removeItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"));
-                        }
-                        __classPrivateFieldSet(this, _KupEditor_hasChanges, false, "f");
-                    }
-                },
+                change: () => __classPrivateFieldGet(this, _KupEditor_instances, "m", _KupEditor_handleUnsavedChanges).call(this),
                 focus: () => {
                     if (!this.isReadOnly && !this.showToolbar) {
                         this.showToolbar = true;
@@ -223,7 +201,7 @@ export class KupEditor {
             },
             height: (_a = this.editorHeight) !== null && _a !== void 0 ? _a : 'auto',
             hideModeSwitch: true,
-            initialEditType: this.initialEditType,
+            initialEditType: this.initialEditType === 'wysiwyg' ? 'wysiwyg' : 'markdown',
             initialValue: this.initialValue,
             placeholder: 'Type your text here...',
             previewStyle: this.previewStyle,
@@ -371,12 +349,17 @@ export class KupEditor {
         return toolBarItems;
     }
     getSaveAndAutoSaveProps() {
-        var _a, _b;
+        const htmlValue = __classPrivateFieldGet(this, _KupEditor_instances, "m", _KupEditor_isPlainTextEditor).call(this)
+            ? __classPrivateFieldGet(this, _KupEditor_textareaRef, "f").value
+            : this.editor.getHtml();
+        const markdownValue = __classPrivateFieldGet(this, _KupEditor_instances, "m", _KupEditor_isPlainTextEditor).call(this)
+            ? __classPrivateFieldGet(this, _KupEditor_textareaRef, "f").value
+            : this.editor.getMarkdown();
         return {
             comp: this,
             id: this.rootElement.id,
-            htmlValue: (_a = this.editor.getHtml()) !== null && _a !== void 0 ? _a : '',
-            markdownValue: (_b = this.editor.getMarkdown()) !== null && _b !== void 0 ? _b : '',
+            htmlValue,
+            markdownValue,
         };
     }
     /*-------------------------------------------------*/
@@ -400,7 +383,9 @@ export class KupEditor {
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'e7af368e1134de8874c2791b82291bc5391bff6d' }, h("div", { key: '0faeedec267b850a027ce153adaf116c8dbe0a82', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
+        return (h(Host, { key: '031333deffb0732e544076f155555bb62bc53190' }, h("div", { key: '0f312ec339138f3a62afdf742660606526d11e70', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }), __classPrivateFieldGet(this, _KupEditor_instances, "m", _KupEditor_isPlainTextEditor).call(this) && (h("textarea", { key: '0e2bc200ff30a15f624299a9577ec910134dc3d1', id: '' + this.rootElement.id + '-textarea', value: this.initialValue, ref: (el) => (__classPrivateFieldSet(this, _KupEditor_textareaRef, el, "f")), onInput: (e) => __classPrivateFieldGet(this, _KupEditor_instances, "m", _KupEditor_handleUnsavedChanges).call(this, e.target.value), placeholder: "Type your text here...", readOnly: this.isReadOnly, style: {
+                height: this.editorHeight || 'auto',
+            }, class: "kup-editor-textarea" })))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").theme.unregister(this);
@@ -455,7 +440,7 @@ export class KupEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "KupEditorType",
-                    "resolved": "\"markdown\" | \"wysiwyg\"",
+                    "resolved": "\"markdown\" | \"text\" | \"wysiwyg\"",
                     "references": {
                         "KupEditorType": {
                             "location": "import",
@@ -474,7 +459,7 @@ export class KupEditor {
                     "text": "The editor type."
                 },
                 "attribute": "initial-edit-type",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'markdown'"
             },
             "initialValue": {
@@ -838,4 +823,29 @@ export class KupEditor {
             }];
     }
 }
-_KupEditor_autosaveInterval = new WeakMap(), _KupEditor_hasChanges = new WeakMap(), _KupEditor_initialContent = new WeakMap(), _KupEditor_kupManager = new WeakMap(), _KupEditor_unsavedChangesIndex = new WeakMap(), _KupEditor_unsavedChangesItem = new WeakMap();
+_KupEditor_autosaveInterval = new WeakMap(), _KupEditor_hasChanges = new WeakMap(), _KupEditor_initialContent = new WeakMap(), _KupEditor_kupManager = new WeakMap(), _KupEditor_unsavedChangesIndex = new WeakMap(), _KupEditor_unsavedChangesItem = new WeakMap(), _KupEditor_textareaRef = new WeakMap(), _KupEditor_instances = new WeakSet(), _KupEditor_isPlainTextEditor = function _KupEditor_isPlainTextEditor() {
+    return this.initialEditType === 'text';
+}, _KupEditor_handleUnsavedChanges = function _KupEditor_handleUnsavedChanges(value) {
+    value = value !== undefined ? value : this.editor.getMarkdown();
+    if (__classPrivateFieldGet(this, _KupEditor_textareaRef, "f")) {
+        if (__classPrivateFieldGet(this, _KupEditor_initialContent, "f") !== value) {
+            if (!__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
+                __classPrivateFieldSet(this, _KupEditor_unsavedChangesIndex, this.editor.getUI().getToolbar().getItems().length - 1, "f");
+                this.editor
+                    .getUI()
+                    .getToolbar()
+                    .insertItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"), __classPrivateFieldGet(this, _KupEditor_unsavedChangesItem, "f"));
+            }
+            __classPrivateFieldSet(this, _KupEditor_hasChanges, true, "f");
+        }
+        else {
+            if (__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
+                this.editor
+                    .getUI()
+                    .getToolbar()
+                    .removeItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"));
+            }
+            __classPrivateFieldSet(this, _KupEditor_hasChanges, false, "f");
+        }
+    }
+};

package/dist/collection/components/kup-family-tree/kup-family-tree.js

@@ -149,12 +149,12 @@ export class KupFamilyTree {
         __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'a9f9ee994a291bdd1ccf08b30874b2db4bc4259a', onDrag: (e) => e.preventDefault(), onPointerDown: (e) => {
+        return (h(Host, { key: '4c4b1e324af112481cf07385a41b645cd61d55bd', onDrag: (e) => e.preventDefault(), onPointerDown: (e) => {
                 e.preventDefault();
                 __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_startPanning).call(this, e);
             }, onWheel: (e) => {
                 __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_zoomTree).call(this, e);
-            } }, h("style", { key: 'bd183547c40402c13ff97646b17040ef6a53282d' }, __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '9cb4e3898a457cd224333306aa6fe8bfda4f89da', id: componentWrapperId }, __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_createTree).call(this))));
+            } }, h("style", { key: '1a78eadb1ec514d7144499d24b31e7c159cb4330' }, __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'fdae258f4384af40bb13232a15633fec74aa8fe2', id: componentWrapperId }, __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_createTree).call(this))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").language.unregister(this);

package/dist/collection/components/kup-file-upload/kup-file-upload.js

@@ -115,10 +115,10 @@ export class KupFileUpload {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'e143d3c489688e407f713b20c5ae427797141bc6' }, h("style", { key: '99f08c09b494f7e16ef281f954714eff1182ae1f' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '7d5a7b4fbe15ce43bea1a957efbf6314ea65c6c6', id: componentWrapperId }, h("div", { key: 'eababb5992fd22bcd6b1d036dc058eaf30554613', class: {
+        return (h(Host, { key: 'c1d2c71efa28c233051bdfeb1535bcb07149c660' }, h("style", { key: '9fb2a5e633f49bac0fe1c8673869ac8b29c1272b' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'b43469650151abf962aba80f54e15343c2a95767', id: componentWrapperId }, h("div", { key: '18489f11209ad6cf55c2de3e232b2b0888a4f505', class: {
                 'file-upload': true,
                 'file-upload-spinner': this.showSpinner,
-            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: '9f326f25f1976b64caac0bf0bb7c6390519df02d', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: '470189c4ff4e0376b0b46104e7b0748e09f2a52f', class: "file-upload__buttons" }, h(FButton, { key: 'c7b8810f0c783cdbe16c9f10cd569717de360602', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), h(FButton, { key: 'b0c4678d433916abfe9265760c2133f337e9c536', icon: "save", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '34205b6c5db56c861be73aa7471ba886884f0009', icon: "clear", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.files.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file) })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.showSpinner && (h("div", { key: 'fbbce7bf09bbdfa87d395773f3eaa1d39b995171', class: "file-upload__spinner-container" }, h("kup-spinner", { key: '2fb0b8832149034fd650d52aeddfc0e478ebadc0', active: true, layout: 14, dimensions: "7px" })))))));
+            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: '8a700a42c034d2604bfe84199212123dd082c64a', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: '5279ca7bbb0468519c8cb4ae223c0d4e1e6dc7a5', class: "file-upload__buttons" }, h(FButton, { key: '76b00cac757d67e629a043f123217cdbc0b3dc58', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), h(FButton, { key: 'ddec08321006f92257b336530f168cbabcdb0796', icon: "save", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '1e70cb49c36286d5e72dd412b776c9002194102e', icon: "clear", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.files.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file) })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.showSpinner && (h("div", { key: 'f6a8de73c3109a9067866628f78698150bc83bdc', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'ca00b8efcae2be30f8ea5028d6c2a7e3839d63a4', active: true, layout: 14, dimensions: "7px" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.unregister(this);

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

@@ -408,7 +408,7 @@ export class KupForm {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h("p", { key: '07600a04c3f15543fc67c6524d273bcbfbdae951' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: 'cf8c793fae4b7ab811ed6385dd446ce1603d4921' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -419,7 +419,7 @@ export class KupForm {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h(Host, { key: '68a9e2e5b9c07904b53b265235b6c2b4fe9590e5' }, h("style", { key: '16282a283ab8f5a848c5675b0b27f2437b57f542' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b37f1997e8891928f5a3d765b90bcc82c965aeb2', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: 'a97811d53f4ed45ced27c021e1cf164f093b04d2' }, h("style", { key: '5531da216461ca36e3efb0f0a365517eb8494d64' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '50e19a44c0be7805bf35215fbc079924178458f9', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

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

@@ -69,7 +69,7 @@ export class KupHTM {
     render() {
         var _a;
         const isLink = __classPrivateFieldGet(this, _KupHTM_instances, "m", _KupHTM_isObjectCompatibleWithHTM).call(this, (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a.obj);
-        return (h(Host, { key: '5a79767bda05f81fbfa3b44c06592ce9d338c859' }, h("style", { key: '4977d1d9a029a0669695ac206ecbd306b467cf21' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'f8e7cdc3e1992853c090f3204fed1a0de76b904b', id: componentWrapperId }, h("div", { key: '0c6724dc5d6c2b8f53ca7573424aab59adbcf6a4', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("a", { href: this.data.value, target: "_blank", rel: "noopener noreferrer" }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB)), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
+        return (h(Host, { key: '5fd7a24633313c182200d98e795cd27938bdd0ed' }, h("style", { key: '283f61604341bc317f9eece1bacdfd6f394d73b6' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2e35f4c034756925be450b15a14b54acd3e496fa', id: componentWrapperId }, h("div", { key: 'a7372f43ada38738eb4134e8feaade2c9db14c13', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("a", { href: this.data.value, target: "_blank", rel: "noopener noreferrer" }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB)), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.unregister(this);

package/dist/collection/components/kup-image-list/kup-image-list.css

@@ -294,6 +294,10 @@
 .image-list__item:hover {
   background-color: var(--kup_imagelist_item_background_color_hover);
 }
+.image-list__item--active {
+  background-color: rgba(var(--kup_imagelist_primary_color_rgb), 0.15);
+  color: var(--kup_imagelist_primary_color);
+}
 .image-list__image.f-image {
   position: absolute;
   padding: var(--kup-space-03);

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -69,6 +69,7 @@ export class KupImageList {
         _KupImageList_interactableTouch.set(this, []);
         this.currentNode = null;
         this.navigationBarToggled = false;
+        this.activeSelectedNode = null;
         this.columns = [];
         this.customStyle = '';
         this.data = [];
@@ -78,6 +79,8 @@ export class KupImageList {
         this.stateId = '';
         this.store = undefined;
         this.showFullDescription = false;
+        this.leadingLabel = null;
+        this.activeNode = undefined;
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
@@ -110,6 +113,9 @@ export class KupImageList {
         }
         this.currentNode = __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.find(this.data, newData);
     }
+    watchActiveNode(newNode) {
+        this.activeSelectedNode = newNode !== null && newNode !== void 0 ? newNode : null;
+    }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -138,9 +144,11 @@ export class KupImageList {
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
     componentWillLoad() {
+        var _a;
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.register(this);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.register(this);
+        this.activeSelectedNode = (_a = this.activeNode) !== null && _a !== void 0 ? _a : null;
     }
     componentDidLoad() {
         __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_didLoadInteractables).call(this);
@@ -200,14 +208,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: 'ca040281aa4d992d8d6efaa3e294e4cc5e06f95a' }, h("style", { key: '433ac510a032fef1a28de7a19cc725338f12ed18' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '09711dbe9475c429a0b87f08c4f95d33dc0a2387', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'ea207d793c3a9810a262f2f307451cc05c8f05c2' }, h("style", { key: '35dfe806784efd59f7e54ad3dd5808c3b441656b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '0fe6b33096bb41c05f7e4fc9adad1f6c7140e086', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: 'fa65e7bfd83e21146e71c9889cf08849cccc1479', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '6b7576d25b6a19b7316b97d8745a3690d2a649bc', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: 'e8348ec6cfc974859f45548e1bb156032dda8d2d', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: '74521e394aed3145d3a134bf2e5939ce9c8561cc', class: "mdc-text-field__label-container" }, h("label", { key: '247b7c52c6e3e590e15933e4a4fd2186b7bd9e64', class: "mdc-label" }, this.leadingLabel))), h("div", { key: 'f6c424c22bb28fe016184529d6023f42e2f8dc00', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
@@ -419,13 +427,59 @@ export class KupImageList {
                 "attribute": "show-full-description",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "leadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "When present component will have a main label."
+                },
+                "attribute": "leading-label",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "activeNode": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupImageListDataNode",
+                    "resolved": "KupImageListDataNode",
+                    "references": {
+                        "KupImageListDataNode": {
+                            "location": "import",
+                            "path": "./kup-image-list-declarations",
+                            "id": "src/components/kup-image-list/kup-image-list-declarations.ts::KupImageListDataNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "When present component will have an active class on node selected."
+                }
             }
         };
     }
     static get states() {
         return {
             "currentNode": {},
-            "navigationBarToggled": {}
+            "navigationBarToggled": {},
+            "activeSelectedNode": {}
         };
     }
     static get events() {
@@ -581,6 +635,9 @@ export class KupImageList {
         return [{
                 "propName": "selectedNode",
                 "methodName": "selectNode"
+            }, {
+                "propName": "activeNode",
+                "methodName": "watchActiveNode"
             }];
     }
 }
@@ -593,6 +650,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     }
     return somethingChanged;
 }, _KupImageList_createItem = function _KupImageList_createItem(node) {
+    var _a, _b, _c;
     const props = {
         fit: true,
         resource: node.icon,
@@ -603,9 +661,9 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     };
     const image = h(FImage, Object.assign({}, props));
     const label = h("div", { class: "image-list__label" }, node.value);
-    const hasExternalResource = props.resource.indexOf('.') > -1 ||
-        props.resource.indexOf('/') > -1 ||
-        props.resource.indexOf('\\') > -1;
+    const hasExternalResource = ((_a = props.resource) === null || _a === void 0 ? void 0 : _a.indexOf('.')) > -1 ||
+        ((_b = props.resource) === null || _b === void 0 ? void 0 : _b.indexOf('/')) > -1 ||
+        ((_c = props.resource) === null || _c === void 0 ? void 0 : _c.indexOf('\\')) > -1;
     return (h(FCell, { cell: {
             value: node.value,
             icon: node.icon,
@@ -614,6 +672,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
             cssClass: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.cell.getObjectRelatedStyleClasses(node.obj, node.cssClass),
         }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: `image-list__wrapper${hasExternalResource ? ' images' : ''}` }, !hasExternalResource && (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 24 24" })), image, label)));
 }, _KupImageList_createList = function _KupImageList_createList() {
+    var _a;
     const nodes = [];
     const items = this.currentNode ? this.currentNode.children : this.data;
     for (let index = 0; items && index < items.length; index++) {
@@ -621,6 +680,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
         const classObj = {
             'image-list__item': true,
             'mdc-ripple-surface': this.ripple ? true : false,
+            'image-list__item--active': ((_a = this.activeSelectedNode) === null || _a === void 0 ? void 0 : _a.value) === node.value,
         };
         const item = (h("div", { onContextMenu: (e) => {
                 e.preventDefault();
@@ -679,6 +739,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
                     if (((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                         this.currentNode = node;
                     }
+                    this.activeSelectedNode = node;
                     this.kupClick.emit({
                         comp: this,
                         id: this.rootElement.id,

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

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_skipRenderField, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_ImageListAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -35,6 +35,7 @@ import { FLabel } from "../../f-components/f-label/f-label";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
 import { FTypography } from "../../f-components/f-typography/f-typography";
 import { FTypographyType } from "../../f-components/f-typography/f-typography-declarations";
+import { UseAsValue, } from "../../managers/kup-data/kup-data-declarations";
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { KupPointerEventTypes } from "../../managers/kup-interact/kup-interact-declarations";
 import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
@@ -248,7 +249,7 @@ export class KupInputPanel {
                 h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
             ]
             : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
-        return (h(Host, { key: 'b1133efe7244cc661038684eaf17e4703b9534d1', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
+        return (h(Host, { key: '0347e85caa65bc2cbbab726ebec3c14a89957e09', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
                 this.tabSelected = e.detail.node.id;
             }, "onKup-autocomplete-input": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-autocomplete-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-combobox-iconclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).call(this, e, true), "onKup-cell-itemclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.ITEMCLICK), "onKup-objectfield-searchpayload": (e) => {
                 this.kupInputPanelObjectFieldSearchPayload.emit(e.detail);
@@ -256,7 +257,7 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '9427c673b6350b14496c77211089da3e6addbbf3' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '35e45b29284732303c817997dcd0888e615453aa', id: componentWrapperId }, inputPanelContent)));
+            } }, h("style", { key: 'cb11bd3c5747ec2796be74a5e5248ac6efe8c88a' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '50ea1fafbda4e62b01806ff02b07dc8e33c174d4', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -909,7 +910,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     let rowContent;
     if (!((_a = layout === null || layout === void 0 ? void 0 : layout.sections) === null || _a === void 0 ? void 0 : _a.length)) {
         rowContent = inputPanelCell.cells
-            .filter(({ column }) => column.visible)
+            .filter(({ column }) => column.visible !== false)
             .map((cell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, cell.cell, inputPanelCell.row, cell.column));
     }
     else {
@@ -1189,9 +1190,11 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     });
     const tabCustomStyle = '.tab-bar .tab-scroller .tab .tab__content { justify-content: flex-start; }';
     return (h("div", { class: { 'input-panel__tabs_container': true } }, h("kup-tab-bar", { data: tabNodes, customStyle: tabCustomStyle }), sectionContent));
+}, _KupInputPanel_skipRenderField = function _KupInputPanel_skipRenderField(fieldCell) {
+    return (!fieldCell || !fieldCell.cell || fieldCell.column.visible === false);
 }, _KupInputPanel_renderField = function _KupInputPanel_renderField(cells, field) {
     const fieldCell = cells.cells.find((cell) => cell.column.name === field.id);
-    if (!fieldCell || !fieldCell.cell || !fieldCell.column.visible) {
+    if (__classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_skipRenderField).call(this, fieldCell)) {
         return;
     }
     const colSpan = +field.colSpan > 0
@@ -1218,7 +1221,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     return (h("div", { style: styleObj }, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, fieldCell.cell, cells.row, fieldCell.column)));
 }, _KupInputPanel_renderAbsoluteField = function _KupInputPanel_renderAbsoluteField(cells, field, absoluteTblPositioningData) {
     const fieldCell = cells.cells.find((cell) => cell.column.name === field.id);
-    if (!fieldCell || !fieldCell.cell || !fieldCell.column.visible) {
+    if (__classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_skipRenderField).call(this, fieldCell)) {
         return;
     }
     let length;
@@ -1309,7 +1312,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }));
     this.inputPanelCells = inpuPanelCells;
 }, _KupInputPanel_setData = function _KupInputPanel_setData(cell, column, layout) {
-    const defaultProps = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column, layout)), { disabled: !cell.isEditable, id: column.name });
+    const defaultProps = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column, layout)), { disabled: !cell.isEditable || column.useAs === UseAsValue.KEY, id: column.name });
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
     const _a = cell.data || {}, { data } = _a, noDataProps = __rest(_a, ["data"]);
     return cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
@@ -1390,6 +1393,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         [FCellTypes.SWITCH, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_SWTAdapter).bind(this)],
         [FCellTypes.TABLE, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_DataTableAdapter).bind(this)],
         [FCellTypes.TIME, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_TimeAdapter).bind(this)],
+        [FCellTypes.IMAGE_LIST, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_ImageListAdapter).bind(this)],
     ]);
     const adapter = dataAdapterMap.get(cellType);
     return adapter
@@ -1490,6 +1494,12 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         label: fieldLabel || ' ',
         value: currentValue || '',
     };
+}, _KupInputPanel_ImageListAdapter = function _KupInputPanel_ImageListAdapter(_options, fieldLabel, currentValue) {
+    return {
+        initialValue: currentValue || '',
+        leadingLabel: fieldLabel || '',
+        value: currentValue || '',
+    };
 }, _KupInputPanel_TimeAdapter = function _KupInputPanel_TimeAdapter(_options, fieldLabel, currentValue) {
     return {
         data: {
@@ -1612,7 +1622,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
 }, _KupInputPanel_getAutocompleteEventCallback = function _KupInputPanel_getAutocompleteEventCallback(detail, cell) {
     this.optionsHandler(cell.fun, detail.inputValue, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this), detail.id).then((options) => {
         var _a, _b, _c, _d, _e, _f;
-        const visibleColumns = ((_a = options === null || options === void 0 ? void 0 : options.columns) === null || _a === void 0 ? void 0 : _a.filter((col) => (col === null || col === void 0 ? void 0 : col.visible) || !('visible' in col)).map((col) => col.name)) || [];
+        const visibleColumns = ((_a = options === null || options === void 0 ? void 0 : options.columns) === null || _a === void 0 ? void 0 : _a.filter((col) => (col === null || col === void 0 ? void 0 : col.visible) !== false).map((col) => col.name)) || [];
         const filteredRows = (_b = options === null || options === void 0 ? void 0 : options.rows) === null || _b === void 0 ? void 0 : _b.map((row) => {
             const { cells } = row;
             const filteredCells = visibleColumns.reduce((acc, columnName) => {

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

@@ -108,39 +108,39 @@ export class KupLazy {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '3d3f813296d36cdcd7d173d9f436e0d552a0673b', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '23e46931d75401379ce83357a9c343c7c720acfd', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: '5c5d09e1114809cae5e4d04d2810fcbe38919665', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ef0cc102b4f61b6cb0b6a11b990d8a683d3dadbb', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: '31f0e5169cd260697da6edd1c763db915b8153cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '65ac92668eb2914e838b8333f7db8b863f500435', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '08418ea5f354cd9703db966a32ba3a2bde766474', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '8575071216916dbd3994f778e3811762c4b1ba14', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: 'e969df1de6bddaad47c745033e6c67f3cd155067', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '32a60569f176c7e0bda2577c5f28116e6102741f', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: '830ea284f7a58f781306f46dbe30917cf24f953f', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd76171580d775362c392e3ad8fc00370f9ab7b2f', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '3990a3b5027d15ba60962352f011efc0bc0bdbc8', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'c745d3d21ce3dcc2f6eae81c558cdfb9ddf7856c', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '81b641d30123794bacaecc19a99f4ec544c84a8e', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '175cb426d36b630d55bcc637d3d5b7e54ce4cede', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '39530590dd10736009c375b5f21e8a62b9e9bb6e', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '929b9d6f5a883ae75056635152b971f41b4f7fab', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: '15f07a20fc21b25f6faad4a2a7f5afa3b38a1914', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '8880c4646eb4d39529164b920b6c06f6ca9d574c', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: 'e0352a356d272be14bbb79539526c0cb72ffcea1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'c2743da82c65cc5a8a8238dda4bbd79a07a4f7e6', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: 'a43bbf16254b87ba99dcd0380fb6dd48d459587e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '37fe8e3e880ad99cd2ce8699062ea7aaf20b8e2e', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: '490fc3794bf51a697a165784e7c2f3e208e0fb24', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd6fe5a4e35eb39076669fff9027bc300ac0ea7a9', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: '3f24c39011fcb687a3ab2887020ed239e66f4127', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '42289a40edc167d2ddb4b99cd80c1343c9904142', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: 'ddaca4167f0df39ff99c2eedf51da43e11daa217', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f1277d43c4b879169ef89e57f3212adc3bd1673b', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: '8031d9825c3efdfc622b2026309c499b31619be2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '60b60ed680daf4a6bfcfca0c1ce55debbff62235', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: 'bac4baf6a31b7f455fb1ec4875c2d01109a136cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '6766752680a0ece7a570ae86cb7ea7451b2f6768', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '24bc59869d647844dcbe9f24acd37c661c8dcffd', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '29f284cbe18ac03051367321466d2e369860c66e', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -149,14 +149,14 @@ export class KupLazy {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'c0d1463f2f6d7abde1954aed56c87727966a421b' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: '1a843ca9f51d0686f5db923cbfbfbeac4c200105' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: '71c1a3aec26a79f50340cb14cf92f79fedd590a1', class: className }, h("style", { key: '41231e59fd53a143644414d9dc15e4be2c7b4715' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '210ea58d84ae6f3ecf2a224cb5e65f74e1b1469f', id: componentWrapperId }, content)));
+        return (h(Host, { key: 'd150ddb67a168132fc8127e310f628acc9387cce', class: className }, h("style", { key: '572fb2b794e42339a3d85dc7df73bb59829a4c23' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e355c76efbd00ed487c8f1d20e3ea1de360e93ec', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;