igniteui-angular 21.2.0-beta.1 → 21.2.0-rc.0

package/lib/core/styles/components/grid/_grid-component.scss

@@ -458,14 +458,6 @@
             @extend %igx-grid__outlet !optional;
         }
 
-        @include e(loading-outlet) {
-            @extend %igx-grid__loading-outlet !optional;
-        }
-
-        @include e(row-editing-outlet) {
-            @extend %igx-grid__row-editing-outlet !optional;
-        }
-
         @include e(addrow-snackbar) {
             @extend %igx-grid__addrow-snackbar !optional;
         }

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -6,8 +6,8 @@
 
 @mixin _filtering-scroll-mask($theme, $dir) {
     display: block;
-    position: absolute;
-    width: rem(10px);
+    position: sticky;
+    min-width: rem(10px);
     content: '';
     inset-block: rem(-2px);
     background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);
@@ -2335,35 +2335,6 @@
 
     %igx-grid__outlet {
         --ig-size: var(--grid-size);
-
-        z-index: 10002;
-        position: fixed;
-    }
-
-    %igx-grid__loading-outlet {
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        position: absolute;
-
-        > %overlay-wrapper--modal {
-            background: none;
-        }
-
-        %circular-display {
-            width: rem(50);
-            height: rem(50);
-        }
-    }
-
-    %igx-grid__row-editing-outlet {
-        z-index: 10000;
-        position: absolute;
-
-        %overlay-wrapper {
-            /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */
-            position: absolute;
-        }
     }
 
     %igx-grid__addrow-snackbar {
@@ -2507,6 +2478,7 @@
         display: flex;
         flex: 1;
         overflow: hidden;
+        position: relative;
         max-width: calc(100% - 176px);
         min-width: rem(56px);
 
@@ -2526,9 +2498,6 @@
                 igx-icon {
                     position: absolute;
                     inset-inline-start: rem(12px);
-                    // IE fix for vertical alignment
-                    top: 50%;
-                    transform: translateY(-50%);
                 }
 
                 span {
@@ -2538,48 +2507,43 @@
         }
     }
 
