@sme.up/ketchup 5.2.0-SNAPSHOT → 6.1.0-SNAPSHOT

package/dist/esm/kup-form-editor.entry.js

@@ -0,0 +1,400 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
+import { F as FButton } from './f-button-871a544b.js';
+import { k as kupManagerInstance, h as KupLanguageGeneric, B as KupDragEffect, c as KupDebugCategory } from './kup-manager-58b075b4.js';
+import { g as getProps, s as setProps } from './utils-d7e4b3c2.js';
+import { c as componentWrapperId } from './GenericVariables-665de00a.js';
+import './f-button-declarations-b1b4cac4.js';
+import './f-image-c468d8ae.js';
+
+/**
+ * Props of the kup-form-editor component.
+ * Used to export every prop in an object.
+ */
+var KupFormEditorProps;
+(function (KupFormEditorProps) {
+  KupFormEditorProps["customStyle"] = "Custom style of the component.";
+  KupFormEditorProps["data"] = "The data of the component.";
+})(KupFormEditorProps || (KupFormEditorProps = {}));
+var KupFormEditorDragTypes;
+(function (KupFormEditorDragTypes) {
+  KupFormEditorDragTypes["Components"] = "1";
+  KupFormEditorDragTypes["Sections"] = "2";
+})(KupFormEditorDragTypes || (KupFormEditorDragTypes = {}));
+var KupFormEditorLabels;
+(function (KupFormEditorLabels) {
+  KupFormEditorLabels["Loaded"] = "Loaded";
+  KupFormEditorLabels["Reset"] = "Reset";
+  KupFormEditorLabels["Save"] = "Save";
+  KupFormEditorLabels["Components"] = "Components";
+  KupFormEditorLabels["Sections"] = "Sections";
+  KupFormEditorLabels["Column"] = "Column";
+})(KupFormEditorLabels || (KupFormEditorLabels = {}));
+
+const kupFormEditorCss = ":host{width:100%;height:100%}.header{display:flex;flex-direction:row;justify-content:center}.header>*{margin-left:0.5em}.form{display:grid;grid-gap:0.5em}.form-dropzone{padding:1em;border:1px solid var(--kup-primary-color)}.section{display:flex;flex-direction:column}.section-header{display:flex;flex-direction:column}.section-header>*{width:100%;display:flex;flex-direction:row}.section-header>*>.section-header-actions{display:flex;justify-content:end}.section-header>*>.section-header-actions>*{margin-top:auto;margin-bottom:auto}.section-body{display:grid}.section-dropzone{border:1px solid var(--kup-primary-color);min-height:100px}.section-draggable{border:1px solid var(--kup-secondary-color);padding:1em}.component{height:fit-content;padding:1em;margin:0.5em}.component-draggable{border:1px solid var(--kup-secondary-color)}.layout-row{grid-auto-flow:column;grid-template-columns:min-content}.layout-column{grid-auto-flow:row;grid-template-rows:min-content}";
+
+const KupFormEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.kupSave = createEvent(this, "kup-formeditor-save", 6);
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    /**
+     * Force render component by internal event.
+     */
+    this.resetInternalData = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * The data of the component.
+     * @default false
+     */
+    this.data = null;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    /**
+     * Draggable type of Form (Components or Sections).
+     */
+    this.dragType = KupFormEditorDragTypes.Components;
+    /**
+     * Internal data of the component.
+     */
+    this.internalData = null;
+    /**
+     * Internal data backup of the component for refresh when changed content by drag&drop.
+     */
+    this.internalDataBackup = null;
+  }
+  onKupSave() {
+    this.kupSave.emit({
+      comp: this,
+      id: this.rootElement.id,
+      data: this.internalData,
+    });
+  }
+  /*-------------------------------------------------*/
+  /*                  W a t c h e r s                */
+  /*-------------------------------------------------*/
+  dataChanged() {
+    this.resetData();
+  }
+  /*-------------------------------------------------*/
+  /*           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, KupFormEditorProps, 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, KupFormEditorProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  buildHeader() {
+    const clearButtonProp = {
+      icon: 'cancel',
+      label: KupFormEditorLabels.Reset,
+      secondary: true,
+      onClick: () => {
+        this.resetData();
+      },
+    };
+    const saveButtonProp = {
+      icon: 'save',
+      label: KupFormEditorLabels.Save,
+      onClick: () => this.onKupSave(),
+    };
+    const selRadioProp = [
+      {
+        label: KupFormEditorLabels.Components,
+        value: KupFormEditorDragTypes.Components,
+        checked: this.dragType == KupFormEditorDragTypes.Components,
+      },
+      {
+        label: KupFormEditorLabels.Sections,
+        value: KupFormEditorDragTypes.Sections,
+        checked: this.dragType == KupFormEditorDragTypes.Sections,
+      },
+    ];
+    return (h("div", { class: "header" }, h("kup-radio", { data: selRadioProp, "onKup-radio-change": (ev) => {
+        this.dragType = ev.detail
+          .value;
+        this.resetData(this.internalData);
+      } }), h(FButton, Object.assign({}, clearButtonProp)), h(FButton, Object.assign({}, saveButtonProp))));
+  }
+  buildForm(form, parent) {
+    const classes = {
+      form: true,
+      'layout-column': form && form.layout == 'column',
+      'layout-row': form && form.layout == 'row',
+      'form-dropzone': form &&
+        this.dragType == KupFormEditorDragTypes.Sections &&
+        form.sections != null &&
+        form.sections.length > 0,
+    };
+    return form ? (h("div", { class: classes, ref: (el) => {
+        if (!el)
+          return;
+        const kel = el;
+        kel.kupData = { parent: parent, form: form };
+      } }, form.sections.map((section) => this.buildSection(section, form)))) : (h("div", null, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+  }
+  buildSectionHeader(section, parent) {
+    const addButtonProp = {
+      icon: 'add',
+      slim: true,
+      onClick: () => {
+        if (!section.sections) {
+          section.sections = [];
+        }
+        const newSec = {
+          id: section.id + (section.sections.length + 1),
+          loaded: section.loaded,
+          layout: section.layout,
+          components: [],
+        };
+        if (section.components) {
+          section.components.forEach((x) => newSec.components.push(x));
+          section.components.splice(0);
+        }
+        section.sections.push(newSec);
+        this.resetData(this.internalData);
+      },
+    };
+    const removeButtonProp = {
+      icon: 'remove',
+      slim: true,
+      secondary: true,
+      onClick: () => {
+        const idx = parent.sections.indexOf(section);
+        parent.sections.splice(idx, 1);
+        this.resetData(this.internalData);
+      },
+    };
+    return (h("div", { class: "section-header" }, h("div", null, section.id, ' ', section.dim ? '(' + section.dim + ')' : undefined, " -", ' ', section.layout), h("div", null, h("div", { class: "section-header-actions" }, h("kup-switch", { checked: section.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
+        section.loaded = ev.detail.value == 'on';
+      } }), h("kup-switch", { checked: section.layout == 'column', label: KupFormEditorLabels.Column, "onKup-switch-change": (ev) => {
+        section.layout =
+          ev.detail.value == 'on' ? 'column' : 'row';
+        this.resetData(this.internalData);
+      } }), h(FButton, Object.assign({}, addButtonProp)), h(FButton, Object.assign({}, removeButtonProp)), section.components && section.components.length > 0 ? (h("kup-image", { resource: "widgets", sizeX: "24px", sizeY: "24px" })) : undefined))));
+  }
+  buildSection(section, parent) {
+    const classes = {
+      section: true,
+      'section-draggable': this.dragType == KupFormEditorDragTypes.Sections,
+      'section-dropzone': !section.sections ||
+        section.sections.length == 0 ||
+        this.dragType == KupFormEditorDragTypes.Sections,
+    };
+    const bodyClasses = {
+      'section-body': true,
+      'layout-column': section && section.layout == 'column',
+      'layout-row': section && section.layout == 'row',
+    };
+    let bodyStyles = {};
+    if (section.sections) {
+      let gridTemplate = '';
+      section.sections.forEach((childSection) => {
+        if (!childSection.dim)
+          gridTemplate += ' 1fr';
+        else
+          gridTemplate +=
+            childSection.dim.indexOf('%') < 0
+              ? ' ' + childSection.dim + 'px'
+              : ' ' + childSection.dim;
+      });
+      if (section.layout == 'column')
+        bodyStyles['gridTemplateRows'] = gridTemplate;
+      if (section.layout == 'row')
+        bodyStyles['gridTemplateColumns'] = gridTemplate;
+    }
+    return (h("div", { class: classes, ref: (el) => {
+        if (!el)
+          return;
+        const kel = el;
+        kel.kupData = { parent: parent, section: section };
+      } }, this.dragType == KupFormEditorDragTypes.Sections
+      ? this.buildSectionHeader(section, parent)
+      : undefined, h("div", { class: bodyClasses, style: bodyStyles }, this.dragType == KupFormEditorDragTypes.Components &&
+      section.components
+      ? section.components.map((component) => component.type == 'SCH' ? (this.buildForm(component, section)) : (h("div", { class: "component component-draggable", ref: (el) => {
+          if (!el)
+            return;
+          const kel = el;
+          kel.kupData = {
+            section: section,
+            componnent: component,
+          };
+        } }, component.id, " - ", component.type, h("kup-switch", { checked: component.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
+          component.loaded =
+            ev.detail.value == 'on';
+        } }))))
+      : undefined, section.sections
+      ? section.sections.map((childSection) => this.buildSection(childSection, section))
+      : undefined)));
+  }
+  didRenderInteractables() {
+    try {
+      const items = [];
+      this.rootElement.shadowRoot
+        .querySelectorAll('.component-draggable')
+        .forEach((x) => items.push(x));
+      this.rootElement.shadowRoot
+        .querySelectorAll('.section-draggable')
+        .forEach((x) => items.push(x));
+      items.forEach((item) => {
+        this.kupManager.interact.draggable(item, null, null, KupDragEffect.CLONE);
+      });
+    }
+    catch (error) {
+      this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
+    }
+    try {
+      const items = [];
+      this.rootElement.shadowRoot
+        .querySelectorAll('.section-dropzone')
+        .forEach((x) => items.push(x));
+      this.rootElement.shadowRoot
+        .querySelectorAll('.form-dropzone')
+        .forEach((x) => items.push(x));
+      items.forEach((item) => {
+        this.kupManager.interact.dropzone(item, null, null, {
+          drop: (ev) => {
+            ev.currentTarget.appendChild(ev.relatedTarget);
+            this.dropped(ev.currentTarget, ev.relatedTarget);
+          },
+        });
+      });
+    }
+    catch (error) {
+      this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
+    }
+  }
+  dropped(parent, child) {
+    if (this.dragType == KupFormEditorDragTypes.Components) {
+      const idx = child.kupData.section.components.indexOf(child.kupData.componnent);
+      child.kupData.section.components.splice(idx, 1);
+      parent.kupData.section.components.push(child.kupData.componnent);
+      child.kupData.section = parent.kupData.section;
+    }
+    else if (this.dragType == KupFormEditorDragTypes.Sections) {
+      const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
+      child.kupData.parent.sections.splice(idx, 1);
+      if (parent.kupData.form) {
+        // il nuovo target è la form.
+        if (!parent.kupData.form.sections)
+          parent.kupData.form.sections = [];
+        parent.kupData.form.sections.push(child.kupData.section);
+        child.kupData.parent = parent.kupData.form;
+      }
+      else if (parent.kupData.section) {
+        // il nuovo target è la section.
+        if (!parent.kupData.section.sections)
+          parent.kupData.section.sections = [];
+        if (parent.kupData.section.components &&
+          parent.kupData.section.components.length > 0) {
+          // devo creare una section contenitore e sposare i components
+          const newSec = {
+            id: parent.kupData.section.id + '1',
+            loaded: parent.kupData.section.loaded,
+            layout: parent.kupData.section.layout,
+            components: [],
+          };
+          parent.kupData.section.components.forEach((x) => newSec.components.push(x));
+          parent.kupData.section.components.splice(0);
+          parent.kupData.section.sections.push(newSec);
+        }
+        parent.kupData.section.sections.push(child.kupData.section);
+        child.kupData.parent = parent.kupData.section;
+      }
+      this.resetData(this.internalData);
+    }
+  }
+  resetData(form = null) {
+    if (form)
+      this.internalDataBackup = form;
+    this.resetInternalData = true;
+    setTimeout(() => {
+      if (this.internalDataBackup) {
+        this.internalData = this.internalDataBackup;
+        this.internalDataBackup = null;
+      }
+      this.resetInternalData = false;
+    }, 250);
+  }
+  unregisterInteractables() {
+    this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.component-draggable')));
+    this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-dropzone')));
+    this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-draggable')));
+    this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.form-dropzone')));
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.dates.register(this);
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.language.register(this);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+    if (this.resetInternalData) {
+      this.internalData = null;
+      this.unregisterInteractables();
+    }
+    else if (!this.internalData)
+      this.internalData = JSON.parse(JSON.stringify(this.data));
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
+    this.didRenderInteractables();
+  }
+  render() {
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, this.buildHeader(), this.buildForm(this.internalData, null))));
+  }
+  disconnectedCallback() {
+    this.unregisterInteractables();
+    this.kupManager.dates.unregister(this);
+    this.kupManager.language.unregister(this);
+    this.kupManager.theme.unregister(this);
+  }
+  get rootElement() { return getElement(this); }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+};
+KupFormEditor.style = kupFormEditorCss;
+
+export { KupFormEditor as kup_form_editor };

package/dist/esm/kup-iframe.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
-import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-0ab94726.js';
-import { g as getProps, s as setProps } from './utils-35c7a90d.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
+import { k as kupManagerInstance, c as KupDebugCategory } from './kup-manager-58b075b4.js';
+import { g as getProps, s as setProps } from './utils-d7e4b3c2.js';
 
 /**
  * Props of the kup-iframe component.

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

@@ -0,0 +1,224 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
+import { k as kupManagerInstance, h as KupLanguageGeneric } from './kup-manager-58b075b4.js';
+import { g as getProps, s as setProps } from './utils-d7e4b3c2.js';
+import { c as componentWrapperId } from './GenericVariables-665de00a.js';
+import { F as FImage } from './f-image-c468d8ae.js';
+import { F as FButton } from './f-button-871a544b.js';
+import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
+import { a as FCellPadding, b as FCell } from './f-cell-521ef17a.js';
+import { M as MDCRipple } from './component-b1bedf1d.js';
+import './cell-utils-964da6b5.js';
+import './f-text-field-d6c61c73.js';
+import './f-chip-1dda722f.js';
+import './tslib.es6-3eea2234.js';
+
+/**
+ * Props of the kup-image-list component.
+ * Used to export every prop in an object.
+ */
+var KupImageListProps;
+(function (KupImageListProps) {
+  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 || (KupImageListProps = {}));
+
+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__wrapper--active .navigation-bar__back,.navigation-bar__wrapper--active .navigation-bar__top{display:block}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0;animation:fade-in 0.375s ease-in;display:none}.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}";
+
+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 __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    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;
+const KupImageList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.kupClick = createEvent(this, "kup-imagelist-click", 6);
+    this.kupContextMenu = createEvent(this, "kup-imagelist-contextmenu", 6);
+    this.kupDblClick = createEvent(this, "kup-imagelist-dblclick", 6);
+    _KupImageList_instances.add(this);
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    this.currentNode = null;
+    this.navigationBarToggled = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * Actual data of the component.
+     * @default []
+     */
+    this.data = [];
+    /**
+     * When enabled displays Material's ripple effect on clicked items.
+     * @default true
+     */
+    this.ripple = true;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupImageList_clickTimeout.set(this, []);
+    _KupImageList_kupManager.set(this, kupManagerInstance());
+    _KupImageList_backProps.set(this, {
+      icon: 'arrow_back',
+      onClick: () => {
+        this.currentNode = __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.node.getParent(this.data, this.currentNode);
+        if (!this.currentNode) {
+          this.navigationBarToggled = false;
+        }
+      },
+      styling: FButtonStyling.FLAT,
+      wrapperClass: 'navigation-bar__back',
+    });
+    _KupImageList_topProps.set(this, {
+      icon: 'arrow_upward',
+      onClick: () => {
+        this.currentNode = null;
+        this.navigationBarToggled = false;
+      },
+      styling: FButtonStyling.FLAT,
+      wrapperClass: 'navigation-bar__top',
+    });
+  }
+  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,
+    });
+  }
+  /*-------------------------------------------------*/
+  /*           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, KupImageListProps, 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, KupImageListProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.register(this);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.register(this);
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logRender(this, false);
+  }
+  componentDidRender() {
+    const root = this.rootElement.shadowRoot;
+    if (root && this.ripple) {
+      const rippleCells = root.querySelectorAll('.mdc-ripple-surface:not(.mdc-ripple-upgraded)');
+      if (rippleCells) {
+        for (let i = 0; i < rippleCells.length; i++) {
+          MDCRipple.attachTo(rippleCells[i]);
+        }
+      }
+    }
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    const hasNavigation = !!this.currentNode;
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { 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", { class: "image-list" }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.unregister(this);
+    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.unregister(this);
+  }
+  get rootElement() { return getElement(this); }
+};
+_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) {
+  const props = {
+    fit: true,
+    resource: node.icon,
+    title: node.title,
+    wrapperClass: 'image-list__image',
+  };
+  const image = h(FImage, Object.assign({}, props));
+  const label = h("div", { class: "image-list__label" }, node.value);
+  return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: "image-list__wrapper" }, image, label)));
+}, _KupImageList_createList = function _KupImageList_createList() {
+  const nodes = [];
+  const items = this.currentNode ? this.currentNode.children : this.data;
+  for (let index = 0; items && index < items.length; index++) {
+    const node = items[index];
+    const classObj = {
+      '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)));
+    nodes.push(item);
+  }
+  return nodes;
+};
+KupImageList.style = kupImageListCss;
+
+export { KupImageList as kup_image_list };

package/dist/esm/kup-lazy.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
-import { k as kupManagerInstance } from './kup-manager-0ab94726.js';
-import { g as getProps, s as setProps } from './utils-35c7a90d.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
+import { k as kupManagerInstance } from './kup-manager-58b075b4.js';
+import { g as getProps, s as setProps } from './utils-d7e4b3c2.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**

package/dist/esm/kup-magic-box.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
-import { k as kupManagerInstance, i as KupLanguageGeneric, j as KupDebugCategory, _ as kupDropEvent, F as kupDraggableColumnAttr, $ as kupDraggableRowAttr, o as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
+import { k as kupManagerInstance, h as KupLanguageGeneric, c as KupDebugCategory, _ as kupDropEvent, z as kupDraggableColumnAttr, $ as kupDraggableRowAttr, D as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-58b075b4.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-de331954.js';
-import { g as getProps, s as setProps } from './utils-35c7a90d.js';
+import { F as FImage } from './f-image-c468d8ae.js';
+import { g as getProps, s as setProps } from './utils-d7e4b3c2.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**