igniteui-angular 21.0.0-rc.0 → 21.0.0

package/grids/grid/README.md

@@ -19,7 +19,7 @@ The grid is exported as as an `NgModule`, thus all you need to do in your applic
 
 import { IgxGridModule } from 'igniteui-angular';
 // Or
-import { IgxGridModule } from 'igniteui-angular/grid';
+import { IgxGridModule } from 'igniteui-angular/grids/grid';
 
 @NgModule({
     imports: [
@@ -31,12 +31,14 @@ import { IgxGridModule } from 'igniteui-angular/grid';
 export class AppModule {}
 ```
 
-Each of the components, directives and helper classes in the _IgxGridModule_ can be imported either through the _grid_ sub-package or through the main bundle in _igniteui-angular_. While you don't need to import all of them to instantiate and use the grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API.
+Each of the components, directives and helper classes in the _IgxGridModule_ can be imported through the per-package entry points. Prefer subpath imports for optimal tree-shaking and smaller bundles.
 
 ```typescript
-import { IgxGridComponent } from 'igniteui-angular/grid';
-// Or
-import { IgxGridComponent } from 'igniteui-angular'
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
+// Per-feature entry points (examples):
+// import { IgxPaginatorModule } from 'igniteui-angular/paginator';
+// import { IgxButtonModule } from 'igniteui-angular/button';
+// import { IgxIconModule } from 'igniteui-angular/icon';
 ...
 
 @ViewChild('myGrid', { read: IgxGridComponent })
@@ -377,15 +379,24 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**:
 
 ## Filtering Conditions
 
-You will need to import the appropriate condition types from the `igniteui-angular` package.
+Use the filtering operand classes to apply conditions programmatically. Import the operand that matches your column data type and use its built-in condition names.
 
 ```typescript
 import {
-    STRING_FILTERS,
-    NUMBER_FILTERS,
-    DATE_FILTERS,
-    BOOLEAN_FILTERS
-} from 'igniteui-angular/main';
+    IgxStringFilteringOperand,
+    IgxNumberFilteringOperand,
+    IgxDateFilteringOperand,
+    IgxBooleanFilteringOperand
+} from 'igniteui-angular/core';
+
+// Example: quick filter a column (string contains)
+this.grid.filter('Name', 'John', IgxStringFilteringOperand.instance().condition('contains'));
+
+// Example: number greater than
+this.grid.filter('Quantity', 10, IgxNumberFilteringOperand.instance().condition('greaterThan'));
+
+// Clear filter
+this.grid.clearFilter('Name');
 ```
 
 ### String types
@@ -403,6 +414,13 @@ import {
 |`empty`|`(target: any)`|Returns true if `target` is either `null`, `undefined` or a string of length 0.|
 |`notEmpty`|`(target: any)`|Returns true if `target` is not `null`, `undefined` or a string of length 0.|
 
+Use them via the corresponding operand, for example:
+
+```typescript
+const contains = IgxStringFilteringOperand.instance().condition('contains');
+this.grid.filter('Name', 'Ann', contains);
+```
+
 
 ### Number types
 

package/lib/core/styles/components/list/_list-theme.scss

@@ -69,7 +69,7 @@
         border-radius: var-get($theme, 'border-radius');
 
         @if $variant == 'bootstrap' {
-            border: rem(1px) solid var-get($theme, 'border-color');
+            border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
         }
 
         &:focus-visible {
@@ -137,43 +137,48 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
+        border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
-        @if $bootstrap-theme or $variant == 'fluent' {
-            border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
-
-            &:last-of-type {
-                border-bottom: none;
-            }
+        &:last-of-type {
+            border-bottom: none;
         }
+    }
 
-        &:hover {
+    %igx-list-item-base:not(%igx-list-item-base--selected) {
+        &:hover,
+        &:focus-within {
             %igx-list__item-lines {
                 color: currentColor;
             }
 
-            %igx-list__item-line-title {
-                color: var-get($theme, 'item-title-color-hover');
-            }
+            %igx-list-item-content:not(%igx-list-item-content--active) {
+                color: var-get($theme, 'item-text-color-hover');
+                background: var-get($theme, 'item-background-hover');
 
-            %igx-list__item-line-subtitle {
-                color: var-get($theme, 'item-subtitle-color-hover');
-            }
+                %igx-list__item-line-title {
+                    color: var-get($theme, 'item-title-color-hover');
+                }
 
-            %igx-list__item-actions {
-                color: var-get($theme, 'item-action-color-hover');
+                %igx-list__item-line-subtitle {
+                    color: var-get($theme, 'item-subtitle-color-hover');
+                }
 
-                igx-icon,
-                igc-icon {
-                    color: var-get($theme, 'item-action-color-hover')
+                %igx-list__item-actions {
+                    color: var-get($theme, 'item-action-color-hover');
+
+                    igx-icon,
+                    igc-icon {
+                        color: var-get($theme, 'item-action-color-hover')
+                    }
                 }
-            }
 
-            %igx-list__item-thumbnail {
-                color: var-get($theme, 'item-thumbnail-color-hover');
+                %igx-list__item-thumbnail {
+                    color: var-get($theme, 'item-thumbnail-color-hover');
 
-                igx-icon,
-                igc-icon {
-                    color: var-get($theme, 'item-thumbnail-color-hover')
+                    igx-icon,
+                    igc-icon {
+                        color: var-get($theme, 'item-thumbnail-color-hover')
+                    }
                 }
             }
         }
@@ -256,12 +261,6 @@
         background: var-get($theme, 'item-background');
         z-index: 2;
         gap: if($variant == 'indigo', rem(8px), rem(16px));
-
-        &:hover,
-        &:focus-within {
-            color: var-get($theme, 'item-text-color-hover');
-            background: var-get($theme, 'item-background-hover');
-        }
     }
 
     %igx-list-header,
@@ -285,6 +284,11 @@
             --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
         }
 
+        igx-icon,
+        igc-icon {
+            color: var-get($theme, 'item-thumbnail-color');
+        }
+
         &:empty {
             display: none;
         }

package/package.json

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