@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/components/kup-dashboard.js

@@ -1,558 +1,558 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, al as KupLanguageDashboard, ab as FButton, S as KupLanguageGeneric, am as FTextField, an as FCheckbox, X as KupDragEffect, U as KupDebugCategory, _ as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, ag as KupLanguageDashboard, a6 as FButton, S as KupLanguageGeneric, ah as FTextField, ai as FCheckbox, X as KupDragEffect, U as KupDebugCategory, _ as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
-/**
- * Props of the kup-dashboard component.
- * Used to export every prop in an object.
- */
-var KupDashboardProps;
-(function (KupDashboardProps) {
-  KupDashboardProps["customStyle"] = "Custom style of the component.";
-  KupDashboardProps["data"] = "The data of the component.";
-  KupDashboardProps["enableDesign"] = "When set to true, the component is in design mode and it is draggable.";
+/**
+ * Props of the kup-dashboard component.
+ * Used to export every prop in an object.
+ */
+var KupDashboardProps;
+(function (KupDashboardProps) {
+  KupDashboardProps["customStyle"] = "Custom style of the component.";
+  KupDashboardProps["data"] = "The data of the component.";
+  KupDashboardProps["enableDesign"] = "When set to true, the component is in design mode and it is draggable.";
 })(KupDashboardProps || (KupDashboardProps = {}));
 
 const kupDashboardCss = ":host{width:100%;height:100%}#kup-component{height:100%}.header{display:flex;flex-direction:row;justify-content:center}.header>*{margin-left:0.5em}.form{display:grid;height:100%}.form-dropzone{padding:1em;grid-gap:0.5em;border:1px solid var(--kup-primary-color);height:auto}.section{display:flex;flex-direction:column;overflow:auto}.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)}.section-draggable{border:1px solid var(--kup-secondary-color);padding:1em}.section-placeholder{background-color:rgba(var(--kup-secondary-color-rgb), 0.5);min-height:1em;min-width:1em}.component{height:fit-content;padding:1em;margin:0.5em}.layout-row{grid-auto-flow:column;grid-template-columns:min-content}.layout-column{grid-auto-flow:row;grid-template-rows:min-content}";
 
-const KupDashboard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.kupSave = createEvent(this, "kup-dashboard-save", 6);
-    /*-------------------------------------------------*/
-    /*       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();
-    /**
-     * 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;
-    this.resetInternalData = false;
-    this.customStyle = '';
-    this.data = null;
-    this.enableDesign = false;
-  }
-  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, KupDashboardProps, 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, KupDashboardProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  buildGuid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-      var r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
-  buildHeader() {
-    const clearButtonProp = {
-      icon: 'cancel',
-      label: this.kupManager.language.translate(KupLanguageDashboard.RESET),
-      secondary: true,
-      onClick: () => {
-        this.resetData();
-      },
-    };
-    const saveButtonProp = {
-      icon: 'save',
-      label: this.kupManager.language.translate(KupLanguageDashboard.SAVE),
-      onClick: () => this.onKupSave(),
-    };
-    return (h("div", { class: "header" }, this.enableDesign ? (h(FButton, Object.assign({}, clearButtonProp))) : undefined, this.enableDesign ? (h(FButton, Object.assign({}, saveButtonProp))) : undefined));
-  }
-  buildForm(form, parent) {
-    const classes = {
-      form: true,
-      'layout-column': form && form.layout == 'column',
-      'layout-row': form && form.layout == 'row',
-      'form-dropzone': this.enableDesign &&
-        form &&
-        form.sections != null &&
-        form.sections.length > 0,
-    };
-    return form ? (h("div", { class: classes, style: this.getGridStyle(form), 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 dimTextFieldProp = {
-      value: section.dim,
-      label: this.kupManager.language.translate(KupLanguageDashboard.DIMENSION),
-      onChange: (e) => {
-        const { target } = e;
-        section.dim = target.value;
-        this.refresh();
-      },
-    };
-    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,
-        };
-        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);
-      },
-    };
-    const loadedCheckBoxProp = {
-      checked: section.loaded,
-      label: this.kupManager.language.translate(KupLanguageDashboard.LOADED),
-      onChange: () => {
-        section.loaded = !section.loaded;
-        this.refresh();
-      },
-    };
-    const columnCheckBoxProp = {
-      checked: section.layout == 'column',
-      label: this.kupManager.language.translate(KupLanguageDashboard.VERTICAL),
-      onChange: () => {
-        section.layout = section.layout == 'column' ? 'row' : 'column';
-        this.refresh();
-      },
-    };
-    return (h("div", { class: "section-header" }, h("div", null, section.id, " - ", section.layout), h("div", null, h("div", { class: "section-header-actions" }, h(FTextField, Object.assign({}, dimTextFieldProp)), h(FCheckbox, Object.assign({}, loadedCheckBoxProp)), h(FCheckbox, Object.assign({}, columnCheckBoxProp)), h(FButton, Object.assign({}, addButtonProp)), h(FButton, Object.assign({}, removeButtonProp))))));
-  }
-  buildSection(section, parent) {
-    const classes = {
-      section: true,
-      'section-draggable': this.enableDesign,
-      'section-dropzone': this.enableDesign,
-    };
-    const bodyClasses = {
-      'section-body': true,
-      'layout-column': section && section.layout == 'column',
-      'layout-row': section && section.layout == 'row',
-    };
-    return (h("div", { class: classes, ref: (el) => {
-        if (!el)
-          return;
-        const kel = el;
-        kel.kupData = { parent: parent, section: section };
-      } }, this.enableDesign
-      ? this.buildSectionHeader(section, parent)
-      : undefined, h("div", { class: bodyClasses, style: this.getGridStyle(section) }, !this.enableDesign &&
-      section.loaded &&
-      (!section.sections || section.sections.length == 0) ? (h("slot", { name: section.id })) : undefined, section.sections && (section.loaded || this.enableDesign)
-      ? section.sections.map((childSection) => this.buildSection(childSection, section))
-      : undefined)));
-  }
-  calcSectionPosition(pointerY, pointerX, vertical, sectionCount, elements) {
-    let idx = sectionCount;
-    for (let index = 0; index < elements.length; index++) {
-      const element = elements[index];
-      const srect = element.getBoundingClientRect();
-      if (vertical && pointerY < srect.y) {
-        idx = index;
-        break;
-      }
-      else if (!vertical && pointerX < srect.x) {
-        idx = index;
-        break;
-      }
-    }
-    return idx;
-  }
-  didRenderInteractables() {
-    try {
-      const items = [];
-      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, {
-          ondropdeactivate: () => {
-            this.removeSectionPlaceHolder();
-          },
-          ondropmove: (ev) => {
-            this.removeSectionPlaceHolder();
-            this.dragEnter(ev.dragEvent.clientY, ev.dragEvent.clientX, ev.currentTarget);
-          },
-        }, null, {
-          drop: (ev) => {
-            this.dropped(ev, ev.currentTarget, ev.relatedTarget);
-          },
-        });
-      });
-    }
-    catch (error) {
-      this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
-    }
-  }
-  dragEnter(clientY, clientX, parent) {
-    if (parent.kupData.form) {
-      // form is the target of drop.
-      // calculate a new position for the section.
-      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
-      // set placeholder into target area.
-      this.setSectionPlaceHolder(parent, nidx);
-    }
-    else if (parent.kupData.section) {
-      // section is the target of drop.
-      // calculate a new position for the section.
-      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
-      // set placeholder into target area.
-      this.setSectionPlaceHolder(parent.lastElementChild, nidx);
-    }
-  }
-  dropped(event, parent, child) {
-    const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
-    child.kupData.parent.sections.splice(idx, 1);
-    if (parent.kupData.form) {
-      // form is the target of drop.
-      if (!parent.kupData.form.sections)
-        parent.kupData.form.sections = [];
-      // calculate a new position for the section.
-      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
-      // set the section in 'nidx' position.
-      parent.kupData.form.sections.splice(nidx, 0, child.kupData.section);
-      child.kupData.parent = parent.kupData.form;
-    }
-    else if (parent.kupData.section) {
-      // section is the target of drop.
-      if (!parent.kupData.section.sections ||
-        parent.kupData.section.sections.length == 0) {
-        // if the section target of drop doesn't contains other sections, i create a wrapper that will contain target section and dragged section.
-        const newSec = JSON.parse(JSON.stringify(parent.kupData.section));
-        newSec.dim = null;
-        child.kupData.section.dim = null;
-        parent.kupData.section.id = this.buildGuid();
-        parent.kupData.section.sections = [];
-        parent.kupData.section.sections.push(newSec);
-      }
-      // calculate a new position for the section.
-      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
-      // set the section in 'nidx' position.
-      parent.kupData.section.sections.splice(nidx, 0, child.kupData.section);
-      child.kupData.parent = parent.kupData.section;
-    }
-    this.resetData(this.internalData);
-  }
-  getGridStyle(entity) {
-    let bodyStyles = {};
-    if (entity.sections) {
-      let gridTemplate = '';
-      entity.sections.forEach((childSection) => {
-        if (this.enableDesign || !childSection.dim)
-          gridTemplate += ' 1fr';
-        else
-          gridTemplate +=
-            childSection.dim.indexOf('%') < 0
-              ? ' ' + childSection.dim + 'px'
-              : ' ' + childSection.dim;
-      });
-      if (entity.layout == 'column')
-        bodyStyles['gridTemplateRows'] = gridTemplate;
-      if (entity.layout == 'row')
-        bodyStyles['gridTemplateColumns'] = gridTemplate;
-    }
-    return bodyStyles;
-  }
-  setSectionPlaceHolder(element, index) {
-    const ph = document.createElement('div');
-    ph.className = 'section-placeholder';
-    element.insertBefore(ph, element.childNodes[index]);
-  }
-  removeSectionPlaceHolder() {
-    const ph = this.rootElement.shadowRoot.querySelector('.section-placeholder');
-    if (ph)
-      ph.parentElement.removeChild(ph);
-  }
-  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('.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);
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      const fields = root.querySelectorAll('.f-text-field');
-      if (fields)
-        fields.forEach((f) => {
-          FTextFieldMDC(f);
-        });
-    }
-    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 this; }
-  static get watchers() { return {
-    "data": ["dataChanged"]
-  }; }
-  static get style() { return kupDashboardCss; }
-}, [1, "kup-dashboard", {
-    "customStyle": [1, "custom-style"],
-    "data": [16],
-    "enableDesign": [4, "enable-design"],
-    "resetInternalData": [32],
-    "getProps": [64],
-    "refresh": [64],
-    "setProps": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["kup-dashboard", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
-  components.forEach(tagName => { switch (tagName) {
-    case "kup-dashboard":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, KupDashboard$1);
-      }
-      break;
-    case "kup-autocomplete":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$s();
-      }
-      break;
-    case "kup-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$r();
-      }
-      break;
-    case "kup-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$q();
-      }
-      break;
-    case "kup-button-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "kup-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "kup-chart":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "kup-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "kup-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "kup-color-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "kup-combobox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "kup-data-table":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "kup-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "kup-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "kup-dropdown-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "kup-form":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "kup-gauge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "kup-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "kup-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "kup-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "kup-radio":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "kup-rating":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "kup-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "kup-switch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "kup-tab-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "kup-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "kup-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "kup-tree":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const KupDashboard$1 = /*@__PURE__*/ proxyCustomElement(class KupDashboard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.kupSave = createEvent(this, "kup-dashboard-save", 6);
+    /*-------------------------------------------------*/
+    /*       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();
+    /**
+     * 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;
+    this.resetInternalData = false;
+    this.customStyle = '';
+    this.data = null;
+    this.enableDesign = false;
+  }
+  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, KupDashboardProps, 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, KupDashboardProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  buildGuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+  buildHeader() {
+    const clearButtonProp = {
+      icon: 'cancel',
+      label: this.kupManager.language.translate(KupLanguageDashboard.RESET),
+      secondary: true,
+      onClick: () => {
+        this.resetData();
+      },
+    };
+    const saveButtonProp = {
+      icon: 'save',
+      label: this.kupManager.language.translate(KupLanguageDashboard.SAVE),
+      onClick: () => this.onKupSave(),
+    };
+    return (h("div", { class: "header" }, this.enableDesign ? (h(FButton, Object.assign({}, clearButtonProp))) : undefined, this.enableDesign ? (h(FButton, Object.assign({}, saveButtonProp))) : undefined));
+  }
+  buildForm(form, parent) {
+    const classes = {
+      form: true,
+      'layout-column': form && form.layout == 'column',
+      'layout-row': form && form.layout == 'row',
+      'form-dropzone': this.enableDesign &&
+        form &&
+        form.sections != null &&
+        form.sections.length > 0,
+    };
+    return form ? (h("div", { class: classes, style: this.getGridStyle(form), 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 dimTextFieldProp = {
+      value: section.dim,
+      label: this.kupManager.language.translate(KupLanguageDashboard.DIMENSION),
+      onChange: (e) => {
+        const { target } = e;
+        section.dim = target.value;
+        this.refresh();
+      },
+    };
+    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,
+        };
+        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);
+      },
+    };
+    const loadedCheckBoxProp = {
+      checked: section.loaded,
+      label: this.kupManager.language.translate(KupLanguageDashboard.LOADED),
+      onChange: () => {
+        section.loaded = !section.loaded;
+        this.refresh();
+      },
+    };
+    const columnCheckBoxProp = {
+      checked: section.layout == 'column',
+      label: this.kupManager.language.translate(KupLanguageDashboard.VERTICAL),
+      onChange: () => {
+        section.layout = section.layout == 'column' ? 'row' : 'column';
+        this.refresh();
+      },
+    };
+    return (h("div", { class: "section-header" }, h("div", null, section.id, " - ", section.layout), h("div", null, h("div", { class: "section-header-actions" }, h(FTextField, Object.assign({}, dimTextFieldProp)), h(FCheckbox, Object.assign({}, loadedCheckBoxProp)), h(FCheckbox, Object.assign({}, columnCheckBoxProp)), h(FButton, Object.assign({}, addButtonProp)), h(FButton, Object.assign({}, removeButtonProp))))));
+  }
+  buildSection(section, parent) {
+    const classes = {
+      section: true,
+      'section-draggable': this.enableDesign,
+      'section-dropzone': this.enableDesign,
+    };
+    const bodyClasses = {
+      'section-body': true,
+      'layout-column': section && section.layout == 'column',
+      'layout-row': section && section.layout == 'row',
+    };
+    return (h("div", { class: classes, ref: (el) => {
+        if (!el)
+          return;
+        const kel = el;
+        kel.kupData = { parent: parent, section: section };
+      } }, this.enableDesign
+      ? this.buildSectionHeader(section, parent)
+      : undefined, h("div", { class: bodyClasses, style: this.getGridStyle(section) }, !this.enableDesign &&
+      section.loaded &&
+      (!section.sections || section.sections.length == 0) ? (h("slot", { name: section.id })) : undefined, section.sections && (section.loaded || this.enableDesign)
+      ? section.sections.map((childSection) => this.buildSection(childSection, section))
+      : undefined)));
+  }
+  calcSectionPosition(pointerY, pointerX, vertical, sectionCount, elements) {
+    let idx = sectionCount;
+    for (let index = 0; index < elements.length; index++) {
+      const element = elements[index];
+      const srect = element.getBoundingClientRect();
+      if (vertical && pointerY < srect.y) {
+        idx = index;
+        break;
+      }
+      else if (!vertical && pointerX < srect.x) {
+        idx = index;
+        break;
+      }
+    }
+    return idx;
+  }
+  didRenderInteractables() {
+    try {
+      const items = [];
+      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, {
+          ondropdeactivate: () => {
+            this.removeSectionPlaceHolder();
+          },
+          ondropmove: (ev) => {
+            this.removeSectionPlaceHolder();
+            this.dragEnter(ev.dragEvent.clientY, ev.dragEvent.clientX, ev.currentTarget);
+          },
+        }, null, {
+          drop: (ev) => {
+            this.dropped(ev, ev.currentTarget, ev.relatedTarget);
+          },
+        });
+      });
+    }
+    catch (error) {
+      this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
+    }
+  }
+  dragEnter(clientY, clientX, parent) {
+    if (parent.kupData.form) {
+      // form is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent, nidx);
+    }
+    else if (parent.kupData.section) {
+      // section is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent.lastElementChild, nidx);
+    }
+  }
+  dropped(event, parent, child) {
+    const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
+    child.kupData.parent.sections.splice(idx, 1);
+    if (parent.kupData.form) {
+      // form is the target of drop.
+      if (!parent.kupData.form.sections)
+        parent.kupData.form.sections = [];
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set the section in 'nidx' position.
+      parent.kupData.form.sections.splice(nidx, 0, child.kupData.section);
+      child.kupData.parent = parent.kupData.form;
+    }
+    else if (parent.kupData.section) {
+      // section is the target of drop.
+      if (!parent.kupData.section.sections ||
+        parent.kupData.section.sections.length == 0) {
+        // if the section target of drop doesn't contains other sections, i create a wrapper that will contain target section and dragged section.
+        const newSec = JSON.parse(JSON.stringify(parent.kupData.section));
+        newSec.dim = null;
+        child.kupData.section.dim = null;
+        parent.kupData.section.id = this.buildGuid();
+        parent.kupData.section.sections = [];
+        parent.kupData.section.sections.push(newSec);
+      }
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set the section in 'nidx' position.
+      parent.kupData.section.sections.splice(nidx, 0, child.kupData.section);
+      child.kupData.parent = parent.kupData.section;
+    }
+    this.resetData(this.internalData);
+  }
+  getGridStyle(entity) {
+    let bodyStyles = {};
+    if (entity.sections) {
+      let gridTemplate = '';
+      entity.sections.forEach((childSection) => {
+        if (this.enableDesign || !childSection.dim)
+          gridTemplate += ' 1fr';
+        else
+          gridTemplate +=
+            childSection.dim.indexOf('%') < 0
+              ? ' ' + childSection.dim + 'px'
+              : ' ' + childSection.dim;
+      });
+      if (entity.layout == 'column')
+        bodyStyles['gridTemplateRows'] = gridTemplate;
+      if (entity.layout == 'row')
+        bodyStyles['gridTemplateColumns'] = gridTemplate;
+    }
+    return bodyStyles;
+  }
+  setSectionPlaceHolder(element, index) {
+    const ph = document.createElement('div');
+    ph.className = 'section-placeholder';
+    element.insertBefore(ph, element.childNodes[index]);
+  }
+  removeSectionPlaceHolder() {
+    const ph = this.rootElement.shadowRoot.querySelector('.section-placeholder');
+    if (ph)
+      ph.parentElement.removeChild(ph);
+  }
+  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('.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);
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const fields = root.querySelectorAll('.f-text-field');
+      if (fields)
+        fields.forEach((f) => {
+          FTextFieldMDC(f);
+        });
+    }
+    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 this; }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+  static get style() { return kupDashboardCss; }
+}, [1, "kup-dashboard", {
+    "customStyle": [1, "custom-style"],
+    "data": [16],
+    "enableDesign": [4, "enable-design"],
+    "resetInternalData": [32],
+    "getProps": [64],
+    "refresh": [64],
+    "setProps": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["kup-dashboard", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "kup-dashboard":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, KupDashboard$1);
+      }
+      break;
+    case "kup-autocomplete":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$s();
+      }
+      break;
+    case "kup-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "kup-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "kup-button-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "kup-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "kup-chart":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "kup-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "kup-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "kup-color-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "kup-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "kup-data-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "kup-dropdown-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "kup-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "kup-gauge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "kup-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "kup-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "kup-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "kup-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "kup-rating":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "kup-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "kup-switch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "kup-tab-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "kup-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "kup-time-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "kup-tree":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const KupDashboard = KupDashboard$1;