Add Angular wrappers and tests for ok-components fv directives

change/@ni-ok-angular-4d6dfd1a-0b9b-4e15-b821-bac9233fa617.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add FV Angular wrappers for ok components",
+  "packageName": "@ni/ok-angular",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-ok-components-f79eb8e1-0a6a-42ca-9be6-b282c8a59251.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "component-review skill updates",
+  "packageName": "@ni/ok-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-accordion-item-section.component.ts

@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
     selector: 'example-fv-accordion-item-section',
     template: `
         <example-sub-container label="Fv Accordion Item (Ok)">
-            <ok-fv-accordion-item i18n-header header="Asset details" [expanded]="true">
+            <ok-fv-accordion-item header="Asset details" [expanded]="true">
                 Calibration assets can expose operator-facing status, location, and ownership details.
             </ok-fv-accordion-item>
-            <ok-fv-accordion-item i18n-header header="Maintenance history">
+            <ok-fv-accordion-item header="Maintenance history">
                 This section starts collapsed to show the default interaction state.
             </ok-fv-accordion-item>
         </example-sub-container>

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-card-section',
+    template: `
+        <example-sub-container label="Fv Card (Ok)">
+            <ok-fv-card
+                card-title="Device health"
+                subtitle="Cell A"
+                description="Track operator-facing status, ownership, and pending alerts for a selected asset."
+                initials="DH"
+                interaction-mode="card"
+            >
+                <span slot="badges">Approved</span>
+                <span slot="footer-start">Updated now</span>
+                <span slot="footer-end">4 alerts</span>
+            </ok-fv-card>
+        </example-sub-container>
+    `,
+    styles: [`
+        ok-fv-card { max-width: 300px; }
+    `],
+    standalone: false
+})
+export class FvCardSectionComponent {}

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-chip-selector-section',
+    template: `
+        <example-sub-container label="Fv Chip Selector (Ok)">
+            <ok-fv-chip-selector
+                label="Selected assets"
+                options="PXI-1, PXI-2, DAQ-1, DMM-1"
+                selected-values="PXI-1, DMM-1"
+                placeholder="Select assets"
+            ></ok-fv-chip-selector>
+        </example-sub-container>
+    `,
+    standalone: false
+})
+export class FvChipSelectorSectionComponent {}

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-context-help-section.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-context-help-section',
+    template: `
+        <example-sub-container label="Fv Context Help (Ok)">
+            <div>
+                Support code
+                <ok-fv-context-help
+                    text="Use the value shown on the device label when the field is unavailable."
+                    trigger-label="Show help for the support code"
+                ></ok-fv-context-help>
+            </div>
+        </example-sub-container>
+    `,
+    standalone: false
+})
+export class FvContextHelpSectionComponent {}

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

@@ -4,7 +4,13 @@ import { Component } from '@angular/core';
     selector: 'example-fv-section',
     template: `
         <example-fv-accordion-item-section></example-fv-accordion-item-section>
+        <example-fv-card-section></example-fv-card-section>
+        <example-fv-chip-selector-section></example-fv-chip-selector-section>
+        <example-fv-context-help-section></example-fv-context-help-section>
         <example-fv-search-input-section></example-fv-search-input-section>
