Implement Blazor wrapper for number-text column

change/@ni-nimble-blazor-38714948-57a9-421f-b6fd-868f24e571d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add Blazor support for the number-text column",
+  "packageName": "@ni/nimble-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-63d7b3fd-9add-433d-b5a0-feff51843c91.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Import number-text column in all-components.ts",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor

@@ -238,6 +238,7 @@
                     Result
                     Status
                 </NimbleTableColumnIcon>
+                <NimbleTableColumnNumberText FieldName="Number" ColumnId="number-column">Number</NimbleTableColumnNumberText>
                 <NimbleTableColumnText FieldName="LastName" ColumnId="last-name-column" GroupIndex="0">Last Name</NimbleTableColumnText>
 
                 <NimbleMenu slot="action-menu">

packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs

@@ -69,7 +69,8 @@ public void UpdateTableData(int numberOfRows)
                     "Link",
                     i % 2 == 0 ? new DateTime(2023, 8, 16, 3, 56, 11, DateTimeKind.Local) : new DateTime(2022, 3, 7, 20, 28, 41, DateTimeKind.Local),
                     i % 2 == 0 ? 100 : 101,
-                    (i % 2 == 0) ? "success" : "unknown");
+                    (i % 2 == 0) ? "success" : "unknown",
+                    i / 10.0);
             }
             tableData[numberOfRows] = new Person(
                 numberOfRows.ToString(null, null),
@@ -79,6 +80,7 @@ public void UpdateTableData(int numberOfRows)
                 null,
                 null,
                 null,
+                null,
                 null);
 
             TableData = tableData;
