@progressio_resources/gravity-design-system 3.9.0 → 3.9.1

package/lib/vendor/gravity-tooltip/gravity-tooltip.component.d.ts

@@ -17,6 +17,7 @@ export declare class GravityTooltipComponent implements OnInit {
     hostClassShadow: boolean;
     hostClassLight: boolean;
     hostClassNoPointer: boolean;
+    hostClassPersistent: boolean;
     transitionEnd(): void;
     set show(value: boolean);
     get show(): boolean;

package/lib/vendor/gravity-tooltip/options.interface.d.ts

@@ -38,4 +38,5 @@ export interface TooltipOptions {
         left: number;
     };
     'persistent'?: boolean;
+    'isBanner'?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
     "@angular/common": "^16.2.12",

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -1,125 +1,128 @@
 @import "../../styles/foundations/z-index/z-index"
 
-\:host
+:host
   position: absolute
   z-index: $z-index-elevated
   display: block
   opacity: 0
-  -webkit-transition: opacity 300ms
-  -moz-transition: opacity 300ms
-  -o-transition: opacity 300ms
   transition: opacity 300ms
   top: 0
   left: 0
   border-radius: 5px
 
-\:host.tooltip-show
+:host.tooltip-show
   opacity: 1
 
-\:host.tooltip-shadow
+:host.tooltip-shadow
   box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22)
 
-\:host.tooltip-light.tooltip-shadow
+:host.tooltip-light.tooltip-shadow
   box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22)
 
-\:host.tooltip-no-pointer
+:host.tooltip-no-pointer
   pointer-events: none
 
-//Caret
-\:host.tooltip::after
+// ==========================
+// CARET BASE (5px default)
+// ==========================
+
+:host.tooltip::after
   content: ""
   position: absolute
   border-style: solid
 
-\:host.tooltip-top::after
+:host.tooltip-top::after
   top: 100%
   left: 50%
   margin-left: -5px
   border-width: 5px
   border-color: var(--bg-tooltip-primary) transparent transparent transparent
 
-\:host.tooltip-top-left::after
+:host.tooltip-top-left::after
   top: 100%
   left: 10%
   margin-left: -5px
   border-width: 5px
   border-color: var(--bg-tooltip-primary) transparent transparent transparent
 
-\:host.tooltip-top-right::after
+:host.tooltip-top-right::after
   top: 100%
   left: 90%
   margin-left: -5px
   border-width: 5px
   border-color: var(--bg-tooltip-primary) transparent transparent transparent
 
-\:host.tooltip-bottom::after
+:host.tooltip-bottom::after
   bottom: 100%
   left: 50%
   margin-left: -5px
   border-width: 5px
   border-color: transparent transparent var(--bg-tooltip-primary) transparent
 
-\:host.tooltip-bottom-left::after
+:host.tooltip-bottom-left::after
   bottom: 100%
   left: 10%
   margin-left: -5px
   border-width: 5px
   border-color: transparent transparent var(--bg-tooltip-primary) transparent
 
-\:host.tooltip-bottom-right::after
+:host.tooltip-bottom-right::after
   bottom: 100%
   left: 90%
   margin-left: -5px
   border-width: 5px
   border-color: transparent transparent var(--bg-tooltip-primary) transparent
 
-\:host.tooltip-left::after
+:host.tooltip-left::after
   top: 50%
   left: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent transparent transparent var(--bg-tooltip-primary)
 
-\:host.tooltip-left-top::after
+:host.tooltip-left-top::after
   top: 10%
   left: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent transparent transparent var(--bg-tooltip-primary)
 
-\:host.tooltip-left-bottom::after
+:host.tooltip-left-bottom::after
   top: 90%
   left: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent transparent transparent var(--bg-tooltip-primary)
 
-\:host.tooltip-right::after
+:host.tooltip-right::after
   top: 50%
   right: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
-\:host.tooltip-right-top::after
+:host.tooltip-right-top::after
   top: 10%
   right: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
-\:host.tooltip-right-bottom::after
+:host.tooltip-right-bottom::after
   top: 90%
   right: 100%
   margin-top: -5px
   border-width: 5px
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
-// Light
-\:host.tooltip-light::after
+// ==========================
+// LIGHT THEME (tu rombo)
+// ==========================
+
+:host.tooltip-light::after
   display: none
 
