@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,7 +1,7 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { ViewMode, KupTooltipProps, } from './kup-tooltip-declarations';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { kupDynamicPositionAttribute, KupDynamicPositionPlacement, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
 import { KupCardFamily } from '../kup-card/kup-card-declarations';
 import { getProps, setProps } from '../../utils/utils';
@@ -39,6 +39,7 @@ export class KupTooltip {
     this.firstLoad = false;
     this._mouseIsOn = false;
     this.waitingServerResponse = false;
+    this.clickCb = null;
   }
   onElementChanged() {
     if (this.relatedObject != null) {
@@ -49,6 +50,7 @@ export class KupTooltip {
     }
   }
   onDataChanged() {
+    this.kupManager.removeClickCallback(this.clickCb);
     this.waitingServerResponse = false;
     if (this.relatedObject == null) {
       this.kupManager.dynamicPosition.stop(this.rootElement);
@@ -61,14 +63,24 @@ export class KupTooltip {
       return;
     }
     if (!this.kupManager.dynamicPosition.isRegistered(this.rootElement)) {
-      this.kupManager.dynamicPosition.register(this.rootElement, this.relatedObject.element, 0, KupDynamicPositionPlacement.AUTO);
+      this.kupManager.dynamicPosition.register(this.rootElement, this.relatedObject.element);
     }
     else {
       this.kupManager.dynamicPosition.changeAnchor(this.rootElement, this.relatedObject.element);
     }
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.data = null;
+          this.kupManager.dynamicPosition.stop(this.rootElement);
+          this.kupManager.removeClickCallback(this.clickCb);
+        },
+        el: this.rootElement,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
     this.kupManager.dynamicPosition.start(this.rootElement);
     this.visible = true;
-    this.rootElement.focus();
     this.startLoadDetail(true);
   }
   onTooltipDetailChanged() {
@@ -184,7 +196,6 @@ export class KupTooltip {
       this.resetAll();
       return;
     }
-    this.rootElement.focus();
     if (this.isViewModeTooltip()) {
       this.cellOptions = null;
       this.kupTooltipLoadDetail.emit({
@@ -608,9 +619,8 @@ export class KupTooltip {
     if (this.isCardLayout()) {
       return this.getCardLayoutContent();
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
         h("div", { id: "wrapper", onMouseEnter: (ev) => {
             this.onMouseEnter();
@@ -671,11 +681,11 @@ export class KupTooltip {
       "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."
       },
@@ -1121,8 +1131,8 @@ export class KupTooltip {
         "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."
           }],
@@ -1153,8 +1163,8 @@ export class KupTooltip {
         "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."
           }],

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

@@ -1,170 +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%);
-}
-
 /**
 * @prop --kup-tree-border: Sets border of the component.
 * @prop --kup-tree-color: Sets text color of the component.
@@ -220,25 +53,25 @@
   color: var(--kup_tree_color);
 }
 
-.density-dense .wrapper .kup-tree td,
+.density-dense .wrapper .kup-tree td:not(.grid-cell),
 .density-dense .wrapper .kup-tree th,
-.density-dense .wrapper .kup-tree td,
+.density-dense .wrapper .kup-tree td:not(.grid-cell),
 .density-dense .wrapper .kup-tree th {
   padding: 0 0.5em;
 }
-.density-dense .wrapper .kup-tree td .kup-tree__icon ~ .cell-content, .density-dense .wrapper .kup-tree td .kup-tree__icon + .cell-content,
+.density-dense .wrapper .kup-tree td:not(.grid-cell) .kup-tree__icon ~ .cell-content, .density-dense .wrapper .kup-tree td:not(.grid-cell) .kup-tree__icon + .cell-content,
 .density-dense .wrapper .kup-tree th .kup-tree__icon ~ .cell-content,
 .density-dense .wrapper .kup-tree th .kup-tree__icon + .cell-content,
-.density-dense .wrapper .kup-tree td .kup-tree__icon ~ .cell-content,
-.density-dense .wrapper .kup-tree td .kup-tree__icon + .cell-content,
+.density-dense .wrapper .kup-tree td:not(.grid-cell) .kup-tree__icon ~ .cell-content,
+.density-dense .wrapper .kup-tree td:not(.grid-cell) .kup-tree__icon + .cell-content,
 .density-dense .wrapper .kup-tree th .kup-tree__icon ~ .cell-content,
 .density-dense .wrapper .kup-tree th .kup-tree__icon + .cell-content {
   vertical-align: 0.4em;
 }
 
-.density-wide .wrapper .kup-tree td,
+.density-wide .wrapper .kup-tree td:not(.grid-cell),
 .density-wide .wrapper .kup-tree th,
-.density-wide .wrapper .kup-tree td,
+.density-wide .wrapper .kup-tree td:not(.grid-cell),
 .density-wide .wrapper .kup-tree th {
   padding: 0.75em 0.5em;
 }
@@ -284,14 +117,14 @@
 .wrapper .kup-tree td .kup-tree__icon ~ .cell-content,
 .wrapper .kup-tree td .kup-tree__icon + .cell-content {
   display: inline-block;
-  line-height: 1em;
   vertical-align: 0.3em;
 }
-.wrapper .kup-tree td,
+.wrapper .kup-tree td:not(.grid-cell),
 .wrapper .kup-tree th {
   padding: 0.4em 0.5em;
 }
 .wrapper .kup-tree td {
+  padding: 0;
   white-space: nowrap;
 }
 .wrapper .kup-tree__indent {
@@ -346,22 +179,6 @@
   background-color: rgba(var(--kup_tree_primary_color_rgb), 0.175);
   color: var(--kup_tree_color);
 }
-.wrapper .kup-tree__node .cell-content .kup-icon.obj-icon {
-  cursor: var(--kup-obj-cursor);
-  display: inline-block;
-  vertical-align: sub;
-  height: 1.25em;
-  width: 1.25em;
-  background-color: rgba(var(--kup_tree_color_rgb), 0.375);
-  margin: auto 0.5em auto 0;
-}
-.wrapper .kup-tree__node .number-cell {
-  font-family: var(--kup_tree_font_family_monospace);
-  float: right;
-}
-.wrapper .kup-tree__node .negative-number {
-  color: var(--kup-danger-color);
-}
 .wrapper .kup-tree[data-show-columns] .kup-tree__node {
   border-bottom: solid 1px var(--kup-border-color);
 }
@@ -381,7 +198,7 @@
   background-color: var(--kup_tree_primary_color);
 }
 
-.kup-icon.kup-filter-remove-icon:not(.f-image--wrapper) {
+.kup-icon.kup-filter-remove-icon:not(.f-image) {
   background-color: var(--kup_tree_color);
   margin: 0 0.25em;
   height: 1em;
@@ -392,9 +209,13 @@
   opacity: 0.5;
 }
 
+.grid-cell {
+  height: 0;
+}
+
 tfoot td {
-  border-bottom: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-bottom: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
   box-sizing: border-box;
   height: 36px;
   text-align: right;
@@ -406,7 +227,7 @@ tfoot td:hover {
 }
 tfoot td:first-of-type {
   border: none;
-  border-right: var(--kup_tree_border-color);
+  border-right: var(--kup_tree_border);
 }
 
 .hidden span {
@@ -427,16 +248,16 @@ tfoot td:first-of-type {
   display: table-header-group;
 }
 :host([as-accordion]) .wrapper .kup-tree thead tr {
-  border-left: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-left: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
 }
-:host([as-accordion]) .density-dense .first-node {
+:host([as-accordion]) .density-dense .first-node:not(.grid-cell) {
   padding: 0.5em 1em;
 }
-:host([as-accordion]) .density-medium .first-node {
+:host([as-accordion]) .density-medium .first-node:not(.grid-cell) {
   padding: 1em 1.5em;
 }
-:host([as-accordion]) .density-wide .first-node {
+:host([as-accordion]) .density-wide .first-node:not(.grid-cell) {
   padding: 1.75em 1.75em;
 }
 :host([as-accordion]) .kup-tree__node--first {
@@ -463,7 +284,7 @@ tfoot td:first-of-type {
 :host([as-accordion]) .kup-tree__node--first:first-of-type .first-node {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  border-top: var(--kup_tree_border-color);
+  border-top: var(--kup_tree_border);
 }
 :host([as-accordion]) .kup-tree__node--first:last-of-type .first-node {
   border-bottom-left-radius: 4px;
@@ -471,9 +292,9 @@ tfoot td:first-of-type {
 }
 :host([as-accordion]) .kup-tree__node--first .first-node {
   align-items: center;
-  border-bottom: var(--kup_tree_border-color);
-  border-left: var(--kup_tree_border-color);
-  border-right: var(--kup_tree_border-color);
+  border-bottom: var(--kup_tree_border);
+  border-left: var(--kup_tree_border);
+  border-right: var(--kup_tree_border);
   box-sizing: border-box;
   color: var(--kup_tree_color);
   cursor: pointer;
@@ -505,7 +326,7 @@ tfoot td:first-of-type {
   transition: transform 0.1s;
 }
 :host([as-accordion]) .kup-tree__node:not(.kup-tree__node--first) + .kup-tree__node--first {
-  border-top: var(--kup_tree_border-color);
+  border-top: var(--kup_tree_border);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -548,20 +369,6 @@ tfoot td:first-of-type {
   mask: var(--kup-filter-remove-icon);
 }
 
-@keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    display: block;
-    opacity: 1;
-  }
-}
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/
@@ -593,155 +400,4 @@ tfoot td:first-of-type {
 /*-------------------------------------------------*/
 tr.clickable {
   cursor: pointer;
-}
-
-/*-------------------------------------------------*/
-/*     J S O N   C l a s s e s   ( c e l l s )     */
-/*-------------------------------------------------*/
-td.clickable {
-  cursor: pointer;
-}
-
-td.display-on-hover {
-  opacity: 0;
-  transition: opacity 0.25s;
-}
-td.display-on-hover:hover {
-  opacity: 1;
-}
-
-td.shaped {
-  border-radius: 4px;
-}
-
-td.strong-text {
-  font-weight: 600;
-}
-
-td.success-text {
-  color: var(--kup-success-color);
-}
-
-td.warning-text {
-  color: var(--kup-warning-color);
-}
-
-td.danger-text {
-  color: var(--kup-danger-color);
-}
-
-td.purple-text {
-  color: #8e15bf;
-}
-
-td.success-bg {
-  background: var(--kup-success-color);
-  color: white;
-}
-
-td.warning-bg {
-  background: var(--kup-warning-color);
-}
-
-td.danger-bg {
-  background: var(--kup-danger-color);
-  color: white;
-}
-
-td.teal-bg {
-  background: #00b4bc;
-  color: white;
-}
-
-td.orange-bg {
-  background: #f59729;
-  color: white;
-}
-
-td.green-bg {
-  background: #00be67;
-  color: white;
-}
-
-td.grey-bg {
-  background: #8d8d8d;
-  color: white;
-}
-
-td.purple-bg {
-  background: #b88acc;
-  color: white;
-}
-
-td.c-vertical-text .cell-content {
-  text-align: center;
-  writing-mode: vertical-lr;
-}
-
-td.c-right-aligned .cell-content {
-  flex-flow: row-reverse;
-}
-
-td.c-centered .cell-content {
-  margin: auto;
-  max-width: max-content;
-}
-
-td.c-fitted .cell-content {
-  max-width: max-content;
-}
-
-td.c-shaped .cell-content {
-  border-radius: 4px;
-}
-
-td.c-hor-padded .cell-content {
-  box-sizing: border-box;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-
-td.c-ver-padded .cell-content {
-  box-sizing: border-box;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-td.c-success-bg .cell-content {
-  background: var(--kup-success-color);
-  color: white;
-}
-
-td.c-warning-bg .cell-content {
-  background: var(--kup-warning-color);
-}
-
-td.c-danger-bg .cell-content {
-  background: var(--kup-danger-color);
-  color: white;
-}
-
-td.c-teal-bg .cell-content {
-  background: #00b4bc;
-  color: white;
-}
-
-td.c-orange-bg .cell-content {
-  background: #f59729;
-  color: white;
-}
-
-td.c-green-bg .cell-content {
-  background: #00be67;
-  color: white;
-}
-
-td.c-grey-bg .cell-content {
-  background: #8d8d8d;
-  color: white;
-}
-
-td.c-purple-bg .cell-content {
-  background: #b88acc;
-  color: white;
 }