@progressio_resources/gravity-design-system 3.9.3 → 4.0.0

package/package.json

@@ -1,32 +1,30 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "3.9.3",
+  "version": "4.0.0",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/localize": "^16.2.12",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "@angular/common": "^21.1.4",
+    "@angular/core": "^21.1.4",
+    "@angular/localize": "^21.1.4",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
     "@popperjs/core": "^2.11.8",
-    "angular-svg-icon": "^16.1.0",
-    "angular-svg-icon-preloader": "^6.0.0",
-    "ngx-bootstrap": "^11.0.2"
+    "angular-svg-icon": "^19.1.1",
+    "angular-svg-icon-preloader": "^19.2.0",
+    "ngx-bootstrap": "^21.0.1"
   },
   "dependencies": {
     "tslib": "^2.6.2"
   },
   "sideEffects": false,
   "module": "fesm2022/progressio_resources-gravity-design-system.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/progressio_resources-gravity-design-system.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/progressio_resources-gravity-design-system.mjs",
-      "esm": "./esm2022/progressio_resources-gravity-design-system.mjs",
+      "types": "./types/progressio_resources-gravity-design-system.d.ts",
       "default": "./fesm2022/progressio_resources-gravity-design-system.mjs"
     }
   }

package/src/lib/styles/_functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
-}
+  @return color.red($value), color.green($value), color.blue($value);
+}

package/src/lib/styles/_responsive.scss

