fix(*): rename ApexGrid to IgcGridLite and other sub-components

Author: dkamburov

demo/demo.ts

@@ -9,7 +9,7 @@ import {
 } from 'igniteui-webcomponents';
 import { html, render } from 'lit';
 import { ColumnConfiguration } from '../src/index';
-import { ApexGrid } from '../src/index.js';
+import { IgcGridLite } from '../src/index.js';
 
 defineComponents(
   IgcAvatarComponent,
@@ -166,7 +166,7 @@ const columns: ColumnConfiguration<User>[] = [
 ];
 
 const data = generateData(1e4);
-ApexGrid.register();
+IgcGridLite.register();
 
 render(
   html`${themeChoose}<igc-grid-lite

src/components/cell.ts

@@ -2,22 +2,22 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_CELL_TAG } from '../internal/tags.js';
-import type { ApexCellContext, ColumnConfiguration, PropertyType } from '../internal/types.js';
+import type { ColumnConfiguration, IgcCellContext, PropertyType } from '../internal/types.js';
 import { styles } from '../styles/body-cell/body-cell.css.js';
-import type ApexGridRow from './row.js';
+import type IgcGridLiteRow from './row.js';
 
 /**
- * Component representing a DOM cell of the Apex grid.
+ * Component representing a DOM cell of the Igc grid.
  */
-export default class ApexGridCell<T extends object> extends LitElement {
+export default class IgcGridLiteCell<T extends object> extends LitElement {
   public static get tagName() {
     return GRID_CELL_TAG;
   }
 
   public static override styles = styles;
 
   public static register(): void {
-    registerComponent(ApexGridCell);
+    registerComponent(IgcGridLiteCell);
   }
 
   /**
@@ -42,26 +42,26 @@ export default class ApexGridCell<T extends object> extends LitElement {
   /**
    * The parent row component holding this cell.
    */
-  public row!: ApexGridRow<T>;
+  public row!: IgcGridLiteRow<T>;
 
-  protected get context(): ApexCellContext<T> {
+  protected get context(): IgcCellContext<T> {
     return {
       parent: this,
       row: this.row,
       column: this.column,
       value: this.value,
-    } as unknown as ApexCellContext<T>;
+    } as unknown as IgcCellContext<T>;
   }
 
   protected override render() {
     return this.column.cellTemplate
-      ? this.column.cellTemplate(this.context as ApexCellContext<T> as any)
+      ? this.column.cellTemplate(this.context as IgcCellContext<T> as any)
       : html`${this.value}`;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexGridCell.tagName]: ApexGridCell<object>;
+    [IgcGridLiteCell.tagName]: IgcGridLiteCell<object>;
   }
 }

src/components/filter-row.ts

@@ -34,15 +34,15 @@ function prefixedIcon(icon?: string) {
   ></igc-icon>`;
 }
 
-export default class ApexFilterRow<T extends object> extends LitElement {
+export default class IgcFilterRow<T extends object> extends LitElement {
   public static get tagName() {
     return GRID_FILTER_ROW_TAG;
   }
 
   public static override styles = styles;
 
   public static register() {
-    registerComponent(ApexFilterRow);
+    registerComponent(IgcFilterRow);
   }
 
   @consume({ context: gridStateContext, subscribe: true })
@@ -377,6 +377,6 @@ export default class ApexFilterRow<T extends object> extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexFilterRow.tagName]: ApexFilterRow<object>;
+    [IgcFilterRow.tagName]: IgcFilterRow<object>;
   }
 }

src/components/grid.ts

@@ -30,16 +30,16 @@ import { styles as bootstrap } from '../styles/grid/themes/light/grid.bootstrap.
 import { styles as fluent } from '../styles/grid/themes/light/grid.fluent.css.js';
 import { styles as indigo } from '../styles/grid/themes/light/grid.indigo.css.js';
 import { styles as material } from '../styles/grid/themes/light/grid.material.css.js';
-import ApexGridCell from './cell.js';
-import ApexFilterRow from './filter-row.js';
-import ApexGridHeaderRow from './header-row.js';
-import ApexGridRow from './row.js';
-import ApexVirtualizer from './virtualizer.js';
+import IgcGridLiteCell from './cell.js';
+import IgcFilterRow from './filter-row.js';
+import IgcGridLiteHeaderRow from './header-row.js';
+import IgcGridLiteRow from './row.js';
+import IgcVirtualizer from './virtualizer.js';
 
 /**
  * Event object for the filtering event of the grid.
  */
