Merge branch 'master' into typedoc-changes-master

Author: zdrawku

CHANGELOG.md

@@ -2,26 +2,24 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 15.1.1
-- **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
-- `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
-- 
-- **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
-
 ## 15.1.0
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
     - `GroupMemberCountSortingStrategy` is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
     - A new argument `primaryKey` has been introduced to `IRowDataEventArgs` Interface and part of the event arguments that are emitted by the `rowAdded` and `rowDeleted` events. When the grid has a primary key attribute added, then the emitted `primaryKey` event argument represents the row ID, otherwise it defaults to undefined.
+    - Added the `autoGenerateExclude` property that accepts an array of strings for property names that are to be excluded from the generated column collection
 - `IgxColumnComponent`
     - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
+- `IgxOverlayService`
+    -A new event `contentAppending` is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with `OverlayEventArgs` arguments and is not cancellable.
 
 ### General
  - `IgxPivotGrid`
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
  - `IgxGrid`
     - **Breaking Change** The `onGroupingDone` output has been renamed to `groupingDone` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
+    - Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
  - `DisplayDensity`
     - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on `ng update`.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -35,12 +33,14 @@ All notable changes for each version of this project will be documented in this
 - `igxMask` directive
     - Added the capability to escape mask pattern literals.
 - `IgxBadge`
-    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
+    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded.
 - `IgxAvatar`
-    - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
+    - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`.
 - `IgxOverlayService`
     - `attach` method overload accepting `ComponentFactoryResolver` (trough `NgModuleRef`-like object) is now deprecated in line with API deprecated in Angular 13. New overload is added accepting `ViewComponentRef` that should be used instead.
