purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2017-10-14 18:53:00 +03:00
commit e20687034f
70 changed files with 2333 additions and 738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1119
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
package.json
View File

@ -15,43 +15,42 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "4.4.3", "@agm/core": "1.0.0-beta.1",
"@angular/cdk": "2.0.0-beta.11", "@angular/animations": "4.4.5",
"@angular/common": "4.4.3", "@angular/cdk": "2.0.0-beta.12",
"@angular/compiler": "4.4.3", "@angular/common": "4.4.5",
"@angular/core": "4.4.3", "@angular/compiler": "4.4.5",
"@angular/core": "4.4.5",
"@angular/flex-layout": "2.0.0-beta.9", "@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.4.3", "@angular/forms": "4.4.5",
"@angular/http": "4.4.3", "@angular/http": "4.4.5",
"@angular/material": "2.0.0-beta.11", "@angular/material": "2.0.0-beta.12",
"@angular/platform-browser": "4.4.3", "@angular/platform-browser": "4.4.5",
"@angular/platform-browser-dynamic": "4.4.3", "@angular/platform-browser-dynamic": "4.4.5",
"@angular/router": "4.4.3", "@angular/router": "4.4.5",
"@swimlane/ngx-charts": "6.0.2", "@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0", "@swimlane/ngx-dnd": "3.0.0",
"angular-calendar": "0.19.0", "angular-calendar": "0.21.2",
"angular-in-memory-web-api": "0.4.6", "angular-in-memory-web-api": "0.5.0",
"classlist.js": "1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "2.5.0", "core-js": "2.5.1",
"d3": "4.10.0", "d3": "4.10.0",
"hammerjs": "2.0.8", "hammerjs": "2.0.8",
"highlight.js": "9.12.0", "highlight.js": "9.12.0",
"intl": "1.2.5", "intl": "1.2.5",
"md2": "0.0.28", "moment": "2.19.1",
"moment": "2.18.1", "ngx-color-picker": "4.4.0",
"ngx-color-picker": "4.3.1", "ngx-cookie-service": "1.0.9",
"ngx-cookie-service": "1.0.7", "perfect-scrollbar": "1.0.3",
"ngx-perfect-scrollbar": "4.6.2",
"perfect-scrollbar": "0.8.1",
"rxjs": "5.4.3", "rxjs": "5.4.3",
"web-animations-js": "2.3.1", "web-animations-js": "2.3.1",
"zone.js": "0.8.17" "zone.js": "0.8.18"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "1.4.2", "@angular/cli": "1.4.2",
"@angular/compiler-cli": "4.4.3", "@angular/compiler-cli": "4.4.5",
"@angular/language-service": "4.4.3", "@angular/language-service": "4.4.5",
"@angularclass/hmr": "2.1.3", "@angularclass/hmr": "2.1.3",
"@ngtools/webpack": "1.7.1", "@ngtools/webpack": "1.7.1",
"@types/jasmine": "2.6.0", "@types/jasmine": "2.6.0",

10
src/app/core/components/confirm-dialog/confirm-dialog.component.html
View File

@ -1,6 +1,6 @@
<h1 md-dialog-title>Confirm</h1> <h1 matDialogTitle>Confirm</h1>
<div md-dialog-content>{{confirmMessage}}</div> <div mat-dialog-content>{{confirmMessage}}</div>
<div md-dialog-actions class="pt-24"> <div mat-dialog-actions class="pt-24">
<button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button> <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
<button md-button (click)="dialogRef.close(false)">Cancel</button> <button mat-button (click)="dialogRef.close(false)">Cancel</button>
</div> </div>

