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.

Changelog

_Hint: Changes marked as visible change directly affect your application during version upgrade.

• v10.3.4: toolbar actions: added 'importantAction' property. These actions will never be hidden in a mat-menu
• v10.3.3: mad-table: Added sticky column feature, fixed vertical scroll bar issue
• v10.3.2: Don't print toolbar menu when using browser print function (ctrl+p)
• v10.3.1: Toolbar Action enhancements #102
• v10.3.0:
  • breaking change - #101 Data table enhancements
    • BatchMode
    • Actions for SINGLE, BATCH, NONE
    • Loading Animation
    • custom ID generator
    • custom column data transformation

Changelog history

• v10.2.5: Fix toolbar icon button color in mobile view
• v10.2.4: Enhancements/Fixes in Flowbar Layout
• v10.2.3:
  • visible change - #92 Fixed validation theme warn-color in PBV theme
• v10.2.2:
  • Added #73 DataGrid Component
  • Added #89 Flowbar Layout
• v10.2.1:
  • Added #88 stepper component
• v10.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
• v10.1.9:
  • CSS fix: Hide all types of mad-buttons when printing a page
  • Demo: Hide navbar when printing a page
• v10.1.8:
  • CSS fix: Class "fixedtabs" also affected child tab components. This is now fixed.
• v10.1.7:
  • Fix (issue) / mad-table inside card overflows the card
• v10.1.6:
  • Table fix: Show empty-text correctly when no data is present
• v10.1.5:
  • Set input id for readonly-form-field-wrapper (requrired for cypress tests) (pr)
• v10.1.4:
  • Disabled click-listener for disabled buttons (issue)
• v10.1.3:
  • Fixed add-button disabled handling in mad-quick-list (issue)
• v10.1.2:
  • Cleanup
• v10.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
• v10.0.26: Added throttle button directive demo
• v10.0.25: Added badge support for toolbar actions, see toolbar demo
• v10.0.24: Added text field support for read-only-form-field-wrapper with "multiline" and "rows" arguments
• v10.0.22: Fixed #52 and updated documentation #48
• v10.0.21: Added mad button components ( mad-primary-button, mad-outline-button, etc.) to ensure a unified design
• v10.0.19: Fixed #46 where read-only numbers were formatted by default
• v10.0.18: Fix card header size by using default Angular Material styling
• v10.0.17: Minor fixes in 4 components (numeric-field , action-table , quicklist , readonly-formfield)
• v10.0.16: Fix number format detection in numeric-field
• v10.0.15: Small fix in action-table
• v10.0.14: Add action-table bugfix in numeric-field
• v10.0.13: Event emitter fix in card component
• v10.0.12: Style fix in card component
• v10.0.11: Added quicklist and card component
• v10.0.10: Added numeric-field editable fields
• v10.0.9: (not released)
• v10.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)
   1. Increase the version in "/projects/material-addons/package.json" to the next target version number
   2. Update the Readme by providing information about the changes
2. Create a new Github Release, the deploy pipeline will trigger automatically
3. Check if the deploy pipeline succeeded