@testgorilla/tgo-ui 2.24.3 → 2.24.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "2.24.3",
+  "version": "2.24.4",
   "license": "proprietary-license",
   "lint-staged": {
     "src/**/*.ts": [

package/projects/tgo-canopy-ui/assets/i18n/en.json

@@ -121,5 +121,8 @@
   },
   "TAG": {
     "REMOVE": "Remove tag"
+  },
+  "TOOLTIP": {
+    "DETAILS": "Details"
   }
 }

package/projects/tgo-canopy-ui/theme/_tooltip.scss

@@ -24,7 +24,6 @@
     z-index: 10;
     border-top-right-radius: 4px;
     transform: rotate(-135deg);
-    transition: all 1s;
   }
 }
 
@@ -184,6 +183,7 @@ body {
     @include rebranded-tooltip-right();
 
     &:after {
+      transition: none!important;
       left: -3px;
     }
   }
@@ -206,6 +206,17 @@ body {
   color: $tgo-white;
   border-radius: 6px;
   border: 1px solid $tgo-white;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 .top {
@@ -213,7 +224,7 @@ body {
     @include rebranded-tooltip-above();
 
     &:after {
-      bottom: -3px;
+      bottom: -7px;
     }
   }
 }
@@ -223,7 +234,7 @@ body {
     @include rebranded-tooltip-below();
 
     &:after {
-      top: -3px;
+      top: -7px;
     }
   }
 }
@@ -234,7 +245,7 @@ body {
     @include rebranded-tooltip-right();
 
     &:after {
-      left: -3px;
+      left: -2px;
     }
   }
 }
@@ -245,7 +256,66 @@ body {
     @include rebranded-tooltip-left();
 
     &:after {
-      right: -3px;
+      right: -2px;
     }
   }
 }
+
+.definition-tooltip {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 3px;
+  border-radius: 4px;
+  outline-offset: 2px;
+  outline-width: 2px;
+  width: 100% !important;
+  max-width: fit-content !important;
+  display: inline-flex;
+
+  &:focus-visible {
+    outline-color: $tgo-black !important;
+    outline-offset: 4px;
+  }
+}
+
+.label-definition {
+  &-inner {
+    display: flex;
+    font-weight: bold!important;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &-outside {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.tooltip-size-small {
+      font-size: 12px;
+      line-height: 14.4px;
+    }
+
+    &.tooltip-size-medium {
+      font-size: 14px;
+      line-height: 16.8px;
+    }
+
+    &.tooltip-size-large {
+      font-size: 16px;
+      line-height: 19.2px;
+    }
+  }
+}
+
+.text-definition {
+  font-weight: normal!important;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+ui-tooltip {
+  width: 100%;
+  max-width: fit-content !important;
+}

package/projects/tgo-canopy-ui/theme/line-clamp.scss

@@ -0,0 +1,8 @@
+@mixin line-clamp($count) {
+  overflow: hidden;
+  -webkit-line-clamp: $count;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  white-space: normal;
+}

package/projects/tgo-canopy-ui/theme/theme.scss

@@ -8,6 +8,7 @@
 @use "input.scss" as *;
 @use "button.scss" as *;
 @use "icon.scss" as *;
+@use "line-clamp.scss" as *;
 
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 

package/public-api.d.ts

@@ -143,3 +143,4 @@ export * from './components/side-panel/side-panel.model';
 export * from './components/side-panel/side-panel.service';
 export * from './components/checklist/checklist.component';
 export * from './components/checklist/checklist.model';
+export * from './components/media-card/media-card.component';