Angular Web Component Wrappers for Fluent UI web components

@Horizon-msft/afwcw is a collection of wrappers around Fluent UI web components v3. What is a web component wrapper? Each wrapper is a very light weight angular component that takes as its template the web component of the same name. The angular component consists of the same inputs as the web component in its template and passes all its inputs to the html attributes of the web component. In addition to passing the inputs, the ComponentModules will also register the web component with the browser customElements so it can be loaded in the angular application with just a single import and no further configuration.

Usage

To use import the wrapper module into the root of your angular application:

// main.ts

import { BadgeWrapperModule } from '@horizon-msft/afwcw';

@Component({
  selector: 'my-app',
  imports: [CommonModule, BadgeWrapperModule],
  ...
})
export class App {
  ...
}

In your application template:

<fluent-badge
  appearance="solid"
  color="warning"
  shape="rounded"
  size="medium"
>
  badge name
</fluent-badge>

All modules are named accordingly: NameOfComponentWrapperModule

For specific guidance on usage see storybook implementations here

Applying styles using the fluent theme methods

Also available from Angular Fluent Web Component Wrappers are the methods required for enabling styles and themes. In the root of your application styling can be enabled like this:

import { DesignToken, fabricLightTheme, setTheme } from "@horizon-msft/afwcw";

DesignToken.registerDefaultStyleTarget();

setTheme(fabricLightTheme);

// or use the base fluent theme
// setTheme(webLightTheme);

Here is a Stackblitz component implementation - Stackblitz

Some notes on styling

All the controls styles are connected to css variables with a naming convention that maps to the Fluent UI design token language. For guidance on this naming please refer to the Fluent UI design guidelines for web. Fluent UI design guidelines

Current Components in Library:

1. Accordion
2. Anchor Button
3. Avatar
4. Badge
5. Button
6. Compound Button
7. Divider
8. Image
9. Label
10. Menu Button
11. Progress Bar
12. Radio
13. Radio Group
14. Slider
15. Spinner
16. Switch
17. Tabs
18. Text