Rename icon column to mapping column (#2067)

# Pull Request

## 🤨 Rationale

The icon column now supports various types of mappings (icon, spinner,
and text), so we've decided that it should be renamed to the mapping
column rather than the icon column.

## 👩‍💻 Implementation

- Rename the icon column, along with its cell view, group header view,
and page object, to be called "mapping" rather than "icon"
- Update Angular and Blazor to be aligned with the new name
- Lots of updates to support the rename
- No functional changes other than renaming components, classes, files,
etc.

## 🧪 Testing

- Sanity checked that the storybook docs, Angular example app, and
Blazor example app all render as expected
- All existing tests still pass

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Milan Raj <rajsite@users.noreply.github.com>

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -22,7 +22,7 @@ import { NimbleTableModule } from '@ni/nimble-angular/table';
 import { NimbleTableColumnTextModule } from '@ni/nimble-angular/table-column/text';
 import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/anchor';
 import { NimbleTableColumnDateTextModule } from '@ni/nimble-angular/table-column/date-text';
-import { NimbleTableColumnIconModule } from '@ni/nimble-angular/table-column/icon';
+import { NimbleTableColumnMappingModule } from '@ni/nimble-angular/table-column/mapping';
 import { NimbleTableColumnNumberTextModule } from '@ni/nimble-angular/table-column/number-text';
 import { NimbleTableColumnDurationTextModule } from '@ni/nimble-angular/table-column/duration-text';
 import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text/viewer';
@@ -95,7 +95,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleBannerModule,
         NimbleRichTextViewerModule,
         NimbleRichTextEditorModule,
-        NimbleTableColumnIconModule,
+        NimbleTableColumnMappingModule,
         NimbleMappingIconModule,
         NimbleMappingUserModule,
         NimbleRichTextMentionUsersModule,

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -247,15 +247,15 @@
                 >
                     Date
                 </nimble-table-column-date-text>
-                <nimble-table-column-icon
+                <nimble-table-column-mapping
                     field-name="statusCode"
                     key-type="number"
                 >
                     <nimble-mapping-text key="100" text="Status message 1"></nimble-mapping-text>
                     <nimble-mapping-text key="101" text="Status message 2"></nimble-mapping-text>
                     Status
-                </nimble-table-column-icon>
-                <nimble-table-column-icon
+                </nimble-table-column-mapping>
+                <nimble-table-column-mapping
                     field-name="result"
                     key-type="string"
                     width-mode="icon-size"
@@ -273,7 +273,7 @@
                         text-hidden>
                     </nimble-mapping-spinner>
                     <nimble-icon-xmark-check title="Result"></nimble-icon-xmark-check>
-                </nimble-table-column-icon>
+                </nimble-table-column-mapping>
                 <nimble-table-column-number-text
                     field-name="number"
                 >

angular-workspace/projects/ni/nimble-angular/mapping/icon/nimble-mapping-icon.directive.ts

@@ -9,7 +9,7 @@ export type { MappingIcon };
 export { mappingIconTag };
 
 /**
- * Directive to provide Angular integration for the mapping icon element used by the icon column.
+ * Directive to provide Angular integration for the mapping icon element used by the mapping column.
  */
 @Directive({
     selector: 'nimble-mapping-icon'

angular-workspace/projects/ni/nimble-angular/mapping/icon/tests/nimble-mapping-icon.directive.spec.ts

@@ -2,15 +2,15 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IconSeverity } from '@ni/nimble-angular';
 import { NimbleTableModule } from '../../../table/nimble-table.module';
-import { NimbleTableColumnIconModule } from '../../../table-column/icon/nimble-table-column-icon.module';
+import { NimbleTableColumnMappingModule } from '../../../table-column/mapping/nimble-table-column-mapping.module';
 import { NimbleMappingIconDirective, type MappingIcon } from '../nimble-mapping-icon.directive';
 import { NimbleMappingIconModule } from '../nimble-mapping-icon.module';
 
 describe('NimbleMappingIcon', () => {
     describe('module', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
-                imports: [NimbleMappingIconModule]
+                imports: [NimbleTableColumnMappingModule]
             });
         });
 
@@ -23,7 +23,7 @@ describe('NimbleMappingIcon', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-icon
                             #mapping
                             key="false"
@@ -33,7 +33,7 @@ describe('NimbleMappingIcon', () => {
                             text-hidden
                         >
                         </nimble-mapping-icon>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -48,7 +48,7 @@ describe('NimbleMappingIcon', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingIconModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingIconModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -87,7 +87,7 @@ describe('NimbleMappingIcon', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-icon
                             #mapping
                             [key]="key"
@@ -97,7 +97,7 @@ describe('NimbleMappingIcon', () => {
                             [textHidden]="textHidden"
                         >
                         </nimble-mapping-icon>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -117,7 +117,7 @@ describe('NimbleMappingIcon', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingIconModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingIconModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -186,7 +186,7 @@ describe('NimbleMappingIcon', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-icon
                             #mapping
                             [attr.key]="key"
@@ -196,7 +196,7 @@ describe('NimbleMappingIcon', () => {
                             [attr.text-hidden]="textHidden"
                         >
                         </nimble-mapping-icon>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -216,7 +216,7 @@ describe('NimbleMappingIcon', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingIconModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingIconModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);

angular-workspace/projects/ni/nimble-angular/mapping/spinner/tests/nimble-mapping-spinner.directive.spec.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NimbleTableModule } from '../../../table/nimble-table.module';
-import { NimbleTableColumnIconModule } from '../../../table-column/icon/nimble-table-column-icon.module';
+import { NimbleTableColumnMappingModule } from '../../../table-column/mapping/nimble-table-column-mapping.module';
 import { NimbleMappingSpinnerDirective, type MappingSpinner } from '../nimble-mapping-spinner.directive';
 import { NimbleMappingSpinnerModule } from '../nimble-mapping-spinner.module';
 
@@ -22,15 +22,15 @@ describe('NimbleMappingSpinner', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-spinner
                             #mapping
                             key="false"
                             text="nope"
                             text-hidden
                         >
                         </nimble-mapping-spinner>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -45,7 +45,7 @@ describe('NimbleMappingSpinner', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingSpinnerModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingSpinnerModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -74,15 +74,15 @@ describe('NimbleMappingSpinner', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-spinner
                             #mapping
                             [key]="key"
                             [text]="text"
                             [textHidden]="textHidden"
                         >
                         </nimble-mapping-spinner>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -100,7 +100,7 @@ describe('NimbleMappingSpinner', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingSpinnerModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingSpinnerModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -147,15 +147,15 @@ describe('NimbleMappingSpinner', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-spinner
                             #mapping
                             [attr.key]="key"
                             [attr.text]="text"
                             [attr.text-hidden]="textHidden"
                         >
                         </nimble-mapping-spinner>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -173,7 +173,7 @@ describe('NimbleMappingSpinner', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingSpinnerModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingSpinnerModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);

angular-workspace/projects/ni/nimble-angular/mapping/text/nimble-mapping-text.directive.ts

@@ -7,7 +7,7 @@ export type { MappingText, MappingKey };
 export { mappingTextTag };
 
 /**
- * Directive to provide Angular integration for the mapping text element used by the icon column.
+ * Directive to provide Angular integration for the mapping text element used by the mapping column.
  */
 @Directive({
     selector: 'nimble-mapping-text'

angular-workspace/projects/ni/nimble-angular/mapping/text/tests/nimble-mapping-text.directive.spec.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NimbleTableModule } from '../../../table/nimble-table.module';
-import { NimbleTableColumnIconModule } from '../../../table-column/icon/nimble-table-column-icon.module';
+import { NimbleTableColumnMappingModule } from '../../../table-column/mapping/nimble-table-column-mapping.module';
 import { NimbleMappingTextDirective, type MappingText } from '../nimble-mapping-text.directive';
 import { NimbleMappingTextModule } from '../nimble-mapping-text.module';
 
@@ -22,14 +22,14 @@ describe('NimbleMappingText', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-text
                             #mapping
                             key="false"
                             text="nope"
                         >
                         </nimble-mapping-text>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -44,7 +44,7 @@ describe('NimbleMappingText', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingTextModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingTextModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -68,14 +68,14 @@ describe('NimbleMappingText', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-text
                             #mapping
                             [key]="key"
                             [text]="text"
                         >
                         </nimble-mapping-text>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -92,7 +92,7 @@ describe('NimbleMappingText', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingTextModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingTextModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);
@@ -128,14 +128,14 @@ describe('NimbleMappingText', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-icon key-type="boolean">
+                    <nimble-table-column-mapping key-type="boolean">
                         <nimble-mapping-text
                             #mapping
                             [attr.key]="key"
                             [attr.text]="text"
                         >
                         </nimble-mapping-text>
-                    </nimble-table-column-icon>
+                    </nimble-table-column-mapping>
                 </nimble-table>
             `
         })
@@ -152,7 +152,7 @@ describe('NimbleMappingText', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
                 declarations: [TestHostComponent],
-                imports: [NimbleMappingTextModule, NimbleTableColumnIconModule, NimbleTableModule]
+                imports: [NimbleMappingTextModule, NimbleTableColumnMappingModule, NimbleTableModule]
             });
 
             fixture = TestBed.createComponent(TestHostComponent);

angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts → angular-workspace/projects/ni/nimble-angular/table-column/mapping/nimble-table-column-mapping.directive.ts

@@ -1,21 +1,21 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-import { type TableColumnIcon, tableColumnIconTag } from '@ni/nimble-components/dist/esm/table-column/icon';
+import { type TableColumnMapping, tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
 import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities';
 import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column';
 import { MappingKeyType } from '@ni/nimble-components/dist/esm/table-column/enum-base/types';
-import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/icon/types';
+import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types';
 
 export { MappingKeyType, TableColumnMappingWidthMode };
-export type { TableColumnIcon };
-export { tableColumnIconTag };
+export type { TableColumnMapping };
+export { tableColumnMappingTag };
 
 /**
- * Directive to provide Angular integration for the table column element for icons/spinners.
+ * Directive to provide Angular integration for the table column element for mapped text/icons/spinners.
  */
 @Directive({
-    selector: 'nimble-table-column-icon'
+    selector: 'nimble-table-column-mapping'
 })
-export class NimbleTableColumnIconDirective extends NimbleTableColumnBaseDirective<TableColumnIcon> {
+export class NimbleTableColumnMappingDirective extends NimbleTableColumnBaseDirective<TableColumnMapping> {
     public get fieldName(): string | undefined {
         return this.elementRef.nativeElement.fieldName;
     }
@@ -72,7 +72,7 @@ export class NimbleTableColumnIconDirective extends NimbleTableColumnBaseDirecti
         this.renderer.setProperty(this.elementRef.nativeElement, 'widthMode', value);
     }
 
-    public constructor(renderer: Renderer2, elementRef: ElementRef<TableColumnIcon>) {
+    public constructor(renderer: Renderer2, elementRef: ElementRef<TableColumnMapping>) {
         super(renderer, elementRef);
     }
 }