@sme.up/ketchup 6.7.0 → 6.9.0-SNAPSHOT

package/dist/collection/components/kup-box/kup-box.js

@@ -20,136 +20,55 @@ import { pageChange, rowsPerPageChange, } from '../../f-components/f-paginator/f
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupBox {
   constructor() {
+    this.state = new KupBoxState();
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       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.visibleColumns = [];
+    this.rows = [];
+    this.filteredRows = [];
+    this.sectionRef = null;
+    this.rowsRefs = [];
+    this.hold = false;
+    this.interactableDrag = [];
+    this.interactableDrop = [];
+    this.interactableTouch = [];
     this.collapsedSection = {};
     this.selectedRows = [];
+    this.rowActionMenuOpened = undefined;
     this.currentPage = 1;
     this.currentRowsPerPage = 10;
-    this.state = new KupBoxState();
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Data of the card linked to the box when the latter's layout must be a premade template.
-     * @default null
-     */
     this.cardData = null;
-    /**
-     * Number of columns
-     * @default 1
-     */
     this.columns = 1;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Actual data of the box.
-     * @default null
-     */
     this.data = null;
-    /**
-     * Enable dragging
-     * @default false
-     */
     this.dragEnabled = false;
-    /**
-     * Enable dropping
-     * @default false
-     */
     this.dropEnabled = false;
-    /**
-     * Drop can be done in section
-     * @default false
-     */
     this.dropOnSection = false;
-    /**
-     * When set to true, editable cells will be rendered using input components.
-     * @default false
-     */
     this.editableData = false;
-    /**
-     * If enabled, a button to load / display the row actions
-     * will be displayed on the right of every box
-     * @default false
-     */
     this.enableRowActions = false;
-    /**
-     * When set to true it activates the global filter.
-     * @default false
-     */
     this.globalFilter = false;
-    /**
-     * The value of the global filter.
-     * @default ""
-     */
     this.globalFilterValue = '';
-    /**
-     * Displays the boxlist as a Kanban.
-     * @default null
-     */
     this.kanban = null;
-    /**
-     * Enable multi selection
-     * @default false
-     */
+    this.layout = undefined;
     this.multiSelection = false;
-    /**
-     * Current page number
-     * @default 1
-     */
     this.pageSelected = 1;
-    /**
-     * Number of boxes per page
-     * @default 10
-     */
     this.pageSize = 10;
-    /**
-     * Enables pagination
-     * @default false
-     */
     this.pagination = false;
-    /**
-     * Activates the scroll on hover function.
-     * @default false
-     */
+    this.rowsPerPage = undefined;
     this.scrollOnHover = false;
-    /**
-     * If enabled, highlights the selected box/boxes
-     * @default true
-     */
+    this.selectBox = undefined;
+    this.selectedRowsState = undefined;
     this.showSelection = true;
-    /**
-     * Enable sorting
-     * @default false
-     */
+    this.sortBy = undefined;
     this.sortEnabled = false;
     this.stateId = '';
-    /**
-     * Disable swipe
-     * @default false
-     */
+    this.store = undefined;
     this.swipeDisabled = 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();
-    this.visibleColumns = [];
-    this.rows = [];
-    this.filteredRows = [];
-    this.sectionRef = null;
-    this.rowsRefs = [];
-    this.hold = false;
-    this.interactableDrag = [];
-    this.interactableDrop = [];
-    this.interactableTouch = [];
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {

package/dist/collection/components/kup-button/kup-button.js

@@ -9,79 +9,24 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupButton {
   constructor() {
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
-     * The value of the component.
-     * @default ""
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
     this.value = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Sets the type of the button.
-     * @default null
-     */
     this.buttonType = null;
-    /**
-     * When set to true, the icon button state will be on.
-     * @default false
-     */
     this.checked = false;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     * @default false
-     */
     this.disabled = false;
-    /**
-     * When set, the button will show this icon.
-     * @default null
-     */
     this.icon = null;
-    /**
-     * When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed.
-     * @default null
-     */
     this.iconOff = null;
-    /**
-     * When set, the button will show this text.
-     * @default null
-     */
     this.label = null;
-    /**
-     * Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default.
-     * @default FButtonStyling.RAISED
-     */
     this.styling = FButtonStyling.RAISED;
-    /**
-     * When set to true, the button show a spinner received in slot.
-     * @default false
-     */
     this.showSpinner = false;
-    /**
-     * When set to true, the icon button will be toggable on/off.
-     * @default false
-     */
     this.toggable = false;
-    /**
-     * When set, the icon will be shown after the text.
-     * @default false
-     */
     this.trailingIcon = 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();
   }
   onKupBlur() {
     this.kupBlur.emit({

package/dist/collection/components/kup-button-list/kup-button-list.js

@@ -9,54 +9,19 @@ import { setProps } from '../../utils/utils';
 export class KupButtonList {
   constructor() {
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
-     * The id of the selected button.
-     * @default ""
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
     this.selected = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Number of columns.
-     * @default 0
-     */
     this.columns = 0;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Props of the sub-components.
-     * @default []
-     */
     this.data = [];
-    /**
-     * When set to true, the sub-components are disabled.
-     * @default false
-     */
     this.disabled = false;
-    /**
-     * When set to true, highlights the selected button with the secondary color of KupTheme.
-     * @default true
-     */
     this.showSelection = true;
-    /**
-     * Defines the style of the buttons. Available styles are "flat", "outlined" and "raised" (which is the default).
-     * @default FButtonStyling.RAISED
-     */
     this.styling = FButtonStyling.RAISED;
-    /*-------------------------------------------------*/
-    /*       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();
   }
   onKupClick(index, subIndex) {
     this.selected = index;

package/dist/collection/components/kup-calendar/kup-calendar.js

@@ -23,35 +23,6 @@ import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-dec
 import { KupDatesLocales } from '../../managers/kup-dates/kup-dates-declarations';
 export class KupCalendar {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD).
-     * @default null
-     */
-    this.currentDate = null;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * Actual data of the calendar.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * When disabled, the navigation toolbar won't be displayed.
-     * @default false
-     */
-    this.hideNavigation = false;
-    /**
-     * Type of the view.
-     * @default KupCalendarViewTypes.MONTH
-     */
-    this.viewType = KupCalendarViewTypes.MONTH;
     this.calendarContainer = null;
     this.kupManager = kupManagerInstance();
     this.navTitle = null;
@@ -63,6 +34,11 @@ export class KupCalendar {
     this.imageCol = null;
     this.startCol = null;
     this.styleCol = null;
+    this.currentDate = null;
+    this.customStyle = '';
+    this.data = null;
+    this.hideNavigation = false;
+    this.viewType = KupCalendarViewTypes.MONTH;
   }
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */

package/dist/collection/components/kup-card/box/kup-card-box.js

@@ -42,9 +42,12 @@ export function create2(component) {
       renderKup: true,
       row: { cells: { [column.name]: cell } },
     };
-    rows.push(h("div", { class: "flex-container" }, h("div", { class: "label" }, column.title), h("div", { class: "value" }, h(FCell, Object.assign({}, props)))));
+    props.cell.cssClass = props.cell.cssClass
+      ? props.cell.cssClass + ' c-right-aligned'
+      : 'c-right-aligned';
+    rows.push(h("tr", null, h("td", { class: "label" }, column.title), h("td", { class: "value" }, h(FCell, Object.assign({}, props)))));
   }
-  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, rows)));
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("table", null, rows)));
 }
 /**
  * 3rd box card layout, it can be used as a key-value row list.

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

@@ -3,6 +3,7 @@ import { KupCardCSSClasses } from '../kup-card-declarations';
 import { prepareCalendar } from './kup-card-calendar';
 import { prepareClock } from './kup-card-clock';
 import { prepareColumnDropMenu } from './kup-card-column-drop-menu';
+import { prepareForm } from './kup-card-form';
 import { prepareNumeric } from './kup-card-numeric';
 /**
  * 1st built-in layout, calendar view.
@@ -39,10 +40,17 @@ export function create4(component) {
 }
 /**
  * 5th built-in layout, numeric picker.
- * This layout is rendered after the render cycle completes.
  * @param {KupCard} component - Card component.
- * @returns {VNode} 4th built-in layout virtual node.
+ * @returns {VNode} 5th built-in layout virtual node.
  */
 export function create5(component) {
   return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareNumeric(component)));
 }
