igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.2

package/migrations/migration-collection.json

@@ -312,7 +312,7 @@
         },
         "migration-61": {
             "version": "22.2.0",
-            "description": "Removes scrollbar-theme properties with no effect under the standard scrollbar properties",
+            "description": "Removes scrollbar-theme properties with no effect under the standard scrollbar properties and replaces the removed button group multiSelection input with selectionMode",
             "factory": "./update-22_2_0"
         },
         "migration-62": {

package/migrations/update-22_2_0/index.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -9,10 +42,122 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const ts = __importStar(require("typescript"));
 const UpdateChanges_1 = require("../common/UpdateChanges");
+const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '22.2.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     update.applyChanges();
+    migrateButtonGroupMultiSelection(host, context, update, new HtmlParser());
+});
+// IgxButtonGroupComponent: the deprecated `multiSelection` input is replaced by `selectionMode`
+const MULTI_SELECTION = ['[multiSelection]', 'multiSelection'];
+const getSelectionMode = (name, value) => {
+    const expression = value.trim();
+    if (name === 'multiSelection') {
+        return expression === 'true' ? `selectionMode="multi"` : '';
+    }
+    if (expression === 'true') {
+        return `[selectionMode]="'multi'"`;
+    }
+    if (expression === 'false' || !expression) {
+        return '';
+    }
+    return `[selectionMode]="(${expression}) ? 'multi' : 'single'"`;
+};
+/** Returns the changes, relative to `content`, replacing `multiSelection` on the button groups in a template. */
+const getTemplateChanges = (parser, content, url) => (0, util_1.findElementNodes)(parser.parse(content, url).rootNodes, 'igx-buttongroup')
+    .flatMap(node => (0, util_1.getAttribute)(node, MULTI_SELECTION))
+    .map(attr => {
+    const text = getSelectionMode(attr.name, attr.value);
+    let start = attr.sourceSpan.start.offset;
+    // drop the whitespace separating a removed attribute from the previous one
+    while (!text && start > 0 && /\s/.test(content[start - 1])) {
+        start--;
+    }
+    return { start, end: attr.sourceSpan.end.offset, text };
 });
