@sme.up/ketchup 7.2.0 → 7.3.1

package/dist/ketchup/{p-6dde2079.entry.js → p-fe34fa6e.entry.js}

@@ -1 +1 @@
-import{r as t,c as s,f as i,h as o,H as a,g as n}from"./p-9dcfbb1e.js";import{k as e,g as r,s as c}from"./p-b67a295b.js";import{c as l}from"./p-97e8ea42.js";import{F as p}from"./p-7e9f8adf.js";import"./p-6c77a36c.js";import"./p-519f4074.js";const h="snackbar";var u;!function(t){t.actionButton="Set of FButton props to set the action button.",t.closeButton="When true, the hide button will be displayed.",t.customStyle="Custom style of the component.",t.text="Sets the textual content of the snackbar.",t.timeout="Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds."}(u||(u={}));const b=class{constructor(i){t(this,i),this.kupActionClick=s(this,"kup-snackbar-actionclick",6),this.kupManager=e(),this.visible=!1,this.actionButton=null,this.closeButton=!0,this.customStyle="",this.text="",this.timeout=null}onKupActionClick(){this.hide(),this.kupActionClick.emit({comp:this,id:this.rootElement.id})}async getProps(t){return r(this,u,t)}async hide(){this.visible=!1}async refresh(){i(this)}async setProps(t){c(this,u,t)}async show(){this.visible=!0}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){this.timeout&&this.visible&&setTimeout((()=>{this.hide()}),this.timeout),this.kupManager.debug.logRender(this,!0)}render(){return o(a,{"kup-visible":this.visible},o("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),o("div",{id:l},o("div",{class:h},o("div",{class:`${h}__text`},this.text),this.actionButton||this.closeButton?o("div",{class:`${h}__buttons`},this.actionButton?o("div",{class:`${h}__action`},o(p,Object.assign({},this.actionButton,{onClick:()=>this.onKupActionClick()}))):null,this.closeButton?o("div",{class:`${h}__close`},o(p,{icon:"close",onClick:()=>this.hide()})):null):null)))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return n(this)}};b.style=":host{animation:snackbar-show 125ms;bottom:0;box-sizing:border-box;display:block;left:0;outline:none;pointer-events:none;position:fixed;transition:opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;width:100%;z-index:calc(var(--kup-navbar-zindex) + 1)}:host(:not([kup-visible])){display:none}#kup-component{display:flex;justify-content:center;height:100%;padding:8px;width:100%}.snackbar{align-items:center;background:var(--kup-navbar-background-color);border-radius:5px;box-shadow:var(--kup-box-shadow);color:var(--kup-navbar-color);display:flex;justify-content:flex-start;max-width:672px;min-height:48px;min-width:344px}.snackbar__text{padding:14px 16px;pointer-events:all;white-space:nowrap}.snackbar__buttons{--kup-button-primary-color:var(--kup-navbar-color);--kup-button-primary-color-rgb:var(--kup-navbar-color-rgb);--kup-button-primary-color-h:var(--kup-navbar-color-h);--kup-button-primary-color-s:var(--kup-navbar-color-s);--kup-button-primary-color-l:var(--kup-navbar-color-l);align-items:center;display:flex;justify-content:flex-end;margin-right:8px;pointer-events:all;width:100%}.snackbar__close{--kup-button-font-size:11px;margin-left:8px;pointer-events:all}@keyframes snackbar-show{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}:host(.kup-top){bottom:unset;top:var(--kup-navbar-height, 0)}";export{b as kup_snackbar}
+import{r as t,c as s,f as i,h as o,H as a,g as n}from"./p-9dcfbb1e.js";import{k as e,g as r,s as c}from"./p-b63a5a44.js";import{c as l}from"./p-97e8ea42.js";import{F as p}from"./p-a1adab40.js";import"./p-6c77a36c.js";import"./p-a7ae0b4d.js";const h="snackbar";var u;!function(t){t.actionButton="Set of FButton props to set the action button.",t.closeButton="When true, the hide button will be displayed.",t.customStyle="Custom style of the component.",t.text="Sets the textual content of the snackbar.",t.timeout="Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds."}(u||(u={}));const b=class{constructor(i){t(this,i),this.kupActionClick=s(this,"kup-snackbar-actionclick",6),this.kupManager=e(),this.visible=!1,this.actionButton=null,this.closeButton=!0,this.customStyle="",this.text="",this.timeout=null}onKupActionClick(){this.hide(),this.kupActionClick.emit({comp:this,id:this.rootElement.id})}async getProps(t){return r(this,u,t)}async hide(){this.visible=!1}async refresh(){i(this)}async setProps(t){c(this,u,t)}async show(){this.visible=!0}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){this.timeout&&this.visible&&setTimeout((()=>{this.hide()}),this.timeout),this.kupManager.debug.logRender(this,!0)}render(){return o(a,{"kup-visible":this.visible},o("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),o("div",{id:l},o("div",{class:h},o("div",{class:`${h}__text`},this.text),this.actionButton||this.closeButton?o("div",{class:`${h}__buttons`},this.actionButton?o("div",{class:`${h}__action`},o(p,Object.assign({},this.actionButton,{onClick:()=>this.onKupActionClick()}))):null,this.closeButton?o("div",{class:`${h}__close`},o(p,{icon:"close",onClick:()=>this.hide()})):null):null)))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return n(this)}};b.style=":host{animation:snackbar-show 125ms;bottom:0;box-sizing:border-box;display:block;left:0;outline:none;pointer-events:none;position:fixed;transition:opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;width:100%;z-index:calc(var(--kup-navbar-zindex) + 1)}:host(:not([kup-visible])){display:none}#kup-component{display:flex;justify-content:center;height:100%;padding:8px;width:100%}.snackbar{align-items:center;background:var(--kup-navbar-background-color);border-radius:5px;box-shadow:var(--kup-box-shadow);color:var(--kup-navbar-color);display:flex;justify-content:flex-start;max-width:672px;min-height:48px;min-width:344px}.snackbar__text{padding:14px 16px;pointer-events:all;white-space:nowrap}.snackbar__buttons{--kup-button-primary-color:var(--kup-navbar-color);--kup-button-primary-color-rgb:var(--kup-navbar-color-rgb);--kup-button-primary-color-h:var(--kup-navbar-color-h);--kup-button-primary-color-s:var(--kup-navbar-color-s);--kup-button-primary-color-l:var(--kup-navbar-color-l);align-items:center;display:flex;justify-content:flex-end;margin-right:8px;pointer-events:all;width:100%}.snackbar__close{--kup-button-font-size:11px;margin-left:8px;pointer-events:all}@keyframes snackbar-show{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}:host(.kup-top){bottom:unset;top:var(--kup-navbar-height, 0)}";export{b as kup_snackbar}

package/dist/types/components/kup-card/built-in/kup-card-built-in.d.ts

@@ -32,7 +32,7 @@ export declare function create4(component: KupCard): VNode;
  */
 export declare function create5(component: KupCard): VNode;
 /**
- * 6th built-in layout, form with submit button.
+ * 6th built-in layout, message box with confirm and cancel buttons.
  * @param {KupCard} component - Card component.
  * @returns {VNode} 6th built-in layout virtual node.
  */

package/dist/types/components/kup-card/built-in/{kup-card-form.d.ts → kup-card-message-box.d.ts}

@@ -1,3 +1,3 @@
 import { VNode } from '../../../stencil-public-runtime';
 import { KupCard } from '../kup-card';
-export declare function prepareForm(component: KupCard): VNode[];
+export declare function prepareMessageBox(component: KupCard): VNode[];

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

@@ -3,7 +3,6 @@ import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
 import { SourceEvent } from '../kup-date-picker/kup-date-picker-declarations';
 import Picker from 'vanilla-picker';
 import { KupDataColumn, KupDataDataset } from '../../managers/kup-data/kup-data-declarations';
-import { KupFormData } from '../kup-form/kup-form-declarations';
 /**
  * Props of the kup-card component.
  * Used to export every prop in an object.
@@ -54,13 +53,12 @@ export interface KupCardBuiltInClockOptions {
   secondsActive?: boolean;
 }
 /**
- * Options of the built-in form.
+ * Options of the built-in message box.
  */
-export interface KupCardFormOptions {
-  form: KupFormData;
-  errors: boolean;
-  cancelCb?: () => void;
-  submitCb?: () => void;
+export interface KupCardBuiltInMessageBoxOptions {
+  cancelCb?: (e: MouseEvent) => unknown;
+  confirmCb?: (e: MouseEvent) => unknown;
+  text?: string;
 }
 /**
  * Options of the built-in column drop menu.
@@ -155,7 +153,7 @@ export interface KupCardData {
   image?: GenericObject[];
   list?: GenericObject[];
   object?: KupObj[];
-  options?: KupCardBuiltInCalendarOptions | KupCardBuiltInClockOptions | KupCardColumnDropMenuOptions | KupCardColorPickerOptions | KupCardBuiltInNumericOptions | KupCardFormOptions;
+  options?: KupCardBuiltInCalendarOptions | KupCardBuiltInClockOptions | KupCardColumnDropMenuOptions | KupCardColorPickerOptions | KupCardBuiltInNumericOptions | KupCardBuiltInMessageBoxOptions;
   progressbar?: GenericObject[];
   switch?: GenericObject[];
   tabbar?: GenericObject[];

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

@@ -1,5 +1,6 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { KupFormLayout, KupFormData, KupFormLabelPlacement } from './kup-form-declarations';
-import { GenericObject } from '../../types/GenericTypes';
+import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
 export declare class KupForm {
   /**
    * References the root HTML element of the component (<kup-form>).
@@ -62,6 +63,10 @@ export declare class KupForm {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   setProps(props: GenericObject): Promise<void>;
+  /**
+   * When component load is complete
+   */
+  kupReady: EventEmitter<KupEventPayload>;
   private getColumns;
   private initVisibleColumns;
   private getRows;

package/dist/types/components.d.ts

@@ -3309,6 +3309,10 @@ export interface KupFamilyTreeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupFamilyTreeElement;
 }
+export interface KupFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupFormElement;
+}
 export interface KupIframeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupIframeElement;
@@ -5144,6 +5148,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "layout"?: KupFormLayout;
+        /**
+          * When component load is complete
+         */
+        "onKup-form-ready"?: (event: KupFormCustomEvent<KupEventPayload>) => void;
         /**
           * Sets the callback function on submit form
           * @default null

package/package.json

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

package/dist/collection/components/kup-card/built-in/kup-card-form.js

@@ -1,11 +0,0 @@
-import { h } from '@stencil/core';
-import { FButton } from '../../../f-components/f-button/f-button';
-import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
-const dom = document.documentElement;
-export function prepareForm(component) {
-  const options = component.data.options;
-  return [
-    h("kup-form", null),
-    h("div", { class: "button-wrapper" }, h(FButton, { icon: "clear", label: "Cancel", styling: FButtonStyling.FLAT }), h(FButton, { icon: "check", label: "Confirm" })),
-  ];
-}

package/dist/ketchup/p-519f4074.js

@@ -1 +0,0 @@
-import{h as t,a as e}from"./p-9dcfbb1e.js";import{b as s}from"./p-b67a295b.js";var i;!function(t){t.BAR="bar"}(i||(i={}));const a=a=>{let r,o;a.resource?a.resource.indexOf(".")>-1||a.resource.indexOf("/")>-1||a.resource.indexOf("\\")>-1?(o={"--kup_image_height":a.sizeY?a.sizeY:"auto","--kup_image_width":a.sizeX?a.sizeX:"100%"},r=t("img",{src:a.resource})):(o={"--kup_image_height":a.sizeY?a.sizeY:"100%","--kup_image_width":a.sizeX?a.sizeX:"100%"},r=function(i){const a={"f-image__icon":!0},r={background:i.color?i.color:`var(${s.ICON})`};if(i.resource.indexOf("--kup")>-1){let t=i.resource.replace("--","");a["kup-icon"]=!0,a[t]=!0}else{const t=e(`./assets/svg/${i.resource}.svg`);r.mask=`url('${t}') no-repeat center`,r.webkitMask=`url('${t}') no-repeat center`}return t("div",{class:a,style:r})}(a)):a.data&&(o={"--kup_image_height":a.sizeY?a.sizeY:"100%","--kup_image_width":a.sizeX?a.sizeX:"100%"},r=function(e){const s=[];let a=0;for(let r=0;r<e.length;r++){let o;e[r].shape||(e[r].shape=i.BAR),e[r].color||(e[r].color="transparent"),e[r].height||(e[r].height="100%"),e[r].width||(e[r].width="100%");const n="step-"+r,c="css-step bottom-aligned",l={backgroundColor:e[r].color,left:a+"%",height:e[r].height,width:e[r].width};a+=parseFloat(e[r].width),o=t("span",{id:n,class:c,style:l}),s.push(o)}return t("div",{class:"f-image__css"},s)}(a.data));const n=[];if(a.badgeData)for(let e=0;e<a.badgeData.length;e++)n.push(t("kup-badge",Object.assign({},a.badgeData[e])));return t("div",Object.assign({class:`f-image ${a.wrapperClass?a.wrapperClass:""} ${a.fit?"kup-fit":""}`},a.dataSet,{id:a.id,style:o,title:a.title,onClick:a.onClick}),r,...n)};export{a as F}