@sme.up/ketchup 5.2.1-SNAPSHOT → 6.2.0-SNAPSHOT

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

@@ -5,7 +5,6 @@ import { getColumnByName } from '../../utils/cell-utils';
 import { filterRows, sortRows, paginateRows, } from '../kup-data-table/kup-data-table-helper';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupBoxState } from './kup-box-state';
-import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { getProps, identify, setProps } from '../../utils/utils';
 import { FImage } from '../../f-components/f-image/f-image';
 import { FChip } from '../../f-components/f-chip/f-chip';
@@ -18,6 +17,7 @@ import { FCell } from '../../f-components/f-cell/f-cell';
 import { FPaginator } from '../../f-components/f-paginator/f-paginator';
 import { FPaginatorMode } from '../../f-components/f-paginator/f-paginator-declarations';
 import { pageChange, rowsPerPageChange, } from '../../f-components/f-paginator/f-paginator-utils';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -123,11 +123,6 @@ export class KupBox {
      * @default true
      */
     this.showSelection = true;
-    /**
-     * If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.
-     * @default true
-     */
-    this.showTooltipOnRightClick = true;
     /**
      * Enable sorting
      * @default false
@@ -139,11 +134,6 @@ export class KupBox {
      * @default false
      */
     this.swipeDisabled = false;
-    /**
-     * Enable show tooltip
-     * @default true
-     */
-    this.tooltipEnabled = true;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -386,7 +376,7 @@ export class KupBox {
       });
     }
   }
