Filter pipe added,

spacing class helpers added(margin, padding),
Normalize css added,
Icon size class helpers added,
slideInLeft, slideInRight animation added,
Chat app almost completed.

src/app/core/animations.ts

@@ -1,4 +1,4 @@
-import {trigger, state, transition, animate, style} from '@angular/animations';
+import { trigger, state, transition, animate, style } from '@angular/animations';
 
 export class Animations
 {
@@ -8,4 +8,16 @@ export class Animations
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
     ]);
+    public static slideInLeft = trigger('slideInLeft', [
+        state('void', style({transform: 'translateX(-100%)', display: 'none'})),
+        state('*', style({transform: 'translateX(0)', display: 'flex'})),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]);
+    public static slideInRight = trigger('slideInRight', [
+        state('void', style({transform: 'translateX(100%)', display: 'none'})),
+        state('*', style({transform: 'translateX(0)', display: 'flex'})),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]);
 }

src/app/core/modules/shared.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
@@ -23,7 +23,8 @@ import { FusePipesModule } from '../pipes/pipes.module';
         CommonModule,
         FormsModule,
         FusePipesModule,
-        PerfectScrollbarModule
+        PerfectScrollbarModule,
+        ReactiveFormsModule
     ],
     exports     : [
         FlexLayoutModule,
@@ -33,7 +34,8 @@ import { FusePipesModule } from '../pipes/pipes.module';
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
         FusePipesModule,
-        PerfectScrollbarModule
+        PerfectScrollbarModule,
+        ReactiveFormsModule
     ]
 })
 

src/app/core/pipes/filter.pipe.ts

@@ -0,0 +1,152 @@
+/**
+ * Created by vadimdez on 28/06/16.
+ */
+import { Pipe, Injectable } from '@angular/core';
+
+@Pipe({
+    name: 'filterBy',
+    pure: false
+})
+
+@Injectable()
+export class FilterPipe {
+
+    private filterByString(filter) {
+        if (filter) {
+            filter = filter.toLowerCase();
+        }
+        return value => {
+            return !filter || (value ? ('' + value).toLowerCase().indexOf(filter) !== -1 : false);
+        }
+    }
+
+    private filterByBoolean(filter) {
+        return value => {
+            return Boolean(value) === filter;
+        }
+    }
+
+    private filterByObject(filter) {
+        return value => {
+            for (let key in filter) {
+
+                if (key === '$or') {
+                    if (!this.filterByOr(filter.$or)(this.getValue(value))) {
+                        return false;
+                    }
+                    continue;
+                }
+
+                if (!value.hasOwnProperty(key) && !Object.getOwnPropertyDescriptor(Object.getPrototypeOf(value), key)) {
+                    return false;
+                }
+
+                let val = this.getValue(value[key]);
+                const filterType = typeof filter[key];
+                let isMatching;
+
+                if (filterType === 'boolean') {
+                    isMatching = this.filterByBoolean(filter[key])(val);
+                } else if (filterType === 'string') {
+                    isMatching = this.filterByString(filter[key])(val);
+                } else if (filterType === 'object') {
+                    isMatching = this.filterByObject(filter[key])(val);
+                } else {
+                    isMatching = this.filterDefault(filter[key])(val);
+                }
+
+                if (!isMatching) {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+    }
+
+    /**
+     * Filter value by $or
+     *
+     * @param filter
+     * @returns {(value:any)=>boolean}
+     */
+    private filterByOr(filter: any[]) {
+        return (value: any) => {
+            let hasMatch = false;
+            const length = filter.length;
+            const isArray = value instanceof Array;
+
+            const arrayComparison = (i) => {
+                return value.indexOf(filter[i]) !== -1;
+            };
+            const otherComparison = (i) => {
+                return value === filter[i];
+            };
+            const comparison = isArray ? arrayComparison : otherComparison;
+
+            for (let i = 0; i < length; i++) {
+                if (comparison(i)) {
+                    hasMatch = true;
+                    break;
+                }
+            }
+
+            return hasMatch;
+        };
+    }
+
+    /**
+     * Checks function's value if type is function otherwise same value
+     * @param value
+     * @returns {any}
+     */
+    private getValue(value: any) {
+        return typeof value === 'function' ? value() : value;
+    }
+
+    /**
+     * Defatul filterDefault function
+     *
+     * @param filter
+     * @returns {(value:any)=>boolean}
+     */
+    private filterDefault(filter) {
+        return value => {
+            return filter === undefined || filter == value;
+        }
+    }
+
+    private isNumber(value) {
+        return !isNaN(parseInt(value, 10)) && isFinite(value);
+    }
+
+    transform(array: any[], filter: any): any {
+        const type = typeof filter;
+
+        if (!array) {
+            return array;
+        }
+
+        if (type === 'boolean') {
+            return array.filter(this.filterByBoolean(filter));
+        }
+
+        if (type === 'string') {
+            if (this.isNumber(filter)) {
+                return array.filter(this.filterDefault(filter));
+            }
+
+            return array.filter(this.filterByString(filter));
+        }
+
+        if (type === 'object') {
+            return array.filter(this.filterByObject(filter));
+        }
+
+        if (type === 'function') {
+            return array.filter(filter);
+        }
+
+        return array.filter(this.filterDefault(filter));
+    }
+}

src/app/core/pipes/pipes.module.ts

@@ -4,20 +4,24 @@ import { KeysPipe } from './keys.pipe';
 import { GetByIdPipe } from './getById.pipe';
 import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe';
 import { SearchPipe } from './search.pipe';
+import { FilterPipe } from './filter.pipe';
 
 @NgModule({
     declarations: [
         KeysPipe,
         GetByIdPipe,
         HtmlToPlaintextPipe,
-        SearchPipe
+        SearchPipe,
+        FilterPipe
+
     ],
     imports     : [],
     exports     : [
         KeysPipe,
         GetByIdPipe,
         HtmlToPlaintextPipe,
-        SearchPipe
+        SearchPipe,
+        FilterPipe
     ]
 })
 

src/app/core/scss/core.scss

@@ -20,12 +20,16 @@
 @include angular-material-typography($custom-typography);
 
 // Partials
+@import "partials/normalize";
+@import "partials/spacing";
 @import "partials/global";
-@import "partials/_material";
+@import "partials/icons";
+@import "partials/material";
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
 @import "partials/navigation";
+@import "partials/forms";
 
 // Plugins
 @import "partials/plugins/plugins";

src/app/core/scss/partials/_angular-material-fix.scss

@@ -3,4 +3,4 @@
     .mat-button-ripple {
         border-radius: 50%;
     }
-}
+}

src/app/core/scss/partials/_forms.scss

@@ -0,0 +1,15 @@
+button,
+input[type=email],
+input[type=tel],
+input[type=text],
+input[type=password],
+input[type=image],
+input[type=submit],
+input[type=button],
+input[type=search],
+textarea {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+}

src/app/core/scss/partials/_global.scss

@@ -2,6 +2,10 @@
     box-sizing: border-box;
 }
 
