@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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

@@ -1,202 +1,3 @@
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-}
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.mdc-ripple-surface {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-  position: relative;
-  outline: none;
-  overflow: hidden;
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-
-.mdc-ripple-surface::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-
-.mdc-ripple-surface::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  left: var(--mdc-ripple-left, 0);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-
-.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
-.mdc-ripple-upgraded--unbounded {
-  overflow: visible;
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
-.mdc-ripple-upgraded--unbounded::before,
-.mdc-ripple-upgraded--unbounded::after {
-  top: calc(50% - 50%);
-  /* @noflip */
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -340,6 +141,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-1 .section-1 .text {
   min-width: max-content;
@@ -358,6 +160,7 @@
 }
 .dialog-layout-2 .section-1 {
   text-align: center;
+  touch-action: none;
   padding-bottom: 1em;
 }
 .dialog-layout-2 .section-1 .text {
@@ -375,6 +178,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-2 .section-2 .text {
   min-width: max-content;
@@ -389,7 +193,7 @@
   box-sizing: border-box;
   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;
-  overflow: auto;
+  overflow: visible;
   flex-direction: column;
   height: 100%;
   position: relative;
@@ -408,6 +212,7 @@
   height: 52px;
   width: 100%;
   text-align: right;
+  touch-action: none;
 }
 .dialog-layout-3 .section-1 kup-button {
   margin-right: 0.25em;
@@ -441,6 +246,8 @@
 .dialog-layout-4 .section-2 {
   height: 100%;
   overflow: auto;
+  padding: 0.25em;
+  touch-action: none;
 }
 
 .dialog-layout-5 {
@@ -460,6 +267,37 @@
   overflow: auto;
 }
 
+.dialog-layout-6 {
+  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-6 .section-1 {
+  display: flex;
+  height: 100%;
+  justify-content: space-evenly;
+  overflow: auto;
+}
+.dialog-layout-6 kup-data-table {
+  width: 100%;
+}
+
+#drag-handle {
+  -ms-touch-action: none;
+  touch-action: none;
+}
+#drag-handle:not(.header-bar) {
+  display: flex;
+  height: 100%;
+}
+#drag-handle:not(.header-bar) .f-image {
+  margin: auto;
+}
 #drag-handle.header-bar {
   background-color: var(--kup-title-background-color);
   color: var(--kup-title-color);
@@ -1547,6 +1385,7 @@
   margin-bottom: 0.5em;
 }
 .standard-layout-12 .section-3 {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;
@@ -1622,7 +1461,7 @@
   width: 88px;
   margin: 0 10px;
 }
-.standard-layout-14 .section-1 .f-image--wrapper {
+.standard-layout-14 .section-1 .f-image {
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
@@ -1659,6 +1498,7 @@
   margin: 0;
 }
 .standard-layout-14 .sub-checkbox {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;
@@ -1718,6 +1558,110 @@
   display: inline-flex;
 }
 
+.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;
+  min-width: 350px;
+  max-width: 700px;
+}
+.standard-layout-15 .section-1 {
+  box-sizing: border-box;
+  display: flex;
+  padding: 1em;
+}
+.standard-layout-15 .section-1 .sub-1 {
+  width: 100%;
+}
+.standard-layout-15 .section-1 .sub-spinner {
+  height: 88px;
+  width: 88px;
+  margin: 0 10px;
+}
+.standard-layout-15 .section-1 .f-image {
+  margin: 0 0.5em 0 0;
+}
+.standard-layout-15 .section-1 .title {
+  font-size: 1.25em;
+  padding: 0 0.25em 0.25em;
+  text-align: left;
+}
+.standard-layout-15 .section-1 .title .label {
+  cursor: pointer;
+  padding-right: 0.25em;
+}
+.standard-layout-15 .section-1 .title .label:hover {
+  text-decoration: underline;
+}
+.standard-layout-15 .section-1 .info {
+  display: flex;
+  padding: 0 0.25em 0.25em;
+  width: 100%;
+}
+.standard-layout-15 .section-1 .info .label {
+  color: rgba(var(--kup-text-color-rgb), 0.75);
+  margin-right: 0.75em;
+  min-width: max-content;
+  width: auto;
+}
+.standard-layout-15 .section-1 .info .value {
+  width: 100%;
+}
+.standard-layout-15 .section-2 {
+  border-top: 1px solid var(--kup-border-color);
+  box-sizing: border-box;
+  height: 180px;
+  opacity: 1;
+  overflow: auto;
+  transition: height 250ms ease-out, opacity 250ms ease-out;
+}
+.standard-layout-15 .section-2 .info {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 1.25em;
+}
+.standard-layout-15 .section-2 .detail-row {
+  display: flex;
+  justify-content: space-between;
+}
+.standard-layout-15 .section-2 .detail-row:not(:last-child) {
+  margin-bottom: 6px;
+}
+.standard-layout-15 .section-2 .detail-row__label {
+  color: rgba(var(--kup-text-color-rgb), 0.5);
+  margin-top: 0.175em;
+  max-width: 320px;
+}
+.standard-layout-15 .section-2 .detail-row__value {
+  color: var(--kup-text-color);
+  font-size: 120%;
+  max-width: 320px;
+}
+.standard-layout-15 .section-2 kup-tree {
+  text-align: left;
+}
+.standard-layout-15 .section-3 {
+  border-top: 1px solid var(--kup-border-color);
+  display: flex;
+  justify-content: flex-end;
+  padding: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.standard-layout-15 .section-3 kup-button {
+  margin: auto 0;
+}
+.standard-layout-15 #open-in-new,
+.standard-layout-15 #search,
+.standard-layout-15 #new {
+  margin: 0;
+  display: inline-flex;
+}
+
 /**
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */
@@ -1764,22 +1708,9 @@
 .card-view {
   animation: fade-in 0.25s ease-out;
   display: none;
+  height: 100%;
+  width: 100%;
 }
 .card-view.visible {
   display: block;
-}
-
-@keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    display: block;
-    opacity: 1;
-  }
 }

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

