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

Update Angular, Angular Material and Flex Layout to 6

Browse Source 
Updated additional project files
Updated Angular Material examples
This commit is contained in:
Sercan Yemen 2018-05-04 19:28:19 +03:00
parent 02df48ab4e
commit f4636d9a37
454 changed files with 13445 additions and 9629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
.angular-cli.json
View File

@ -1,74 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "fuse"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"app/main/content/components/angular-material",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"hmr": "environments/environment.hmr.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
},
{
"project": "src/tsconfig.spec.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}

1
.editorconfig
View File

@ -1,3 +1,4 @@
# Editor configuration, see http://editorconfig.org
root = true root = true
[*] [*]

5
.gitignore vendored
View File

@ -30,13 +30,10 @@
/coverage /coverage
/libpeerconnection.log /libpeerconnection.log
npm-debug.log npm-debug.log
yarn-error.log
testem.log testem.log
/typings /typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files # System Files
.DS_Store .DS_Store
Thumbs.db Thumbs.db

12
README.md
View File

@ -1,6 +1,6 @@
# Fuse2 # Fuse2
Material Design Admin Template with Angular 5+ and Angular Material 2 Material Design Admin Template with Angular 6+ and Angular Material 2
## The Community ## The Community
@ -14,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
## Code scaffolding ## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`. Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build ## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests ## Running unit tests
@ -27,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
## Running end-to-end tests ## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

140
angular.json Normal file
View File

@ -0,0 +1,140 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fuse": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/fuse",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/app/main/content/components/angular-material"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "fuse:build"
},
"configurations": {
"production": {
"browserTarget": "fuse:build:production"
},
"hmr": {
"hmr": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "fuse:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
}
}
},
"fuse-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "fuse:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
}
}
}
},
"defaultProject": "fuse"
}

31
e2e/protractor.conf.js Normal file
View File

@ -0,0 +1,31 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const {SpecReporter} = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs : [
'./src/**/*.e2e-spec.ts'
],
capabilities : {
'browserName': 'chrome'
},
directConnect : true,
baseUrl : 'http://localhost:4200/',
framework : 'jasmine',
jasmineNodeOpts : {
showColors : true,
defaultTimeoutInterval: 30000,
print : function ()
{
}
},
onPrepare()
{
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
}
};

2
e2e/app.e2e-spec.ts → e2e/src/app.e2e-spec.ts
View File

@ -9,6 +9,6 @@ describe('Fuse2 App', () => {
it('should display welcome message', () => { it('should display welcome message', () => {
page.navigateTo(); page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!'); expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
}); });
}); });

0
e2e/app.po.ts → e2e/src/app.po.ts
View File

3
e2e/tsconfig.e2e.json
View File

