feat(chip): add selection mode and toggle behavior

change/@ni-nimble-components-83f228b7-a387-4f1a-9bfe-2527beb62054.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds support for selectable nimble-chip behavior and selected state.",
+  "packageName": "@ni/nimble-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/example-client-app/src/app/customapp/chip-section.component.ts

@@ -7,13 +7,22 @@ import { Component } from '@angular/core';
         <example-sub-container label="Chip">
             <nimble-chip>Outline Chip</nimble-chip>
             <nimble-chip appearance="block">Block Chip</nimble-chip>
+            <nimble-chip selectable [selected]="chipSelected" (selected-change)="onChipSelectedChange()">
+                Selectable Chip
+            </nimble-chip>
             <nimble-chip removable (remove)="onChipRemove()">Removable Chip</nimble-chip>
             <nimble-chip disabled>Disabled Chip</nimble-chip>
         </example-sub-container>
     `,
     standalone: false
 })
 export class ChipSectionComponent {
+    public chipSelected = false;
+
+    public onChipSelectedChange(): void {
+        this.chipSelected = !this.chipSelected;
+    }
+
     public onChipRemove(): void {
         alert('Chip removed');
     }

packages/angular-workspace/nimble-angular/chip/nimble-chip.directive.ts

@@ -31,6 +31,22 @@ export class NimbleChipDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
     }
 
+    public get selectable(): boolean {
+        return this.elementRef.nativeElement.selectable;
+    }
+
+    @Input() public set selectable(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'selectable', toBooleanProperty(value));
+    }
+
+    public get selected(): boolean {
+        return this.elementRef.nativeElement.selected;
+    }
+
+    @Input() public set selected(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'selected', toBooleanProperty(value));
+    }
+
     public get appearance(): ChipAppearance {
         return this.elementRef.nativeElement.appearance;
     }

packages/angular-workspace/nimble-angular/chip/tests/nimble-chip.directive.spec.ts

@@ -54,6 +54,16 @@ describe('Nimble chip', () => {
             expect(nativeElement.disabled).toBeFalse();
         });
 
+        it('has expected defaults for selectable', () => {
+            expect(directive.selectable).toBeFalse();
+            expect(nativeElement.selectable).toBeFalse();
+        });
+
+        it('has expected defaults for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+        });
+
         it('has expected defaults for appearance', () => {
             expect(directive.appearance).toBe(ChipAppearance.outline);
             expect(nativeElement.appearance).toBe(ChipAppearance.outline);
@@ -66,6 +76,8 @@ describe('Nimble chip', () => {
                 <nimble-chip #chip
                     removable
                     disabled
+                    selectable
+                    selected
                     appearance="block">
                 </nimble-chip>`,
             standalone: false
@@ -100,6 +112,16 @@ describe('Nimble chip', () => {
             expect(nativeElement.disabled).toBeTrue();
         });
 