+const applyTemplateChanges = (content, changes) => [...changes]
+    .sort((a, b) => b.start - a.start)
+    .reduce((result, c) => result.substring(0, c.start) + c.text + result.substring(c.end), content);
+/** Returns the metadata object literals of the `@Component` decorators in a source file. */
+const getComponentMetadata = (sourceFile) => {
+    const metadata = [];
+    const visit = (node) => {
+        if (ts.isDecorator(node) && ts.isCallExpression(node.expression)
+            && ts.isIdentifier(node.expression.expression) && node.expression.expression.text === 'Component') {
+            const [arg] = node.expression.arguments;
+            if (arg && ts.isObjectLiteralExpression(arg)) {
+                metadata.push(arg);
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return metadata;
+};
+const getMetadataProperty = (metadata, name) => {
+    var _a;
+    return (_a = metadata.properties
+        .filter(ts.isPropertyAssignment)
+        .find(p => (ts.isIdentifier(p.name) || ts.isStringLiteral(p.name)) && p.name.text === name)) === null || _a === void 0 ? void 0 : _a.initializer;
+};
+const migrateButtonGroupMultiSelection = (host, context, update, parser) => {
+    // `templateFiles` only lists `*.component.html` files, so also collect the `templateUrl` of every component
+    const templateFiles = new Set(update.templateFiles);
+    for (const tsPath of update.tsFiles) {
+        const content = host.read(tsPath).toString();
+        if (!content.includes('@Component')) {
+            continue;
+        }
+        const sourceFile = ts.createSourceFile(tsPath, content, ts.ScriptTarget.Latest, true);
+        const changes = [];
+        for (const metadata of getComponentMetadata(sourceFile)) {
+            const templateUrl = getMetadataProperty(metadata, 'templateUrl');
+            if (templateUrl && ts.isStringLiteralLike(templateUrl)) {
+                const templatePath = path.posix.join(path.posix.dirname(tsPath), templateUrl.text);
+                if (host.exists(templatePath)) {
+                    templateFiles.add(templatePath);
+                }
+            }
+            const template = getMetadataProperty(metadata, 'template');
+            if (!template || !template.getText(sourceFile).includes('multiSelection')) {
+                continue;
+            }
+            if (!ts.isStringLiteral(template) && !ts.isNoSubstitutionTemplateLiteral(template)) {
+                context.logger.warn(`${tsPath}: replace the removed IgxButtonGroupComponent multiSelection input with selectionMode manually.`);
+                continue;
+            }
+            // work on the raw source text between the quotes, so that the template offsets match the file ones
+            const quote = content[template.getStart(sourceFile)];
+            const start = template.getStart(sourceFile) + 1;
+            const raw = content.substring(start, template.getEnd() - 1);
+            for (const change of getTemplateChanges(parser, raw, tsPath)) {
+                changes.push({
+                    start: change.start + start,
+                    end: change.end + start,
+                    text: quote === '`' ? change.text : change.text.split(quote).join(`\\${quote}`)
+                });
+            }
+        }
+        if (changes.length) {
+            host.overwrite(tsPath, applyTemplateChanges(content, changes));
+        }
+    }
+    for (const templatePath of templateFiles) {
+        const content = host.read(templatePath).toString();
+        if (!content.includes('multiSelection')) {
+            continue;
+        }
+        const changes = getTemplateChanges(parser, content, templatePath);
+        if (changes.length) {
+            host.overwrite(templatePath, applyTemplateChanges(content, changes));
+        }
+    }
+};

package/migrations/update-22_2_0/index.spec.js

@@ -77,6 +77,79 @@ describe(`Update to ${version}`, () => {
         const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
     }));
+    it('should keep the brackets balanced when the theme is nested in another call', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.selection-area {
+    @include scrollbar(scrollbar-theme($sb-size: 6px));
+}
+
+igx-grid {
+    @include scrollbar(scrollbar-theme($sb-thumb-bg-color: blue, $sb-size: 16px));
+}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.selection-area {
+    @include scrollbar(scrollbar-theme());
+}
+
+igx-grid {
+    @include scrollbar(scrollbar-theme($sb-thumb-bg-color: blue));
+}`);
+    }));
+    it('should migrate a theme call that is not terminated by a semicolon', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme(
+    $sb-size: 16px,
+    $sb-thumb-bg-color: blue
+)`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme(
+    $sb-thumb-bg-color: blue
+)`);
+    }));
+    it('should keep a retained property when a comment in the argument list holds an apostrophe', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme($sb-size: 6px /* user's size */, $sb-thumb-bg-color: red);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme( $sb-thumb-bg-color: red);`);
+    }));
+    it('should remove the properties that follow a comment holding an apostrophe', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme(
+    $sb-size: 16px, // don't need this anymore
+    $sb-thumb-bg-color: blue,
+    $sb-corner-bg: gray
+);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme( // don't need this anymore
+    $sb-thumb-bg-color: blue
+);`);
+    }));
+    it('should migrate a theme below a comment glued to a closing brace', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.selection-area {
+    color: red;
+}// don't set $sb-size here
+
+$my-scrollbar: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: blue);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.selection-area {
+    color: red;
+}// don't set $sb-size here
+
+$my-scrollbar: scrollbar-theme( $sb-thumb-bg-color: blue);`);
+    }));
+    it('should migrate a theme preceded on the same line by a protocol-relative url()', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.a { background: url(//cdn.example.com/bg.png); $my: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: red); }`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.a { background: url(//cdn.example.com/bg.png); $my: scrollbar-theme( $sb-thumb-bg-color: red); }`);
+    }));
+    it('should not rewrite a mixin or a function declared with the theme name', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `@mixin scrollbar-theme($sb-size: 16px) {
+    width: $sb-size;
+}
+
+@function scrollbar-theme($sb-size: 6px) {
+    @return ($size: $sb-size);
+}`;
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
+    }));
     it('should not touch same-named properties on other themes', () => __awaiter(void 0, void 0, void 0, function* () {
         const content = `$my-grid: grid-theme(
     $sb-size: 16px
@@ -85,4 +158,137 @@ describe(`Update to ${version}`, () => {
         const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
     }));
+    it('should replace button group multiSelection bound to true with selectionMode multi', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-buttongroup [multiSelection]="true" [values]="buttons"></igx-buttongroup>
+<igx-buttongroup [values]="buttons" [multiSelection]='true'></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`<igx-buttongroup [selectionMode]="'multi'" [values]="buttons"></igx-buttongroup>
+<igx-buttongroup [values]="buttons" [selectionMode]="'multi'"></igx-buttongroup>`);
+    }));
+    it('should remove button group multiSelection bound to false', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-buttongroup [multiSelection]="false">
+    <button igxButton>Button 1</button>
+</igx-buttongroup>
+<igx-buttongroup [values]="buttons"
+    [multiSelection]="false"></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`<igx-buttongroup>
+    <button igxButton>Button 1</button>
+</igx-buttongroup>
+<igx-buttongroup [values]="buttons"></igx-buttongroup>`);
+    }));
+    it('should convert button group multiSelection bound to an expression to a selectionMode expression', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-buttongroup [multiSelection]="isMulti" [values]="buttons"></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`<igx-buttongroup [selectionMode]="(isMulti) ? 'multi' : 'single'" [values]="buttons"></igx-buttongroup>`);
+    }));
+    it('should replace static button group multiSelection attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-buttongroup multiSelection="true" [values]="buttons"></igx-buttongroup>
+<igx-buttongroup multiSelection="false" [values]="buttons"></igx-buttongroup>
+<igx-buttongroup multiSelection [values]="buttons"></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`<igx-buttongroup selectionMode="multi" [values]="buttons"></igx-buttongroup>
+<igx-buttongroup [values]="buttons"></igx-buttongroup>
+<igx-buttongroup [values]="buttons"></igx-buttongroup>`);
+    }));
+    it('should replace button group multiSelection in inline component templates', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/inline.component.ts`, `import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-inline',
+    template: \`
+        <igx-buttongroup [multiSelection]="true" [values]="buttons"></igx-buttongroup>
+        <igx-buttongroup [values]="buttons" multiSelection="false"></igx-buttongroup>
+        <igx-buttongroup [multiSelection]="mode === 'multi'"></igx-buttongroup>
+    \`
+})
+export class InlineComponent { }
+
+@Component({
+    selector: 'app-quoted',
+    template: '<igx-buttongroup [multiSelection]="true"></igx-buttongroup>'
+})
+export class QuotedComponent { }`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/inline.component.ts')).toEqual(`import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-inline',
+    template: \`
+        <igx-buttongroup [selectionMode]="'multi'" [values]="buttons"></igx-buttongroup>
+        <igx-buttongroup [values]="buttons"></igx-buttongroup>
+        <igx-buttongroup [selectionMode]="(mode === 'multi') ? 'multi' : 'single'"></igx-buttongroup>
+    \`
+})
+export class InlineComponent { }
+
+@Component({
+    selector: 'app-quoted',
+    template: '<igx-buttongroup [selectionMode]="\\'multi\\'"></igx-buttongroup>'
+})
+export class QuotedComponent { }`);
+    }));
+    it('should warn about and not modify inline templates with interpolations', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { Component } from '@angular/core';
+
+const mode = 'true';
+
+@Component({
+    selector: 'app-interpolated',
+    template: \`<igx-buttongroup [multiSelection]="\${mode}"></igx-buttongroup>\`
+})
+export class InterpolatedComponent { }`;
+        appTree.create(`/testSrc/appPrefix/component/interpolated.component.ts`, content);
+        const warnings = [];
+        const subscription = schematicRunner.logger.subscribe(entry => {
+            if (entry.level === 'warn') {
+                warnings.push(entry.message);
+            }
+        });
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        subscription.unsubscribe();
+        expect(tree.readContent('/testSrc/appPrefix/component/interpolated.component.ts')).toEqual(content);
+        expect(warnings).toEqual([
+            '/testSrc/appPrefix/component/interpolated.component.ts: replace the removed IgxButtonGroupComponent multiSelection input with selectionMode manually.'
+        ]);
+    }));
+    it('should replace button group multiSelection in templateUrl files not named component.html', () => __awaiter(void 0, void 0, void 0, function* () {
+        const component = `import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-toolbar',
+    templateUrl: './toolbar.html'
+})
+export class ToolbarComponent { }`;
+        appTree.create(`/testSrc/appPrefix/component/toolbar.ts`, component);
+        appTree.create(`/testSrc/appPrefix/component/toolbar.html`, `<igx-buttongroup [multiSelection]="true" [values]="buttons"></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/toolbar.html')).toEqual(`<igx-buttongroup [selectionMode]="'multi'" [values]="buttons"></igx-buttongroup>`);
+        expect(tree.readContent('/testSrc/appPrefix/component/toolbar.ts')).toEqual(component);
+    }));
+    it('should migrate a component.html template referenced through templateUrl once', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.ts`, `import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-test',
+    templateUrl: './test.component.html'
+})
+export class TestComponent { }`);
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-buttongroup [values]="buttons" [multiSelection]="false" alignment="vertical"></igx-buttongroup>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`<igx-buttongroup [values]="buttons" alignment="vertical"></igx-buttongroup>`);
+    }));
+    it('should not modify html files that are not component templates', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `<igx-buttongroup [multiSelection]="true"></igx-buttongroup>`;
+        appTree.create(`/testSrc/appPrefix/component/snippet.html`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/snippet.html')).toEqual(content);
+    }));
+    it('should not touch multiSelection on elements other than the button group', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `<igx-buttongroup selectionMode="multi"></igx-buttongroup>
+<my-list [multiSelection]="true"></my-list>`;
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(content);
+    }));
 });

