@viasat/beam-web-components-angular 2.17.0

package/README.md

@@ -0,0 +1,304 @@
+# 🅰️ Beam Web Components Angular
+
+Angular wrapper components for the Beam Design System web components. These wrappers provide type-safe Angular bindings with signal-based inputs/outputs, `OnPush` change detection, and full support for content projection.
+
+<br />
+
+## 🔖 Table of Contents
+
+1. [✨ Features](#features)
+2. [💻 Installation](#installation)
+3. [🚀 Quick Start](#quick-start)
+4. [🛠️ Usage](#usage)
+5. [🌳 Tree-Shaking & Optimization](#tree-shaking--optimization)
+6. [🔧 Troubleshooting](#troubleshooting)
+7. [📚 Documentation](#documentation)
+8. [🤝 Contributing](#contributing)
+9. [📄 License](#license)
+
+## Features
+
+- **Type Safety** - Full TypeScript support with properly typed signal inputs and outputs
+- **Signal-Based API** - Built with Angular's modern `input()` and `output()` signal APIs
+- **OnPush Compatible** - All components use `ChangeDetectionStrategy.OnPush` for optimal performance
+- **Standalone Components** - Modern Angular standalone components, no `NgModule` required
+- **Tree-Shakable** - Secondary entry points ensure you only bundle what you use
+- **Content Projection** - Seamless slot-to-`<ng-content>` mapping for flexible composition
+- **Boolean Attribute Handling** - Automatic `booleanAttribute` transforms for boolean props
+- **Angular 17+** - Built for modern Angular applications
+
+## Installation
+
+```bash
+npm install @viasat/beam-web-components-angular
+```
+
+```bash
+yarn add @viasat/beam-web-components-angular
+```
+
+```bash
+pnpm add @viasat/beam-web-components-angular
+```
+
+> 💡 **Note**: This package requires `@angular/core` >= 17.3.0, `@viasat/beam-web-components`, `@viasat/beam-shared`, and `@floating-ui/dom` as peer dependencies.
+
+## Quick Start
+
+### 1. Import Required Styles
+
+Import the base tokens and fonts at the root of your application:
+
+```typescript
+// styles.scss or main.ts
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-fonts/styles.css';
+```
+
+### 2. Use Components
+
+```typescript
+import { Component } from '@angular/core';
+import { AlertComponent } from '@viasat/beam-web-components-angular/alert';
+
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  imports: [AlertComponent],
+  template: `
+    <bm-ng-alert
+      heading="Welcome!"
+      body="This is a Beam alert in Angular."
+      appearance="positive"
+      [dismissible]="true"
+      (bmDismiss)="onDismiss($event)"
+    />
+  `,
+})
+export class MyComponent {
+  onDismiss(event: CustomEvent): void {
+    console.log('Alert dismissed');
+  }
+}
+```
+
+> 💡 **Note**: Components are imported from **secondary entry points** (e.g. `@viasat/beam-web-components-angular/alert`), not from the package root. This enables optimal tree-shaking.
+
+## Usage
+
+### Importing Components
+
+Each component is available from its own secondary entry point:
+
+```typescript
+// ✅ Import from secondary entry points
+import { AlertComponent } from '@viasat/beam-web-components-angular/alert';
+import { ButtonComponent } from '@viasat/beam-web-components-angular/button';
+import { AccordionComponent } from '@viasat/beam-web-components-angular/accordion';
+```
+
+### Property Binding
+
+Properties use Angular's signal-based `input()` API. Bind to them like any Angular input:
+
+```typescript
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@viasat/beam-web-components-angular/button';
+
+@Component({
+  selector: 'app-button-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: `
+    <bm-ng-button appearance="primary" size="lg" [disabled]="isDisabled">
+      Click me
+    </bm-ng-button>
+  `,
+})
+export class ButtonDemoComponent {
+  isDisabled = false;
+}
+```
+
+### Event Binding
+
+Events are exposed as Angular `output()` signals. All custom events are prefixed with `bm`:
+
+```typescript
+import { Component } from '@angular/core';
+import { AlertComponent } from '@viasat/beam-web-components-angular/alert';
+
+@Component({
+  selector: 'app-alert-demo',
+  standalone: true,
+  imports: [AlertComponent],
+  template: `
+    <bm-ng-alert
+      heading="Dismissible Alert"
+      appearance="warning"
+      [dismissible]="true"
+      (bmDismiss)="onDismiss($event)"
+    >
+      This alert can be dismissed.
+    </bm-ng-alert>
+  `,
+})
+export class AlertDemoComponent {
+  onDismiss(event: CustomEvent): void {
+    console.log('Alert dismissed', event);
+  }
+}
+```
+
+### Boolean Attributes
+
+Boolean properties automatically use Angular's `booleanAttribute` transform, so you can set them as HTML attributes or bind them:
+
+```html
+<!-- As an attribute (sets to true) -->
+<bm-ng-alert dismissible heading="Alert" />
+
+<!-- As a binding -->
+<bm-ng-alert [dismissible]="isDismissible" heading="Alert" />
+```
+
+### Using Slots
+
+Web component slots work seamlessly with Angular content projection:
+
+```typescript
+@Component({
+  template: `
+    <bm-ng-alert appearance="infoPrimary" [dismissible]="true">
+      <span slot="heading">Custom Heading</span>
+      <span slot="actions">
+        <button>Take Action</button>
+      </span>
+    </bm-ng-alert>
+  `,
+})
+```
+
+### Composing Components
+
+```typescript
+import { Component } from '@angular/core';
+import { AccordionGroupComponent } from '@viasat/beam-web-components-angular/accordion-group';
+import { AccordionComponent } from '@viasat/beam-web-components-angular/accordion';
+
+@Component({
+  selector: 'app-accordion-demo',
+  standalone: true,
+  imports: [AccordionGroupComponent, AccordionComponent],
+  template: `
+    <bm-ng-accordion-group [singleExpand]="true">
+      <bm-ng-accordion heading="Section 1" [defaultOpen]="true">
+        Content for section 1
+      </bm-ng-accordion>
+      <bm-ng-accordion heading="Section 2">
+        Content for section 2
+      </bm-ng-accordion>
+    </bm-ng-accordion-group>
+  `,
+})
+export class AccordionDemoComponent {}
+```
+
+## Tree-Shaking & Optimization
+
+### How It Works
+
+Each component is published as a **secondary entry point** via `ng-packagr`. This means Angular's build system only includes the components you actually import, unused components are completely excluded from your bundle.
+
+- **Secondary Entry Points** - Each component has its own `ng-package.json`, enabling per-component bundling
+- **Side-Effect Imports** - Only the underlying web component JS for imported wrappers is included
+- **Zero Config** - Angular CLI, Webpack, and esbuild all respect entry point boundaries automatically
+
+```typescript
+// ✅ Recommended: Import from secondary entry points
+import { AlertComponent } from '@viasat/beam-web-components-angular/alert';
+import { ButtonComponent } from '@viasat/beam-web-components-angular/button';
+```
+
+> ⚠️ **Note**: The primary entry point (`@viasat/beam-web-components-angular`) does not re-export components. Always import from secondary entry points.
+
+## Troubleshooting
+
+### Components not rendering
+
+Make sure you've imported the required base styles at the root of your application:
+
+```typescript
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-fonts/styles.css';
+```
+
+### `'bm-ng-*' is not a known element`
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to your component's `schemas` if you're using the raw web components alongside the wrappers. The wrapper components already include this schema, this error typically means you're referencing a web component tag that doesn't have a corresponding wrapper import.
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+
+@Component({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  // ...
+})
+```
+
+### Boolean attributes not working as expected
+
+Boolean props use Angular's `booleanAttribute` transform. Pass `true`/`false` via binding, or use the attribute name without a value to set it to `true`:
+
+```html
+<!-- These are equivalent -->
+<bm-ng-alert [dismissible]="true" />
+<bm-ng-alert dismissible />
+```
+
+If you encounter a bug, please file an issue in the Beam Design System issue tracker with your Angular version, package version, and steps to reproduce.
+
+## Documentation
+
+### Storybook
+
+Explore component examples and API documentation:
+
+**📖 [Beam Web Components Storybook](https://web-components.beam.viasat.com/)**
+
+The [Angular Guide](https://web-components.beam.viasat.com/?path=/docs/concepts-angular--docs) provides comprehensive documentation on:
+
+- Using pre-built Angular wrappers
+- Direct web component usage in Angular
+- Creating custom wrappers
+- Best practices and patterns
+
+### Additional Resources
+
+- **Web Components** - [@viasat/beam-web-components](https://www.npmjs.com/package/@viasat/beam-web-components)
+- **Design Tokens** - [@viasat/beam-tokens](https://www.npmjs.com/package/@viasat/beam-tokens)
+- **Icon Library** - [@viasat/beam-icons](https://www.npmjs.com/package/@viasat/beam-icons)
+- **Typography** - [@viasat/beam-fonts](https://www.npmjs.com/package/@viasat/beam-fonts)
+
+## Contributing
+
+This package is part of the Beam Design System monorepo. For contribution guidelines, please refer to the main repository documentation.
+
+### Regenerating Wrappers
+
+The Angular wrappers are auto-generated from the web components' Custom Elements Manifest. To regenerate after web component changes:
+
+```bash
+npx nx run web-components-angular:generate
+```
+
+### Adding New Components
+
+1. Ensure the web component has `customElement: true` in its Custom Elements Manifest
+2. Verify the component is **not** in the `EXCLUDE_COMPONENTS` list in `scripts/config.ts`
+3. Run the generator: `npx nx run web-components-angular:generate`
+4. Review the generated files in `src/lib/<component-name>/`
+
+## License
+
+MIT © Viasat

package/fesm2022/viasat-beam-web-components-angular-src-lib-accordion-group.mjs

@@ -0,0 +1,41 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@viasat/beam-web-components/Accordion';
+
+/**
+ * AUTO-GENERATED - DO NOT EDIT MANUALLY
+ *
+ * Angular wrapper for <bm-accordion-group>
+ * Generated from: libs/web-components/src/lib/Accordion/AccordionGroup.ts
+ *
+ * Re-generate: npx nx run web-components-angular:generate
+ *
+ * @slot default - Specify which Accordions are in the AccordionGroup
+ */
+class AccordionGroupComponent {
+    /**
+     * Specify the size of the AccordionGroup
+     * @default 'md'
+     */
+    size = input('md');
+    /**
+     * Specify if only one row item can be expanded at a time
+     * @default false
+     */
+    singleExpand = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: AccordionGroupComponent, isStandalone: true, selector: "bm-ng-accordion-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<bm-accordion-group\n  [size]=\"size()\"\n  [attr.singleExpand]=\"singleExpand() ? '' : null\"\n>\n  <ng-content></ng-content>\n</bm-accordion-group>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AccordionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bm-ng-accordion-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<bm-accordion-group\n  [size]=\"size()\"\n  [attr.singleExpand]=\"singleExpand() ? '' : null\"\n>\n  <ng-content></ng-content>\n</bm-accordion-group>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+// AUTO-GENERATED
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionGroupComponent };
+//# sourceMappingURL=viasat-beam-web-components-angular-src-lib-accordion-group.mjs.map

package/fesm2022/viasat-beam-web-components-angular-src-lib-accordion-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"viasat-beam-web-components-angular-src-lib-accordion-group.mjs","sources":["../../../../libs/web-components-angular/src/lib/accordion-group/accordion-group.component.ts","../../../../libs/web-components-angular/src/lib/accordion-group/accordion-group.component.html","../../../../libs/web-components-angular/src/lib/accordion-group/index.ts","../../../../libs/web-components-angular/src/lib/accordion-group/viasat-beam-web-components-angular-src-lib-accordion-group.ts"],"sourcesContent":["/**\n * AUTO-GENERATED - DO NOT EDIT MANUALLY\n *\n * Angular wrapper for <bm-accordion-group>\n * Generated from: libs/web-components/src/lib/Accordion/AccordionGroup.ts\n *\n * Re-generate: npx nx run web-components-angular:generate\n * \n * @slot default - Specify which Accordions are in the AccordionGroup\n */\n\nimport {\n  CUSTOM_ELEMENTS_SCHEMA,\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  input,\n} from '@angular/core';\n\nimport '@viasat/beam-web-components/Accordion';\n\n@Component({\n  selector: 'bm-ng-accordion-group',\n  standalone: true,\n  templateUrl: './accordion-group.component.html',\n  styleUrl: './accordion-group.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AccordionGroupComponent {\n  /**\n   * Specify the size of the AccordionGroup\n   * @default 'md'\n   */\n  size = input<'sm' | 'md' | 'lg'>('md');\n\n  /**\n   * Specify if only one row item can be expanded at a time\n   * @default false\n   */\n  singleExpand = input(false, { transform: booleanAttribute });\n\n\n}\n","<bm-accordion-group\n  [size]=\"size()\"\n  [attr.singleExpand]=\"singleExpand() ? '' : null\"\n>\n  <ng-content></ng-content>\n</bm-accordion-group>\n","// AUTO-GENERATED\nexport * from './accordion-group.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;AASG;MAoBU,uBAAuB,CAAA;AAClC;;;AAGG;AACH,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,CAAC;AAEtC;;;AAGG;IACH,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wGAXjD,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,+VC7BpC,yJAMA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDuBa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,yJAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AE3BnC;;ACAA;;AAEG;;;;"}

package/fesm2022/viasat-beam-web-components-angular-src-lib-accordion.mjs

@@ -0,0 +1,64 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@viasat/beam-web-components/Accordion';
+
+/**
+ * AUTO-GENERATED - DO NOT EDIT MANUALLY
+ *
+ * Angular wrapper for <bm-accordion>
+ * Generated from: libs/web-components/src/lib/Accordion/Accordion.ts
+ *
+ * Re-generate: npx nx run web-components-angular:generate
+ *
+ * @slot default - Specify body content for the Accordion
+ * @slot icon - Display an icon before the Accordion heading
+ * @slot heading - Specify heading content for the Accordion
+ */
+class AccordionComponent {
+    /**
+     * Specify size of an Accordion
+     * @default 'md'
+     */
+    size = input('md');
+    /**
+     * Specify heading content for the Accordion
+     */
+    heading = input();
+    /**
+     * Specify if an Accordion is open.
+  If this is specified, the component becomes controlled
+     * @default false
+     */
+    open = input(false, { transform: booleanAttribute });
+    /**
+     * Specify if an Accordion is open by default
+     * @default false
+     */
+    defaultOpen = input(false, { transform: booleanAttribute });
+    /**
+     * Unique identifier of Accordion
+     */
+    id = input();
+    /**
+     * Dispatched when the Accordion is toggled
+     */
+    bmToggle = output();
+    onBmToggle(event) {
+        this.bmToggle.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: AccordionComponent, isStandalone: true, selector: "bm-ng-accordion", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bmToggle: "bmToggle" }, ngImport: i0, template: "<bm-accordion\n  [size]=\"size()\"\n  [heading]=\"heading()\"\n  [attr.open]=\"open() ? '' : null\"\n  [attr.defaultOpen]=\"defaultOpen() ? '' : null\"\n  [id]=\"id()\"\n  (bm-toggle)=\"onBmToggle($event)\"\n>\n  <ng-content></ng-content>\n</bm-accordion>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bm-ng-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<bm-accordion\n  [size]=\"size()\"\n  [heading]=\"heading()\"\n  [attr.open]=\"open() ? '' : null\"\n  [attr.defaultOpen]=\"defaultOpen() ? '' : null\"\n  [id]=\"id()\"\n  (bm-toggle)=\"onBmToggle($event)\"\n>\n  <ng-content></ng-content>\n</bm-accordion>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+// AUTO-GENERATED
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent };
+//# sourceMappingURL=viasat-beam-web-components-angular-src-lib-accordion.mjs.map

package/fesm2022/viasat-beam-web-components-angular-src-lib-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"viasat-beam-web-components-angular-src-lib-accordion.mjs","sources":["../../../../libs/web-components-angular/src/lib/accordion/accordion.component.ts","../../../../libs/web-components-angular/src/lib/accordion/accordion.component.html","../../../../libs/web-components-angular/src/lib/accordion/index.ts","../../../../libs/web-components-angular/src/lib/accordion/viasat-beam-web-components-angular-src-lib-accordion.ts"],"sourcesContent":["/**\n * AUTO-GENERATED - DO NOT EDIT MANUALLY\n *\n * Angular wrapper for <bm-accordion>\n * Generated from: libs/web-components/src/lib/Accordion/Accordion.ts\n *\n * Re-generate: npx nx run web-components-angular:generate\n * \n * @slot default - Specify body content for the Accordion\n * @slot icon - Display an icon before the Accordion heading\n * @slot heading - Specify heading content for the Accordion\n */\n\nimport {\n  CUSTOM_ELEMENTS_SCHEMA,\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  input,\n  output,\n} from '@angular/core';\n\nimport '@viasat/beam-web-components/Accordion';\n\n@Component({\n  selector: 'bm-ng-accordion',\n  standalone: true,\n  templateUrl: './accordion.component.html',\n  styleUrl: './accordion.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AccordionComponent {\n  /**\n   * Specify size of an Accordion\n   * @default 'md'\n   */\n  size = input<'sm' | 'md' | 'lg' | undefined>('md');\n\n  /**\n   * Specify heading content for the Accordion\n   */\n  heading = input<string>();\n\n  /**\n   * Specify if an Accordion is open.\nIf this is specified, the component becomes controlled\n   * @default false\n   */\n  open = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specify if an Accordion is open by default\n   * @default false\n   */\n  defaultOpen = input(false, { transform: booleanAttribute });\n\n  /**\n   * Unique identifier of Accordion\n   */\n  id = input<string>();\n\n  /**\n   * Dispatched when the Accordion is toggled\n   */\n  bmToggle = output<CustomEvent>();\n\n  onBmToggle(event: CustomEvent): void {\n    this.bmToggle.emit(event);\n  }\n}\n","<bm-accordion\n  [size]=\"size()\"\n  [heading]=\"heading()\"\n  [attr.open]=\"open() ? '' : null\"\n  [attr.defaultOpen]=\"defaultOpen() ? '' : null\"\n  [id]=\"id()\"\n  (bm-toggle)=\"onBmToggle($event)\"\n>\n  <ng-content></ng-content>\n</bm-accordion>\n","// AUTO-GENERATED\nexport * from './accordion.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;AAWG;MAqBU,kBAAkB,CAAA;AAC7B;;;AAGG;AACH,IAAA,IAAI,GAAG,KAAK,CAAiC,IAAI,CAAC;AAElD;;AAEG;IACH,OAAO,GAAG,KAAK,EAAU;AAEzB;;;;AAIG;IACH,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEpD;;;AAGG;IACH,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE3D;;AAEG;IACH,EAAE,GAAG,KAAK,EAAU;AAEpB;;AAEG;IACH,QAAQ,GAAG,MAAM,EAAe;AAEhC,IAAA,UAAU,CAAC,KAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;wGArCW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,2tBChC/B,mQAUA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDsBa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,mQAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AE9BnC;;ACAA;;AAEG;;;;"}

package/fesm2022/viasat-beam-web-components-angular-src-lib-alert.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@viasat/beam-web-components/Alert';
+
+/**
+ * AUTO-GENERATED - DO NOT EDIT MANUALLY
+ *
+ * Angular wrapper for <bm-alert>
+ * Generated from: libs/web-components/src/lib/Alert/Alert.ts
+ *
+ * Re-generate: npx nx run web-components-angular:generate
+ *
+ * @slot icon - Specify a different icon for the Alert
+ * @slot heading - Specify the heading text for Alert or pass the `heading` attribute to set the heading
+ * @slot body - Specify the body text for Alert or pass the `body` attribute to set the body
+ * @slot actions - Specify if actions display on the Alert
+ */
+class AlertComponent {
+    /**
+     * Specify the heading text for Alert
+     */
+    heading = input();
+    /**
+     * Specify the body text for Alert
+     */
+    body = input();
+    /**
+     * Specify the size of the Alert
+     * @default 'sm'
+     */
+    size = input('sm');
+    /**
+     * Specify if the Alert has no border radius
+     * @default false
+     */
+    fullWidth = input(false, { transform: booleanAttribute });
+    /**
+     * Specify the theme of the Alert. By default it inherits the theme from the parent
+     */
+    theme = input();
+    /**
+     * Specify the appearance of the Alert
+     * @default 'infoPrimary'
+     */
+    appearance = input('infoPrimary');
+    /**
+     * Specify if the Alert is hidden
+     * @default false
+     */
+    hidden = input(false, { transform: booleanAttribute });
+    /**
+     * Specify if the icon displays on the Alert
+     * @default false
+     */
+    hideIcon = input(false, { transform: booleanAttribute });
+    /**
+     * Specify if the Alert can be dismissed
+     * @default false
+     */
+    dismissible = input(false, { transform: booleanAttribute });
+    /**
+     * Prevent autofocus on show
+     * @default false
+     */
+    disableAutoFocus = input(false, { transform: booleanAttribute });
+    /**
+     * Prevent Escape from closing
+     * @default false
+     */
+    disableCloseOnEscape = input(false, { transform: booleanAttribute });
+    /**
+     * Dispatched when the Alert has been dismissed
+     */
+    bmDismiss = output();
+    onBmDismiss(event) {
+        this.bmDismiss.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: AlertComponent, isStandalone: true, selector: "bm-ng-alert", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, disableAutoFocus: { classPropertyName: "disableAutoFocus", publicName: "disableAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, disableCloseOnEscape: { classPropertyName: "disableCloseOnEscape", publicName: "disableCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bmDismiss: "bmDismiss" }, ngImport: i0, template: "<bm-alert\n  [heading]=\"heading()\"\n  [body]=\"body()\"\n  [size]=\"size()\"\n  [attr.fullWidth]=\"fullWidth() ? '' : null\"\n  [theme]=\"theme()\"\n  [appearance]=\"appearance()\"\n  [attr.hidden]=\"hidden() ? '' : null\"\n  [attr.hideIcon]=\"hideIcon() ? '' : null\"\n  [attr.dismissible]=\"dismissible() ? '' : null\"\n  [attr.disableAutoFocus]=\"disableAutoFocus() ? '' : null\"\n  [attr.disableCloseOnEscape]=\"disableCloseOnEscape() ? '' : null\"\n  (bm-dismiss)=\"onBmDismiss($event)\"\n>\n  <ng-content></ng-content>\n</bm-alert>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bm-ng-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<bm-alert\n  [heading]=\"heading()\"\n  [body]=\"body()\"\n  [size]=\"size()\"\n  [attr.fullWidth]=\"fullWidth() ? '' : null\"\n  [theme]=\"theme()\"\n  [appearance]=\"appearance()\"\n  [attr.hidden]=\"hidden() ? '' : null\"\n  [attr.hideIcon]=\"hideIcon() ? '' : null\"\n  [attr.dismissible]=\"dismissible() ? '' : null\"\n  [attr.disableAutoFocus]=\"disableAutoFocus() ? '' : null\"\n  [attr.disableCloseOnEscape]=\"disableCloseOnEscape() ? '' : null\"\n  (bm-dismiss)=\"onBmDismiss($event)\"\n>\n  <ng-content></ng-content>\n</bm-alert>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+// AUTO-GENERATED
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent };
+//# sourceMappingURL=viasat-beam-web-components-angular-src-lib-alert.mjs.map

package/fesm2022/viasat-beam-web-components-angular-src-lib-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"viasat-beam-web-components-angular-src-lib-alert.mjs","sources":["../../../../libs/web-components-angular/src/lib/alert/alert.component.ts","../../../../libs/web-components-angular/src/lib/alert/alert.component.html","../../../../libs/web-components-angular/src/lib/alert/index.ts","../../../../libs/web-components-angular/src/lib/alert/viasat-beam-web-components-angular-src-lib-alert.ts"],"sourcesContent":["/**\n * AUTO-GENERATED - DO NOT EDIT MANUALLY\n *\n * Angular wrapper for <bm-alert>\n * Generated from: libs/web-components/src/lib/Alert/Alert.ts\n *\n * Re-generate: npx nx run web-components-angular:generate\n * \n * @slot icon - Specify a different icon for the Alert\n * @slot heading - Specify the heading text for Alert or pass the `heading` attribute to set the heading\n * @slot body - Specify the body text for Alert or pass the `body` attribute to set the body\n * @slot actions - Specify if actions display on the Alert\n */\n\nimport {\n  CUSTOM_ELEMENTS_SCHEMA,\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  input,\n  output,\n} from '@angular/core';\n\nimport '@viasat/beam-web-components/Alert';\n\n@Component({\n  selector: 'bm-ng-alert',\n  standalone: true,\n  templateUrl: './alert.component.html',\n  styleUrl: './alert.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AlertComponent {\n  /**\n   * Specify the heading text for Alert\n   */\n  heading = input<string>();\n\n  /**\n   * Specify the body text for Alert\n   */\n  body = input<string>();\n\n  /**\n   * Specify the size of the Alert\n   * @default 'sm'\n   */\n  size = input<'sm' | 'md'>('sm');\n\n  /**\n   * Specify if the Alert has no border radius\n   * @default false\n   */\n  fullWidth = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specify the theme of the Alert. By default it inherits the theme from the parent\n   */\n  theme = input<'light' | 'dark'>();\n\n  /**\n   * Specify the appearance of the Alert\n   * @default 'infoPrimary'\n   */\n  appearance = input<'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'>('infoPrimary');\n\n  /**\n   * Specify if the Alert is hidden\n   * @default false\n   */\n  hidden = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specify if the icon displays on the Alert\n   * @default false\n   */\n  hideIcon = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specify if the Alert can be dismissed\n   * @default false\n   */\n  dismissible = input(false, { transform: booleanAttribute });\n\n  /**\n   * Prevent autofocus on show\n   * @default false\n   */\n  disableAutoFocus = input(false, { transform: booleanAttribute });\n\n  /**\n   * Prevent Escape from closing\n   * @default false\n   */\n  disableCloseOnEscape = input(false, { transform: booleanAttribute });\n\n  /**\n   * Dispatched when the Alert has been dismissed\n   */\n  bmDismiss = output<CustomEvent>();\n\n  onBmDismiss(event: CustomEvent): void {\n    this.bmDismiss.emit(event);\n  }\n}\n","<bm-alert\n  [heading]=\"heading()\"\n  [body]=\"body()\"\n  [size]=\"size()\"\n  [attr.fullWidth]=\"fullWidth() ? '' : null\"\n  [theme]=\"theme()\"\n  [appearance]=\"appearance()\"\n  [attr.hidden]=\"hidden() ? '' : null\"\n  [attr.hideIcon]=\"hideIcon() ? '' : null\"\n  [attr.dismissible]=\"dismissible() ? '' : null\"\n  [attr.disableAutoFocus]=\"disableAutoFocus() ? '' : null\"\n  [attr.disableCloseOnEscape]=\"disableCloseOnEscape() ? '' : null\"\n  (bm-dismiss)=\"onBmDismiss($event)\"\n>\n  <ng-content></ng-content>\n</bm-alert>\n","// AUTO-GENERATED\nexport * from './alert.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;AAYG;MAqBU,cAAc,CAAA;AACzB;;AAEG;IACH,OAAO,GAAG,KAAK,EAAU;AAEzB;;AAEG;IACH,IAAI,GAAG,KAAK,EAAU;AAEtB;;;AAGG;AACH,IAAA,IAAI,GAAG,KAAK,CAAc,IAAI,CAAC;AAE/B;;;AAGG;IACH,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEzD;;AAEG;IACH,KAAK,GAAG,KAAK,EAAoB;AAEjC;;;AAGG;AACH,IAAA,UAAU,GAAG,KAAK,CAAwE,aAAa,CAAC;AAExG;;;AAGG;IACH,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEtD;;;AAGG;IACH,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAExD;;;AAGG;IACH,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE3D;;;AAGG;IACH,gBAAgB,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEhE;;;AAGG;IACH,oBAAoB,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEpE;;AAEG;IACH,SAAS,GAAG,MAAM,EAAe;AAEjC,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;IAC5B;wGAvEW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,uiDCjC3B,+hBAgBA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDiBa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,+hBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AE/BnC;;ACAA;;AAEG;;;;"}

package/fesm2022/viasat-beam-web-components-angular-src-lib-avatar-group.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@viasat/beam-web-components/Avatar';
+
+/**
+ * AUTO-GENERATED - DO NOT EDIT MANUALLY
+ *
+ * Angular wrapper for <bm-avatar-group>
+ * Generated from: libs/web-components/src/lib/Avatar/AvatarGroup.ts
+ *
+ * Re-generate: npx nx run web-components-angular:generate
+ *
+ * @slot default - Add Avatars to create a group
+ */
+class AvatarGroupComponent {
+    /**
+     * Specify if the AvatarGroup wraps
+     * @default false
+     */
+    wrapping = input(false, { transform: booleanAttribute });
+    /**
+     * Specify the max number of avatars displayed in the group.
+     * @default 5
+     */
+    maxCount = input(5);
+    /**
+     * Specify the size of all Avatars
+     * @default 'md'
+     */
+    size = input('md');
+    /**
+     * Specify the kind of the group.
+     * @default 'stacked'
+     */
+    layout = input('stacked');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: AvatarGroupComponent, isStandalone: true, selector: "bm-ng-avatar-group", inputs: { wrapping: { classPropertyName: "wrapping", publicName: "wrapping", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<bm-avatar-group\n  [attr.wrapping]=\"wrapping() ? '' : null\"\n  [maxCount]=\"maxCount()\"\n  [size]=\"size()\"\n  [layout]=\"layout()\"\n>\n  <ng-content></ng-content>\n</bm-avatar-group>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bm-ng-avatar-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<bm-avatar-group\n  [attr.wrapping]=\"wrapping() ? '' : null\"\n  [maxCount]=\"maxCount()\"\n  [size]=\"size()\"\n  [layout]=\"layout()\"\n>\n  <ng-content></ng-content>\n</bm-avatar-group>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+// AUTO-GENERATED
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarGroupComponent };
+//# sourceMappingURL=viasat-beam-web-components-angular-src-lib-avatar-group.mjs.map

package/fesm2022/viasat-beam-web-components-angular-src-lib-avatar-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"viasat-beam-web-components-angular-src-lib-avatar-group.mjs","sources":["../../../../libs/web-components-angular/src/lib/avatar-group/avatar-group.component.ts","../../../../libs/web-components-angular/src/lib/avatar-group/avatar-group.component.html","../../../../libs/web-components-angular/src/lib/avatar-group/index.ts","../../../../libs/web-components-angular/src/lib/avatar-group/viasat-beam-web-components-angular-src-lib-avatar-group.ts"],"sourcesContent":["/**\n * AUTO-GENERATED - DO NOT EDIT MANUALLY\n *\n * Angular wrapper for <bm-avatar-group>\n * Generated from: libs/web-components/src/lib/Avatar/AvatarGroup.ts\n *\n * Re-generate: npx nx run web-components-angular:generate\n * \n * @slot default - Add Avatars to create a group\n */\n\nimport {\n  CUSTOM_ELEMENTS_SCHEMA,\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  input,\n} from '@angular/core';\n\nimport '@viasat/beam-web-components/Avatar';\n\n@Component({\n  selector: 'bm-ng-avatar-group',\n  standalone: true,\n  templateUrl: './avatar-group.component.html',\n  styleUrl: './avatar-group.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AvatarGroupComponent {\n  /**\n   * Specify if the AvatarGroup wraps\n   * @default false\n   */\n  wrapping = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specify the max number of avatars displayed in the group.\n   * @default 5\n   */\n  maxCount = input(5);\n\n  /**\n   * Specify the size of all Avatars\n   * @default 'md'\n   */\n  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /**\n   * Specify the kind of the group.\n   * @default 'stacked'\n   */\n  layout = input<'stacked' | 'spaced' | undefined>('stacked');\n\n\n}\n","<bm-avatar-group\n  [attr.wrapping]=\"wrapping() ? '' : null\"\n  [maxCount]=\"maxCount()\"\n  [size]=\"size()\"\n  [layout]=\"layout()\"\n>\n  <ng-content></ng-content>\n</bm-avatar-group>\n","// AUTO-GENERATED\nexport * from './avatar-group.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;AASG;MAoBU,oBAAoB,CAAA;AAC/B;;;AAGG;IACH,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAExD;;;AAGG;AACH,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;AAEnB;;;AAGG;AACH,IAAA,IAAI,GAAG,KAAK,CAAmC,IAAI,CAAC;AAEpD;;;AAGG;AACH,IAAA,MAAM,GAAG,KAAK,CAAmC,SAAS,CAAC;wGAvBhD,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,4kBC7BjC,iMAQA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDqBa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,iMAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AE3BnC;;ACAA;;AAEG;;;;"}