Add Angular support for the nimble-card (#1646)

# Pull Request

Add Angular support for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

We want to be able to use the `nimble-card` in Angular applications.

## 👩‍💻 Implementation

- Add and export a new Angular directive and module for the
`nimble-card` component
- Update the component status table to "incubating" for Angular support

## 🧪 Testing

- Added a basic unit test
- Added an example to example-client-app:

![image](https://github.com/ni/nimble/assets/35350751/57827bf5-91dd-4654-98a6-053900aba046)

## ✅ Checklist

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

---------

Co-authored-by: mollykreis <[email protected]>
Co-authored-by: Milan Raj <[email protected]>

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

@@ -10,6 +10,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
  NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
  NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
  NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } 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';
 import { NimbleLabelProviderTableModule } from '@ni/nimble-angular/label-provider/table';
@@ -72,6 +73,7 @@ import { HeaderComponent } from './header/header.component';
  NimbleComboboxModule,
  NimbleMenuButtonModule,
  NimbleTooltipModule,
+ NimbleCardModule,
  NimbleCardButtonModule,
  NimbleDialogModule,
  NimbleRadioGroupModule,

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

@@ -42,6 +42,19 @@
  <nimble-anchor-button nimbleRouterLink="/customapp" appearance="block">Block Anchor Button</nimble-anchor-button>
  <nimble-anchor-button nimbleRouterLink="/customapp" appearance="ghost">Ghost Anchor Button</nimble-anchor-button>
  </div>
+ <div class="sub-container">
+ <div class="container-label">Card</div>
+ <nimble-card>
+ <span slot="title">Title of the card</span>
+ <nimble-number-field>Numeric field 1</nimble-number-field>
+ <nimble-number-field>Numeric field 2</nimble-number-field>
+ <nimble-select>
+ <nimble-list-option value="1">Option 1</nimble-list-option>
+ <nimble-list-option value="2">Option 2</nimble-list-option>
+ <nimble-list-option value="3">Option 3</nimble-list-option>
+ </nimble-select>
+ </nimble-card>
+ </div>
  <div class="sub-container">
  <div class="container-label">Card Button</div>
  <nimble-card-button>

angular-workspace/projects/ni/nimble-angular/card/ng-package.json

@@ -0,0 +1,6 @@
+{
+ "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+}

angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { type Card, cardTag } from '@ni/nimble-components/dist/esm/card';
+
+export type { Card };
+export { cardTag };
+
+/**
+ * Directive to provide Angular integration for the card.
+ */
+@Directive({
+ selector: 'nimble-card'
+})
+export class NimbleCardDirective { }

angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleCardDirective } from './nimble-card.directive';
+
+import '@ni/nimble-components/dist/esm/card';
+
+@NgModule({
+ declarations: [NimbleCardDirective],
+ imports: [CommonModule],
+ exports: [NimbleCardDirective]
+})
+export class NimbleCardModule { }

angular-workspace/projects/ni/nimble-angular/card/public-api.ts

@@ -0,0 +1,2 @@
+export * from './nimble-card.directive';
+export * from './nimble-card.module';

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { NimbleCardModule } from '../nimble-card.module';
+
+describe('Nimble card', () => {
+ describe('module', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [NimbleCardModule]
+ });
+ });
+
+ it('custom element is defined', () => {
+ expect(customElements.get('nimble-card')).not.toBeUndefined();
+ });
+ });
+});

change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json

@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Add Angular support for the nimble-card component",
+ "packageName": "@ni/nimble-angular",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json

@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Workaround for Lighthouse accessibility error in nimble-card. Update Angular status of nimble-card component.",
+ "packageName": "@ni/nimble-components",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

packages/nimble-components/src/card/styles.ts

@@ -28,7 +28,7 @@ export const styles = css`
  display: contents;
  }
 
- ::slotted([slot='title']) {
+ slot[name='title'] {
  font: ${titleFont};
  color: ${titleFontColor};
  }

packages/nimble-components/src/card/template.ts

@@ -2,7 +2,10 @@ import { html } from '@microsoft/fast-element';
 import type { Card } from '.';
 
 export const template = html<Card>`
- <section aria-labelledby="title-slot">
+ ${
+ '' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */
+}
+ <section role="region" aria-labelledby="title-slot">
  <slot name="title" id="title-slot"></slot>
  <slot></slot>
  </section>

packages/nimble-components/src/tests/component-status.stories.ts

@@ -114,7 +114,7 @@ const components = [
  issueHref: 'https://github.com/ni/nimble/issues/296',
  issueLabel: 'Issue',
  componentStatus: ComponentFrameworkStatus.incubating,
- angularStatus: ComponentFrameworkStatus.doesNotExist,
+ angularStatus: ComponentFrameworkStatus.incubating,
  blazorStatus: ComponentFrameworkStatus.incubating
  },
  {