feat(config): Added new options, docs improbement, refactoring

- Added timer service
- Added animation presets
- Added and implements new options, such as auto hide, animation overlap,
  and more
- Added styling for types, added material design theme
- Updated TSLint, updated Node version, updated Gulp tasks
- Added JS Docs, refactored many parts of the code
- Updated demo
- Updated dependencies

Author: itsdevdom

.nvmrc

@@ -1 +1 @@
-5.12
+6.9.1

.sass-lint.yml

@@ -1,4 +1,7 @@
 rules:
+  attribute-quotes:
+    - 1
+    - include: true
   bem-depth:
     - 1
     - max-depth: 1
@@ -17,6 +20,7 @@ rules:
     - 1
     - filename-extension: true
       leading-underscore: false
+  declarations-before-nesting: 1
   empty-args:
     - 1
     - include: true
@@ -45,10 +49,18 @@ rules:
     - 1
     - allow-leading-underscore: false
       convention: hyphenatedbem
-  indentation: 0
+  indentation:
+    - 1
+    - size: tab
   leading-zero:
     - 1
     - include: false
+  max-file-line-count:
+    - 1
+    - length: 500
+  max-line-length:
+    - 1
+    - length: 140
   mixin-name-format:
     - 1
     - allow-leading-underscore: false
@@ -57,9 +69,18 @@ rules:
   nesting-depth:
     - 1
     - max-depth: 3
-  no-color-literals: 0
+  no-attribute-selectors: 1
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals:
+    - 1
+    - allow-map-identifiers: 1
+      allow-rgba: 1
+      allow-variable-identifiers: 1
+  no-combinators: 0
   no-css-comments: 1
   no-debug: 1
+  no-disallowed-properties: 0
   no-duplicate-properties: 1
   no-empty-rulesets: 1
   no-extends: 1
@@ -73,8 +94,10 @@ rules:
     - allow-element-with-attribute: true
       allow-element-with-class: true
       allow-element-with-id: false
+  no-trailing-whitespace: 1
   no-trailing-zero: 1
   no-transition-all: 1
+  no-url-domains: 1
   no-url-protocols: 1
   no-vendor-prefixes: 1
   no-warn: 1
@@ -86,24 +109,24 @@ rules:
       convention: hyphenatedbem
   property-sort-order:
     - 1
-    - order: smacss
+    - order: concentric
       ignore-custom-properties: true
   property-units:
     - 1
     - global:
       - "px"
-      - "rem"
       - "%"
       - "s"
+  pseudo-element: 1
   quotes:
     - 1
     - style: double
   shorthand-values:
     - 1
     - allowed-shorthands:
       - 1
-      - 2
-      - 3
+        2
+        3
   single-line-per-selector: 1
   space-after-bang:
     - 1
@@ -133,6 +156,9 @@ rules:
   url-quotes: 1
   variable-for-property:
     - 1
+    - properties:
+      - color
+      - background-color
   variable-name-format:
     - 1
     - allow-leading-underscore: false

.travis.yml

@@ -22,7 +22,6 @@ before_install:
   - npm install -g npm # Update npm to its latest version
 install:
   - npm install
-  - npm run typings install # Install typings
 
 before_script:
   - npm prune

demo/app.component.ts

@@ -33,15 +33,15 @@ export class AppComponent {
 	}
 
 	public test(): void {
-		this.notifier.notify( 'test', `Notification #${ this.counter }` );
+		this.notifier.notify( 'default', `Notification #${ this.counter }` );
 		this.counter++;
 	}
 
 	public showSpecific(): void {
 		this.notifier.show( {
 			id: 'ID_SPECIFIC',
 			message: 'Specific notification here',
-			type: 'test'
+			type: 'default'
 		} );
 	}
 

gulp-tasks/build.task.js

@@ -2,20 +2,20 @@
 
 const gulp = require( 'gulp' );
 
-const environmentClean = require( './environment/environment-clean.task' );
+const envClean = require( './env/env-clean.task' );
 const sassBuild = require( './sass/sass-build.task' );
 const sassLint = require( './sass/sass-lint.task' );