@@ -87,7 +89,7 @@ public void UpdateTableData(int numberOfRows)
 
     public class Person
     {
-        public Person(string id, string? firstName, string? lastName, string? href, string? linkLabel, DateTime? date, int? statusCode, string? result)
+        public Person(string id, string? firstName, string? lastName, string? href, string? linkLabel, DateTime? date, int? statusCode, string? result, double? number)
         {
             Id = id;
             FirstName = firstName;
@@ -97,6 +99,7 @@ public Person(string id, string? firstName, string? lastName, string? href, stri
             Date = (ulong?)(date - DateTime.UnixEpoch.ToLocalTime())?.TotalMilliseconds;
             StatusCode = statusCode;
             Result = result;
+            Number = number;
         }
 
         public string Id { get; }
@@ -107,6 +110,7 @@ public Person(string id, string? firstName, string? lastName, string? href, stri
         public ulong? Date { get; }
         public int? StatusCode { get; }
         public string? Result { get; }
+        public double? Number { get; }
     }
 
     public enum DialogResult

packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnNumberText.razor

@@ -0,0 +1,23 @@
+@namespace NimbleBlazor
+@inherits NimbleTableColumn
+
+<nimble-table-column-number-text
+    column-id="@ColumnId"
+    field-name="@FieldName"
+    action-menu-slot="@ActionMenuSlot"
+    action-menu-label="@ActionMenuLabel"
+    column-hidden="@ColumnHidden"
+    fractional-width="@FractionalWidth"
+    min-pixel-width="@MinPixelWidth"
+    sort-direction="@SortDirection.ToAttributeValue()"
+    sort-index="@SortIndex"
+    group-index="@GroupIndex"
+    grouping-disabled="@GroupingDisabled"
+    format="@Format.ToAttributeValue()"
+    alignment="@Alignment.ToAttributeValue()"
+    decimal-digits="@DecimalDigits"
+    @attributes="AdditionalAttributes"
+>
+    @ChildContent
+</nimble-table-column-number-text>
+

packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnNumberText.razor.cs

@@ -0,0 +1,61 @@
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+public partial class NimbleTableColumnNumberText : NimbleTableColumn, IFractionalWidthColumn, IGroupableColumn
+{
+    /// <summary>
+    /// Gets or sets the field in the element representing a row of data in a <see cref="NimbleTable{TData}"/>to display
+    /// </summary>
+    [Parameter]
+    [DisallowNull]
+    public string FieldName { get; set; } = null!;
+
+    /// <summary>
+    /// The fractional/proportional width to use for this column
+    /// </summary>
+    [Parameter]
+    public double FractionalWidth { get; set; } = 1;
+
+    /// <summary>
+    /// The minimum width (in pixels) for this column
+    /// </summary>
+    [Parameter]
+    public double? MinPixelWidth { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Specifies the grouping precedence of the column within the set of all columns participating in grouping.
+    /// Columns are rendered in the grouping tree from lowest group-index as the tree root to highest
+    /// group-index as tree leaves.
+    /// </summary>
+    [Parameter]
+    public int? GroupIndex { get; set; }
+
+    /// <summary>
+    /// Whether or not this column can be used to group rows by
+    /// </summary>
+    [Parameter]
+    public bool? GroupingDisabled { get; set; }
+
+    /// <summary>
+    /// Formatting scheme to use
+    /// </summary>
+    [Parameter]
+    public NumberTextFormat? Format { get; set; }
+
+    /// <summary>
+    /// The alignment of the value with the table cell
+    /// </summary>
+    [Parameter]
+    public NumberTextAlignment? Alignment { get; set; }
+
+    /// <summary>
+    /// The number of digits to display after the decimal place when the column's format is decimal.
+    /// </summary>
+    [Parameter]
+    public int? DecimalDigits { get; set; }
+}

packages/nimble-blazor/NimbleBlazor/NumberTextColumnTypes.cs

@@ -0,0 +1,30 @@
+// Suppressing rule "Identifiers should not contain type names" because "Decimal" is a type identifier
+#pragma warning disable CA1720
+namespace NimbleBlazor;
+
+public enum NumberTextFormat
+{
+    Default,
+    Decimal
+}
+
+internal static class NumberTextFormatExtensions
+{
+    private static readonly Dictionary<NumberTextFormat, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<NumberTextFormat>();
+
+    public static string? ToAttributeValue(this NumberTextFormat? value) => (value == null || value == NumberTextFormat.Default) ? null : _enumValues[value.Value];
+}
+
+public enum NumberTextAlignment
+{
+    Default,
+    Right,
+    Left
+}
+
+internal static class NumberTextAlignmentExtensions
+{
+    private static readonly Dictionary<NumberTextAlignment, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<NumberTextAlignment>();
+
+    public static string? ToAttributeValue(this NumberTextAlignment? value) => (value == null || value == NumberTextAlignment.Default) ? null : _enumValues[value.Value];
+}

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnNumberTextTests.cs

@@ -0,0 +1,86 @@
+using System;
+using System.Linq.Expressions;
+using Bunit;
+using Xunit;
+
+namespace NimbleBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Tests for <see cref="NimbleTableColumnNumberText"/>
+/// </summary>
+public class NimbleTableColumnNumberTextTests
+{
+    [Fact]
+    public void NimbleTableColumnNumberText_SupportsAdditionalAttributes()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var exception = Record.Exception(() => context.RenderComponent<NimbleTableColumnNumberText>(ComponentParameter.CreateParameter("class", "foo")));
+        Assert.Null(exception);
+    }
+
+    [Fact]
+    public void NimbleTableColumnNumberText_WithFieldNameAttribute_HasTableMarkup()
+    {
+        var table = RenderWithPropertySet(x => x.FieldName!, "FirstName");
+
+        var expectedMarkup = @"field-name=""FirstName""";
+        Assert.Contains(expectedMarkup, table.Markup);
+    }
+
+    [Fact]
+    public void NimbleTableColumnNumberText_WithDecimalDigitsAttribute_HasTableMarkup()
+    {
+        var table = RenderWithPropertySet(x => x.DecimalDigits!, 5);
+
+        var expectedMarkup = @"decimal-digits=""5""";
+        Assert.Contains(expectedMarkup, table.Markup);
+    }
+
+    [Theory]
+    [InlineData(NumberTextFormat.Default, "<nimble-table-column-number-text((?!format).)*>")]
+    [InlineData(NumberTextFormat.Decimal, @"format=""decimal""")]
+    public void NimbleTableColumnNumberText_WithFormatAttribute_HasTableMarkup(NumberTextFormat value, string expectedMarkupRegEx)
+    {
+        var table = RenderWithPropertySet(x => x.Format, value);
+        Assert.Matches(expectedMarkupRegEx, table.Markup);
+    }
+
+    [Theory]
+    [InlineData(NumberTextAlignment.Default, @"<nimble-table-column-number-text((?!alignment).)*>")]
+    [InlineData(NumberTextAlignment.Left, @"alignment=""left""")]
+    [InlineData(NumberTextAlignment.Right, @"alignment=""right""")]
+    public void NimbleTableColumnNumberText_WithCustomLocaleMatcherAttribute_HasTableMarkup(NumberTextAlignment value, string expectedMarkupRegEx)
+    {
+        var table = RenderWithPropertySet(x => x.Alignment, value);
+        Assert.Matches(expectedMarkupRegEx, table.Markup);
+    }
+
+    private IRenderedComponent<NimbleTableColumnNumberText> RenderWithPropertySet<TProperty>(Expression<Func<NimbleTableColumnNumberText, TProperty>> propertyGetter, TProperty propertyValue)
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        return context.RenderComponent<NimbleTableColumnNumberText>(p => p.Add(propertyGetter, propertyValue));
+    }
+}
+
+/// <summary>
+/// Tests for NimbleTableColumn API on <see cref="NimbleTableColumnNumberText"/>
+/// </summary>
+public class NimbleTableColumnNumberTextBaseTests : NimbleTableColumnTests<NimbleTableColumnNumberText>
+{
+}
+
+/// <summary>
+/// Tests for FractionalWidthAPI on <see cref="NimbleTableColumnNumberText"/>
+/// </summary>
+public class NimbleTableColumnNumberTextFractionalWidthTests : FractionalWidthBaseTests<NimbleTableColumnNumberText>
+{
+}
+
+/// <summary>
+/// Tests for GroupableAPI on <see cref="NimbleTableColumnNumberText"/>
+/// </summary>
+public class NimbleTableColumnNumberTextGroupableTests : GroupableBaseTests<NimbleTableColumnNumberText>
+{
+}

packages/nimble-components/src/all-components.ts

@@ -44,6 +44,7 @@ import './table';
 import './table-column/anchor';
 import './table-column/date-text';
 import './table-column/enum-text';
+import './table-column/number-text';
 import './table-column/icon';
 import './table-column/text';
 import './tabs';