@sme.up/ketchup 9.6.2 → 9.6.4

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-bbef9f2a.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, e as FCellPadding } from './kup-manager-8b39f876.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, M as KupPointerEventTypes, e as FCellPadding } from './kup-manager-dd24fb5a.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import { F as FImage } from './f-image-5210f0b3.js';
-import { F as FButton } from './f-button-90a7ea86.js';
+import { F as FImage } from './f-image-1e1ed567.js';
+import { F as FButton } from './f-button-1eebd42e.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
-import { F as FCell } from './f-cell-fdd338c5.js';
+import { F as FCell } from './f-cell-af19d5c7.js';
 import { M as MDCRipple } from './component-879e99bf.js';
-import './kup-dates-172954df.js';
-import './f-checkbox-fdf27ce9.js';
-import './f-text-field-8429a853.js';
-import './f-chip-4e6341a6.js';
+import './kup-dates-26a56bf7.js';
+import './f-checkbox-ddb6234e.js';
+import './f-text-field-802b45fb.js';
+import './f-chip-9e5fdb25.js';
 
 /**
  * Props of the kup-image-list component.
@@ -17,9 +17,11 @@ import './f-chip-4e6341a6.js';
  */
 var KupImageListProps;
 (function (KupImageListProps) {
+    KupImageListProps["columns"] = "Can set a specific number of columns";
     KupImageListProps["customStyle"] = "Custom style of the component.";
     KupImageListProps["data"] = "Actual data of the component";
     KupImageListProps["ripple"] = "When enabled displays Material's ripple effect on clicked items.";
+    KupImageListProps["rows"] = "Cam set a specific number of rows. It overwrite the columns flow into rows flow";
 })(KupImageListProps || (KupImageListProps = {}));
 
 class KupImageListState {
@@ -32,7 +34,7 @@ class KupImageListState {
     }
 }
 