-
+- **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
+- `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
+- **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
 
 ## 15.0.1
 

projects/igniteui-angular/.eslintrc.json

@@ -41,7 +41,14 @@
         ],
         "id-blacklist": "off",
         "id-match": "off",
-        "no-underscore-dangle": "off"
+        "no-underscore-dangle": "off",
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "Decorator[expression.callee.name=HostBinding] Literal[value='attr.class']",
+            "message": "Do not use `attr.class` HostBinding in public-facing components"
+          }
+        ]
       }
     },
     {

projects/igniteui-angular/migrations/update-15_1_0/changes/members.json

@@ -145,9 +145,7 @@ describe(`Update to ${version}`, () => {
             `$custom-scrollbar: scrollbar-theme($size: 10px);`
         );
 
-        const tree = await schematicRunner
-            .runSchematicAsync(migrationName, {}, appTree)
-            .toPromise();
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
 
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
             `$custom-scrollbar: scrollbar-theme($scrollbar-size: 10px);`
@@ -160,9 +158,7 @@ describe(`Update to ${version}`, () => {
             `$custom-input: input-group-theme($label-floated-background: transparent, $label-floated-disabled-background: transparent);`
         );
 
-        const tree = await schematicRunner
-            .runSchematicAsync(migrationName, {}, appTree)
-            .toPromise();
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
 
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
             `$custom-input: input-group-theme();`

projects/igniteui-angular/migrations/update-15_1_0/index.spec.ts

@@ -99,6 +99,26 @@ describe('igxActionStrip', () => {
             const asQuery = fixture.debugElement.query(By.css('igx-action-strip'));
             expect(asQuery.nativeElement.style.display).toBe('none');
         });
+
+        it('should change displayDensity runtime correctly', () => {
+            // density with custom class applied
+            actionStripElement.nativeElement.classList.add('custom');
+            fixture.detectChanges();
+
+            expect(actionStripElement.nativeElement.classList).toEqual(jasmine.arrayWithExactContents(['custom', 'igx-action-strip']));
+
+            actionStrip.displayDensity = 'cosy';
+            fixture.detectChanges();
+            expect(actionStripElement.nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', 'igx-action-strip', 'igx-action-strip--cosy'])
+            );
+
+            actionStrip.displayDensity = 'compact';
+            fixture.detectChanges();
+            expect(actionStripElement.nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', 'igx-action-strip', 'igx-action-strip--compact'])
+            );
+        });
     });
 
     describe('render content as menu', () => {

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -107,15 +107,6 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         return this._hidden;
     }
 
-    /**
-     * Host `class.igx-action-strip` binding.
-     *
-     * @hidden
-     * @internal
-     */
-    @Input('class')
-    public hostClass: string;
-
     /**
      * Gets/Sets the resource strings.
      *
@@ -136,7 +127,7 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
 
     /**
      * Hide or not the Action Strip based on if it is a menu.
-     * 
+     *
      * @hidden
      * @internal
      */
@@ -180,34 +171,6 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         super(_displayDensityOptions);
     }
 
-    /**
-     * Getter for the 'display' property of the current `IgxActionStrip`
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('style.display')
-    public get display(): string {
-        return this._hidden ? 'none' : 'flex';
-    }
-
-    /**
-     * Host `attr.class` binding.
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.class')
-    public get hostClasses(): string {
-        const classes = [this.getComponentDensityClass('igx-action-strip')];
-        // The custom classes should be at the end.
-        if (!classes.includes('igx-action-strip')) {
-            classes.push('igx-action-strip');
-        }
-        classes.push(this.hostClass);
-        return classes.join(' ');
-    }
-
     /**
      * Menu Items list.
      *
@@ -227,6 +190,28 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         return [... this._menuItems.toArray(), ...actions];
     }
 
+
+    /**
+     * Getter for the 'display' property of the current `IgxActionStrip`
+     */
+     @HostBinding('style.display')
+     private get display(): string {
+         return this._hidden ? 'none' : 'flex';
+     }
+
+     /**
+      * Host `attr.class` binding.
+      */
+     @HostBinding('class')
+     private get hostClasses(): string {
+         let hostClass = this.getComponentDensityClass('igx-action-strip');
+         if (hostClass !== 'igx-action-strip') {
+             // action strip requires the base class to be always present:
+             hostClass = `igx-action-strip ${hostClass}`;
+         }
+         return hostClass;
+     }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -47,7 +47,6 @@ Supporting directives and components:
 ## igx-card-header
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
-| `role` | string | The role attribute of the card header. By default it's set to `header`. |
 | `vertical` | boolean | Sets the header layout direction. When set to `true` the card content is vertically layed out. |
 
 ## igx-card-media

projects/igniteui-angular/src/lib/card/README.md

@@ -88,18 +88,6 @@ export class IgxCardHeaderComponent {
     @HostBinding('class.igx-card-header--vertical')
     @Input()
     public vertical = false;
-
-    /**
-     * An @Input property that sets the value of the `role` attribute of the card header.
-     * By default the value is set to `header`.
-     *
-     * @example
-     * ```html
-     * <igx-card-header role="header"></igx-card-header>
-     * ```
-     */
-    @HostBinding('attr.role')
-    public role = 'header';
 }
 
 /**

projects/igniteui-angular/src/lib/card/card.component.ts

@@ -124,7 +124,9 @@ describe('Card', () => {
         const header = fixture.debugElement.query(By.css('igx-card-header')).nativeElement;
 
         expect(header).toBeDefined();
-        expect(header.getAttribute('role')).toEqual('header');
+        // K.D. March 20th, 2023 #12792 Card header should have no role
+        // expect(header.getAttribute('role')).toEqual('header');
+        expect(header.getAttribute('role')).toBeNull();
 
         expect(header).toHaveClass(classes.header.base);
         expect(header).not.toHaveClass(classes.header.vertical);

projects/igniteui-angular/src/lib/card/card.spec.ts

@@ -219,13 +219,6 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Input()
     public selectIcon: TemplateRef<any>;
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @Input()
-    public class = '';
-
     /**
      * An @Input property that defines if the `IgxChipComponent` is disabled. When disabled it restricts user interactions
      * like focusing on click or tab, selection on click or Space, dragging.
@@ -464,26 +457,6 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Output()
     public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.class')
-    public get hostClass(): string {
-        const classes = [this.getComponentDensityClass('igx-chip')];
-
-        // Add the base class first for each density
-        if (!classes.includes('igx-chip')) {
-            classes.unshift('igx-chip');
-        }
-
-        classes.push(this.disabled ? 'igx-chip--disabled' : '');
-
-        // The custom classes should be at the end.
-        classes.push(this.class);
-        return classes.join(' ').toString().trim();
-    }
-
     /**
      * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
      *
@@ -574,6 +547,20 @@ export class IgxChipComponent extends DisplayDensityBase {
         super(_displayDensityOptions);
     }
 
+    @HostBinding('class')
+    private get hostClass(): string {
+        const classes = [this.getComponentDensityClass('igx-chip')];
+
+        // Add the base class first for each density
+        if (!classes.includes('igx-chip')) {
+            classes.unshift('igx-chip');
+        }
+
+        classes.push(this.disabled ? 'igx-chip--disabled' : '');
+
+        return classes.join(' ').toString().trim();
+    }
+
     /**
      * @hidden
      * @internal