4
src/app/core/components/confirm-dialog/confirm-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material'; import { MatDialogRef } from '@angular/material';
@Component({ @Component({
selector : 'fuse-confirm-dialog', selector : 'fuse-confirm-dialog',
@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit
{ {
public confirmMessage: string; public confirmMessage: string;
constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>) constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
{ {
} }

15
src/app/core/components/copier/copier.service.ts
View File

@ -9,12 +9,14 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
@Injectable() @Injectable()
export class CopierService { export class CopierService
{
private textarea: HTMLTextAreaElement; private textarea: HTMLTextAreaElement;
/** Copy the text value to the clipboard. */ /** Copy the text value to the clipboard. */
copyText(text: string): boolean { copyText(text: string): boolean
{
this.createTextareaAndSelect(text); this.createTextareaAndSelect(text);
const copySuccessful = document.execCommand('copy'); const copySuccessful = document.execCommand('copy');
@ -27,7 +29,8 @@ export class CopierService {
* Creates a hidden textarea element, sets its value from `text` property, * Creates a hidden textarea element, sets its value from `text` property,
* and makes a selection on it. * and makes a selection on it.
*/ */
private createTextareaAndSelect(text: string) { private createTextareaAndSelect(text: string)
{
// Create a fake element to hold the contents to copy // Create a fake element to hold the contents to copy
this.textarea = document.createElement('textarea'); this.textarea = document.createElement('textarea');
@ -51,8 +54,10 @@ export class CopierService {
} }
/** Remove the text area from the DOM. */ /** Remove the text area from the DOM. */
private removeFake() { private removeFake()
if (this.textarea) { {
if ( this.textarea )
{
document.body.removeChild(this.textarea); document.body.removeChild(this.textarea);
this.textarea = null; this.textarea = null;
} }

100
src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
View File

@ -1,100 +1,100 @@
<div class="demo-sidenav"> <div class="demo-sidenav">
<md-list> <mat-list>
<h3 md-subheader>Sidenav Demo</h3> <h3 matSubheader>Sidenav Demo</h3>
<md-list-item> <mat-list-item>
<span>Sidenav Item 1</span> <span>Sidenav Item 1</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 2</span> <span>Sidenav Item 2</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 3</span> <span>Sidenav Item 3</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 4</span> <span>Sidenav Item 4</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 5</span> <span>Sidenav Item 5</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 6</span> <span>Sidenav Item 6</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 7</span> <span>Sidenav Item 7</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 8</span> <span>Sidenav Item 8</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 9</span> <span>Sidenav Item 9</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 10</span> <span>Sidenav Item 10</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 11</span> <span>Sidenav Item 11</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 12</span> <span>Sidenav Item 12</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 13</span> <span>Sidenav Item 13</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 14</span> <span>Sidenav Item 14</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 15</span> <span>Sidenav Item 15</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 16</span> <span>Sidenav Item 16</span>
</md-list-item> </mat-list-item>
</md-list> </mat-list>
</div> </div>

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

@ -1,23 +1,23 @@
<button md-icon-button <button mat-icon-button
type="button" type="button"
class="mat-elevation-z1" class="mat-elevation-z1"
[mdMenuTriggerFor]="colorMenu" [matMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()" (onMenuOpen)="onMenuOpen()"
[ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'"> [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
<md-icon>palette</md-icon> <mat-icon>palette</mat-icon>
</button> </button>
<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu"> <mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
<header [ngClass]="selectedColor?.class || 'md-accent-bg'" <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
class="mat-elevation-z4" class="mat-elevation-z4"
fxLayout="row" fxLayout="row"
fxLayoutAlign="space-between center"> fxLayoutAlign="space-between center">
<button md-icon-button <button mat-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'" [style.visibility]="view==='hues'?'visible':'hidden'"
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette"> (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
<md-icon class="s-20">arrow_back</md-icon> <mat-icon class="s-20">arrow_back</mat-icon>
</button> </button>
<span *ngIf="selectedColor?.palette"> <span *ngIf="selectedColor?.palette">
@ -28,11 +28,11 @@
Select Color Select Color
</span> </span>
<button md-icon-button <button mat-icon-button
class="remove-color-button" class="remove-color-button"
(click)="removeColor()" (click)="removeColor()"
aria-label="Remove Color"> aria-label="Remove Color">
<md-icon class="s-20">delete</md-icon> <mat-icon class="s-20">delete</mat-icon>
</button> </button>
</header> </header>
@ -47,10 +47,10 @@
fxLayoutAlign="start start" fxLayoutAlign="start start"
class="colors" fusePerfectScrollbar> class="colors" fusePerfectScrollbar>
<div class="color" <div class="color"
[ngClass]="'md-'+color.key+'-bg'" [ngClass]="'mat-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)" *ngFor="let color of (colors | keys)"
(click)="$event.stopPropagation();selectPalette(color.key)" (click)="$event.stopPropagation();selectPalette(color.key)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple> fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label"> <span class="label">
{{color.key}} {{color.key}}
</span> </span>
@ -67,16 +67,16 @@
<div class="color" <div class="color"
*ngFor="let hue of hues" *ngFor="let hue of hues"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'" [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
[ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'" [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)" (click)="selectHue(hue)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple> fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label"> <span class="label">
{{hue}} {{hue}}
</span> </span>
<md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon> <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</md-menu> </mat-menu>

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

@ -11,7 +11,7 @@
overflow: hidden; overflow: hidden;
min-height: 258px; min-height: 258px;
height: 308px; height: 308px;
background-color: #f7f7f7; background-color: #F7F7F7;
.view { .view {
position: absolute; position: absolute;
@ -39,7 +39,7 @@
font-size: 10px; font-size: 10px;
} }
md-icon { mat-icon {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;

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

@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
{ {
this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue]; this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]; this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
} }
else else
{ {

6
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
View File

@ -1,7 +1,7 @@
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon> <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a> </a>
<div class="children" [ngClass]="{'open': isOpen}"> <div class="children" [ngClass]="{'open': isOpen}">

19
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
View File

@ -1,6 +1,17 @@
<a class="nav-link" md-ripple <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
[routerLink]="[item.url]" routerLinkActive="active"> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span> <span class="nav-link-badge" *ngIf="item.badge"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</a> </a>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>

117
src/app/core/components/navigation/navigation.service.ts
View File

@ -19,6 +19,7 @@ export class FuseNavigationService
/** /**
* Get navigation model * Get navigation model
*
* @returns {any[]} * @returns {any[]}
*/ */
getNavigationModel() getNavigationModel()
@ -28,19 +29,125 @@ export class FuseNavigationService
/** /**
* Set the navigation model * Set the navigation model
*
* @param model * @param model
*/ */
setNavigationModel(model) setNavigationModel(model)
{ {
// console.log(model);
this.navigationModel = model; this.navigationModel = model;
console.log(this.navigationModel);
this.onNavigationModelChange.next(this.navigationModel.model); this.onNavigationModelChange.next(this.navigationModel.model);
} }
/**
* Add new navigation item
* to the given location
*/
addNavigationItem(location, item)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find the navigation item
const navItem = this.findNavigationItemById(locationArr);
// Act according to the item type
switch ( navItem.type )
{
case 'item':
// Create a children array
navItem.children = [];
// Push the item
navItem.children.push(item);
// Change the item type to collapsable
navItem.type = 'collapse';
break;
case 'collapse':
// Push the item
navItem.children.push(item);
break;
case 'group':
// Push the item
navItem.children.push(item);
break;
default:
break;
}
}
/**
* Get navigation item from
* given location
*
* @param location
*/
getNavigationItem(location)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find and return the navigation item
return this.findNavigationItemById(locationArr);
}
/**
* Find navigation item by location
*
* @param location
* @param navigation
*/
findNavigationItemById(location, navigation?)
{
if ( !navigation )
{
navigation = this.navigationModel.model;
}
// Iterate through the given navigation
for ( const navItem of navigation )
{
// If the nav item id equals the first location...
if ( navItem.id === location[0] )
{
// If there is more location to look at...
if ( location.length > 1 )
{
// Remove the first item of the location
location.splice(0, 1);
// Go nested...
return this.findNavigationItemById(location, navItem.children);
}
// Otherwise just return the nav item
else
{
return navItem;
}
}
}
}
/** /**
* Get flattened navigation array * Get flattened navigation array
* @param navigationItems * @param navigationItems

6
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
View File

@ -1,7 +1,7 @@
<a class="nav-link" md-ripple (click)="toggleOpen($event)"> <a class="nav-link" matRipple (click)="toggleOpen($event)">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon> <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a> </a>
<div class="children" [@slideInOut]="isOpen"> <div class="children" [@slideInOut]="isOpen">
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children">

19
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,6 +1,17 @@
<a class="nav-link" md-ripple <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
[routerLink]="[item.url]" routerLinkActive="active"> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span> <span class="nav-link-badge" *ngIf="item.badge"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</a> </a>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>

10
src/app/core/components/search-bar/search-bar.component.html
View File

@ -1,20 +1,20 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto"> <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex> <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<label for="fuse-search-bar-input"> <label for="fuse-search-bar-input">
<button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()" <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed"> *ngIf="collapsed">
<md-icon class="s-24">search</md-icon> <mat-icon class="s-24">search</mat-icon>
</button> </button>
<!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed"> <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
<md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner> <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
</span>--> </span>-->
</label> </label>
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex> <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
<button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()" <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
aria-label="Collapse Search Bar"> aria-label="Collapse Search Bar">
<md-icon class="s-24">close</md-icon> <mat-icon class="s-24">close</mat-icon>
</button> </button>
</div> </div>

60
src/app/core/components/shortcuts/shortcuts.component.html
View File

@ -2,8 +2,8 @@
<div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center" <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
fxHide fxShow.lt-md> fxHide fxShow.lt-md>
<button md-icon-button (click)="showMobileShortcutsPanel()"> <button mat-icon-button (click)="showMobileShortcutsPanel()">
<md-icon class="amber-600-fg">star</md-icon> <mat-icon class="amber-600-fg">star</mat-icon>
</button> </button>
</div> </div>
@ -16,8 +16,8 @@
<div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center" <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
*ngFor="let shortcutItem of shortcutItems"> *ngFor="let shortcutItem of shortcutItems">
<a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url"> <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
<md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon> <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold"> <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
{{shortcutItem.title.substr(0, 1).toUpperCase()}} {{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
@ -25,64 +25,64 @@
</div> </div>
<button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
(onMenuOpen)="onMenuOpen()"> (onMenuOpen)="onMenuOpen()">
<md-icon class="amber-600-fg">star</md-icon> <mat-icon class="amber-600-fg">star</mat-icon>
</button> </button>
</div> </div>
<div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md> <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
<button md-icon-button (click)="hideMobileShortcutsPanel()"> <button mat-icon-button (click)="hideMobileShortcutsPanel()">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<md-menu #addMenu="mdMenu" class="w-240"> <mat-menu #addMenu="matMenu" class="w-240">
<md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never"> <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
<input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)"> <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
</md-input-container> </mat-form-field>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar> <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<md-list-item *ngFor="let shortcutItem of shortcutItems" <mat-list-item *ngFor="let shortcutItem of shortcutItems"
(click)="toggleShortcut($event, shortcutItem)"> (click)="toggleShortcut($event, shortcutItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center"> <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon> <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row" <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon"> fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
{{shortcutItem.title.substr(0, 1).toUpperCase()}} {{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
<p md-line fxFlex>{{shortcutItem.title}}</p> <p matLine fxFlex>{{shortcutItem.title}}</p>
<md-icon class="ml-8">star</md-icon> <mat-icon class="ml-8">star</mat-icon>
</div> </div>
</md-list-item> </mat-list-item>
<md-list-item *ngIf="shortcutItems.length === 0"> <mat-list-item *ngIf="shortcutItems.length === 0">
<p> <p>
<small>No shortcuts yet!</small> <small>No shortcuts yet!</small>
</p> </p>
</md-list-item> </mat-list-item>
</md-nav-list> </mat-nav-list>
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar> <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<md-list-item *ngFor="let navigationItem of filteredNavigationItems" <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
(click)="toggleShortcut($event, navigationItem)"> (click)="toggleShortcut($event, navigationItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center"> <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon> <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row" <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!navigationItem.icon"> fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
{{navigationItem.title.substr(0, 1).toUpperCase()}} {{navigationItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
<p md-line fxFlex>{{navigationItem.title}}</p> <p matLine fxFlex>{{navigationItem.title}}</p>
<md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon> <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
</div> </div>
</md-list-item> </mat-list-item>
</md-nav-list> </mat-nav-list>
</md-menu> </mat-menu>
</div> </div>

85
src/app/core/components/theme-options/theme-options.component.html
View File

@ -1,50 +1,50 @@
<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()"> <button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
<md-icon>settings</md-icon> <mat-icon>settings</mat-icon>
</button> </button>
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div> <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8"> <div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
<button md-icon-button class="close-button" (click)="closeBar()"> <button mat-icon-button class="close-button" (click)="closeBar()">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start"> <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3>Navigation:</h3> <h3>Navigation:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Toolbar:</h3> <h3 class="mt-24">Toolbar:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Footer:</h3> <h3 class="mt-24">Footer:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Layout Mode:</h3> <h3 class="mt-24">Layout Mode:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
</md-radio-group> </mat-radio-group>
<md-divider></md-divider> <mat-divider></mat-divider>
<h3>Colors:</h3> <h3>Colors:</h3>
<div class="colors"> <div class="colors">
@ -69,30 +69,31 @@
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
<h3>Router Animation:</h3> <h3>Router Animation:</h3>
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation"> <mat-form-field class="w-100-p">
<md-option value="none"> <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<mat-option value="none">
None None
</md-option> </mat-option>
<md-option value="slideUp"> <mat-option value="slideUp">
Slide up Slide up
</md-option> </mat-option>
<md-option value="slideDown"> <mat-option value="slideDown">
Slide down Slide down
</md-option> </mat-option>
<md-option value="slideRight"> <mat-option value="slideRight">
Slide right Slide right
</md-option> </mat-option>
<md-option value="slideLeft"> <mat-option value="slideLeft">
Slide left Slide left
</md-option> </mat-option>
<md-option value="fadeIn"> <mat-option value="fadeIn">
Fade in Fade in
</md-option> </mat-option>
</md-select> </mat-select>
</mat-form-field>
</div> </div>
</div> </div>

3
src/app/core/components/theme-options/theme-options.component.scss
View File

@ -14,6 +14,7 @@
display: block; display: block;
right: 0; right: 0;
top: 160px; top: 160px;
z-index: 998;
&.bar-closed .theme-options-panel { &.bar-closed .theme-options-panel {
display: none; display: none;
@ -102,7 +103,7 @@
opacity: .75; opacity: .75;
z-index: 998; z-index: 998;
md-icon { mat-icon {
animation: rotating 3s linear infinite; animation: rotating 3s linear infinite;
} }

2
src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
View File

@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
{ {
setTimeout(() => { setTimeout(() => {
this.viewContainer.createEmbeddedView(this.templateRef); this.viewContainer.createEmbeddedView(this.templateRef);
}, 350); }, 300);
this.isCreated = true; this.isCreated = true;
} }
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

16
src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
View File

@ -1,5 +1,5 @@
import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import * as Ps from 'perfect-scrollbar'; import PerfectScrollbar from 'perfect-scrollbar';
import { FuseConfigService } from '../../services/config.service'; import { FuseConfigService } from '../../services/config.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
@ -13,10 +13,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
isDisableCustomScrollbars = false; isDisableCustomScrollbars = false;
isMobile = false; isMobile = false;
isInitialized = true; isInitialized = true;
ps;
constructor( constructor(
private element: ElementRef, private element: ElementRef,
private zone: NgZone,
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService,
private platform: Platform private platform: Platform
) )
@ -48,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
return; return;
} }
this.zone.runOutsideAngular(() => {
// Initialize the perfect-scrollbar // Initialize the perfect-scrollbar
Ps.initialize(this.element.nativeElement); this.ps = new PerfectScrollbar(this.element.nativeElement);
});
} }
ngOnDestroy() ngOnDestroy()
@ -65,7 +62,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
this.onSettingsChanged.unsubscribe(); this.onSettingsChanged.unsubscribe();
// Destroy the perfect-scrollbar // Destroy the perfect-scrollbar
Ps.destroy(this.element.nativeElement); this.ps.destroy();
} }
update() update()
@ -76,7 +73,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
} }
// Update the perfect-scrollbar // Update the perfect-scrollbar
Ps.update(this.element.nativeElement); this.ps.update();
} }
destroy() destroy()
@ -126,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
// PS has weird event sending order, this is a workaround for that // PS has weird event sending order, this is a workaround for that
this.update(); this.update();
this.update(); this.update();
} }
else if ( value !== this.element.nativeElement[target] ) else if ( value !== this.element.nativeElement[target] )

99
src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts Normal file
View File

@ -0,0 +1,99 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { FuseMatchMedia } from '../../services/match-media.service';
import { ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Subscription';
@Directive({
selector: '[fuseMatSidenavHelper]'
})
export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@HostBinding('class.mat-is-locked-open') isLockedOpen = true;
@HostBinding('class.mat-stop-transition') stopTransition = true;
@Input('fuseMatSidenavHelper') id: string;
@Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
constructor(
private fuseMatSidenavService: FuseMatSidenavHelperService,
private fuseMatchMedia: FuseMatchMedia,
private observableMedia: ObservableMedia,
private matSidenav: MatSidenav
)
{
}
ngOnInit()
{
this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.open();
});
this.stopTransition = false;
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.close();
});
setTimeout(() => {
this.stopTransition = false;
}, 3000);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.open();
});
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.close();
});
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
}
@Directive({
selector: '[fuseMatSidenavToggler]'
})
export class FuseMatSidenavTogglerDirective
{
@Input('fuseMatSidenavToggler') id;
constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
{
}
@HostListener('click')
onClick()
{
this.fuseMatSidenavService.getSidenav(this.id).toggle();
}
}

6
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts → src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MdSidenav } from '@angular/material'; import { MatSidenav } from '@angular/material';
@Injectable() @Injectable()
export class FuseMdSidenavHelperService export class FuseMatSidenavHelperService
{ {
sidenavInstances: MdSidenav[]; sidenavInstances: MatSidenav[];
constructor() constructor()
{ {

99
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
View File

@ -1,99 +0,0 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
import { FuseMatchMedia } from '../../services/match-media.service';
import { ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Subscription';
@Directive({
selector: '[fuseMdSidenavHelper]'
})
export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@HostBinding('class.md-is-locked-open') isLockedOpen = true;
@HostBinding('class.md-stop-transition') stopTransition = true;
@Input('fuseMdSidenavHelper') id: string;
@Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
constructor(
private fuseMdSidenavService: FuseMdSidenavHelperService,
private fuseMatchMedia: FuseMatchMedia,
private observableMedia: ObservableMedia,
private mdSidenav: MdSidenav
)
{
}
ngOnInit()
{
this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
});
this.stopTransition = false;
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
});
setTimeout(() => {
this.stopTransition = false;
}, 3000);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
});
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
});
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
}
@Directive({
selector: '[fuseMdSidenavToggler]'
})
export class FuseMdSidenavTogglerDirective
{
@Input('fuseMdSidenavToggler') id;
constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
{
}
@HostListener('click')
onClick()
{
this.fuseMdSidenavService.getSidenav(this.id).toggle();
}
}

188
src/app/core/modules/material.module.ts
View File

@ -1,106 +1,108 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { import {
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCheckboxModule, MatCheckboxModule,
MdToolbarModule, MatToolbarModule,
MdTooltipModule, MatTooltipModule,
MdCardModule, MatCardModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatFormFieldModule,
MdIconModule, MatGridListModule,
MdInputModule, MatIconModule,
MdListModule, MatInputModule,
MdMenuModule, MatListModule,
MdNativeDateModule, MatMenuModule,
MdPaginatorModule, MatNativeDateModule,
MdProgressBarModule, MatPaginatorModule,
MdProgressSpinnerModule, MatProgressBarModule,
MdRadioModule, MatProgressSpinnerModule,
MdRippleModule, MatRadioModule,
MdSelectModule, MatRippleModule,
MdSidenavModule, MatSelectModule,
MdSliderModule, MatSidenavModule,
MdSlideToggleModule, MatSliderModule,
MdSnackBarModule, MatSlideToggleModule,
MdStepperModule, MatSnackBarModule,
MdSortModule, MatSortModule,
MdTableModule, MatTableModule,
MdTabsModule MatTabsModule,
MatStepperModule
} from '@angular/material'; } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
@NgModule({ @NgModule({
imports: [ imports: [
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCardModule, MatCardModule,
MdCheckboxModule, MatCheckboxModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatFormFieldModule,
MdIconModule, MatGridListModule,
MdInputModule, MatIconModule,
MdListModule, MatInputModule,
MdMenuModule, MatListModule,
MdNativeDateModule, MatMenuModule,
MdPaginatorModule, MatNativeDateModule,
MdProgressBarModule, MatPaginatorModule,
MdProgressSpinnerModule, MatProgressBarModule,
MdRadioModule, MatProgressSpinnerModule,
MdRippleModule, MatRadioModule,
MdSelectModule, MatRippleModule,
MdSidenavModule, MatSelectModule,
MdSliderModule, MatSidenavModule,
MdSlideToggleModule, MatSliderModule,
MdSnackBarModule, MatSlideToggleModule,
MdStepperModule, MatSnackBarModule,
MdSortModule, MatStepperModule,
MdTableModule, MatSortModule,
MdTabsModule, MatTableModule,
MdToolbarModule, MatTabsModule,
MdTooltipModule, MatToolbarModule,
MatTooltipModule,
CdkTableModule CdkTableModule
], ],
exports: [ exports: [
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCardModule, MatCardModule,
MdCheckboxModule, MatCheckboxModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatGridListModule,
MdIconModule, MatIconModule,
MdInputModule, MatInputModule,
MdListModule, MatListModule,
MdMenuModule, MatMenuModule,
MdNativeDateModule, MatNativeDateModule,
MdPaginatorModule, MatPaginatorModule,
MdProgressBarModule, MatProgressBarModule,
MdProgressSpinnerModule, MatProgressSpinnerModule,
MdRadioModule, MatRadioModule,
MdRippleModule, MatRippleModule,
MdSelectModule, MatSelectModule,
MdSidenavModule, MatSidenavModule,
MdSliderModule, MatSliderModule,
MdSlideToggleModule, MatSlideToggleModule,
MdSnackBarModule, MatSnackBarModule,
MdStepperModule, MatStepperModule,
MdSortModule, MatSortModule,
MdTableModule, MatTableModule,
MdTabsModule, MatTabsModule,
MdToolbarModule, MatToolbarModule,
MdTooltipModule, MatTooltipModule,
CdkTableModule CdkTableModule
] ]
}) })

21
src/app/core/modules/shared.module.ts
View File

@ -8,24 +8,23 @@ import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
import { FusePipesModule } from '../pipes/pipes.module'; import { FusePipesModule } from '../pipes/pipes.module';
import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseMatchMedia } from '../services/match-media.service'; import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service'; import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { Md2Module } from 'md2';
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
@NgModule({ @NgModule({
declarations : [ declarations : [
FuseMdSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMdSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FuseConfirmDialogComponent, FuseConfirmDialogComponent,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHljsComponent,
@ -42,16 +41,15 @@ import { CookieService } from 'ngx-cookie-service';
ReactiveFormsModule, ReactiveFormsModule,
ColorPickerModule, ColorPickerModule,
NgxDnDModule, NgxDnDModule,
NgxDatatableModule, NgxDatatableModule
Md2Module
], ],
exports : [ exports : [
FlexLayoutModule, FlexLayoutModule,
MaterialModule, MaterialModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
FuseMdSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMdSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FusePipesModule, FusePipesModule,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHljsComponent,
@ -61,8 +59,7 @@ import { CookieService } from 'ngx-cookie-service';
NgxDnDModule, NgxDnDModule,
NgxDatatableModule, NgxDatatableModule,
FuseIfOnDomDirective, FuseIfOnDomDirective,
FuseMaterialColorPickerComponent, FuseMaterialColorPickerComponent
Md2Module
], ],
entryComponents: [ entryComponents: [
FuseConfirmDialogComponent FuseConfirmDialogComponent
@ -71,7 +68,7 @@ import { CookieService } from 'ngx-cookie-service';
CookieService, CookieService,
FuseMatchMedia, FuseMatchMedia,
FuseNavbarVerticalService, FuseNavbarVerticalService,
FuseMdSidenavHelperService FuseMatSidenavHelperService
] ]
}) })

2
src/app/core/scss/core.scss
View File

@ -3,7 +3,7 @@
@import '~@swimlane/ngx-datatable/release/themes/material.css'; @import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css'; @import '~@swimlane/ngx-datatable/release/assets/icons.css';
// Perfect scrollbar // Perfect scrollbar
@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css'; @import '~perfect-scrollbar/css/perfect-scrollbar.css';
// Fuse // Fuse
@import "fuse"; @import "fuse";

6
src/app/core/scss/partials/_angular-material-fix.scss
View File

@ -7,11 +7,11 @@
} }
// Fix: "Sidenav opening with animations for the first time" // Fix: "Sidenav opening with animations for the first time"
md-sidenav-container { mat-sidenav-container {
md-sidenav { mat-sidenav {
&[md-is-locked-open].md-stop-transition { &[mat-is-locked-open].mat-stop-transition {
transition: none !important; transition: none !important;
transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important;
opacity: 0; opacity: 0;

48
src/app/core/scss/partials/_colors.scss
View File

@ -51,14 +51,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// If the base text color is black... // If the base text color is black...
@if (rgba(black, 1) == rgba($baseTextColor, 1)) { @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
&.secondary-text,
.secondary-text,
.mat-icon, .mat-icon,
.icon, .icon {
.md2-datepicker-button {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
&.secondary-text,
.secondary-text {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text, &.hint-text,
.hint-text, .hint-text,
&.disabled-text, &.disabled-text,
@ -80,8 +82,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@else { @else {
.mat-icon, .mat-icon,
.icon, .icon {
.md2-datepicker-button {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
@ -111,49 +112,60 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@mixin generateMaterialElementColors($contrastColor) { @mixin generateMaterialElementColors($contrastColor) {
// If the contrast color is white... // If the contrast color is white...
$foreground: $mat-dark-theme-foreground; $fuseForeground: (
base: white,
text: white,
hint-text: rgba(white, 0.5),
divider: rgba(white, 0.12),
);
// If the contrast color is black... // If the contrast color is black...
@if (rgba(black, 1) == rgba($contrastColor, 1)) { @if (rgba(black, 1) == rgba($contrastColor, 1)) {
$foreground: $mat-light-theme-foreground;
$fuseForeground: (
base: black,
hint-text: rgba(black, 0.38),
divider: rgba(black, 0.12),
);
} }
// Native Input // Native Input
input[type="text"] { input[type="text"] {
color: mat-color($foreground, base); color: map_get($fuseForeground, base);
} }
// Input // Input
.mat-input-placeholder { .mat-input-placeholder {
color: mat-color($foreground, hint-text); color: map_get($fuseForeground, hint-text);
} }
.mat-input-underline { .mat-input-underline {
background-color: mat-color($foreground, divider); background-color: map_get($fuseForeground, divider);
} }
// Select // Select
.mat-select-trigger, .mat-select-trigger,
.mat-select-arrow { .mat-select-arrow {
color: mat-color($foreground, hint-text); color: map_get($fuseForeground, hint-text);
} }
.mat-select-underline { .mat-select-underline {
background-color: mat-color($foreground, divider); background-color: map_get($fuseForeground, divider);
} }
.mat-select-disabled .mat-select-value, .mat-select-disabled .mat-select-value,
.mat-select-arrow, .mat-select-arrow,
.mat-select-trigger { .mat-select-trigger {
color: mat-color($foreground, hint-text); color: map_get($fuseForeground, hint-text);
} }
.mat-select-content, .mat-select-panel-done-animating { .mat-select-content,
background: mat-color($background, card); .mat-select-panel-done-animating {
background: map_get($background, card);
} }
.mat-select-value { .mat-select-value {
color: mat-color($foreground, text); color: map_get($fuseForeground, text);
} }
} }
@ -164,7 +176,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
background-color: $color !important; background-color: $color !important;
} }
.md-#{$colorName}#{$hue}-bg { .mat-#{$colorName}#{$hue}-bg {
background-color: $color !important; background-color: $color !important;
color: $contrastColor !important; color: $contrastColor !important;

2
src/app/core/scss/partials/_global.scss
View File

@ -1,6 +1,6 @@
body { body {
> md-sidenav-container { > mat-sidenav-container {
height: 100%; height: 100%;
} }
} }

2
src/app/core/scss/partials/_icons.scss
View File

@ -1,5 +1,5 @@
i, i,
md-icon { mat-icon {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
font-size: 24px; font-size: 24px;
width: 24px; width: 24px;

12
src/app/core/scss/partials/_material.scss
View File

@ -46,14 +46,14 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
md-icon.status { mat-icon.status {
position: absolute; position: absolute;
top: 28px; top: 28px;
left: 28px; left: 28px;
} }
} }
md-icon.status { mat-icon.status {
border-radius: 50%; border-radius: 50%;
&.online { &.online {
@ -116,7 +116,7 @@ md-icon.status {
max-height: 48px; max-height: 48px;
height: 48px; height: 48px;
md-icon { mat-icon {
margin: 0 16px 0 0; margin: 0 16px 0 0;
} }
@ -142,7 +142,7 @@ md-icon.status {
} }
} }
md-divider { mat-divider {
margin: 8px 0; margin: 8px 0;
} }
} }
@ -196,7 +196,7 @@ md-icon.status {
background-color: #FFFFFF; background-color: #FFFFFF;
width: 280px; width: 280px;
border-radius: 2px; border-radius: 2px;
margin: 24px 24px 0 0; margin: 12px;
overflow: hidden; overflow: hidden;
&.style-1 { &.style-1 {
@ -234,7 +234,7 @@ md-icon.status {
} }
} }
md-divider { mat-divider {
margin: 16px 32px; margin: 16px 32px;
} }

43
src/app/core/scss/partials/_page-layouts.scss
View File

@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
> md-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex: 1; flex: 1;
background: none; background: none;
@ -132,11 +132,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
min-width: 240px; min-width: 240px;
max-width: 240px; max-width: 240px;
height: auto; height: auto;
z-index: 2; z-index: 4;
overflow-y: hidden; overflow-y: hidden;
@include mat-elevation(7); @include mat-elevation(7);
&.md-is-locked-open { &.mat-is-locked-open {
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height; height: $carded-header-height;
min-height: $carded-header-height; min-height: $carded-header-height;
max-height: $carded-header-height; max-height: $carded-header-height;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
min-height: $carded-header-height-sm;
max-height: $carded-header-height-sm;
}
} }
.content { .content {
@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height-without-toolbar; height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar; min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar; max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
} }
.content-card { .content-card {
@ -216,11 +228,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav { &.left-sidenav {
// Sidenav // Sidenav
> md-sidenav-container { > mat-sidenav-container {
.sidenav { .sidenav {
&.md-is-locked-open { &.mat-is-locked-open {
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
@ -238,12 +250,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.right-sidenav { &.right-sidenav {
// Sidenav // Sidenav
> md-sidenav-container { > mat-sidenav-container {
.sidenav { .sidenav {
order: 999; order: 999;
&.md-is-locked-open { &.mat-is-locked-open {
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
@ -295,7 +307,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
> .mat-sidenav-content, > .mat-sidenav-content,
@ -309,7 +321,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Inner Sidenav // Inner Sidenav
&.inner-sidenav { &.inner-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1; flex: 1;
.sidenav { .sidenav {
@ -338,10 +350,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
> md-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//flex-direction: row;
flex: 1; flex: 1;
background: none; background: none;
z-index: 2; z-index: 2;
@ -354,7 +365,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
z-index: 51; z-index: 51;
@include mat-elevation(7); @include mat-elevation(7);
&.md-is-locked-open { &.mat-is-locked-open {
width: 220px; width: 220px;
min-width: 220px; min-width: 220px;
max-width: 220px; max-width: 220px;
@ -440,7 +451,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
@ -458,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto !important; flex: 1 0 auto !important;
> .mat-sidenav-content, > .mat-sidenav-content,
@ -483,7 +494,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
> .mat-sidenav-content, > .mat-sidenav-content,
> .mat-drawer-content { > .mat-drawer-content {

4
src/app/core/scss/partials/_reset.scss
View File

@ -28,7 +28,7 @@ html, body {
} }
// Reset non angular-material input's default browser/os styles // Reset non angular-material input's default browser/os styles
*:not(md-input-container) { *:not(mat-input-container) {
> input { > input {
border: none; border: none;
@ -55,7 +55,7 @@ html, body {
} }
} }
*:not(md-input-container) { *:not(mat-input-container) {
> input[type="button"], > input[type="button"],
> button, > button,

5
src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
View File

@ -1,11 +1,12 @@
.ps { .ps {
position: relative; position: relative;
> .ps__scrollbar-y-rail { > .ps__rail-x {
z-index: 99999; z-index: 99999;
} }
> .ps__scrollbar-y-rail { > .ps__rail-y {
z-index: 99999; z-index: 99999;
left: auto !important;
} }
} }

8
src/app/core/services/config.service.ts
View File

@ -28,12 +28,12 @@ export class FuseConfigService
mode : 'fullwidth' // 'boxed', 'fullwidth' mode : 'fullwidth' // 'boxed', 'fullwidth'
}, },
colorClasses : { colorClasses : {
toolbar: 'md-white-500-bg', toolbar: 'mat-white-500-bg',
navbar : 'md-fuse-dark-500-bg', navbar : 'mat-fuse-dark-700-bg',
footer : 'md-fuse-dark-700-bg' footer : 'mat-fuse-dark-900-bg'
}, },
customScrollbars: true, customScrollbars: true,
routerAnimation : 'fadeIn' routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
}; };
/** /**

61
src/app/fuse-fake-db/faq.ts Normal file
View File

@ -0,0 +1,61 @@
export class FaqFakeDb
{
public static data = [
{
'question': 'Proident tempor est nulla irure ad est?',
'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
},
{
'question': 'Ullamco duis commodo sint ad aliqua aute?',
'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
},
{
'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
'answer': 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.'
},
{
'question': 'Lorem magna cillum consequat consequat mollit?',
'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
},
{
'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
},
{
'question': 'Officia voluptate tempor ut mollit ea cillum?',
'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
},
{
'question': 'Sunt fugiat officia nisi minim sunt duis?',
'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
},
{
'question': 'Non cupidatat enim quis aliquip minim laborum?',
'answer': 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.'
},
{
'question': 'Dolor ex occaecat magna labore laboris qui?',
'answer': 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.'
},
{
'question': 'Nisi et ullamco minim ea proident tempor?',
'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
},
{
'question': 'Amet sunt et quis amet commodo quis?',
'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
},
{
'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
},
{
'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
},
{
'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
'answer': 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.'
}
];
}

12
src/app/main/footer/footer.component.html
View File

@ -1,20 +1,20 @@
<md-toolbar> <mat-toolbar>
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex> <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn" <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
target="_blank" md-button class="md-pink-bg" fxFlex="0 0 auto" fxLayout="row" target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<md-icon class="s-16 mr-sm-4">shopping_cart</md-icon> <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
<span>Purchase FUSE (Angular4+)</span> <span>Purchase FUSE (Angular4+)</span>
</a> </a>
<div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs> <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
<a md-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a> <a mat-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a>
<span>&bull;</span> <span>&bull;</span>
<a md-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a> <a mat-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
</div> </div>
</div> </div>
</md-toolbar> </mat-toolbar>

14
src/app/main/main.component.html
View File

@ -1,6 +1,6 @@
<md-sidenav-container> <mat-sidenav-container>
<div id="fuse-main-content" fxFlexFill> <div id="fuse-main-content">
<!-- TOOLBAR: Above --> <!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseSettings.layout.toolbar === 'above'"> <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
@ -19,8 +19,8 @@
<!-- NAVBAR: Left --> <!-- NAVBAR: Left -->
<fuse-navbar-vertical [folded]="false" <fuse-navbar-vertical [folded]="false"
fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'" class="left-navbar"
class="left-navbar" [class]="fuseSettings.colorClasses.navbar" [class]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'"> *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
</fuse-navbar-vertical> </fuse-navbar-vertical>
<!-- / NAVBAR: Left --> <!-- / NAVBAR: Left -->
@ -62,11 +62,11 @@
</div> </div>
<!-- QUICK PANEL --> <!-- QUICK PANEL -->
<md-sidenav fuseMdSidenavHelper="quick-panel" align="end"> <mat-sidenav fuseMatSidenavHelper="quick-panel" align="end">
<fuse-quick-panel></fuse-quick-panel> <fuse-quick-panel></fuse-quick-panel>
</md-sidenav> </mat-sidenav>
<!-- / QUICK PANEL --> <!-- / QUICK PANEL -->
</md-sidenav-container> </mat-sidenav-container>
<fuse-theme-options></fuse-theme-options> <fuse-theme-options></fuse-theme-options>

3
src/app/main/navbar/horizontal/navbar-horizontal.component.ts
View File

@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
}) })
export class FuseNavbarHorizontalComponent implements OnInit export class FuseNavbarHorizontalComponent implements OnInit
{ {
constructor() { constructor()
{
} }
ngOnInit() ngOnInit()

8
src/app/main/navbar/vertical/navbar-vertical.component.html
View File

@ -5,12 +5,12 @@
<span class="logo-text">FUSE</span> <span class="logo-text">FUSE</span>
</div> </div>
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg> <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md> <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
<md-icon>arrow_back</md-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
</div> </div>

9
src/app/main/navbar/vertical/navbar-vertical.component.scss
View File

@ -134,11 +134,18 @@ fuse-navbar-vertical {
} }
} }
.nav-bar-content { .navbar-content {
flex: 1; flex: 1;
} }
} }
fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical {
display: none;
@include media-breakpoint-down(md) {
display: flex;
}
}
.fuse-navbar-backdrop { .fuse-navbar-backdrop {
position: absolute; position: absolute;
top: 0; top: 0;

17
src/app/main/navbar/vertical/navbar-vertical.component.ts
View File

@ -26,6 +26,8 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective; @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
matchMediaWatcher: Subscription; matchMediaWatcher: Subscription;
navigationServiceWatcher: Subscription;
fusePerfectScrollbarUpdateTimeout;
player: AnimationPlayer; player: AnimationPlayer;
@ -43,8 +45,9 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{ {
navBarService.setNavBar(this); navBarService.setNavBar(this);
this.navigationServiceWatcher =
this.fuseNavigationService.onNavCollapseToggle.subscribe(() => { this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
setTimeout(() => { this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
this.fusePerfectScrollbarDirective.update(); this.fusePerfectScrollbarDirective.update();
}, 310); }, 310);
}); });
@ -112,6 +115,13 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
} }
} }
ngOnDestroy()
{
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
this.matchMediaWatcher.unsubscribe();
this.navigationServiceWatcher.unsubscribe();
}
openBar() openBar()
{ {
this.isClosed = false; this.isClosed = false;
@ -235,9 +245,4 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
}); });
} }
} }
ngOnDestroy()
{
this.matchMediaWatcher.unsubscribe();
}
} }

64
src/app/main/quick-panel/quick-panel.component.html
View File

@ -1,6 +1,6 @@
<md-list class="date" cdk-focus-region-start> <mat-list class="date" cdk-focus-region-start>
<h3 md-subheader cdk-focus-init> <h3 matSubheader cdk-focus-init>
<span>Today</span> <span>Today</span>
</h3> </h3>
@ -14,33 +14,59 @@
<span> {{date | date:'MMMM'}}</span> <span> {{date | date:'MMMM'}}</span>
</div> </div>
</div> </div>
</md-list> </mat-list>
<md-divider cdk-focus-region-end></md-divider> <mat-divider cdk-focus-region-end></mat-divider>
<md-list> <mat-list>
<h3 md-subheader> <h3 matSubheader>
<span>Events</span>
</h3>
<mat-list-item *ngFor="let event of events">
<h3 matLine>{{event.title}}</h3>
<p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
<mat-list>
<h3 matSubheader>
<span>Notes</span>
</h3>
<mat-list-item *ngFor="let note of notes">
<h3 matLine>{{note.title}}</h3>
<p matLine class="secondary-text">{{note.detail}}</p>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
<mat-list>
<h3 matSubheader>
<span>Quick Settings</span> <span>Quick Settings</span>
</h3> </h3>
<md-list-item> <mat-list-item>
<md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" <mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
labelPosition="before"> labelPosition="before">
<h3>Notifications</h3> <h3>Notifications</h3>
</md-slide-toggle> </mat-slide-toggle>
</md-list-item> </mat-list-item>
<md-list-item> <mat-list-item>
<md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" <mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
labelPosition="before"> labelPosition="before">
<h3>Cloud Sync</h3> <h3>Cloud Sync</h3>
</md-slide-toggle> </mat-slide-toggle>
</md-list-item> </mat-list-item>
<md-list-item> <mat-list-item>
<md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" <mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
labelPosition="before"> labelPosition="before">
<h3>Retro Thrusters</h3> <h3>Retro Thrusters</h3>
</md-slide-toggle> </mat-slide-toggle>
</md-list-item> </mat-list-item>
</md-list> </mat-list>

50
src/app/main/toolbar/toolbar.component.html
View File

@ -1,12 +1,14 @@
<md-toolbar class="p-0 mat-elevation-z1"> <mat-toolbar class="p-0 mat-elevation-z1">
<mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="toggle-button-navbar mat-icon-button" <button mat-button class="toggle-button-navbar mat-icon-button"
fuseNavbarVertical="openBar" fxHide.gt-md> fuseNavbarVertical="openBar" fxHide.gt-md>
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
<div class="toolbar-separator" fxHide.gt-md></div> <div class="toolbar-separator" fxHide.gt-md></div>
@ -17,7 +19,7 @@
</div> </div>
</div> </div>
<div class="px-8 px-md-16"> <div class="px-8 px-mat-16">
<fuse-shortcuts></fuse-shortcuts> <fuse-shortcuts></fuse-shortcuts>
</div> </div>
@ -25,35 +27,33 @@
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center"> <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
<md-spinner *ngIf="showSpinner" class="loading-spinner mx-8"></md-spinner> <button mat-button [matMenuTriggerFor]="userMenu"
<button md-button [mdMenuTriggerFor]="userMenu"
class="user-button"> class="user-button">
<div fxLayout="row" fxLayoutAlign="center center"> <div fxLayout="row" fxLayoutAlign="center center">
<img class="avatar" src="assets/images/avatars/profile.jpg"> <img class="avatar" src="assets/images/avatars/profile.jpg">
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span> <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
<md-icon class="s-16" fxHide.xs>keyboard_arrow_down</md-icon> <mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
</div> </div>
</button> </button>
<md-menu #userMenu="mdMenu"> <mat-menu #userMenu="matMenu">
<button md-menu-item> <button mat-menu-item>
<md-icon>account_circle</md-icon> <mat-icon>account_circle</mat-icon>
<span>My Profile</span> <span>My Profile</span>
</button> </button>
<button md-menu-item class=""> <button mat-menu-item class="">
<md-icon>mail</md-icon> <mat-icon>mail</mat-icon>
<span>Inbox</span> <span>Inbox</span>
</button> </button>
<button md-menu-item class=""> <button mat-menu-item class="">
<md-icon>exit_to_app</md-icon> <mat-icon>exit_to_app</mat-icon>
<span>Logout</span> <span>Logout</span>
</button> </button>
</md-menu> </mat-menu>
<div class="toolbar-separator"></div> <div class="toolbar-separator"></div>
@ -61,33 +61,33 @@
<div class="toolbar-separator"></div> <div class="toolbar-separator"></div>
<button md-button fxHide fxShow.gt-xs <button mat-button fxHide fxShow.gt-xs
class="language-button" class="language-button"
[mdMenuTriggerFor]="languageMenu"> [matMenuTriggerFor]="languageMenu">
<div fxLayout="row" fxLayoutAlign="center center"> <div fxLayout="row" fxLayoutAlign="center center">
<img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'"> <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
<span class="iso text-uppercase">{{selectedLanguage.id}}</span> <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
</div> </div>
</button> </button>
<md-menu #languageMenu="mdMenu"> <mat-menu #languageMenu="matMenu">
<button md-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang"> <button mat-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'"> <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
<span class="iso">{{lang.title}}</span> <span class="iso">{{lang.title}}</span>
</div> </div>
</button> </button>
</md-menu> </mat-menu>
<div class="toolbar-separator" fxHide fxShow.gt-xs></div> <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
<button md-icon-button <button mat-icon-button
class="mat-icon-button quick-panel-toggle-button" class="mat-icon-button quick-panel-toggle-button"
fuseMdSidenavToggler="quick-panel" fuseMatSidenavToggler="quick-panel"
aria-label="Toggle quick panel"> aria-label="Toggle quick panel">
<md-icon class="icon">format_list_bulleted</md-icon> <mat-icon class="icon">format_list_bulleted</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</md-toolbar> </mat-toolbar>

14
src/app/main/toolbar/toolbar.component.scss
View File

@ -13,6 +13,15 @@
.mat-toolbar { .mat-toolbar {
background: inherit; background: inherit;
color: inherit; color: inherit;
position: relative;
.loading-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
}
} }
.logo { .logo {
@ -24,11 +33,6 @@
} }
} }
.loading-spinner {
width: 32px;
height: 32px;
}
.user-button, .user-button,
fuse-search-bar, fuse-search-bar,
.language-button, .language-button,

6
src/app/main/toolbar/toolbar.component.ts
View File

@ -13,7 +13,7 @@ export class FuseToolbarComponent
userStatusOptions: any[]; userStatusOptions: any[];
languages: any; languages: any;
selectedLanguage: any; selectedLanguage: any;
showSpinner: boolean; showLoadingBar: boolean;
horizontalNav: boolean; horizontalNav: boolean;
constructor( constructor(
@ -73,11 +73,11 @@ export class FuseToolbarComponent
(event) => { (event) => {
if ( event instanceof NavigationStart ) if ( event instanceof NavigationStart )
{ {
this.showSpinner = true; this.showLoadingBar = true;
} }
if ( event instanceof NavigationEnd ) if ( event instanceof NavigationEnd )
{ {
this.showSpinner = false; this.showLoadingBar = false;
} }
}); });

21
src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.css Normal file
View File

@ -0,0 +1,21 @@
div {
display: flex;
}
input {
border: none;
background: none;
padding: 0;
outline: none;
font: inherit;
text-align: center;
}
span {
opacity: 0;
transition: opacity 200ms;
}
:host.floating span {
opacity: 1;
}

7
src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.html Normal file
View File

@ -0,0 +1,7 @@
<div [formGroup]="parts">
<input class="area" formControlName="area" size="3" [disabled]="disabled">
<span>&ndash;</span>
<input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
<span>&ndash;</span>
<input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
</div>

177
src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts Normal file
View File

@ -0,0 +1,177 @@
import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatFormFieldControl } from '@angular/material/form-field';
import { Subject } from 'rxjs/Subject';
/** Data structure for holding telephone number. */
export class MyTel
{
constructor(public area: string, public exchange: string, public subscriber: string)
{
}
}
/** Custom `MatFormFieldControl` for telephone number input. */
@Component({
selector : 'my-tel-input',
templateUrl: 'form-field-custom-control-example.html',
styleUrls : ['form-field-custom-control-example.css'],
providers : [
{
provide : MatFormFieldControl,
useExisting: MyTelInput
}
],
host : {
'[class.floating]' : 'shouldPlaceholderFloat',
'[id]' : 'id',
'[attr.aria-describedby]': 'describedBy'
}
})
export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
{
static nextId = 0;
parts: FormGroup;
stateChanges = new Subject<void>();
focused = false;
ngControl = null;
errorState = false;
controlType = 'my-tel-input';
get empty()
{
let n = this.parts.value;
return !n.area && !n.exchange && !n.subscriber;
}
get shouldPlaceholderFloat()
{
return this.focused || !this.empty;
}
id = `my-tel-input-${MyTelInput.nextId++}`;
describedBy = '';
@Input()
get placeholder()
{
return this._placeholder;
}
set placeholder(plh)
{
this._placeholder = plh;
this.stateChanges.next();
}
private _placeholder: string;
@Input()
get required()
{
return this._required;
}
set required(req)
{
this._required = coerceBooleanProperty(req);
this.stateChanges.next();
}
private _required = false;
@Input()
get disabled()
{
return this._disabled;
}
set disabled(dis)
{
this._disabled = coerceBooleanProperty(dis);
this.stateChanges.next();
}
private _disabled = false;
@Input()
get value(): MyTel | null
{
let n = this.parts.value;
if ( n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4 )
{
return new MyTel(n.area, n.exchange, n.subscriber);
}
return null;
}
set value(tel: MyTel | null)
{
tel = tel || new MyTel('', '', '');
this.parts.setValue({
area : tel.area,
exchange : tel.exchange,
subscriber: tel.subscriber
});
this.stateChanges.next();
}
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef,
renderer: Renderer2
)
{
this.parts = fb.group({
'area' : '',
'exchange' : '',
'subscriber': ''
});
fm.monitor(elRef.nativeElement, renderer, true).subscribe((origin) => {
this.focused = !!origin;
this.stateChanges.next();
});
}
ngOnDestroy()
{
this.stateChanges.complete();
this.fm.stopMonitoring(this.elRef.nativeElement);
}
setDescribedByIds(ids: string[])
{
this.describedBy = ids.join(' ');
}
onContainerClick(event: MouseEvent)
{
if ( (event.target as Element).tagName.toLowerCase() != 'input' )
{
this.elRef.nativeElement.querySelector('input').focus();
}
}
}
/** @title Form field with custom telephone number input control. */
@Component({
selector: 'form-field-custom-control-example',
template: `
<mat-form-field>
<my-tel-input placeholder="Phone number" required></my-tel-input>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Include area code</mat-hint>
</mat-form-field>
`
})
export class FormFieldCustomControlExample
{
}

8
src/assets/angular-material-examples/form-field-error/form-field-error-example.css Normal file
View File

@ -0,0 +1,8 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}

6
src/assets/angular-material-examples/form-field-error/form-field-error-example.html Normal file
View File

@ -0,0 +1,6 @@
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Enter your email" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>

20
src/assets/angular-material-examples/form-field-error/form-field-error-example.ts Normal file
View File

@ -0,0 +1,20 @@
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
/** @title Form field with error messages */
@Component({
selector : 'form-field-error-example',
templateUrl: 'form-field-error-example.html',
styleUrls : ['form-field-error-example.css']
})
export class FormFieldErrorExample
{
email = new FormControl('', [Validators.required, Validators.email]);
getErrorMessage()
{
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' :
'';
}
}

8
src/assets/angular-material-examples/form-field-hint/form-field-hint-example.css Normal file
View File

@ -0,0 +1,8 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}

13
src/assets/angular-material-examples/form-field-hint/form-field-hint-example.html Normal file
View File

@ -0,0 +1,13 @@
<div class="example-container">
<mat-form-field hintLabel="Max 10 characters">
<input matInput #input maxlength="10" placeholder="Enter some input">
<mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select me">
<mat-option value="option">Option</mat-option>
</mat-select>
<mat-hint align="end">Here's the dropdown arrow ^</mat-hint>
</mat-form-field>
</div>

11
src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
/** @title Form field with hints */
@Component({
selector : 'form-field-hint-example',
templateUrl: 'form-field-hint-example.html',
styleUrls : ['form-field-hint-example.css']
})
export class FormFieldHintExample
{
}

8
src/assets/angular-material-examples/form-field-overview/form-field-overview-example.css Normal file
View File

@ -0,0 +1,8 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}

15
src/assets/angular-material-examples/form-field-overview/form-field-overview-example.html Normal file
View File

@ -0,0 +1,15 @@
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>

11
src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
/** @title Simple form field */
@Component({
selector : 'form-field-overview-example',
templateUrl: 'form-field-overview-example.html',
styleUrls : ['form-field-overview-example.css']
})
export class FormFieldOverviewExample
{
}

20
src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.css Normal file
View File

@ -0,0 +1,20 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.example-container form {
margin-bottom: 20px;
}
.example-container form > * {
margin: 5px 0;
}
.example-container .mat-radio-button {
margin: 0 5px;
}

31
src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.html Normal file
View File

@ -0,0 +1,31 @@
<div class="example-container">
<form class="example-container" [formGroup]="options">
<mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
<div>
<label>Float placeholder: </label>
<mat-radio-group formControlName="floatPlaceholder">
<mat-radio-button value="auto">Auto</mat-radio-button>
<mat-radio-button value="always">Always</mat-radio-button>
<mat-radio-button value="never">Never</mat-radio-button>
</mat-radio-group>
</div>
</form>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatPlaceholder]="options.value.floatPlaceholder">
<input matInput placeholder="Simple placeholder" required>
</mat-form-field>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatPlaceholder]="options.value.floatPlaceholder">
<mat-select required>
<mat-option>-- None --</mat-option>
<mat-option value="option">Option</mat-option>
</mat-select>
<mat-placeholder>
<mat-icon>favorite</mat-icon>
<b> Fancy</b> <i> placeholder</i></mat-placeholder>
</mat-form-field>
</div>

21
src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
/** @title Form field with placeholder */
@Component({
selector : 'form-field-placeholder-example',
templateUrl: 'form-field-placeholder-example.html',
styleUrls : ['form-field-placeholder-example.css']
})
export class FormFieldPlaceholderExample
{
options: FormGroup;
constructor(fb: FormBuilder)
{
this.options = fb.group({
hideRequired : false,
floatPlaceholder: 'auto'
});
}
}

17
src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.css Normal file
View File

@ -0,0 +1,17 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.example-right-align {
text-align: right;
}
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button {
display: none;
}

12
src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html Normal file
View File

@ -0,0 +1,12 @@
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Amount" type="number" class="example-right-align">
<span matPrefix>$&nbsp;</span>
<span matSuffix>.00</span>
</mat-form-field>
</div>

12
src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts Normal file
View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/** @title Form field with prefix & suffix */
@Component({
selector : 'form-field-prefix-suffix-example',
templateUrl: 'form-field-prefix-suffix-example.html',
styleUrls : ['form-field-prefix-suffix-example.css']
})
export class FormFieldPrefixSuffixExample
{
hide = true;
}

8
src/assets/angular-material-examples/form-field-theming/form-field-theming-example.css Normal file
View File

@ -0,0 +1,8 @@
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}

14
src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html Normal file
View File

@ -0,0 +1,14 @@
<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
<mat-form-field [color]="options.value.color">
<mat-select placeholder="Color" formControlName="color">
<mat-option value="primary">Primary</mat-option>
<mat-option value="accent">Accent</mat-option>
<mat-option value="warn">Warn</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [color]="options.value.color">
<input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
<mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
</mat-form-field>
</form>

26
src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
/** @title Form field theming */
@Component({
selector : 'form-field-theming-example',
templateUrl: 'form-field-theming-example.html',
styleUrls : ['form-field-theming-example.css']
})
export class FormFieldThemingExample
{
options: FormGroup;
constructor(fb: FormBuilder)
{
this.options = fb.group({
'color' : 'primary',
'fontSize': [16, Validators.min(10)]
});
}
getFontSize()
{
return Math.max(10, this.options.value.fontSize);
}
}