-const kupImageListCss = ":host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, 0.5em);--kup_imagelist_image_margin:var(--kup-imagelist-image-margin, 1em auto);--kup_imagelist_image_min_height:var(--kup-imagelist-image-min-height, 64px);--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    8px\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-text-color)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{font-size:1.2em;font-weight:bold;letter-spacing:0.12em;overflow:hidden;padding:0 0.5em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%}.image-list .f-cell{height:100%;width:100%}.image-list__item{border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__image.f-image{margin:var(--kup_imagelist_image_margin)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{color:var(--kup_imagelist_text_color);letter-spacing:0.12em;margin:var(--kup_imagelist_label_margin);overflow:hidden;text-align:center;text-overflow:ellipsis}.image-list .mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.image-list .mdc-ripple-surface:before,.image-list .mdc-ripple-surface:after{background-color:var(--kup_imagelist_primary_color)}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";
+const kupImageListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, 0.5em);--kup_imagelist_image_min_height:var(\n    --kup-imagelist-image-min-height,\n    var(--kup-space-09)\n  );--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    var(--kup-radius-00)\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-gray-color-70)\n  );--kup_imagelist_item_background_color:var(\n    --kup-imagelist-item-background-color,\n    var(--kup-gray-color-10)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%;grid-auto-flow:row}.image-list .f-cell{height:100%;width:100%}.image-list .f-cell .f-cell__content .image-list__wrapper{padding:var(--kup-space-03) var(--kup-space-02)}.image-list__item{background-color:var(--kup_imagelist_item_background_color);border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__item:hover{background-color:var(--kup-gray-color-20)}.image-list__image.f-image{margin-bottom:var(--kup-space-03)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";
 const KupImageListStyle0 = kupImageListCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -51,7 +53,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_createItem, _KupImageList_createList;
+var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_el, _KupImageList_hold, _KupImageList_interactableTouch, _KupImageList_createItem, _KupImageList_createList, _KupImageList_getEventDetails, _KupImageList_clickHandler, _KupImageList_contextMenuHandler, _KupImageList_dblClickHandler, _KupImageList_didLoadInteractables;
 const KupImageList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -69,7 +71,6 @@ const KupImageList = class {
         /**
          * Instance of the KupManager class.
          */
-        this.kupManager = kupManagerInstance();
         _KupImageList_clickTimeout.set(this, []);
         _KupImageList_kupManager.set(this, kupManagerInstance());
         _KupImageList_backProps.set(this, {
@@ -92,11 +93,16 @@ const KupImageList = class {
             styling: FButtonStyling.FLAT,
             wrapperClass: 'navigation-bar__top',
         });
+        _KupImageList_el.set(this, void 0);
+        _KupImageList_hold.set(this, false);
+        _KupImageList_interactableTouch.set(this, []);
         this.currentNode = null;
         this.navigationBarToggled = false;
+        this.columns = 4;
         this.customStyle = '';
         this.data = [];
         this.ripple = true;
+        this.rows = null;
         this.selectedNode = [];
         this.stateId = '';
         this.store = undefined;
@@ -106,7 +112,7 @@ const KupImageList = class {
             const state = this.store.getState(this.stateId);
             if (state != null) {
                 this.currentNode =
-                    this.kupManager.data.node.findByStrTreeNodePath(this.data, state.selectedTreeNodePath);
+                    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.findByStrTreeNodePath(this.data, state.selectedTreeNodePath);
             }
         }
     }
@@ -114,7 +120,7 @@ const KupImageList = class {
         if (this.store && this.stateId) {
             let somethingChanged = false;
             let cNodeRowId = this.currentNode ? this.currentNode.id : '';
-            if (!this.kupManager.objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
+            if (!__classPrivateFieldGet(this, _KupImageList_kupManager, "f").objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
                 this.state.selectedTreeNodePath = cNodeRowId;
                 somethingChanged = true;
             }
@@ -127,35 +133,6 @@ const KupImageList = class {
             }
         }
     }
-    onKupClick(node) {
-        if (node.children && node.children.length > 0) {
-            this.currentNode = node;
-        }
-        this.kupClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
-    onKupContextMenu(e, node) {
-        e.preventDefault();
-        this.kupContextMenu.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
-    onKupDblClick(node) {
-        for (let index = 0; index < __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").length; index++) {
-            clearTimeout(__classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index]);
-        }
-        __classPrivateFieldSet(this, _KupImageList_clickTimeout, [], "f");
-        this.kupDblClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            node: node,
-        });
-    }
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
@@ -163,7 +140,7 @@ const KupImageList = class {
         if (!newData || newData.length == 0) {
             return;
         }
-        this.currentNode = this.kupManager.data.node.find(this.data, newData);
+        this.currentNode = __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.find(this.data, newData);
     }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
@@ -198,6 +175,7 @@ const KupImageList = class {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.register(this);
     }
     componentDidLoad() {
+        __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_didLoadInteractables).call(this);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logLoad(this, true);
     }
     componentWillRender() {
@@ -220,14 +198,28 @@ const KupImageList = class {
     }
     render() {
         const hasNavigation = !!this.currentNode;
-        return (h(Host, { key: '94b709d607d3478d8572765bb4d9f332fc8f3287' }, h("style", { key: 'c861fd2f928f0ccfb201d28fe2de8fbe895f11cf' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '783c35aa4b598e4dc281dfe58720ef1dfed57bec', id: componentWrapperId }, h("div", { key: 'dd7b1310596456aa8ae775c29937197fcab50c49', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+        const gridColumnsStyle = {
+            'grid-template-columns': `repeat(${this.columns}, minmax(0px, 1fr))`,
+        };
+        let combinedGridStyle = Object.assign({}, gridColumnsStyle);
+        if (this.rows != null && this.rows > 0) {
+            const gridRowsStyle = {
+                'grid-template-rows': `repeat(${this.rows}, minmax(0px, 1fr))`,
+                'grid-auto-flow': `column`,
+            };
+            combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
+        }
+        return (h(Host, { key: '86c391c4a1e0c507dc0c07971aa90e6f7091bc95' }, h("style", { key: '99f966c6cd10aac991c99b4badca0a6cff1dbf5b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e4eaa257a47cabcb34a412f56d736cd77fbc97af', id: componentWrapperId, ref: (el) => {
+                __classPrivateFieldSet(this, _KupImageList_el, el, "f");
+            } }, h("div", { key: '48ff34cbb307b0ab49ca3b8ed240f0510e674e93', 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, 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: '13a2d026cab95a4da2c0fde2a0af8f4f6827fdb9', class: "image-list" }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, 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: '97ac20f9d893c131c03adc953e78435bb062f137', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.unregister(this);
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.unregister(this);
     }
@@ -236,12 +228,13 @@ const KupImageList = class {
         "selectedNode": ["selectNode"]
     }; }
 };
-_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
+_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_el = new WeakMap(), _KupImageList_hold = new WeakMap(), _KupImageList_interactableTouch = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
     const props = {
         fit: true,
         resource: node.icon,
         title: node.title,
         wrapperClass: 'image-list__image',
+        badgeData: node.badgeData,
     };
     const image = h(FImage, Object.assign({}, props));
     const label = h("div", { class: "image-list__label" }, node.value);
@@ -255,12 +248,107 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
             'image-list__item': true,
             'mdc-ripple-surface': this.ripple ? true : false,
         };
-        const item = (h("div", { onClick: () => {
-                __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").push(setTimeout(() => this.onKupClick(node), 300));
-            }, onContextMenu: (e) => this.onKupContextMenu(e, node), onDblClick: () => this.onKupDblClick(node), class: classObj }, __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createItem).call(this, node)));
+        const item = (h("div", { onContextMenu: (e) => {
+                e.preventDefault();
+            }, class: classObj }, __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createItem).call(this, node)));
         nodes.push(item);
     }
     return nodes;
+}, _KupImageList_getEventDetails = function _KupImageList_getEventDetails(path, e) {
+    let cellProps;
+    if (path) {
+        for (let i = path.length - 1; i >= 0; i--) {
+            let p = path[i];
+            if (!p.tagName) {
+                continue;
+            }
+            if (p.classList.contains('f-cell')) {
+                cellProps = p['kup-get-cell-props']();
+            }
+        }
+    }
+    return {
+        cell: cellProps === null || cellProps === void 0 ? void 0 : cellProps.cell,
+        column: cellProps === null || cellProps === void 0 ? void 0 : cellProps.column,
+        originalEvent: e,
+        row: cellProps === null || cellProps === void 0 ? void 0 : cellProps.row,
+    };
+}, _KupImageList_clickHandler = function _KupImageList_clickHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_contextMenuHandler = function _KupImageList_contextMenuHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_dblClickHandler = function _KupImageList_dblClickHandler(e) {
+    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_getEventDetails).call(this, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+    return details;
+}, _KupImageList_didLoadInteractables = function _KupImageList_didLoadInteractables() {
+    __classPrivateFieldGet(this, _KupImageList_interactableTouch, "f").push(__classPrivateFieldGet(this, _KupImageList_el, "f"));
+    const tapCb = (e) => {
+        if (__classPrivateFieldGet(this, _KupImageList_hold, "f")) {
+            __classPrivateFieldSet(this, _KupImageList_hold, false, "f");
+            return;
+        }
+        switch (e.button) {
+            // left click
+            case 0:
+                // Note: event must be cloned
+                // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+                const clone = {};
+                for (const key in e) {
+                    clone[key] = e[key];
+                }
+                __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").push(setTimeout(() => {
+                    const details = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_clickHandler).call(this, clone);
+                    const node = details.row;
+                    if (node.children && node.children.length > 0) {
+                        this.currentNode = node;
+                    }
+                    this.kupClick.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        details,
+                    });
+                }, 300));
+                break;
+            // right click
+            case 2:
+                this.kupContextMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_contextMenuHandler).call(this, e),
+                });
+                break;
+        }
+    };
+    const doubletapCb = (e) => {
+        switch (e.button) {
+            // left click
+            case 0:
+                for (let index = 0; index < __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f").length; index++) {
+                    clearTimeout(__classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index]);
+                    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logMessage(this, 'Cleared clickHandler timeout(' +
+                        __classPrivateFieldGet(this, _KupImageList_clickTimeout, "f")[index] +
+                        ').');
+                }
+                __classPrivateFieldSet(this, _KupImageList_clickTimeout, [], "f");
+                this.kupDblClick.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_dblClickHandler).call(this, e),
+                });
+                break;
+        }
+    };
+    const holdCb = (e) => {
+        if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+            __classPrivateFieldSet(this, _KupImageList_hold, true, "f");
+        }
+    };
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.TAP, tapCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
 };
 KupImageList.style = KupImageListStyle0;
 

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

