igniteui-angular 22.1.4 → 22.2.0-rc.1

package/migrations/update-22_2_0_grid-summary-borders/index.js

@@ -0,0 +1,64 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const UpdateChanges_1 = require("../common/UpdateChanges");
+const version = '22.2.0';
+/**
+ * Summary cells now take their border width from the grid itself, so the `grid-summary-theme`
+ * width properties are gone. A value set through one of the removed CSS custom properties is
+ * moved to the grid property that now drives it - the grid-summary border styles and colors
+ * are unaffected.
+ */
+const cssPropRenames = new Map([
+    ['grid-summary-border-width', 'grid-header-border-width'],
+    ['grid-summary-pinned-border-width', 'grid-pinned-border-width']
+]);
+const renameCssProps = (content) => {
+    let result = content;
+    for (const [name, replacement] of cssPropRenames) {
+        result = result.replace(new RegExp(String.raw `--(igx?)-${name}\b`, 'g'), (_match, prefix) => `--${prefix}-${replacement}`);
+    }
+    return result;
+};
+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 update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+    const migrated = [];
+    const visit = (filePath) => {
+        var _a;
+        if (!/\.(scss|sass|css)$/.test(filePath) || filePath.includes('node_modules') || filePath.includes('dist')) {
+            return;
+        }
+        const content = (_a = host.read(filePath)) === null || _a === void 0 ? void 0 : _a.toString();
+        if (!content || !content.includes('-grid-summary-')) {
+            return;
+        }
+        const result = renameCssProps(content);
+        if (result !== content) {
+            host.overwrite(filePath, result);
+            migrated.push(filePath);
+        }
+    };
+    host.visit(visit);
+    if (migrated.length) {
+        context.logger.info('The grid-summary border width is no longer themable on its own - a summary border always has ' +
+            'the width of the grid column border it continues. The following files had their custom ' +
+            'properties renamed to the grid properties that now drive them, which also affects the ' +
+            'grid\'s own borders:');
+        for (const [name, replacement] of cssPropRenames) {
+            context.logger.info(`  - --ig-${name} -> --ig-${replacement}`);
+        }
+        for (const filePath of migrated) {
+            context.logger.info(`  ✓ Migrated ${filePath}`);
+        }
+    }
+});

package/migrations/update-22_2_0_grid-summary-borders/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/migrations/update-22_2_0_grid-summary-borders/index.spec.js

@@ -0,0 +1,100 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const index_js_1 = require("@angular-devkit/schematics/testing/index.js");
+const setup_spec_1 = require("../common/setup.spec");
+const version = '22.2.0';
+describe(`Update to ${version}`, () => {
+    let appTree;
+    const schematicRunner = new index_js_1.SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    beforeEach(() => {
+        appTree = (0, setup_spec_1.setupTestTree)();
+    });
+    const migrationName = 'migration-62';
+    it('should remove the border width properties from grid-summary-theme', () => __awaiter(void 0, void 0, void 0, function* () {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+        appTree.create(testFilePath, `$my-summary-theme: grid-summary-theme(
+                $background-color: red,
+                $border-width: 4px,
+                $border-style: dashed,
+                $border-color: blue,
+                $pinned-border-width: 6px,
+                $pinned-border-style: dotted,
+                $pinned-border-color: green
+            );`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(testFilePath)).toEqual(`$my-summary-theme: grid-summary-theme(
+                $background-color: red,
+                $border-style: dashed,
+                $border-color: blue,
+                $pinned-border-style: dotted,
+                $pinned-border-color: green
+            );`);
+    }));
+    it('should rename the grid-summary border width CSS custom properties and keep the styles', () => __awaiter(void 0, void 0, void 0, function* () {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+        appTree.create(testFilePath, `igx-grid {
+                --ig-grid-summary-border-width: 4px;
+                --ig-grid-summary-border-style: dashed;
+                --ig-grid-summary-pinned-border-width: 6px;
+                --ig-grid-summary-pinned-border-style: dotted;
+                --ig-grid-summary-pinned-border-color: green;
+            }`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(testFilePath)).toEqual(`igx-grid {
+                --ig-grid-header-border-width: 4px;
+                --ig-grid-summary-border-style: dashed;
+                --ig-grid-pinned-border-width: 6px;
+                --ig-grid-summary-pinned-border-style: dotted;
+                --ig-grid-summary-pinned-border-color: green;
+            }`);
+    }));
+    it('should rename the CSS custom properties in plain CSS files and keep the --igx- prefix', () => __awaiter(void 0, void 0, void 0, function* () {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.css`;
+        appTree.create(testFilePath, `igx-grid { --igx-grid-summary-pinned-border-width: 6px; }`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(testFilePath)).toEqual(`igx-grid { --igx-grid-pinned-border-width: 6px; }`);
+    }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.1.4",
+  "version": "22.2.0-rc.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -75,7 +75,7 @@
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "^28.1.1",
+    "igniteui-theming": "^29.0.0",
     "igniteui-i18n-core": "^1.0.5",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
@@ -321,6 +321,10 @@
     "./tree": {
       "types": "./types/igniteui-angular-tree.d.ts",
       "default": "./fesm2022/igniteui-angular-tree.mjs"
+    },
+    "./virtual-scroll": {
+      "types": "./types/igniteui-angular-virtual-scroll.d.ts",
+      "default": "./fesm2022/igniteui-angular-virtual-scroll.mjs"
     }
   },
   "sideEffects": false,