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

angular-in-memory-web-api updated,

Browse Source 
+ Http changed with HttpClient,
+ Angular Material Element examples added,
+ angular2-markdown Library added
This commit is contained in:
mustafahlvc 2017-09-27 19:40:59 +03:00
parent 52c5e6a18b
commit 8910e6f5dc
273 changed files with 5865 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.angular-cli.json
View File

@ -9,6 +9,7 @@
"outDir": "dist",
"assets": [
"assets",
"app/main/content/components/angular-material",
"favicon.ico"
],
"index": "index.html",

66
package-lock.json generated
View File

@ -446,15 +446,24 @@
"integrity": "sha1-etcMMQmUsPmA9A04Lc5ZlG/jDc8="
},
"angular-in-memory-web-api": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz",
"integrity": "sha1-iDbZ4lNNN7co88taHK9v4ef7vs0="
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.4.6.tgz",
"integrity": "sha1-EB9Zo4XrFTnH+TB1uv0MHLd061g="
},
"angular-resizable-element": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-1.2.0.tgz",
"integrity": "sha512-i5xCl4n2VMgGK4gY6Jtho0K5aazbsqNw1bmPYpI9RwlKK+dIOcsMRuMl1JPWzrznHsm4qEsfYg+9KLkYsYy+/g=="
},
"angular2-markdown": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz",
"integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=",
"requires": {
"marked": "0.3.6",
"prismjs": "1.8.1"
}
},
"ansi-html": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@ -1349,6 +1358,17 @@
"source-map": "0.5.6"
}
},
"clipboard": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz",
"integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=",
"optional": true,
"requires": {
"good-listener": "1.2.2",
"select": "1.1.2",
"tiny-emitter": "2.0.2"
}
},
"cliui": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -2351,6 +2371,12 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.1.3.tgz",
"integrity": "sha1-moJRp3fXAl+qVXN7w7BxdCEnqf0=",
"optional": true
},
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@ -3469,6 +3495,15 @@
"minimatch": "3.0.4"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"optional": true,
"requires": {
"delegate": "3.1.3"
}
},
"graceful-fs": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -5060,6 +5095,11 @@
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true
},
"marked": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz",
"integrity": "sha1-ssbGGPzOzk74bE/Gy4p8v1rtqNc="
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@ -6564,6 +6604,14 @@
"utila": "0.4.0"
}
},
"prismjs": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.8.1.tgz",
"integrity": "sha1-vQzcMumlYcHIw8lzN2Wn8ew7VO4=",
"requires": {
"clipboard": "1.7.1"
}
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@ -7227,6 +7275,12 @@
}
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"optional": true
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -8052,6 +8106,12 @@
"setimmediate": "1.0.5"
}
},
"tiny-emitter": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
"integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
"optional": true
},
"tmp": {
"version": "0.0.31",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",

3
package.json
View File

@ -31,7 +31,8 @@
"@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0",
"angular-calendar": "0.19.0",
"angular-in-memory-web-api": "0.3.2",
"angular-in-memory-web-api": "0.4.6",
"angular2-markdown": "1.6.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.0",
"d3": "4.10.0",

9
src/app/app.module.ts
View File

@ -19,6 +19,8 @@ import { FuseConfigService } from './core/services/config.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
import { ServicesModule } from './main/content/services/services.module';
import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module';
import { MarkdownModule } from 'angular2-markdown';
const appRoutes: Routes = [
{
@ -66,8 +68,12 @@ const appRoutes: Routes = [
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
SharedModule,
MarkdownModule.forRoot(),
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
InMemoryWebApiModule.forRoot(FuseFakeDbService, {
delay : 0,
passThruUnknownUrl: true
}),
FuseMainModule,
@ -77,6 +83,7 @@ const appRoutes: Routes = [
UIModule,
ServicesModule,
ComponentsModule,
FuseAngularMaterialModule,
ComponentsThirdPartyModule
],
providers : [

60
src/app/core/components/copier/copier.service.ts Normal file
View File

@ -0,0 +1,60 @@
/**
* This class is based on the code in the following projects:
*
* - https://github.com/zenorocha/select
* - https://github.com/zenorocha/clipboard.js/
*
* Both released under MIT license - © Zeno Rocha
*/
import {Injectable} from '@angular/core';
@Injectable()
export class CopierService {
private textarea: HTMLTextAreaElement;
/** Copy the text value to the clipboard. */
copyText(text: string): boolean {
this.createTextareaAndSelect(text);
const copySuccessful = document.execCommand('copy');
this.removeFake();
return copySuccessful;
}
/**
* Creates a hidden textarea element, sets its value from `text` property,
* and makes a selection on it.
*/
private createTextareaAndSelect(text: string) {
// Create a fake element to hold the contents to copy
this.textarea = document.createElement('textarea');
// Prevent zooming on iOS
this.textarea.style.fontSize = '12pt';
// Hide the element
this.textarea.classList.add('cdk-visually-hidden');
// Move element to the same position vertically
const yPosition = window.pageYOffset || document.documentElement.scrollTop;
this.textarea.style.top = yPosition + 'px';
this.textarea.setAttribute('readonly', '');
this.textarea.value = text;
document.body.appendChild(this.textarea);
this.textarea.select();
this.textarea.setSelectionRange(0, this.textarea.value.length);
}
/** Remove the text area from the DOM. */
private removeFake() {
if (this.textarea) {
document.body.removeChild(this.textarea);
this.textarea = null;
}
}
}

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

@ -27,6 +27,7 @@ import {
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdStepperModule,
MdSortModule,
MdTableModule,
MdTabsModule
@ -60,6 +61,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdStepperModule,
MdSortModule,
MdTableModule,
MdTabsModule,
@ -93,6 +95,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdStepperModule,
MdSortModule,
MdTableModule,
MdTabsModule,

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

@ -21,6 +21,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { Md2Module } from 'md2';
import { CookieService } from 'ngx-cookie-service';
import { MarkdownModule } from 'angular2-markdown';
@NgModule({
declarations : [
@ -43,7 +44,8 @@ import { CookieService } from 'ngx-cookie-service';
ColorPickerModule,
NgxDnDModule,
NgxDatatableModule,
Md2Module
Md2Module,
MarkdownModule
],
exports : [
FlexLayoutModule,
@ -62,7 +64,8 @@ import { CookieService } from 'ngx-cookie-service';
NgxDatatableModule,
FuseIfOnDomDirective,
FuseMaterialColorPickerComponent,
Md2Module
Md2Module,
MarkdownModule
],
entryComponents: [
FuseConfirmDialogComponent

1
src/app/core/scss/partials/plugins/_plugins.scss
View File

@ -1,4 +1,5 @@
@import "highlight";
@import "prism";
@import "perfect-scrollbar";
@import "ngx-datatable";
@import "ngx-color-picker";

269
src/app/core/scss/partials/plugins/_prism.scss Normal file
View File

@ -0,0 +1,269 @@
// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: #263238;
$base01: #2C393F;
$base02: #37474F;
$base03: #707880;
$base04: #C9CCD3;
$base05: #CDD3DE;
$base06: #D5DBE5;
$base07: #FFFFFF;
$base08: #EC5F67;
$base09: #EA9560;
$base0A: #FFCC00;
$base0B: #8BD649;
$base0C: #80CBC4;
$base0D: #89DDFF;
$base0E: #82AAFF;
$base0F: #EC5F67;
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.6;
$code-background: $base00;
$code-color: $base05;
$code-color-fade: $base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name: $base09;
$code-color-string: $base0C;
$code-color-name: $base0A;
$code-color-number: $base09;
$code-color-variable: $base0D;
$code-color-selector: $base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/**
* Prism base code highlighter theme using Sass
*
* @author @MoOx
* https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
* slightly adapted by me, Bram de Haan
*/
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
$code-font-size: 14px !default;
$code-line-height: 1.6 !default;
$code-tab-size: 4 !default;
$code-hyphens: none !default;
$code-block-padding: 12px !default;
$code-inline-padding: 2px 6px !default;
$code-border-radius: 0 !default;
$code-border: none !default;
$code-background: #2A2A2A !default;
$code-color: #FFF !default;
$code-color-fade: #BEBEC5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: none !default;
$code-color-property: #B58900 !default;
$code-color-important: #CB4B16 !default;
$code-color-tag: #268BD2 !default;
$code-color-atrule: #2AA198 !default;
$code-color-attr-name: #B65611 !default;
// $code-linenums-padding: 7px !default;
// $code-linenums-width: 40px !default;
// $code-linenums-background: #444 !default;
// $code-linenums-border-color: #555 !default;
// $code-linenums-border-width: 1px !default;
@if $code-selector != null {
#{$code-selector} {
-moz-tab-size: $code-tab-size;
-o-tab-size: $code-tab-size;
tab-size: $code-tab-size;
-webkit-hyphens: $code-hyphens;
-moz-hyphens: $code-hyphens;
-ms-hyphens: $code-hyphens;
hyphens: $code-hyphens;
// whitespace management
white-space: pre; // fallback
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
font-family: $code-font-family;
font-size: $code-font-size;
line-height: $code-line-height;
color: $code-color;
// text-shadow: $code-text-shadow;
background: $code-background;
}
}
%code-background {
border-radius: $code-border-radius;
border: $code-border;
box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {
#{$code-selector-block} {
@extend %code-background;
padding: $code-block-padding;
}
}
@if $code-selector-inline != null {
#{$code-selector-inline} {
@extend %code-background;
padding: $code-inline-padding;
}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
// background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string: null !default;
$code-color-name: null !default;
$code-color-number: null !default;
$code-color-variable: null !default;
$code-color-selector: null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {
.namespace {
opacity: .7;
}
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata {
color: $code-color-comment;
}
&.null,
&.operator,
&.boolean,
&.number {
color: $code-color-number;
}
&.string {
color: $code-color-string;
}
&.attr-name {
color: $code-color-attr-name;
}
&.entity,
&.url,
.language-css &.string,
.style &.string {
color: $code-color-string;
}
&.selector {
color: $code-color-selector;
}
&.attr-value,
&.keyword,
&.control,
&.directive,
&.unit {
color: $code-color-keyword;
}
&.important {
color: $code-color-important;
}
&.atrule {
color: $code-color-atrule;
}
&.regex,
&.statement {
color: $code-color-value;
}
&.placeholder,
&.variable {
color: $code-color-variable;
}
&.property,
&.tag {
// font-style: italic;
}
&.property {
color: $code-color-property;
}
&.tag {
color: $code-color-tag;
}
&.important,
&.statement {
font-weight: bold;
}
// todo ?
// &.mixin
// &.gradient
// &.abslength
// &.easing
// &.time
// &.angle
// &.fontfamily
// ruby/vim https://github.com/LeaVerou/prism/pull/18
// &.inst-var
// &.builtin
// &.const
// &.symbol
//
// php https://github.com/LeaVerou/prism/pull/20
// &.deliminator
// &.function
&.punctuation {
color: $code-color-punctuation;
}
&.entity {
cursor: help;
}
// for dev :)
&.debug {
color: red
}
}
}

10
src/app/main/content/apps/calendar/calendar.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class CalendarService implements Resolve<any>
@ -10,7 +10,7 @@ export class CalendarService implements Resolve<any>
events: any;
onEventsUpdated = new Subject<any>();
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -34,8 +34,8 @@ export class CalendarService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/calendar/events')
.subscribe(response => {
this.events = response.json().data.data;
.subscribe((response: any) => {
this.events = response.data.data;
this.onEventsUpdated.next(this.events);
resolve(this.events);
}, reject);
@ -49,7 +49,7 @@ export class CalendarService implements Resolve<any>
id : 'events',
data: [...events]
})
.subscribe(response => {
.subscribe((response: any) => {
this.getEvents();
}, reject);
});

24
src/app/main/content/apps/chat/chat.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseUtils } from '../../../../core/fuseUtils';
@ -19,7 +19,7 @@ export class ChatService implements Resolve<any>
onLeftSidenavViewChanged = new Subject<any>();
onRightSidenavViewChanged = new Subject<any>();
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -47,8 +47,8 @@ export class ChatService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/chat-chats/' + chatItem.id)
.subscribe(response => {
const chat = response.json().data;
.subscribe((response: any) => {
const chat = response.data;
const chatContact = this.contacts.find((contact) => {
return contact.id === contactId;
@ -105,7 +105,7 @@ export class ChatService implements Resolve<any>
* Post the created chat
*/
this.http.post('api/chat-chats', {...chat})
.subscribe(response => {
.subscribe((response: any) => {
/**
* Post the new the user data
@ -150,7 +150,7 @@ export class ChatService implements Resolve<any>
updateUserData(userData)
{
this.http.post('api/chat-user/' + this.user.id, userData)
.subscribe(response => {
.subscribe((response: any) => {
this.user = userData;
}
);
@ -211,8 +211,8 @@ export class ChatService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/chat-contacts')
.subscribe(response => {
resolve(response.json().data);
.subscribe((response: any) => {
resolve(response.data);
}, reject);
});
}
@ -225,8 +225,8 @@ export class ChatService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/chat-chats')
.subscribe(response => {
resolve(response.json().data);
.subscribe((response: any) => {
resolve(response.data);
}, reject);
});
}
@ -239,8 +239,8 @@ export class ChatService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/chat-user')
.subscribe(response => {
resolve(response.json().data[0]);
.subscribe((response: any) => {
resolve(response.data[0]);
}, reject);
});
}

12
src/app/main/content/apps/contacts/contacts.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Contact } from './contact.model';
import { FuseUtils } from '../../../../core/fuseUtils';
@ -23,7 +23,7 @@ export class ContactsService implements Resolve<any>
searchText: string;
filterBy: string;
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -65,9 +65,9 @@ export class ContactsService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/contacts-contacts')
.subscribe(response => {
.subscribe((response: any) => {
this.contacts = response.json().data;
this.contacts = response.data;
if ( this.filterBy === 'starred' )
{
@ -103,8 +103,8 @@ export class ContactsService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/contacts-user/5725a6802d10e277a0f35724')
.subscribe(response => {
this.user = response.json().data;
.subscribe((response: any) => {
this.user = response.data;
this.onUserDataChanged.next(this.user);
resolve(this.user);
}, reject);

16
src/app/main/content/apps/dashboards/project/projects.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ProjectsDashboardService implements Resolve<any>
@ -10,7 +10,7 @@ export class ProjectsDashboardService implements Resolve<any>
widgets: any[];
constructor(
private http: Http
private http: HttpClient
)
{
}
@ -42,9 +42,9 @@ export class ProjectsDashboardService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/projects-dashboard-projects')
.subscribe(response => {
this.projects = response.json().data;
resolve(response.json().data);
.subscribe((response: any) => {
this.projects = response.data;
resolve(response.data);
}, reject);
});
}
@ -53,9 +53,9 @@ export class ProjectsDashboardService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/projects-dashboard-widgets')
.subscribe(response => {
this.widgets = response.json().data;
resolve(response.json().data);
.subscribe((response: any) => {
this.widgets = response.data;
resolve(response.data);
}, reject);
});
}

12
src/app/main/content/apps/file-manager/file-manager.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
@ -10,7 +10,7 @@ export class FileManagerService implements Resolve<any>
onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -40,10 +40,10 @@ export class FileManagerService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/file-manager')
.subscribe(response => {
this.onFilesChanged.next(response.json().data);
this.onFileSelected.next(response.json().data[0]);
resolve(response.json().data);
.subscribe((response: any) => {
this.onFilesChanged.next(response.data);
this.onFileSelected.next(response.data[0]);
resolve(response.data);
}, reject);
});
}

36
src/app/main/content/apps/mail/mail.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Mail } from './mail.model';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseUtils } from 'app/core/fuseUtils';
@ -28,7 +28,7 @@ export class MailService implements Resolve<any>
onLabelsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
onSearchTextChanged: BehaviorSubject<any> = new BehaviorSubject('');
constructor(private http: Http)
constructor(private http: HttpClient)
{
this.selectedMails = [];
}
@ -88,8 +88,8 @@ export class MailService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/mail-folders')
.subscribe(response => {
this.folders = response.json().data;
.subscribe((response: any) => {
this.folders = response.data;
this.onFoldersChanged.next(this.folders);
resolve(this.folders);
}, reject);
@ -104,8 +104,8 @@ export class MailService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/mail-filters')
.subscribe(response => {
this.filters = response.json().data;
.subscribe((response: any) => {
this.filters = response.data;
this.onFiltersChanged.next(this.filters);
resolve(this.filters);
}, reject);
@ -120,8 +120,8 @@ export class MailService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/mail-labels')
.subscribe(response => {
this.labels = response.json().data;
.subscribe((response: any) => {
this.labels = response.data;
this.onLabelsChanged.next(this.labels);
resolve(this.labels);
}, reject);
@ -157,14 +157,14 @@ export class MailService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/mail-folders?handle=' + handle)
.subscribe(folders => {
.subscribe((folders: any) => {
const folderId = folders.json().data[0].id;
const folderId = folders.data[0].id;
this.http.get('api/mail-mails?folder=' + folderId)
.subscribe(mails => {
.subscribe((mails: any) => {
this.mails = mails.json().data.map(mail => {
this.mails = mails.data.map(mail => {
return new Mail(mail);
});
@ -189,9 +189,9 @@ export class MailService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/mail-mails?' + handle + '=true')
.subscribe(mails => {
.subscribe((mails: any) => {
this.mails = mails.json().data.map(mail => {
this.mails = mails.data.map(mail => {
return new Mail(mail);
});
@ -214,14 +214,14 @@ export class MailService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/mail-labels?handle=' + handle)
.subscribe(labels => {
.subscribe((labels: any) => {
const labelId = labels.json().data[0].id;
const labelId = labels.data[0].id;
this.http.get('api/mail-mails?labels=' + labelId)
.subscribe(mails => {
.subscribe((mails: any) => {
this.mails = mails.json().data.map(mail => {
this.mails = mails.data.map(mail => {
return new Mail(mail);
});

12
src/app/main/content/apps/scrumboard/scrumboard.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
@ -14,7 +14,7 @@ export class ScrumboardService implements Resolve<any>
onBoardsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
onBoardChanged: BehaviorSubject<any> = new BehaviorSubject([]);
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -44,8 +44,8 @@ export class ScrumboardService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/scrumboard-boards')
.subscribe(response => {
this.boards = response.json().data;
.subscribe((response: any) => {
this.boards = response.data;
this.onBoardsChanged.next(this.boards);
resolve(this.boards);
}, reject);
@ -56,8 +56,8 @@ export class ScrumboardService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/scrumboard-boards/' + boardId)
.subscribe(response => {
this.board = response.json().data;
.subscribe((response: any) => {
this.board = response.data;
this.onBoardChanged.next(this.board);
resolve(this.board);
}, reject);

28
src/app/main/content/apps/todo/todo.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Todo } from './todo.model';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseUtils } from '../../../../core/fuseUtils';
@ -30,7 +30,7 @@ export class TodoService implements Resolve<any>
onNewTodoClicked: Subject<any> = new Subject();
constructor(
private http: Http,
private http: HttpClient,
private location: Location // Set current todo
)
{
@ -91,8 +91,8 @@ export class TodoService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/todo-filters')
.subscribe(response => {
this.filters = response.json().data;
.subscribe((response: any) => {
this.filters = response.data;
this.onFiltersChanged.next(this.filters);
resolve(this.filters);
}, reject);
@ -107,8 +107,8 @@ export class TodoService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/todo-tags')
.subscribe(response => {
this.tags = response.json().data;
.subscribe((response: any) => {
this.tags = response.data;
this.onTagsChanged.next(this.tags);
resolve(this.tags);
}, reject);
@ -144,8 +144,8 @@ export class TodoService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/todo-todos')
.subscribe(todos => {
this.todos = todos.json().data.map(todo => {
.subscribe((todos: any) => {
this.todos = todos.data.map(todo => {
return new Todo(todo);
});
@ -176,9 +176,9 @@ export class TodoService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/todo-todos?' + param)
.subscribe(todos => {
.subscribe((todos: any) => {
this.todos = todos.json().data.map(todo => {
this.todos = todos.data.map(todo => {
return new Todo(todo);
});
@ -201,14 +201,14 @@ export class TodoService implements Resolve<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/todo-tags?handle=' + handle)
.subscribe(tags => {
.subscribe((tags: any) => {
const tagId = tags.json().data[0].id;
const tagId = tags.data[0].id;
this.http.get('api/todo-todos?tags=' + tagId)
.subscribe(todos => {
.subscribe((todos: any) => {
this.todos = todos.json().data.map(todo => {
this.todos = todos.data.map(todo => {
return new Todo(todo);
});

8
src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts vendored
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
@Component({
selector : 'fuse-ngx-datatable',
@ -12,7 +12,7 @@ export class FuseNgxDatatableComponent implements OnInit
loadingIndicator = true;
reorderable = true;
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -20,8 +20,8 @@ export class FuseNgxDatatableComponent implements OnInit
ngOnInit()
{
this.http.get('api/contacts-contacts')
.subscribe(contacts => {
this.rows = contacts.json().data;
.subscribe((contacts: any) => {
this.rows = contacts.data;
this.loadingIndicator = false;
});
}

31
src/app/main/content/components/angular-material/angular-material.component.html Normal file
View File

@ -0,0 +1,31 @@
<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Angular Material Elements</span>
</div>
<div class="h2 mt-16">{{title}}</div>
</div>
<a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank">
<md-icon>link</md-icon>
<span>Reference</span>
</a>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<div *ngFor="let example of examples">
<fuse-example-viewer [example]="example"></fuse-example-viewer>
</div>
</div>
</div>

9
src/app/main/content/components/angular-material/angular-material.component.scss Normal file
View File

@ -0,0 +1,9 @@
:host {
.angular-material-element {
> .content {
max-width: 940px;
}
}
}

32
src/app/main/content/components/angular-material/angular-material.component.ts Normal file
View File

@ -0,0 +1,32 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { COMPONENT_MAP } from './example-components';
@Component({
selector : 'fuse-angular-material',
templateUrl: './angular-material.component.html',
styleUrls : ['./angular-material.component.scss']
})
export class FuseAngularMaterialComponent implements OnInit
{
id: string;
title: string;
examples: any;
constructor(
private route: ActivatedRoute
)
{
}
ngOnInit()
{
this.route.params.subscribe(params => {
this.id = params['id'];
const _title = this.id.replace('-', ' ');
this.title = _title.charAt(0).toUpperCase() + _title.substring(1);
this.examples = COMPONENT_MAP[this.id];
});
}
}

40
src/app/main/content/components/angular-material/angular-material.module.ts Normal file
View File

@ -0,0 +1,40 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '../../../../core/modules/shared.module';
import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
import { FuseAngularMaterialComponent } from 'app/main/content/components/angular-material/angular-material.component';
import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
import { EXAMPLE_LIST } from './example-components';
const routes: Routes = [
{
path : 'components/angular-material',
children: [
{
path : ':id',
component: FuseAngularMaterialComponent
}
]
}
];
@NgModule({
imports : [
SharedModule,
RouterModule.forChild(routes),
FuseWidgetModule
],
exports : [
SharedModule
],
entryComponents: EXAMPLE_LIST,
declarations : [
[...EXAMPLE_LIST],
FuseAngularMaterialComponent,
FuseExampleViewerComponent
]
})
export class FuseAngularMaterialModule
{
}

759
src/app/main/content/components/angular-material/example-components.ts Normal file
View File

@ -0,0 +1,759 @@
import { AutocompleteDisplayExample } from '../../../../../assets/angular-material-examples/autocomplete-display/autocomplete-display-example';
import { AutocompleteFilterExample } from '../../../../../assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example';
import { AutocompleteOverviewExample } from '../../../../../assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example';
import { AutocompleteSimpleExample } from '../../../../../assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example';
import { ButtonOverviewExample } from '../../../../../assets/angular-material-examples/button-overview/button-overview-example';
import { ButtonToggleExclusiveExample } from '../../../../../assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example';
import { ButtonToggleOverviewExample } from '../../../../../assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example';
import { ButtonTypesExample } from '../../../../../assets/angular-material-examples/button-types/button-types-example';
import { CardFancyExample } from '../../../../../assets/angular-material-examples/card-fancy/card-fancy-example';
import { CardOverviewExample } from '../../../../../assets/angular-material-examples/card-overview/card-overview-example';
import { CdkTableBasicExample } from '../../../../../assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example';
import { CheckboxConfigurableExample } from '../../../../../assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example';
import { CheckboxOverviewExample } from '../../../../../assets/angular-material-examples/checkbox-overview/checkbox-overview-example';
import { ChipsInputExample } from '../../../../../assets/angular-material-examples/chips-input/chips-input-example';
import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example';
import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example';
import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example';
import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example';
import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example';
import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example';
import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example';
import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example';
import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example';
import { GridListDynamicExample } from '../../../../../assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example';
import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg-example/icon-svg-example';
import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example';
import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example';
import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example';
import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example';
import { InputOverviewExample } from '../../../../../assets/angular-material-examples/input-overview/input-overview-example';
import { InputPrefixSuffixExample } from '../../../../../assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example';
import { ListOverviewExample } from '../../../../../assets/angular-material-examples/list-overview/list-overview-example';
import { ListSectionsExample } from '../../../../../assets/angular-material-examples/list-sections/list-sections-example';
import { ListSelectionExample } from '../../../../../assets/angular-material-examples/list-selection/list-selection-example';
import { MenuIconsExample } from '../../../../../assets/angular-material-examples/menu-icons/menu-icons-example';
import { MenuOverviewExample } from '../../../../../assets/angular-material-examples/menu-overview/menu-overview-example';
import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example';
import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example';
import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
import { ProgressBarOverviewExample } from '../../../../../assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example';
import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example';
import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example';
import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example';
import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
import { SlideToggleFormsExample } from '../../../../../assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example';
import { SlideToggleOverviewExample } from '../../../../../assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example';
import { SliderConfigurableExample } from '../../../../../assets/angular-material-examples/slider-configurable/slider-configurable-example';
import { SliderOverviewExample } from '../../../../../assets/angular-material-examples/slider-overview/slider-overview-example';
import { PizzaPartyComponent, SnackBarComponentExample } from '../../../../../assets/angular-material-examples/snack-bar-component/snack-bar-component-example';
import { SnackBarOverviewExample } from '../../../../../assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example';
import { SortOverviewExample } from '../../../../../assets/angular-material-examples/sort-overview/sort-overview-example';
import { StepperOverviewExample } from '../../../../../assets/angular-material-examples/stepper-overview/stepper-overview-example';
import { TableBasicExample } from '../../../../../assets/angular-material-examples/table-basic/table-basic-example';
import { TableFilteringExample } from '../../../../../assets/angular-material-examples/table-filtering/table-filtering-example';
import { TableHttpExample } from '../../../../../assets/angular-material-examples/table-http/table-http-example';
import { TableOverviewExample } from '../../../../../assets/angular-material-examples/table-overview/table-overview-example';
import { TablePaginationExample } from '../../../../../assets/angular-material-examples/table-pagination/table-pagination-example';
import { TableSortingExample } from '../../../../../assets/angular-material-examples/table-sorting/table-sorting-example';
import { TabsOverviewExample } from '../../../../../assets/angular-material-examples/tabs-overview/tabs-overview-example';
import { TabsTemplateLabelExample } from '../../../../../assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
import { ToolbarMultirowExample } from '../../../../../assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
import { ToolbarOverviewExample } from '../../../../../assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
import { TooltipOverviewExample } from '../../../../../assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
import { TooltipPositionExample } from '../../../../../assets/angular-material-examples/tooltip-position/tooltip-position-example';
export const COMPONENT_MAP = {
'autocomplete' : [
'autocomplete-simple',
'autocomplete-filter',
'autocomplete-display',
'autocomplete-overview'
],
'checkbox' : [
'checkbox-overview',
'checkbox-configurable'
],
'datepicker' : [
'datepicker-overview',
'datepicker-start-view',
'datepicker-min-max',
'datepicker-filter',
'datepicker-touch',
'datepicker-api'
],
'input' : [
'input-overview',
'input-errors',
'input-prefix-suffix',
'input-hint',
'input-clearable',
'input-form'
],
'radio-button' : [
'radio-overview',
'radio-ng-model'
],
'select' : [
'select-overview',
'select-form'
],
'slider' : [
'slider-overview',
'slider-configurable'
],
'slide-toggle' : [
'slide-toggle-overview',
'slide-toggle-configurable',
'slide-toggle-forms'
],
'menu' : [
'menu-overview',
'nested-menu',
'menu-icons'
],
'sidenav' : [
'sidenav-overview',
'sidenav-fab'
],
'toolbar' : [
'toolbar-overview',
'toolbar-multirow'
],
'list' : [
'list-overview',
'list-sections',
'list-selection'
],
'grid-list' : [
'grid-list-overview',
'grid-list-dynamic'
],
'card' : [
'card-overview',
'card-fancy'
],
'stepper' : [
'stepper-overview'
],
'tabs' : [
'tabs-overview',
'tabs-template-label'
],
'expansion-panel' : [
'expansion-overview',
'expansion-steps'
],
'button' : [
'button-overview',
'button-types'
],
'button-toggle' : [
'button-toggle-overview',
'button-toggle-exclusive'
],
'chips' : [
'chips-overview',
'chips-input'
],
'icon' : [
'icon-overview',
'icon-svg'
],
'progress-spinner': [
'progress-spinner-overview',
'progress-spinner-configurable'
],
'progress-bar' : [
'progress-bar-overview',
'progress-bar-configurable'
],
'dialog' : [
'dialog-overview',
'dialog-content',
'dialog-data',
'dialog-elements'
],
'tooltip' : [
'tooltip-overview',
'tooltip-position'
],
'snackbar' : [
'snack-bar-overview'
],
'data-table' : [
'table-overview',
'table-basic',
'table-filtering',
'table-http'
],
'sort-header' : [
'sort-overview',
'table-sorting'
],
'paginator' : [
'table-pagination'
]
};
export const EXAMPLE_COMPONENTS = {
'autocomplete-display' : {
title : 'Display value autocomplete',
component : AutocompleteDisplayExample,
additionalFiles: null,
selectorName : null
},
'autocomplete-filter' : {
title : 'Filter autocomplete',
component : AutocompleteFilterExample,
additionalFiles: null,
selectorName : null
},
'autocomplete-overview' : {
title : 'Autocomplete overview',
component : AutocompleteOverviewExample,
additionalFiles: null,
selectorName : null
},
'autocomplete-simple' : {
title : 'Simple autocomplete',
component : AutocompleteSimpleExample,
additionalFiles: null,
selectorName : null
},
'button-overview' : {
title : 'Basic buttons',
component : ButtonOverviewExample,
additionalFiles: null,
selectorName : null
},
'button-toggle-exclusive' : {
title : 'Exclusive selection',
component : ButtonToggleExclusiveExample,
additionalFiles: null,
selectorName : null
},
'button-toggle-overview' : {
title : 'Basic button-toggles',
component : ButtonToggleOverviewExample,
additionalFiles: null,
selectorName : null
},
'button-types' : {
title : 'Button varieties',
component : ButtonTypesExample,
additionalFiles: null,
selectorName : null
},
'card-fancy' : {
title : 'Card with multiple sections',
component : CardFancyExample,
additionalFiles: null,
selectorName : null
},
'card-overview' : {
title : 'Basic cards',
component : CardOverviewExample,
additionalFiles: null,
selectorName : null
},
'cdk-table-basic' : {
title : 'Basic CDK data-table',
component : CdkTableBasicExample,
additionalFiles: null,
selectorName : null
},
'checkbox-configurable' : {
title : 'Configurable checkbox',
component : CheckboxConfigurableExample,
additionalFiles: null,
selectorName : null
},
'checkbox-overview' : {
title : 'Basic checkboxes',
component : CheckboxOverviewExample,
additionalFiles: null,
selectorName : null
},
'chips-input' : {
title : 'Chips with input',
component : ChipsInputExample,
additionalFiles: null,
selectorName : null
},
'chips-overview' : {
title : 'Basic chips',
component : ChipsOverviewExample,
additionalFiles: null,
selectorName : null
},
'chips-stacked' : {
title : 'Stacked chips',
component : ChipsStackedExample,
additionalFiles: null,
selectorName : null
},
'datepicker-api' : {
title : 'Datepicker API',
component : DatepickerApiExample,
additionalFiles: null,
selectorName : null
},
'datepicker-filter' : {
title : 'Datepicker Filter',
component : DatepickerFilterExample,
additionalFiles: null,
selectorName : null
},
'datepicker-min-max' : {
title : 'Datepicker Min Max',
component : DatepickerMinMaxExample,
additionalFiles: null,
selectorName : null
},
'datepicker-overview' : {
title : 'Basic datepicker',
component : DatepickerOverviewExample,
additionalFiles: null,
selectorName : null
},
'datepicker-start-view' : {
title : 'Datepicker start date',
component : DatepickerStartViewExample,
additionalFiles: null,
selectorName : null
},
'datepicker-touch' : {
title : 'Datepicker Touch',
component : DatepickerTouchExample,
additionalFiles: null,
selectorName : null
},
'dialog-content' : {
title : 'Dialog with header, scrollable content and actions',
component : DialogContentExample,
additionalFiles: ['dialog-content-example-dialog.html'],
selectorName : 'DialogContentExample, DialogContentExampleDialog'
},
'dialog-data' : {
title : 'Injecting data when opening a dialog',
component : DialogDataExample,
additionalFiles: ['dialog-data-example-dialog.html'],
selectorName : 'DialogDataExample, DialogDataExampleDialog'
},
'dialog-elements' : {
title : 'Dialog elements',
component : DialogElementsExample,
additionalFiles: ['dialog-elements-example-dialog.html'],
selectorName : 'DialogElementsExample, DialogElementsExampleDialog'
},
'dialog-overview' : {
title : 'Dialog Overview',
component : DialogOverviewExample,
additionalFiles: ['dialog-overview-example-dialog.html'],
selectorName : 'DialogOverviewExample, DialogOverviewExampleDialog'
},
'expansion-overview' : {
title : 'Basic expansion panel',
component : ExpansionOverviewExample,
additionalFiles: null,
selectorName : null
},
'expansion-steps' : {
title : 'Expansion panel as accordion',
component : ExpansionStepsExample,
additionalFiles: null,
selectorName : null
},
'grid-list-dynamic' : {
title : 'Dynamic grid-list',
component : GridListDynamicExample,
additionalFiles: null,
selectorName : null
},
'grid-list-overview' : {
title : 'Basic grid-list',
component : GridListOverviewExample,
additionalFiles: null,
selectorName : null
},
'icon-overview' : {
title : 'Basic icons',
component : IconOverviewExample,
additionalFiles: null,
selectorName : null
},
'icon-svg' : {
title : 'SVG icons',
component : IconSvgExample,
additionalFiles: null,
selectorName : null
},
'input-clearable' : {
title : 'Input Clearable',
component : InputClearableExample,
additionalFiles: null,
selectorName : null
},
'input-errors' : {
title : 'Input Errors',
component : InputErrorsExample,
additionalFiles: null,
selectorName : null
},
'input-form' : {
title : 'Inputs in a form',
component : InputFormExample,
additionalFiles: null,
selectorName : null
},
'input-hint' : {
title : 'Input hints',
component : InputHintExample,
additionalFiles: null,
selectorName : null
},
'input-overview' : {
title : 'Basic Inputs',
component : InputOverviewExample,
additionalFiles: null,
selectorName : null
},
'input-prefix-suffix' : {
title : 'Input Prefixes and Suffixes',
component : InputPrefixSuffixExample,
additionalFiles: null,
selectorName : null
},
'list-overview' : {
title : 'Basic list',
component : ListOverviewExample,
additionalFiles: null,
selectorName : null
},
'list-sections' : {
title : 'List with sections',
component : ListSectionsExample,
additionalFiles: null,
selectorName : null
},
'list-selection' : {
title : 'List with selection',
component : ListSelectionExample,
additionalFiles: null,
selectorName : null
},
'menu-icons' : {
title : 'Menu with icons',
component : MenuIconsExample,
additionalFiles: null,
selectorName : null
},
'menu-overview' : {
title : 'Basic menu',
component : MenuOverviewExample,
additionalFiles: null,
selectorName : null
},
'nested-menu' : {
title : 'Nested menu',
component : NestedMenuExample,
additionalFiles: null,
selectorName : null
},
'paginator-configurable' : {
title : 'Configurable paginator',
component : PaginatorConfigurableExample,
additionalFiles: null,
selectorName : null
},
'paginator-overview' : {
title : 'Paginator',
component : PaginatorOverviewExample,
additionalFiles: null,
selectorName : null
},
'progress-bar-configurable' : {
title : 'Configurable progress-bar',
component : ProgressBarConfigurableExample,
additionalFiles: null,
selectorName : null
},
'progress-bar-overview' : {
title : 'Basic progress-bar',
component : ProgressBarOverviewExample,
additionalFiles: null,
selectorName : null
},
'progress-spinner-configurable': {
title : 'Configurable progress spinner',
component : ProgressSpinnerConfigurableExample,
additionalFiles: null,
selectorName : null
},
'progress-spinner-overview' : {
title : 'Basic progress-spinner',
component : ProgressSpinnerOverviewExample,
additionalFiles: null,
selectorName : null
},
'radio-ng-model' : {
title : 'Radios with ngModel',
component : RadioNgModelExample,
additionalFiles: null,
selectorName : null
},
'radio-overview' : {
title : 'Basic radios',
component : RadioOverviewExample,
additionalFiles: null,
selectorName : null
},
'select-form' : {
title : 'Select in a form',
component : SelectFormExample,
additionalFiles: null,
selectorName : null
},
'select-overview' : {
title : 'Basic select',
component : SelectOverviewExample,
additionalFiles: null,
selectorName : null
},
'sidenav-fab' : {
title : 'Sidenav with a FAB',
component : SidenavFabExample,
additionalFiles: null,
selectorName : null
},
'sidenav-overview' : {
title : 'Basic sidenav',
component : SidenavOverviewExample,
additionalFiles: null,
selectorName : null
},
'slide-toggle-configurable' : {
title : 'Configurable slide-toggle',
component : SlideToggleConfigurableExample,
additionalFiles: null,
selectorName : null
},
'slide-toggle-forms' : {
title : 'Slide-toggle with forms',
component : SlideToggleFormsExample,
additionalFiles: null,
selectorName : null
},
'slide-toggle-overview' : {
title : 'Basic slide-toggles',
component : SlideToggleOverviewExample,
additionalFiles: null,
selectorName : null
},
'slider-configurable' : {
title : 'Configurable slider',
component : SliderConfigurableExample,
additionalFiles: null,
selectorName : null
},
'slider-overview' : {
title : 'Basic slider',
component : SliderOverviewExample,
additionalFiles: null,
selectorName : null
},
'snack-bar-component' : {
title : 'Snack-bar with a custom component',
component : SnackBarComponentExample,
additionalFiles: ['snack-bar-component-example-snack.html'],
selectorName : 'SnackBarComponentExample, PizzaPartyComponent'
},
'snack-bar-overview' : {
title : 'Basic snack-bar',
component : SnackBarOverviewExample,
additionalFiles: null,
selectorName : null
},
'sort-overview' : {
title : 'Sorting overview',
component : SortOverviewExample,
additionalFiles: null,
selectorName : null
},
'stepper-overview' : {
title : 'Stepper overview',
component : StepperOverviewExample,
additionalFiles: null,
selectorName : null
},
'table-basic' : {
title : 'Basic table',
component : TableBasicExample,
additionalFiles: null,
selectorName : null
},
'table-filtering' : {
title : 'Table with filtering',
component : TableFilteringExample,
additionalFiles: null,
selectorName : null
},
'table-http' : {
title : 'Table retrieving data through HTTP',
component : TableHttpExample,
additionalFiles: null,
selectorName : null
},
'table-overview' : {
title : 'Feature-rich data table',
component : TableOverviewExample,
additionalFiles: null,
selectorName : null
},
'table-pagination' : {
title : 'Table with pagination',
component : TablePaginationExample,
additionalFiles: null,
selectorName : null
},
'table-sorting' : {
title : 'Table with sorting',
component : TableSortingExample,
additionalFiles: null,
selectorName : null
},
'tabs-overview' : {
title : 'Basic tabs',
component : TabsOverviewExample,
additionalFiles: null,
selectorName : null
},
'tabs-template-label' : {
title : 'Complex Example',
component : TabsTemplateLabelExample,
additionalFiles: null,
selectorName : null
},
'toolbar-multirow' : {
title : 'Multi-row toolbar',
component : ToolbarMultirowExample,
additionalFiles: null,
selectorName : null
},
'toolbar-overview' : {
title : 'Basic toolbar',
component : ToolbarOverviewExample,
additionalFiles: null,
selectorName : null
},
'tooltip-overview' : {
title : 'Basic tooltip',
component : TooltipOverviewExample,
additionalFiles: null,
selectorName : null
},
'tooltip-position' : {
title : 'Tooltip with custom position',
component : TooltipPositionExample,
additionalFiles: null,
selectorName : null
}
};
export const EXAMPLE_LIST = [
AutocompleteDisplayExample,
AutocompleteFilterExample,
AutocompleteOverviewExample,
AutocompleteSimpleExample,
ButtonOverviewExample,
ButtonToggleExclusiveExample,
ButtonToggleOverviewExample,
ButtonTypesExample,
CardFancyExample,
CardOverviewExample,
CdkTableBasicExample,
CheckboxConfigurableExample,
CheckboxOverviewExample,
ChipsInputExample,
ChipsOverviewExample,
ChipsStackedExample,
DatepickerApiExample,
DatepickerFilterExample,
DatepickerMinMaxExample,
DatepickerOverviewExample,
DatepickerStartViewExample,
DatepickerTouchExample,
DialogContentExampleDialog,
DialogContentExample,
DialogDataExampleDialog,
DialogDataExample,
DialogElementsExampleDialog,
DialogElementsExample,
DialogOverviewExampleDialog,
DialogOverviewExample,
ExpansionOverviewExample,
ExpansionStepsExample,
GridListDynamicExample,
GridListOverviewExample,
IconOverviewExample,
IconSvgExample,
InputClearableExample,
InputErrorsExample,
InputFormExample,
InputHintExample,
InputOverviewExample,
InputPrefixSuffixExample,
ListOverviewExample,
ListSectionsExample,
ListSelectionExample,
MenuIconsExample,
MenuOverviewExample,
NestedMenuExample,
PaginatorConfigurableExample,
PaginatorOverviewExample,
ProgressBarConfigurableExample,
ProgressBarOverviewExample,
ProgressSpinnerConfigurableExample,
ProgressSpinnerOverviewExample,
RadioNgModelExample,
RadioOverviewExample,
SelectFormExample,
SelectOverviewExample,
SidenavFabExample,
SidenavOverviewExample,
SlideToggleConfigurableExample,
SlideToggleFormsExample,
SlideToggleOverviewExample,
SliderConfigurableExample,
SliderOverviewExample,
PizzaPartyComponent, SnackBarComponentExample,
SnackBarOverviewExample,
SortOverviewExample,
StepperOverviewExample,
TableBasicExample,
TableFilteringExample,
TableHttpExample,
TableOverviewExample,
TablePaginationExample,
TableSortingExample,
TabsOverviewExample,
TabsTemplateLabelExample,
ToolbarMultirowExample,
ToolbarOverviewExample,
TooltipOverviewExample,
TooltipPositionExample
];

58
src/app/main/content/components/angular-material/example-viewer/example-viewer.html Normal file
View File

@ -0,0 +1,58 @@
<div class="example-viewer-wrapper md-white-bg mat-elevation-z2">
<div class="example-viewer-header">
<div class="example-viewer-title">{{exampleData?.title}}</div>
<button md-icon-button type="button" (click)="toggleSourceView()"
[mdTooltip]="'View source'">
<md-icon>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
<path fill="none" d="M0 0h24v24H0V0z"></path>
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
</svg>
</md-icon>
</button>
</div>
<div class="example-viewer-source" [fxShow]="showSource">
<md-tab-group [(selectedIndex)]="selectedIndex">
<md-tab label="HTML"></md-tab>
<md-tab label="TS"></md-tab>
<md-tab label="CSS"></md-tab>
</md-tab-group>
<div class="tab-content">
<section class="tab" *ngIf="selectedIndex === 0" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button md-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(htmlView.el.nativeElement.innerText)">
<md-icon>content_copy</md-icon>
</button>
<div Markdown #htmlView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'"></div>
</section>
<section class="tab" *ngIf="selectedIndex === 1" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button md-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(tsView.el.nativeElement.innerText)">
<md-icon>content_copy</md-icon>
</button>
<div Markdown #tsView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'"></div>
</section>
<section class="tab" *ngIf="selectedIndex === 2" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button md-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(cssView.el.nativeElement.innerText)">
<md-icon>content_copy</md-icon>
</button>
<div Markdown #cssView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'"></div>
</section>
</div>
</div>
<div class="example-viewer-body" [fxHide]="showSource">
<!--<ng-template [portalHost]="selectedPortal"></ng-template>-->
<!--<ng-template [cdkPortalHost]="selectedPortal"></ng-template>-->
<div #previewContainer></div>
</div>
</div>

75
src/app/main/content/components/angular-material/example-viewer/example-viewer.scss Normal file
View File

@ -0,0 +1,75 @@
@import "src/app/core/scss/fuse";
fuse-example-viewer {
display: block;
padding: 24px 0;
.example-viewer-wrapper {
border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
margin: 4px;
h3 {
margin-top: 10px;
}
}
.example-viewer-header {
align-content: center;
align-items: center;
display: flex;
justify-content: center;
padding: 8px 20px;
color: mat-color($foreground, secondary-text);
background: rgba(mat-color($foreground, secondary-text), .03);
flex: 1 1 auto;
.example-viewer-title {
flex: 1 1 auto;
}
}
.example-viewer-source {
.tab-content {
background: #263238;
.tab {
position: relative;
.example-source-copy {
position: absolute;
top: 8px;
display: none;
right: 8px;
md-icon {
color: rgba(255, 255, 255, 0.87);
}
}
&:hover {
.example-source-copy {
display: inline-block;
}
}
.example-source {
display: flex;
padding: 0;
margin: 0;
min-height: 150px;
border-bottom: 1px solid mat-color($foreground, divider);
> pre {
width: 100%;
}
}
}
}
}
.example-viewer-body {
padding: 24px;
}
}

110
src/app/main/content/components/angular-material/example-viewer/example-viewer.ts Normal file
View File

@ -0,0 +1,110 @@
import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { MdSnackBar } from '@angular/material';
import 'rxjs/add/operator/first';
import { CopierService } from '../../../../../core/components/copier/copier.service';
import { EXAMPLE_COMPONENTS } from '../example-components';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';
import { fuseAnimations } from '../../../../../core/animations';
export interface LiveExample
{
title: string;
component: any;
additionalFiles?: string[];
selectorName?: string;
}
@Component({
selector : 'fuse-example-viewer',
templateUrl : './example-viewer.html',
styleUrls : ['./example-viewer.scss'],
providers : [CopierService],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
{
previewRef: ComponentRef<any>;
selectedIndex = 0;
get container(): ViewContainerRef
{
return this._previewContainer;
}
set container(value: ViewContainerRef)
{
this._previewContainer = value;
}
@ViewChild('previewContainer', {read: ViewContainerRef}) private _previewContainer: ViewContainerRef;
/** String key of the currently displayed example. */
_example: string;
exampleData: LiveExample;
/** Whether the source for the example is being displayed. */
showSource = false;
constructor(
private snackbar: MdSnackBar,
private copier: CopierService,
private _resolver: ComponentFactoryResolver
)
{
}
get example()
{
return this._example;
}
@Input()
set example(example: string)
{
if ( example && EXAMPLE_COMPONENTS[example] )
{
this._example = example;
this.exampleData = EXAMPLE_COMPONENTS[example];
}
else
{
console.log('MISSING EXAMPLE: ', example);
}
}
toggleSourceView(): void
{
this.showSource = !this.showSource;
}
copySource(text: string)
{
if ( this.copier.copyText(text) )
{
this.snackbar.open('Code copied', '', {duration: 2500});
}
else
{
this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
}
}
ngAfterViewInit()
{
setTimeout(() => {
const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component);
this.previewRef = this._previewContainer.createComponent(cmpFactory);
}, 0);
}
ngOnDestroy()
{
if ( this.previewRef )
{
this.previewRef.destroy();
}
}
}

8
src/app/main/content/pages/invoices/invoice.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
@ -11,7 +11,7 @@ export class InvoiceService implements Resolve<any>
invoiceOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -43,8 +43,8 @@ export class InvoiceService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/invoice')
.subscribe(timeline => {
this.invoice = timeline.json().data;
.subscribe((timeline: any) => {
this.invoice = timeline.data;
this.invoiceOnChanged.next(this.invoice);
resolve(this.invoice);
}, reject);

16
src/app/main/content/pages/profile/profile.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
@ -15,7 +15,7 @@ export class ProfileService implements Resolve<any>
aboutOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
photosVideosOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -49,8 +49,8 @@ export class ProfileService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/profile-timeline')
.subscribe(timeline => {
this.timeline = timeline.json().data;
.subscribe((timeline: any) => {
this.timeline = timeline.data;
this.timelineOnChanged.next(this.timeline);
resolve(this.timeline);
}, reject);
@ -65,8 +65,8 @@ export class ProfileService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/profile-about')
.subscribe(about => {
this.about = about.json().data;
.subscribe((about: any) => {
this.about = about.data;
this.aboutOnChanged.next(this.about);
resolve(this.about);
}, reject);
@ -81,8 +81,8 @@ export class ProfileService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/profile-photos-videos')
.subscribe(photosVideos => {
this.photosVideos = photosVideos.json().data;
.subscribe((photosVideos: any) => {
this.photosVideos = photosVideos.data;
this.photosVideosOnChanged.next(this.photosVideos);
resolve(this.photosVideos);
}, reject);

12
src/app/main/content/pages/search/search.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
@ -13,7 +13,7 @@ export class SearchService implements Resolve<any>
classicOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
tableOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@ -46,8 +46,8 @@ export class SearchService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/search-classic')
.subscribe(classic => {
this.classic = classic.json().data;
.subscribe((classic: any) => {
this.classic = classic.data;
this.classicOnChanged.next(this.classic);
resolve(this.classic);
}, reject);
@ -62,8 +62,8 @@ export class SearchService implements Resolve<any>
return new Promise((resolve, reject) => {
this.http.get('api/search-table')
.subscribe(table => {
this.table = table.json().data;
.subscribe((table: any) => {
this.table = table.data;
this.tableOnChanged.next(this.table);
resolve(this.table);
}, reject);

2
src/app/main/content/ui/icons/icons.component.html
View File

@ -12,7 +12,7 @@
<div class="h1 mt-16">Icons</div>
</div>
<a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank">
<a md-raised-button class="reference-button md-white-bg" href="https://material.angular.io" target="_blank">
<md-icon>link</md-icon>
<span>Reference</span>
</a>

9
src/app/main/content/ui/icons/icons.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
@Component({
selector : 'fuse-icons',
@ -12,16 +12,15 @@ export class FuseIconsComponent implements OnInit
filteredIcons: string[];
loading = true;
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
ngOnInit()
{
this.http.get('api/icons')
.subscribe(icons => {
this.icons = icons.json().data;
.subscribe((icons: any) => {
this.icons = icons.data;
this.filteredIcons = this.icons;
this.loading = false;
});

12
src/app/main/quick-panel/quick-panel.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
@Component({
selector : 'fuse-quick-panel',
@ -14,7 +14,7 @@ export class FuseQuickPanelComponent implements OnInit
notes: any[];
events: any[];
constructor(private http: Http)
constructor(private http: HttpClient)
{
this.date = new Date();
this.settings = {
@ -28,13 +28,13 @@ export class FuseQuickPanelComponent implements OnInit
ngOnInit()
{
this.http.get('api/quick-panel-notes')
.subscribe(response => {
this.notes = response.json().data;
.subscribe((response: any) => {
this.notes = response.data;
});
this.http.get('api/quick-panel-events')
.subscribe(response => {
this.events = response.json().data;
.subscribe((response: any) => {
this.events = response.data;
});
}

188
src/app/navigation.model.ts
View File

@ -343,6 +343,194 @@ export class NavigationModel
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'title' : 'Angular Material Elements',
'type' : 'collapse',
'icon' : 'layers',
'children': [
{
'title' : 'Form Controls',
'type' : 'group',
'children': [
{
'title': 'Autocomplete',
'type' : 'item',
'url' : '/components/angular-material/autocomplete'
},
{
'title': 'Checkbox',
'type' : 'item',
'url' : '/components/angular-material/checkbox'
},
{
'title': 'Datepicker',
'type' : 'item',
'url' : '/components/angular-material/datepicker'
},
{
'title': 'Input',
'type' : 'item',
'url' : '/components/angular-material/input'
},
{
'title': 'Radio button',
'type' : 'item',
'url' : '/components/angular-material/radio-button'
},
{
'title': 'Select',
'type' : 'item',
'url' : '/components/angular-material/select'
},
{
'title': 'Slider',
'type' : 'item',
'url' : '/components/angular-material/slider'
},
{
'title': 'Slide toggle',
'type' : 'item',
'url' : '/components/angular-material/slide-toggle'
}
]
},
{
'title' : 'Navigation',
'type' : 'group',
'children': [
{
'title': 'Menu',
'type' : 'item',
'url' : '/components/angular-material/menu'
},
{
'title': 'Sidenav',
'type' : 'item',
'url' : '/components/angular-material/sidenav'
},
{
'title': 'Toolbar',
'type' : 'item',
'url' : '/components/angular-material/toolbar'
}
]
},
{
'title' : 'Layout',
'type' : 'group',
'children': [
{
'title': 'List',
'type' : 'item',
'url' : '/components/angular-material/list'
},
{
'title': 'Grid list',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
},
{
'title': 'Card',
'type' : 'item',
'url' : '/components/angular-material/card'
},
{
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
},
{
'title': 'Expansion Panel',
'type' : 'item',
'url' : '/components/angular-material/expansion-panel'
}
]
},
{
'title' : 'Buttons & Indicators',
'type' : 'group',
'children': [
{
'title': 'Button',
'type' : 'item',
'url' : '/components/angular-material/button'
},
{
'title': 'Button toggle',
'type' : 'item',
'url' : '/components/angular-material/button-toggle'
},
{
'title': 'Chips',
'type' : 'item',
'url' : '/components/angular-material/chips'
},
{
'title': 'Icon',
'type' : 'item',
'url' : '/components/angular-material/icon'
},
{
'title': 'Progress spinner',
'type' : 'item',
'url' : '/components/angular-material/progress-spinner'
},
{
'title': 'Progress bar',
'type' : 'item',
'url' : '/components/angular-material/progress-bar'
}
]
},
{
'title' : 'Popups & Modals',
'type' : 'group',
'children': [
{
'title': 'Dialog',
'type' : 'item',
'url' : '/components/angular-material/dialog'
},
{
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
},
{
'title': 'Snackbar',
'type' : 'item',
'url' : '/components/angular-material/snackbar'
}
]
},
{
'title' : 'Data table',
'type' : 'group',
'children': [
{
'title': 'Table',
'type' : 'item',
'url' : '/components/angular-material/data-table'
},
{
'title': 'Sort header',
'type' : 'item',
'url' : '/components/angular-material/sort-header'
},
{
'title': 'Paginator',
'type' : 'item',
'url' : '/components/angular-material/paginator'
}
]
}
]
},
{
'title': 'Countdown',
'type' : 'item',

9
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css Normal file
View File

@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html Normal file
View File

@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

49
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts Normal file
View File

@ -0,0 +1,49 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
export class User {
constructor(public name: string) { }
}
/**
* @title Display value autocomplete
*/
@Component({
selector: 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css']
})
export class AutocompleteDisplayExample {
myControl = new FormControl();
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(user => user && typeof user === 'object' ? user.name : user)
.map(name => name ? this.filter(name) : this.options.slice());
}
filter(name: string): User[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
displayFn(user: User): string {
if (user){
return user.name;
}
}
}

9
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css Normal file
View File

@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html Normal file
View File

@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

38
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts Normal file
View File

@ -0,0 +1,38 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
/**
* @title Filter autocomplete
*/
@Component({
selector: 'autocomplete-filter-example',
templateUrl: 'autocomplete-filter-example.html',
styleUrls: ['autocomplete-filter-example.css']
})
export class AutocompleteFilterExample {
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(val => val ? this.filter(val) : this.options.slice());
}
filter(val: string): string[] {
return this.options.filter(option =>
option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}
}

9
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css Normal file
View File

@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

20
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html Normal file
View File

@ -0,0 +1,20 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</md-option>
</md-autocomplete>
</md-form-field>
<br />
<md-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</md-slide-toggle>
</form>

59
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts Normal file
View File

@ -0,0 +1,59 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
/**
* @title Autocomplete overview
*/
@Component({
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
states: any[] = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.startWith(null)
.map(state => state ? this.filterStates(state) : this.states.slice());
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
}

9
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css Normal file
View File

@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html Normal file
View File

@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of options" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

22
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts Normal file
View File

@ -0,0 +1,22 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/**
* @title Simple autocomplete
*/
@Component({
selector: 'autocomplete-simple-example',
templateUrl: 'autocomplete-simple-example.html',
styleUrls: ['autocomplete-simple-example.css']
})
export class AutocompleteSimpleExample {
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
}

1
src/assets/angular-material-examples/button-overview/button-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/button-overview/button-overview-example.html Normal file
View File

@ -0,0 +1 @@
<button md-button>Click me!</button>

10
src/assets/angular-material-examples/button-overview/button-overview-example.ts Normal file
View File

@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic buttons
*/
@Component({
selector: 'button-overview-example',
templateUrl: 'button-overview-example.html',
})
export class ButtonOverviewExample {}

3
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css Normal file
View File

@ -0,0 +1,3 @@
.example-selected-value {
margin: 15px 0;
}

15
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html Normal file
View File

@ -0,0 +1,15 @@
<md-button-toggle-group #group="mdButtonToggleGroup">
<md-button-toggle value="left">
<md-icon>format_align_left</md-icon>
</md-button-toggle>
<md-button-toggle value="center">
<md-icon>format_align_center</md-icon>
</md-button-toggle>
<md-button-toggle value="right">
<md-icon>format_align_right</md-icon>
</md-button-toggle>
<md-button-toggle value="justify" disabled>
<md-icon>format_align_justify</md-icon>
</md-button-toggle>
</md-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>

11
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts Normal file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Exclusive selection
*/
@Component({
selector: 'button-toggle-exclusive-example',
templateUrl: 'button-toggle-exclusive-example.html',
styleUrls: ['button-toggle-exclusive-example.css'],
})
export class ButtonToggleExclusiveExample {}

1
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html Normal file
View File

@ -0,0 +1 @@
<md-button-toggle>Toggle me!</md-button-toggle>

10
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts Normal file
View File

@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic button-toggles
*/
@Component({
selector: 'button-toggle-overview-example',
templateUrl: 'button-toggle-overview-example.html',
})
export class ButtonToggleOverviewExample {}

5
src/assets/angular-material-examples/button-types/button-types-example.css Normal file
View File

@ -0,0 +1,5 @@
.example-button-row {
display: flex;
align-items: center;
justify-content: space-around;
}

64
src/assets/angular-material-examples/button-types/button-types-example.html Normal file
View File

@ -0,0 +1,64 @@
<h3>Basic Buttons</h3>
<div class="button-row">
<button md-button>Basic</button>
<button md-button color="primary">Primary</button>
<button md-button color="accent">Accent</button>
<button md-button color="warn">Warn</button>
<button md-button disabled>Disabled</button>
<a md-button routerLink=".">Link</a>
</div>
<h3>Raised Buttons</h3>
<div class="button-row">
<button md-raised-button>Basic</button>
<button md-raised-button color="primary">Primary</button>
<button md-raised-button color="accent">Accent</button>
<button md-raised-button color="warn">Warn</button>
<button md-raised-button disabled>Disabled</button>
<a md-raised-button routerLink=".">Link</a>
</div>
<h3>Icon Buttons</h3>
<div class="button-row">
<button md-icon-button>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="primary">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="accent">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="warn">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button disabled>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
</div>
<h3>Fab Buttons</h3>
<div class="button-row">
<button md-fab>Basic</button>
<button md-fab color="primary">Primary</button>
<button md-fab color="accent">Accent</button>
<button md-fab color="warn">Warn</button>
<button md-fab disabled>Disabled</button>
<button md-fab>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<a md-fab routerLink=".">Link</a>
</div>
<h3>Mini Fab Buttons</h3>
<div class="button-row">
<button md-mini-fab>Basic</button>
<button md-mini-fab color="primary">Primary</button>
<button md-mini-fab color="accent">Accent</button>
<button md-mini-fab color="warn">Warn</button>
<button md-mini-fab disabled>Disabled</button>
<button md-mini-fab>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<a md-mini-fab routerLink=".">Link</a>
</div>

11
src/assets/angular-material-examples/button-types/button-types-example.ts Normal file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Button varieties
*/
@Component({
selector: 'button-types-example',
templateUrl: 'button-types-example.html',
styleUrls: ['button-types-example.css'],
})
export class ButtonTypesExample {}

8
src/assets/angular-material-examples/card-fancy/card-fancy-example.css Normal file
View File

@ -0,0 +1,8 @@
.example-card {
width: 400px;
}
.example-header-image {
background-image: url('/assets/images/examples/shiba1.jpg');
background-size: cover;
}

19
src/assets/angular-material-examples/card-fancy/card-fancy-example.html Normal file
View File

@ -0,0 +1,19 @@
<md-card class="example-card">
<md-card-header>
<div md-card-avatar class="example-header-image"></div>
<md-card-title>Shiba Inu</md-card-title>
<md-card-subtitle>Dog Breed</md-card-subtitle>
</md-card-header>
<img md-card-image src="assets/images/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<md-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>

11
src/assets/angular-material-examples/card-fancy/card-fancy-example.ts Normal file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Card with multiple sections
*/
@Component({
selector: 'card-fancy-example',
templateUrl: 'card-fancy-example.html',
styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {}

1
src/assets/angular-material-examples/card-overview/card-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/card-overview/card-overview-example.html Normal file
View File

@ -0,0 +1 @@
<md-card>Simple card</md-card>

10
src/assets/angular-material-examples/card-overview/card-overview-example.ts Normal file
View File

@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic cards
*/
@Component({
selector: 'card-overview-example',
templateUrl: 'card-overview-example.html',
})
export class CardOverviewExample {}

39
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css Normal file
View File

@ -0,0 +1,39 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
/*
* Styles to make the demo's cdk-table match the material design spec
* https://material.io/guidelines/components/data-tables.html
*/
.example-table {
flex: 1 1 auto;
overflow: auto;
max-height: 500px;
}
.example-header-row, .example-row {
display: flex;
border-bottom: 1px solid #ccc;
align-items: center;
height: 32px;
padding: 0 8px;
}
.example-cell, .example-header-cell {
flex: 1;
}
.example-header-cell {
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
}
.example-cell {
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
}

36
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html Normal file
View File

@ -0,0 +1,36 @@
<div class="example-container mat-elevation-z8">
<cdk-table #table [dataSource]="dataSource" class="example-table">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
</ng-container>
<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
</ng-container>
<!-- Color Column -->
<ng-container cdkColumnDef="color">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"
[style.color]="row.color">
{{row.color}}
</cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
</cdk-table>
</div>

92
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts Normal file
View File

@ -0,0 +1,92 @@
import {Component} from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
/**
* @title Basic CDK data-table
*/
@Component({
selector: 'cdk-table-basic-example',
styleUrls: ['cdk-table-basic-example.css'],
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
}
/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[] { return this.dataChange.value; }
constructor() {
// Fill up the database with 100 users.
for (let i = 0; i < 100; i++) { this.addUser(); }
}
/** Adds a new user to the database. */
addUser() {
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser() {
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: (this.data.length + 1).toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
}
disconnect() {}
}

14
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css Normal file
View File

@ -0,0 +1,14 @@
.example-h2 {
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 0 10px;
}

40
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html Normal file
View File

@ -0,0 +1,40 @@
<md-card>
<md-card-content>
<h2 class="example-h2">Checkbox configuration</h2>
<section class="example-section">
<md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox>
<md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox>
</section>
<section class="example-section">
<label class="example-margin">Align:</label>
<md-radio-group [(ngModel)]="align">
<md-radio-button class="example-margin" value="start">Start</md-radio-button>
<md-radio-button class="example-margin" value="end">End</md-radio-button>
</md-radio-group>
</section>
<section class="example-section">
<md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
</section>
</md-card-content>
</md-card>
<md-card class="result">
<md-card-content>
<h2 class="example-h2">Result</h2>
<section class="example-section">
<md-checkbox
class="example-margin"
[(ngModel)]="checked"
[(indeterminate)]="indeterminate"
[align]="align"
[disabled]="disabled">
I'm a checkbox
</md-checkbox>
</section>
</md-card-content>
</md-card>

16
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts Normal file
View File

@ -0,0 +1,16 @@
import {Component} from '@angular/core';
/**
* @title Configurable checkbox
*/
@Component({
selector: 'checkbox-configurable-example',
templateUrl: 'checkbox-configurable-example.html',
styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
checked = false;
indeterminate = false;
align = 'start';
disabled = false;
}

1
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html Normal file
View File

@ -0,0 +1 @@
<md-checkbox>Check me!</md-checkbox>

10
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts Normal file
View File

@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic checkboxes
*/
@Component({
selector: 'checkbox-overview-example',
templateUrl: 'checkbox-overview-example.html',
})
export class CheckboxOverviewExample {}

3
src/assets/angular-material-examples/chips-input/chips-input-example.css Normal file
View File

@ -0,0 +1,3 @@
.demo-chip-list {
width: 100%;
}

14
src/assets/angular-material-examples/chips-input/chips-input-example.html Normal file
View File

@ -0,0 +1,14 @@
<md-form-field class="demo-chip-list">
<md-chip-list mdPrefix #chipList>
<md-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (remove)="remove(fruit)">
{{fruit.name}}
<md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
</md-chip>
</md-chip-list>
<input mdInput placeholder="New fruit..."
[mdChipInputFor]="chipList"
[mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
[mdChipInputAddOnBlur]="addOnBlur"
(mdChipInputTokenEnd)="add($event)" />
</md-form-field>

52
src/assets/angular-material-examples/chips-input/chips-input-example.ts Normal file
View File

@ -0,0 +1,52 @@
import {Component} from '@angular/core';
import {MdChipInputEvent, ENTER} from '@angular/material';
const COMMA = 188;
/**
* @title Chips with input
*/
@Component({
selector: 'chips-input-example',
templateUrl: 'chips-input-example.html',
styleUrls: ['chips-input-example.css']
})
export class ChipsInputExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
// Enter, comma
separatorKeysCodes = [ENTER, COMMA];
fruits = [
{ name: 'Lemon' },
{ name: 'Lime' },
{ name: 'Apple' },
];
add(event: MdChipInputEvent): void {
let input = event.input;
let value = event.value;
// Add our person
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(fruit: any): void {
let index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
}

1
src/assets/angular-material-examples/chips-overview/chips-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

6
src/assets/angular-material-examples/chips-overview/chips-overview-example.html Normal file
View File

@ -0,0 +1,6 @@
<md-chip-list>
<md-chip>One fish</md-chip>
<md-chip>Two fish</md-chip>
<md-chip color="primary" selected="true">Primary fish</md-chip>
<md-chip color="accent" selected="true">Accent fish</md-chip>
</md-chip-list>

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

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

3
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css Normal file
View File

@ -0,0 +1,3 @@
md-chip {
max-width: 200px;
}

7
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html Normal file
View File

@ -0,0 +1,7 @@
<md-chip-list class="mat-chip-list-stacked">
<md-chip *ngFor="let chipColor of availableColors"
selected="true"
color="{{chipColor.color}}">
{{chipColor.name}}
</md-chip>
</md-chip-list>

20
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts Normal file
View File

@ -0,0 +1,20 @@
import {Component} from '@angular/core';
/**
* @title Stacked chips
*/
@Component({
selector: 'chips-stacked-example',
templateUrl: 'chips-stacked-example.html',
styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
color: string;
availableColors = [
{ name: 'none', color: '' },
{ name: 'Primary', color: 'primary' },
{ name: 'Accent', color: 'accent' },
{ name: 'Warn', color: 'warn' }
];
}

1
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker #picker></md-datepicker>
</md-form-field>
<button md-raised-button (click)="picker.open()">Open</button>

12
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts Normal file
View File

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
/**
* @title Datepicker API
*/
@Component({
selector: 'datepicker-api-example',
templateUrl: 'datepicker-api-example.html',
styleUrls: ['datepicker-api-example.css'],
})
export class DatepickerApiExample {
}

1
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepickerFilter]="myFilter" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

17
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts Normal file
View File

@ -0,0 +1,17 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Filter
*/
@Component({
selector: 'datepicker-filter-example',
templateUrl: 'datepicker-filter-example.html',
styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
myFilter = (d: Date): boolean => {
const day = d.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
}
}

1
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [min]="minDate" [max]="maxDate" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

14
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts Normal file
View File

@ -0,0 +1,14 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Min Max
*/
@Component({
selector: 'datepicker-min-max-example',
templateUrl: 'datepicker-min-max-example.html',
styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample {
minDate = new Date(2000, 0, 1);
maxDate = new Date(2020, 0, 1);
}

1
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

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

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

1
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker startView="year" [startAt]="startDate"></md-datepicker>
</md-form-field>

13
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts Normal file
View File

@ -0,0 +1,13 @@
import {Component} from '@angular/core';
/**
* @title Datepicker start date
*/
@Component({
selector: 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html',
styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
startDate = new Date(1990, 0, 1);
}

1
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.css Normal file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html Normal file
View File

@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker touchUi="true" #picker></md-datepicker>
</md-form-field>

12
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts Normal file
View File

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Touch
*/
@Component({
selector: 'datepicker-touch-example',
templateUrl: 'datepicker-touch-example.html',
styleUrls: ['datepicker-touch-example.css'],
})
export class DatepickerTouchExample {
}

25
src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html Normal file
View File

@ -0,0 +1,25 @@
<h2 md-dialog-title>Install Angular</h2>
<md-dialog-content>
<h3>DEVELOP ACROSS ALL PLATFORMS</h3>
<p>Learn one way to build applications with Angular and reuse your code and abilities to build
apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
<h3>SPEED & PERFORMANCE</h3>
<p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements
by building data models on RxJS, Immutable.js or another push-model.</p>
<h3>INCREDIBLE TOOLING</h3>
<p>Build features quickly with simple, declarative templates. Extend the template language with your own
components and use a wide array of existing components. Get immediate Angular-specific help and feedback
with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather
than trying to make the code work.</p>
<h3>LOVED BY MILLIONS</h3>
<p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure
that supports Google's largest applications.</p>
</md-dialog-content>
<md-dialog-actions>
<button md-button [md-dialog-close]="true" tabindex="1">Install</button>
<button md-button md-dialog-close tabindex="-1">Cancel</button>
</md-dialog-actions>

Some files were not shown because too many files have changed in this diff Show More