@progressio_resources/gravity-design-system 4.0.25 → 4.0.27

package/src/lib/styles/foundations/spacing/_spacing.scss

@@ -1,21 +1,22 @@
-@use 'sass:map';
+@use "sass:map";
 
 $scss-types: padding, margin;
 $spacing-sizes: none, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl;
 $spacing-types: '', -top, -bottom, -left, -right, -block, -inline;
 
 $spacing-values: (
-  none: 0,        // 0px
-  xxs: 0.25rem,   // 4px
-  xs: 0.5rem,     // 8px
-  sm: 1rem,       // 16px
-  md: 1.5rem,     // 24px
-  lg: 2rem,       // 32px
-  xl: 2.5rem,     // 40px
-  xxl: 3rem,      // 48px
-  xxxl: 4rem,     // 64px
-  xxxxl: 6rem,    // 96px
-  xxxxxl: 12rem   // 192px
+  none: 0,         // 0px
+  xxxs: 0.125rem,  // 2px
+  xxs: 0.25rem,    // 4px
+  xs: 0.5rem,      // 8px
+  sm: 1rem,        // 16px
+  md: 1.5rem,      // 24px
+  lg: 2rem,        // 32px
+  xl: 2.5rem,      // 40px
+  xxl: 3rem,       // 48px
+  xxxl: 4rem,      // 64px
+  xxxxl: 6rem,     // 96px
+  xxxxxl: 12rem    // 192px
 );
 
 :root {
@@ -27,7 +28,7 @@ $spacing-values: (
 @each $scss-type in $scss-types {
   @each $size in $spacing-sizes {
     @each $spacing-type in $spacing-types {
-      //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl}}
+      //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl}}
       .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
         #{$scss-type}#{$spacing-type}: map.get($spacing-values, $size) !important;
       }

package/src/lib/styles/foundations/z-index/_z-index.scss

@@ -0,0 +1,10 @@
+// -----------------------------------------------------------------------------
+// Z-INDEX DESIGN TOKENS
+// -----------------------------------------------------------------------------
+
+$z-index-base: 0;       // Fallback
+$z-index-content: 1;    // Standard
+$z-index-elevated: 5;   // Elevated
+$z-index-overlay: 10;   // Overlays
+$z-index-highest: 100;  // Highest
+$z-index-topmost: 1000; // Emergency

package/src/lib/styles/gravity-design-system.scss

@@ -1,18 +1,20 @@
 @use "./responsive";
 @use "./shared";
 
-//Components
-@use "./components/card_highlight";
-@use "./components/datepicker";
-@use "./components/datepicker-v2";
+// Components
 @use "./components/link";
-@use "./components/offcanvas";
 @use "./components/tables";
+@use "./components/offcanvas";
+@use "./components/datepicker";
+@use "./components/scroll_bar";
+@use "./components/datepicker-v2";
+@use "./components/card_highlight";
 
-//Foundations
-@use "./foundations/breakpoints/breakpoints";
+// Foundations
 @use "./foundations/grids/grids";
+@use "./foundations/z-index/z-index";
 @use "./foundations/spacing/spacing";
+@use "./foundations/breakpoints/breakpoints";
 
-//Overwrite
+// Overwrite
 @use "./overwrite/bootstrap/bootstrap-export";

package/src/lib/styles/overwrite/bootstrap/_modal.scss

@@ -1,4 +1,5 @@
-@use "../../foundations/border-radius/hero.border-radius" as bor;
+@use "../../foundations/z-index/z-index" as z-index;
+@use "../../foundations/border-radius/hero.border-radius" as border-radius;
 
 $modal-margin: 3.5rem;
 
@@ -12,7 +13,7 @@ $modal-margin: 3.5rem;
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 1055;
+  z-index: z-index.$z-index-overlay;
 }
 
 .modal-dialog {
@@ -109,7 +110,7 @@ $modal-margin: 3.5rem;
 
   background-clip: padding-box;
   background-color: var(--dialog-background-color);
-  border-radius: bor.$border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   box-shadow: 0 27px 34px #000c208f;
   color: var(--dialog-text-color);
   display: flex;
@@ -121,7 +122,8 @@ $modal-margin: 3.5rem;
 }
 
 .modal-backdrop {
-  background-color: var(--surface-tertiary);
+  z-index: z-index.$z-index-overlay !important;
+  background-color: var(--backdrop-primary);
   height: 100vh;
   left: 0;
   position: fixed;
@@ -133,7 +135,7 @@ $modal-margin: 3.5rem;
   }
 
   &.show {
-    opacity: var(--surface-opacity);
+    opacity: var(--backdrop-opacity);
   }
 }
 

package/src/lib/styles/themes/_hero.scss

@@ -1,4 +1,4 @@
-@use "../foundations/border-radius/hero.border-radius" as heroBorder;
-@use "../foundations/colors/tokens/hero.tokens" as heroTokens;
-@use "../foundations/elevation/hero.elevation" as heroElevation;
-@use "../foundations/typography/hero.typography" as heroTypography;
+@use "../foundations/border-radius/hero.border-radius" as *;
+@use "../foundations/colors/tokens/hero.tokens" as *;
+@use "../foundations/elevation/hero.elevation" as *;
+@use "../foundations/typography/hero.typography" as *;

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

@@ -1,9 +1,13 @@
-<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+@if (isThemeLight) {
+  <div class="tooltip-arrow"></div>
+}
 
-<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
-  <ng-container *ngTemplateOutlet="value"></ng-container>
-</div>
-
-<ng-template #htmlOrStringTemplate>
+<!--Si el contentType es template, se usa el ngTemplate sino usa el htmlOrStringTemplate-->
+@if (options['contentType'] === 'template') {
+  <div>
+    <ng-container *ngTemplateOutlet="value"></ng-container>
+  </div>
+} @else {
   <div [innerHTML]="value"></div>
-</ng-template>
+}
+

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

@@ -1,125 +1,140 @@
-\:host
-  max-width: 200px
-  background-color: var(--bg-tooltip-primary)
-  color: var(--on-bg-tooltip-primary)
-  text-align: center
-  border-radius: 6px
-  padding: 5px 8px
+@use "../../styles/foundations/z-index/z-index" as z-index
+
+:host
   position: absolute
-  pointer-events: none
-  z-index: 1000
+  z-index: 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
-  box-shadow: 0 7px 15px -5px rgba(0, 0, 0, 0.4)
+:host.tooltip-shadow
+  box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22)
+
+:host.tooltip-light.tooltip-shadow
+  box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22)
+
+:host.tooltip-no-pointer
+  pointer-events: none
 