+/**
+ * 6th built-in layout, form with submit button.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 6th built-in layout virtual node.
+ */
+export function create6(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareForm(component)));
+}

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

@@ -0,0 +1,11 @@
+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/collection/components/kup-card/kup-card.css

@@ -24,18 +24,15 @@
   font-size: var(--kup-font-size);
   padding: 0.5em;
 }
-.box-layout-2 .container {
+.box-layout-2 table {
   width: 100%;
 }
-.box-layout-2 .flex-container {
-  display: flex;
-  justify-content: space-between;
-}
 .box-layout-2 .label {
+  max-width: 50%;
   overflow: hidden;
   padding: 0.5em;
   text-overflow: ellipsis;
-  width: 50%;
+  white-space: nowrap;
 }
 .box-layout-2 .value {
   padding: 0.5em;
@@ -50,6 +47,8 @@
 }
 .box-layout-3 .container {
   display: flex;
+  justify-content: space-between;
+  overflow: hidden;
   width: 100%;
 }
 .box-layout-3 .flex-container {
@@ -61,7 +60,6 @@
   padding: 0.5em;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 50%;
 }
 .box-layout-3 .value {
   padding: 0.5em;
@@ -901,6 +899,20 @@
   background-color: var(--kup-hover-background-color);
 }
 
+.built-in-layout-6 {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  padding: 0.5em;
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -2407,6 +2419,8 @@
   /* Chrome */
 }
 .standard-layout-14 .section-1 {
+  --kup-button-font-size: 0.75em;
+  box-sizing: border-box;
   display: flex;
   padding: 1em;
 }
@@ -2422,14 +2436,21 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
-  --kup-button-font-size: 0.75em;
+  align-items: flex-end;
+  display: flex;
   font-size: 1.25em;
-  margin-top: -0.5em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
+  text-align: left;
 }
 .standard-layout-14 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .standard-layout-14 .section-1 .title .label:hover {
   text-decoration: underline;
@@ -2446,6 +2467,7 @@
   width: auto;
 }
 .standard-layout-14 .section-1 .info .value {
+  font-weight: 600;
   width: 100%;
 }
 .standard-layout-14 .sub-button {
@@ -2516,8 +2538,7 @@
 .standard-layout-14 #open-in-new,
 .standard-layout-14 #search,
 .standard-layout-14 #new {
-  margin: 0;
-  display: inline-flex;
+  margin: 0 0 0.5em 0;
 }
 
 .standard-layout-15 {
@@ -2547,16 +2568,18 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-15 .section-1 .title {
-  align-items: center;
+  align-items: flex-end;
   display: flex;
   font-size: 1.25em;
   font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
   text-align: left;
 }
 .standard-layout-15 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2640,9 +2663,11 @@
 }
 
 /**
+* @prop --kup-card-backdrop: Backdrop of the component when is visible.
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */
 :host {
+  --kup_card_backdrop: var(--kup-card-backdrop, rgba(0, 0, 0, 0.32));
   --kup_card_ripple_color: var(
     --kup-card-ripple-color,
     var(--kup-primary-color)
@@ -2657,6 +2682,16 @@
   width: var(--kup_card_width);
 }
 
+:host([show-modal]) #kup-component {
+  position: fixed;
+  z-index: var(--kup-card-zindex);
+  height: var(--kup_card_height);
+  width: var(--kup_card_width);
+  top: var(--kup_card_top);
+  left: var(--kup_card_left);
+  display: var(--kup_card_display, none);
+}
+
 :host([is-menu]) {
   display: none;
   animation: fade-in 0.25s ease-out;
@@ -2672,6 +2707,18 @@
   width: 100%;
 }
 
+.backdrop {
+  background: var(--kup_card_backdrop);
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: calc(var(--kup-card-zindex) - 1);
+  display: block;
+}
+
 .mdc-ripple-surface {
   cursor: pointer;
   flex-direction: column;
@@ -2691,4 +2738,23 @@
 }
 .card-view.visible {
   display: block;
+}
+
+.dialog-layout-7 {
+  background-color: var(--kup-background-color);
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 95vh;
+  max-width: 95vw;
+  width: 100%;
+}
+.dialog-layout-7 .section-1 {
+  max-height: 40vh;
+  overflow: auto;
+}
+.dialog-layout-7 .section-2 {
+  display: flex;
+  justify-content: center;
 }