-    %igx-grid__filtering-scroll-start {
-        &::after {
-            @include _filtering-scroll-mask($theme, right);
-            inset-inline-start: calc(100% + 6px);
-        }
+    %igx-grid__filtering-scroll-start,
+    %igx-grid__filtering-scroll-end {
+        width: rem(24px);
+        height: rem(24px);
+        position: relative;
+        margin: if($variant == 'indigo', rem(12px), rem(8px));
+        z-index: 1;
 
         [dir='rtl'] & {
-            &::before {
-                @include _filtering-scroll-mask($theme, right);
-                inset-inline-end: calc(100% + 6px);
-            }
+            transform: scaleX(-1);
         }
     }
 
-    %igx-grid__filtering-scroll-end {
+    .igx-grid__filtering-row-scroll-start + .igx-grid__filtering-row-main {
         &::before {
-            @include _filtering-scroll-mask($theme, left);
-            inset-inline-end: calc(100% + 6px);
-        }
+            @include _filtering-scroll-mask($theme, right);
 
-        [dir='rtl'] & {
-            &::after {
-                @include _filtering-scroll-mask($theme, left);
-                inset-inline-start: calc(100% + 6px);
-            }
+            inset-inline-start: 0;
+            pointer-events: none;
+            z-index: 1;
         }
-    }
 
-    %igx-grid__filtering-scroll-start,
-    %igx-grid__filtering-scroll-end {
-        width: rem(24px);
-        height: rem(24px);
-        position: relative;
-        overflow: visible;
-        margin: if($variant == 'indigo', rem(12px), rem(8px));
-        z-index: 1;
+        &::after {
+            @include _filtering-scroll-mask($theme, left);
+
+            inset-inline-end: 0;
+            pointer-events: none;
+            z-index: 1;
+        }
 
         [dir='rtl'] & {
-            transform: scaleX(-1);
+            &::before {
+                background: linear-gradient(to left, var-get($theme, 'filtering-row-background'), transparent);
+            }
 
             &::after {
-                content: initial;
+                background: linear-gradient(to right, var-get($theme, 'filtering-row-background'), transparent);
             }
         }
     }

package/lib/core/styles/components/splitter/_splitter-component.scss

@@ -16,7 +16,7 @@
         @extend %igx-splitter-base !optional;
 
         @include b(#{$this}-bar-host) {
-            &:focus {
+            &:focus-visible {
                 @extend %igx-splitter-bar--focus !optional;
             }
         }
@@ -39,9 +39,35 @@
                 @extend %igx-splitter-expander--end !optional;
             }
 
+            &:active {
+                @extend %igx-splitter-bar--active !optional;
+
+                @include e(handle) {
+                    @extend %igx-splitter-handle--active !optional;
+                }
+
+                @include e(expander, 'start') {
+                    @extend %igx-splitter-expander--start--active !optional;
+                }
+
+                @include e(expander, 'end') {
+                    @extend %igx-splitter-expander--end--active !optional;
+                }
+            }
+
             @include m('vertical') {
                 @extend %igx-splitter-bar--vertical !optional;
 
+                &:active {
+                    @include e(expander, 'start') {
+                        @extend %igx-splitter-expander--start-vertical--active !optional;
+                    }
+
+                    @include e(expander, 'end') {
+                        @extend %igx-splitter-expander--end-vertical--active !optional;
+                    }
+                }
+
                 @include e(handle) {
                     @extend %igx-splitter-handle !optional;
                     @extend %igx-splitter-handle--vertical !optional;

package/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -9,19 +9,21 @@
 @mixin splitter($theme) {
     @include css-vars($theme);
     $splitter-color: var-get($theme, 'bar-color');
+    $splitter-size: var-get($theme, 'size');
     $hitbox-size: rem(4px);
     $debug-hitbox: false;
     $hitbox-debug-color: rgba(coral, .24);
 
     $variant: map.get($theme, '_meta', 'theme');
 
-    //splitter-size + borders
-    $splitter-size: unitless(map.get($theme, 'size')) + 2;
-
-    //calculate the value for the slim(indigo) splitter
-    $slim-splitter: calc( 1 / $splitter-size);
+    // Get unitless value from theme for use in CSS custom properties
+    $size-unitless: unitless(map.get($theme, 'size'));
 
     %igx-splitter-base {
+        // Define CSS custom properties that use --ig-base-font-size for dynamic calculations
+        --splitter-size: calc(#{$size-unitless} * var(--ig-base-font-size, 16px) + 2px);
+        --slim-splitter: calc(1 / calc(var(--splitter-size) / 1px));
+
         &[aria-orientation='horizontal'] {
             [dir='rtl'] & {
                 flex-direction: row-reverse !important;
@@ -37,7 +39,7 @@
         background: if($debug-hitbox, $hitbox-debug-color, transparent);
 
         @if $variant == 'indigo' {
-            height: rem($splitter-size * 4px);
+            height: calc(var(--splitter-size) * 4);
         }
     }
 
@@ -46,7 +48,7 @@
         height: 100%;
 
         @if $variant == 'indigo' {
-            width: rem($splitter-size * 4px);
+            width: calc(var(--splitter-size) * 4);
         }
     }
 
@@ -54,7 +56,7 @@
         %igx-splitter-handle,
         %igx-splitter-expander {
             opacity: 0;
-            transition: opacity .25s .5s ease;
+            transition: opacity .25s .3s ease;
             pointer-events: none;
         }
     }
@@ -62,7 +64,7 @@
     %show-controls {
         %igx-splitter-handle,
         %igx-splitter-expander {
-            opacity: 1;
+            opacity: .68;
             transition: opacity .25s ease;
             pointer-events: auto;
         }
@@ -76,31 +78,39 @@
         [aria-orientation='vertical'] & {
             transform: scaleY(1);
         }
+
         transition-delay: 0s !important;
     }
 
     %indigo-splitter-bar {
         @extend %hide-controls;
+        transition: all .25s .3s $in-out-quad !important;
 
         [aria-orientation='horizontal'] & {
-            transform: scaleX($slim-splitter);
+            transform: scaleX(var(--slim-splitter));
         }
 
         [aria-orientation='vertical'] & {
-            transform: scaleY($slim-splitter);
+            transform: scaleY(var(--slim-splitter));
         }
 
-        &.igx-splitter-bar--collapsible {
-            transition: all .25s .5s $in-out-quad !important;
+        &:hover {
+            @extend %expand-bars;
+        }
 
+        &.igx-splitter-bar--collapsible {
             &::before,
             &::after {
                 transition-delay: 2s;
             }
 
             &:hover {
-                @extend %show-controls;
-                @extend %expand-bars;
+                %igx-splitter-handle,
+                %igx-splitter-expander {
+                    opacity: 1;
+                    transition: opacity .25s ease;
+                    pointer-events: auto;
+                }
 
                 &::before,
                 &::after {
@@ -126,17 +136,23 @@
         flex-grow: 1;
         justify-content: center;
         align-items: center;
-        background: $splitter-color;
-        border: rem(1px) solid $splitter-color;
+        background: hsla(from $splitter-color h s l / 0.68);
         z-index: 99;
-        opacity: .68;
-        transition: opacity .15s $out-quad !important;
+        padding-block: rem(1px);
 
         @if $variant != 'indigo' {
+            transition: background .15s $out-quad !important;
             @extend %hide-controls;
 
             &.igx-splitter-bar--collapsible {
                 @extend %show-controls;
+
+                &:hover {
+                    %igx-splitter-handle,
+                    %igx-splitter-expander {
+                        opacity: 1;
+                    }
+                }
             }
         }
 
@@ -156,31 +172,41 @@
 
         &:hover {
             transition: all .25s ease-out;
-            opacity: 1;
+            background: $splitter-color;
         }
     }
 
     %igx-splitter-bar--focus {
         // Remove the default browser outline styles
-        outline: transparent solid rem(1px);
-        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
+        outline: none;
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
+        transition: box-shadow .15s ease-in if($variant == 'indigo', .1s, 0s);
+        z-index: 100;
 
         @if $variant == 'indigo' {
-            box-shadow: none;
-
             %indigo-splitter-bar {
-                background: var-get($theme, 'focus-color');
-                border-color: var-get($theme, 'focus-color');
+                @extend %expand-bars;
 
                 &.igx-splitter-bar--collapsible {
-                    @extend %show-controls;
-                    @extend %expand-bars;
+                     @extend %show-controls;
+
+                     &:hover {
+                        %igx-splitter-handle,
+                        %igx-splitter-expander {
+                            opacity: 1;
+                        }
+                    }
                 }
             }
         }
     }
 
+    %igx-splitter-bar--active {
+        background: var-get($theme, 'bar-color-active');
+    }
+
     %igx-splitter-bar--vertical {
+        padding: 0 rem(1px);
         flex-direction: column;
         height: 100%;
 
@@ -202,14 +228,18 @@
         border-radius: var-get($theme, 'border-radius');
     }
 
+    %igx-splitter-handle--active {
+        background: var-get($theme, 'handle-color-active');
+    }
+
     %igx-splitter-handle--horizontal {
         width: 25%;
-        height: var-get($theme, 'size');
+        height: $splitter-size;
         margin: 0 rem(48px);
     }
 
     %igx-splitter-handle--vertical {
-        width: var-get($theme, 'size');
+        width: $splitter-size;
         height: 25%;
         margin: rem(48px) 0;
     }
@@ -224,14 +254,14 @@
         position: relative;
         width: 0;
         height: 0;
-        border-inline-end: var-get($theme, 'size') solid transparent;
-        border-inline-start: var-get($theme, 'size') solid transparent;
+        border-inline-end: $splitter-size solid transparent;
+        border-inline-start: $splitter-size solid transparent;
         cursor: pointer;
         z-index: 1;
     }
 
     %igx-splitter-expander--start {
-        border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -242,9 +272,12 @@
         }
     }
 
+    %igx-splitter-expander--start--active {
+        border-block-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end {
-        border-bottom: unset;
-        border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-start: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -255,10 +288,14 @@
         }
     }
 
+    %igx-splitter-expander--end--active {
+        border-block-start-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--start-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
-        border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');
-        border-bottom: var-get($theme, 'size') solid transparent;
+        border-block-start: $splitter-size solid transparent;
+        border-inline-end: $splitter-size solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid transparent;
         border-inline-start: unset;
 
         &::before {
@@ -270,11 +307,16 @@
         }
     }
 
+    %igx-splitter-expander--start-vertical--active {
+        border-block-end-color: transparent;
+        border-inline-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
+        border-block-start: $splitter-size solid transparent;
         border-inline-end: unset;
-        border-bottom: var-get($theme, 'size') solid transparent;
-        border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-end: $splitter-size solid transparent;
+        border-inline-start: $splitter-size solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -284,4 +326,9 @@
             width: calc(#{map.get($theme, 'size')} * 3);
         }
     }
+
+    %igx-splitter-expander--end-vertical--active {
+        border-block-start-color: transparent;
+        border-inline-start-color: var-get($theme, 'expander-color-active');
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.2.0-beta.1",
+  "version": "21.2.0-rc.0",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",