@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

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

@@ -1,237 +0,0 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-baeab1ac.js';
-import { k as kupManagerInstance, c as KupDebugCategory } from './kup-manager-58b075b4.js';
-import { c as componentWrapperId } from './GenericVariables-665de00a.js';
-
-/**
- * Props of the kup-field component.
- * Used to export every prop in an object.
- */
-var KupFieldProps;
-(function (KupFieldProps) {
-  KupFieldProps["customStyle"] = "Custom style of the component.";
-  KupFieldProps["data"] = "Effective data to pass to the component.";
-  KupFieldProps["label"] = "The text of the label. If set to empty or has only white space chars, the label will be removed.";
-  KupFieldProps["labelPos"] = "Sets the label's position, left right or top.";
-  KupFieldProps["showSubmit"] = "Sets whether the submit button must be displayed or not.";
-  KupFieldProps["submitLabel"] = "Sets the submit button's label.";
-  KupFieldProps["submitPos"] = "Sets the submit button's position, top right bottom or left.";
-  KupFieldProps["type"] = "The type of the FLD";
-})(KupFieldProps || (KupFieldProps = {}));
-
-const kupFieldCss = ":host{display:block;font-size:var(--kup-font-size)}label{color:var(--kup-text-color);font-family:var(--kup-font-family);font-size:1em}.kup-field__component{display:inline-block}.label-top.submit-top label{float:left;margin:auto auto 1em auto}.label-top.submit-top kup-button{float:right;margin:auto auto 1em auto}.label-right label{display:inline-block;margin:auto auto auto 1em}.submit-right kup-button{display:inline-block;margin:auto auto auto 1em}.label-left label{display:inline-block;margin:auto 1em auto auto}.submit-left kup-button{display:inline-block;margin:auto 1em auto auto}.submit-bottom kup-button{display:block;margin:1em auto auto auto}";
-
-const KupField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.kupChange = createEvent(this, "kup-field-change", 6);
-    this.kupSubmit = createEvent(this, "kup-field-submit", 6);
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * Effective data to pass to the component.
-     * @default {}
-     */
-    this.data = {};
-    /**
-     * The text of the label. If set to empty or has only white space chars, the label will be removed.
-     * @default ""
-     */
-    this.label = '';
-    /**
-     * Sets the label's position, left right or top.
-     * @default "left"
-     */
-    this.labelPos = 'left';
-    /**
-     * Sets whether the submit button must be displayed or not.
-     * @default false
-     */
-    this.showSubmit = false;
-    /**
-     * Sets the submit button's label.
-     * @default ""
-     */
-    this.submitLabel = '';
-    /**
-     * Sets the submit button's position, top right bottom or left.
-     * @default "right"
-     */
-    this.submitPos = 'right';
-    /**
-     * The type of the FLD
-     * @default undefined
-     */
-    this.type = undefined;
-    /*-------------------------------------------------*/
-    /*       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();
-    this.currentValue = null;
-    this.previousValue = null;
-    // Generates an instance of the event handler while binding the current component as its this value
-    // This is done once per component to improve performance speed
-    this.onChangeInstance = this.onChange.bind(this);
-    this.onSubmitInstance = this.onSubmit.bind(this);
-  }
-  // When a change or update event must be launched as if it's coming from the FLD itself
-  onChange(event) {
-    const { value, info } = event.detail;
-    this.kupChange.emit({
-      originalEvent: event,
-      oldValue: this.currentValue,
-      value,
-      info,
-    });
-    this.previousValue = this.currentValue;
-    this.currentValue = value;
-  }
-  // When a submit event must be launched as if it's coming from the FLD itself
-  onSubmit(event) {
-    this.kupSubmit.emit({
-      originalEvent: event,
-      oldValue: this.previousValue,
-      value: this.currentValue,
-      info: {
-        obj: event.detail.info && event.detail.info.obj
-          ? event.detail.info.obj
-          : undefined,
-      },
-    });
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Provides an interface to get the current value programmatically
-   * @method getCurrentValue
-   * @returns {any}
-   */
-  async getCurrentValue() {
-    return this.currentValue;
-  }
-  /**
-   * 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) {
-    let props = {};
-    if (descriptions) {
-      props = KupFieldProps;
-    }
-    else {
-      for (const key in KupFieldProps) {
-        if (Object.prototype.hasOwnProperty.call(KupFieldProps, key)) {
-          props[key] = this[key];
-        }
-      }
-    }
-    return props;
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    let toRender = [];
-    const baseClass = 'kup-field';
-    let label = null;
-    let submit = null;
-    let wrapperClass = '';
-    let propList = Object.assign({}, this.data);
-    if (this.label.trim().length) {
-      wrapperClass += ' label-' + this.labelPos;
-      label = (h("label", { class: baseClass +
-          '__label' +
-          ' ' +
-          baseClass +
-          '--' +
-          this.labelPos }, this.label));
-    }
-    if (this.showSubmit) {
-      wrapperClass += ' submit-' + this.submitPos;
-      submit = (h("kup-button", { class: baseClass + '__submit', label: this.submitLabel, "onkup-button-click": this.onSubmitInstance }));
-    }
-    //-- If a component must be positioned on top of the dynamic one --
-    const labelIsTop = this.labelPos === 'top';
-    const labelIsLeft = this.labelPos === 'left';
-    const labelIsRight = this.labelPos === 'right';
-    const submitIsTop = this.submitPos === 'top';
-    const submitIsLeft = this.submitPos === 'left';
-    const submitIsRight = this.submitPos === 'right';
-    const submitIsBottom = this.submitPos === 'bottom';
-    if (labelIsTop || submitIsTop) {
-      toRender.push(h("div", { class: baseClass + '__top-container' }, labelIsTop && label ? label : null, submitIsTop && submit ? submit : null));
-    }
-    if (labelIsLeft && label) {
-      toRender.push(label);
-    }
-    if (submitIsLeft && submit) {
-      toRender.push(submit);
-    }
-    let comp = undefined;
-    if (this.type === undefined) {
-      this.kupManager.debug.logMessage(this, 'Type (state) is undefined!', KupDebugCategory.WARNING);
-    }
-    else {
-      switch (this.type.toLowerCase()) {
-        case 'cmb':
-          comp = 'kup-combobox';
-          propList.onKupComboboxChange = this.onChangeInstance;
-          break;
-        case 'itx':
-          comp = 'kup-text-field';
-          propList.onkupTextFieldChange = this.onChangeInstance;
-          break;
-        case 'rad':
-          comp = 'kup-radio';
-          propList.onkupRadioChange = this.onChangeInstance;
-          break;
-      }
-    }
-    const $DynamicComponent = comp; // TODO check if there is a better typing
-    toRender.push(h($DynamicComponent, Object.assign({ class: baseClass + '__component' }, propList)));
-    if (labelIsRight && label) {
-      toRender.push(label);
-    }
-    if ((submitIsRight || submitIsBottom) && submit) {
-      toRender.push(submit);
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: wrapperClass }, toRender)));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-  }
-  get rootElement() { return getElement(this); }
-};
-KupField.style = kupFieldCss;
-
-export { KupField as kup_field };

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

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