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

package/dist/collection/components/kup-form-editor/kup-form-editor.css

@@ -0,0 +1,80 @@
+: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;
+}

package/dist/collection/components/kup-form-editor/kup-form-editor.js

@@ -0,0 +1,561 @@
+import { Component, Element, forceUpdate, h, Host, Method, Prop, State, Event, Watch, } from '@stencil/core';
+import { FButton } from '../../f-components/f-button/f-button';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupDragEffect } from '../../managers/kup-interact/kup-interact-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupFormEditorDragTypes, KupFormEditorLabels, KupFormEditorProps, } from './kup-form-editor-declarations';
+export class KupFormEditor {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*                   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);
+  }
+  static get is() { return "kup-form-editor"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-form-editor.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-form-editor.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": "KupForm",
+        "resolved": "KupForm",
+        "references": {
+          "KupForm": {
+            "location": "import",
+            "path": "./kup-form-editor-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }],
+        "text": "The data of the component."
+      },
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "resetInternalData": {}
+  }; }
+  static get events() { return [{
+      "method": "kupSave",
+      "name": "kup-formeditor-save",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "KupFormEditorEventPayload",
+        "resolved": "KupFormEditorEventPayload",
+        "references": {
+          "KupFormEditorEventPayload": {
+            "location": "import",
+            "path": "./kup-form-editor-declarations"
+          }
+        }
+      }
+    }]; }
+  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"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "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"
+          }
+        },
+        "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"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "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"
+    }]; }
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Props of the kup-image-list component.
+ * Used to export every prop in an object.
+ */
+export 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 = {}));