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

@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:

// 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:

$ 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:

$ npm install ngx-mat-lib@latest

and then from your Angular AppModule:

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:

<!-- 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:

$ npm run build

To lint all *.ts files:

$ 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

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