@ -1,8 +1,7 @@
{ {
"extends": "../tsconfig.json", "extends": "../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../out-tsc/e2e", "outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "commonjs", "module": "commonjs",
"target": "es5", "target": "es5",
"types": [ "types": [

33
karma.conf.js
View File

@ -1,33 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

11443
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

86
package.json
View File

@ -1,11 +1,11 @@
{ {
"name": "fuse", "name": "fuse",
"version": "5.2.10", "version": "6.0.0",
"license": "https://themeforest.net/licenses/terms/regular", "license": "https://themeforest.net/licenses/terms/regular",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --open", "start": "ng serve --open",
"start-hmr": "ng serve --hmr -e=hmr -sm=false", "start-hmr": "ng serve --configuration hmr -sm=false",
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr", "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev", "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
"build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json", "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
@ -19,69 +19,71 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@agm/core": "1.0.0-beta.2", "@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.8", "@angular/animations": "6.0.0",
"@angular/cdk": "5.2.4", "@angular/cdk": "6.0.0",
"@angular/common": "5.2.8", "@angular/common": "6.0.0",
"@angular/compiler": "5.2.8", "@angular/compiler": "6.0.0",
"@angular/core": "5.2.8", "@angular/core": "6.0.0",
"@angular/flex-layout": "5.0.0-beta.14", "@angular/flex-layout": "6.0.0-beta.15",
"@angular/forms": "5.2.8", "@angular/forms": "6.0.0",
"@angular/http": "5.2.8", "@angular/http": "6.0.0",
"@angular/material": "5.2.4", "@angular/material": "6.0.0",
"@angular/material-moment-adapter": "5.2.4", "@angular/material-moment-adapter": "6.0.0",
"@angular/platform-browser": "5.2.8", "@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "5.2.8", "@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "5.2.8", "@angular/router": "6.0.0",
"@ngrx/effects": "5.2.0", "@ngrx/effects": "5.2.0",
"@ngrx/router-store": "5.2.0", "@ngrx/router-store": "5.2.0",
"@ngrx/store": "5.2.0", "@ngrx/store": "5.2.0",
"@ngrx/store-devtools": "5.2.0", "@ngrx/store-devtools": "5.2.0",
"@ngx-translate/core": "9.1.1", "@ngx-translate/core": "10.0.1",
"@swimlane/ngx-charts": "7.1.1", "@swimlane/ngx-charts": "7.3.0",
"@swimlane/ngx-datatable": "11.2.0", "@swimlane/ngx-datatable": "11.3.2",
"@swimlane/ngx-dnd": "3.1.0", "@swimlane/ngx-dnd": "3.2.0",
"@types/prismjs": "1.9.0", "@types/prismjs": "1.9.0",
"angular-calendar": "0.23.6", "angular-calendar": "0.24.0",
"angular-in-memory-web-api": "0.5.3", "angular-in-memory-web-api": "0.6.0",
"chart.js": "2.7.2", "chart.js": "2.7.2",
"classlist.js": "1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "2.5.3", "core-js": "2.5.5",
"d3": "4.13.0", "d3": "5.1.0",
"hammerjs": "2.0.8", "hammerjs": "2.0.8",
"intl": "1.2.5", "intl": "1.2.5",
"lodash": "4.17.5", "lodash": "4.17.10",
"moment": "2.21.0", "moment": "2.22.1",
"ng2-charts": "1.6.0", "ng2-charts": "1.6.0",
"ngrx-store-freeze": "0.2.1", "ngrx-store-freeze": "0.2.2",
"ngx-color-picker": "5.3.4", "ngx-color-picker": "5.3.8",
"ngx-cookie-service": "1.0.10", "ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.3.0", "perfect-scrollbar": "1.3.0",
"prismjs": "1.11.0", "prismjs": "1.14.0",
"rxjs": "5.5.6", "rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"web-animations-js": "2.3.1", "web-animations-js": "2.3.1",
"zone.js": "0.8.20" "zone.js": "0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "1.7.3", "@angular/cli": "6.0.0",
"@angular/compiler-cli": "5.2.8", "@angular/compiler-cli": "6.0.0",
"@angular/language-service": "5.2.8", "@angular/language-service": "6.0.0",
"@angular-devkit/build-angular": "0.6.0",
"@angularclass/hmr": "2.1.3", "@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.8.6", "@types/jasmine": "2.8.7",
"@types/jasminewd2": "2.0.3", "@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.106", "@types/lodash": "4.14.108",
"@types/node": "6.0.101", "@types/node": "8.9.5",
"codelyzer": "4.2.1", "codelyzer": "4.2.1",
"jasmine-core": "2.8.0", "jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1", "jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0", "karma": "1.7.1",
"karma-chrome-launcher": "2.2.0", "karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "1.4.2", "karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1", "karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2", "karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2", "protractor": "5.3.1",
"ts-node": "4.1.0", "ts-node": "5.0.1",
"tslint": "5.9.1", "tslint": "5.9.1",
"typescript": "2.6.2", "typescript": "2.7.2",
"webpack-bundle-analyzer": "2.11.1" "webpack-bundle-analyzer": "2.11.1"
} }
} }

28
protractor.conf.js
View File

@ -1,28 +0,0 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

1
src/@fuse/components/highlight/prism-languages.ts
View File

@ -5,6 +5,7 @@ import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css'; import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff'; import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-markup'; import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-java'; import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript'; import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json'; import 'prismjs/components/prism-json';

1233
src/app/main/content/components/angular-material/example-components.ts
View File

File diff suppressed because it is too large Load Diff

74
src/app/main/content/components/angular-material/material.module.ts
View File

@ -1,43 +1,25 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatToolbarModule,
MatTooltipModule,
MatCardModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatStepperModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import {
MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
} from '@angular/material';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
@NgModule({ @NgModule({
imports: [ imports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule, MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule, MatButtonModule,
MatButtonToggleModule, MatButtonToggleModule,
MatCardModule, MatCardModule,
@ -45,6 +27,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MatChipsModule, MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatDividerModule,
MatExpansionModule, MatExpansionModule,
MatFormFieldModule, MatFormFieldModule,
MatGridListModule, MatGridListModule,
@ -52,7 +35,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MatInputModule, MatInputModule,
MatListModule, MatListModule,
MatMenuModule, MatMenuModule,
MatNativeDateModule, MatMomentDateModule,
MatPaginatorModule, MatPaginatorModule,
MatProgressBarModule, MatProgressBarModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
@ -60,19 +43,23 @@ import { CdkTableModule } from '@angular/cdk/table';
MatRippleModule, MatRippleModule,
MatSelectModule, MatSelectModule,
MatSidenavModule, MatSidenavModule,
MatSliderModule,
MatSlideToggleModule, MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule, MatSnackBarModule,
MatStepperModule,
MatSortModule, MatSortModule,
MatStepperModule,
MatTableModule, MatTableModule,
MatTabsModule, MatTabsModule,
MatToolbarModule, MatToolbarModule,
MatTooltipModule, MatTooltipModule,
CdkTableModule MatTreeModule
], ],
exports: [ exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule, MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule, MatButtonModule,
MatButtonToggleModule, MatButtonToggleModule,
MatCardModule, MatCardModule,
@ -80,13 +67,15 @@ import { CdkTableModule } from '@angular/cdk/table';
MatChipsModule, MatChipsModule,
MatDatepickerModule, MatDatepickerModule,
MatDialogModule, MatDialogModule,
MatDividerModule,
MatExpansionModule, MatExpansionModule,
MatFormFieldModule,
MatGridListModule, MatGridListModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatListModule, MatListModule,
MatMenuModule, MatMenuModule,
MatNativeDateModule, MatMomentDateModule,
MatPaginatorModule, MatPaginatorModule,
MatProgressBarModule, MatProgressBarModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
@ -94,19 +83,18 @@ import { CdkTableModule } from '@angular/cdk/table';
MatRippleModule, MatRippleModule,
MatSelectModule, MatSelectModule,
MatSidenavModule, MatSidenavModule,
MatSliderModule,
MatSlideToggleModule, MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule, MatSnackBarModule,
MatStepperModule,
MatSortModule, MatSortModule,
MatStepperModule,
MatTableModule, MatTableModule,
MatTabsModule, MatTabsModule,
MatToolbarModule, MatToolbarModule,
MatTooltipModule, MatTooltipModule,
CdkTableModule MatTreeModule
] ]
}) })
export class MaterialModule export class MaterialModule
{ {
} }

