SASS for Angular 18 changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fusion-ui",
-  "version": "8.4.0-rc.11",
+  "version": "9.0.0-test.1",
   "description": "UI library created by ironSource",
   "license": "MIT",
   "repository": {

projects/fusion-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ironsource/fusion-ui",
-    "version": "8.4.0-rc.11",
+    "version": "9.0.0-test.1",
     "peerDependencies": {
         "chart.js": "4.4.2",
         "@floating-ui/dom": "^1.0.9",

projects/fusion-ui/src/style/scss/v1/grid.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {

projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 

projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -59,7 +61,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -103,7 +105,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -113,10 +115,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -180,19 +182,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {

projects/fusion-ui/src/style/scss/v2/grid.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {

projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 

projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -59,7 +61,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -103,7 +105,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -113,10 +115,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -180,19 +182,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {

projects/fusion-ui/src/style/scss/v3/grid.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {

projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 

projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -108,7 +110,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -152,7 +154,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -162,10 +164,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -229,19 +231,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {