Add Angular support for the nimble-card

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

@@ -7,7 +7,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
     NimbleTabModule, NimbleTabPanelModule, NimbleTabsModule, NimbleTabsToolbarModule, NimbleMenuModule,
     NimbleMenuItemModule, NimbleCheckboxModule, NimbleToggleButtonModule, NimbleBreadcrumbModule, NimbleBreadcrumbItemModule,
     NimbleIconAddModule, NimbleSwitchModule, NimbleToolbarModule, NimbleMenuButtonModule, NimbleComboboxModule, NimbleTooltipModule,
-    NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
+    NimbleCardModule, NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
     NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
     NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular';
 import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core';
@@ -72,6 +72,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/src/directives/card/nimble-card.directive.ts

@@ -0,0 +1,14 @@
+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/src/directives/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/src/directives/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();
+        });
+    });
+});

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

@@ -34,6 +34,8 @@ export * from './directives/breadcrumb-item/nimble-breadcrumb-item.directive';
 export * from './directives/breadcrumb-item/nimble-breadcrumb-item.module';
 export * from './directives/button/nimble-button.directive';
 export * from './directives/button/nimble-button.module';
+export * from './directives/card/nimble-card.directive';
+export * from './directives/card/nimble-card.module';
 export * from './directives/card-button/nimble-card-button.directive';
 export * from './directives/card-button/nimble-card-button.module';
 export * from './directives/checkbox/nimble-checkbox-control-value-accessor.directive';

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": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add Angular support for the nimble-card component",
+  "packageName": "@ni/nimble-components",
+  "email": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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.doesNotExist
     },
     {