diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts index faec9120ea..61d301507f 100644 --- a/angular-workspace/projects/example-client-app/src/app/app.module.ts +++ b/angular-workspace/projects/example-client-app/src/app/app.module.ts @@ -9,7 +9,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N NimbleIconAddModule, NimbleSwitchModule, NimbleToolbarModule, NimbleMenuButtonModule, NimbleComboboxModule, NimbleTooltipModule, NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule, NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule, - NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular'; + NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule, NimbleIconXmarkCheckModule } from '@ni/nimble-angular'; import { NimbleCardModule } from '@ni/nimble-angular/card'; import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core'; import { NimbleLabelProviderRichTextModule } from '@ni/nimble-angular/label-provider/rich-text'; @@ -68,6 +68,7 @@ import { HeaderComponent } from './header/header.component'; NimbleBreadcrumbItemModule, NimbleIconAddModule, NimbleIconCheckModule, + NimbleIconXmarkCheckModule, NimbleSpinnerModule, NimbleSwitchModule, NimbleToolbarModule, diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html index fd8bdcc2a5..80a44f58c8 100644 --- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html +++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html @@ -258,18 +258,21 @@ + severity="success" + text-hidden> + text="Unknown" + text-hidden> - Result + +## 23.2.0 + +Thu, 02 May 2024 17:22:44 GMT + +### Minor changes + +- Add width-mode to the icon column ([ni/nimble@7a27f45](https://github.com/ni/nimble/commit/7a27f45851b45e29a554e3effc812011108db80d)) + ## 23.1.11 Wed, 01 May 2024 21:45:37 GMT diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json index 605c0139b8..131cac0fd5 100644 --- a/angular-workspace/projects/ni/nimble-angular/package.json +++ b/angular-workspace/projects/ni/nimble-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-angular", - "version": "23.1.11", + "version": "23.2.0", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "npm run invoke-publish:setup && cd ../../../dist/ni/nimble-angular && npm publish", diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts index e9c16a75d4..ac501ccc7d 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts @@ -3,8 +3,9 @@ import { type TableColumnIcon, tableColumnIconTag } from '@ni/nimble-components/ 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'; -export { MappingKeyType }; +export { MappingKeyType, TableColumnMappingWidthMode }; export type { TableColumnIcon }; export { tableColumnIconTag }; @@ -63,6 +64,14 @@ export class NimbleTableColumnIconDirective extends NimbleTableColumnBaseDirecti this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); } + public get widthMode(): TableColumnMappingWidthMode { + return this.elementRef.nativeElement.widthMode; + } + + @Input('width-mode') public set widthMode(value: TableColumnMappingWidthMode) { + this.renderer.setProperty(this.elementRef.nativeElement, 'widthMode', value); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts index e060362d5f..33d352a614 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts @@ -2,7 +2,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 '../nimble-table-column-icon.module'; -import { NimbleTableColumnIconDirective, TableColumnIcon } from '../nimble-table-column-icon.directive'; +import { NimbleTableColumnIconDirective, TableColumnIcon, TableColumnMappingWidthMode } from '../nimble-table-column-icon.directive'; import { TableColumnSortDirection } from '../../nimble-table-column-base.directive'; describe('NimbleTableColumnIcon', () => { @@ -36,6 +36,7 @@ describe('NimbleTableColumnIcon', () => { sort-index="0" group-index="0" grouping-disabled + width-mode="icon-size" > ` @@ -119,6 +120,11 @@ describe('NimbleTableColumnIcon', () => { expect(directive.groupingDisabled).toBeTrue(); expect(nativeElement.groupingDisabled).toBeTrue(); }); + + it('will use template string values for widthMode', () => { + expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + }); }); describe('with property bound values', () => { @@ -139,6 +145,7 @@ describe('NimbleTableColumnIcon', () => { [sort-index]="sortIndex" [group-index]="groupIndex" [grouping-disabled]="groupingDisabled" + [width-mode]="widthMode" > ` @@ -158,6 +165,7 @@ describe('NimbleTableColumnIcon', () => { public sortIndex: number | null = 0; public groupIndex: number | null = 0; public groupingDisabled = false; + public widthMode: TableColumnMappingWidthMode = TableColumnMappingWidthMode.iconSize; } let fixture: ComponentFixture; @@ -350,6 +358,17 @@ describe('NimbleTableColumnIcon', () => { expect(directive.groupingDisabled).toBeTrue(); expect(nativeElement.groupingDisabled).toBeTrue(); }); + + it('can be configured with property binding for widthMode', () => { + expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + + fixture.componentInstance.widthMode = TableColumnMappingWidthMode.default; + fixture.detectChanges(); + + expect(directive.widthMode).toBe(TableColumnMappingWidthMode.default); + expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.default); + }); }); describe('with attribute bound values', () => { @@ -370,6 +389,7 @@ describe('NimbleTableColumnIcon', () => { [attr.sort-index]="sortIndex" [attr.group-index]="groupIndex" [attr.grouping-disabled]="groupingDisabled" + [attr.width-mode]="widthMode" > ` @@ -389,6 +409,7 @@ describe('NimbleTableColumnIcon', () => { public sortIndex: number | null = 0; public groupIndex: number | null = 0; public groupingDisabled = false; + public widthMode: TableColumnMappingWidthMode = TableColumnMappingWidthMode.iconSize; } let fixture: ComponentFixture; @@ -581,5 +602,16 @@ describe('NimbleTableColumnIcon', () => { expect(directive.groupingDisabled).toBe(true); expect(nativeElement.groupingDisabled).toBe(true); }); + + it('can be configured with attribute binding for widthMode', () => { + expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize); + + fixture.componentInstance.widthMode = TableColumnMappingWidthMode.default; + fixture.detectChanges(); + + expect(directive.widthMode).toBeFalsy(); + expect(nativeElement.widthMode).toBeFalsy(); + }); }); }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7e788e3646..4714fea591 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,7 +82,7 @@ }, "angular-workspace/projects/ni/nimble-angular": { "name": "@ni/nimble-angular", - "version": "23.1.11", + "version": "23.2.0", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -32643,7 +32643,7 @@ }, "packages/nimble-blazor/NimbleBlazor": { "name": "@ni/nimble-blazor", - "version": "16.0.10", + "version": "16.1.0", "license": "MIT", "peerDependencies": { "cross-env": "^7.0.3", diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 4d4a388738..830a6e81f5 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -238,18 +238,20 @@ Status - + + Severity="IconSeverity.Success" + TextHidden="true"> + Text="Unknown" + TextHidden="true"> - Result + Number Duration diff --git a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json index 07833bc1c7..0b7e01a9ba 100644 --- a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json +++ b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-blazor", "entries": [ + { + "date": "Thu, 02 May 2024 17:22:44 GMT", + "version": "16.1.0", + "tag": "@ni/nimble-blazor_v16.1.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "7a27f45851b45e29a554e3effc812011108db80d", + "comment": "Add WidthMode to icon column" + } + ] + } + }, { "date": "Wed, 01 May 2024 22:28:21 GMT", "version": "16.0.10", diff --git a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md index 62cfbf9470..af1785bdc5 100644 --- a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md +++ b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-blazor -This log was last generated on Wed, 01 May 2024 22:28:21 GMT and should not be manually modified. +This log was last generated on Thu, 02 May 2024 17:22:44 GMT and should not be manually modified. +## 16.1.0 + +Thu, 02 May 2024 17:22:44 GMT + +### Minor changes + +- Add WidthMode to icon column ([ni/nimble@7a27f45](https://github.com/ni/nimble/commit/7a27f45851b45e29a554e3effc812011108db80d)) + ## 16.0.10 Wed, 01 May 2024 22:28:21 GMT diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor index 241f2aedbb..c70ba9e657 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor @@ -16,6 +16,7 @@ group-index="@GroupIndex" grouping-disabled="@GroupingDisabled" key-type="@GetTKeyAsJSType()" + width-mode="@WidthMode.ToAttributeValue()" @attributes="AdditionalAttributes" > @ChildContent diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs index c273a9594c..951f2d6d2f 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs @@ -15,4 +15,10 @@ public partial class NimbleTableColumnIcon : NimbleTableColumnEnumBase [Parameter] public double? MinPixelWidth { get; set; } + + /// + /// Sets the width mode on the column. + /// + [Parameter] + public MappingColumnWidthMode? WidthMode { get; set; } } diff --git a/packages/nimble-blazor/NimbleBlazor/MappingColumnTypes.cs b/packages/nimble-blazor/NimbleBlazor/MappingColumnTypes.cs new file mode 100644 index 0000000000..f6304ddc6d --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/MappingColumnTypes.cs @@ -0,0 +1,14 @@ +namespace NimbleBlazor; + +public enum MappingColumnWidthMode +{ + Default, + IconSize +} + +internal static class MappingColumnWidthModeExtensions +{ + private static readonly Dictionary _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues(); + + public static string? ToAttributeValue(this MappingColumnWidthMode? value) => (value == null || value == MappingColumnWidthMode.Default) ? null : _enumValues[value.Value]; +} diff --git a/packages/nimble-blazor/NimbleBlazor/package.json b/packages/nimble-blazor/NimbleBlazor/package.json index edcd4df83c..5dccacec8f 100644 --- a/packages/nimble-blazor/NimbleBlazor/package.json +++ b/packages/nimble-blazor/NimbleBlazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-blazor", - "version": "16.0.10", + "version": "16.1.0", "description": "Blazor components for the NI Nimble Design System", "scripts": { "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist", diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs index eb5c5a6205..a52afa4bde 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs @@ -142,6 +142,15 @@ public void NimbleTableColumnIcon_WithFieldNameAttribute_HasMarkup() Assert.Contains(expectedMarkup, column.Markup); } + [Fact] + public void NimbleTableColumnIcon_WithWidthModeAttribute_HasMarkup() + { + var column = RenderWithPropertySet(x => x.WidthMode, MappingColumnWidthMode.IconSize); + + var expectedMarkup = @"width-mode=""icon-size"""; + Assert.Contains(expectedMarkup, column.Markup); + } + private IRenderedComponent> RenderTableEnumColumn() { var context = new TestContext();