78
src/app/navigation/navigation.ts
View File

@ -668,16 +668,16 @@ export const navigation = [
'type' : 'group', 'type' : 'group',
'children': [ 'children': [
{ {
'id' : 'list', 'id' : 'badge',
'title': 'List', 'title': 'Badge',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/list' 'url' : '/components/angular-material/badge'
}, },
{ {
'id' : 'grid-list', 'id' : 'bottom-sheet',
'title': 'Grid list', 'title': 'Bottom Sheet',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/grid-list' 'url' : '/components/angular-material/bottom-sheet'
}, },
{ {
'id' : 'card', 'id' : 'card',
@ -691,18 +691,6 @@ export const navigation = [
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/divider' 'url' : '/components/angular-material/divider'
}, },
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
},
{ {
'id' : 'elevation', 'id' : 'elevation',
'title': 'Elevation', 'title': 'Elevation',
@ -714,6 +702,30 @@ export const navigation = [
'title': 'Expansion Panel', 'title': 'Expansion Panel',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/expansion-panel' 'url' : '/components/angular-material/expansion-panel'
},
{
'id' : 'grid-list',
'title': 'Grid list',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
},
{
'id' : 'list',
'title': 'List',
'type' : 'item',
'url' : '/components/angular-material/list'
},
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
} }
] ]
}, },
@ -771,17 +783,17 @@ export const navigation = [
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/dialog' 'url' : '/components/angular-material/dialog'
}, },
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
},
{ {
'id' : 'snackbar', 'id' : 'snackbar',
'title': 'Snackbar', 'title': 'Snackbar',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/snackbar' 'url' : '/components/angular-material/snackbar'
},
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
} }
] ]
}, },
@ -791,10 +803,10 @@ export const navigation = [
'type' : 'group', 'type' : 'group',
'children': [ 'children': [
{ {
'id' : 'table', 'id' : 'paginator',
'title': 'Table', 'title': 'Paginator',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/data-table' 'url' : '/components/angular-material/paginator'
}, },
{ {
'id' : 'sort-header', 'id' : 'sort-header',
@ -803,12 +815,18 @@ export const navigation = [
'url' : '/components/angular-material/sort-header' 'url' : '/components/angular-material/sort-header'
}, },
{ {
'id' : 'paginator', 'id' : 'table',
'title': 'Paginator', 'title': 'Table',
'type' : 'item', 'type' : 'item',
'url' : '/components/angular-material/paginator' 'url' : '/components/angular-material/table'
} }
] ]
},
{
'id' : 'tree',
'title': 'Tree',
'type' : 'item',
'url' : '/components/angular-material/tree'
} }
] ]
}, },