-\:host.tooltip-light
+:host.tooltip-light
   border: 1px solid rgba(0, 0, 0, .06)
   background-color: #fff
   color: black
@@ -139,7 +142,7 @@
     width: 10px
     height: 10px
 
-\:host.tooltip-top.tooltip-light
+:host.tooltip-top.tooltip-light
   margin-top: -2px
 
   .tooltip-arrow
@@ -153,7 +156,7 @@
     top: 1px
     right: 1px
 
-\:host.tooltip-bottom.tooltip-light
+:host.tooltip-bottom.tooltip-light
   .tooltip-arrow
     bottom: 100%
     left: 50%
@@ -165,7 +168,7 @@
     top: -1px
     right: -1px
 
-\:host.tooltip-left.tooltip-light
+:host.tooltip-left.tooltip-light
   .tooltip-arrow
     top: 50%
     left: 100%
@@ -177,7 +180,7 @@
     top: 1px
     right: -1px
 
-\:host.tooltip-right.tooltip-light
+:host.tooltip-right.tooltip-light
   .tooltip-arrow
     top: 50%
     right: 100%
@@ -188,3 +191,43 @@
   .tooltip-arrow::after
     top: -1px
     right: 1px
+
+// ==================================================
+// CARET GRANDE SOLO CUANDO persistent = true
+// ==================================================
+
+:host.tooltip-persistent.tooltip::after
+  border-width: 24px
+
+// Centrado general del caret grande
+:host.tooltip-persistent.tooltip-top::after,
+:host.tooltip-persistent.tooltip-bottom::after
+  margin-left: -24px
+
+:host.tooltip-persistent.tooltip-left::after,
+:host.tooltip-persistent.tooltip-right::after
+  margin-top: -24px
+
+// ==================================================
+// AJUSTES FINOS SOLO PARA LOS CASOS QUE MENCIONASTE
+// ==================================================
+
+/* ---- TOP-RIGHT ---- */
+:host.tooltip-persistent.tooltip-top-right::after
+  left: 85%
+  margin-left: -24px
+
+/* ---- BOTTOM-RIGHT ---- */
+:host.tooltip-persistent.tooltip-bottom-right::after
+  left: 85%
+  margin-left: -24px
+
+/* ---- RIGHT-BOTTOM ---- */
+:host.tooltip-persistent.tooltip-right-bottom::after
+  top: 85%
+  margin-top: -24px
+
+/* ---- LEFT-BOTTOM ---- */
+:host.tooltip-persistent.tooltip-left-bottom::after
+  top: 85%
+  margin-top: -24px

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.ts

@@ -24,6 +24,7 @@ export class GravityTooltipComponent implements OnInit {
   @HostBinding('class.tooltip-shadow') hostClassShadow!: boolean;
   @HostBinding('class.tooltip-light') hostClassLight!: boolean;
   @HostBinding('class.tooltip-no-pointer') hostClassNoPointer!: boolean;
+  @HostBinding('class.tooltip-persistent') hostClassPersistent!: boolean;
 
   @HostListener('transitionend', ['$event'])
   transitionEnd() {
@@ -70,9 +71,16 @@ export class GravityTooltipComponent implements OnInit {
   }
 
   get tooltipOffset(): number {
-    return Number(this.data.options.offset);
+    const base = Number(this.data.options.offset);
+
+    if (this.options['persistent']) {
+      return base + 18;
+    }
+
+    return base;
   }
 
+
   get isThemeLight() {
     return this.options['theme'] === 'light';
   }
@@ -235,6 +243,7 @@ export class GravityTooltipComponent implements OnInit {
     this.hostStyleMaxWidth = this.options['maxWidth'];
     this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
     this.hostClassNoPointer = !this.options['persistent'];
+    this.hostClassPersistent = !!this.options['persistent'];
   }
 
   closeTooltip() {

package/src/lib/vendor/gravity-tooltip/options.interface.ts

@@ -35,4 +35,5 @@ export interface TooltipOptions {
   'pointerEvents'?: 'auto' | 'none';
   'position'?: { top: number, left: number };
   'persistent'?: boolean;
+  'isBanner'?: boolean;
 }