Merge branch 'master' into master

Author: kdinev

CHANGELOG.md

@@ -2,29 +2,49 @@
 
 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.
+    - 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.
+- `IgxCard`
+    - Buttons and icons slotted in the `igx-card-actions` can now be explicitly arranged to the start/end of the layout. To position components on either side users can take advantage of the newly added directives: `igxStart` - aligns items to the start and `igxEnd` - aligns items on the end of the card actions area.
+    - The `reverse` property has been deprecated and will be removed in a future version.
+
+    - Code example:
+
+    ```html
+    <igx-card>
+        <igx-card-header>
+            <h3>Title</h3>
+        </igx-card-header>
+        <igx-card-content>
+            Card Content
+        </igx-card-content>
+
+        <!-- Rearrange items using igxStart and igxEnd directives -->
+        <igx-card-actions>
+            <igx-icon igxStart>drag_indicator</igx-icon>
+            <button igxButton="icon" igxStart>
+                <igx-icon>favorite</igx-icon>
+            </button>
+            <button igxButton igxEnd>Button</button>
+        </igx-card-actions>
+    </igx-card>
+    ```
 
 ### 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`
@@ -43,7 +63,11 @@ All notable changes for each version of this project will be documented in this
     - **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`.
+- `IgxSimpleCombo`
+    - The `IgxSimpleCombo` will not open its drop-down on clear.
 
 ## 15.0.1
 

ROADMAP.md

@@ -2,11 +2,14 @@
 
 # Current Milestone
 
-## Milestone 25, version 15.0 (Due by Jan, 2023)
+## Milestone 26, version 16.0 (Due by May, 2023)
 
-1. Design update of Combo Component
-2. Design update of Input Group Component
-3. Design update of List Component
+1. Compatability with Angular 16.0
+2. IgxDateRangePicker UX improvement [#11994](https://github.com/IgniteUI/igniteui-angular/issues/11994)
+3. IgxSimpleCombo: possibility to not open dropdown on clear [#11871](https://github.com/IgniteUI/igniteui-angular/issues/11871)
+4. Igx Grid allow cell selection on specific columns [#11704](https://github.com/IgniteUI/igniteui-angular/issues/11704)
+5. igniteui-angular as standalone component exports [#12698](https://github.com/IgniteUI/igniteui-angular/issues/12698)
+6. Resizing [IgxDrag] [#6283](https://github.com/IgniteUI/igniteui-angular/issues/6283)
 
 ## Going down the road
 
@@ -20,7 +23,24 @@
 
 # Previous Milestone
 
-## Milestone 24, version 15.0 (Due by Nov, 2022) [Release Blog](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-december-release-2022)
+## Milestone 25, version 15.1 (Releasd March 28th, 2023)
+
+1. **[DONE]** [Themes] - Use the sizable mixins and functions to size components [#12347](https://github.com/IgniteUI/igniteui-angular/issues/12347)
+2. **[DONE]** [Input] Update the UI according to the new design. [#12421](https://github.com/IgniteUI/igniteui-angular/issues/12421)
+3. **[DONE]** Use rem instead of px [#12377](https://github.com/IgniteUI/igniteui-angular/issues/12377)
+4. **[DONE]** Improve Material Outlined Input markup to allow for runtime label changes [#12221](https://github.com/IgniteUI/igniteui-angular/issues/12221)
+5. **[DONE]** Update overlay attach dynamic component overload [#11671](https://github.com/IgniteUI/igniteui-angular/issues/11671)
+6. **[DONE]** Add start and end slot to card actions [#12664](https://github.com/IgniteUI/igniteui-angular/issues/12664)
+7. **[DONE]** Suggestion for igx-grid group by row template [#12752](https://github.com/IgniteUI/igniteui-angular/issues/12752)
+8. **[DONE]** Checkbox: missing validation styling [#12585](https://github.com/IgniteUI/igniteui-angular/issues/12585)
+9. **[DONE]** Order by count in igx-grid group by [#11642](https://github.com/IgniteUI/igniteui-angular/issues/11642)
+10. **[DONE]** igxMask always set the symbol '9' as a fillable spot [#7089](https://github.com/IgniteUI/igniteui-angular/issues/7089)
+11. **[DONE]** IgxGrid: after selecting multiple cells using CNTL / click should be able to deselect an individual cell using CNTL / click [#12522](https://github.com/IgniteUI/igniteui-angular/issues/12522)
+12. **[DONE]** Add shape property to badge [#12588](https://github.com/IgniteUI/igniteui-angular/issues/12588)
+13. **[DONE]** Support height for card component [#12555](https://github.com/IgniteUI/igniteui-angular/issues/12555)
+14. **[DONE]** Design update of Combo Component
+
+## Milestone 24, version 15.0 (Released November 23rd, 2022) [Release Blog](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-december-release-2022)
 
 1. **[DONE]** Support exporting grid with summaries [#11598](https://github.com/IgniteUI/igniteui-angular/issues/11598)
 2. **[DONE]** Themes: Add support for adjusting spacing via CSS vars [#11368](https://github.com/IgniteUI/igniteui-angular/issues/11368)

gulpfile.js

@@ -188,8 +188,6 @@ function typedocBuildExportFn(cb) {
         TYPEDOC.PROJECT_PATH,
         "--generate-json",
         TYPEDOC.EXPORT_JSON_PATH,
-        "--tags",
-        "--params",
         "--tsconfig",
         path.join(__dirname, "tsconfig.typedoc.json")],
         { stdio: 'inherit', shell: true });

package-lock.json

@@ -130,8 +130,8 @@
     "stylelint": "^15.1.0",
     "stylelint-scss": "^4.1.0",
     "ts-node": "^10.8.1",
-    "typedoc": "^0.23.24",
-    "typedoc-plugin-localization": "^2.4.0",
+    "typedoc": "^0.23.21",
+    "typedoc-plugin-localization": "^3.0.0",
     "typescript": "4.9.5"
   }
 }

package.json

@@ -139,15 +139,43 @@ describe(`Update to ${version}`, () => {
         );
     });
 
+    it('should append igxStart and igxEnd directives to the child elements of the igx-card-actions', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-card-actions>
+            <span igxButton>Span</span>
+            <button igxButton>Button</button>
+            <button igxButton="icon">
+                <igx-icon>favorite</igx-icon>
+            </button>
+            <igx-icon>drag_indicator</igx-icon>
+        </igx-card-actions>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-card-actions>
+            <span igxButton igxStart>Span</span>
+            <button igxButton igxStart>Button</button>
+            <button igxButton="icon" igxEnd>
+                <igx-icon>favorite</igx-icon>
+            </button>
+            <igx-icon igxEnd>drag_indicator</igx-icon>
+        </igx-card-actions>
+        `
+        );
+    });
+
     it('should rename the $size property to the $scrollbar-size', async () => {
         appTree.create(
             `/testSrc/appPrefix/component/test.component.scss`,
             `$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 +188,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/changes/members.json

@@ -3,15 +3,79 @@ import {
     SchematicContext,
     Tree
 } from '@angular-devkit/schematics';
+import { Element } from '@angular/compiler';
+import { nativeImport } from '../common/import-helper.js';
 import { Options } from '../../schematics/interfaces/options';
 import { BoundPropertyObject, InputPropertyType, UpdateChanges } from '../common/UpdateChanges';
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, parseFile, hasAttribute } from '../common/util';
 
 const version = '15.1.0';
 
 export default (options: Options): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
+    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
+    const cardsToMigrate = new Set<any>();
+    const CARD_ACTIONS = ['igx-card-actions'];
+    const prop = ['igxButton'];
+    const changes = new Map<string, FileChange[]>();
+    
+    const applyChanges = () => {
+      for (const [path, change] of changes.entries()) {
+        let buffer = host.read(path).toString();
+
+        change.sort((c, c1) => c.position - c1.position)
+          .reverse()
+          .forEach(c => buffer = c.apply(buffer));
+
+        host.overwrite(path, buffer);
+      }
+    };
+
+    const addChange = (path: string, change: FileChange) => {
+        if (changes.has(path)) {
+          changes.get(path).push(change);
+        } else {
+          changes.set(path, [change]);
+        }
+    };
+
+    const getChildren = (parent: Element, buttons: any[], icons: any[]) => {
+        const cardButtons = parent.children.filter(btn => (btn as Element).attrs !== undefined  && hasAttribute(btn as Element, prop));
+        const cardIcons = parent.children.filter(btn => (btn as Element).name === 'igx-icon');
+        buttons.push(...cardButtons);
+        icons.push(...cardIcons);
+    }
+
+    for (const path of update.templateFiles) {
+        cardsToMigrate.clear();
+        const cardActions = findElementNodes(parseFile(new HtmlParser(), host, path), CARD_ACTIONS);
+        cardActions.forEach(card => {
+            const card_action_elem = card as Element;
+            const buttons: any[] = [];
+            const icons: any[] = [];
+            getChildren(card_action_elem, buttons, icons);
+
+            icons.map(node =>getSourceOffset(node as Element))
+            .forEach(offset => {
+                const { startTag, file } = offset;
+                addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
+            })
+        
+            buttons.map(node => getSourceOffset(node as Element))
+            .forEach(offset => {
+                const { startTag, file, node } = offset;
+                const { value } = getAttribute(node, prop)[0];
+                if (value === 'icon') {
+                  addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
+                } else {
+                  addChange(file.url, new FileChange(startTag.end - 1, ' igxStart'));
+                }
+            });
+        });
+    }
+    
     update.shouldInvokeLS = options['shouldInvokeLS'];
     update.addValueTransform('roundShape_is_deprecated', (args: BoundPropertyObject): void => {
         args.bindingType = InputPropertyType.STRING;
@@ -27,5 +91,7 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
                 args.value += ` ? 'circle' : 'square' `;
         }
     });
+
+    applyChanges();
     update.applyChanges();
 };

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

@@ -86,7 +86,7 @@
         "@angular/forms": "^15.0.0"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~15.0.1100"
+        "@igniteui/angular-schematics": "~15.1.1110"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"