package/navigation-drawer/README.md

@@ -58,7 +58,7 @@ The navigation drawer can either sit above content or be pinned alongside it and
 |:----------|:----:|:------|
 | `id`| string | Unique identifier of the Grid. ID required to register with provided `IgxNavigationService` allow directives to target the control from other template files. |
 | `position` | string | Position of the Navigation Drawer. Can be "left"(default) or "right". Only has effect when not pinned.|
-| `enableGestures`| boolean | Enables the use of touch gestures to manipulate the drawer - such as swipe/pan from edge to open, swipe toggle and pan drag. |
+| `enableGestures`| boolean | Enables the use of touch gestures to manipulate the drawer - such as swipe/pan from edge to open, swipe toggle and pan drag. Swipes require a recognized horizontal pan; movement that stays below 5 px does not toggle the drawer. |
 | `isOpen` | boolean | State of the drawer. |
 | `pin` | boolean | When pinned the drawer is relatively positioned instead of sitting above content. May require additional layout styling. |
 | `pinThreshold` | number | Minimum device width required for automatic pin to be toggled. Default is 1024, can be set to a falsy value to disable this behavior. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.2.0-rc.0",
+  "version": "22.2.0-rc.2",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -84,8 +84,8 @@
     "@angular/core": "22",
     "@angular/animations": "22",
     "@angular/forms": "22",
-    "igniteui-webcomponents": "~7.3.0",
-    "igniteui-grid-lite": "~0.10.0"
+    "igniteui-webcomponents": "~7.4.0",
+    "igniteui-grid-lite": "~0.11.0"
   },
   "peerDependenciesMeta": {
     "igniteui-webcomponents": {