Merge branch 'master' into mpopov/sorting-indicator

Author: simeonoff

CHANGELOG.md

@@ -50,6 +50,8 @@ All notable changes for each version of this project will be documented in this
     - Added `groupSortingDirection` input, which allows you to set groups sorting order.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`.
+- `IgxGrid`
+    - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
 - `IgxDialog`
     - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`.
 
@@ -101,8 +103,6 @@ All notable changes for each version of this project will be documented in this
         ```
     - `IgxColumnActionsComponent`
         - **Breaking Change** -  Input `columns` has been removed. Use `igxGrid` `columns` input instead.
-    - `igxGrid`
-    - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
 - `IgxCarousel`
     - **Breaking Changes** - The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
 

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -42,8 +42,8 @@ export class UpdateChanges {
             // and no actual angular metadata will be resolved for the rest of the migration
             const wsProject = this.workspace.projects[this.workspace.defaultProject] || this.workspace.projects[0];
             const mainRelPath = wsProject.architect?.build?.options['main'] ?
-            path.join(wsProject.root, wsProject.architect?.build?.options['main']) :
-            `src/main.ts`;
+                path.join(wsProject.root, wsProject.architect?.build?.options['main']) :
+                `src/main.ts`;
             // patch TSConfig so it includes angularOptions.strictTemplates
             // ivy ls requires this in order to function properly on templates
             this.patchTsConfig();
@@ -491,9 +491,8 @@ export class UpdateChanges {
         // use the absolute path for ALL LS operations
         // do not overwrite the entryPath, as Tree operations require relative paths
         const changes = new Set<{ change; position }>();
-        let langServ;
+        let langServ: tss.LanguageService;
         for (const change of memberChanges.changes) {
-
             if (!content.includes(change.member)) {
                 continue;
             }
@@ -532,7 +531,7 @@ export class UpdateChanges {
                 originalContent = this.serverHost.readFile(this.tsconfigPath);
             } catch {
                 this.context?.logger
-                .warn(`Could not read ${this.tsconfigPath}. Some Angular Ivy features might be unavailable during migrations.`);
+                    .warn(`Could not read ${this.tsconfigPath}. Some Angular Ivy features might be unavailable during migrations.`);
                 return;
             }
             let content;
@@ -542,17 +541,17 @@ export class UpdateChanges {
                 content = result.config;
             } else {
                 this.context?.logger
-                .warn(`Could not parse ${this.tsconfigPath}. Angular Ivy language service might be unavailable during migrations.`);
+                    .warn(`Could not parse ${this.tsconfigPath}. Angular Ivy language service might be unavailable during migrations.`);
                 this.context?.logger
-                .warn(`Error:\n${result.error}`);
+                    .warn(`Error:\n${result.error}`);
                 return;
             }
             if (!content.angularCompilerOptions) {
                 content.angularCompilerOptions = {};
             }
             if (!content.angularCompilerOptions.strictTemplates) {
                 this.context?.logger
-                .info(`Adding 'angularCompilerOptions.strictTemplates' to ${this.tsconfigPath} for migration run.`);
+                    .info(`Adding 'angularCompilerOptions.strictTemplates' to ${this.tsconfigPath} for migration run.`);
                 content.angularCompilerOptions.strictTemplates = true;
                 this.host.overwrite(this.tsconfigPath, JSON.stringify(content));
                 // store initial state and restore it once migrations are finished

projects/igniteui-angular/migrations/common/tsUtils.ts

@@ -12,12 +12,17 @@ export const NG_CORE_PACKAGE_NAME = '@angular/core';
 export const CUSTOM_TS_PLUGIN_PATH = './tsPlugin';
 export const CUSTOM_TS_PLUGIN_NAME = 'igx-ts-plugin';
 
-enum SynaxTokens {
+enum SyntaxTokens {
     ClosingParenthesis = ')',
     MemberAccess = '.',
     Question = '?'
 }
 
+export class MemberInfo implements Pick<tss.DefinitionInfo, 'name' | 'fileName'> {
+    public name: string;
+    public fileName: string;
+}
+
 /** Returns a source file */
 // export function getFileSource(sourceText: string): ts.SourceFile {
 //     return ts.createSourceFile('', sourceText, ts.ScriptTarget.Latest, true);
@@ -45,7 +50,9 @@ export const getIdentifierPositions = (source: string | ts.SourceFile, name: str
                 return false;
             }
         }
-        return node.text === name;
+        // for methods the node.text will not contain characters like ()
+        const cleanName = name.match(/\w+/g)[0] || name;
+        return node.text === cleanName;
     };
 
     const findIdentifiers = (node: ts.Node) => {
@@ -251,7 +258,7 @@ const getTypeDefinitions = (langServ: tss.LanguageService, entryPath: string, po
  * @param position Index of identifier
  */
 export const getTypeDefinitionAtPosition =
-    (langServ: tss.LanguageService, entryPath: string, position: number): Pick<tss.DefinitionInfo, 'name' | 'fileName'> | null => {
+    (langServ: tss.LanguageService, entryPath: string, position: number): MemberInfo | null => {
         const definition = langServ.getDefinitionAndBoundSpan(entryPath, position)?.definitions[0];
         if (!definition) {
             return null;
@@ -264,6 +271,19 @@ export const getTypeDefinitionAtPosition =
         if (definition.kind.toString() === 'method') {
             return getMethodTypeDefinition(langServ, definition);
         }
+        if (entryPath.endsWith('.ts')) {
+            // for ts files we can use the type checker to look up a specific node
+            // and attempt to resolve its actual type
+            const sourceFile = langServ.getProgram().getSourceFile(entryPath);
+            // const node = (tss as any).getTouchingPropertyName(sourceFile, position); -> tss internal that looks up a node
+            const node = findNodeAtPosition(sourceFile, position);
+            if (node) {
+                const memberInfo = resolveMemberInfo(langServ, node);
+                if (memberInfo) {
+                    return memberInfo;
+                }
+            }
+        }
 
         let typeDefs = getTypeDefinitions(langServ, definition.fileName || entryPath, definition.textSpan.start);
         // if there are no type definitions found, the identifier is a ts property, referred in an internal/external template
@@ -311,7 +331,6 @@ export const getTypeDefinitionAtPosition =
         return null;
     };
 
-
 /**
  * Determines if a member belongs to a type in the `igniteui-angular` toolkit.
  *
@@ -325,7 +344,7 @@ export const isMemberIgniteUI =
         const content = langServ.getProgram().getSourceFile(entryPath).getText();
         matchPosition = shiftMatchPosition(matchPosition, content);
         const prevChar = content.substr(matchPosition - 1, 1);
-        if (prevChar === SynaxTokens.ClosingParenthesis) {
+        if (prevChar === SyntaxTokens.ClosingParenthesis) {
             // methodCall().identifier
             matchPosition = langServ.getBraceMatchingAtPosition(entryPath, matchPosition - 1)[0]?.start ?? matchPosition;
         }
@@ -339,6 +358,49 @@ export const isMemberIgniteUI =
             && change.definedIn.indexOf(typeDef.name) !== -1;
     };
 
+const resolveMemberInfo = (langServ: tss.LanguageService, node: tss.Node): MemberInfo | null => {
+    const typeChecker = langServ.getProgram().getTypeChecker();
+    const nodeType = typeChecker.getTypeAtLocation(node);
+    const typeArguments = typeChecker.getTypeArguments(nodeType as tss.TypeReference);
+    if (typeArguments && typeArguments.length < 1) {
+        // it's not a generic type so try to look up its name and fileName
+        // atm we do not support migrating union/intersection generic types
+        // a type symbol (type) should have only one declaration
+        // if the type is 'any' or 'some', there will be no type symbol
+        const name = nodeType.getSymbol()?.getName();
+        const declarations = nodeType.getSymbol()?.getDeclarations();
+        if (declarations && declarations.length > 0) {
+            const fileName = declarations[0].getSourceFile().fileName;
+            if (name && fileName) {
+                return { name, fileName };
+            }
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Looks up a node which end property matches the specified position.
+ * Can go to the next node if the currently found one is invalid (comment for example)
+ */
+const findNodeAtPosition = (sourceFile: tss.SourceFile, position: number): tss.Node | null => {
+    if (!sourceFile) {
+        return null;
+    }
+
+    return findInnerNode(sourceFile, position);
+}
+const findInnerNode = (node: tss.Node, position: number): tss.Node | null => {
+    if (position <= node.getEnd()) {
+        // see tss.forEachChild for documentation
+        // look for the innermost child that matches the position
+        return node.forEachChild(cn => findInnerNode(cn, position)) || node;
+    }
+
+    return null;
+}
+
 /**
  * Shifts the match position of the identifier to the left
  * until any character other than an empty string or a '.' is reached. #9347
@@ -347,8 +409,8 @@ const shiftMatchPosition = (matchPosition: number, content: string): number => {
     do {
         matchPosition--;
     } while (matchPosition > 0 && !content[matchPosition - 1].trim()
-        || content[matchPosition - 1] === SynaxTokens.MemberAccess
-        || content[matchPosition - 1] === SynaxTokens.Question);
+    || content[matchPosition - 1] === SyntaxTokens.MemberAccess
+        || content[matchPosition - 1] === SyntaxTokens.Question);
     return matchPosition;
 };
 
@@ -358,8 +420,7 @@ const shiftMatchPosition = (matchPosition: number, content: string): number => {
  * @param langServ The TypeScript LanguageService.
  * @param definition The method definition.
  */
-const getMethodTypeDefinition = (langServ: tss.LanguageService, definition: tss.DefinitionInfo):
-    Pick<tss.DefinitionInfo, 'name' | 'fileName'> | null => {
+const getMethodTypeDefinition = (langServ: tss.LanguageService, definition: tss.DefinitionInfo): MemberInfo | null => {
     // TODO: use typechecker for all the things?
     const sourceFile = langServ.getProgram().getSourceFile(definition.fileName);
 
@@ -390,7 +451,7 @@ const getMethodTypeDefinition = (langServ: tss.LanguageService, definition: tss.
         // there should never be a case where a type is declared in more than one file
         /**
          * For union return types like T | null | undefined
-         * and interesection return types like T & null & undefined
+         * and intersection return types like T & null & undefined
          * the TypeChecker ignores null and undefined and returns only T which is not
          * marked as a union or intersection type.
          *

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss

@@ -12,7 +12,6 @@
 /// @prop {Color} dock-background [igx-color: ('grays', 50)] - Sets the background color of the dock manager.
 /// @prop {Color} background-color [igx-color: ('grays', 50)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} pane-header-background [igx-color: ('grays', 50)] - Sets the background color for pane headers.
-/// @prop {Color} pane-content-background [igx-color: ('grays', 100, .3)] - Sets the background color of the content panes.
 /// @prop {Color} border-color [igx-color: ('grays', 100)] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
 /// @prop {Color} floating-pane-border-color [igx-color: ('grays', 50)] - Sets the border color for floating panes.
 /// @prop {Color} joystick-background [igx-color: ('grays', 100)] - Sets the background color of the joystick.
@@ -44,10 +43,6 @@ $dark-base-dock-manager: (
         igx-color: ('grays', 50)
     ),
 
-    pane-content-background: (
-        igx-color: ('grays', 100, .3)
-    ),
-
     border-color: (
         igx-color: ('grays', 100)
     ),

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss

@@ -25,11 +25,11 @@ $dark-bootstrap-grid-summary: $bootstrap-grid-summary;
 
 /// Generates a dark indigo grid-summary schema.
 /// @type {Map}
-/// @property {Color} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
+/// @property {Map} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer.
 /// @property {Map} focus-background-color [igx-color: ('grays', 100)] - The background color when a summary item is on focus.
 /// @property {Map} label-color [igx-color: ('primary', 200)] - The summaries label color.
 /// @property {map} label-hover-color [igx-color: ('primary', 100)] - The summaries hover label color.
-/// @property {Color} result-color [igx-color: 'surface'] - The summaries value/result color.
+/// @property {Map} result-color [igx-color: 'surface'] - The summaries value/result color.
 /// @property {Map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel.
 /// @requires {function} extend
 /// @requires $indigo-grid-summary

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss

@@ -7,46 +7,32 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// Generates a base dark grid-toolbar schema.
-/// @type {Map}
-/// @prop {Map} background-color [#222] - The toolbar background color.
-/// @prop {Map} dropdown-background [#222] - The toolbar drop-down background color.
-$base-dark-grid-toolbar: (
-    background-color: #222,
-    dropdown-background: #222
-);
-
 /// Generates a dark grid-toolbar schema based on a mix of $light-grid-toolbar and $base-dark-grid-toolbar.
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $light-grid-toolbar
-/// @requires $base-dark-grid-toolbar
 /// @see $default-palette
-$dark-grid-toolbar: extend($light-grid-toolbar, $base-dark-grid-toolbar);
+$dark-grid-toolbar: extend($light-grid-toolbar);
 
 /// Generates a dark fluent grid-toolbar schema based on a mix of $fluent-grid-toolbar and $base-dark-grid-toolbar..
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $fluent-grid-toolbar
-/// @requires $base-dark-grid-toolbar
-$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar, $base-dark-grid-toolbar);
+$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar);
 
 /// Generates a dark bootstrap grid-toolbar schema based on a mix of $bootstrap-grid-toolbar and $base-dark-grid-toolbar..
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $bootstrap-grid-toolbar
-/// @requires $base-dark-grid-toolbar
-$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar, $base-dark-grid-toolbar);
+$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar);
 
 /// Generates a dark indigo grid-toolbar schema.
 /// @type {Map}
 /// @property {Map} background-color [igx-color: 'surface'] - The toolbar background color.
 /// @requires {function} extend
 /// @requires $indigo-grid-toolbar
-/// @requires $base-dark-grid-toolbar
 $dark-indigo-grid-toolbar: extend(
     $indigo-grid-toolbar,
-    $base-dark-grid-toolbar,
     (
         background-color: (
             igx-color: 'surface',

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss

@@ -11,7 +11,6 @@
 /// @type {Map}
 /// @prop {Color} shadow-color [transparent] - The shadow color of the button.
 /// @prop {Color} border-color [transparent] - The outline color of the button.
-/// @prop {Color} focus-border-color [transparent] - The focused border color of the button.
 /// @prop {Color} disabled-border-color [transparent] - The disabled border color of the button.
 /// @prop {Color} disabled-background [igx-color: ('grays', 300)] - The disabled background color of the button.
 /// @prop {Color} disabled-foreground [igx-color: ('grays', 500)] - The disabled foreground color of the button.
@@ -22,8 +21,6 @@ $material-base-button: (
 
     border-color: transparent,
 
-    focus-border-color: transparent,
-
     disabled-border-color: transparent,
 
     disabled-background: (
@@ -80,7 +77,6 @@ $material-flat-button: extend(
 
 /// @type {Map}
 /// @prop {Map} border-color [igx-color: ('secondary', 500)] - The outline color of the button.
-/// @prop {Map} focus-border-color [igx-color: ('grays', 300)] - The focused border color of the button.
 /// @prop {Map} disabled-border-color [igx-color: ('grays', 300)] - The disabled focused border color of the button.
 /// @requires {function} extend
 /// @requires {Map} $material-flat-button
@@ -90,11 +86,7 @@ $material-outlined-button: extend(
         selector: '[igxButton="outlined"], .igx-button--outlined',
 
         border-color: (
-            igx-color: ('secondary', 300)
-        ),
-
-        focus-border-color: (
-            igx-color: ('grays', 300)
+            igx-color: ('secondary', 500)
         ),
 
         disabled-border-color: (

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss

@@ -27,7 +27,7 @@
 /// @prop {Color} joystick-border-color [igx-color: ('grays', 300)] - Sets the border color of the joystick.
 /// @prop {Color} joystick-icon-color [igx-color: ('grays', 600)] - Sets the color for the joystick icons.
 /// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons.
-/// @prop {Color} pane-content-background [igx-color: ('primary', 100)] - Sets the background color of the content panes.
+/// @prop {Color} pane-content-background [igx-color: ('surface')] - Sets the background color of the content panes.
 /// @prop {Color} pane-content-text [null] - Sets the text color of the content panes.
 /// @prop {Color} pane-header-background [null] - Sets the background color for pane headers.
 /// @prop {Color} pane-header-text [null] - Sets the text color for pane headers.

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss

@@ -8,11 +8,11 @@
 
 /// Generates a light grid-filtering schema.
 /// @type {Map}
-/// @prop {Color} menu-background [#fff] - The idle menu background color.
+/// @prop {Color} menu-background [igx-color: ('surface')] - The idle menu background color.
 /// @prop {Color} toggle-background [transparent] - The idle toggle background color.
 /// @prop {Color} toggle-filtered-background [transparent] - The filtered toggle background color.
 /// @prop {Color} toggle-icon-color [inherit] - The idle toggle icon color.
-/// @prop {Color} toggle-icon-hover-color [#fff] - The hover toggle icon color.
+/// @prop {Color} toggle-icon-hover-color [igx-contrast-color: ('grays', 900)] - The hover toggle icon color.
 /// @prop {Color} menu-button-disabled-text-color [initial] - The menu disabled button text color.
 /// @prop {Map} toggle-icon-active-color [igx-contrast-color: ('secondary', 500)] - The active toggle icon color.
 /// @prop {Map} toggle-icon-filtered-color [igx-color: ('secondary', 500)] - The filtered toggle icon color.
@@ -22,11 +22,15 @@
 /// @prop {Map} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color.
 /// @see $default-palette
 $light-grid-filtering: (
-    menu-background: #fff,
+    menu-background: (
+        igx-color: ('surface')
+    ),
     toggle-background: transparent,
     toggle-filtered-background: transparent,
     toggle-icon-color: inherit,
-    toggle-icon-hover-color: #fff,
+    toggle-icon-hover-color: (
+        igx-contrast-color: ('grays', 900)
+    ),
     menu-button-disabled-text-color: initial,
 
     toggle-icon-active-color: (