MAD: Material Addons - Angular Material extension library

The goal of "material addons" is to achieve a stylesheet similar to Clarity Addons for Angular Material.

The package can be found on npmjs.

Demo website

The demo uses the material-addons stylesheet and shows some basic layouting and css usage. Source of the demo website is found in the src directory.

Versioning

The versioning of material-addons is based on the Angular version. The Angular version of your application must match the Material Addons version.

Angular Version	Material Addons Version
Angular 17	17.x.x
Angular 16	16.x.x
Angular 15	15.x.x
Angular 14	14.x.x
Angular 10-13	10.x.x

Changelog

Hint: Changes marked as visible change directly affect your application during version upgrade. Breaking requires your attention during upgrade.

• 17.4.1: add cards without title
• 17.3.4: DataTable: bugix data table sorting
• 17.3.3: bugfix for version
• 17.3.2: bugfix for new page layout
• 17.3.0: new page layout
• 17.2.2: DataTable: bugix data table sorting
• 17.2.1: DataTable: Bugfix sorting
• 17.2.0: DataTable: new implementation with additional functionality
• 17.1.2: Main Action: Add Tooltip
• 17.1.1: Extend readonly form field #167
• 17.1.0: Upgrade theming and provide carcat-style theme #147
• 17.0.3: Fix #154
• 17.0.1: Fix #151
• 17.0.0: Upgrade to Angular 17 and Angular Material 17.
• 16.0.7: Toolbar: Added the possibility to use a function callback for mainActions
• 16.0.5: Fix data-table row actions #144
• 16.0.5: Added Reactive form validation support for quick list #143
• 16.0.4: Append functionality of ReadonlyFormField #142
• 16.0.3: Fix read-only-form-field styling for "right" aligned units
• 16.0.2: Upgraded Angular to v16.2. Caution: This version only supports ES2022!
• 15.0.3: Fixed layout issue in cards
• 15.0.1: Removed all @angular/flex-layout dependencies and replaced them with pure CSS
• 15.0.0: MAJOR ANGULAR 15 RELEASE
  • breaking changes - #131 Upgrade to Angular 15 with MDC Components
    • This version requires your application to use Angular 15
    • The framework is now based on Angular Material components using MDC (Material Design Components)

View older changelogs

• 14.1.6: Show tooltips in toolbar action burger menu

• 14.1.4: data-table fixes: action button became too small for tables with a lot of colums

• 14.1.x: Fix Button Styling for Stepper and Quicklist: change "add" button in Quicklist to "Outline" Styling and "next" and "done" button in MatStepper to "Primary" Styling

• 14.1.2: minor fixes in datatable

• 14.1.1: minor fixes: datatable paging bug and action column maxwidth

• 14.1.0: BREAKING - Upgraded library to Angular 14, enabled Ivy builds, updated lib to esm2020

• 10.4.1: Added removePossible input to mad-quick-list

• 10.4.0: BREAKING - Data Table Column configuration #111

• 10.3.4: toolbar actions: added 'importantAction' property. These actions will never be hidden in a mat-menu

• 10.3.3: mad-table: Added sticky column feature, fixed vertical scroll bar issue

• 10.3.2: Don't print toolbar menu when using browser print function (ctrl+p)

• 10.3.1: Toolbar Action enhancements #102

• 10.3.0:

  • breaking change - #101 Data table enhancements
    • BatchMode
    • Actions for SINGLE, BATCH, NONE
    • Loading Animation
    • custom ID generator
    • custom column data transformation

• 10.2.5: Fix toolbar icon button color in mobile view

• 10.2.4: Enhancements/Fixes in Flowbar Layout

• 10.2.3:

  • visible change - #92 Fixed validation theme warn-color in PBV theme

• 10.2.2:

  • Added #73 DataGrid Component
  • Added #89 Flowbar Layout

• 10.2.1:

  • Added #88 stepper component

• 10.2.0:

  • Change peerDependency versions to any Angular above 10.0.0
  • Added additionalActionIcon feature to mad-cards
  • Demo: Fixed package.json some issues that occurred during development

• 10.1.9:

  • CSS fix: Hide all types of mad-buttons when printing a page
  • Demo: Hide navbar when printing a page

• 10.1.8:

  • CSS fix: Class "fixedtabs" also affected child tab components. This is now fixed.

• 10.1.7:

  • Fix (issue) / mad-table inside card overflows the card

• 10.1.6:

  • Table fix: Show empty-text correctly when no data is present

• 10.1.5:

  • Set input id for readonly-form-field-wrapper (requrired for cypress tests) (pr)

• 10.1.4:

  • Disabled click-listener for disabled buttons (issue)

• 10.1.3:

  • Fixed add-button disabled handling in mad-quick-list (issue)

• 10.1.2:

  • Cleanup

• 10.0.27:

  • Visible change: Ellipsis support for readonly-form-fields (enabled per default) demo
  • Visible change: Fix toolbar badges on mobile devices
  • Added shrinkIfEmpty feature to read-only textareas demo
  • Added save-button throttling as default to card component
  • Minor bugfixes in Demo

• 10.0.26: Added throttle button directive demo

• 10.0.25: Added badge support for toolbar actions, see toolbar demo

• 10.0.24: Added text field support for read-only-form-field-wrapper with "multiline" and "rows" arguments

• 10.0.22: Fixed #52 and updated documentation #48

• 10.0.21: Added mad button components ( mad-primary-button, mad-outline-button, etc.) to ensure a unified design

• 10.0.19: Fixed #46 where read-only numbers were formatted by default

• 10.0.18: Fix card header size by using default Angular Material styling

• 10.0.17: Minor fixes in 4 components (numeric-field , action-table , quicklist , readonly-formfield)

• 10.0.16: Fix number format detection in numeric-field

• 10.0.15: Small fix in action-table

• 10.0.14: Add action-table bugfix in numeric-field

• 10.0.13: Event emitter fix in card component

• 10.0.12: Style fix in card component

• 10.0.11: Added quicklist and card component

• 10.0.10: Added numeric-field editable fields

• 10.0.9: (not released)

• 10.0.8: Added numeric-field directive`

Usage

Requirements

Material addons requires an already set-up Angular Material project. To do a fresh start please follow the official Angular Material guide before you continue, but exclude step 4 ("include a theme").

Initial steps in your project

1. Install Material Addons package using npm:

   npm install @porscheinformatik/material-addons --save
   

2. Add the stylesheet at the top of your projects from the folder themes, for example:

   @import '@porscheinformatik/material-addons/themes/poa';
   

3. To use a component, you need to import the Module of the component in your app.module.ts or in any other module, which needs the component.

Development instructions

Contribution guidelines

Please follow the Contribution guidelines.

Getting the project to run as developer + start demo

npm install && npm run build:mat-add && npm install --no-optional && npm install && ng serve

Pre commit hooks

Eslint and prettier are used as precommit hooks to enable a consistency of code format and quality in this repository. I'd also recommend to add the prettier extension in your editor, so that you get early feedback on your code. I use VS Code with the Prettier Extension and the auto format on save.

Set correct registry for publishing material-addons

Use npm config set registry https://registry.npmjs.org/ to set registry on the official npm registry.

Deployment process

Publish NPM and deploy demo

1. Update version information manually (will be automated later)
2. Update the Readme by providing information about the changes
3. Create a new Github Release, the deploy pipeline will trigger automatically. The release should be named eg. 17.0.1 with a tag 17.0.1
4. Check if the deploy pipeline succeeded