-const typescriptBuild = require( './typescript/typescript-build.task' );
-const typescriptLint = require( './typescript/typescript-lint.task' );
+const tsBuild = require( './ts/ts-build.task' );
+const tsLint = require( './ts/ts-lint.task' );
 
 /**
  * Gulp task: Complete build for development
  */
 gulp.task( 'build--dev',
     gulp.series( [
-        'environment:clean',
+        'env:clean',
         gulp.parallel( [
-            'typescript:build--dev',
+            'ts:build--dev',
             'sass:build--dev'
         ] )
     ] )
@@ -26,11 +26,11 @@ gulp.task( 'build--dev',
  */
 gulp.task( 'build--prod',
     gulp.series( [
-        'environment:clean',
+        'env:clean',
         gulp.parallel( [
-            'typescript:lint',
+            'ts:lint',
             'sass:lint',
-            'typescript:build--prod',
+            'ts:build--prod',
             'sass:build--prod'
         ] )
     ] )
@@ -41,7 +41,7 @@ gulp.task( 'build--prod',
  */
 gulp.task( 'build--demo',
     gulp.series( [
-        'environment:clean--demo',
-        'typescript:build--demo'
+        'env:clean--demo',
+        'ts:build--demo'
     ] )
 );

…ks/environment/environment-clean.task.js gulp-tasks/env/env-clean.task.jsgulp-tasks/environment/environment-clean.task.js renamed to gulp-tasks/env/env-clean.task.js gulp-tasks/environment/environment-clean.task.js renamed to gulp-tasks/env/env-clean.task.js

@@ -6,7 +6,7 @@ const gulp = require( 'gulp' );
 /**
  * Gulp task: Clean project build files
  */
-gulp.task( 'environment:clean', () => {
+gulp.task( 'env:clean', () => {
     return del( [
         './index.js', // Generated JavaScript, sourcemaps, and TypeScript definition files ...
         './index.js.map',
@@ -22,7 +22,7 @@ gulp.task( 'environment:clean', () => {
 /**
  * Gulp task: Clean demo build files
  */
-gulp.task( 'environment:clean--demo', () => {
+gulp.task( 'env:clean--demo', () => {
     return del( [
         './demo/*.js',
         '!./demo/systemjs.config.js'

…asks/typescript/typescript-build.task.js gulp-tasks/ts/ts-build.task.jsgulp-tasks/typescript/typescript-build.task.js renamed to gulp-tasks/ts/ts-build.task.js gulp-tasks/typescript/typescript-build.task.js renamed to gulp-tasks/ts/ts-build.task.js

@@ -8,7 +8,7 @@ const ts = require( 'gulp-typescript' );
 /**
  * Gulp task: Build project TypeScript for development
  */
-gulp.task( 'typescript:build--dev', () => {
+gulp.task( 'ts:build--dev', () => {
 
     // Compile TypeScript (without sourcemaps), using two sources for better performance (#perfmatters)
     let tsSourceProject = ts.createProject( './tsconfig.json' );
@@ -37,7 +37,7 @@ gulp.task( 'typescript:build--dev', () => {
 /**
  * Gulp task: Build project TypeScript for production
  */
-gulp.task( 'typescript:build--prod', () => {
+gulp.task( 'ts:build--prod', () => {
 
     // Compile TypeScript (including sourcemaps)
     let tsProject = ts.createProject( './tsconfig.json' );
@@ -64,7 +64,7 @@ gulp.task( 'typescript:build--prod', () => {
 /**
  * Gulp task: Build demo TypeScript
  */
-gulp.task( 'typescript:build--demo', () => {
+gulp.task( 'ts:build--demo', () => {
 
     // Compile TypeScript (including sourcemaps)
     let tsProject = ts.createProject( './tsconfig.json' );

gulp-tasks/ts/ts-lint.task.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const gulp = require( 'gulp' );
+const gulpTslint = require( 'gulp-tslint' );
+const tslint = require( 'tslint' );
+
+/**
+ * Gulp task: Lint project TypeScript (and checks styleguide conventions)
+ */
+gulp.task( 'ts:lint', () => {
+    const program = tslint.createProgram( './tsconfig.json' ); // Enable type-checked rules
+    return gulp
+        .src( [
+            './index.ts',
+            './src/**/*.ts'
+        ], {
+            base: '.' // Fixes program issues, see <https://github.com/panuhorsmalahti/gulp-tslint/issues/71>
+        } )
+        .pipe( gulpTslint( { // Also runs codelyzer rules
+            formatter: 'prose',
+            program
+        } ) )
+        .pipe( gulpTslint.report() );
+} );

gulp-tasks/typescript/typescript-lint.task.js

@@ -18,7 +18,7 @@ gulp.task( 'watch:reload', ( done ) => {
 /**
  * Gulp task: Start watcher for build tasks (note: paths muts be written without dots in the beginning!!)
  */
-gulp.task( 'watch:build',
+gulp.task( 'watch',
     gulp.series( [
         gulp.parallel( [
             'build--dev',
@@ -51,7 +51,7 @@ gulp.task( 'watch:build',
                 'index.ts',
                 'src/**/*.ts'
             ], gulp.series( [
-                'typescript:build--dev',
+                'ts:build--dev',
                 'watch:reload'
             ] ) );
             tsWatcher.on( 'change', ( path ) => {
@@ -74,7 +74,7 @@ gulp.task( 'watch:build',
             let demoTsWatcher = gulp.watch( [
                 'demo/*.ts'
             ], gulp.series( [
-                'typescript:build--demo',
+                'ts:build--demo',
                 'watch:reload'
             ] ) );
             demoTsWatcher.on( 'change', ( path ) => {