@@ -0,0 +1,294 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, a3 as FCellTypes } from './kup-manager-dd24fb5a.js';
+import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
+import { F as FButton } from './f-button-1eebd42e.js';
+import { F as FTextFieldMDC } from './f-text-field-mdc-c88bf688.js';
+import { F as FCell } from './f-cell-af19d5c7.js';
+import './kup-dates-26a56bf7.js';
+import './f-button-declarations-9bdc6f26.js';
+import './f-image-1e1ed567.js';
+import './component-879e99bf.js';
+import './f-checkbox-ddb6234e.js';
+import './f-text-field-802b45fb.js';
+import './f-chip-9e5fdb25.js';
+
+var KupInputPanelProps;
+(function (KupInputPanelProps) {
+    KupInputPanelProps["customStyle"] = "Custom style of the component.";
+    KupInputPanelProps["data"] = "Actual data of the input panel.";
+    KupInputPanelProps["hiddenSubmitButton"] = "Creates a hidden submit button in order to submit the form with enter.";
+    KupInputPanelProps["submitCb"] = "Sets the callback function on submit form";
+    KupInputPanelProps["valueChangeCb"] = "Sets the callback function on value change event";
+})(KupInputPanelProps || (KupInputPanelProps = {}));
+
+const kupInputPanelCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}";
+const KupInputPanelStyle0 = kupInputPanelCss;
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_mapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter;
+const dom = document.documentElement;
+const KupInputPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.kupReady = createEvent(this, "kup-input-panel-ready", 6);
+        _KupInputPanel_instances.add(this);
+        //#endregion
+        //#region VARIABLES
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupInputPanel_kupManager.set(this, kupManagerInstance());
+        this.customStyle = '';
+        this.data = null;
+        this.hiddenSubmitButton = false;
+        this.submitCb = null;
+        this.handleEventsCallbacks = [];
+        this.inputPanelCells = [];
+    }
+    //#endregion
+    //#region WATCHERS
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    onDataChanged() {
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
+    }
+    //#endregion
+    //#region PUBLIC METHODS
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupInputPanelProps, descriptions);
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupInputPanelProps, props);
+    }
+    //#endregion
+    //#region LIFECYCLE HOOKS
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.register(this);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.register(this);
+        this.onDataChanged();
+    }
+    componentDidLoad() {
+        this.kupReady.emit({ comp: this, id: this.rootElement.id });
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logLoad(this, true);
+        this.handleEventsCallbacks.map((cbData) => {
+            this.rootElement.addEventListener(cbData.eventName, (e) => {
+                const inputPanelEvent = {
+                    state: this.inputPanelCells.find((data) => data.cells.find((cell) => cell.column.name === e.detail.id)).cells,
+                    data: {
+                        field: e.detail.id,
+                        value: e.detail.inputValue || e.detail.value,
+                    },
+                };
+                cbData.eventCallback(inputPanelEvent);
+            });
+        });
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            const fs = root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        const isEmptyData = Boolean(!this.inputPanelCells.length);
+        const inputPanelContent = isEmptyData
+            ? [
+                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: '47b1cbfae920b48873c3c5c5629ed1d9f4ac7290' }, h("style", { key: 'd48cfa1e1f470e9b991745ef30ebc236c6399b98' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '257d3d98795b32e59abee2c5aa8be341880f37be', id: componentWrapperId }, inputPanelContent)));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.unregister(this);
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["onDataChanged"]
+    }; }
+};
+_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
+    var _a;
+    // todo layout
+    const horizontal = ((_a = inputPanelCell.row.layout) === null || _a === void 0 ? void 0 : _a.horizontal) || false;
+    const rowContent = inputPanelCell.cells.map((cell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, cell.cell, inputPanelCell.row, cell.column));
+    const classObj = {
+        form: true,
+        'input-panel': true,
+        'form--column': !horizontal,
+    };
+    // We create a form for each row in data
+    return (h("form", { class: classObj, name: this.rootElement.id, onSubmit: this.submitCb }, rowContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
+}, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
+    const cellProps = {
+        cell,
+        column,
+        row,
+        component: this,
+        editable: cell.isEditable,
+        renderKup: true,
+        setSizes: true,
+    };
+    return h(FCell, Object.assign({}, cellProps));
+}, _KupInputPanel_mapCells = function _KupInputPanel_mapCells(data) {
+    var _a;
+    const inpuPanelCells = ((_a = data === null || data === void 0 ? void 0 : data.rows) === null || _a === void 0 ? void 0 : _a.length)
+        ? data.rows.reduce((inpuPanelCells, row) => {
+            const cells = data.columns
+                .filter((column) => column.visible)
+                .map((column) => {
+                const cell = row.cells[column.name];
+                const mappedCell = Object.assign(Object.assign({}, cell), { data: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column)), { id: column.name }), slotData: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_slotData).call(this, cell, column), isEditable: cell.editable });
+                return { column, cell: mappedCell };
+            });
+            return [...inpuPanelCells, { cells, row }];
+        }, [])
+        : [];
+    this.inputPanelCells = inpuPanelCells;
+}, _KupInputPanel_mapData = function _KupInputPanel_mapData(cell, col) {
+    const options = cell.options;
+    const fieldLabel = col.title;
+    const currentValue = cell.value;
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    const dataAdapterMap = new Map([
+        [FCellTypes.AUTOCOMPLETE, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter)],
+        [FCellTypes.BUTTON_LIST, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_BTNAdapter)],
+        [FCellTypes.CHART, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_GRAAdapter)],
+        [FCellTypes.CHIP, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CHIAdapter)],
+        [FCellTypes.CHECKBOX, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CHKAdapter)],
+        [FCellTypes.COLOR_PICKER, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CLPAdapter)],
+        [FCellTypes.COMBOBOX, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter)],
+        [FCellTypes.RADIO, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_RADAdapter)],
+        [FCellTypes.STRING, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_ITXAdapter)],
+    ]);
+    const adapter = dataAdapterMap.get(cellType);
+    return adapter ? adapter(options, fieldLabel, currentValue) : null;
+}, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    if (cellType !== FCellTypes.CHIP &&
+        cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
+        cellType !== FCellTypes.MULTI_COMBOBOX &&
+        !cell.editable) {
+        return null;
+    }
+    return {
+        trailingIcon: true,
+        label: col.title,
+    };
+}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(options, _fieldLabel, currentValue) {
+    return {
+        data: (options === null || options === void 0 ? void 0 : options.length)
+            ? options.map((option) => ({
+                value: option.label,
+                id: option.id,
+                selected: currentValue === option.id,
+            }))
+            : [{ id: currentValue, value: currentValue }],
+    };
+}, _KupInputPanel_GRAAdapter = function _KupInputPanel_GRAAdapter() {
+    //TODO: definire mapping
+    return {
+        data: {
+            sizeX: '50px',
+            offlineMode: {
+                value: '8;4;5',
+            },
+            id: 'i1012_GREF_0',
+            cellId: 'i1012_GREF_0',
+            sizeY: '50px',
+        },
+    };
+}, _KupInputPanel_BTNAdapter = function _KupInputPanel_BTNAdapter(_options, _fieldLabel, _currentValue) {
+    //TODO: come gestire i button list dal protocollo?
+    return {
+        data: [
+            {
+                data: { dropdownOnly: false, label: 'Pier' },
+            },
+            { data: { dropdownOnly: false, label: 'Valerio' } },
+        ],
+    };
+}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(options, fieldLabel, currentValue) {
+    return {
+        data: {
+            'kup-text-field': {
+                trailingIcon: true,
+                label: fieldLabel,
+                icon: 'arrow_drop_down',
+            },
+            'kup-list': {
+                showIcons: true,
+                data: (options === null || options === void 0 ? void 0 : options.length)
+                    ? options.map((option) => ({
+                        value: option.label,
+                        id: option.id,
+                        selected: currentValue === option.id,
+                    }))
+                    : [],
+            },
+        },
+        label: fieldLabel,
+    };
+}, _KupInputPanel_CHKAdapter = function _KupInputPanel_CHKAdapter(_options, fieldLabel, currentValue) {
+    return {
+        checked: currentValue === 'on' || currentValue === '1',
+        label: fieldLabel,
+    };
+}, _KupInputPanel_CLPAdapter = function _KupInputPanel_CLPAdapter(_options, fieldLabel, _currentValue) {
+    return {
+        data: {
+            'kup-text-field': {
+                label: fieldLabel,
+            },
+        },
+    };
+}, _KupInputPanel_ITXAdapter = function _KupInputPanel_ITXAdapter(_options, fieldLabel, _currentValue) {
+    return { label: fieldLabel };
+}, _KupInputPanel_RADAdapter = function _KupInputPanel_RADAdapter(options, _fieldLabel, currentValue) {
+    return {
+        data: options.map((option) => ({
+            value: option.id,
+            label: option.label,
+            checked: option.id === currentValue,
+        })),
+    };
+};
+KupInputPanel.style = KupInputPanelStyle0;
+
+export { KupInputPanel as kup_input_panel };