+        <example-fv-split-button-section></example-fv-split-button-section>
+        <example-fv-split-button-anchor-section></example-fv-split-button-anchor-section>
+        <example-fv-summary-panel-section></example-fv-summary-panel-section>
     `,
     standalone: false
 })

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-section.module.ts

@@ -1,14 +1,51 @@
 import { NgModule } from '@angular/core';
+import { NimbleMenuItemModule, NimbleMenuModule } from '@ni/nimble-angular';
 import { OkFvAccordionItemModule } from '@ni/ok-angular/fv/accordion-item';
+import { OkFvCardModule } from '@ni/ok-angular/fv/card';
+import { OkFvChipSelectorModule } from '@ni/ok-angular/fv/chip-selector';
+import { OkFvContextHelpModule } from '@ni/ok-angular/fv/context-help';
 import { OkFvSearchInputModule } from '@ni/ok-angular/fv/search-input';
+import { OkFvSplitButtonAnchorModule } from '@ni/ok-angular/fv/split-button-anchor';
+import { OkFvSplitButtonModule } from '@ni/ok-angular/fv/split-button';
+import { OkFvSummaryPanelModule } from '@ni/ok-angular/fv/summary-panel';
+import { OkFvSummaryPanelTileModule } from '@ni/ok-angular/fv/summary-panel-tile';
 import { FvAccordionItemSectionComponent } from './fv-accordion-item-section.component';
+import { FvCardSectionComponent } from './fv-card-section.component';
+import { FvChipSelectorSectionComponent } from './fv-chip-selector-section.component';
+import { FvContextHelpSectionComponent } from './fv-context-help-section.component';
 import { FvSearchInputSectionComponent } from './fv-search-input-section.component';
 import { FvSectionComponent } from './fv-section.component';
+import { FvSplitButtonAnchorSectionComponent } from './fv-split-button-anchor-section.component';
+import { FvSplitButtonSectionComponent } from './fv-split-button-section.component';
+import { FvSummaryPanelSectionComponent } from './fv-summary-panel-section.component';
 import { SubContainerModule } from '../sub-container/sub-container.module';
 
 @NgModule({
-    declarations: [FvSectionComponent, FvAccordionItemSectionComponent, FvSearchInputSectionComponent],
-    imports: [OkFvAccordionItemModule, OkFvSearchInputModule, SubContainerModule],
+    declarations: [
+        FvSectionComponent,
+        FvAccordionItemSectionComponent,
+        FvCardSectionComponent,
+        FvChipSelectorSectionComponent,
+        FvContextHelpSectionComponent,
+        FvSearchInputSectionComponent,
+        FvSplitButtonSectionComponent,
+        FvSplitButtonAnchorSectionComponent,
+        FvSummaryPanelSectionComponent
+    ],
+    imports: [
+        NimbleMenuModule,
+        NimbleMenuItemModule,
+        OkFvAccordionItemModule,
+        OkFvCardModule,
+        OkFvChipSelectorModule,
+        OkFvContextHelpModule,
+        OkFvSearchInputModule,
+        OkFvSplitButtonModule,
+        OkFvSplitButtonAnchorModule,
+        OkFvSummaryPanelModule,
+        OkFvSummaryPanelTileModule,
+        SubContainerModule
+    ],
     exports: [FvSectionComponent]
 })
 export class FvSectionModule { }

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-split-button-anchor-section.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-split-button-anchor-section',
+    template: `
+        <example-sub-container label="Fv Split Button Anchor (Ok)">
+            <ok-fv-split-button-anchor
+                label="Open report"
+                href="https://www.ni.com"
+            >
+                <nimble-menu slot="menu">
+                    <nimble-menu-item>Open item</nimble-menu-item>
+                    <nimble-menu-item>Open details</nimble-menu-item>
+                    <nimble-menu-item>Copy link</nimble-menu-item>
+                </nimble-menu>
+            </ok-fv-split-button-anchor>
+        </example-sub-container>
+    `,
+    standalone: false
+})
+export class FvSplitButtonAnchorSectionComponent {}

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-split-button-section.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-split-button-section',
+    template: `
+        <example-sub-container label="Fv Split Button (Ok)">
+            <ok-fv-split-button label="Run action" appearance-variant="primary">
+                <nimble-menu slot="menu">
+                    <nimble-menu-item>Open item</nimble-menu-item>
+                    <nimble-menu-item>Create copy</nimble-menu-item>
+                    <nimble-menu-item>Archive selection</nimble-menu-item>
+                </nimble-menu>
+            </ok-fv-split-button>
+        </example-sub-container>
+    `,
+    standalone: false
+})
+export class FvSplitButtonSectionComponent {}

packages/angular-workspace/example-client-app/src/app/customapp/fv/fv-summary-panel-section.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'example-fv-summary-panel-section',
+    template: `
+        <example-sub-container label="Fv Summary Panel (Ok)">
+            <ok-fv-summary-panel show-edit-items-button edit-items-button-label="Configure tiles">
+                <ok-fv-summary-panel-tile count="7" label="open items"></ok-fv-summary-panel-tile>
+                <ok-fv-summary-panel-tile count="39" label="pending reviews"></ok-fv-summary-panel-tile>
+                <ok-fv-summary-panel-tile count="5" label="active alerts" selected></ok-fv-summary-panel-tile>
+                <ok-fv-summary-panel-tile count="12" label="saved queries"></ok-fv-summary-panel-tile>
+            </ok-fv-summary-panel>
+        </example-sub-container>
+    `,
+    standalone: false
+})
+export class FvSummaryPanelSectionComponent {}

packages/angular-workspace/ok-angular/fv/card/ng-package.json

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

packages/angular-workspace/ok-angular/fv/card/ok-fv-card.directive.ts

@@ -0,0 +1,86 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import type { FvCard } from '@ni/ok-components/dist/esm/fv/card';
+import { fvCardTag } from '@ni/ok-components/dist/esm/fv/card';
+import { FvCardAppearance, FvCardInteractionMode } from '@ni/ok-components/dist/esm/fv/card/types';
+import { type BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities';
+
+export type { FvCard };
+export { fvCardTag };
+export { FvCardAppearance, FvCardInteractionMode };
+
+/**
+ * Directive to provide Angular integration for the card.
+ */
+@Directive({
+    selector: 'ok-fv-card',
+    standalone: false
+})
+export class OkFvCardDirective {
+    public get title(): string {
+        return this.elementRef.nativeElement.title;
+    }
+
+    @Input('card-title')
+    public set title(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'title', value);
+    }
+
+    public get subtitle(): string {
+        return this.elementRef.nativeElement.subtitle;
+    }
+
+    @Input()
+    public set subtitle(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'subtitle', value);
+    }
+
+    public get description(): string {
+        return this.elementRef.nativeElement.description;
+    }
+
+    @Input()
+    public set description(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'description', value);
+    }
+
+    public get appearance(): FvCardAppearance {
+        return this.elementRef.nativeElement.appearance;
+    }
+
+    @Input()
+    public set appearance(value: FvCardAppearance) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
+    }
+
+    public get interactionMode(): FvCardInteractionMode {
+        return this.elementRef.nativeElement.interactionMode;
+    }
+
+    @Input('interaction-mode')
+    public set interactionMode(value: FvCardInteractionMode) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'interactionMode', value);
+    }
+
+    public get disabled(): boolean {
+        return this.elementRef.nativeElement.disabled;
+    }
+
+    @Input()
+    public set disabled(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+    }
+
+    public get initials(): string {
+        return this.elementRef.nativeElement.initials;
+    }
+
+    @Input()
+    public set initials(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'initials', value);
+    }
+
+    public constructor(
+        private readonly elementRef: ElementRef<FvCard>,
+        private readonly renderer: Renderer2
+    ) {}
+}

packages/angular-workspace/ok-angular/fv/card/ok-fv-card.module.ts

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

packages/angular-workspace/ok-angular/fv/card/public-api.ts

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