igniteui-angular 22.0.0-rc.1 → 22.0.0

package/migrations/migration-collection.json

@@ -289,6 +289,11 @@
             "version": "21.2.2",
             "description": "Updates Ignite UI for Angular from v21.2.0 to v21.2.2",
             "factory": "./update-21_2_2"
+        },
+        "migration-57": {
+            "version": "22.0.0",
+            "description": "Updates Ignite UI for Angular from v21.2.x to v22.0.0",
+            "factory": "./update-22_0_0"
         }
     }
 }

package/migrations/update-22_0_0/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from '@angular-devkit/schematics';
+declare const _default: () => Rule;
+export default _default;

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

@@ -0,0 +1,86 @@
+"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 util_1 = require("../common/util");
+const version = '22.0.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, Element } = yield import('@angular/compiler');
+    const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    const changes = new Map();
+    const parser = new HtmlParser();
+    const applyChanges = () => {
+        for (const [path, fileChanges] of changes.entries()) {
+            let content = host.read(path).toString();
+            fileChanges
+                .sort((a, b) => b.position - a.position)
+                .forEach((c) => {
+                content = c.apply(content);
+            });
+            host.overwrite(path, content);
+        }
+    };
+    const addChange = (path, change) => {
+        if (!changes.has(path)) {
+            changes.set(path, []);
+        }
+        changes.get(path).push(change);
+    };
+    // All form components that default to 'line' prior to this version
+    const TAGS = [
+        'igx-input-group',
+        'igx-select',
+        'igx-date-picker',
+        'igx-date-range-picker',
+        'igx-time-picker'
+    ];
+    const TYPE_ATTRS = ['type', '[type]'];
+    for (const path of update.templateFiles) {
+        const root = (0, util_1.parseFile)(parser, host, path);
+        const nodes = (0, util_1.findElementNodes)(root, TAGS);
+        for (const node of nodes) {
+            if (!(node instanceof Element))
+                continue;
+            // Skip if the element already has an explicit type binding
+            if ((0, util_1.hasAttribute)(node, TYPE_ATTRS))
+                continue;
+            const offset = (0, util_1.getSourceOffset)(node);
+            const file = offset.file;
+            // Insert type="line" right after the tag name in the start tag
+            // e.g., <igx-input-group → <igx-input-group type="line"
+            const tagNameEnd = offset.startTag.start + 1 + node.name.length;
+            addChange(file.url, new util_1.FileChange(tagNameEnd, ' type="line"'));
+        }
+    }
+    applyChanges();
+    changes.clear();
+    // IgxSelect: default positioning strategy changed to AutoPositionStrategy.
+    // Insert a comment above each <igx-select> to inform the developer.
+    const SELECT_NOTE = `<!-- IgxSelect: default positioning changed to AutoPositionStrategy (below/above input).\n` +
+        `     To preserve overlap behavior: this.select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(this.select) }; -->\n`;
+    for (const path of update.templateFiles) {
+        const content = host.read(path).toString();
+        const root = (0, util_1.parseFile)(parser, host, path);
+        const nodes = (0, util_1.findElementNodes)(root, 'igx-select');
+        for (const node of nodes) {
+            if (!(node instanceof Element))
+                continue;
+            const { startTag, file } = (0, util_1.getSourceOffset)(node);
+            const noteStart = Math.max(0, startTag.start - SELECT_NOTE.length);
+            if (content.slice(noteStart, startTag.start) === SELECT_NOTE)
+                continue;
+            addChange(file.url, new util_1.FileChange(startTag.start, SELECT_NOTE));
+        }
+    }
+    applyChanges();
+    update.applyChanges();
+});

package/migrations/update-22_0_0/index.spec.d.ts

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

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

