@sme.up/ketchup 4.2.0-SNAPSHOT → 4.2.0

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

@@ -1,3 +1,494 @@
+.builtin-layout-1 {
+  padding: 0.5em;
+}
+.builtin-layout-1 .section-1 {
+  box-sizing: border-box;
+  height: 5em;
+  overflow: auto;
+  padding-bottom: 1em;
+  width: 100%;
+}
+.builtin-layout-1 .section-1 .sub-1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.builtin-layout-1 .section-2 {
+  height: calc(100% - 60px);
+  overflow: auto;
+  width: 100%;
+}
+.builtin-layout-1 .prev-page {
+  margin-left: auto;
+}
+.builtin-layout-1 .change-view-button {
+  margin: auto;
+  width: 12em;
+  text-align: center;
+}
+.builtin-layout-1 #change-view-button button {
+  text-transform: capitalize;
+}
+.builtin-layout-1 .next-page {
+  margin-right: auto;
+}
+.builtin-layout-1 .calendar {
+  border-collapse: collapse;
+  width: 100%;
+}
+.builtin-layout-1 thead {
+  border-bottom: 1px solid var(--kup-border-color);
+}
+.builtin-layout-1 .item-text {
+  color: rgba(var(--kup-text-color-rgb), 0.5);
+}
+.builtin-layout-1 .item {
+  text-align: center;
+}
+.builtin-layout-1 .item:not(.selected) .item-number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+.builtin-layout-1 .item.selected .item-number, .builtin-layout-1 .item.selected .item-number:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.175);
+}
+.builtin-layout-1 .item-number {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  line-height: 2.5em;
+  margin: auto;
+  width: 2.5em;
+  transition: background-color 0.25s;
+  text-transform: capitalize;
+}
+
+.builtin-layout-2 .clock {
+  box-shadow: var(--kup-box-shadow);
+  width: 300px;
+  height: 450px;
+  background-color: var(--kup-background-color);
+  position: relative;
+  font-family: var(--kup-font-family);
+}
+.builtin-layout-2 .top {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
+  height: 100px;
+  line-height: 100px;
+  font-size: 50px;
+  text-align: center;
+}
+.builtin-layout-2 .top span {
+  cursor: pointer;
+  opacity: 0.75;
+  transition: 0.25s ease-in-out;
+}
+.builtin-layout-2 .top .visible {
+  opacity: 1;
+}
+.builtin-layout-2 .circle {
+  user-select: none;
+  background-color: rgba(var(--kup-text-color-rgb), 0.1);
+  width: 250px;
+  height: 250px;
+  border-radius: 1000px;
+  position: relative;
+  top: 25px;
+  left: 25px;
+  box-sizing: border-box;
+  display: none;
+}
+.builtin-layout-2 .circle.visible {
+  display: block;
+}
+.builtin-layout-2 .mid {
+  position: absolute;
+  left: calc(50% - 0px);
+  top: calc(50% - 0px);
+  width: 2px;
+  height: 2px;
+  border-radius: 10px;
+  background-color: var(--kup-text-color);
+}
+.builtin-layout-2 .hour {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+  border-radius: 40px;
+  text-align: center;
+}
+.builtin-layout-2 .hour.selected {
+  z-index: 2;
+}
+.builtin-layout-2 .hour.selected::after {
+  content: "";
+  z-index: -1;
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.builtin-layout-2 .hour2 {
+  z-index: 2;
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  width: 30px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 14px;
+}
+.builtin-layout-2 .hour2.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 64px;
+  right: 50%;
+  z-index: -1;
+}
+.builtin-layout-2 .unit {
+  position: absolute;
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 12px;
+}
+.builtin-layout-2 .unit.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.builtin-layout-2 .hour,
+.builtin-layout-2 .hour2,
+.builtin-layout-2 .unit {
+  cursor: pointer;
+  transition: background-color 0.25s;
+}
+.builtin-layout-2 .hour:hover,
+.builtin-layout-2 .hour2:hover,
+.builtin-layout-2 .unit:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.275);
+}
+.builtin-layout-2 .hour.selected,
+.builtin-layout-2 .hour2.selected,
+.builtin-layout-2 .unit.selected {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
+}
+.builtin-layout-2 .actions {
+  color: var(--kup-primary-color);
+  font-weight: bold;
+  font-size: 20px;
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  bottom: 10px;
+}
+.builtin-layout-2 .action {
+  display: inline-block;
+  width: 100px;
+  text-align: center;
+  height: 37.5px;
+  line-height: 37.5px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+.builtin-layout-2 .clock .actions .action:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.builtin-layout-2 .clock .actions .action:visible {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.builtin-layout-2 .hour:nth-child(12):after {
+  transform: rotate(330deg);
+}
+.builtin-layout-2 .hour:nth-child(11):after {
+  transform: rotate(300deg);
+}
+.builtin-layout-2 .hour:nth-child(10):after {
+  transform: rotate(270deg);
+}
+.builtin-layout-2 .hour:nth-child(9):after {
+  transform: rotate(240deg);
+}
+.builtin-layout-2 .hour:nth-child(8):after {
+  transform: rotate(210deg);
+}
+.builtin-layout-2 .hour:nth-child(7):after {
+  transform: rotate(180deg);
+}
+.builtin-layout-2 .hour:nth-child(6):after {
+  transform: rotate(150deg);
+}
+.builtin-layout-2 .hour:nth-child(5):after {
+  transform: rotate(120deg);
+}
+.builtin-layout-2 .hour:nth-child(4):after {
+  transform: rotate(90deg);
+}
+.builtin-layout-2 .hour:nth-child(3):after {
+  transform: rotate(60deg);
+}
+.builtin-layout-2 .hour:nth-child(2):after {
+  transform: rotate(30deg);
+}
+.builtin-layout-2 .hour:nth-child(1):after {
+  transform: rotate(0deg);
+}
+.builtin-layout-2 .hour2:nth-child(24):after {
+  transform: rotate(690deg);
+}
+.builtin-layout-2 .hour2:nth-child(23):after {
+  transform: rotate(660deg);
+}
+.builtin-layout-2 .hour2:nth-child(22):after {
+  transform: rotate(630deg);
+}
+.builtin-layout-2 .hour2:nth-child(21):after {
+  transform: rotate(600deg);
+}
+.builtin-layout-2 .hour2:nth-child(20):after {
+  transform: rotate(570deg);
+}
+.builtin-layout-2 .hour2:nth-child(19):after {
+  transform: rotate(540deg);
+}
+.builtin-layout-2 .hour2:nth-child(18):after {
+  transform: rotate(510deg);
+}
+.builtin-layout-2 .hour2:nth-child(17):after {
+  transform: rotate(480deg);
+}
+.builtin-layout-2 .hour2:nth-child(16):after {
+  transform: rotate(450deg);
+}
+.builtin-layout-2 .hour2:nth-child(15):after {
+  transform: rotate(420deg);
+}
+.builtin-layout-2 .hour2:nth-child(14):after {
+  transform: rotate(390deg);
+}
+.builtin-layout-2 .hour2:nth-child(13):after {
+  transform: rotate(360deg);
+}
+.builtin-layout-2 .unit:nth-child(60):after {
+  transform: rotate(354deg);
+}
+.builtin-layout-2 .unit:nth-child(59):after {
+  transform: rotate(348deg);
+}
+.builtin-layout-2 .unit:nth-child(58):after {
+  transform: rotate(342deg);
+}
+.builtin-layout-2 .unit:nth-child(57):after {
+  transform: rotate(336deg);
+}
+.builtin-layout-2 .unit:nth-child(56):after {
+  transform: rotate(330deg);
+}
+.builtin-layout-2 .unit:nth-child(55):after {
+  transform: rotate(324deg);
+}
+.builtin-layout-2 .unit:nth-child(54):after {
+  transform: rotate(318deg);
+}
+.builtin-layout-2 .unit:nth-child(53):after {
+  transform: rotate(312deg);
+}
+.builtin-layout-2 .unit:nth-child(52):after {
+  transform: rotate(306deg);
+}
+.builtin-layout-2 .unit:nth-child(51):after {
+  transform: rotate(300deg);
+}
+.builtin-layout-2 .unit:nth-child(50):after {
+  transform: rotate(294deg);
+}
+.builtin-layout-2 .unit:nth-child(49):after {
+  transform: rotate(288deg);
+}
+.builtin-layout-2 .unit:nth-child(48):after {
+  transform: rotate(282deg);
+}
+.builtin-layout-2 .unit:nth-child(47):after {
+  transform: rotate(276deg);
+}
+.builtin-layout-2 .unit:nth-child(46):after {
+  transform: rotate(270deg);
+}
+.builtin-layout-2 .unit:nth-child(45):after {
+  transform: rotate(264deg);
+}
+.builtin-layout-2 .unit:nth-child(44):after {
+  transform: rotate(258deg);
+}
+.builtin-layout-2 .unit:nth-child(43):after {
+  transform: rotate(252deg);
+}
+.builtin-layout-2 .unit:nth-child(42):after {
+  transform: rotate(246deg);
+}
+.builtin-layout-2 .unit:nth-child(41):after {
+  transform: rotate(240deg);
+}
+.builtin-layout-2 .unit:nth-child(40):after {
+  transform: rotate(234deg);
+}
+.builtin-layout-2 .unit:nth-child(39):after {
+  transform: rotate(228deg);
+}
+.builtin-layout-2 .unit:nth-child(38):after {
+  transform: rotate(222deg);
+}
+.builtin-layout-2 .unit:nth-child(37):after {
+  transform: rotate(216deg);
+}
+.builtin-layout-2 .unit:nth-child(36):after {
+  transform: rotate(210deg);
+}
+.builtin-layout-2 .unit:nth-child(35):after {
+  transform: rotate(204deg);
+}
+.builtin-layout-2 .unit:nth-child(34):after {
+  transform: rotate(198deg);
+}
+.builtin-layout-2 .unit:nth-child(33):after {
+  transform: rotate(192deg);
+}
+.builtin-layout-2 .unit:nth-child(32):after {
+  transform: rotate(186deg);
+}
+.builtin-layout-2 .unit:nth-child(31):after {
+  transform: rotate(180deg);
+}
+.builtin-layout-2 .unit:nth-child(30):after {
+  transform: rotate(174deg);
+}
+.builtin-layout-2 .unit:nth-child(29):after {
+  transform: rotate(168deg);
+}
+.builtin-layout-2 .unit:nth-child(28):after {
+  transform: rotate(162deg);
+}
+.builtin-layout-2 .unit:nth-child(27):after {
+  transform: rotate(156deg);
+}
+.builtin-layout-2 .unit:nth-child(26):after {
+  transform: rotate(150deg);
+}
+.builtin-layout-2 .unit:nth-child(25):after {
+  transform: rotate(144deg);
+}
+.builtin-layout-2 .unit:nth-child(24):after {
+  transform: rotate(138deg);
+}
+.builtin-layout-2 .unit:nth-child(23):after {
+  transform: rotate(132deg);
+}
+.builtin-layout-2 .unit:nth-child(22):after {
+  transform: rotate(126deg);
+}
+.builtin-layout-2 .unit:nth-child(21):after {
+  transform: rotate(120deg);
+}
+.builtin-layout-2 .unit:nth-child(20):after {
+  transform: rotate(114deg);
+}
+.builtin-layout-2 .unit:nth-child(19):after {
+  transform: rotate(108deg);
+}
+.builtin-layout-2 .unit:nth-child(18):after {
+  transform: rotate(102deg);
+}
+.builtin-layout-2 .unit:nth-child(17):after {
+  transform: rotate(96deg);
+}
+.builtin-layout-2 .unit:nth-child(16):after {
+  transform: rotate(90deg);
+}
+.builtin-layout-2 .unit:nth-child(15):after {
+  transform: rotate(84deg);
+}
+.builtin-layout-2 .unit:nth-child(14):after {
+  transform: rotate(78deg);
+}
+.builtin-layout-2 .unit:nth-child(13):after {
+  transform: rotate(72deg);
+}
+.builtin-layout-2 .unit:nth-child(12):after {
+  transform: rotate(66deg);
+}
+.builtin-layout-2 .unit:nth-child(11):after {
+  transform: rotate(60deg);
+}
+.builtin-layout-2 .unit:nth-child(10):after {
+  transform: rotate(54deg);
+}
+.builtin-layout-2 .unit:nth-child(9):after {
+  transform: rotate(48deg);
+}
+.builtin-layout-2 .unit:nth-child(8):after {
+  transform: rotate(42deg);
+}
+.builtin-layout-2 .unit:nth-child(7):after {
+  transform: rotate(36deg);
+}
+.builtin-layout-2 .unit:nth-child(6):after {
+  transform: rotate(30deg);
+}
+.builtin-layout-2 .unit:nth-child(5):after {
+  transform: rotate(24deg);
+}
+.builtin-layout-2 .unit:nth-child(4):after {
+  transform: rotate(18deg);
+}
+.builtin-layout-2 .unit:nth-child(3):after {
+  transform: rotate(12deg);
+}
+.builtin-layout-2 .unit:nth-child(2):after {
+  transform: rotate(6deg);
+}
+.builtin-layout-2 .unit:nth-child(1):after {
+  transform: rotate(0deg);
+}
+
+.builtin-card {
+  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;
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -328,6 +819,14 @@
   opacity: 0.5;
 }
 
+.free-layout-1 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 1em;
+}
+
 .scalable-layout-1 .descr {
   font-size: 70%;
   width: 100%;
@@ -1680,12 +2179,12 @@
   width: var(--kup_card_width);
 }
 
-:host([is-menu]) #kup-component {
-  animation: fade-in 0.25s ease-out;
+:host([is-menu]) {
   display: none;
+  animation: fade-in 0.25s ease-out;
 }
 
-:host([menu-visible]) #kup-component {
+:host([menu-visible]) {
   display: block;
 }
 

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

@@ -1,7 +1,9 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
+import * as builtinLayouts from './builtin/kup-card-builtin';
 import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
 import * as dialogLayouts from './dialog/kup-card-dialog';
+import * as freeLayouts from './free/kup-card-free';
 import * as scalableLayouts from './scalable/kup-card-scalable';
 import * as standardLayouts from './standard/kup-card-standard';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
@@ -79,10 +81,11 @@ export class KupCard {
      */
     this.scalingActive = false;
   }
-  onKupClick(id) {
+  onKupClick(id, value) {
     this.kupClick.emit({
       comp: this,
       id: id,
+      value: value,
     });
   }
   onKupClose(id) {
@@ -153,7 +156,7 @@ export class KupCard {
         const link = links[index];
         link.onclick = (e) => {
           e.stopPropagation();
-          this.onKupClick(link.id);
+          this.onKupClick(link.id, null);
         };
       }
     }
@@ -189,12 +192,18 @@ export class KupCard {
     const method = 'create' + this.layoutNumber;
     try {
       switch (family) {
+        case KupCardFamily.BUILTIN: {
+          return builtinLayouts[method](this);
+        }
         case KupCardFamily.COLLAPSIBLE: {
           return collapsibleLayouts[method](this);
         }
         case KupCardFamily.DIALOG: {
           return dialogLayouts[method](this);
         }
+        case KupCardFamily.FREE: {
+          return freeLayouts[method](this);
+        }
         case KupCardFamily.SCALABLE: {
           return scalableLayouts[method](this);
         }
@@ -389,7 +398,7 @@ export class KupCard {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    if (!this.data) {
+    if (!this.data && this.rootElement.children.length < 1) {
       return;
     }
     const style = {
@@ -398,7 +407,7 @@ export class KupCard {
     };
     return (h(Host, { style: style },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
+      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -489,7 +498,7 @@ export class KupCard {
       "mutable": false,
       "complexType": {
         "original": "KupCardFamily",
-        "resolved": "KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
+        "resolved": "KupCardFamily.BUILTIN | KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.FREE | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
         "references": {
           "KupCardFamily": {
             "location": "import",
@@ -606,12 +615,12 @@ export class KupCard {
         "text": "Triggered when the card is clicked."
       },
       "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
+        "original": "KupCardClickPayload",
+        "resolved": "KupCardClickPayload",
         "references": {
-          "KupEventPayload": {
+          "KupCardClickPayload": {
             "location": "import",
-            "path": "../../types/GenericTypes"
+            "path": "./kup-card-declarations"
           }
         }
       }

package/dist/collection/components/kup-data-table/kup-data-table-declarations.js

@@ -12,8 +12,8 @@ export var KupDataTableProps;
   KupDataTableProps["dropEnabled"] = "Enables drop.";
   KupDataTableProps["editableData"] = "When set to true, editable cells will be rendered using input components.";
   KupDataTableProps["emptyDataLabel"] = "Defines the label to show when the table is empty.";
-  KupDataTableProps["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different columns.";
   KupDataTableProps["enableExtraColumns"] = "Enables adding extra columns.";
+  KupDataTableProps["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different columns.";
   KupDataTableProps["expandGroups"] = "Expands groups when set to true.";
   KupDataTableProps["filters"] = "List of filters set by the user.";
   KupDataTableProps["fixedColumns"] = "Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows.";

package/dist/collection/components/kup-data-table/kup-data-table-state.js

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

package/dist/collection/components/kup-data-table/kup-data-table.css

@@ -391,44 +391,6 @@ th.obj:hover span:not(.overlay-action) {
   background: var(--kup-text-on-primary-color) !important;
 }
 
-.customize-panel {
-  visibility: hidden;
-  background: var(--kup_datatable_background_color);
-  box-shadow: var(--kup-box-shadow);
-  min-width: 200px;
-  width: fit-content;
-  transition: height 0.25s;
-}
-.customize-panel kup-switch {
-  text-align: center;
-}
-
-.customize-element {
-  padding: 0 1em 1em 1em;
-}
-
-.customize-element:nth-child(1) {
-  padding-top: 1em;
-}
-
-.kup-menu {
-  animation: fade-in 0.25s ease-out;
-  background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
-  color: var(--kup-text-color);
-  display: none;
-  max-height: 33vh;
-  overflow: auto;
-  position: relative;
-  transform: none;
-  transform-origin: unset;
-  transition: height 0.2s;
-  will-change: unset;
-}
-.kup-menu.visible {
-  display: block;
-}
-
 .indent {
   display: inline-block;
   height: 1em;