+        it('will use template string values for selectable', () => {
+            expect(directive.selectable).toBeTrue();
+            expect(nativeElement.selectable).toBeTrue();
+        });
+
+        it('will use template string values for selected', () => {
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
         it('will use template string values for appearance', () => {
             expect(directive.appearance).toBe(ChipAppearance.block);
             expect(nativeElement.appearance).toBe(ChipAppearance.block);
@@ -112,6 +134,8 @@ describe('Nimble chip', () => {
                 <nimble-chip #chip
                     [removable]="removable"
                     [disabled]="disabled"
+                    [selectable]="selectable"
+                    [selected]="selected"
                     [appearance]="appearance">
                 </nimble-chip>
             `,
@@ -122,6 +146,8 @@ describe('Nimble chip', () => {
             @ViewChild('chip', { read: ElementRef }) public elementRef: ElementRef<Chip>;
             public removable = false;
             public disabled = false;
+            public selectable = false;
+            public selected = false;
             public appearance: ChipAppearance = ChipAppearance.outline;
         }
 
@@ -162,6 +188,28 @@ describe('Nimble chip', () => {
             expect(nativeElement.disabled).toBeTrue();
         });
 
+        it('can be configured with property binding for selectable', () => {
+            expect(directive.selectable).toBeFalse();
+            expect(nativeElement.selectable).toBeFalse();
+
+            fixture.componentInstance.selectable = true;
+            fixture.detectChanges();
+
+            expect(directive.selectable).toBeTrue();
+            expect(nativeElement.selectable).toBeTrue();
+        });
+
+        it('can be configured with property binding for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+
+            fixture.componentInstance.selected = true;
+            fixture.detectChanges();
+
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
         it('can be configured with property binding for appearance', () => {
             expect(directive.appearance).toBe(ChipAppearance.outline);
             expect(nativeElement.appearance).toBe(ChipAppearance.outline);
@@ -180,6 +228,8 @@ describe('Nimble chip', () => {
                 <nimble-chip #chip
                     [attr.removable]="removable"
                     [attr.disabled]="disabled"
+                    [attr.selectable]="selectable"
+                    [attr.selected]="selected"
                     [attr.appearance]="appearance">
                 </nimble-chip>
             `,
@@ -190,6 +240,8 @@ describe('Nimble chip', () => {
             @ViewChild('chip', { read: ElementRef }) public elementRef: ElementRef<Chip>;
             public removable: BooleanValueOrAttribute = null;
             public disabled: BooleanValueOrAttribute = null;
+            public selectable: BooleanValueOrAttribute = null;
+            public selected: BooleanValueOrAttribute = null;
             public appearance: ChipAppearance = ChipAppearance.outline;
         }
 
@@ -230,6 +282,28 @@ describe('Nimble chip', () => {
             expect(nativeElement.disabled).toBeTrue();
         });
 
+        it('can be configured with attribute binding for selectable', () => {
+            expect(directive.selectable).toBeFalse();
+            expect(nativeElement.selectable).toBeFalse();
+
+            fixture.componentInstance.selectable = '';
+            fixture.detectChanges();
+
+            expect(directive.selectable).toBeTrue();
+            expect(nativeElement.selectable).toBeTrue();
+        });
+
+        it('can be configured with attribute binding for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+
+            fixture.componentInstance.selected = '';
+            fixture.detectChanges();
+
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
         it('can be configured with attribute binding for appearance', () => {
             expect(directive.appearance).toBe(ChipAppearance.outline);
             expect(nativeElement.appearance).toBe(ChipAppearance.outline);

packages/blazor-workspace/CodeAnalysisDictionary.xml

@@ -22,6 +22,7 @@
             <Word>programmatically</Word>
             <Word>runtime</Word>
             <Word>rtl</Word>
+            <Word>selectable</Word>
             <Word>sortable</Word>
             <Word>spright</Word>
             <Word>tooltip</Word>

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/ChipSection.razor

@@ -4,6 +4,7 @@
     <SubContainer Label="Chip">
         <NimbleChip>Outline Chip</NimbleChip>
         <NimbleChip Appearance="ChipAppearance.Block">Block Chip</NimbleChip>
+        <NimbleChip Selectable="true" @bind-Selected="_chipSelected">Selectable Chip</NimbleChip>
         <NimbleChip Removable="true" ChipRemoved="OnChipRemoveAsync">Removable Chip</NimbleChip>
         <NimbleChip Disabled="true">Disabled Chip</NimbleChip>
     </SubContainer>

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/ChipSection.razor.cs

@@ -5,6 +5,8 @@ namespace Demo.Shared.Pages.Sections;
 
 public partial class ChipSection
 {
+    private bool _chipSelected;
+
     [Inject]
     private IJSRuntime? JSRuntime { get; set; }
 

packages/blazor-workspace/NimbleBlazor/Source/Chip/NimbleChip.razor

@@ -1,8 +1,11 @@
 @namespace NimbleBlazor
 <nimble-chip
+    selectable="@Selectable"
+    selected="@Selected"
     removable="@Removable"
     disabled="@Disabled"
     @onnimblechipremove="HandleRemove"
+    @onnimblechipselectedchange="HandleSelectedChange"
     appearance="@Appearance.ToAttributeValue()"
     @attributes="AdditionalAttributes">
     @ChildContent

packages/blazor-workspace/NimbleBlazor/Source/Chip/NimbleChip.razor.cs

@@ -4,6 +4,12 @@ namespace NimbleBlazor;
 
 public partial class NimbleChip : ComponentBase
 {
+    [Parameter]
+    public bool? Selectable { get; set; }
+
+    [Parameter]
+    public bool? Selected { get; set; }
+
     [Parameter]
     public bool? Removable { get; set; }
 
@@ -22,6 +28,12 @@ public partial class NimbleChip : ComponentBase
     [Parameter]
     public EventCallback ChipRemoved { get; set; }
 
+    /// <summary>
+    /// Gets or sets a callback that's invoked when the chip selected state changes.
+    /// </summary>
+    [Parameter]
+    public EventCallback<bool> SelectedChanged { get; set; }
+
     /// <summary>
     /// Called when the chip remove button is activated.
     /// </summary>
@@ -30,6 +42,15 @@ protected async void HandleRemove()
         await ChipRemoved.InvokeAsync();
     }
 
+    /// <summary>
+    /// Called when the chip selected state changes.
+    /// </summary>
+    protected async void HandleSelectedChange()
+    {
+        Selected = !Selected.GetValueOrDefault();
+        await SelectedChanged.InvokeAsync(Selected.Value);
+    }
+
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
 }

packages/blazor-workspace/NimbleBlazor/Source/Patterns/EventHandlers.cs

@@ -82,6 +82,7 @@ public class WaferMapHoverDieChangedEventArgs : EventArgs
 [EventHandler("onnimbletabsactiveidchange", typeof(TabsChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onnimblecheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onnimblechipremove", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: false)]
+[EventHandler("onnimblechipselectedchange", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: false)]
 [EventHandler("onnimblemenubuttontoggle", typeof(MenuButtonToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
 [EventHandler("onnimblemenubuttonbeforetoggle", typeof(MenuButtonToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
 [EventHandler("onnimblebannertoggle", typeof(BannerToggleEventArgs), enableStopPropagation: true, enablePreventDefault: true)]