@impartner/design-components

This package contains Angular implementations of design components for the Impartner Hex design system, based on Bootstrap 5.

Demo & Documentation

Please check our live Storybook documentation to peruse the available components and their documentation.

Dependencies

In addition to core dependencies on Angular and RxJS, the package also depends on NG Bootstrap, Popper, Nano ID, and sanitize-html. In addition, the Impartner Hex styles/CSS must be loaded and available on the page where these components are used. Impartner platform applications will always cover loading these styles, but usage in local development will need to also install and import CSS from the @impartner/design package.

| @impartner/design-components | Angular | @impartner/design | ng-bootstrap | Popper | nanoid | sanitize-html | lodash | | ---------------------------- | -------- | ----------------- | ------------ | ------- | ------ | ------------- | -------- | | 1.0.x | 14.2.0 | 1.0.1 | 13.1.1 | 2.10.2 | 4.0.0 | 2.10.0 | | | 2.0.x | >=17.0.1 | ^2.0.0 | ^16.0.0 | ^2.11.8 | ^5.0.4 | ^2.10.0 | ^4.17.21 | | 2.1.0 | >=17.0.1 | ^2.1.0 | ^16.0.0 | ^2.11.8 | ^5.0.4 | ^2.10.0 | ^4.17.21 | | 3.0.0 | >=18.2.0 | ^3.0.0 | ^17.0.0 | ^2.11.8 | ^5.0.4 | ^2.10.0 | ^4.17.21 |

Installation

1. Add the @ng-bootstrap/ng-bootstrap, @popperjs/core, nanoid, sanitize-html, lodash, and @impartner/design-components dependencies from npm.
2. Import DesignComponentsModule, ImpdcFormsModule, or any other component-specific module into your own project's NgModules or standalone components.

If the Impartner Hex stylesheet/CSS is desired, then install @impartner/design and refer to that package's own "Getting Started" instructions.