5
src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
View File

@ -1,8 +1,7 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {FormControl} from '@angular/forms'; import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs';
import {startWith} from 'rxjs/operators/startWith'; import {map, startWith} from 'rxjs/operators';
import {map} from 'rxjs/operators/map';
/** /**
* @title Highlight the first autocomplete option * @title Highlight the first autocomplete option

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

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

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

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

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

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

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

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

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

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

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

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

0
src/assets/angular-material-examples/icon-svg-example/icon-svg-example.css → src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
View File

12
src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html Executable file
View File

@ -0,0 +1,12 @@
<form [formGroup]="stateForm">
<mat-form-field>
<input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup"/>
<mat-autocomplete #autoGroup="matAutocomplete">
<mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
<mat-option *ngFor="let name of group.names" [value]="name">
{{ name }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</mat-form-field>
</form>

111
src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts Executable file
View File

@ -0,0 +1,111 @@
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
export interface StateGroup {
letter: string;
names: string[];
}
/**
* @title Option groups autocomplete
*/
@Component({
templateUrl: './autocomplete-optgroup-example.html',
styleUrls: ['./autocomplete-optgroup-example.css'],
})
export class AutocompleteOptgroupExample implements OnInit {
stateForm: FormGroup = this.fb.group({
stateGroup: '',
});
stateGroups: StateGroup[] = [{
letter: 'A',
names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
}, {
letter: 'C',
names: ['California', 'Colorado', 'Connecticut']
}, {
letter: 'D',
names: ['Delaware']
}, {
letter: 'F',
names: ['Florida']
}, {
letter: 'G',
names: ['Georgia']
}, {
letter: 'H',
names: ['Hawaii']
}, {
letter: 'I',
names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
}, {
letter: 'K',
names: ['Kansas', 'Kentucky']
}, {
letter: 'L',
names: ['Louisiana']
}, {
letter: 'M',
names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
'Minnesota', 'Mississippi', 'Missouri', 'Montana']
}, {
letter: 'N',
names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
'New Mexico', 'New York', 'North Carolina', 'North Dakota']
}, {
letter: 'O',
names: ['Ohio', 'Oklahoma', 'Oregon']
}, {
letter: 'P',
names: ['Pennsylvania']
}, {
letter: 'R',
names: ['Rhode Island']
}, {
letter: 'S',
names: ['South Carolina', 'South Dakota']
}, {
letter: 'T',
names: ['Tennessee', 'Texas']
}, {
letter: 'U',
names: ['Utah']
}, {
letter: 'V',
names: ['Vermont', 'Virginia']
}, {
letter: 'W',
names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
}];
stateGroupOptions: Observable<StateGroup[]>;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
.pipe(
startWith(''),
map(val => this.filterGroup(val))
);
}
filterGroup(val: string): StateGroup[] {
if (val) {
return this.stateGroups
.map(group => ({ letter: group.letter, names: this._filter(group.names, val) }))
.filter(group => group.names.length > 0);
}
return this.stateGroups;
}
private _filter(opt: string[], val: string) {
const filterValue = val.toLowerCase();
return opt.filter(item => item.toLowerCase().startsWith(filterValue));
}
}

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

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

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

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

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

