igniteui-angular 22.0.0-rc.1 → 22.0.0-rc.2

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-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",

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>
      * ```

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

@@ -111,7 +111,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     data: any;
     /**
-     * Defines if the `IgxChipComponent` can be dragged in order to change it's position.
+     * Defines if the chip can be dragged in order to change it's position.
      * By default it is set to false.
      *
      * @example
@@ -141,7 +141,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     hideBaseOnDrag: boolean;
     /**
-     * Defines if the `IgxChipComponent` should render remove button and throw remove events.
+     * Defines if the chip should render remove button and throw remove events.
      * By default it is set to false.
      *
      * @example
@@ -161,7 +161,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     removeIcon: TemplateRef<any>;
     /**
-     * Defines if the `IgxChipComponent` can be selected on click or through navigation,
+     * Defines if the chip can be selected on click or through navigation,
      * By default it is set to false.
      *
      * @example
@@ -186,7 +186,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     class: string;
     /**
-     * Disables the `IgxChipComponent`. When disabled it restricts user interactions
+     * Disables the chip. When disabled it restricts user interactions
      * like focusing on click or tab, selection on click or Space, dragging.
      * By default it is set to false.
      *
@@ -197,7 +197,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     disabled: boolean;
     /**
-     * Sets the `IgxChipComponent` selected state.
+     * Sets the chip selected state.
      *
      * @example
      * ```html
@@ -211,7 +211,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     set selected(newValue: boolean);
     /**
-     * Returns if the `IgxChipComponent` is selected.
+     * Returns if the chip is selected.
      *
      * @example
      * ```typescript
@@ -229,7 +229,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     selectedChange: EventEmitter<boolean>;
     /**
-     * Sets the `IgxChipComponent` background color.
+     * Sets the chip background color.
      * The `color` property supports string, rgb, hex.
      *
      * @example
@@ -239,7 +239,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     set color(newColor: any);
     /**
-     * Returns the background color of the `IgxChipComponent`.
+     * Returns the background color of the chip.
      *
      * @example
      * ```typescript
@@ -261,8 +261,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     get resourceStrings(): IChipResourceStrings;
     /**
-     * Emits an event when the `IgxChipComponent` moving starts.
-     * Returns the moving `IgxChipComponent`.
+     * Emits an event when the chip moving starts.
+     * Returns the moving chip.
      *
      * @example
      * ```html
@@ -271,8 +271,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     moveStart: EventEmitter<IBaseChipEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` moving ends.
-     * Returns the moved `IgxChipComponent`.
+     * Emits an event when the chip moving ends.
+     * Returns the moved chip.
      *
      * @example
      * ```html
@@ -281,8 +281,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     moveEnd: EventEmitter<IBaseChipEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` is removed.
-     * Returns the removed `IgxChipComponent`.
+     * Emits an event when the chip is removed.
+     * Returns the removed chip.
      *
      * @example
      * ```html
@@ -291,8 +291,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     remove: EventEmitter<IBaseChipEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` is clicked.
-     * Returns the clicked `IgxChipComponent`, whether the event should be canceled.
+     * Emits an event when the chip is clicked.
+     * Returns the clicked chip, whether the event should be canceled.
      *
      * @example
      * ```html
@@ -301,7 +301,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     chipClick: EventEmitter<IChipClickEventArgs>;
     /**
-     * Emits event when the `IgxChipComponent` is selected/deselected.
+     * Emits event when the chip is selected/deselected.
      * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and
      * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`.
      *
@@ -312,7 +312,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     selectedChanging: EventEmitter<IChipSelectEventArgs>;
     /**
-     * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.
+     * Emits event when the chip is selected/deselected and any related animations and transitions also end.
      *
      * @example
      * ```html
@@ -321,8 +321,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     selectedChanged: EventEmitter<IBaseChipEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` keyboard navigation is being used.
-     * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,
+     * Emits an event when the chip keyboard navigation is being used.
+     * Returns the focused/selected chip, whether the event should be canceled,
      * if the `alt`, `shift` or `control` key is pressed and the pressed key name.
      *
      * @example
@@ -332,8 +332,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     keyDown: EventEmitter<IChipKeyDownEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`.
-     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * Emits an event when the chip has entered the chips area.
+     * Returns the target chip, the drag chip, as  well as
      * the original drop event arguments.
      *
      * @example
@@ -343,8 +343,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     dragEnter: EventEmitter<IChipEnterDragAreaEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.
-     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * Emits an event when the chip has left the chips area.
+     * Returns the target chip, the drag chip, as  well as
      * the original drop event arguments.
      *
      * @example
@@ -354,8 +354,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     dragLeave: EventEmitter<IChipEnterDragAreaEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`.
-     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * Emits an event when the chip is over the chips area.
+     * Returns the target chip, the drag chip, as  well as
      * the original drop event arguments.
      *
      * @example
@@ -365,8 +365,8 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
      */
     dragOver: EventEmitter<IChipEnterDragAreaEventArgs>;
     /**
-     * Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.
-     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as
+     * Emits an event when the chip has been dropped in the chips area.
+     * Returns the target chip, the drag chip, as  well as
      * the original drop event arguments.
      *
      * @example
@@ -382,7 +382,7 @@ declare class IgxChipComponent implements OnInit, OnDestroy {
     protected get isWarning(): boolean;
     protected get isDanger(): boolean;
     /**
-     * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
+     * Property that contains a reference to the drag the chip uses for dragging behavior.
      *
      * @example
      * ```html
@@ -604,7 +604,7 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      */
     ariaLabel: string;
     /**
-     * Sets the width of the `IgxChipsAreaComponent`.
+     * Sets the width of the chips area.
      *
      * @example
      * ```html
@@ -615,7 +615,7 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
     /** @hidden @internal */
     get _widthToRem(): number;
     /**
-     * Sets the height of the `IgxChipsAreaComponent`.
+     * Sets the height of the chips area.
      *
      * @example
      * ```html
@@ -626,8 +626,8 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
     /** @hidden @internal */
     get _heightToRem(): number;
     /**
-     * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered.
-     * Returns an array of `IgxChipComponent`s.
+     * Emits an event when chips in the chips area should be reordered.
+     * Returns an array of chips.
      *
      * @example
      * ```html
@@ -636,9 +636,9 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      */
     reorder: EventEmitter<IChipsAreaReorderEventArgs>;
     /**
-     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected.
+     * Emits an event when an chip in the chips area is selected/deselected.
      * Fired after the chips area is initialized if there are initially selected chips as well.
-     * Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`.
+     * Returns an array of selected chips and the chip area.
      *
      * @example
      * ```html
@@ -647,7 +647,7 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      */
     selectionChange: EventEmitter<IChipsAreaSelectEventArgs>;
     /**
-     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
+     * Emits an event when an chip in the chips area is moved.
      *
      * @example
      * ```html
@@ -656,7 +656,7 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      */
     moveStart: EventEmitter<IBaseChipsAreaEventArgs>;
     /**
-     * Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.
+     * Emits an event after an chip in the chips area is moved.
      *
      * @example
      * ```html
@@ -665,7 +665,7 @@ declare class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      */
     moveEnd: EventEmitter<IBaseChipsAreaEventArgs>;
     /**
-     * Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`.
+     * Holds the chip in the chips area.
      *
      * @example
      * ```typescript