(FuseMaterialColorPickerComponent) added.

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -0,0 +1,79 @@
+<button md-icon-button
+        [mdMenuTriggerFor]="colorMenu"
+        (onMenuOpen)="onMenuOpen()"
+        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
+    <md-icon>palette</md-icon>
+</button>
+
+<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
+
+    <header [ngClass]="selectedColor?.class || 'md-accent-bg'"
+            class="mat-elevation-z4"
+            fxLayout="row"
+            fxLayoutAlign="space-between center">
+
+        <button md-icon-button
+                [style.visibility]="view==='hues'?'visible':'hidden'"
+                (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
+            <md-icon class="s-20">arrow_back</md-icon>
+        </button>
+
+        <span *ngIf="selectedColor?.palette">
+            {{selectedColor.palette}} {{selectedColor.hue}}
+        </span>
+
+        <span *ngIf="!selectedColor?.palette">
+            Select Color
+        </span>
+
+        <button md-icon-button
+                class="remove-color-button"
+                (click)="removeColor()"
+                aria-label="Remove Color">
+            <md-icon class="s-20">delete</md-icon>
+        </button>
+    </header>
+
+
+    <div [ngSwitch]="view" class="views">
+
+        <div class="view"
+             *ngSwitchCase="'palettes'"
+             [@slideInLeft]>
+
+            <div fxLayout="row" fxLayoutWrap
+                 fxLayoutAlign="start start"
+                 class="colors" perfect-scrollbar>
+                <div class="color"
+                     [ngClass]="'md-'+color.key+'-bg'"
+                     *ngFor="let color of (colors | keys)"
+                     (click)="$event.stopPropagation();selectPalette(color.key)"
+                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                    <span class="label">
+                        {{color.key}}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="view"
+             *ngSwitchCase="'hues'"
+             [@slideInRight]>
+            <div fxLayout="row" fxLayoutWrap
+                 fxLayoutAlign="start start"
+                 class="colors" perfect-scrollbar>
+                <div class="color"
+                     *ngFor="let hue of hues"
+                     [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
+                     (click)="selectHue(hue)"
+                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                    <span class="label">
+                        {{hue}}
+                    </span>
+                    <md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</md-menu>

src/app/core/components/material-color-picker/material-color-picker.component.scss

@@ -0,0 +1,53 @@
+.fuse-material-color-picker-menu {
+    width: 208px;
+
+    .mat-menu-content {
+        padding: 0;
+
+        .views {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+            min-height: 258px;
+            height: 258px;
+
+            .view {
+                position: absolute;
+                width: 208px;
+                height: 100%;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                top: 0;
+
+                .colors {
+                    position: relative;
+                    padding: 4px;
+
+                    .color {
+                        position: relative;
+                        width: 46px;
+                        height: 46px;
+                        margin: 2px;
+                        border-radius: 0;
+                        cursor: pointer;
+
+                        .label {
+                            padding: 2px;
+                            font-size: 10px;
+                        }
+
+                        md-icon {
+                            position: absolute;
+                            top: 2px;
+                            right: 2px;
+                            font-size: 16px;
+                            opacity: 0.7;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -0,0 +1,191 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { MatColors } from '../../matColors';
+import { Animations } from '../../animations';
+
+@Component({
+    selector     : 'fuse-material-color-picker',
+    templateUrl  : './material-color-picker.component.html',
+    styleUrls    : ['./material-color-picker.component.scss'],
+    animations   : [Animations.slideInLeft, Animations.slideInRight],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
+{
+    colors: any;
+    selectedColor: any;
+    hues: string[];
+    view = 'palettes';
+
+    @Input() selectedPalette = '';
+    @Input() selectedHue = '';
+    @Input() selectedFg = '';
+    @Input() value: any;
+    @Output() valueChange = new EventEmitter();
+    @Output() selectedPaletteChange = new EventEmitter();
+    @Output() selectedHueChange = new EventEmitter();
+    @Output() selectedClassChange = new EventEmitter();
+    @Output() selectedBgChange = new EventEmitter();
+    @Output() selectedFgChange = new EventEmitter();
+
+    _selectedClass = '';
+    @Input()
+    set selectedClass(value: string)
+    {
+        if ( value !== '' && this._selectedClass !== value )
+        {
+            const color = value.split('-');
+            if ( color.length >= 5 )
+            {
+                this.selectedPalette = color[1] + '-' + color[2];
+                this.selectedHue = color[3];
+            }
+            else
+            {
+                this.selectedPalette = color[1];
+                this.selectedHue = color[2];
+            }
+        }
+        this._selectedClass = value;
+    }
+
+    get selectedClass(): string
+    {
+        return this._selectedClass;
+    }
+
+    _selectedBg = '';
+    @Input()
+    set selectedBg(value: string)
+    {
+        if ( value !== '' && this._selectedBg !== value )
+        {
+            for ( const palette in this.colors )
+            {
+                if ( !this.colors.hasOwnProperty(palette) )
+                {
+                    continue;
+                }
+
+                for ( const hue of this.hues )
+                {
+                    if ( this.colors[palette][hue] === value )
+                    {
+                        this.selectedPalette = palette;
+                        this.selectedHue = hue;
+                        break;
+                    }
+                }
+            }
+        }
+        this._selectedBg = value;
+    }
+
+    get selectedBg(): string
+    {
+        return this._selectedBg;
+    }
+
+    constructor()
+    {
+        this.colors = MatColors.all;
+        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    selectPalette(palette)
+    {
+        this.selectedPalette = palette;
+        this.updateSelectedColor();
+        this.view = 'hues';
+    }
+
+    selectHue(hue)
+    {
+        this.selectedHue = hue;
+        this.updateSelectedColor();
+    }
+
+    removeColor()
+    {
+        this.selectedPalette = '';
+        this.selectedHue = '';
+        this.updateSelectedColor();
+    }
+
+    updateSelectedColor()
+    {
+        setTimeout(() => {
+
+            if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
+            {
+                return;
+            }
+
+            if ( this.selectedPalette !== '' && this.selectedHue !== '' )
+            {
+                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
+                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
+                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+            }
+            else
+            {
+                this.selectedClass = '';
+                this.selectedBg = '';
+                this.selectedFg = '';
+            }
+
+            this.selectedColor = {
+                palette: this.selectedPalette,
+                hue    : this.selectedHue,
+                class  : this.selectedClass,
+                bg     : this.selectedBg,
+                fg     : this.selectedFg
+            };
+
+            this.selectedPaletteChange.emit(this.selectedPalette);
+            this.selectedHueChange.emit(this.selectedHue);
+            this.selectedClassChange.emit(this.selectedClass);
+            this.selectedBgChange.emit(this.selectedBg);
+            this.selectedFgChange.emit(this.selectedFg);
+
+            this.value = this.selectedColor;
+            this.valueChange.emit(this.selectedColor);
+        });
+    }
+
+    backToPaletteSelection()
+    {
+        this.view = 'palettes';
+    }
+
+    onMenuOpen()
+    {
+        if ( this.selectedPalette === '' )
+        {
+            this.view = 'palettes';
+        }
+        else
+        {
+            this.view = 'hues';
+        }
+    }
+
+    ngOnChanges(changes: any)
+    {
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        {
+            this.removeColor();
+            return;
+        }
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+        {
+            this.updateSelectedColor();
+        }
+    }
+}

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

@@ -20,6 +20,7 @@ import { FuseNavbarService } from '../../main/navbar/navbar.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
+import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
 
 @NgModule({
     declarations   : [
@@ -28,7 +29,8 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
         FuseHljsComponent,
-        FuseIfOnDomDirective
+        FuseIfOnDomDirective,
+        FuseMaterialColorPickerComponent
     ],
     imports        : [
         FlexLayoutModule,
@@ -57,7 +59,8 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
         ColorPickerModule,
         NgxDnDModule,
         NgxDatatableModule,
-        FuseIfOnDomDirective
+        FuseIfOnDomDirective,
+        FuseMaterialColorPickerComponent
     ],
     entryComponents: [
         FuseConfirmDialogComponent