-export interface ApexFilteringEvent<T extends object> {
+export interface IgcFilteringEvent<T extends object> {
   /**
    * The target column for the filter operation.
    */
@@ -65,7 +65,7 @@ export interface ApexFilteringEvent<T extends object> {
 /**
  * Event object for the filtered event of the grid.
  */
-export interface ApexFilteredEvent<T extends object> {
+export interface IgcFilteredEvent<T extends object> {
   /**
    * The target column for the filter operation.
    */
@@ -80,7 +80,7 @@ export interface ApexFilteredEvent<T extends object> {
 /**
  * Events for the igc-grid-lite.
  */
-export interface ApexGridEventMap<T extends object> {
+export interface IgcGridLiteEventMap<T extends object> {
   /**
    * Emitted when sorting is initiated through the UI.
    * Returns the sort expression which will be used for the operation.
@@ -108,18 +108,18 @@ export interface ApexGridEventMap<T extends object> {
    *
    * @event
    */
-  filtering: CustomEvent<ApexFilteringEvent<T>>;
+  filtering: CustomEvent<IgcFilteringEvent<T>>;
   /**
    * Emitted when a filter operation initiated through the UI has completed.
    * Returns the filter state for the affected column.
    *
    * @event
    */
-  filtered: CustomEvent<ApexFilteredEvent<T>>;
+  filtered: CustomEvent<IgcFilteredEvent<T>>;
 }
 
 /**
- * Apex grid is a web component for displaying data in a tabular format quick and easy.
+ * IgcGridLite is a web component for displaying data in a tabular format quick and easy.
  *
  * Out of the box it provides row virtualization, sort and filter operations (client and server side),
  * the ability to template cells and headers and column hiding.
@@ -132,7 +132,7 @@ export interface ApexGridEventMap<T extends object> {
  * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
  *
  */
-export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {
+export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {
   public static get tagName() {
     return GRID_TAG;
   }
@@ -141,11 +141,11 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
 
   public static register() {
     registerComponent(
-      ApexGrid,
-      ApexVirtualizer,
-      ApexGridRow,
-      ApexGridHeaderRow,
-      ApexFilterRow,
+      IgcGridLite,
+      IgcVirtualizer,
+      IgcGridLiteRow,
+      IgcGridLiteHeaderRow,
+      IgcFilterRow,
       IgcButtonComponent,
       IgcChipComponent,
       IgcInputComponent,
@@ -162,20 +162,20 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
     initialValue: this.stateController,
   });
 
-  @query(ApexVirtualizer.tagName)
-  protected scrollContainer!: ApexVirtualizer;
+  @query(IgcVirtualizer.tagName)
+  protected scrollContainer!: IgcVirtualizer;
 
-  @query(ApexGridHeaderRow.tagName)
-  protected headerRow!: ApexGridHeaderRow<T>;
+  @query(IgcGridLiteHeaderRow.tagName)
+  protected headerRow!: IgcGridLiteHeaderRow<T>;
 
-  @query(ApexFilterRow.tagName)
-  protected filterRow!: ApexFilterRow<T>;
+  @query(IgcFilterRow.tagName)
+  protected filterRow!: IgcFilterRow<T>;
 
   @state()
   protected dataState: Array<T> = [];
 
-  @queryAll(ApexGridRow.tagName)
-  protected _rows!: NodeListOf<ApexGridRow<T>>;
+  @queryAll(IgcGridLiteRow.tagName)
+  protected _rows!: NodeListOf<IgcGridLiteRow<T>>;
 
   /** Column configuration for the grid. */
   @property({ attribute: false })
@@ -285,7 +285,7 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
   }
 
   /**
-   * The total number of items in the {@link ApexGrid.dataView} collection.
+   * The total number of items in the {@link IgcGridLite.dataView} collection.
    */
   public get totalItems() {
     return this.dataState.length;
@@ -387,7 +387,9 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
 
   @eventOptions({ capture: true })
   protected bodyClickHandler(event: MouseEvent) {
-    const target = event.composedPath().find((el) => el instanceof ApexGridCell) as ApexGridCell<T>;
+    const target = event
+      .composedPath()
+      .find((el) => el instanceof IgcGridLiteCell) as IgcGridLiteCell<T>;
     if (target) {
       this.stateController.active = {
         column: target.column.key,
@@ -413,18 +415,18 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
 
   protected renderBody() {
     return html`
-      <apex-virtualizer
+      <igc-virtualizer
         .items=${this.dataState}
         .renderItem=${this.DOM.rowRenderer}
         @click=${this.bodyClickHandler}
         @keydown=${this.bodyKeydownHandler}
-      ></apex-virtualizer>
+      ></igc-virtualizer>
     `;
   }
 
   protected renderFilterRow() {
     return this.columns.some((column) => column.filter)
-      ? html`<apex-filter-row style=${styleMap(this.DOM.columnSizes)}></apex-filter-row>`
+      ? html`<igc-filter-row style=${styleMap(this.DOM.columnSizes)}></igc-filter-row>`
       : nothing;
   }
 
@@ -440,6 +442,6 @@ export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMa
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexGrid.tagName]: ApexGrid<object>;
+    [IgcGridLite.tagName]: IgcGridLite<object>;
   }
 }

src/components/header-row.ts

@@ -8,20 +8,20 @@ import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_ROW_TAG } from '../internal/tags.js';
 import type { ColumnConfiguration } from '../internal/types.js';
 import { styles } from '../styles/header-row/header-row.base.css.js';
-import ApexGridHeader from './header.js';
+import IgcGridLiteHeader from './header.js';
 
-export default class ApexGridHeaderRow<T extends object> extends LitElement {
+export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
   public static get tagName() {
     return GRID_HEADER_ROW_TAG;
   }
   public static override styles = styles;
 
   public static register(): void {
-    registerComponent(ApexGridHeaderRow, ApexGridHeader);
+    registerComponent(IgcGridLiteHeaderRow, IgcGridLiteHeader);
   }
 
-  @queryAll(ApexGridHeader.tagName)
-  protected _headers!: NodeListOf<ApexGridHeader<T>>;
+  @queryAll(IgcGridLiteHeader.tagName)
+  protected _headers!: NodeListOf<IgcGridLiteHeader<T>>;
 
   @consume({ context: gridStateContext, subscribe: true })
   @property({ attribute: false })
@@ -47,8 +47,8 @@ export default class ApexGridHeaderRow<T extends object> extends LitElement {
   #activeFilterColumn(event: MouseEvent) {
     const header = event
       .composedPath()
-      .filter((target) => target instanceof ApexGridHeader)
-      .at(0) as ApexGridHeader<T>;
+      .filter((target) => target instanceof IgcGridLiteHeader)
+      .at(0) as IgcGridLiteHeader<T>;
 
     this.state.filtering.setActiveColumn(header?.column);
   }
@@ -79,6 +79,6 @@ export default class ApexGridHeaderRow<T extends object> extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexGridHeaderRow.tagName]: ApexGridHeaderRow<object>;
+    [IgcGridLiteHeaderRow.tagName]: IgcGridLiteHeaderRow<object>;
   }
 }

src/components/header.ts

@@ -11,21 +11,21 @@ import {
 import { partNameMap } from '../internal/part-map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_TAG } from '../internal/tags.js';
-import type { ApexHeaderContext, ColumnConfiguration } from '../internal/types.js';
+import type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';
 import { styles } from '../styles/header-cell/header-cell.css.js';
 
-export default class ApexGridHeader<T extends object> extends LitElement {
+export default class IgcGridLiteHeader<T extends object> extends LitElement {
   public static get tagName() {
     return GRID_HEADER_TAG;
   }
 
   public static override styles = styles;
 
   public static register(): void {
-    registerComponent(ApexGridHeader, IgcIconComponent);
+    registerComponent(IgcGridLiteHeader, IgcIconComponent);
   }
 
-  protected get context(): ApexHeaderContext<T> {
+  protected get context(): IgcHeaderContext<T> {
     return {
       parent: this,
       column: this.column,
@@ -163,6 +163,6 @@ export default class ApexGridHeader<T extends object> extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexGridHeader.tagName]: ApexGridHeader<object>;
+    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;
   }
 }

src/components/row.ts

@@ -5,23 +5,23 @@ import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
 import { styles } from '../styles/body-row/body-row.css.js';
-import ApexGridCell from './cell.js';
+import IgcGridLiteCell from './cell.js';
 
 /**
- * Component representing the DOM row in the Apex grid.
+ * Component representing the DOM row in the IgcGridLite.
  */
-export default class ApexGridRow<T extends object> extends LitElement {
+export default class IgcGridLiteRow<T extends object> extends LitElement {
   public static get tagName() {
     return GRID_ROW_TAG;
   }
   public static override styles = styles;
 
   public static register(): void {
-    registerComponent(ApexGridRow, ApexGridCell);
+    registerComponent(IgcGridLiteRow, IgcGridLiteCell);
   }
 
-  @queryAll(ApexGridCell.tagName)
-  protected _cells!: NodeListOf<ApexGridCell<T>>;
+  @queryAll(IgcGridLiteCell.tagName)
+  protected _cells!: NodeListOf<IgcGridLiteCell<T>>;
 
   @property({ attribute: false })
   public data!: T;
@@ -55,7 +55,7 @@ export default class ApexGridRow<T extends object> extends LitElement {
               part="cell"
               .active=${key === column.key && index === this.index}
               .column=${column}
-              .row=${this as ApexGridRow<T>}
+              .row=${this as IgcGridLiteRow<T>}
               .value=${this.data[column.key]}
             ></igc-grid-lite-cell>`
       )}
@@ -65,6 +65,6 @@ export default class ApexGridRow<T extends object> extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    [ApexGridRow.tagName]: ApexGridRow<object>;
+    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;
   }
 }