@sme.up/ketchup 5.2.1-SNAPSHOT → 6.2.0-SNAPSHOT

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

@@ -0,0 +1,375 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-ad6ab214.js';
+import { F as FButton } from './f-button-2f6cc296.js';
+import { F as FCheckbox } from './f-checkbox-c51c4a75.js';
+import { F as FTextField } from './f-text-field-184a5fb3.js';
+import { F as FTextFieldMDC } from './f-text-field-mdc-d42d3f9e.js';
+import { k as kupManagerInstance, a6 as KupLanguageDashboard, h as KupLanguageGeneric, B as KupDragEffect, c as KupDebugCategory } from './kup-manager-3325b2d8.js';
+import { g as getProps, s as setProps } from './utils-6373a07e.js';
+import { c as componentWrapperId } from './GenericVariables-665de00a.js';
+import './f-button-declarations-b1b4cac4.js';
+import './f-image-b08ebeb2.js';
+import './tslib.es6-3eea2234.js';
+import './component-b1bedf1d.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.";
+})(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)}.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}.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.kupSave = createEvent(this, "kup-dashboard-save", 6);
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    /**
+     * Force render component by internal event.
+     */
+    this.resetInternalData = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * The data of the component.
+     * @default null
+     */
+    this.data = null;
+    /**
+     * Enable drag & drop of the section.
+     * @default false
+     */
+    this.enableDesign = false;
+    /*-------------------------------------------------*/
+    /*       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;
+  }
+  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;
+      },
+    };
+    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)));
+  }
+  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, null, null, {
+          drop: (ev) => {
+            this.dropped(ev.currentTarget, ev.relatedTarget);
+          },
+        });
+      });
+    }
+    catch (error) {
+      this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
+    }
+  }
+  dropped(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 = [];
+      parent.kupData.form.sections.push(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);
+      }
+      parent.kupData.section.sections.push(child.kupData.section);
+      child.kupData.parent = parent.kupData.section;
+    }
+    this.resetData(this.internalData);
+  }
+  getGridStyle(entity) {
+    let bodyStyles = {};
+    if (!this.enableDesign && entity.sections) {
+      let gridTemplate = '';
+      entity.sections.forEach((childSection) => {
+        if (!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;
+  }
+  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 getElement(this); }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+};
+KupDashboard.style = kupDashboardCss;
+
+export { KupDashboard as kup_dashboard };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
-import { k as kupManagerInstance } from './kup-manager-9316a184.js';
-import { g as getProps, s as setProps } from './utils-f24319a0.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-ad6ab214.js';
+import { k as kupManagerInstance } from './kup-manager-3325b2d8.js';
+import { g as getProps, s as setProps } from './utils-6373a07e.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 const drawerClass = 'drawer';
@@ -14,7 +14,7 @@ var KupDrawerProps;
   KupDrawerProps["opened"] = "Defaults at false. When set to true, the drawer appears.";
 })(KupDrawerProps || (KupDrawerProps = {}));
 
-const kupDrawerCss = ":host{--kup_drawer_backdrop:var(--kup-drawer-backdrop, rgba(0, 0, 0, 0.32));--kup_drawer_box_shadow:var(\n    --kup-drawer-box-shadow,\n    0 8px 10px -5px rgba(0, 0, 0, 0.2),\n    0 16px 24px 2px rgba(0, 0, 0, 0.14),\n    0 6px 30px 5px rgba(0, 0, 0, 0.12)\n  );--kup_drawer_permanent_border:var(\n    --kup-drawer-permanent-border,\n    1px solid var(--kup-border-color)\n  );--kup_drawer_slide_transition:var(--kup-drawer-slide-transition, 750ms);--kup_drawer_transition:var(--kup-drawer-transition, 250ms);box-shadow:var(--kup_drawer_box_shadow);display:block;font-size:var(--kup-font-size);height:100vh;left:calc(var(--kup-drawer-width) * -1);position:fixed;top:0;transition:left var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1), right var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1);width:var(--kup-drawer-width);z-index:var(--kup-drawer-zindex)}#kup-component{height:100%;width:100%}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--kup_drawer_backdrop);opacity:0;pointer-events:none;transition:opacity var(--kup_drawer_transition) ease-in;z-index:var(--kup-drawer-zindex)}.drawer{height:100%;position:fixed;width:var(--kup-drawer-width);z-index:calc(var(--kup-drawer-zindex) + 1)}.drawer__content{background-color:var(--kup-drawer-background-color);box-sizing:border-box;height:100%;overflow-y:auto;width:100%}.drawer ::slotted(*){--kup-button-primary-color:var(--kup-drawer-color);--kup-button-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-button-primary-color-h:var(--kup-drawer-color-h);--kup-button-primary-color-s:var(--kup-drawer-color-s);--kup-button-primary-color-l:var(--kup-drawer-color-l);--kup-switch-label-color:var(--kup-drawer-color);--kup-switch-primary-color:var(--kup-drawer-color);--kup-switch-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-color:var(--kup-drawer-color);--kup-textfield-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-primary-color:var(--kup-drawer-color);--kup-textfield-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-color:var(--kup-drawer-color);--kup-tree-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-icon-color:var(--kup-drawer-color);color:var(--kup-drawer-color);fill:var(--kup-drawer-color)}:host([kup-opened]){left:0}:host([kup-opened]) .backdrop{opacity:1;pointer-events:all}:host(.kup-right){left:unset;right:-100%}:host([kup-opened].kup-right){right:0}:host(.kup-permanent){box-shadow:unset;transition:all 250ms}:host(.kup-permanent) .backdrop{display:none}:host(.kup-permanent) .drawer{position:relative}:host(.kup-permanent) .drawer__content{border-right:var(--kup_drawer_permanent_border)}";
+const kupDrawerCss = ":host{--kup_drawer_backdrop:var(--kup-drawer-backdrop, rgba(0, 0, 0, 0.32));--kup_drawer_box_shadow:var(\n    --kup-drawer-box-shadow,\n    0 8px 10px -5px rgba(0, 0, 0, 0.2),\n    0 16px 24px 2px rgba(0, 0, 0, 0.14),\n    0 6px 30px 5px rgba(0, 0, 0, 0.12)\n  );--kup_drawer_permanent_border:var(\n    --kup-drawer-permanent-border,\n    1px solid var(--kup-border-color)\n  );--kup_drawer_slide_transition:var(--kup-drawer-slide-transition, 750ms);--kup_drawer_transition:var(--kup-drawer-transition, 250ms);box-shadow:var(--kup_drawer_box_shadow);display:block;font-size:var(--kup-font-size);height:100vh;left:calc(var(--kup-drawer-width) * -1);position:fixed;top:0;transition:left var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1), right var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1);width:var(--kup-drawer-width);z-index:var(--kup-drawer-zindex)}#kup-component{height:100%;width:100%}.backdrop{background:var(--kup_drawer_backdrop);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--kup-drawer-zindex)}.drawer{height:100%;position:fixed;width:var(--kup-drawer-width);z-index:calc(var(--kup-drawer-zindex) + 1)}.drawer__content{background-color:var(--kup-drawer-background-color);box-sizing:border-box;height:100%;overflow-y:auto;width:100%}.drawer ::slotted(*){--kup-button-primary-color:var(--kup-drawer-color);--kup-button-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-button-primary-color-h:var(--kup-drawer-color-h);--kup-button-primary-color-s:var(--kup-drawer-color-s);--kup-button-primary-color-l:var(--kup-drawer-color-l);--kup-switch-label-color:var(--kup-drawer-color);--kup-switch-primary-color:var(--kup-drawer-color);--kup-switch-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-color:var(--kup-drawer-color);--kup-textfield-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-primary-color:var(--kup-drawer-color);--kup-textfield-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-color:var(--kup-drawer-color);--kup-tree-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-filter-background-color:var(--kup-drawer-background-color);--kup-tree-icon-color:var(--kup-drawer-color);color:var(--kup-drawer-color);fill:var(--kup-drawer-color)}:host([kup-opened]){left:0}:host([kup-opened]) .backdrop{display:block}:host(.kup-right){left:unset;right:-100%}:host([kup-opened].kup-right){right:0}:host(.kup-permanent){box-shadow:unset;transition:all 250ms}:host(.kup-permanent) .backdrop{display:none}:host(.kup-permanent) .drawer{position:relative}:host(.kup-permanent) .drawer__content{border-right:var(--kup_drawer_permanent_border)}";
 
 const KupDrawer = class {
   constructor(hostRef) {
@@ -140,9 +140,16 @@ const KupDrawer = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    return (h(Host, { "kup-opened": this.opened }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { class: "backdrop", onPointerDown: (e) => {
+    return (h(Host, { "kup-opened": this.opened }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { class: "backdrop", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, onPointerDown: (e) => {
+        e.preventDefault();
         e.stopPropagation();
         this.close();
+      }, onTouchStart: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
       } }), h("div", { id: componentWrapperId }, h("div", { class: drawerClass }, this.content()))));
   }
   disconnectedCallback() {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
-import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-9316a184.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-ad6ab214.js';
+import { k as kupManagerInstance, c as KupDebugCategory } from './kup-manager-3325b2d8.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**