@ -1,62 +1,64 @@
import { Component } from '@angular/core'; import {Component} from '@angular/core';
import { FormControl } from '@angular/forms'; import {FormControl} from '@angular/forms';
import { Observable } from 'rxjs/Observable'; import {Observable} from 'rxjs';
import 'rxjs/add/operator/startWith'; import {map, startWith} from 'rxjs/operators';
import 'rxjs/add/operator/map';
export class State {
constructor(public name: string, public population: string, public flag: string) { }
}
/** /**
* @title Autocomplete overview * @title Autocomplete overview
*/ */
@Component({ @Component({
selector : 'autocomplete-overview-example', selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html', templateUrl: 'autocomplete-overview-example.html',
styleUrls : ['autocomplete-overview-example.css'] styleUrls: ['autocomplete-overview-example.css']
}) })
export class AutocompleteOverviewExample export class AutocompleteOverviewExample {
{ stateCtrl: FormControl;
stateCtrl: FormControl; filteredStates: Observable<any[]>;
filteredStates: Observable<any[]>;
states: any[] = [ states: State[] = [
{
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(); name: 'Arkansas',
this.filteredStates = this.stateCtrl.valueChanges population: '2.978M',
.startWith(null) // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
.map(state => state ? this.filterStates(state) : this.states.slice()); flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
} },
filterStates(name: string)
{ {
return this.states.filter(state => name: 'California',
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); 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
.pipe(
startWith(''),
map(state => state ? this.filterStates(state) : this.states.slice())
);
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
} }

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

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

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

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

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

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

0
src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.css → src/assets/angular-material-examples/badge-overview/badge-overview-example.css Normal file → Executable file
View File

17
src/assets/angular-material-examples/badge-overview/badge-overview-example.html Executable file
View File

@ -0,0 +1,17 @@
<p>
<span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
</p>
<p>
Button with a badge on the left
<button mat-raised-button color="primary"
matBadge="8" matBadgePosition="before" matBadgeColor="accent">
Action
</button>
</p>
<p>
Icon with a badge
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
</p>

12
src/assets/angular-material-examples/badge-overview/badge-overview-example.ts Executable file
View File

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

21
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html Executable file
View File

@ -0,0 +1,21 @@
<mat-nav-list>
<a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Keep</span>
<span mat-line>Add to a note</span>
</a>
<a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Docs</span>
<span mat-line>Embed in a document</span>
</a>
<a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Plus</span>
<span mat-line>Share with your friends</span>
</a>
<a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Hangouts</span>
<span mat-line>Show to your coworkers</span>
</a>
</mat-nav-list>

1
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css Executable file
View File

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

3
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html Executable file
View File

@ -0,0 +1,3 @@
<p>You have receive a file called "cat-picture.jpeg".</p>
<button mat-raised-button (click)="openBottomSheet()">Open file</button>

31
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts Executable file
View File

@ -0,0 +1,31 @@
import {Component} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
/**
* @title Bottom Sheet Overview
*/
@Component({
selector: 'bottom-sheet-overview-example',
templateUrl: 'bottom-sheet-overview-example.html',
styleUrls: ['bottom-sheet-overview-example.css'],
})
export class BottomSheetOverviewExample {
constructor(private bottomSheet: MatBottomSheet) {}
openBottomSheet(): void {
this.bottomSheet.open(BottomSheetOverviewExampleSheet);
}
}
@Component({
selector: 'bottom-sheet-overview-example-sheet',
templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
openLink(event: MouseEvent): void {
this.bottomSheetRef.dismiss();
event.preventDefault();
}
}

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

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

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

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

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

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

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

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

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

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

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

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

@ -1 +1,5 @@
<mat-button-toggle>Toggle me!</mat-button-toggle> <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css Executable file
View File

@ -0,0 +1,4 @@
.demo-tree-node {
display: flex;
align-items: center;
}

14
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html Executable file
View File

@ -0,0 +1,14 @@
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
</cdk-tree>

160
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts Executable file
View File

@ -0,0 +1,160 @@
import {Component, Injectable} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
import {of, Observable, BehaviorSubject} from 'rxjs';
/**
* File node data with nested structure.
* Each node has a filename, and a type or a list of children.
*/
export class FileNode {
children: FileNode[];
filename: string;
type: any;
}
/** Flat node with expandable and level information */
export class FileFlatNode {
filename: string;
type: any;
level: number;
expandable: boolean;
}
/**
* The file structure tree data in string. The data could be parsed into a Json object
*/
const TREE_DATA = `
{
"Documents": {
"angular": {
"src": {
"core": "ts",
"compiler": "ts"
}
},
"material2": {
"src": {
"button": "ts",
"checkbox": "ts",
"input": "ts"
}
}
},
"Downloads": {
"Tutorial": "html",
"November": "pdf",
"October": "pdf"
},
"Pictures": {
"Sun": "png",
"Woods": "jpg",
"Photo Booth Library": {
"Contents": "dir",
"Pictures": "dir"
}
},
"Applications": {
"Chrome": "app",
"Calendar": "app",
"Webstorm": "app"
}
}`;
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class FileDatabase {
dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
get data(): FileNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Parse the string to json object.
const dataObject = JSON.parse(TREE_DATA);
// Build the tree nodes from Json object. The result is a list of `FileNode` with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `FileNode`.
*/
buildFileTree(value: any, level: number): FileNode[] {
let data: any[] = [];
for (let k in value) {
let v = value[k];
let node = new FileNode();
node.filename = `${k}`;
if (v === null || v === undefined) {
// no action
} else if (typeof v === 'object') {
node.children = this.buildFileTree(v, level + 1);
} else {
node.type = v;
}
data.push(node);
}
return data;
}
}
/**
* @title Tree with flat nodes
*/
@Component({
selector: 'cdk-tree-flat-example',
templateUrl: 'cdk-tree-flat-example.html',
styleUrls: ['cdk-tree-flat-example.css'],
providers: [FileDatabase]
})
export class CdkTreeFlatExample {
treeControl: FlatTreeControl<FileFlatNode>;
treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
constructor(database: FileDatabase) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
this._isExpandable, this._getChildren);
this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
database.dataChange.subscribe(data => {
this.dataSource.data = data;
});
}
transformer = (node: FileNode, level: number) => {
let flatNode = new FileFlatNode();
flatNode.filename = node.filename;
flatNode.type = node.type;
flatNode.level = level;
flatNode.expandable = !!node.children;
return flatNode;
}
private _getLevel = (node: FileFlatNode) => { return node.level; };
private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
}

15
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css Executable file
View File

@ -0,0 +1,15 @@
.example-tree-invisible {
display: none;
}
.example-tree ul,
.example-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
.example-tree-node {
display: block;
padding-left: 40px;
}

17
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html Executable file
View File

@ -0,0 +1,17 @@
<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-nested-tree-node>
<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
<div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container cdkTreeNodeOutlet></ng-container>
</div>
</cdk-nested-tree-node>
</cdk-tree>

131
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts Executable file
View File

@ -0,0 +1,131 @@
import {Component, Injectable} from '@angular/core';
import {NestedTreeControl} from '@angular/cdk/tree';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {of, BehaviorSubject} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
*/
export class FileNode {
children: FileNode[];
filename: string;
type: any;
}
/**
* The Json tree data in string. The data could be parsed into Json object
*/
const TREE_DATA = `
{
"Documents": {
"angular": {
"src": {
"core": "ts",
"compiler": "ts"
}
},
"material2": {
"src": {
"button": "ts",
"checkbox": "ts",
"input": "ts"
}
}
},
"Downloads": {
"Tutorial": "html",
"November": "pdf",
"October": "pdf"
},
"Pictures": {
"Sun": "png",
"Woods": "jpg",
"Photo Booth Library": {
"Contents": "dir",
"Pictures": "dir"
}
},
"Applications": {
"Chrome": "app",
"Calendar": "app",
"Webstorm": "app"
}
}`;
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class FileDatabase {
dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
get data(): FileNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Parse the string to json object.
const dataObject = JSON.parse(TREE_DATA);
// Build the tree nodes from Json object. The result is a list of `FileNode` with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `FileNode`.
*/
buildFileTree(value: any, level: number): FileNode[] {
let data: any[] = [];
for (let k in value) {
let v = value[k];
let node = new FileNode();
node.filename = `${k}`;
if (v === null || v === undefined) {
// no action
} else if (typeof v === 'object') {
node.children = this.buildFileTree(v, level + 1);
} else {
node.type = v;
}
data.push(node);
}
return data;
}
}
/**
* @title Tree with nested nodes
*/
@Component({
selector: 'cdk-tree-nested-example',
templateUrl: 'cdk-tree-nested-example.html',
styleUrls: ['cdk-tree-nested-example.css'],
providers: [FileDatabase]
})
export class CdkTreeNestedExample {
nestedTreeControl: NestedTreeControl<FileNode>;
nestedDataSource: MatTreeNestedDataSource<FileNode>;
constructor(database: FileDatabase) {
this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();
database.dataChange.subscribe(data => this.nestedDataSource.data = data);
}
private _getChildren = (node: FileNode) => { return of(node.children); };
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
}

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

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

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

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

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

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

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

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

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

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

3
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css Executable file
View File

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

27
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html Executable file
View File

@ -0,0 +1,27 @@
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(remove)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{ fruit }}
</mat-option>
</mat-autocomplete>
</mat-form-field>

79
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts Executable file
View File

@ -0,0 +1,79 @@
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Chips Autocomplete
*/
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css']
})
export class ChipsAutocompleteExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = false;
separatorKeysCodes = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<any[]>;
fruits = [
{ name: 'Lemon' },
];
allFruits = [
'Orange',
'Strawberry',
'Lime',
'Apple',
];
@ViewChild('fruitInput') fruitInput: ElementRef;
constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(fruit: any): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
filter(name: string) {
return this.allFruits.filter(fruit =>
fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push({ name: event.option.viewValue });
this.fruitInput.nativeElement.value = '';
}
}

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

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

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

