@sme.up/ketchup 6.8.0 → 7.0.0

package/dist/ketchup/{p-991bd70d.entry.js → p-ec2d1c8c.entry.js}

@@ -1 +1 @@
-import{r as i,c as t,f as e,h as a,H as s,g as r}from"./p-4fdb684f.js";import{k as o,g as n,s as l,l as p,d as m}from"./p-a740352c.js";import{c}from"./p-97e8ea42.js";import{F as h}from"./p-ecac6269.js";import{F as g}from"./p-a992cf87.js";import{F as _}from"./p-6c77a36c.js";import{F as u}from"./p-3cf97e3a.js";import{M as d}from"./p-81605f08.js";import"./p-23cd5a68.js";import"./p-61ff1761.js";import"./p-395675b8.js";import"./p-79b0730b.js";var f;!function(i){i.customStyle="Custom style of the component.",i.data="Actual data of the component",i.ripple="When enabled displays Material's ripple effect on clicked items."}(f||(f={}));class k{constructor(){this.load=!1}toDebugString(){return"image-list state"}}var b,v,w,y,x,j,C,M=function(i,t,e,a){if("a"===e&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?i!==t||!a:!t.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?a:"a"===e?a.call(i):a?a.value:t.get(i)};const W=class{constructor(e){i(this,e),this.kupClick=t(this,"kup-imagelist-click",6),this.kupContextMenu=t(this,"kup-imagelist-contextmenu",6),this.kupDblClick=t(this,"kup-imagelist-dblclick",6),b.add(this),this.state=new k,this.kupManager=o(),v.set(this,[]),w.set(this,o()),y.set(this,{icon:"arrow_back",onClick:()=>{this.currentNode=M(this,w,"f").data.node.getParent(this.data,this.currentNode),this.currentNode||(this.navigationBarToggled=!1)},styling:_.FLAT,wrapperClass:"navigation-bar__back"}),x.set(this,{icon:"arrow_upward",onClick:()=>{this.currentNode=null,this.navigationBarToggled=!1},styling:_.FLAT,wrapperClass:"navigation-bar__top"}),this.currentNode=null,this.navigationBarToggled=!1,this.customStyle="",this.data=[],this.ripple=!0,this.selectedNode=[],this.stateId="",this.store=void 0}initWithPersistedState(){if(this.store&&this.stateId){const i=this.store.getState(this.stateId);null!=i&&(this.currentNode=this.kupManager.data.node.findByStrTreeNodePath(this.data,i.selectedTreeNodePath))}}persistState(){if(this.store&&this.stateId){let i=!1,t=this.currentNode?this.currentNode.id:"";if(this.kupManager.objects.deepEqual(this.state.selectedTreeNodePath,t)||(this.state.selectedTreeNodePath=t,i=!0),!this.state.load)return void(this.state.load=!0);i&&this.store.persistState(this.stateId,this.state)}}onKupClick(i){i.children&&i.children.length>0&&(this.currentNode=i),this.kupClick.emit({comp:this,id:this.rootElement.id,node:i})}onKupContextMenu(i,t){i.preventDefault(),this.kupContextMenu.emit({comp:this,id:this.rootElement.id,node:t})}onKupDblClick(i){for(let i=0;i<M(this,v,"f").length;i++)clearTimeout(M(this,v,"f")[i]);(function(i,t,e,a,s){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?i!==t||!s:!t.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===a?s.call(i,e):s?s.value=e:t.set(i,e)})(this,v,[],"f"),this.kupDblClick.emit({comp:this,id:this.rootElement.id,node:i})}selectNode(i){i&&0!=i.length&&(this.currentNode=this.kupManager.data.node.find(this.data,i))}async getProps(i){return n(this,f,i)}async refresh(){e(this)}async setProps(i){l(this,f,i)}componentWillLoad(){M(this,w,"f").debug.logLoad(this,!1),M(this,w,"f").language.register(this),M(this,w,"f").theme.register(this)}componentDidLoad(){M(this,w,"f").debug.logLoad(this,!0)}componentWillRender(){M(this,w,"f").debug.logRender(this,!1)}componentDidRender(){const i=this.rootElement.shadowRoot;if(i&&this.ripple){const t=i.querySelectorAll(".mdc-ripple-surface:not(.mdc-ripple-upgraded)");if(t)for(let i=0;i<t.length;i++)d.attachTo(t[i])}this.persistState(),M(this,w,"f").debug.logRender(this,!0)}render(){const i=!!this.currentNode;return a(s,null,a("style",null,M(this,w,"f").theme.setKupStyle(this.rootElement)),a("div",{id:c},a("div",{class:"navigation-bar"},i?a("div",{class:"navigation-bar__wrapper "+(this.navigationBarToggled?"navigation-bar__wrapper--active":"")},a("div",{class:"navigation-bar__title",onClick:()=>{this.navigationBarToggled=!this.navigationBarToggled}},a(h,{fit:!0,resource:this.currentNode.icon,sizeX:"1.25em",sizeY:"1.25em",wrapperClass:"navigation-bar__title__image"}),a("div",{class:"navigation-bar__title__label"},this.currentNode.value)),a(g,Object.assign({},M(this,y,"f"),{label:M(this,w,"f").language.translate(p.BACK)})),a(g,Object.assign({},M(this,x,"f"),{label:M(this,w,"f").language.translate(p.TOP)}))):null),a("div",{class:"image-list"},...M(this,b,"m",C).call(this))))}disconnectedCallback(){M(this,w,"f").language.unregister(this),M(this,w,"f").theme.unregister(this)}get rootElement(){return r(this)}static get watchers(){return{selectedNode:["selectNode"]}}};v=new WeakMap,w=new WeakMap,y=new WeakMap,x=new WeakMap,b=new WeakSet,j=function(i){const t=a(h,Object.assign({},{fit:!0,resource:i.icon,title:i.title,wrapperClass:"image-list__image"})),e=a("div",{class:"image-list__label"},i.value);return a(u,{cell:{value:i.value,icon:i.icon,obj:i.obj},column:{name:"IMAGE",title:"Image"},component:this,density:m.NONE,row:Object.assign({},i)},a("div",{class:"image-list__wrapper"},t,e))},C=function(){const i=[],t=this.currentNode?this.currentNode.children:this.data;for(let e=0;t&&e<t.length;e++){const s=t[e],r=a("div",{onClick:()=>{M(this,v,"f").push(setTimeout((()=>this.onKupClick(s)),300))},onContextMenu:i=>this.onKupContextMenu(i,s),onDblClick:()=>this.onKupDblClick(s),class:{"image-list__item":!0,"mdc-ripple-surface":!!this.ripple}},M(this,b,"m",j).call(this,s));i.push(r)}return i},W.style=":host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, 0.5em);--kup_imagelist_image_margin:var(--kup-imagelist-image-margin, 1em auto);--kup_imagelist_image_min_height:var(--kup-imagelist-image-min-height, 64px);--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    8px\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-text-color)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{font-size:1.2em;font-weight:bold;letter-spacing:0.12em;overflow:hidden;padding:0 0.5em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%}.image-list .f-cell{height:100%;width:100%}.image-list__item{border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__image.f-image{margin:var(--kup_imagelist_image_margin)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{color:var(--kup_imagelist_text_color);letter-spacing:0.12em;margin:var(--kup_imagelist_label_margin);overflow:hidden;text-align:center;text-overflow:ellipsis}.image-list .mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.image-list .mdc-ripple-surface:before,.image-list .mdc-ripple-surface:after{background-color:var(--kup_imagelist_primary_color)}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";export{W as kup_image_list}
+import{r as i,c as t,f as e,h as a,H as s,g as r}from"./p-4fdb684f.js";import{k as o,g as n,s as l,l as p,d as m}from"./p-5781af8a.js";import{c}from"./p-97e8ea42.js";import{F as h}from"./p-e3b85cae.js";import{F as g}from"./p-200c76a8.js";import{F as _}from"./p-6c77a36c.js";import{F as u}from"./p-e8666a6d.js";import{M as d}from"./p-81605f08.js";import"./p-23cd5a68.js";import"./p-c1a5ed6b.js";import"./p-86e4bfad.js";import"./p-79b0730b.js";var f;!function(i){i.customStyle="Custom style of the component.",i.data="Actual data of the component",i.ripple="When enabled displays Material's ripple effect on clicked items."}(f||(f={}));class k{constructor(){this.load=!1}toDebugString(){return"image-list state"}}var b,v,w,y,x,j,C,M=function(i,t,e,a){if("a"===e&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?i!==t||!a:!t.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?a:"a"===e?a.call(i):a?a.value:t.get(i)};const W=class{constructor(e){i(this,e),this.kupClick=t(this,"kup-imagelist-click",6),this.kupContextMenu=t(this,"kup-imagelist-contextmenu",6),this.kupDblClick=t(this,"kup-imagelist-dblclick",6),b.add(this),this.state=new k,this.kupManager=o(),v.set(this,[]),w.set(this,o()),y.set(this,{icon:"arrow_back",onClick:()=>{this.currentNode=M(this,w,"f").data.node.getParent(this.data,this.currentNode),this.currentNode||(this.navigationBarToggled=!1)},styling:_.FLAT,wrapperClass:"navigation-bar__back"}),x.set(this,{icon:"arrow_upward",onClick:()=>{this.currentNode=null,this.navigationBarToggled=!1},styling:_.FLAT,wrapperClass:"navigation-bar__top"}),this.currentNode=null,this.navigationBarToggled=!1,this.customStyle="",this.data=[],this.ripple=!0,this.selectedNode=[],this.stateId="",this.store=void 0}initWithPersistedState(){if(this.store&&this.stateId){const i=this.store.getState(this.stateId);null!=i&&(this.currentNode=this.kupManager.data.node.findByStrTreeNodePath(this.data,i.selectedTreeNodePath))}}persistState(){if(this.store&&this.stateId){let i=!1,t=this.currentNode?this.currentNode.id:"";if(this.kupManager.objects.deepEqual(this.state.selectedTreeNodePath,t)||(this.state.selectedTreeNodePath=t,i=!0),!this.state.load)return void(this.state.load=!0);i&&this.store.persistState(this.stateId,this.state)}}onKupClick(i){i.children&&i.children.length>0&&(this.currentNode=i),this.kupClick.emit({comp:this,id:this.rootElement.id,node:i})}onKupContextMenu(i,t){i.preventDefault(),this.kupContextMenu.emit({comp:this,id:this.rootElement.id,node:t})}onKupDblClick(i){for(let i=0;i<M(this,v,"f").length;i++)clearTimeout(M(this,v,"f")[i]);(function(i,t,e,a,s){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?i!==t||!s:!t.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===a?s.call(i,e):s?s.value=e:t.set(i,e)})(this,v,[],"f"),this.kupDblClick.emit({comp:this,id:this.rootElement.id,node:i})}selectNode(i){i&&0!=i.length&&(this.currentNode=this.kupManager.data.node.find(this.data,i))}async getProps(i){return n(this,f,i)}async refresh(){e(this)}async setProps(i){l(this,f,i)}componentWillLoad(){M(this,w,"f").debug.logLoad(this,!1),M(this,w,"f").language.register(this),M(this,w,"f").theme.register(this)}componentDidLoad(){M(this,w,"f").debug.logLoad(this,!0)}componentWillRender(){M(this,w,"f").debug.logRender(this,!1)}componentDidRender(){const i=this.rootElement.shadowRoot;if(i&&this.ripple){const t=i.querySelectorAll(".mdc-ripple-surface:not(.mdc-ripple-upgraded)");if(t)for(let i=0;i<t.length;i++)d.attachTo(t[i])}this.persistState(),M(this,w,"f").debug.logRender(this,!0)}render(){const i=!!this.currentNode;return a(s,null,a("style",null,M(this,w,"f").theme.setKupStyle(this.rootElement)),a("div",{id:c},a("div",{class:"navigation-bar"},i?a("div",{class:"navigation-bar__wrapper "+(this.navigationBarToggled?"navigation-bar__wrapper--active":"")},a("div",{class:"navigation-bar__title",onClick:()=>{this.navigationBarToggled=!this.navigationBarToggled}},a(h,{fit:!0,resource:this.currentNode.icon,sizeX:"1.25em",sizeY:"1.25em",wrapperClass:"navigation-bar__title__image"}),a("div",{class:"navigation-bar__title__label"},this.currentNode.value)),a(g,Object.assign({},M(this,y,"f"),{label:M(this,w,"f").language.translate(p.BACK)})),a(g,Object.assign({},M(this,x,"f"),{label:M(this,w,"f").language.translate(p.TOP)}))):null),a("div",{class:"image-list"},...M(this,b,"m",C).call(this))))}disconnectedCallback(){M(this,w,"f").language.unregister(this),M(this,w,"f").theme.unregister(this)}get rootElement(){return r(this)}static get watchers(){return{selectedNode:["selectNode"]}}};v=new WeakMap,w=new WeakMap,y=new WeakMap,x=new WeakMap,b=new WeakSet,j=function(i){const t=a(h,Object.assign({},{fit:!0,resource:i.icon,title:i.title,wrapperClass:"image-list__image"})),e=a("div",{class:"image-list__label"},i.value);return a(u,{cell:{value:i.value,icon:i.icon,obj:i.obj},column:{name:"IMAGE",title:"Image"},component:this,density:m.NONE,row:Object.assign({},i)},a("div",{class:"image-list__wrapper"},t,e))},C=function(){const i=[],t=this.currentNode?this.currentNode.children:this.data;for(let e=0;t&&e<t.length;e++){const s=t[e],r=a("div",{onClick:()=>{M(this,v,"f").push(setTimeout((()=>this.onKupClick(s)),300))},onContextMenu:i=>this.onKupContextMenu(i,s),onDblClick:()=>this.onKupDblClick(s),class:{"image-list__item":!0,"mdc-ripple-surface":!!this.ripple}},M(this,b,"m",j).call(this,s));i.push(r)}return i},W.style=":host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, 0.5em);--kup_imagelist_image_margin:var(--kup-imagelist-image-margin, 1em auto);--kup_imagelist_image_min_height:var(--kup-imagelist-image-min-height, 64px);--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    8px\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-text-color)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{font-size:1.2em;font-weight:bold;letter-spacing:0.12em;overflow:hidden;padding:0 0.5em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%}.image-list .f-cell{height:100%;width:100%}.image-list__item{border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__image.f-image{margin:var(--kup_imagelist_image_margin)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{color:var(--kup_imagelist_text_color);letter-spacing:0.12em;margin:var(--kup_imagelist_label_margin);overflow:hidden;text-align:center;text-overflow:ellipsis}.image-list .mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.image-list .mdc-ripple-surface:before,.image-list .mdc-ripple-surface:after{background-color:var(--kup_imagelist_primary_color)}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";export{W as kup_image_list}

package/dist/types/adoptedStyleSheet-shim.d.ts

@@ -1,4 +1,4 @@
-// This shim is used to inform the TS compiler of the presence of the adoptedStyleSheets object on the shadow root object.
-declare interface ShadowRoot {
-    adoptedStyleSheets: CSSStyleSheet[];
+// This shim is used to inform the TS compiler of the presence of the adoptedStyleSheets object on the shadow root object.
+declare interface ShadowRoot {
+    adoptedStyleSheets: CSSStyleSheet[];
 }

package/dist/types/components/kup-box/kup-box-declarations.d.ts

@@ -48,22 +48,22 @@ export interface KupBoxRow extends KupDataRow {
 }
 export interface KupBoxLayout {
   horizontal?: boolean;
-  sections?: Section[];
+  sections?: KupBoxSection[];
 }
-export interface Section {
-  id?: string;
-  horizontal?: boolean;
+export interface KupBoxSection {
+  collapsible?: boolean;
+  columns?: number;
+  content?: KupBoxObject[];
   dim?: string;
-  sections?: Section[];
-  content?: BoxObject[];
+  horizontal?: boolean;
+  id?: string;
+  sections?: KupBoxSection[];
   style?: {
     [index: string]: string;
   };
-  collapsible?: boolean;
-  columns?: number;
   title?: string;
 }
-export interface BoxObject {
+export interface KupBoxObject {
   column?: string;
   value?: string;
   shape?: FCellShapes;

package/dist/types/components/kup-card/box/kup-card-box.d.ts

@@ -24,3 +24,27 @@ export declare function create3(component: KupCard): VNode;
  * @returns {VNode} 4th box layout virtual node.
  */
 export declare function create4(component: KupCard): VNode;
+/**
+ * 5th box card layout, image on the left and rows of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 5th box layout virtual node.
+ */
+export declare function create5(component: KupCard): VNode;
+/**
+ * 6th box card layout, image on the left and vertical list of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 6th box layout virtual node.
+ */
+export declare function create6(component: KupCard): VNode;
+/**
+ * 7th box card layout, image above and rows of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 7th box layout virtual node.
+ */
+export declare function create7(component: KupCard): VNode;
+/**
+ * 8th box card layout, image above and vertical list of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 8th box layout virtual node.
+ */
+export declare function create8(component: KupCard): VNode;

package/dist/types/components/kup-form/kup-form-declarations.d.ts

@@ -8,7 +8,9 @@ export declare enum KupFormProps {
   customStyle = "Custom style of the component.",
   data = "Actual data of the form.",
   hiddenSubmitButton = "Creates a hidden submit button in order to submit the form with enter.",
-  layout = "How the form will arrange its content."
+  labelPlacement = "Sets the label placement for 'all' fields in form",
+  layout = "How the form will arrange its content.",
+  submitCb = "Sets the callback function on submit form"
 }
 export interface KupFormData {
   columns?: KupDataColumn[];
@@ -56,6 +58,7 @@ export declare enum KupFormLabelPlacement {
   LEFT = "left",
   HIDDEN = "hidden",
   PLACEHOLDER = "placeholder",
+  WATERMARK = "watermark",
   RIGHT = "right",
   TOP = "top"
 }

package/dist/types/components/kup-form/kup-form.d.ts

@@ -1,4 +1,4 @@
-import { KupFormLayout, KupFormData } from './kup-form-declarations';
+import { KupFormLayout, KupFormData, KupFormLabelPlacement } from './kup-form-declarations';
 import { GenericObject } from '../../types/GenericTypes';
 export declare class KupForm {
   /**
@@ -21,11 +21,21 @@ export declare class KupForm {
    * @default false
    */
   hiddenSubmitButton: boolean;
+  /**
+   * Sets the label placement for 'all' fields in form
+   * @default KupFormLabelPlacement.LEFT
+   */
+  labelPlacement: KupFormLabelPlacement;
   /**
    * How the form will arrange its content.
    * @default null
    */
   layout: KupFormLayout;
+  /**
+   * Sets the callback function on submit form
+   * @default null
+   */
+  submitCb: (e: SubmitEvent) => unknown;
   private kupManager;
   private formLayout;
   private visibleColumns;

package/dist/types/components.d.ts

@@ -33,7 +33,7 @@ import { KupEchartClickEventPayload, KupEchartLegendPlacement, KupEchartMaps, Ku
 import { GeoJSON } from "geojson";
 import { XAXisComponentOption, YAXisComponentOption } from "echarts";
 import { KupFamilyTreeData, KupFamilyTreeEventPayload, KupFamilyTreeLayout, KupFamilyTreeNode } from "./components/kup-family-tree/kup-family-tree-declarations";
-import { KupFormData, KupFormLayout } from "./components/kup-form/kup-form-declarations";
+import { KupFormData, KupFormLabelPlacement, KupFormLayout } from "./components/kup-form/kup-form-declarations";
 import { KupBadge } from "./components/kup-badge/kup-badge";
 import { FImageData } from "./f-components/f-image/f-image-declarations";
 import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
@@ -1712,6 +1712,11 @@ export namespace Components {
           * @default false
          */
         "hiddenSubmitButton": boolean;
+        /**
+          * Sets the label placement for 'all' fields in form
+          * @default KupFormLabelPlacement.LEFT
+         */
+        "labelPlacement": KupFormLabelPlacement;
         /**
           * How the form will arrange its content.
           * @default null
@@ -1732,6 +1737,11 @@ export namespace Components {
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb": (e: SubmitEvent) => unknown;
     }
     interface KupGauge {
         /**
@@ -4948,11 +4958,21 @@ declare namespace LocalJSX {
           * @default false
          */
         "hiddenSubmitButton"?: boolean;
+        /**
+          * Sets the label placement for 'all' fields in form
+          * @default KupFormLabelPlacement.LEFT
+         */
+        "labelPlacement"?: KupFormLabelPlacement;
         /**
           * How the form will arrange its content.
           * @default null
          */
         "layout"?: KupFormLayout;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb"?: (e: SubmitEvent) => unknown;
     }
     interface KupGauge {
         /**

package/dist/types/f-components/f-cell/f-cell-declarations.d.ts

@@ -34,6 +34,7 @@ export declare enum FCellEvents {
   CLICK = "kup-cell-click",
   ICON_CLICK = "kup-cell-iconclick",
   INPUT = "kup-cell-input",
+  KEYUP = "kup-cell-keyup",
   UPDATE = "kup-cell-update"
 }
 /**
@@ -151,7 +152,7 @@ export declare const kupTypes: FCellTypes[];
 export interface FCellEventPayload extends KupEventPayload {
   cell: KupDataCell;
   column: KupDataColumn;
-  event: CustomEvent | InputEvent | MouseEvent;
+  event: CustomEvent | InputEvent | MouseEvent | KeyboardEvent;
   row: KupDataRow;
   type: FCellTypes;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "6.8.0",
+    "version": "7.0.0",
     "keywords": [
         "smeup",
         "KetchUP",

package/dist/ketchup/p-3cf97e3a.js

@@ -1 +0,0 @@
-import{al as e,am as c,b as t,a7 as a,an as s,ao as n,ai as l,ap as i,aq as r,af as u,ar as o}from"./p-a740352c.js";import{h as p}from"./p-4fdb684f.js";import{F as k}from"./p-23cd5a68.js";import{F as b}from"./p-61ff1761.js";import{F as d}from"./p-ecac6269.js";import{a as f}from"./p-395675b8.js";const h=e=>p("div",Object.assign({class:`f-switch ${e.danger?"kup-danger":""} ${e.info?"kup-info":""} ${e.secondary?"kup-secondary":""} ${e.success?"kup-success":""} ${e.warning?"kup-warning":""} ${e.wrapperClass?e.wrapperClass:""}`},e.dataSet,{id:e.id,title:e.title}),p("div",{class:"form-field "+(e.leadingLabel?"form-field--align-end":"")},p("div",{class:`switch ${e.checked?"switch--checked":""} ${e.disabled?"switch--disabled":""}`},p("div",{class:"switch__track"}),p("div",{class:"switch__thumb-underlay"},p("div",{class:"switch__thumb"},p("input",{type:"checkbox",class:"switch__native-control",role:"switch",checked:e.checked,disabled:e.disabled,value:e.checked?"on":"off",onBlur:e.onBlur,onChange:e.onChange,onFocus:e.onFocus})))),p("label",{onClick:e.onChange},e.label))),m=document.documentElement,j=(n,r)=>{const j=n.cell,O=n.column,y=n.row,_=n.shape?n.shape:j.shape?j.shape:O.shape?O.shape:null,x=!m.ketchup.objects.isEmptyKupObj(j.obj),$=!(!j.isEditable&&!O.isEditable||!n.editable),C=n.previousValue!==j.value?j.value:"",z=m.ketchup.data.cell.getType(j,_),F=Object.assign({},j.data);let V=j.cssClass?j.cssClass:O.cssClass?O.cssClass:"";const H={"f-cell":!0,[i.OBJ]:!!x,[z+"-cell"]:!0,[n.wrapperClass]:!!n.wrapperClass,[n.density]:!(!n.density||z===a.BAR),[V]:!!V};let I=C;$&&e.includes(z)?I=function(e,c,t,s,n){switch(e){case a.AUTOCOMPLETE:return p("kup-autocomplete",Object.assign({key:s.name+n.row.id,initialValue:t.value},t.data,{class:g(n)?"kup-full-width":"","onkup-autocomplete-change":c=>v(c,n,e,o.UPDATE),"onkup-autocomplete-input":c=>v(c,n,e,o.INPUT),"onkup-autocomplete-iconclick":c=>v(c,n,e,o.ICON_CLICK)}));case a.CHECKBOX:return w(n)&&(c[i.C_CENTERED]=!0),p(k,Object.assign({},t.data,{onChange:c=>v(c,n,e,o.UPDATE)}));case a.COLOR_PICKER:return p("kup-color-picker",Object.assign({key:s.name+n.row.id,initialValue:t.value},t.data,{class:g(n)?"kup-full-width":"",disabled:!1,"onkup-colorpicker-change":c=>v(c,n,e,o.UPDATE)}));case a.COMBOBOX:return p("kup-combobox",Object.assign({key:s.name+n.row.id,initialValue:t.value},t.data,{class:g(n)?"kup-full-width":"","onkup-combobox-change":c=>v(c,n,e,o.UPDATE),"onkup-combobox-input":c=>v(c,n,e,o.INPUT),"onkup-combobox-iconclick":c=>v(c,n,e,o.ICON_CLICK)}));case a.DATE:return p("kup-date-picker",Object.assign({key:s.name+n.row.id,initialValue:t.value},t.data,{class:g(n)?"kup-full-width":"","onkup-datepicker-change":c=>v(c,n,e,o.UPDATE),"onkup-datepicker-input":c=>v(c,n,e,o.INPUT)}));case a.RATING:return p("kup-rating",Object.assign({key:s.name+n.row.id},t.data,{disabled:!1,"onkup-rating-click":c=>v(c,n,e,o.UPDATE)}));case a.SWITCH:return p(h,Object.assign({},t.data,{disabled:!1,onChange:c=>v(c,n,e,o.UPDATE)}));case a.TIME:return p("kup-time-picker",Object.assign({key:s.name+n.row.id,initialValue:t.value},t.data,{class:g(n)?"kup-full-width":"","onkup-timepicker-change":c=>v(c,n,e,o.UPDATE),"onkup-timepicker-input":c=>v(c,n,e,o.INPUT)}));case a.NUMBER:c[i.C_RIGHT_ALIGNED]=!0;case a.STRING:return p(b,Object.assign({inputType:e===a.NUMBER?"number":null,fullWidth:!!g(n)},t.data,{icon:t.icon?t.icon:s.icon?s.icon:null,value:e===a.NUMBER?l(t.value).toString():t.value,onChange:c=>v(c,n,e,o.UPDATE),onInput:c=>v(c,n,e,o.INPUT),onIconClick:c=>v(c,n,e,o.ICON_CLICK)}))}}(z,H,j,O,n):j.data&&c.includes(z)?(n.setSizes&&function(e,c,t){switch(e){case a.BAR:c.sizeY||(c.sizeY="26px");break;case a.BUTTON:let e="";c.label&&(e="36px"),t.style?t.style.height||(t.style.minHeight=e):t.style={minHeight:e};break;case a.CHART:c.sizeX||(c.sizeX="100%"),c.sizeY||(c.sizeY="100%");break;case a.CHIP:case a.RADIO:t.style?t.style.height||(t.style.minHeight="40px"):t.style={minHeight:"40px"}}}(z,F,j),I=n.renderKup?function(e,c,t,s,n,r,u){switch(e){case a.BAR:return t.data?p("div",{style:{height:t.sizeY,width:"100%"}},p(d,Object.assign({},t))):p("kup-image",Object.assign({key:r.name+u.row.id},t));case a.BUTTON:return w(u)&&(c[i.C_CENTERED]=!0),p("kup-button",Object.assign({key:r.name+u.row.id},t,{"onkup-button-click":c=>v(c,u,e,o.CLICK)}));case a.BUTTON_LIST:return w(u)&&(c[i.C_CENTERED]=!0),t["data-storage"]={cell:s,row:n,column:r},p("kup-button-list",Object.assign({key:r.name+u.row.id},t));case a.CHART:return w(u)&&(c[i.C_CENTERED]=!0),p("kup-chart",Object.assign({key:r.name+u.row.id},t));case a.CHIP:return p(f,Object.assign({},t));case a.COLOR_PICKER:return p("kup-color-picker",Object.assign({key:r.name+u.row.id},t,{class:g(u)?"kup-full-width":"",disabled:!0}));case a.GAUGE:return p("kup-gauge",Object.assign({key:r.name+u.row.id,value:l(s.value),"width-component":"280px"},t));case a.KNOB:case a.PROGRESS_BAR:return p("kup-progress-bar",Object.assign({key:r.name+u.row.id},t));case a.RADIO:return w(u)&&(c[i.C_CENTERED]=!0),t.disabled=n.readOnly,p("kup-radio",Object.assign({key:r.name+u.row.id},t));case a.RATING:return p("kup-rating",Object.assign({key:r.name+u.row.id},t,{disabled:!0}))}}(z,H,F,j,y,O,n):p("span",{class:"cell-"+z+" placeholder"})):(n.setSizes&&function(e,c,t,n){switch(e){case a.CHECKBOX:case a.ICON:c.sizeX||(c.sizeX="18px"),c.sizeY||(c.sizeY="18px"),t.style?t.style.height||(t.style.minHeight=c.sizeY):t.style={minHeight:c.sizeY};break;case a.IMAGE:n.component.rootElement.tagName===s.BOX?(c.sizeY||(c.sizeY="auto"),void 0===c.fit&&(c.fit=!0)):c.sizeX||(c.sizeX="auto"),c.sizeY||(c.sizeY="64px")}}(z,F,j,n),I=function(e,c,t,s,n,r,o){switch(e){case a.AUTOCOMPLETE:case a.COMBOBOX:case a.DATE:case a.DATETIME:case a.TIME:if(t&&""!=t){const e=u(r,n);return p("div",{class:"f-cell__text"},e)}return t;case a.CHECKBOX:return w(o)&&(s[i.C_CENTERED]=!0),p(d,{resource:c.checked?"check_box":"check_box_outline_blank",sizeX:"18px",sizeY:"18px"});case a.EDITOR:return p("div",{innerHTML:n.value});case a.ICON:case a.IMAGE:return w(o)&&(s[i.C_CENTERED]=!0),c.badgeData&&(s[i.C_PADDED]=!0),p(d,Object.assign({},c));case a.LINK:return p("a",{href:t,target:"_blank"},n.value);case a.NUMBER:if(t&&""!=t){const e=l(n.value),c=u(r,n);return e<0&&(s[i.TEXT_DANGER]=!0),w(o)&&(s[i.C_RIGHT_ALIGNED]=!0),p("div",{class:"f-cell__text"},c)}return p("div",{class:"f-cell__text"},t);case a.SWITCH:return w(o)&&(s[i.C_CENTERED]=!0),c.disabled=!0,p(h,Object.assign({},c));default:return p("div",{class:"f-cell__text"},t)}}(z,F,I,H,j,O,n));let T=null;!$&&(O.icon||j.icon)&&I&&(T=p(d,Object.assign({},{color:`rgba(var(${t.TEXT}-rgb), 0.375)`,resource:j.icon?j.icon:O.icon,sizeX:"1.25em",sizeY:"1.25em",wrapperClass:"obj-icon"})));let X=null;m.ketchup.debug.isDebug()&&x?X=j.obj.t+"; "+j.obj.p+"; "+j.obj.k+";":null!=j.title&&""!=j.title.trim()&&(X=j.title);let Y=null;if(j.info){const e=Object.assign({},j.info);e.color||(e.color=`var(${t.INFO})`),e.icon||(e.icon="info"),Y=p(d,Object.assign({},{color:e.color,resource:e.icon,sizeX:"1.25em",sizeY:"1.25em",title:e.message?e.message:"",wrapperClass:"cell-info"}))}return p("div",{class:H,"kup-get-cell-props":()=>n,style:j.style},p("div",{class:"f-cell__content",style:j.styleContent,title:X},r&&r.length>0?r:[n.indents,Y,T,I]))};function v(e,c,t,s){const n=c.cell,l=c.column,i=c.component,r=c.row;let p="INPUT"===e.target.tagName?e.target.value:e.detail.value;if(s===o.UPDATE){switch(t){case a.AUTOCOMPLETE:case a.COMBOBOX:case a.DATE:case a.TIME:n.data&&(n.data.initialValue=p);break;case a.CHECKBOX:case a.SWITCH:p="on"===p?"0":"1",n.data&&(n.data.checked="0"!==p)}n.obj&&(n.obj.k=p.toString()),n.value=p.toString(),n.displayedValue=null,n.displayedValue=u(l,n)}if(i&&i.rootElement){const c=new CustomEvent(s,{bubbles:!0,cancelable:!0,composed:!0,detail:{comp:i,id:i.rootElement.id,cell:n,column:l,event:e,row:r,type:t}});i.rootElement.dispatchEvent(c);try{i.refresh()}catch(e){}}}function w(e){var c;return r.includes(null===(c=e.component)||void 0===c?void 0:c.rootElement.tagName)}function g(e){var c;return n.includes(null===(c=e.component)||void 0===c?void 0:c.rootElement.tagName)}export{j as F,h as a}