angular-material-tools v1.0.0

angular-material-tools

Tool that generates custom AngularJS Material builds, consisting of:

• JS files for a set Material components
• CSS for a set of components
• Static theme files
• Layout CSS, separated from the specific component styling

Quick Links

• Installation
• Available Options
• CLI Usage
• NodeJS Usage
• Theme Building
• Development Environment

Installation

• npm install angular-material-tools --save

Usage

material-tools can be easily used from the command-line or from your own custom NodeJS code. The build tools also include a CLI, which can be used by installing the tools globally.

• npm install -g angular-material-tools

Options

Note: The options can be set in a JSON file whose path can be passed to the CLI or API.

CLI usage

To create a custom AngularJS Material build with the command-line interface (CLI), you can pass the options as CLI arguments.

All possible options in the CLI can be listed with the command:

• material-tools --help

The CLI includes the following commands:

Examples

material-tools --destination ./output --modules list datepicker autocomplete --version 1.2.1

If you do not specify a version, the CLI will automatically use the installed AngularJS Material version from your local node_modules directory.

material-tools -d ./output -m list

NodeJS usage

const MaterialTools = require('angular-material-tools');

let tools = new MaterialTools({
  destination: './output',
  version: '1.2.1',
  modules: ['menu', 'checkbox'],
  theme: {
    primaryPalette: 'indigo',
    accentPalette: 'purple',
    warnPalette: 'deep-orange',
    backgroundPalette: 'grey'
  }
});

const successHandler = () => console.log('Build was successful.');
const errorHandler = error => console.error(error);

tools.build().then(successHandler).catch(errorHandler);         // Build all JS/CSS/themes

tools.build('js').then(successHandler).catch(errorHandler);     // Only build the JS.
tools.build('theme').then(successHandler).catch(errorHandler);  // Only build the theme.
tools.build('css').then(successHandler).catch(errorHandler);    // Only build the CSS

// You can also build a subset of files.
tools.build('css', 'js');   // Builds both the CSS and the JS.

Output Files

Theming

Developers are able to easily build a static theme stylesheet

{
  destination: './myBuild',
  version: '1.2.1',
  modules: ['list'],
  theme: {
    primaryPalette: 'blue',
    accentPalette: 'grey'
  }
}

In some cases you may want to have multiple themes in your application.

{
  themes: [{
    name: 'firstTheme',
    primaryPalette: 'red'
  }, {
    name: 'secondTheme',
    primaryPalette: 'blue'
  }]
}

It is also possible to use custom palettes for your static theme.

{
  theme: {
    primaryPalette: 'light-orange',
    accentPalette: 'blue'
  },
  palettes: {
    'light-orange': {
      '50': 'FBE9E7',
      '100': 'FFCCBC',
      '200': 'FFAB91',
      '300': 'FF8A65',
      '400': 'FF7043',
      '500': 'FF7043',
      '600': 'F4511E',
      '700': 'E64A19',
      '800': 'D84315',
      '900': 'BF360C',
      'A100': 'FF9E80',
      'A200': 'FF6E40',
      'A400': 'FF3D00',
      'A700': 'DD2C00',
      'contrastDefaultColor': 'light',
      'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100', 'A200'],
      'contrastStrongLightColors': ['500', '600', '700', '800', '900', 'A400', 'A700']
    }
  }
}

Sometimes you want to create a custom palette which is based on another one.

Material Tools for AngularJS Material provides an easy way to extend palettes.

{
  theme: {
    primaryPalette: 'darkerRed',
    accentPalette: 'blue'
  },
  palettes: {
    'darkerRed': {
      extends: 'red',
      contrastDefaultColor: 'dark'
    }
  }
}

Development

If you've cloned the repo, a quick way to explore NodeJS usages is to directly run TypeScript without transpiling processes. Developers can use ts-node for this.

Install a TypeScript compiler (requires typescript by default):

npm install -g ts-node typescript

Then use the command-line to directly run the debug.ts sample from the project root:

ts-node debug.ts

which will generate the output:

[13:37:00]: Successfully built list, core, animate, layout, gestures, theming, palette,
            datepicker, icon, virtualRepeat, showHide.