@ -1,14 +1,14 @@
<mat-form-field class="demo-chip-list"> <mat-form-field class="demo-chip-list">
<mat-chip-list #chipList> <mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (remove)="remove(fruit)"> [removable]="removable" (removed)="remove(fruit)">
{{fruit.name}} {{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip> </mat-chip>
<input placeholder="New fruit..." <input placeholder="New fruit..."
[matChipInputFor]="chipList" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"/> (matChipInputTokenEnd)="add($event)" />
</mat-chip-list> </mat-chip-list>
</mat-form-field> </mat-form-field>

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<mat-chip-list class="mat-chip-list-stacked"> <mat-chip-list class="mat-chip-list-stacked">
<mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color"> <mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color">
{{chip.name}} {{chip.name}}
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>

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

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

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

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

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

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

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

1
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css Executable file
View File

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

13
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.html Executable file
View File

@ -0,0 +1,13 @@
<mat-form-field color="accent">
<mat-label>Inherited calendar color</mat-label>
<input matInput [matDatepicker]="picker1">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field color="accent">
<mat-label>Custom calendar color</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

9
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.ts Executable file
View File

@ -0,0 +1,9 @@
import {Component} from '@angular/core';
/** @title Datepicker palette colors */
@Component({
selector: 'datepicker-color-example',
templateUrl: 'datepicker-color-example.html',
styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

16
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css Executable file
View File

@ -0,0 +1,16 @@
.example-header {
display: flex;
align-items: center;
padding: 0.5em;
}
.example-header-label {
flex: 1;
height: 1em;
font-weight: bold;
text-align: center;
}
.example-double-arrow .mat-icon {
margin: -22%;
}

6
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.html Executable file
View File

@ -0,0 +1,6 @@
<mat-form-field>
<mat-label>Custom calendar header</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
</mat-form-field>

86
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts Executable file
View File

@ -0,0 +1,86 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Host,
Inject,
OnDestroy,
ViewEncapsulation
} from '@angular/core';
import {MatCalendar} from '@angular/material';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
/** @title Datepicker with custom calendar header */
@Component({
selector: 'datepicker-custom-header-example',
templateUrl: 'datepicker-custom-header-example.html',
styleUrls: ['datepicker-custom-header-example.css'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatepickerCustomHeaderExample {
exampleHeader = ExampleHeader;
}
/** Custom header component for datepicker. */
@Component({
selector: 'example-header',
template: `
<div class="example-header">
<button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
<mat-icon>keyboard_arrow_left</mat-icon>
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
<button mat-icon-button (click)="previousClicked('month')">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
<span class="example-header-label">{{periodLabel}}</span>
<button mat-icon-button (click)="nextClicked('month')">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
<button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
<mat-icon>keyboard_arrow_right</mat-icon>
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleHeader<D> implements OnDestroy {
private destroyed = new Subject<void>();
constructor(@Host() private calendar: MatCalendar<D>,
private dateAdapter: DateAdapter<D>,
@Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
cdr: ChangeDetectorRef) {
calendar.stateChanges
.pipe(takeUntil(this.destroyed))
.subscribe(() => cdr.markForCheck());
}
ngOnDestroy() {
this.destroyed.next();
this.destroyed.complete();
}
get periodLabel() {
return this.dateAdapter
.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
.toLocaleUpperCase();
}
previousClicked(mode: 'month' | 'year') {
this.calendar.activeDate = mode == 'month' ?
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
}
nextClicked(mode: 'month' | 'year') {
this.calendar.activeDate = mode == 'month' ?
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
}
}

0
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.css Normal file → Executable file
View File

30
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.html Normal file → Executable file
View File

@ -1,23 +1,23 @@
<p> <p>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled> <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
<mat-datepicker #dp1></mat-datepicker> <mat-datepicker #dp1></mat-datepicker>
</mat-form-field> </mat-form-field>
</p> </p>
<p> <p>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled"> <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
<mat-datepicker #dp2></mat-datepicker> <mat-datepicker #dp2></mat-datepicker>
</mat-form-field> </mat-form-field>
</p> </p>
<p> <p>
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled> <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker> <mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field> </mat-form-field>
</p> </p>

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

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

8
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.css Normal file → Executable file
View File

@ -1,6 +1,6 @@
.example-events { .example-events {
width: 400px; width: 400px;
height: 200px; height: 200px;
border: 1px solid #555; border: 1px solid #555;
overflow: auto; overflow: auto;
} }

10
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.html Normal file → Executable file
View File

@ -1,10 +1,10 @@
<mat-form-field> <mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Input & change events" <input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)"> (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<div class="example-events"> <div class="example-events">
<div *ngFor="let e of events">{{e}}</div> <div *ngFor="let e of events">{{e}}</div>
</div> </div>

22
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts Normal file → Executable file
View File

@ -1,18 +1,16 @@
import { Component } from '@angular/core'; import {Component} from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */ /** @title Datepicker input and change events */
@Component({ @Component({
selector : 'datepicker-events-example', selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html', templateUrl: 'datepicker-events-example.html',
styleUrls : ['datepicker-events-example.css'] styleUrls: ['datepicker-events-example.css'],
}) })
export class DatepickerEventsExample export class DatepickerEventsExample {
{ events: string[] = [];
events: string[] = [];
addEvent(type: string, event: MatDatepickerInputEvent<Date>) addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
{ this.events.push(`${type}: ${event.value}`);
this.events.push(`${type}: ${event.value}`); }
}
} }

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