@sme.up/ketchup 6.2.0-SNAPSHOT → 6.2.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-ad6ab214.js';
-import { k as kupManagerInstance, c as KupDebugCategory } from './kup-manager-3325b2d8.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/ketchup/p-006bc4d0.entry.js

@@ -1 +0,0 @@
-import{r as t,f as o,h as e,H as s,g as i}from"./p-d3b542b3.js";import{k as r,_ as n,h as l}from"./p-704e60eb.js";import{i as a,g as c,s as f}from"./p-d95c904b.js";import{c as u}from"./p-97e8ea42.js";import{F as m}from"./p-d7004ae4.js";import{F as h}from"./p-a203f78b.js";import"./p-ca9fd099.js";import"./p-cd5cfa7c.js";import"./p-13e08580.js";import"./p-70660fe2.js";import"./p-ddce3430.js";import"./p-79b0730b.js";import"./p-81605f08.js";var d,p;!function(t){t.customStyle="Custom style of the component.",t.data="Actual data of the form.",t.layout="How the form will arrange its content."}(d||(d={})),function(t){t.BOTTOM="bottom",t.LEFT="left",t.HIDDEN="hidden",t.PLACEHOLDER="placeholder",t.RIGHT="right",t.TOP="top"}(p||(p={}));const _=document.documentElement,b=class{constructor(o){t(this,o),this.customStyle="",this.data=null,this.labelPlacement=p.LEFT,this.layout=null,this.kupManager=r(),this.visibleColumns=[]}onDataChanged(){a(this.getRows()),this.initVisibleColumns(),this.checkLayout()}onLayoutChanged(){this.checkLayout()}async getProps(t){return c(this,d,t)}async refresh(){o(this)}async setFocus(t,o){const e=this.rootElement.shadowRoot.querySelectorAll('td[data-column="'+t+'"]');for(let t=0;e&&t<e.length;t++){const s=e[t];if(s["data-row"]&&s["data-row"].id==o){const t=s.querySelector("input");if(t)t.focus();else{const t=s.querySelector(".hydrated");if(t)try{t.setFocus()}catch(t){}}}}}async setProps(t){f(this,d,t)}getColumns(){return this.data&&this.data.columns?this.data.columns:[{title:"",name:"",size:void 0}]}initVisibleColumns(){this.visibleColumns=this.getColumns().filter((t=>!t.hasOwnProperty("visible")||t.visible))}getRows(){return this.data&&this.data.rows?this.data.rows:[]}checkLayout(){if(this.layout)return void(this.formLayout=this.layout);const t={horizontal:!1,sections:[]},o=this.visibleColumns;let e=o.length;const s=[];let i=0;for(;e-- >0;)s.push({column:o[i++].name});t.content=s,this.formLayout={sections:[t]}}renderRow(t){const o=[...this.visibleColumns];let s=null,i=t.layout;i||(i=this.formLayout);let r=!1;if(i){i.horizontal&&(r=!0);const e=i.sections;let n=e.length,l=0;n>0&&(s=[]);const a={horizontal:r};for(;n-- >0;)s.push(this.renderSection(e[l++],a,t,o))}return e("form",{class:{form:!0,"form--column":!r}},s)}renderSection(t,o,s,i){let r=null;if(t.sections&&t.sections.length>0){const o=t.sections;let e=o.length,n=0;for(e>0&&(r=[]);e-- >0;)r.push(this.renderSection(o[n++],t,s,i))}else if(t.content){const o=t.content;let n=o.length,l=0;for(n>0&&(r=[]);n-- >0;){const n=this.renderFormField({formField:o[l++],row:s,visibleColumns:i},!0);let a=n;t.horizontal||(a=e("tr",null,n)),r.push(a)}}else i.length>0&&(r=this.renderFormField({formField:{column:i[0].name},row:s,visibleColumns:i}));const n=!!t.columns,l={form__section:!0,"form__section--column":!n&&!t.horizontal,"form__section--grid":n,"form__section--titled":!!t.title,"form__section--last":!t.sections||0===t.sections.length},a=t.style||{};return t.dim&&o&&(a.flex=`0 0 ${t.dim}`,o.horizontal?a.maxWidth=t.dim:a.maxHeight=t.dim),n&&(a["grid-template-columns"]=`repeat(${t.columns}, 1fr)`),e("div",{class:l,style:a},t.title?e("h3",null,t.title):null,e("table",null,e("tbody",null,t.horizontal?e("tr",null,r):r)))}renderFormField({formField:t,row:o,visibleColumns:s},i){const r={form__field:!0},l={};let a=null,c=-1;for(let o=0;o<s.length;o++)if(s[o].name===t.column){c=o;break}c>=0?(a=s[c],s.splice(c,1)):i&&(a=this.data.columns.find((o=>o.name===t.column)));const f=o.cells[t.column];let u;if(!f)return null;f.isEditable=!0,this.kupManager.objects.isEmptyKupObj(f.obj)||this.kupManager.debug.isDebug()&&(u=f.obj.t+"; "+f.obj.p+"; "+f.obj.k+";");const h={cell:f,column:a,component:this,editable:!0,renderKup:!0,row:o,setSizes:!0,shape:t.shape};switch(function(){f.data||(f.data={});try{delete f.data.label}catch(t){}try{delete f.data.data["kup-text-field"].label}catch(t){}}(),this.labelPlacement){case p.BOTTOM:return[e("tr",null,d()),e("tr",null,b())];case p.PLACEHOLDER:!function(){switch(_.ketchup.data.cell.getType(f,f.shape||a.shape||null)){case n.AUTOCOMPLETE:case n.COLOR_PICKER:case n.COMBOBOX:case n.DATE:case n.DATETIME:case n.TIME:f.data.data&&f.data.data["kup-text-field"]?f.data.data["kup-text-field"].label=a.title:f.data.data={"kup-text-field":{label:a.title}};break;case n.CHECKBOX:case n.NUMBER:case n.STRING:case n.SWITCH:f.data.label=a.title}}();case p.HIDDEN:return i?[d()]:[e("tr",null,d())];case p.RIGHT:return i?[d(),b()]:[e("tr",null,d(),b())];case p.TOP:return[e("tr",null,b()),e("tr",null,d())];default:return i?[b(),d()]:[e("tr",null,b(),d())]}function d(){return e("td",{"data-cell":f,"data-row":o,"data-column":t.column,class:r,style:l,title:u},f&&a?e(m,Object.assign({},h)):e("span",null,t.value))}function b(){return e("td",{class:"form__label"},e("span",null,a.title))}}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.language.register(this),this.kupManager.theme.register(this),this.onDataChanged()}componentDidLoad(){this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){const t=this.rootElement.shadowRoot;if(t){const o=t.querySelectorAll(".f-text-field");for(let t=0;t<o.length;t++)h(o[t])}this.kupManager.debug.logRender(this,!0)}render(){let t=null;if(0===this.data.rows.length)t=e("p",null,this.kupManager.language.translate(l.EMPTY_DATA));else{const o=this.data.rows;let e=o.length,s=0;for(t=[];e-- >0;)t.push(this.renderRow(o[s++]))}return e(s,null,e("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),e("div",{id:u},t))}disconnectedCallback(){this.kupManager.language.unregister(this),this.kupManager.theme.unregister(this)}get rootElement(){return i(this)}static get watchers(){return{data:["onDataChanged"],layout:["onLayoutChanged"]}}};b.style=":host{--kup_form_background_color:var(\n    --kup-form-background-color,\n    var(--kup-background-color)\n  );--kup_form_color:var(--kup-form-color, var(--kup-text-color));--kup_form_font_family:var(--kup-form-font-family, var(--kup-font-family));--kup_form_font_size:var(--kup-form-font-size, var(--kup-font-size));display:block;font-family:var(--kup_form_font_family);font-size:var(--kup_form_font_size)}:host([label-placement=left]) .form__label{width:0}:host([label-placement=right]) .form__field{min-width:200px;width:0}.form{background:var(--kup_form_background_color);color:var(--kup_form_color);display:flex;flex-grow:1;overflow:auto;position:relative}.form--column{flex-direction:column}.form__section{display:flex;flex:1 1 1%;flex-direction:row;flex-wrap:wrap}.form__section--column{flex-direction:column;flex-wrap:unset}.form__section--column>.form__section{flex:0 0 auto}.form__section--grid{display:grid}.form__section--titled{border:1px solid var(--kup-border-color);padding-top:5px;position:relative;margin:10px}.form__section--titled>h3{background:var(--kup-background-color);font-size:calc(var(--kup-font-size) * 1.15);position:absolute;margin:0px;padding:0 8px;top:-11px;left:5px;transition:background-color 0.25s ease}.form__label{-webkit-font-smoothing:antialiased;font-size:0.875em;letter-spacing:0.0178571429em;white-space:nowrap}.form__field{min-height:16px}.form__field img{height:auto}.form .f-cell.c-right-aligned:not(.c-centered) .f-cell__content{justify-content:flex-start}";export{b as kup_form}