ngx-mat-lib/README.md

A bunch of utilities and components to use in your Angular 7+ apps!

# xMatLib 7.3.2

A bunch of utilities and components to use in your Angular 7+ apps!

# Before starting

As you may know directives don't have a "Styles" property.
So it's impossible to let them style your markup,
**unless** you include an external CSS.

For this purpose the style of directives is compiled in

* /css/xmat-library.css
* /scss/xmat-library.scss

Be sure of including at least one of these in your styles.css / styles.scss
to get xmatDirectives properly working

## Theme

Xmat includes a Material Theme you can activate by using

```scss
@import "~ngx-mat-lib/scss/xmat-vars";
@import angular-material-theme($xmat-theme);
```

You can of course override all of theme colors by overriding the following variables:

```scss
// xmat-vars.scss
$xmat-primary: mat-palette($xmat-blue) !default;
$xmat-accent: mat-palette($xmat-blue-accent) !default;
$xmat-accent-light: mat-palette($xmat-blue-accent-light) !default;
$xmat-warn: mat-palette($mat-red) !default;
$xmat-theme: mat-light-theme($xmat-primary, $xmat-accent, $xmat-warn) !default;
```
## Motivation

Angular Material is a complete tool. But there are ways to use come components which may come handy.
For example xMatLib includes an SCSS library which provides common classes and mixins, 
that you can use in your app to drastically reduce duplicate code!

## Utils

### xmat-mock

This util allow you to mock your frontend calls when developing, by simply creating some json and a list.
Advanced behaviours can be achieved with custom callbacks and custom mock urls.

## Included Angular Components

### xmat-accordion

Wrapper for mat-expansion-panel

| Part                  | Selector                 |
|:---------------------:|:------------------------:|
| Accordion header      | .xmat-accordion-title    |
| Accordion description | .xmat-accordion-desc     |
| Accordion content     | .xmat-accordion-content  |

####Options

| Option      | Type         |
|:-----------:|:------------:|
| expanded    | boolean      |
| disabled    | boolean      |
| color       | ThemePalette |

### xmat-action-text

A simple directive to add interactive look to any text.
Useful on click bindings

####Options

| Option      | Type         |
|:-----------:|:------------:|
| disabled    | boolean      |
| color       | ThemePalette |

MORE DESCRIPTIONS COMING

###Other components

* xmat-badge
* xmat-dialog (alert + confirm)
* xmat-global-spinner
* xmat-legend
* xmat-mini-chip-list
* xmat-overlay
* xmat-pipes
* xmat-snack-bar
* xmat-spinner
* xmat-time-input
* xmat-validators

## Installation

To install this library, run:

```bash
$ npm install ngx-mat-lib --save-dev
```

Be sure to have peerDependencies installed, especially:

* `@angular/material`
* `@angular/cdk`

## Development

* Edit src files
* Update version in package.json and src/package.json
* Commit
* Run npm build
* Run npm publish dist

## Consuming your library

Once published to npm, you can update your library in any Angular application by running:

```bash
$ npm install ngx-mat-lib@latest
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

// Import what you need from ngx-mat-lib
import { XmatTimeModule } from "ngx-mat-lib";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // Specify the import
    XmatTimeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>
```

## Development

You can now (v 2.0.0 and later) test all of the stuff, by running

```npm run start```

In the `src` folder there's an app test, you can use to test everything you need!

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

##Thanks to

Versioning
NgxMatLib will be maintained under the Semantic Versioning guidelines as much as possible.

Releases will be numbered with the following format:

`<major>.<minor>.<patch>`

And constructed with the following guidelines:

Breaking backward compatibility bumps the major (and resets the minor and patch)
New additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch)
Bug fixes, changes to brand logos, and misc changes bumps the patch
For more information on SemVer, please visit http://semver.org.

## License

MIT © [Tony Samperi](mailto:github@tonysamperi.it)

ngx-mat-lib is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded files already
contain embedded comments with sufficient
attribution, so you shouldn't need to do anything additional when using these
files normally.

#TODOS
* Add dynamic template to xmat-alert-dialog (as of xmat-confirm-dialog)
* Create dictionary for labels (rely on ngx-translate?)
* Add xmat-countdown component
* Add xmat-password component
* Add xmat-progress-state component
* Add xmat-datepicker component
* Add xmat-simple-table component