-\:host.tooltip-light.tooltip-shadow
-  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.4)
+// ==========================
+// CARET BASE (5px default)
+// ==========================
 
-\:host.tooltip::after
+: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
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
-\: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)
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
-\: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-top::after
+  top: 10%
+  left: 100%
+  margin-top: -5px
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
-\:host.tooltip-left-bottom::after
-  top: 90%
+:host.tooltip-left-bottom::after
+  top: 80%
   left: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
-\: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
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
-\:host.tooltip-right-bottom::after
-  top: 90%
+:host.tooltip-right-bottom::after
+  top: 80%
   right: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
-// Light
-\:host.tooltip-light::after
+// ==========================
+// LIGHT THEME
+// ==========================
+
+: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 +154,7 @@
     width: 10px
     height: 10px
 
-\:host.tooltip-top.tooltip-light
+:host.tooltip-top.tooltip-light
   margin-top: -2px
 
   .tooltip-arrow
@@ -153,7 +168,7 @@
     top: 1px
     right: 1px
 
-\:host.tooltip-bottom.tooltip-light
+:host.tooltip-bottom.tooltip-light
   .tooltip-arrow
     bottom: 100%
     left: 50%
@@ -165,7 +180,7 @@
     top: -1px
     right: -1px
 
-\:host.tooltip-left.tooltip-light
+:host.tooltip-left.tooltip-light
   .tooltip-arrow
     top: 50%
     left: 100%
@@ -177,7 +192,7 @@
     top: 1px
     right: -1px
 
-\:host.tooltip-right.tooltip-light
+:host.tooltip-right.tooltip-light
   .tooltip-arrow
     top: 50%
     right: 100%
@@ -188,3 +203,71 @@
   .tooltip-arrow::after
     top: -1px
     right: 1px