@@ -1,61 +1,62 @@
-@import "foundations/breakpoints/breakpoints";
+@use "foundations/breakpoints/breakpoints" as br;
+@use "sass:map";
 
 .hide-xl {
-  @media (max-width: map-get($breakpoints, xl)) {
+  @media (max-width: map.get(br.$breakpoints, xl)) {
     display: none;
   }
 }
 
 .hide-lg {
-  @media (max-width: map-get($breakpoints, lg)) {
+  @media (max-width: map.get(br.$breakpoints, lg)) {
     display: none;
   }
 }
 
 .hide-md {
-  @media (max-width: map-get($breakpoints, md)) {
+  @media (max-width: map.get(br.$breakpoints, md)) {
     display: none;
   }
 }
 
 .hide-sm {
-  @media (max-width: map-get($breakpoints, sm)) {
+  @media (max-width: map.get(br.$breakpoints, sm)) {
     display: none;
   }
 }
 
 .hide-xs {
-  @media (max-width: map-get($breakpoints, xs)) {
+  @media (max-width: map.get(br.$breakpoints, xs)) {
     display: none;
   }
 }
 
 .show-xl {
-  @media (min-width: map-get($breakpoints, xl) + 1) {
+  @media (min-width: map.get(br.$breakpoints, xl) + 1) {
     display: none;
   }
 }
 
 .show-lg {
-  @media (min-width: map-get($breakpoints, lg) + 1) {
+  @media (min-width: map.get(br.$breakpoints, lg) + 1) {
     display: none;
   }
 }
 
 .show-md {
-  @media (min-width: map-get($breakpoints, md) + 1) {
+  @media (min-width: map.get(br.$breakpoints, md) + 1) {
     display: none;
   }
 }
 
 .show-sm {
-  @media (min-width: map-get($breakpoints, sm) + 1) {
+  @media (min-width: map.get(br.$breakpoints, sm) + 1) {
     display: none;
   }
 }
 
 .show-xs {
-  @media (min-width: map-get($breakpoints, xs) + 1) {
+  @media (min-width: map.get(br.$breakpoints, xs) + 1) {
     display: none;
   }
 }

package/src/lib/styles/components/_card_highlight.scss

@@ -1,13 +1,13 @@
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
-@import "../shared";
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "../shared" as *;
 
 .gravity-card-highlight {
   @extend .hr-body, .md-regular;
 
   background-color: var(--surface-primary);
   border-left: 1.25rem solid var(--bg-highlight-neutro-secondary);
-  border-radius: $border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   color: var(--text-primary);
   padding: 1.5rem;
 
@@ -24,7 +24,7 @@
 
     &.gravity-card-content {
       border: 1px solid var(--divider-primary);
-      border-radius: $border-radius-md;
+      border-radius: border-radius.$border-radius-md;
       margin-top: 1rem;
     }
 

package/src/lib/styles/components/_datepicker-v2.scss

@@ -1,8 +1,8 @@
-@import "../foundations/z-index/z-index";
+@use "../foundations/z-index/z-index" as z-index;
 
 gt-daterangepicker-container, gt-datepicker-container {
   cursor: default;
-  z-index: $z-index-content;
+  z-index: z-index.$z-index-content;
 }
 
 gt-daterangepicker-inline-container, gt-datepicker-inline-container {

package/src/lib/styles/components/_datepicker.scss

@@ -1,13 +1,14 @@
-@import "../shared";
-@import "../foundations/z-index/z-index";
-@import "../foundations/spacing/spacing";
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
+@use "../shared" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "sass:map";
 
 $datepicker-min-width: 15rem;
 
 bs-datepicker-container {
-  z-index: $z-index-content;
+  z-index: z-index.$z-index-content;
 
   .bs-datepicker-container {
     padding: 0;
@@ -16,14 +17,14 @@ bs-datepicker-container {
 
 .gravity-datepicker-dialog {
   background-color: var(--bg-calender-primary);
-  border-radius: $border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   box-shadow: 0 0 10px #AAA;
   color: var(--on-bg-calender-primary);
 
   .bs-datepicker-head {
     background-color: var(--bg-calendar-nav-primary);
-    border-top-left-radius: $border-radius-md;
-    border-top-right-radius: $border-radius-md;
+    border-top-left-radius: border-radius.$border-radius-md;
+    border-top-right-radius: border-radius.$border-radius-md;
     color: var(--on-bg-calendar-nav-primary);
     height: 3.125rem;
     min-width: $datepicker-min-width;
@@ -40,7 +41,7 @@ bs-datepicker-container {
 
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--arrow-calendar-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -73,13 +74,13 @@ bs-datepicker-container {
         align-items: center;
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--on-bg-calendar-nav-primary);
         cursor: pointer;
         display: flex;
         height: 2rem;
         outline: none;
-        padding-inline: map-get($spacing-values, sm);
+        padding-inline: map.get(spacing.$spacing-values, sm);
 
         &:not([disabled]):hover {
           background-color: var(--bg-arrow-calendar-hover-primary);
@@ -103,7 +104,7 @@ bs-datepicker-container {
       width: 100%;
 
       td {
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--number-calender-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -112,7 +113,7 @@ bs-datepicker-container {
 
         span {
           align-items: center;
-          border-radius: $border-radius-rounded;
+          border-radius: border-radius.$border-radius-rounded;
           display: flex;
           height: 2rem;
           justify-content: center;
@@ -183,7 +184,7 @@ bs-datepicker-container {
 
       span {
         @extend .hr-label, .sm-regular;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         margin: 0 !important;
 
         &.selected {

package/src/lib/styles/components/_offcanvas.scss

@@ -1,7 +1,7 @@
 @use "../foundations/breakpoints/_breakpoints.scss" as br;
-@import "../foundations/spacing/spacing";
-@import "../foundations/z-index/z-index";
-@import "../foundations/elevation/hero.elevation";
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/elevation/hero.elevation" as elevation;
 
 .fade {
   transition: opacity .15s linear;
@@ -37,7 +37,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  z-index: $z-index-overlay;
+  z-index: z-index.$z-index-overlay;
   transform: translateX(100%);
   transition: transform .3s ease-in-out;
   background-color: var(--surface-secondary);

package/src/lib/styles/components/_tables.scss

@@ -1,7 +1,7 @@
-@import "./link";
-@import "../foundations/z-index/z-index";
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
+@use "./link" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
 
 .table-container.xl, .table-container.lg {
   table {
@@ -16,11 +16,11 @@
       color: var(--on-bg-highlight-neutro-secondary);
 
       th:first-of-type {
-        border-top-left-radius: $border-radius-sm;
+        border-top-left-radius: border-radius.$border-radius-sm;
       }
 
       th:last-of-type {
-        border-top-right-radius: $border-radius-sm;
+        border-top-right-radius: border-radius.$border-radius-sm;
       }
     }
 
@@ -142,7 +142,7 @@
 
     tr {
       background-color: var(--surface-primary);
-      border-radius: $border-radius-sm;
+      border-radius: border-radius.$border-radius-sm;
       color: var(--text-primary);
       margin-bottom: 1rem;
       padding: 0.75rem 1rem; //12px 16px
@@ -224,13 +224,13 @@
   .panel {
     background-color: var(--surface-secondary);
     border: 0.5px solid var(--divider-primary);
-    border-radius: $border-radius-sm;
+    border-radius: border-radius.$border-radius-sm;
     padding: 0.25rem 1rem;
     position: absolute;
     right: 0;
     top: 3rem;
     width: 12rem;
-    z-index: $z-index-content;
+    z-index: z-index.$z-index-content;
 
     &:not(.open) {
       display: none;

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -1,4 +1,4 @@
-@import "../primitives/hero.primitives";
+@use "../primitives/hero.primitives" as *;
 
 // button-primary
 $on-bg-button-active-primary-light: $n900;

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -1,5 +1,5 @@
-@import "../themes/hero.theme";
-@import "../../../functions";
+@use "../themes/hero.theme" as *;
+@use "../../../functions" as *;
 
 .hero-light-theme {
   // button-primary
@@ -699,7 +699,7 @@
   --bg-segmented-button-primary: #{$bg-segmented-button-primary-dark};
 
   // Currencies
-  --btc-primary: #{$c10};
+  --btc-primary: #{$btc-primary-dark};
   --busd-primary: #{$busd-primary-dark};
   --ltc-primary: #{$on-bg-currency};
   --ltc-secondary: #{$ltc-primary-dark};

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

@@ -1,3 +1,5 @@
+@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;
@@ -28,7 +30,7 @@ $spacing-values: (
     @each $spacing-type in $spacing-types {
       //.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;
+        #{$scss-type}#{$spacing-type}: map.get($spacing-values, $size) !important;
       }
     }
   }

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

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

package/src/lib/styles/overwrite/bootstrap/_bootstrap-export.scss

@@ -1,2 +1,2 @@
-@import "bootstrap";
-@import "modal";
+@use "bootstrap";
+@use "modal";

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

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

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

@@ -1,4 +1,4 @@
-@import "../foundations/border-radius/hero.border-radius";
-@import "../foundations/colors/tokens/hero.tokens";
-@import "../foundations/elevation/hero.elevation";
-@import "../foundations/typography/hero.typography";
+@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,10 +1,13 @@
-<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+@if (isThemeLight) {
+  <div class="tooltip-arrow"></div>
+}
 
 <!--Si el contentType es template, se usa el ngTemplate sino usa el htmlOrStringTemplate-->
-<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
-  <ng-container *ngTemplateOutlet="value"></ng-container>
-</div>
-
-<ng-template #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,8 +1,8 @@
-@import "../../styles/foundations/z-index/z-index"
+@use "../../styles/foundations/z-index/z-index" as z-index
 
 :host
   position: absolute
-  z-index: $z-index-elevated
+  z-index: z-index.$z-index-elevated
   display: block
   opacity: 0
   transition: opacity 300ms
@@ -116,7 +116,7 @@
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
 // ==========================
-// LIGHT THEME (tu rombo)
+// LIGHT THEME
 // ==========================
 
 :host.tooltip-light::after
@@ -192,42 +192,70 @@
     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
+// ---- TOP (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-top::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-LEFT ----
+:host.tooltip-persistent.tooltip-top-left::after
+  left: 10%
+  margin-left: -24px
 
-/* ---- TOP-RIGHT ---- */
+// ---- 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%
+// ---- BOTTOM (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-bottom::after
   margin-left: -24px
 
-/* ---- RIGHT-BOTTOM ---- */
-:host.tooltip-persistent.tooltip-right-bottom::after
-  top: 85%
+// ---- 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-BOTTOM ---- */
+// ---- 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: 85%
+  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,10 +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']
+  styleUrls: ['./gravity-tooltip.component.sass'],
+  standalone: true,
+  imports: [NgTemplateOutlet, GravityTooltipModule]
 })
 
 export class GravityTooltipComponent implements OnInit {
@@ -26,7 +30,7 @@ export class GravityTooltipComponent implements OnInit {
   @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({
@@ -248,6 +252,6 @@ export class GravityTooltipComponent implements OnInit {
 
   closeTooltip() {
     this.show = false;
-    this.events.emit({ type: 'hide', position: this.data.elementPosition });
+    this.events.emit({type: 'hide', position: this.data.elementPosition});
   }
 }