@sme.up/ketchup 6.7.0 → 6.8.0

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

@@ -30,83 +30,32 @@ export class KupAutocomplete {
   constructor() {
     _KupAutocomplete_instances.add(this);
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    this.displayedValue = undefined;
-    this.value = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
+    _KupAutocomplete_doConsistencyCheck.set(this, true);
+    _KupAutocomplete_elStyle.set(this, undefined);
+    _KupAutocomplete_listEl.set(this, null);
     /**
-     * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list.
-     * @default false
+     * Instance of the KupManager class.
      */
+    _KupAutocomplete_kupManager.set(this, kupManagerInstance());
+    _KupAutocomplete_textfieldWrapper.set(this, undefined);
+    _KupAutocomplete_textfieldEl.set(this, undefined);
+    _KupAutocomplete_clickCb.set(this, null);
+    _KupAutocomplete_inputTimeout.set(this, void 0);
+    this.displayedValue = undefined;
+    this.value = '';
     this.allowInconsistentValues = false;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Props of the sub-components.
-     * @default undefined
-     */
     this.data = undefined;
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     * @default false
-     */
     this.disabled = false;
-    /**
-     * Sets how to show the selected item value. Suported values: "code", "description", "both".
-     * @default ItemsDisplayMode.DESCRIPTION
-     */
     this.displayMode = ItemsDisplayMode.DESCRIPTION;
-    /**
-     * Sets the initial value of the component.
-     * @default ""
-     */
     this.initialValue = '';
-    /**
-     * Input event emission delay in milliseconds.
-     * @default 300
-     */
     this.inputDelay = 300;
-    /**
-     * The minimum number of chars to trigger the autocomplete
-     * @default 1
-     */
     this.minimumChars = 1;
-    /**
-     * Sets how to return the selected item value. Suported values: "code", "description", "both".
-     * @default ItemsDisplayMode.CODE
-     */
     this.selectMode = ItemsDisplayMode.CODE;
-    /**
-     * When true, the items filter is managed server side, otherwise items filter is done client side.
-     * @default false
-     */
     this.serverHandledFilter = false;
-    /**
-     * When true shows the drop-down icon, for open list.
-     * @default true
-     */
     this.showDropDownIcon = true;
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    _KupAutocomplete_doConsistencyCheck.set(this, true);
-    _KupAutocomplete_elStyle.set(this, undefined);
-    _KupAutocomplete_listEl.set(this, null);
-    /**
-     * Instance of the KupManager class.
-     */
-    _KupAutocomplete_kupManager.set(this, kupManagerInstance());
-    _KupAutocomplete_textfieldWrapper.set(this, undefined);
-    _KupAutocomplete_textfieldEl.set(this, undefined);
-    _KupAutocomplete_clickCb.set(this, null);
-    _KupAutocomplete_inputTimeout.set(this, void 0);
   }
   onKupBlur() {
     this.kupBlur.emit({
@@ -162,7 +111,9 @@ export class KupAutocomplete {
       __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
     }
     else {
-      __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
+      if (this.showDropDownIcon) {
+        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
+      }
     }
     this.kupIconClick.emit({
       comp: this,

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

@@ -7,25 +7,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupBadgeProps } from './kup-badge-declarations';
 export class KupBadge {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    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 image displayed inside the badge.
-     * @default null
-     */
-    this.imageData = null;
-    /**
-     * The text displayed inside the badge.
-     * @default null
-     */
-    this.text = null;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -33,6 +14,9 @@ export class KupBadge {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.customStyle = '';
+    this.imageData = null;
+    this.text = null;
   }
   onKupClick() {
     this.kupClick.emit({

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" })),
+  ];
+}