+
+:host.tooltip-persistent.tooltip::after
+  border-width: 24px
+
+// ---- TOP (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-top::after
+  margin-left: -24px
+
+// ---- TOP-LEFT ----
+:host.tooltip-persistent.tooltip-top-left::after
+  left: 10%
+  margin-left: -24px
+
+// ---- TOP-RIGHT ----
+:host.tooltip-persistent.tooltip-top-right::after
+  left: 85%
+  margin-left: -24px
+
+// ---- BOTTOM (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-bottom::after
+  margin-left: -24px
+
+// ---- BOTTOM-LEFT ----
+:host.tooltip-persistent.tooltip-bottom-left::after
+  left: 32px
+  margin-left: 0
+
+// ---- BOTTOM-RIGHT ----
+:host.tooltip-persistent.tooltip-bottom-right::after
+  left: auto
+  right: 32px
+  margin-left: 0
+
+// ---- LEFT (centrado vertical) ----
+:host.tooltip-persistent.tooltip-left::after
+  top: 50%
+  margin-top: -24px
+
+// ---- LEFT-TOP ----
+:host.tooltip-persistent.tooltip-left-top::after
+  top: 0
+  bottom: auto
+  margin-top: 26px
+
+// ---- LEFT-BOTTOM ----
+:host.tooltip-persistent.tooltip-left-bottom::after
+  top: auto
+  bottom: 0
+  margin-top: 0
+  margin-bottom: 27px
+
+// ---- RIGHT (centrado vertical) ----
+:host.tooltip-persistent.tooltip-right::after
+  top: 50%
+  margin-top: -24px
+
+// ---- RIGHT-TOP ----
+:host.tooltip-persistent.tooltip-right-top::after
+  top: 0
+  bottom: auto
+  margin-top: 26px
+
+// ---- RIGHT-BOTTOM ----
+:host.tooltip-persistent.tooltip-right-bottom::after
+  top: auto
+  bottom: 0
+  margin-top: 0
+  margin-bottom: 27px

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

@@ -1,11 +1,14 @@
 import {Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnInit, Renderer2} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {GravityTooltipModule} from './gravity-tooltip.module';
 
 @Component({
-    selector: 'tooltip',
-    templateUrl: './gravity-tooltip.component.html',
-    host: { 'class': 'tooltip' },
-    styleUrls: ['./gravity-tooltip.component.sass'],
-    standalone: false
+  selector: 'tooltip',
+  templateUrl: './gravity-tooltip.component.html',
+  host: {'class': 'tooltip'},
+  styleUrls: ['./gravity-tooltip.component.sass'],
+  standalone: true,
+  imports: [NgTemplateOutlet, GravityTooltipModule]
 })
 
 export class GravityTooltipComponent implements OnInit {
@@ -24,8 +27,10 @@ export class GravityTooltipComponent implements OnInit {
   @HostBinding('class.tooltip-show') hostClassShow!: boolean;
   @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'])
+  @HostListener('transitionend')
   transitionEnd() {
     if (this.show) {
       this.events.emit({
@@ -70,9 +75,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';
   }
@@ -212,12 +224,6 @@ export class GravityTooltipComponent implements OnInit {
     }
   }
 
-  setPointerEvents(): void {
-    if (this.options['pointerEvents']) {
-      this.hostStylePointerEvents = this.options['pointerEvents'];
-    }
-  }
-
   setCustomClass() {
     if (this.options['tooltipClass']) {
       this.options['tooltipClass'].split(' ').forEach((className: any) => {
@@ -234,12 +240,18 @@ export class GravityTooltipComponent implements OnInit {
 
   setStyles() {
     this.setZIndex();
-    this.setPointerEvents();
     this.setAnimationDuration();
 
     this.hostClassShadow = this.options['shadow'];
     this.hostClassLight = this.isThemeLight;
     this.hostStyleMaxWidth = this.options['maxWidth'];
     this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
+    this.hostClassNoPointer = !this.options['persistent'];
+    this.hostClassPersistent = !!this.options['persistent'];
+  }
+
+  closeTooltip() {
+    this.show = false;
+    this.events.emit({type: 'hide', position: this.data.elementPosition});
   }
 }