@@ -0,0 +1,116 @@
+"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.0.0';
+const SELECT_POSITION_NOTE = `<!-- IgxSelect: default positioning changed to AutoPositionStrategy (below/above input).\n` +
+    `     To preserve overlap behavior: this.select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(this.select) }; -->\n`;
+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-57';
+    it('should add type="line" to igx-input-group without explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-input-group><input igxInput></igx-input-group>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-input-group type="line"><input igxInput></igx-input-group>`);
+    }));
+    it('should add type="line" and a positioning note to igx-select without explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-select><igx-select-item>Option</igx-select-item></igx-select>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`${SELECT_POSITION_NOTE}<igx-select type="line"><igx-select-item>Option</igx-select-item></igx-select>`);
+    }));
+    it('should add a positioning note to igx-select that already has an explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-select type="border"><igx-select-item>Option</igx-select-item></igx-select>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`${SELECT_POSITION_NOTE}<igx-select type="border"><igx-select-item>Option</igx-select-item></igx-select>`);
+    }));
+    it('should add type="line" to igx-date-picker without explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-date-picker></igx-date-picker>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-date-picker type="line"></igx-date-picker>`);
+    }));
+    it('should add type="line" to igx-date-range-picker without explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-date-range-picker></igx-date-range-picker>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-date-range-picker type="line"></igx-date-range-picker>`);
+    }));
+    it('should add type="line" to igx-time-picker without explicit type', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-time-picker></igx-time-picker>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-time-picker type="line"></igx-time-picker>`);
+    }));
+    it('should NOT modify igx-input-group that already has type attribute', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-input-group type="box"><input igxInput></igx-input-group>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-input-group type="box"><input igxInput></igx-input-group>`);
+    }));
+    it('should NOT modify igx-input-group that already has [type] binding', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-input-group [type]="myType"><input igxInput></igx-input-group>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-input-group [type]="myType"><input igxInput></igx-input-group>`);
+    }));
+    it('should handle multiple components in the same template', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`, `<igx-input-group><input igxInput></igx-input-group>
+<igx-select></igx-select>
+<igx-input-group type="border"><input igxInput></igx-input-group>`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-input-group type="line"><input igxInput></igx-input-group>
+${SELECT_POSITION_NOTE}<igx-select type="line"></igx-select>
+<igx-input-group type="border"><input igxInput></igx-input-group>`);
+    }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.0.0-rc.1",
+  "version": "22.0.0",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -104,7 +104,7 @@
     }
   },
   "igxDevDependencies": {
-    "@igniteui/angular-schematics": "~22.0.1531-beta.1"
+    "@igniteui/angular-schematics": "~22.0.1540"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json",

package/skills/igniteui-angular-grids/references/sizing.md

@@ -212,3 +212,4 @@ igx-grid {
 - Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance.
 - When using percentage height, the parent **must** have an explicit height for the percentage to resolve correctly. Without it, the grid falls back to 10 visible rows.
 - A mix of fixed-width and auto-sized columns is valid — auto-sized columns fill the remaining space after fixed-width columns are laid out.
+- **Omit `width` on generated columns.** No `width` = columns equally share available grid width. Pixel widths leave empty space when their sum is less than the grid width. Only set `width` when the user explicitly asks for it. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.

package/skills/igniteui-angular-grids/references/structure.md

@@ -263,6 +263,7 @@ Events: `(rowSelectionChanging)`, `(columnSelectionChanging)`, `(selected)` (cel
 6. **Set `dataType` on every column** for correct filtering, sorting, editing, and summaries
 7. **Use signals** for data binding — `[data]="myData()"` with `signal<T[]>([])`
 8. **Virtualization is automatic** — don't wrap grids in virtual scroll containers
+9. **Omit `width` on generated `<igx-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for fixed or percentage column sizing. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/types.md

@@ -247,7 +247,7 @@ Columns use `<igx-grid-lite-column>` with these inputs:
 | `field` | `string` | Data property key (required) |
 | `dataType` | `'string' \| 'number' \| 'boolean' \| 'date'` | Column data type |
 | `header` | `string` | Header text |
-| `width` | `string` | CSS width (e.g., `'250px'`) |
+| `width` | `string` | CSS width — omit by default; columns auto-fill available grid space. Only set when a fixed or percentage width is explicitly needed (e.g. `'20%'`). |
 | `hidden` | `boolean` | Hide the column |
 | `resizable` | `boolean` | Allow column resizing |
 | `sortable` | `boolean` | Enable sorting |
@@ -487,6 +487,7 @@ Provide a drag-and-drop UI for users to reshape the pivot interactively:
 2. **Hierarchical Grid**: sorting/filtering/paging are independent per level; configure features on the `<igx-row-island>` blueprint
 3. **Pivot Grid is read-only** — editing, paging, pinning, column moving, row dragging are all disabled; use `pivotConfiguration` for all data operations
 4. **Grid Lite requires `CUSTOM_ELEMENTS_SCHEMA`** and `igniteui-grid-lite` npm package — it has no editing, selection, paging, or export
+5. **Omit `width` on generated `<igx-grid-lite-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for it. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also
 

package/types/igniteui-angular-accordion.d.ts

@@ -5,18 +5,18 @@ import { IExpansionPanelCancelableEventArgs, ToggleAnimationSettings, IExpansion
 
 interface IAccordionEventArgs extends IExpansionPanelEventArgs {
     owner: IgxAccordionComponent;
-    /** Provides a reference to the `IgxExpansionPanelComponent` which was expanded/collapsed. */
+    /** Provides a reference to the expansion panel which was expanded/collapsed. */
     panel: IgxExpansionPanelBase;
 }
 interface IAccordionCancelableEventArgs extends IExpansionPanelCancelableEventArgs {
     owner: IgxAccordionComponent;
-    /** Provides a reference to the `IgxExpansionPanelComponent` which is currently expanding/collapsing. */
+    /** Provides a reference to the expansion panel which is currently expanding/collapsing. */
     panel: IgxExpansionPanelBase;
     /** Enables canceling the expansion/collapse operation. */
     cancel: boolean;
 }
 /**
- * IgxAccordion is a container-based component that contains that can house multiple expansion panels.
+ * Accordion is a container-based component that contains that can house multiple expansion panels.
  *
  * @igxModule IgxAccordionModule
  *

package/types/igniteui-angular-action-strip.d.ts

@@ -113,7 +113,7 @@ declare class IgxActionStripComponent implements IgxActionStripToken, AfterViewI
      */
     get menuItems(): any[];
     /**
-     * Getter for the 'display' property of the current `IgxActionStrip`
+     * Getter for the 'display' property of the current action strip
      */
     private get display();
     /**

package/types/igniteui-angular-button-group.d.ts

@@ -65,7 +65,7 @@ declare class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
      */
     set itemContentCssClass(value: string);
     /**
-     * Returns the CSS class of the item content of the `IgxButtonGroup`.
+     * Returns the CSS class of the item content of the button group.
      * ```typescript
      *  @ViewChild("MyChild")
      * public buttonG: IgxButtonGroupComponent;

package/types/igniteui-angular-calendar.d.ts

@@ -138,7 +138,7 @@ declare class Calendar {
 }
 
 /**
- * This file contains all the directives used by the @link IgxCalendarComponent.
+ * This file contains all the directives used by the @link calendar.
  * Except for the directives which are used for templating the calendar itself
  * you should generally not use them directly.
  *

package/types/igniteui-angular-card.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 
 /**
- * IgxCardMedia is container for the card media section.
+ * Card media is container for the card media section.
  * Use it to wrap images and videos.
  */
 declare class IgxCardMediaDirective {
@@ -36,7 +36,7 @@ declare class IgxCardMediaDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardMediaDirective, "igx-card-media", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, never, true, never>;
 }
 /**
- * IgxCardHeader is container for the card header
+ * Card header is container for the card header
  */
 declare class IgxCardHeaderComponent {
     /** @hidden @internal */
@@ -56,7 +56,7 @@ declare class IgxCardHeaderComponent {
     static ngAcceptInputType_vertical: unknown;
 }
 /**
- * IgxCardThumbnail is container for the card thumbnail section.
+ * Card thumbnail is container for the card thumbnail section.
  * Use it to wrap anything you want to be used as a thumbnail.
  */
 declare class IgxCardThumbnailDirective {
@@ -84,7 +84,7 @@ declare class IgxCardHeaderSubtitleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardHeaderSubtitleDirective, "[igxCardHeaderSubtitle]", never, {}, {}, never, never, true, never>;
 }
 /**
- * IgxCardContent is container for the card content.
+ * Card content is container for the card content.
  */
 declare class IgxCardContentDirective {
     /** @hidden @internal */
@@ -93,7 +93,7 @@ declare class IgxCardContentDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardContentDirective, "igx-card-content", never, {}, {}, never, never, true, never>;
 }
 /**
- * IgxCardFooter is container for the card footer
+ * Card footer is container for the card footer
  */
 declare class IgxCardFooterDirective {
     /**
@@ -204,7 +204,7 @@ declare const IgxCardActionsLayout: {
 };
 type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
 /**
- * IgxCardActions is container for the card actions.
+ * Card actions is container for the card actions.
  */
 declare class IgxCardActionsComponent implements OnInit, OnChanges {
     card: IgxCardComponent;

package/types/igniteui-angular-carousel.d.ts

@@ -83,7 +83,7 @@ declare abstract class IgxCarouselComponentBase implements OnDestroy {
 
 /**
  * A slide component that usually holds an image and/or a caption text.
- * IgxSlideComponent is usually a child component of an IgxCarouselComponent.
+ * Slide is usually a child component of a carousel.
  *
  * ```
  * <igx-slide [input bindings] >
@@ -432,7 +432,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     slides: QueryList<IgxSlideComponent>;
     /**
      * An event that is emitted after a slide transition has happened.
-     * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
+     * Provides references to the carousel and slide components as event arguments.
      * ```html
      * <igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>
      * ```
@@ -442,7 +442,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     slideChanged: EventEmitter<ISlideEventArgs>;
     /**
      * An event that is emitted after a slide has been added to the carousel.
-     * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
+     * Provides references to the carousel and slide components as event arguments.
      * ```html
      * <igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>
      * ```
@@ -452,7 +452,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     slideAdded: EventEmitter<ISlideEventArgs>;
     /**
      * An event that is emitted after a slide has been removed from the carousel.
-     * Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
+     * Provides references to the carousel and slide components as event arguments.
      * ```html
      * <igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>
      * ```
@@ -462,7 +462,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     slideRemoved: EventEmitter<ISlideEventArgs>;
     /**
      * An event that is emitted after the carousel has been paused.
-     * Provides a reference to the `IgxCarouselComponent` as an event argument.
+     * Provides a reference to the carousel as an event argument.
      * ```html
      * <igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>
      * ```
@@ -472,7 +472,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     carouselPaused: EventEmitter<IgxCarouselComponent>;
     /**
      * An event that is emitted after the carousel has resumed transitioning between `slides`.
-     * Provides a reference to the `IgxCarouselComponent` as an event argument.
+     * Provides a reference to the carousel as an event argument.
      * ```html
      * <igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>
      * ```