diff --git a/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json b/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json
new file mode 100644
index 0000000000..dd758d3b66
--- /dev/null
+++ b/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "Adding clearable API for Select.",
+ "packageName": "@ni/nimble-angular",
+ "email": "26874831+atmgrifter00@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json b/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json
new file mode 100644
index 0000000000..979d9c6a2c
--- /dev/null
+++ b/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "Adding Clearable API for Select",
+ "packageName": "@ni/nimble-blazor",
+ "email": "26874831+atmgrifter00@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts b/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts
index ef01f25446..73414668d7 100644
--- a/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts
+++ b/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts
@@ -31,6 +31,14 @@ export class NimbleSelectDirective {
this.renderer.setProperty(this.elementRef.nativeElement, 'filterMode', value);
}
+ public get clearable(): boolean {
+ return this.elementRef.nativeElement.clearable;
+ }
+
+ @Input() public set clearable(value: BooleanValueOrAttribute) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'clearable', toBooleanProperty(value));
+ }
+
public get disabled(): boolean {
return this.elementRef.nativeElement.disabled;
}
diff --git a/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts b/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts
index ab439f1d9e..1bc5fc741b 100644
--- a/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts
+++ b/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts
@@ -57,6 +57,11 @@ describe('Nimble select', () => {
expect(nativeElement.filterMode).toBe(FilterMode.none);
});
+ it('has expected defaults for clearable', () => {
+ expect(directive.clearable).toBe(false);
+ expect(nativeElement.clearable).toBe(false);
+ });
+
it('has expected defaults for errorText', () => {
expect(directive.errorText).toBeUndefined();
expect(nativeElement.errorText).toBeUndefined();
@@ -86,6 +91,7 @@ describe('Nimble select', () => {
disabled
appearance="${DropdownAppearance.block}"
filter-mode="${FilterMode.standard}"
+ clearable
error-text="error text"
error-visible
>
@@ -127,6 +133,11 @@ describe('Nimble select', () => {
expect(nativeElement.filterMode).toBe(FilterMode.standard);
});
+ it('will use template string values for clearable', () => {
+ expect(directive.clearable).toBeTrue();
+ expect(nativeElement.clearable).toBeTrue();
+ });
+
it('will use template string values for errorText', () => {
expect(directive.errorText).toBe('error text');
expect(nativeElement.errorText).toBe('error text');
@@ -145,6 +156,7 @@ describe('Nimble select', () => {
[disabled] = "disabled"
[appearance]="appearance"
[filter-mode]="filterMode"
+ [clearable]="clearable"
[error-text]="errorText"
[error-visible]="errorVisible"
>
@@ -157,6 +169,7 @@ describe('Nimble select', () => {
public disabled = false;
public appearance: DropdownAppearance = DropdownAppearance.block;
public filterMode: FilterMode = FilterMode.standard;
+ public clearable = false;
public errorText = 'initial value';
public errorVisible = false;
}
@@ -209,6 +222,17 @@ describe('Nimble select', () => {
expect(nativeElement.filterMode).toBe(FilterMode.none);
});
+ it('can be configured with property binding for clearable', () => {
+ expect(directive.clearable).toBeFalse();
+ expect(nativeElement.clearable).toBeFalse();
+
+ fixture.componentInstance.clearable = true;
+ fixture.detectChanges();
+
+ expect(directive.clearable).toBeTrue();
+ expect(nativeElement.clearable).toBeTrue();
+ });
+
it('can be configured with property binding for errorText', () => {
expect(directive.errorText).toBe('initial value');
expect(nativeElement.errorText).toBe('initial value');
@@ -239,6 +263,7 @@ describe('Nimble select', () => {
[attr.disabled]="disabled"
[attr.appearance]="appearance"
[attr.filter-mode]="filterMode"
+ [attr.clearable]="clearable"
[attr.error-text]="errorText"
[attr.error-visible]="errorVisible"
>
@@ -251,6 +276,7 @@ describe('Nimble select', () => {
public disabled: BooleanValueOrAttribute = null;
public appearance: DropdownAppearance = DropdownAppearance.block;
public filterMode: FilterMode;
+ public clearable: BooleanValueOrAttribute = null;
public errorText = 'initial value';
public errorVisible: BooleanValueOrAttribute = null;
}
@@ -303,6 +329,17 @@ describe('Nimble select', () => {
expect(nativeElement.filterMode).toBe(FilterMode.standard);
});
+ it('can be configured with attribute binding for clearable', () => {
+ expect(directive.clearable).toBeFalse();
+ expect(nativeElement.clearable).toBeFalse();
+
+ fixture.componentInstance.clearable = '';
+ fixture.detectChanges();
+
+ expect(directive.clearable).toBeTrue();
+ expect(nativeElement.clearable).toBeTrue();
+ });
+
it('can be configured with attribute binding for errorText', () => {
expect(directive.errorText).toBe('initial value');
expect(nativeElement.errorText).toBe('initial value');
diff --git a/packages/blazor-workspace/CodeAnalysisDictionary.xml b/packages/blazor-workspace/CodeAnalysisDictionary.xml
index 4a88b4c9ae..627b77da6a 100644
--- a/packages/blazor-workspace/CodeAnalysisDictionary.xml
+++ b/packages/blazor-workspace/CodeAnalysisDictionary.xml
@@ -5,7 +5,8 @@