@sme.up/ketchup 9.6.2 → 9.6.4

package/dist/components/kup-grid2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, P as KupDebugCategory } from './kup-manager.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, o as KupDebugCategory } from './kup-manager.js';
 import { c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r } from './kup-autocomplete2.js';
 
 /**
@@ -13,7 +13,7 @@ var KupGridProps;
     KupGridProps["singleLine"] = "When set to true, forces the content on a single line.";
 })(KupGridProps || (KupGridProps = {}));
 
-const kupGridCss = ":host{--kup_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);display:block;font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{box-sizing:border-box;display:flex;justify-content:center;margin:0px;width:auto}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 8), minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 4), minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}:host(.kup-full-width.scalable-cards) .flex-layout__inner{width:100%}:host(.kup-full-width.scalable-cards) .flex-layout__inner *{margin:0;height:100%;width:100%}";
+const kupGridCss = ".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_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);display:block;font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{box-sizing:border-box;display:flex;justify-content:center;margin:0px;width:auto}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 8), minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 4), minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}:host(.kup-full-width.scalable-cards) .flex-layout__inner{width:100%}:host(.kup-full-width.scalable-cards) .flex-layout__inner *{margin:0;height:100%;width:100%}";
 const KupGridStyle0 = kupGridCss;
 
 const KupGrid = /*@__PURE__*/ proxyCustomElement(class KupGrid extends HTMLElement {

package/dist/components/kup-horizontal-scroll2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const kupHorizontalScrollCss = ".scrollWrapper{overflow:auto;max-width:100%;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}";
+const kupHorizontalScrollCss = ".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}.scrollWrapper{overflow:auto;max-width:100%;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}";
 const KupHorizontalScrollStyle0 = kupHorizontalScrollCss;
 
 const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll extends HTMLElement {
@@ -38,11 +38,11 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
     render() {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
-        return (h("div", { key: '6900ce2b4ff33f7f48403c085861d25d8a55ae51', dir: "ltr", style: {
+        return (h("div", { key: 'a560e1597e9122df0d98d0508ace8ec5c04a5513', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px ${w}px 0px 12px`
                     : `0px 12px 0px ${w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd5cd1e9ec9d4dc2a1c249eef3c485dc3eb9f82ad', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd1f0693a7a2f4ae545d48c0708f91770c1fee717', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
     }
     get rootElement() { return this; }
     static get watchers() { return {

package/dist/components/kup-iframe.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, P as KupDebugCategory } from './kup-manager.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, o as KupDebugCategory } from './kup-manager.js';
 import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s } from './kup-autocomplete2.js';
 
 /**
@@ -13,7 +13,7 @@ var KupIframeProps;
     KupIframeProps["src"] = "The address the iframe should be referencing to.";
 })(KupIframeProps || (KupIframeProps = {}));
 
-const kupIframeCss = "iframe{box-sizing:border-box;height:100%;width:100%}:host([is-iframe]){box-sizing:border-box;display:block;height:100%;width:100%}";
+const kupIframeCss = ".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}iframe{box-sizing:border-box;height:100%;width:100%}:host([is-iframe]){box-sizing:border-box;display:block;height:100%;width:100%}";
 const KupIframeStyle0 = kupIframeCss;
 
 const KupIframe$1 = /*@__PURE__*/ proxyCustomElement(class KupIframe extends HTMLElement {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as KupLanguageGeneric, o as FCellPadding } from './kup-manager.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as KupLanguageGeneric, X as KupPointerEventTypes, p as FCellPadding } from './kup-manager.js';
 import { a3 as FButtonStyling, M as MDCRipple, c as componentWrapperId, F as FImage, R as FButton, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, J as FCell } from './kup-autocomplete2.js';
 
 /**
@@ -8,9 +8,11 @@ import { a3 as FButtonStyling, M as MDCRipple, c as componentWrapperId, F as FIm
  */
 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 {
@@ -23,7 +25,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) {
@@ -42,7 +44,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$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList extends HTMLElement {
     constructor() {
         super();
@@ -62,7 +64,6 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
         /**
          * Instance of the KupManager class.
          */
-        this.kupManager = kupManagerInstance();
         _KupImageList_clickTimeout.set(this, []);
         _KupImageList_kupManager.set(this, kupManagerInstance());
         _KupImageList_backProps.set(this, {
@@ -85,11 +86,16 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
             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;
@@ -99,7 +105,7 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
             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);
             }
         }
     }
@@ -107,7 +113,7 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
         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;
             }
@@ -120,35 +126,6 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
             }
         }
     }
-    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                */
     /*-------------------------------------------------*/
@@ -156,7 +133,7 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
         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           */
@@ -191,6 +168,7 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
         __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() {
@@ -213,14 +191,28 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
     }
     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);
     }
@@ -230,9 +222,11 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
     }; }
     static get style() { return KupImageListStyle0; }
 }, [1, "kup-image-list", {
+        "columns": [2],
         "customStyle": [1, "custom-style"],
         "data": [16],
         "ripple": [4],
+        "rows": [2],
         "selectedNode": [16],
         "stateId": [1, "state-id"],
         "store": [16],
@@ -244,12 +238,13 @@ const KupImageList$1 = /*@__PURE__*/ proxyCustomElement(class KupImageList exten
     }, undefined, {
         "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);
@@ -263,12 +258,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);
 };
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/kup-input-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface KupInputPanel extends Components.KupInputPanel, HTMLElement {}
+export const KupInputPanel: {
+    prototype: KupInputPanel;
+    new (): KupInputPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;