+html {
+   
+}
+
 html, body {
     margin: 0;
     width: 100%;
@@ -21,4 +25,4 @@ body {
     > md-sidenav-container {
         height: 100%;
     }
-}
+}

src/app/core/scss/partials/_icons.scss

@@ -0,0 +1,22 @@
+i,
+md-icon {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    line-height: 24px;
+
+    @for $size from 2 through 128 {
+
+        &.s-#{$size * 2} {
+            font-size: #{($size * 2) + 'px'} !important;
+            width: #{($size * 2) + 'px'} !important;
+            height: #{($size * 2) + 'px'} !important;
+            min-width: #{($size * 2) + 'px'} !important;
+            min-height: #{($size * 2) + 'px'} !important;
+            line-height: #{($size * 2) + 'px'} !important;
+        }
+    }
+}

src/app/core/scss/partials/_material.scss

@@ -39,6 +39,54 @@
     }
 }
 
+.avatar-wrapper {
+    position: relative;
+
+    .avatar {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    md-icon.status {
+        position: absolute;
+        top: 28px;
+        left: 28px;
+    }
+}
+
+md-icon.status {
+    border-radius: 50%;
+
+    &.online {
+        color: #4CAF50;
+        &:before {
+            content: "check_circle";
+        }
+    }
+
+    &.do-not-disturb {
+        color: #F44336;
+        &:before {
+            content: "do_not_disturb_on";
+        }
+    }
+
+    &.away {
+        background-color: #FFC107;
+        color: #FFFFFF;
+        &:before {
+            content: "access_time";
+        }
+    }
+
+    &.offline {
+        color: #646464;
+        background-color: #FFFFFF;
+        &:before {
+            content: "not_interested";
+        }
+    }
+}
+
 /*----------------------------------------------------------------*/
 /*  Forms
 /*----------------------------------------------------------------*/

src/app/core/scss/partials/_normalize.scss

@@ -0,0 +1,447 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+    display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+    background-color: transparent; /* 1 */
+    -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+    font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+    background-color: #ff0;
+    color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+    display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+    border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: sans-serif; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+    display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+    display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+    display: none;
+}

src/app/core/scss/partials/_spacing.scss

@@ -0,0 +1,62 @@
+// Margin and Padding
+@each $prop, $abbrev in (margin: m, padding: p) {
+
+    @for $index from 0 through 64 {
+        $size: $index *4;
+        $length: #{$size}px;
+        .#{$abbrev}-#{$size} {
+            #{$prop}: $length !important;
+        }
+        .#{$abbrev}t-#{$size} {
+            #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r-#{$size} {
+            #{$prop}-right: $length !important;
+        }
+        .#{$abbrev}b-#{$size} {
+            #{$prop}-bottom: $length !important;
+        }
+        .#{$abbrev}l-#{$size} {
+            #{$prop}-left: $length !important;
+        }
+        .#{$abbrev}x-#{$size} {
+            #{$prop}-right: $length !important;
+            #{$prop}-left: $length !important;
+        }
+        .#{$abbrev}y-#{$size} {
+            #{$prop}-top: $length !important;
+            #{$prop}-bottom: $length !important;
+        }
+    }
+}
+
+// Some special margin utils
+.m-auto {
+    margin: auto !important;
+}
+
+.mt-auto {
+    margin-top: auto !important;
+}
+
+.mr-auto {
+    margin-right: auto !important;
+}
+
+.mb-auto {
+    margin-bottom: auto !important;
+}
+
+.ml-auto {
+    margin-left: auto !important;
+}
+
+.mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}