No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

@swisspost/design-system-components-angular

npm version

The Design System Angular Components, ready for use in your Angular project.

Instructions
VersionAngular
1.x16.x
2.x16.x
7.x16.x || 17.x
8.x18.x
npm install @swisspost/design-system-components-angular

Import the packages global styles. They are required for the components to work properly.

@use '@swisspost/design-system-components-angular/post-components.css';

Importing the components to your project.

// app.module.ts

import { NgModule } from '@angular/core';
import { PostComponentsModule } from '@swisspost/design-system-components-angular';

@NgModule({
  // ...
  imports: [PostComponentsModule],
  // ...
})
export class AppModule {}

Usage within your template.

<!-- app.component.html -->

<post-icon *ngIf="condition" [attr.name]="iconName"></post-icon>

Content Security Policy (CSP)

Angular components use inline scripts and styles. To enable their execution while enforcing a strict Content Security Policy (CSP), you can use a CSP nonce.

A nonce is a randomly generated word or phrase intended for one-time use, which must update with each HTTP response. Inline scripts or styles with a nonce attribute matching the current nonce value set in the CSP will execute properly, while others will be blocked. Learn more in the CSP nonce documentation.

There are two ways to configure Angular to automatically set nonce attributes:

  1. Set an ngCspNonce attribute on the root application element.
  2. Provide the nonce using the CSP_NONCE injection token.

This configuration will also apply automatically to components in the Components for Angular package. For more details, refer to the Angular security guide.

Changelog

@swisspost/design-system-components-angular

10.0.0-next.39

Major Changes

  • Added the styles responsible for preventing fouc (flashes of unstyled content) for web-, angular- and react-components in the respective component packages:
    • @swisspost/design-system-components/post-components/post-components.css
    • @swisspost/design-system-components-angular/post-components.css
    • @swisspost/design-system-components-react/post-components.css (by @oliverschuerch with #5165)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@10.0.0-next.39

10.0.0-next.38

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@10.0.0-next.38

10.0.0-next.37

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@10.0.0-next.37

9.0.0-next.36

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.36

9.0.0-next.35

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.35

9.0.0-next.34

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.34

9.0.0-next.33

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.33

9.0.0-next.32

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.32

9.0.0-next.31

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.31

9.0.0-next.30

Patch Changes

  • Updated the project to use Angular version 19. (by @alizedebray with #4853)
  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.30

9.0.0-next.29

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.29

9.0.0-next.28

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.28

9.0.0-next.27

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.27

9.0.0-next.26

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.26

9.0.0-next.25

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.25

9.0.0-next.24

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.24

9.0.0-next.23

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.23

9.0.0-next.22

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.22

9.0.0-next.21

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.21

9.0.0-next.20

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.20

9.0.0-next.19

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.19

9.0.0-next.18

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.18

9.0.0-next.17

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.17

9.0.0-next.16

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.16

9.0.0-next.15

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.15

9.0.0-next.14

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.14

9.0.0-next.13

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.13

9.0.0-next.12

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.12

9.0.0-next.11

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.11

9.0.0-next.10

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.10

9.0.0-next.9

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.9

9.0.0-next.8

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.8

9.0.0-next.7

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.7

9.0.0-next.6

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.6

9.0.0-next.5

Minor Changes

  • Added a provisional post-header component with some basic functionality in place. This component is not finished in this state. (by @gfellerph with #3837)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.5

9.0.0-next.4

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.4

9.0.0-next.3

Minor Changes

  • Added component post-avatar to show an avatar, based on different possible input data (gravatar by email, initials by first- and/or lastname, fallback). (by @oliverschuerch with #3352)

Patch Changes

  • Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like [for]="$id"). The checks are now delayed to work around this issue. (by @gfellerph with #3775)
  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.3

9.0.0-next.2

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.2

9.0.0-next.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.1

9.0.0-next.0

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@9.0.0-next.0

8.2.0

Minor Changes

  • Added the post-logo component, which enables displaying the Post's logo either as a clickable link or as a simple image. (by @oliverschuerch with #3477)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@8.2.0

8.1.0

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@8.1.0

8.0.0

Major Changes

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@8.0.0

7.4.0

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@7.4.0

7.3.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@7.3.1

7.3.0

Minor Changes

  • Added a post-collapsible-trigger component to properly handle the role, ARIA attributes, and event listeners for elements that toggle a post-collapsible. (by @alizedebray with #3209)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@7.3.0

7.2.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@7.2.1

7.2.0

Patch Changes

  • Redefined the dependency to the web components package as a dependency instead of a peer dependency due to a known bug in changesets that causes major version bumps across all linked workspace packages if one of them is installed as a peer dependency. (by @gfellerph with #3169)

  • Updated PostComponentsModule to enable its use in lazy-loaded modules. (by @alizedebray with #3118)

  • Added @swisspost/design-system-components package as a peer dependency as recommended by stenciljs. This way, installing @swisspost/design-system-components package as a direct dependency should not be necessary anymore in consumer projects. (by @oliverschuerch with #3116)
  • Updated dependencies:
    • @swisspost/design-system-components@7.2.0

7.1.0

Minor Changes

  • Added a heading-level property on the post-accordion component to set the heading level of all post-accordion-item children at once. (by @alizedebray with #3104)

Patch Changes

7.0.0

Major Changes

  • Synchronized the versions of the following packages:

    • @swisspost/design-system-styles
    • @swisspost/design-system-components
    • @swisspost/design-system-components-react
    • @swisspost/design-system-components-angular
    • @swisspost/design-system-migrations
    • @swisspost/design-system-icons
    • @swisspost/design-system-intranet-header

    This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by @gfellerph with #2856)

  • Added support for Angular 17. (by @alizedebray with #2760)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@7.0.0

2.0.0

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@2.1.0

1.0.2

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@2.0.3

1.0.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@2.0.2

1.0.0

Major Changes

  • We are introducing the new package @swisspost/design-system-components-angular 🥳, which provides a corresponding Angular component for all our web-components. For those working on an Angular app this means:

    • Instead of the package @swisspost/design-system-components, which provides native web components, the new package can be used.
    • The manual creation of Angular wrapper components for our previous web components in every project is no longer necessary.
    • Full support of the standard Angular schema. The use of the CUSTOM_ELEMENTS_SCHEMA schema is history.
    • Component properties, events, etc. can be applied to the components in the usual Angular way. (by @oliverschuerch with #2071)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-components@2.0.1