@progressio_resources/gravity-design-system 3.0.24 → 4.0.25

package/lib/components/gravity-link/gravity-link.component.d.ts

@@ -1,7 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class GravityLinkComponent {
     link: string;
-    href: string;
     linkText: string;
     fontSize: string;
     cypressTag: string;
@@ -11,5 +10,5 @@ export declare class GravityLinkComponent {
     iconSize: 'sm-12' | 'md-16' | 'lg-24' | 'xl-32';
     state: 'active' | 'visited' | 'pressed' | 'disabled';
     static ɵfac: i0.ɵɵFactoryDeclaration<GravityLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GravityLinkComponent, "gravity-link", never, { "link": { "alias": "link"; "required": false; }; "href": { "alias": "href"; "required": false; }; "linkText": { "alias": "linkText"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "cypressTag": { "alias": "cypressTag"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "target": { "alias": "target"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GravityLinkComponent, "gravity-link", never, { "link": { "alias": "link"; "required": false; }; "linkText": { "alias": "linkText"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "cypressTag": { "alias": "cypressTag"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "target": { "alias": "target"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/components/gravity-switch/gravity-switch.component.d.ts

@@ -6,8 +6,10 @@ export declare class GravitySwitchComponent implements AfterViewInit, OnChanges
     disabled: boolean;
     size: 'md' | 'sm';
     textOptions: {
+        above?: string;
         left?: string;
         right?: string;
+        below?: string;
     };
     response: EventEmitter<boolean>;
     isSwitchActive: boolean;

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "3.0.24",
+  "version": "4.0.25",
   "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": "^19.1.6",
+    "@angular/core": "^19.1.6",
+    "@angular/localize": "^19.1.6",
+    "@ng-bootstrap/ng-bootstrap": "^18.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.0.0",
+    "angular-svg-icon-preloader": "^19.0.0",
+    "ngx-bootstrap": "^19.0.2"
   },
   "dependencies": {
     "tslib": "^2.6.2"

package/src/lib/styles/_responsive.scss

@@ -1,61 +1,62 @@
-@import "foundations/breakpoints/breakpoints";
+@use 'sass:map';
+@use "foundations/breakpoints/breakpoints" as br;
 
 .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";
+@use "../foundations/border-radius/hero.border-radius" as bor;
+@use "../shared";
 
 .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: bor.$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: bor.$border-radius-md;
       margin-top: 1rem;
     }
 

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

@@ -1,7 +1,8 @@
-@import "../foundations/typography/hero.typography";
-@import "../foundations/spacing/spacing";
-@import "../foundations/border-radius/hero.border-radius";
-@import "../shared";
+@use 'sass:map';
+@use "../foundations/typography/hero.typography";
+@use "../foundations/spacing/spacing" as spa;
+@use "../foundations/border-radius/hero.border-radius" as bor;
+@use "../shared";
 
 $datepicker-min-width: 15rem;
 
@@ -15,14 +16,14 @@ bs-datepicker-container {
 
 .gravity-datepicker-dialog {
   background-color: var(--bg-calender-primary);
-  border-radius: $border-radius-md;
+  border-radius: bor.$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: bor.$border-radius-md;
+    border-top-right-radius: bor.$border-radius-md;
     color: var(--on-bg-calendar-nav-primary);
     height: 3.125rem;
     min-width: $datepicker-min-width;
@@ -39,7 +40,7 @@ bs-datepicker-container {
 
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: bor.$border-radius-rounded;
         color: var(--arrow-calendar-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -72,13 +73,13 @@ bs-datepicker-container {
         align-items: center;
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: bor.$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(spa.$spacing-values, sm);
 
         &:not([disabled]):hover {
           background-color: var(--bg-arrow-calendar-hover-primary);
@@ -102,7 +103,7 @@ bs-datepicker-container {
       width: 100%;
 
       td {
-        border-radius: $border-radius-rounded;
+        border-radius: bor.$border-radius-rounded;
         color: var(--number-calender-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -111,7 +112,7 @@ bs-datepicker-container {
 
         span {
           align-items: center;
-          border-radius: $border-radius-rounded;
+          border-radius: bor.$border-radius-rounded;
           display: flex;
           height: 2rem;
           justify-content: center;
@@ -182,7 +183,7 @@ bs-datepicker-container {
 
       span {
         @extend .hr-label, .sm-regular;
-        border-radius: $border-radius-rounded;
+        border-radius: bor.$border-radius-rounded;
         margin: 0 !important;
 
         &.selected {

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

@@ -1,6 +1,7 @@
+@use 'sass:map';
 @use "../foundations/breakpoints/_breakpoints.scss" as br;
-@import "../foundations/elevation/hero.elevation";
-@import "../foundations/spacing/spacing";
+@use "../foundations/elevation/hero.elevation";
+@use "../foundations/spacing/spacing";
 
 $z-index: 1040;
 
@@ -42,12 +43,12 @@ $z-index: 1040;
   transition: transform .3s ease-in-out;
   z-index: $z-index;
 
-  @media (min-width: map-get(br.$breakpoints, md) + 1) {
+  @media (min-width: map.get(br.$breakpoints, md) + 1) {
     background-color: var(--surface-secondary);
     width: 50% !important;
   }
 
-  @media (max-width: map-get(br.$breakpoints, md)) {
+  @media (max-width: map.get(br.$breakpoints, md)) {
     background-color: var(--surface-primary);
     width: 100% !important;
   }

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

@@ -1,6 +1,6 @@
-@import "./link";
-@import "../foundations/border-radius/hero.border-radius";
-@import "../foundations/typography/hero.typography";
+@use "./link";
+@use "../foundations/border-radius/hero.border-radius" as bor;
+@use "../foundations/typography/hero.typography";
 
 .table-container.xl, .table-container.lg {
   table {
@@ -15,11 +15,11 @@
       color: var(--on-bg-highlight-neutro-secondary);
 
       th:first-of-type {
-        border-top-left-radius: $border-radius-sm;
+        border-top-left-radius: bor.$border-radius-sm;
       }
 
       th:last-of-type {
-        border-top-right-radius: $border-radius-sm;
+        border-top-right-radius: bor.$border-radius-sm;
       }
     }
 
@@ -141,7 +141,7 @@
 
     tr {
       background-color: var(--surface-primary);
-      border-radius: $border-radius-sm;
+      border-radius: bor.$border-radius-sm;
       color: var(--text-primary);
       margin-bottom: 1rem;
       padding: 0.75rem 1rem; //12px 16px
@@ -223,7 +223,7 @@
   .panel {
     background-color: var(--surface-secondary);
     border: 0.5px solid var(--divider-primary);
-    border-radius: $border-radius-sm;
+    border-radius: bor.$border-radius-sm;
     padding: 0.25rem 1rem;
     position: absolute;
     right: 0;