Extra Clarity

A library containing Angular components built on the top of the Clarity Design System, which we use in our internal projects in extrawest.com.

The library is under development. Any suggestions would be highly appreciated.

Installation

The library is available as an npm-package:

npm install @extrawest/extra-clarity

To work with the library, you also need to add the Clarity packages:

npm i @clr/angular @clr/ui

And then add the global Clarity styles to your angular.json config:

"styles": [
  "node_modules/@clr/ui/clr-ui.min.css"
  ... any other styles
]

and add the cds-theme="light" attribute to the body element in your main HTML file:

<body cds-theme="light" />

Please refer to the Clarity docs for more details on 'Adding Clarity to an Existing Angular Application'.

Supported Versions

Extra-Clarity	Angular	Clarity
22.x	22	^18.0.0
21.x	21	^18.0.0
19.x	19	^17.5.0
18.x	18 || 19	^17.3.0
17.x	^17.3 || 18 || 19	^17.0.0

Starting from 22.x, the library does not require zone.js. It supports Angular's zoneless change detection (the default since Angular 22) and remains compatible with zone-based apps.

Documentation

For the details about the available components and live examples, please refer to our Storybook-based documentation site.

We are working on adding more information to it.

Available Components

• Auto refresh toggle
• Auto refresh toggle with manual refresh button
• Copy-to-clipboard button
• Confirmation dialog
• Dialog (reactive)
• Datagrid cell wrapper (with truncation and the copy-to-clipboard button
• Datagrid filters:
  • with editable string value
  • with enumerated value from single selection (radio buttons)
  • with enumerated value from multiple selection (checkboxes)
  • with enumerated value from multiple selection within grouped options (tree-view with checkboxes)
  • with time range selection (from presets or manually with date-time pickers)
• Floating notifications
• Popover toggle
• Progress spinner
• Router link wrapper
• Search bar
• Sidebar navigation
• etc.

License

MIT License

Third-party libraries

Some of our components may include code from these third-party libraries:

• Clarity (MIT License)
• Clarity Addons (MIT License)