@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -11,585 +11,585 @@ import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupDashboardProps, } from "./kup-dashboard-declarations";
 export class KupDashboard {
-  constructor() {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       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,
+        });
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    dataChanged() {
+        this.resetData();
+    }
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * Instance of the KupManager class.
+     * 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.
      */
-    this.kupManager = kupManagerInstance();
+    async getProps(descriptions) {
+        return getProps(this, KupDashboardProps, descriptions);
+    }
     /**
-     * Internal data of the component.
+     * This method is used to trigger a new render of the component.
      */
-    this.internalData = null;
+    async refresh() {
+        forceUpdate(this);
+    }
     /**
-     * Internal data backup of the component for refresh when changed content by drag&drop.
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
      */
-    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);
+    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);
         });
     }
-    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);
-  }
-  static get is() { return "kup-dashboard"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-dashboard.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-dashboard.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupDataDashboard",
-          "resolved": "KupDataDashboard",
-          "references": {
-            "KupDataDashboard": {
-              "location": "import",
-              "path": "./kup-dashboard-declarations",
-              "id": "src/components/kup-dashboard/kup-dashboard-declarations.ts::KupDataDashboard"
+    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;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "The data of the component."
-        },
-        "defaultValue": "null"
-      },
-      "enableDesign": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Enable drag & drop of the section."
-        },
-        "attribute": "enable-design",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "resetInternalData": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupSave",
-        "name": "kup-dashboard-save",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupDashboardEventPayload",
-          "resolved": "KupDashboardEventPayload",
-          "references": {
-            "KupDashboardEventPayload": {
-              "location": "import",
-              "path": "./kup-dashboard-declarations",
-              "id": "src/components/kup-dashboard/kup-dashboard-declarations.ts::KupDashboardEventPayload"
+            else if (!vertical && pointerX < srect.x) {
+                idx = index;
+                break;
             }
-          }
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+        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);
             }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
+            // 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;
         }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        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;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
+            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);
+                });
         }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        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);
+    }
+    static get is() { return "kup-dashboard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-dashboard.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-dashboard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }, {
+                            "name": "see",
+                            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+                        }],
+                    "text": "Custom style of the component."
+                },
+                "attribute": "custom-style",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupDataDashboard",
+                    "resolved": "KupDataDashboard",
+                    "references": {
+                        "KupDataDashboard": {
+                            "location": "import",
+                            "path": "./kup-dashboard-declarations",
+                            "id": "src/components/kup-dashboard/kup-dashboard-declarations.ts::KupDataDashboard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The data of the component."
+                },
+                "defaultValue": "null"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "enableDesign": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable drag & drop of the section."
+                },
+                "attribute": "enable-design",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "dataChanged"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "resetInternalData": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupSave",
+                "name": "kup-dashboard-save",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupDashboardEventPayload",
+                    "resolved": "KupDashboardEventPayload",
+                    "references": {
+                        "KupDashboardEventPayload": {
+                            "location": "import",
+                            "path": "./kup-dashboard-declarations",
+                            "id": "src/components/kup-dashboard/kup-dashboard-declarations.ts::KupDashboardEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                                }],
+                            "text": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "props - Object containing props that will be set to the component."
+                                }],
+                            "text": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
 }