# @horizon-msft/afwcw

> @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

Latest version **0.0.51-test.20240306** (published 2024-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @horizon-msft/afwcw
pnpm add @horizon-msft/afwcw
yarn add @horizon-msft/afwcw
bun add @horizon-msft/afwcw
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.51-test.20240306 |
| Published | 2024-03-06 |
| First published | 2023-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 574.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mibaraka@microsoft.com |
| Maintainers | brianbrady_microsoft, halerankin, ryanmerrill, michaelbarakat-msft |
| Keywords | angular, fluentui, web components |

## Links

- npm: https://www.npmjs.com/package/@horizon-msft/afwcw
- npm.io page: https://npm.io/package/@horizon-msft/afwcw

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [@fluentui/web-components](https://npm.io/package/@fluentui/web-components.md) 3.0.0-beta.6
- [@microsoft/fast-foundation](https://npm.io/package/@microsoft/fast-foundation.md) ^3.0.0-alpha.31

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.51-test.20240306 (latest) — 2024-03-06
- 0.1.0-alpha.1 (alpha) — 2023-09-27
- 0.0.50 — 2024-02-06
- 0.0.49 — 2024-01-03
- 0.0.51 — 2023-12-04
- 0.0.47 — 2023-10-13
- 0.0.45 — 2023-09-26
- 0.0.44 — 2023-09-26
- 0.0.42 — 2023-09-26
- 0.0.30 — 2023-07-12
- 0.0.29 — 2023-07-11
- 0.0.27 — 2023-06-20
- 0.0.26 — 2023-06-20
- 0.0.25 — 2023-06-20
- 0.0.24 — 2023-05-26
- … 15 more at https://npm.io/package/@horizon-msft/afwcw/versions

## README

# 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](https://6436de75bd900018550234f5-udrxhqowrn.chromatic.com/)

## 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:

```js
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](https://stackblitz.com/edit/angular-j7hhre?file=src%2Fmain.ts)

## 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](https://developer.microsoft.com/en-us/fluentui#/resources#design-resources)

## Current Components in Library:

1.  Accordion
1.  Anchor Button
1.  Avatar
1.  Badge
1.  Button
1.  Compound Button
1.  Divider
1.  Image
1.  Label
1.  Menu Button
1.  Progress Bar
1.  Radio
1.  Radio Group
1.  Slider
1.  Spinner
1.  Switch
1.  Tabs
1.  Text

---
_Source: https://npm.io/package/@horizon-msft/afwcw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._