-  getEventDetails(el) {
+  getEventDetails(el, e) {
     let boxObject = null;
     let cell = null;
     let row = null;
@@ -402,16 +392,14 @@ export class KupBox {
     }
     return {
       boxObject: boxObject ? boxObject : null,
-      row: row ? row : null,
       column: column ? column : null,
       cell: cell ? cell : null,
+      originalEvent: e,
+      row: row ? row : null,
     };
   }
   contextMenuHandler(e) {
-    const details = this.getEventDetails(e.target);
-    if (this.showTooltipOnRightClick && details.boxObject && details.cell) {
-      setTooltip(e, details.row.id, details.column.name, details.cell, this.tooltip);
-    }
+    const details = this.getEventDetails(e.target, e);
     return details;
   }
   /**
@@ -923,33 +911,14 @@ export class KupBox {
       column = this.data.columns.find((x) => x.name === boxObject.column);
     }
     const cell = row.cells[boxObject.column];
-    let _hasTooltip = false;
     let title = undefined;
-    if (_hasTooltip) {
+    if (cell && !this.kupManager.objects.isEmptyKupObj(cell.obj)) {
       classObj['is-obj'] = true;
       if (this.kupManager.debug.isDebug()) {
         title =
           cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
       }
     }
-    let tipEvents = null;
-    if (_hasTooltip) {
-      if (!this.showTooltipOnRightClick) {
-        tipEvents = {
-          onMouseEnter: (ev) => {
-            if (_hasTooltip) {
-              setTooltip(ev, row.id, boxObject.column, cell, this.tooltip);
-            }
-            else if (!_hasTooltip) {
-              unsetTooltip(this.tooltip);
-            }
-          },
-          onMouseLeave: () => {
-            unsetTooltip(this.tooltip);
-          },
-        };
-      }
-    }
     const cellProps = {
       cell: cell,
       column: column,
@@ -960,7 +929,7 @@ export class KupBox {
       setSizes: true,
       shape: boxObject.shape,
     };
-    return (h("div", Object.assign({ "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, tipEvents), cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, boxObject.value))));
+    return (h("div", { "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, boxObject.value))));
   }
   /**
    * Prepares the kanban sections by sorting the boxlist's data.
@@ -971,7 +940,9 @@ export class KupBox {
     if (!this.kanban.columns || this.kanban.columns.length === 0) {
       this.kupManager.debug.logMessage(this, 'No columns to group by detected.', KupDebugCategory.ERROR);
       return {
-        jsx: (h("p", { id: "empty-data-message" }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
+        jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" },
+          h("div", { ref: (el) => this.rowsRefs.push(el) }),
+          this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
         style: { 'grid-template-columns': `repeat(1, 1fr)` },
       };
     }
@@ -1053,14 +1024,6 @@ export class KupBox {
       },
     };
   }
-  renderTooltip() {
-    if (this.tooltipEnabled == false) {
-      return null;
-    }
-    return (h("kup-tooltip", { class: "box-tooltip", owner: this.rootElement.tagName, loadTimeout: this.showTooltipOnRightClick == true
-        ? 0
-        : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
-  }
   didLoadInteractables() {
     this.interactableTouch.push(this.boxContainer);
     const tapCb = (e) => {
@@ -1069,7 +1032,6 @@ export class KupBox {
         return;
       }
       switch (e.button) {
-        // right click
         case 2:
           this.kupBoxContextMenu.emit({
             comp: this,
@@ -1195,6 +1157,13 @@ export class KupBox {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     this.checkScrollOnHover();
     this.persistState();
     this.didRenderInteractables();
@@ -1246,7 +1215,8 @@ export class KupBox {
     let boxContent = null;
     let containerStyle = {};
     if (this.rows.length === 0) {
-      boxContent = (h("p", { id: "empty-data-message" }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+      boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" },
+        h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
       containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
     }
     else if (isKanban) {
@@ -1266,7 +1236,6 @@ export class KupBox {
         boxContent.push(this.renderRow(rows[cnt++]));
       }
     }
-    const tooltip = this.renderTooltip();
     return (h(Host, null,
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
@@ -1276,12 +1245,8 @@ export class KupBox {
           paginator,
           h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
               e.preventDefault();
-            }, onMouseLeave: (ev) => {
-              ev.stopPropagation();
-              unsetTooltip(this.tooltip);
             }, ref: (el) => (this.boxContainer =
-              el) }, boxContent),
-          tooltip))));
+              el) }, boxContent)))));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister(this.interactableDrag.concat(this.interactableDrop));
@@ -1776,27 +1741,6 @@ export class KupBox {
       "reflect": false,
       "defaultValue": "true"
     },
-    "showTooltipOnRightClick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver."
-      },
-      "attribute": "show-tooltip-on-right-click",
-      "reflect": false,
-      "defaultValue": "true"
-    },
     "sortBy": {
       "type": "string",
       "mutable": true,
@@ -1896,67 +1840,6 @@ export class KupBox {
       "attribute": "swipe-disabled",
       "reflect": false,
       "defaultValue": "false"
-    },
-    "tooltipDetailTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "Defines the timeout for tooltip detail"
-      },
-      "attribute": "tooltip-detail-timeout",
-      "reflect": false
-    },
-    "tooltipEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "Enable show tooltip"
-      },
-      "attribute": "tooltip-enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipLoadTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "Defines the timeout for tooltip load"
-      },
-      "attribute": "tooltip-load-timeout",
-      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -83,7 +83,7 @@ function prepTimeArea(component) {
 function onKupClockItemClick(e, component, value) {
   if (e != null) {
     if (value == null) {
-      value = e.detail.selected.value;
+      value = e.detail.selected.id;
     }
   }
   setClockValueSelected(component, value);

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

@@ -119,8 +119,7 @@ function typeColumn(e, component) {
   });
 }
 function listClick(e, options) {
-  const value = e.detail.selected.value;
-  switch (value) {
+  switch (e.detail.selected.id) {
     case KupLanguageGeneric.MERGE:
       if (options.mergeCb) {
         options.mergeCb();

package/dist/collection/components/kup-card/kup-card.css

@@ -2282,6 +2282,7 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
+  --kup-button-font-size: 0.75em;
   font-size: 1.25em;
   margin-top: -0.5em;
   padding: 0 0.25em 0.25em;
@@ -2380,15 +2381,16 @@
 }
 
 .standard-layout-15 {
-  outline: none;
-  display: block;
-  font-size: var(--kup-font-size);
   background: var(--kup-background-color);
-  color: var(--kup-text-color);
-  box-shadow: var(--kup-box-shadow);
   border-radius: 3px;
+  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);
+  color: var(--kup-text-color);
+  display: block;
+  font-size: var(--kup-font-size);
+  outline: none;
 }
 .standard-layout-15 .section-1 {
+  --kup-button-font-size: 0.75em;
   box-sizing: border-box;
   display: flex;
   padding: 1em;
@@ -2405,13 +2407,19 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-15 .section-1 .title {
+  align-items: center;
+  display: flex;
   font-size: 1.25em;
+  font-weight: 600;
   padding: 0 0.25em 0.25em;
   text-align: left;
 }
 .standard-layout-15 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .standard-layout-15 .section-1 .title .label:hover {
   text-decoration: underline;
@@ -2428,6 +2436,7 @@
   width: auto;
 }
 .standard-layout-15 .section-1 .info .value {
+  font-weight: 600;
   width: 100%;
 }
 .standard-layout-15 .section-2 {
@@ -2441,9 +2450,11 @@
 .standard-layout-15 .section-2 .info {
   box-sizing: border-box;
   height: 100%;
+  overflow: auto;
   padding: 1.25em;
 }
 .standard-layout-15 .section-2 .detail-row {
+  align-items: center;
   display: flex;
   justify-content: space-between;
 }
@@ -2454,11 +2465,19 @@
   color: rgba(var(--kup-text-color-rgb), 0.5);
   margin-top: 0.175em;
   max-width: 320px;
+  padding-right: 1.25em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .standard-layout-15 .section-2 .detail-row__value {
   color: var(--kup-text-color);
-  font-size: 120%;
+  font-size: 105%;
+  font-weight: 600;
   max-width: 320px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .standard-layout-15 .section-2 kup-tree {
   text-align: left;
@@ -2477,8 +2496,7 @@
 .standard-layout-15 #open-in-new,
 .standard-layout-15 #search,
 .standard-layout-15 #new {
-  margin: 0;
-  display: inline-flex;
+  margin: 0 0 0.5em 0;
 }
 
 /**

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

@@ -83,7 +83,7 @@ export class KupCard {
     this.scalingActive = false;
     this.componentWrapper = null;
     this.colorPicker = null;
-    this.firstColorPickerChange = null;
+    this.firstColorPickerChange = true;
   }
   onKupClick(id, value) {
     this.kupClick.emit({
@@ -256,7 +256,6 @@ export class KupCard {
           const color = colorPickerOptions
             ? colorPickerOptions.initialValue
             : null;
-          this.firstColorPickerChange = true;
           if (!this.colorPicker) {
             this.colorPicker = new Picker({
               alpha: false,

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

@@ -6,6 +6,7 @@ import { FChipType } from '../../../f-components/f-chip/f-chip-declarations';
 import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
 import { KupColumnMenuIds } from '../../../utils/kup-column-menu/kup-column-menu-declarations';
 import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
+const dom = document.documentElement;
 /**
  * 1st standard card layout, inspired by Material Design.
  * @param {KupCard} component - Card component.
@@ -592,7 +593,7 @@ export function create14(component) {
   if (tabbarArray[0] && tabbarArray[0].data) {
     for (let index = 0; index < tabbarArray[0].data.length; index++) {
       const tab = tabbarArray[0].data[index];
-      tabsValues.push(tab.value);
+      tabsValues.push(tab.id);
       if (tab.active) {
         visibleView = index + 1;
       }
@@ -729,11 +730,19 @@ export function create15(component) {
   }
   // Setting up buttons.
   const buttonsIds = [];
+  const genericButtons = [];
+  const isReservedID = (id) => {
+    return (id === KupColumnMenuIds.BUTTON_OPEN_IN_NEW ||
+      id === KupColumnMenuIds.BUTTON_SEARCH);
+  };
   for (let index = 0; index < buttonArray.length; index++) {
     const button = buttonArray[index];
     if (button['id']) {
       buttonsIds.push(button['id']);
     }
+    if (!isReservedID(button['id'])) {
+      genericButtons.push(button);
+    }
   }
   return (h("div", { class: `standard-layout-${component.layoutNumber}` },
     h("div", { class: "section-1" },
@@ -757,9 +766,8 @@ export function create15(component) {
         h("div", { class: "info" }, sectionTwoDetails.length > 0
           ? sectionTwoDetails
           : null)),
-      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` },
-        h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0])))),
-    buttonArray.length > 0 ? (h("div", { class: "section-3" },
-      compList(buttonArray.slice(0, 4), 'button'),
-      h("kup-button", { id: "view-selector", icon: "menu" }))) : null));
+      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0]))) : null)),
+    genericButtons.length > 0 ? (h("div", { class: "section-3" },
+      compList(genericButtons.slice(0, 5), 'button'),
+      h("kup-button", { title: dom.ketchup.language.translate(KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" }))) : null));
 }

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

@@ -88,7 +88,7 @@ export class KupCombobox {
     });
   }
   onKupChange(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
@@ -121,14 +121,14 @@ export class KupCombobox {
     });
   }
   onKupInput() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
     });
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
   }
   onKupIconClick() {
     if (__classPrivateFieldGet(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
@@ -146,7 +146,7 @@ export class KupCombobox {
     });
   }
   onKupItemClick(e) {
-    this.onKupChange(e.detail.selected.value);
+    this.onKupChange(e.detail.selected.id);
     __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
     if (__classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f")) {
       __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").focus();
@@ -254,7 +254,7 @@ export class KupCombobox {
    * @param {string} value - Value to be set.
    */
   async setValue(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -271,7 +271,7 @@ export class KupCombobox {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, this.value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
     __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -297,7 +297,8 @@ export class KupCombobox {
       h("div", { id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") },
         h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
             ? KupThemeIconValues.DROPDOWN
-            : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }), __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)))));
+            : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))),
+      __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
   }
   disconnectedCallback() {
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f")) {
@@ -808,20 +809,22 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
   __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
   return __classPrivateFieldGet(this, _KupCombobox_listEl, "f").menuVisible == true;
-}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(e, idIn, setValue) {
-  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode, e);
-  if (ret.exists && setValue) {
-    this.value = ret.value;
-    this.displayedValue = ret.displayedValue;
+}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, setValue) {
+  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
+  if (ret.exists) {
+    if (setValue) {
+      this.value = ret.value;
+      this.displayedValue = ret.displayedValue;
+    }
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = this.displayedValue;
+      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   else {
     this.value = idIn;
     this.displayedValue = idIn;
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = idIn;
+      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   return ret;

package/dist/collection/components/kup-dashboard/kup-dashboard-declarations.js

@@ -0,0 +1,10 @@
+/**
+ * Props of the kup-dashboard component.
+ * Used to export every prop in an object.
+ */
+export var KupDashboardProps;
+(function (KupDashboardProps) {
+  KupDashboardProps["customStyle"] = "Custom style of the component.";
+  KupDashboardProps["data"] = "The data of the component.";
+  KupDashboardProps["enableDesign"] = "When set to true, the component is in design mode and it is draggable.";
+})(KupDashboardProps || (KupDashboardProps = {}));

package/dist/collection/components/kup-dashboard/kup-dashboard.css

@@ -0,0 +1,81 @@
+:host {
+  width: 100%;
+  height: 100%;
+}
+
+#kup-component {
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.header > * {
+  margin-left: 0.5em;
+}
+
+.form {
+  display: grid;
+  height: 100%;
+}
+
+.form-dropzone {
+  padding: 1em;
+  grid-gap: 0.5em;
+  border: 1px solid var(--kup-primary-color);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+}
+.section-header > * {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.section-header > * > .section-header-actions {
+  display: flex;
+  justify-content: end;
+}
+.section-header > * > .section-header-actions > * {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.section-body {
+  display: grid;
+}
+
+.section-dropzone {
+  border: 1px solid var(--kup-primary-color);
+}
+
+.section-draggable {
+  border: 1px solid var(--kup-secondary-color);
+  padding: 1em;
+}
+
+.component {
+  height: fit-content;
+  padding: 1em;
+  margin: 0.5em;
+}
+
+.layout-row {
+  grid-auto-flow: column;
+  grid-template-columns: min-content;
+}
+
+.layout-column {
+  grid-auto-flow: row;
+  grid-template-rows: min-content;
+}