@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 and Popper. 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 | | 4.0.0 | >=20.2.4 | ^4.0.0 | ^19.0.1 | ^2.11.8 | Removed! | Removed! | ^4.17.21 | | 5.x.y | >=22.1.6 | 5.x.y | ^21.0.0 | ^2.11.8 | | | ^4.17.21 |

Starting with the v5 release, the packages @impartner/angular-sdk, @impartner/angular-apps, @impartner/design-components, @impartner/design, and @impartner/application-ui release with synced versions and dependencies on each other. Thus, an example release 5.6.7 of @impartner/design-components would be released alongside and have peer dependencies upon version @impartner/[email protected], and similarly so for any of those packages with dependencies upon each other.

Installation

1. Add the @ng-bootstrap/ng-bootstrap, @popperjs/core, 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.