@@ -85,6 +85,13 @@ export class KupCard {
       id: id,
     });
   }
+  onKupClose(id) {
+    this.kupClose.emit({
+      comp: this,
+      id: id,
+    });
+    this.rootElement.remove();
+  }
   onKupEvent(e) {
     layoutSpecificEvents(this, e);
     this.kupEvent.emit({
@@ -138,7 +145,7 @@ export class KupCard {
       // The dialog "X" button.
       const dialogClose = root.querySelector('#' + KupCardIds.DIALOG_CLOSE);
       if (dialogClose) {
-        dialogClose.onclick = () => this.rootElement.remove();
+        dialogClose.onclick = () => this.onKupClose(KupCardIds.DIALOG_CLOSE);
       }
       // When an element can be clicked. Ideally anchors/links.
       const links = root.querySelectorAll('.' + KupCardCSSClasses.CLICKABLE_LINK);
@@ -216,8 +223,8 @@ export class KupCard {
       const card = this.rootElement;
       const dragHandle = root.querySelector('#' + KupCardIds.DRAG_HANDLE);
       const unresizable = !!root.querySelector('.' + KupCardCSSClasses.DIALOG_UNRESIZABLE);
-      if (!this.kupManager.dialog.isRegistered(card)) {
-        this.kupManager.dialog.register(card, dragHandle ? dragHandle : null, unresizable);
+      if (!this.kupManager.interact.isRegistered(card)) {
+        this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
       }
     }
   }
@@ -267,6 +274,7 @@ export class KupCard {
     root.addEventListener('kup-chip-iconclick', this.cardEvent);
     root.addEventListener('kup-combobox-itemclick', this.cardEvent);
     root.addEventListener('kup-datatable-cellupdate', this.cardEvent);
+    root.addEventListener('kup-datatable-rowselected', this.cardEvent);
     root.addEventListener('kup-datepicker-cleariconclick', this.cardEvent);
     root.addEventListener('kup-datepicker-input', this.cardEvent);
     root.addEventListener('kup-datepicker-itemclick', this.cardEvent);
@@ -358,6 +366,10 @@ export class KupCard {
       MDCRipple.attachTo(rippleEl);
     }
     this.kupManager.resize.observe(this.rootElement);
+    this.kupReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -384,16 +396,15 @@ export class KupCard {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: style },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
   }
   disconnectedCallback() {
+    this.kupManager.interact.unregister([this.rootElement]);
     this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-    this.kupManager.dialog.unregister([this.rootElement]);
     this.kupManager.resize.unobserve(this.rootElement);
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-card"; }
   static get encapsulation() { return "shadow"; }
@@ -416,11 +427,11 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -445,8 +456,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The actual data of the card."
       },
@@ -464,8 +475,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defines whether the card is a menu or not.\nWorks together with menuVisible."
       },
@@ -490,8 +501,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupCardFamily.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "KupCardFamily.STANDARD"
           }],
         "text": "Sets the type of the card."
       },
@@ -511,8 +522,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Sets the number of the layout."
       },
@@ -532,8 +543,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets the status of the card as menu, when false it's hidden otherwise it's visible.\nWorks together with isMenu."
       },
@@ -553,8 +564,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
       },
@@ -574,8 +585,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -604,6 +615,26 @@ export class KupCard {
           }
         }
       }
+    }, {
+      "method": "kupClose",
+      "name": "kup-card-close",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when a dialog card is closed with the \"X\"."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
     }, {
       "method": "kupEvent",
       "name": "kup-card-event",
@@ -624,6 +655,26 @@ export class KupCard {
           }
         }
       }
+    }, {
+      "method": "kupReady",
+      "name": "kup-card-ready",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the component is ready."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "getProps": {
@@ -631,8 +682,8 @@ export class KupCard {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -695,8 +746,8 @@ export class KupCard {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],