igniteui-angular 18.1.2 → 18.1.4

package/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -384,13 +384,18 @@
         }
 
         @if $variant == 'material' {
+	        $reduce-size: rem(8px);
+	        
+			// The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554
+	        clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius'));
+	        
             &::after {
                 content: '';
                 position: absolute;
                 width: 100%;
                 inset-block-start: rem(4px);
                 inset-inline-start: 0;
-                height: calc(100% - #{rem(8px)});
+                height: calc(100% - #{$reduce-size});
                 border-radius: var-get($theme, 'item-border-radius');
                 z-index: -1;
             }

package/lib/core/styles/components/progress/_progress-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass:meta';
 @use 'sass:list';
 @use '../../base' as *;
@@ -398,6 +399,7 @@
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
 /// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
 /// @param {Color} $text-color [null] - The value text color.
+/// @param {Number} $diameter [null] - The progress circle diameter.
 ///
 /// @requires $light-material-schema
 ///
@@ -412,8 +414,8 @@
 
     $base-circle-color: null,
     $progress-circle-color: null,
-
-    $text-color: null
+    $text-color: null,
+    $diameter: null
 ) {
     $name: 'igx-circular-bar';
     $circular-bar-schema: ();
@@ -446,6 +448,7 @@
         progress-circle-color-start: $progress-circle-color-start,
         progress-circle-color-end: $progress-circle-color-end,
         text-color: $text-color,
+        diameter: $diameter,
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),
@@ -463,25 +466,14 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    $circular-size: map.get((
-        material: rem(32px),
-        fluent: rem(32px),
-        bootstrap: rem(54px),
-        indigo-design: rem(48px),
-    ), $variant);
-
-    $stroke-width: map.get((
-        material: rem(4px),
-        fluent: rem(4px),
-        bootstrap: rem(4px),
-        indigo-design: rem(4px),
-    ), $variant);
+    $stroke-width: rem(4px);
+    $diameter: var-get($theme, 'diameter');
 
     %circular-display {
         display: inline-flex;
         flex: 1 1 auto;
-        width: $circular-size;
-        height: $circular-size;
+        width: $diameter;
+        height: $diameter;
         position: relative;
 
         svg {
@@ -533,12 +525,32 @@
     }
 
     %circular-text {
+        $scale-factor: 2.28571;
+
+        @if $variant == 'indigo-design' {
+            $scale-factor: 3;
+        }
+
+        @if $variant == 'bootstrap' {
+            $scale-factor: 2.7;
+        }
+
+        --stroke-scale: calc(#{$diameter} / #{unitless(map.get($theme, 'diameter'))});
+        $font-size: round(calc($diameter / $scale-factor - #{unitless($stroke-width)} * var(--stroke-scale)), 1px);
+
         position: absolute;
         inset-block-start: 50%;
         inset-inline-start: 50%;
         transform: translate(-50%, -50%);
-        text-align: center;
         color: var-get($theme, 'text-color');
+        font-size: #{$font-size};
+        line-height: normal;
+        text-align: center;
+        font-weight: 600;
+
+        @if $variant == 'bootstrap' or $variant == 'fluent' {
+            font-weight: 700;
+        }
     }
 
     %circular-text--hidden {
@@ -564,27 +576,3 @@
         }
     }
 }
-
-// Adds typography styles for the igx-circular-bar component.
-/// Uses custom typography
-/// @group typography
-/// @param {Map} $categories [(text: 'h6')] - The categories from the typographic scale used for type styles.
-@mixin circular-bar-typography($categories: (text: 'h6')) {
-    $text: map.get($categories, 'text');
-
-    @if $text {
-        %circular-text {
-            @include type-style($text) {
-                font-size: rem(12px);
-                line-height: rem(16px);
-                margin: 0;
-            }
-        }
-    } @else {
-        %circular-text {
-            font-size: rem(12px);
-            font-weight: 700;
-            line-height: rem(16px);
-        }
-    }
-}

package/lib/core/styles/typography/_bootstrap.scss

@@ -55,9 +55,6 @@
         label: 'body-1',
     ));
     @include chip-typography();
-    @include circular-bar-typography($categories: (
-        text: 'subtitle-1'
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (

package/lib/core/styles/typography/_fluent.scss

@@ -58,9 +58,6 @@
     @include chip-typography($categories: (
         text: 'subtitle-2'
     ));
-    @include circular-bar-typography($categories: (
-        text: null
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();

package/lib/core/styles/typography/_indigo.scss

@@ -57,9 +57,6 @@
         label: 'body-2',
     ));
     @include chip-typography();
-    @include circular-bar-typography($categories: (
-        text: 'subtitle-2'
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (

package/lib/core/styles/typography/_material.scss

@@ -41,7 +41,6 @@
     @include card-typography();
     @include checkbox-typography();
     @include chip-typography();
-    @include circular-bar-typography();
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();

package/lib/grids/filtering/base/grid-filtering-row.component.d.ts

@@ -56,6 +56,7 @@ export declare class IgxGridFilteringRowComponent implements AfterViewInit, OnDe
     private isKeyPressed;
     private isComposing;
     private _cancelChipClick;
+    private _value;
     private _icons;
     /** switch to icon buttons when width is below 432px */
     private readonly NARROW_WIDTH_THRESHOLD;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "18.1.2",
+  "version": "18.1.4",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -74,7 +74,7 @@
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "^10.1.0",
     "@igniteui/material-icons-extended": "^3.0.0"
   },
   "peerDependencies": {