mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
Updated to Angular 9.0.0
Removed Angular Material docs and added a link to the official docs
This commit is contained in:
sercan
parent
007739c356
commit
54dd7837ec
17
angular.json
17
angular.json
|
|
@ -17,6 +17,7 @@
|
|||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"aot": true,
|
||||
"outputPath": "dist/fuse",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
|
|
@ -55,14 +56,30 @@
|
|||
"type": "initial",
|
||||
"maximumWarning": "4mb",
|
||||
"maximumError": "6mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"ec": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"sourceMap": true,
|
||||
"extractCss": true
|
||||
},
|
||||
"hmr": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
|
|
|
|||
8752
package-lock.json
generated
8752
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
104
package.json
104
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse",
|
||||
"version": "8.1.2",
|
||||
"version": "9.0.0",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
|
@ -18,71 +18,71 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.7",
|
||||
"@angular/animations": "8.1.2",
|
||||
"@angular/cdk": "8.1.1",
|
||||
"@angular/common": "8.1.2",
|
||||
"@angular/compiler": "8.1.2",
|
||||
"@angular/core": "8.1.2",
|
||||
"@angular/flex-layout": "8.0.0-beta.26",
|
||||
"@angular/forms": "8.1.2",
|
||||
"@angular/material": "8.1.1",
|
||||
"@angular/material-moment-adapter": "8.1.1",
|
||||
"@angular/platform-browser": "8.1.2",
|
||||
"@angular/platform-browser-dynamic": "8.1.2",
|
||||
"@angular/router": "8.1.2",
|
||||
"@ngrx/effects": "8.1.0",
|
||||
"@ngrx/router-store": "8.1.0",
|
||||
"@ngrx/store": "8.1.0",
|
||||
"@ngrx/store-devtools": "8.1.0",
|
||||
"@agm/core": "1.1.0",
|
||||
"@angular/animations": "9.0.0-rc.13",
|
||||
"@angular/cdk": "9.0.0-rc.9",
|
||||
"@angular/common": "9.0.0-rc.13",
|
||||
"@angular/compiler": "9.0.0-rc.13",
|
||||
"@angular/core": "9.0.0-rc.13",
|
||||
"@angular/flex-layout": "9.0.0-beta.28",
|
||||
"@angular/forms": "9.0.0-rc.13",
|
||||
"@angular/material": "9.0.0-rc.9",
|
||||
"@angular/material-moment-adapter": "9.0.0-rc.9",
|
||||
"@angular/platform-browser": "9.0.0-rc.13",
|
||||
"@angular/platform-browser-dynamic": "9.0.0-rc.13",
|
||||
"@angular/router": "9.0.0-rc.13",
|
||||
"@ngrx/effects": "8.6.0",
|
||||
"@ngrx/router-store": "8.6.0",
|
||||
"@ngrx/store": "8.6.0",
|
||||
"@ngrx/store-devtools": "8.6.0",
|
||||
"@ngx-translate/core": "11.0.1",
|
||||
"@swimlane/dragula": "3.8.0",
|
||||
"@swimlane/ngx-charts": "12.0.1",
|
||||
"@swimlane/ngx-datatable": "15.0.2",
|
||||
"@swimlane/ngx-dnd": "8.0.0",
|
||||
"@swimlane/ngx-charts": "13.0.2",
|
||||
"@swimlane/ngx-datatable": "16.0.3",
|
||||
"@swimlane/ngx-dnd": "8.1.0",
|
||||
"@types/prismjs": "1.16.0",
|
||||
"angular-calendar": "0.27.13",
|
||||
"angular-in-memory-web-api": "0.8.0",
|
||||
"chart.js": "2.8.0",
|
||||
"angular-calendar": "0.28.2",
|
||||
"angular-in-memory-web-api": "0.9.0",
|
||||
"chart.js": "2.9.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"d3": "5.9.7",
|
||||
"date-fns": "1.30.1",
|
||||
"d3": "5.15.0",
|
||||
"date-fns": "2.9.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"lodash": "4.17.15",
|
||||
"moment": "2.24.0",
|
||||
"ng2-charts": "2.3.0",
|
||||
"ngrx-store-freeze": "0.2.4",
|
||||
"ngx-color-picker": "8.1.0",
|
||||
"ngx-cookie-service": "2.2.0",
|
||||
"perfect-scrollbar": "1.4.0",
|
||||
"prismjs": "1.16.0",
|
||||
"rxjs": "6.5.2",
|
||||
"ngx-color-picker": "8.2.0",
|
||||
"ngx-cookie-service": "2.3.0",
|
||||
"perfect-scrollbar": "1.5.0",
|
||||
"prismjs": "1.19.0",
|
||||
"rxjs": "6.5.4",
|
||||
"tslib": "1.10.0",
|
||||
"web-animations-js": "2.3.2",
|
||||
"zone.js": "0.9.1"
|
||||
"zone.js": "0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "8.1.2",
|
||||
"@angular/compiler-cli": "8.1.2",
|
||||
"@angular/language-service": "8.1.2",
|
||||
"@angular-devkit/build-angular": "0.801.2",
|
||||
"@angular/cli": "9.0.0-rc.12",
|
||||
"@angular/compiler-cli": "9.0.0-rc.13",
|
||||
"@angular/language-service": "9.0.0-rc.13",
|
||||
"@angular-devkit/build-angular": "0.900.0-rc.12",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "3.3.14",
|
||||
"@types/jasminewd2": "2.0.6",
|
||||
"@types/lodash": "4.14.136",
|
||||
"@types/node": "8.9.5",
|
||||
"codelyzer": "5.1.0",
|
||||
"jasmine-core": "3.4.0",
|
||||
"@types/jasmine": "3.5.2",
|
||||
"@types/jasminewd2": "2.0.8",
|
||||
"@types/lodash": "4.14.149",
|
||||
"@types/node": "12.12.6",
|
||||
"codelyzer": "5.2.1",
|
||||
"jasmine-core": "3.5.0",
|
||||
"jasmine-spec-reporter": "4.2.1",
|
||||
"karma": "4.1.0",
|
||||
"karma-chrome-launcher": "2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "2.0.5",
|
||||
"karma": "4.3.0",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "2.1.1",
|
||||
"karma-jasmine": "2.0.1",
|
||||
"karma-jasmine-html-reporter": "1.4.2",
|
||||
"protractor": "5.4.2",
|
||||
"ts-node": "7.0.1",
|
||||
"tslib": "1.10.0",
|
||||
"tslint": "5.15.0",
|
||||
"typescript": "3.4.5",
|
||||
"webpack-bundle-analyzer": "3.3.2"
|
||||
"karma-jasmine-html-reporter": "1.5.1",
|
||||
"protractor": "5.4.3",
|
||||
"ts-node": "8.3.0",
|
||||
"tslint": "5.18.0",
|
||||
"typescript": "3.7.5",
|
||||
"webpack-bundle-analyzer": "3.6.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
|
|||
@Input()
|
||||
navigation: any;
|
||||
|
||||
@ViewChild('searchInput', {static: false})
|
||||
@ViewChild('searchInput')
|
||||
searchInputField;
|
||||
|
||||
@ViewChild('shortcuts', {static: false})
|
||||
@ViewChild('shortcuts')
|
||||
shortcutsEl: ElementRef;
|
||||
|
||||
// Private
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export class FuseModule
|
|||
}
|
||||
}
|
||||
|
||||
static forRoot(config): ModuleWithProviders
|
||||
static forRoot(config): ModuleWithProviders<FuseModule>
|
||||
{
|
||||
return {
|
||||
ngModule : FuseModule,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// to the core Fuse and Angular Material mixins
|
||||
|
||||
// ngx-datatable
|
||||
@import '~@swimlane/ngx-datatable/release/themes/material';
|
||||
@import '~@swimlane/ngx-datatable/themes/material';
|
||||
|
||||
// Perfect scrollbar
|
||||
@import '~perfect-scrollbar/css/perfect-scrollbar';
|
||||
|
|
|
|||
|
|
@ -24,23 +24,19 @@ import { LayoutModule } from 'app/layout/layout.module';
|
|||
const appRoutes: Routes = [
|
||||
{
|
||||
path : 'apps',
|
||||
loadChildren: './main/apps/apps.module#AppsModule'
|
||||
loadChildren: () => import('./main/apps/apps.module').then(m => m.AppsModule)
|
||||
},
|
||||
{
|
||||
path : 'pages',
|
||||
loadChildren: './main/pages/pages.module#PagesModule'
|
||||
loadChildren: () => import('./main/pages/pages.module').then(m => m.PagesModule)
|
||||
},
|
||||
{
|
||||
path : 'ui',
|
||||
loadChildren: './main/ui/ui.module#UIModule'
|
||||
loadChildren: () => import('./main/ui/ui.module').then(m => m.UIModule)
|
||||
},
|
||||
{
|
||||
path : 'documentation',
|
||||
loadChildren: './main/documentation/documentation.module#DocumentationModule'
|
||||
},
|
||||
{
|
||||
path : 'angular-material-elements',
|
||||
loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
|
||||
loadChildren: () => import('./main/documentation/documentation.module').then(m => m.DocumentationModule)
|
||||
},
|
||||
{
|
||||
path : '**',
|
||||
|
|
|
|||
|
|
@ -121,8 +121,6 @@ $typography: mat-typography-config(
|
|||
|
||||
@import "src/app/main/ui/cards/cards.theme";
|
||||
|
||||
@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
|
||||
|
||||
// Define a mixin for easier access
|
||||
@mixin components-theme($theme) {
|
||||
|
||||
|
|
@ -172,9 +170,6 @@ $typography: mat-typography-config(
|
|||
|
||||
// UI
|
||||
@include ui-cards-theme($theme);
|
||||
|
||||
// Example Viewer
|
||||
@include example-viewer-theme($theme);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,13 +1,4 @@
|
|||
import {
|
||||
startOfDay,
|
||||
endOfDay,
|
||||
subDays,
|
||||
addDays,
|
||||
endOfMonth,
|
||||
isSameDay,
|
||||
isSameMonth,
|
||||
addHours
|
||||
} from 'date-fns';
|
||||
import { addDays, addHours, endOfDay, endOfMonth, startOfDay, subDays } from 'date-fns';
|
||||
|
||||
export class CalendarFakeDb
|
||||
{
|
||||
|
|
@ -37,7 +28,8 @@ export class CalendarFakeDb
|
|||
},
|
||||
{
|
||||
start : startOfDay(new Date()),
|
||||
title : 'An event with no end date',
|
||||
end : endOfDay(new Date()),
|
||||
title : 'An event',
|
||||
allDay : false,
|
||||
color : {
|
||||
primary : '#FF9800',
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
|||
sidebarFolded: boolean;
|
||||
user: any;
|
||||
|
||||
@ViewChild('replyForm', {static: false})
|
||||
@ViewChild('replyForm')
|
||||
private _replyForm: NgForm;
|
||||
|
||||
@ViewChild('replyInput', {static: false})
|
||||
@ViewChild('replyInput')
|
||||
private _replyInput: ElementRef;
|
||||
|
||||
@ViewChildren(FusePerfectScrollbarDirective)
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<div class="page-layout simple fullwidth angular-material-elements">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||
<span class="secondary-text">Components</span>
|
||||
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||
<span class="secondary-text">Angular Material Elements</span>
|
||||
</div>
|
||||
<div class="h2 mt-16">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/"
|
||||
target="_blank">
|
||||
<mat-icon class="mr-8">link</mat-icon>
|
||||
<span>Reference</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24">
|
||||
<div *ngFor="let example of examples">
|
||||
<example-viewer [example]="example"></example-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
:host {
|
||||
|
||||
.angular-material-elements {
|
||||
|
||||
> .content {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { COMPONENT_MAP } from 'app/main/angular-material-elements/example-components';
|
||||
|
||||
@Component({
|
||||
selector : 'angular-material',
|
||||
templateUrl: './angular-material-elements.component.html',
|
||||
styleUrls : ['./angular-material-elements.component.scss']
|
||||
})
|
||||
export class AngularMaterialElementsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
examples: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {ActivatedRoute} _activatedRoute
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._activatedRoute.params
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(params => {
|
||||
this.id = params['id'];
|
||||
const _title = this.id.replace('-', ' ');
|
||||
this.title = _title.charAt(0).toUpperCase() + _title.substring(1);
|
||||
this.examples = COMPONENT_MAP[this.id];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
import { FuseHighlightModule } from '@fuse/components/index';
|
||||
import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
|
||||
|
||||
import { MaterialModule } from 'app/main/angular-material-elements/material.module';
|
||||
import { EXAMPLE_LIST } from 'app/main/angular-material-elements/example-components';
|
||||
import { AngularMaterialElementsComponent } from 'app/main/angular-material-elements/angular-material-elements.component';
|
||||
import { ExampleViewerComponent } from 'app/main/angular-material-elements/example-viewer/example-viewer';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path : '',
|
||||
children: [
|
||||
{
|
||||
path : ':id',
|
||||
component: AngularMaterialElementsComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations : [
|
||||
[...EXAMPLE_LIST],
|
||||
AngularMaterialElementsComponent,
|
||||
ExampleViewerComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(routes),
|
||||
|
||||
MaterialModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseHighlightModule,
|
||||
FuseWidgetModule
|
||||
],
|
||||
entryComponents: EXAMPLE_LIST,
|
||||
})
|
||||
export class AngularMaterialElementsModule
|
||||
{
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,71 +0,0 @@
|
|||
<div class="example-viewer-wrapper mat-card mat-elevation-z2">
|
||||
|
||||
<div class="example-viewer-header">
|
||||
|
||||
<div class="example-viewer-title">{{exampleData?.title}}</div>
|
||||
|
||||
<button mat-icon-button type="button" (click)="toggleSourceView()"
|
||||
[matTooltip]="'View source'">
|
||||
<mat-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
|
||||
preserveAspectRatio="xMidYMid meet" focusable="false">
|
||||
<path fill="none" d="M0 0h24v24H0V0z"></path>
|
||||
<path
|
||||
d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="example-viewer-source" [fxShow]="showSource">
|
||||
|
||||
<mat-tab-group [(selectedIndex)]="selectedIndex">
|
||||
<mat-tab label="HTML"></mat-tab>
|
||||
<mat-tab label="TS"></mat-tab>
|
||||
<mat-tab label="CSS"></mat-tab>
|
||||
</mat-tab-group>
|
||||
<div class="tab-content">
|
||||
<section class="tab" *ngIf="selectedIndex === 0"
|
||||
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
|
||||
<button mat-icon-button type="button" class="example-source-copy"
|
||||
title="Copy example source" aria-label="Copy example source to clipboard"
|
||||
(click)="copySource(htmlView.el.nativeElement.innerText)">
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
</button>
|
||||
<fuse-highlight lang="html"
|
||||
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
|
||||
</fuse-highlight>
|
||||
</section>
|
||||
|
||||
<section class="tab" *ngIf="selectedIndex === 1"
|
||||
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
|
||||
<button mat-icon-button type="button" class="example-source-copy"
|
||||
title="Copy example source" aria-label="Copy example source to clipboard"
|
||||
(click)="copySource(tsView.el.nativeElement.innerText)">
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
</button>
|
||||
<fuse-highlight lang="typescript"
|
||||
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
|
||||
</fuse-highlight>
|
||||
</section>
|
||||
|
||||
<section class="tab" *ngIf="selectedIndex === 2"
|
||||
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
|
||||
<button mat-icon-button type="button" class="example-source-copy"
|
||||
title="Copy example source" aria-label="Copy example source to clipboard"
|
||||
(click)="copySource(cssView.el.nativeElement.innerText)">
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
</button>
|
||||
<fuse-highlight lang="css"
|
||||
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
|
||||
</fuse-highlight>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example-viewer-body" [fxHide]="showSource">
|
||||
<!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
|
||||
<!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
|
||||
<div #previewContainer></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
example-viewer {
|
||||
display: block;
|
||||
padding: 24px 0;
|
||||
|
||||
.example-viewer-wrapper {
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.example-viewer-header {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 20px;
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.example-viewer-title {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.example-viewer-source {
|
||||
|
||||
.tab-content {
|
||||
background: #263238;
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
|
||||
.example-source-copy {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
display: none;
|
||||
right: 8px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.example-source-copy {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.example-source {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 150px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
> pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.example-viewer-body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@mixin example-viewer-theme($theme) {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
example-viewer {
|
||||
|
||||
.example-viewer-header {
|
||||
color: map-get($foreground, secondary-text);
|
||||
background: map-get($background, app-bar);
|
||||
border-bottom-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.example-viewer-source {
|
||||
|
||||
.tab-content {
|
||||
|
||||
.tab {
|
||||
|
||||
.example-source {
|
||||
border-bottom-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import 'prismjs/components/prism-scss';
|
||||
import 'prismjs/components/prism-typescript';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations/index';
|
||||
import { FuseCopierService } from '@fuse/services/copier.service';
|
||||
|
||||
import { EXAMPLE_COMPONENTS } from 'app/main/angular-material-elements/example-components';
|
||||
|
||||
export interface LiveExample
|
||||
{
|
||||
title: string;
|
||||
component: any;
|
||||
additionalFiles?: string[];
|
||||
selectorName?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector : 'example-viewer',
|
||||
templateUrl : './example-viewer.html',
|
||||
styleUrls : ['./example-viewer.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class ExampleViewerComponent implements AfterViewInit, OnDestroy
|
||||
{
|
||||
_example: string;
|
||||
exampleData: LiveExample;
|
||||
showSource: boolean;
|
||||
previewRef: ComponentRef<any>;
|
||||
selectedIndex: number;
|
||||
|
||||
@ViewChild('previewContainer', {read: ViewContainerRef, static: false})
|
||||
private _previewContainer: ViewContainerRef;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {MatSnackBar} _matSnackBar
|
||||
* @param {FuseCopierService} _fuseCopierService
|
||||
* @param {ComponentFactoryResolver} _componentFactoryResolver
|
||||
*/
|
||||
constructor(
|
||||
private _matSnackBar: MatSnackBar,
|
||||
private _fuseCopierService: FuseCopierService,
|
||||
private _componentFactoryResolver: ComponentFactoryResolver
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.selectedIndex = 0;
|
||||
this.showSource = false;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Container
|
||||
*
|
||||
* @param {ViewContainerRef} value
|
||||
*/
|
||||
set container(value: ViewContainerRef)
|
||||
{
|
||||
this._previewContainer = value;
|
||||
}
|
||||
|
||||
get container(): ViewContainerRef
|
||||
{
|
||||
return this._previewContainer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Example
|
||||
*
|
||||
* @param {string} example
|
||||
*/
|
||||
@Input()
|
||||
set example(example: string)
|
||||
{
|
||||
if ( example && EXAMPLE_COMPONENTS[example] )
|
||||
{
|
||||
this._example = example;
|
||||
this.exampleData = EXAMPLE_COMPONENTS[example];
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log('MISSING EXAMPLE: ', example);
|
||||
}
|
||||
}
|
||||
|
||||
get example(): string
|
||||
{
|
||||
return this._example;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
setTimeout(() => {
|
||||
const cmpFactory = this._componentFactoryResolver.resolveComponentFactory(this.exampleData.component);
|
||||
this.previewRef = this._previewContainer.createComponent(cmpFactory);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.previewRef )
|
||||
{
|
||||
this.previewRef.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle source view
|
||||
*/
|
||||
toggleSourceView(): void
|
||||
{
|
||||
this.showSource = !this.showSource;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy the source
|
||||
*
|
||||
* @param {string} text
|
||||
*/
|
||||
copySource(text: string): void
|
||||
{
|
||||
if ( this._fuseCopierService.copyText(text) )
|
||||
{
|
||||
this._matSnackBar.open('Code copied', '', {duration: 2500});
|
||||
}
|
||||
else
|
||||
{
|
||||
this._matSnackBar.open('Copy failed. Please try again!', '', {duration: 2500});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatSliderModule } from '@angular/material/slider';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MatAutocompleteModule,
|
||||
MatBadgeModule,
|
||||
MatBottomSheetModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatCardModule,
|
||||
MatCheckboxModule,
|
||||
MatChipsModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatDividerModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatGridListModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatMomentDateModule,
|
||||
MatPaginatorModule,
|
||||
MatProgressBarModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatRadioModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatSliderModule,
|
||||
MatSnackBarModule,
|
||||
MatSortModule,
|
||||
MatStepperModule,
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
MatTreeModule
|
||||
],
|
||||
exports: [
|
||||
MatAutocompleteModule,
|
||||
MatBadgeModule,
|
||||
MatBottomSheetModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatCardModule,
|
||||
MatCheckboxModule,
|
||||
MatChipsModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatDividerModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatGridListModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatMomentDateModule,
|
||||
MatPaginatorModule,
|
||||
MatProgressBarModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatRadioModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatSliderModule,
|
||||
MatSnackBarModule,
|
||||
MatSortModule,
|
||||
MatStepperModule,
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
MatTreeModule
|
||||
]
|
||||
})
|
||||
export class MaterialModule
|
||||
{
|
||||
}
|
||||
|
|
@ -6,51 +6,51 @@ import { FuseSharedModule } from '@fuse/shared.module';
|
|||
const routes = [
|
||||
{
|
||||
path : 'dashboards/analytics',
|
||||
loadChildren: './dashboards/analytics/analytics.module#AnalyticsDashboardModule'
|
||||
loadChildren: () => import('./dashboards/analytics/analytics.module').then(m => m.AnalyticsDashboardModule)
|
||||
},
|
||||
{
|
||||
path : 'dashboards/project',
|
||||
loadChildren: './dashboards/project/project.module#ProjectDashboardModule'
|
||||
loadChildren: () => import('./dashboards/project/project.module').then(m => m.ProjectDashboardModule)
|
||||
},
|
||||
{
|
||||
path : 'mail',
|
||||
loadChildren: './mail/mail.module#MailModule'
|
||||
loadChildren: () => import('./mail/mail.module').then(m => m.MailModule)
|
||||
},
|
||||
{
|
||||
path : 'mail-ngrx',
|
||||
loadChildren: './mail-ngrx/mail.module#MailNgrxModule'
|
||||
loadChildren: () => import('./mail-ngrx/mail.module').then(m => m.MailNgrxModule)
|
||||
},
|
||||
{
|
||||
path : 'chat',
|
||||
loadChildren: './chat/chat.module#ChatModule'
|
||||
loadChildren: () => import('./chat/chat.module').then(m => m.ChatModule)
|
||||
},
|
||||
{
|
||||
path : 'calendar',
|
||||
loadChildren: './calendar/calendar.module#CalendarModule'
|
||||
loadChildren: () => import('./calendar/calendar.module').then(m => m.CalendarModule)
|
||||
},
|
||||
{
|
||||
path : 'e-commerce',
|
||||
loadChildren: './e-commerce/e-commerce.module#EcommerceModule'
|
||||
loadChildren: () => import('./e-commerce/e-commerce.module').then(m => m.EcommerceModule)
|
||||
},
|
||||
{
|
||||
path : 'academy',
|
||||
loadChildren: './academy/academy.module#AcademyModule'
|
||||
loadChildren: () => import('./academy/academy.module').then(m => m.AcademyModule)
|
||||
},
|
||||
{
|
||||
path : 'todo',
|
||||
loadChildren: './todo/todo.module#TodoModule'
|
||||
loadChildren: () => import('./todo/todo.module').then(m => m.TodoModule)
|
||||
},
|
||||
{
|
||||
path : 'file-manager',
|
||||
loadChildren: './file-manager/file-manager.module#FileManagerModule'
|
||||
loadChildren: () => import('./file-manager/file-manager.module').then(m => m.FileManagerModule)
|
||||
},
|
||||
{
|
||||
path : 'contacts',
|
||||
loadChildren: './contacts/contacts.module#ContactsModule'
|
||||
loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
|
||||
},
|
||||
{
|
||||
path : 'scrumboard',
|
||||
loadChildren: './scrumboard/scrumboard.module#ScrumboardModule'
|
||||
loadChildren: () => import('./scrumboard/scrumboard.module').then(m => m.ScrumboardModule)
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -101,20 +101,16 @@
|
|||
<mwl-calendar-week-view
|
||||
*ngSwitchCase="'week'"
|
||||
[viewDate]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}"
|
||||
[events]="events"
|
||||
[refresh]="refresh"
|
||||
(dayClicked)="dayClicked($event.day)"
|
||||
(eventClicked)="editEvent('edit', $event.event)"
|
||||
(eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-week-view>
|
||||
<mwl-calendar-day-view
|
||||
*ngSwitchCase="'day'"
|
||||
[viewDate]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}"
|
||||
[events]="events"
|
||||
[refresh]="refresh"
|
||||
(dayClicked)="dayClicked($event.day)"
|
||||
(eventClicked)="editEvent('edit', $event.event)"
|
||||
(eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-day-view>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ export class CalendarComponent implements OnInit
|
|||
{
|
||||
event.start = newStart;
|
||||
event.end = newEnd;
|
||||
// console.warn('Dropped or resized', event);
|
||||
this.refresh.next(true);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
|
|||
replyInput: any;
|
||||
selectedChat: any;
|
||||
|
||||
@ViewChild(FusePerfectScrollbarDirective, {static: false})
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
directiveScroll: FusePerfectScrollbarDirective;
|
||||
|
||||
@ViewChildren('replyInput')
|
||||
replyInputField;
|
||||
|
||||
@ViewChild('replyForm', {static: false})
|
||||
@ViewChild('replyForm')
|
||||
replyForm: NgForm;
|
||||
|
||||
// Private
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@
|
|||
class="contact"
|
||||
(click)="editContact(contact)"
|
||||
[ngClass]="{'accent-50':checkboxes[contact.id]}"
|
||||
matRipple
|
||||
[@animate]="{value:'*',params:{y:'100%'}}">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/conta
|
|||
})
|
||||
export class ContactsContactListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('dialogContent', {static: false})
|
||||
@ViewChild('dialogContent')
|
||||
dialogContent: TemplateRef<any>;
|
||||
|
||||
contacts: any;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
<mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
(click)="onSelect(row)"
|
||||
[ngClass]="{'selected' : row == selected}"
|
||||
matRipple [@animate]="{value:'*',params:{y:'100%'}}"
|
||||
[@animate]="{value:'*',params:{y:'100%'}}"
|
||||
>
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</div>
|
||||
|
||||
<div class="mail-list">
|
||||
<mail-ngrx-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
|
||||
<mail-ngrx-list-item *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
|
||||
[ngClass]="{'current-mail':mail?.id == currentMail?.id}">
|
||||
</mail-ngrx-list-item>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</div>
|
||||
|
||||
<div class="mail-list" [@animateStagger]="{value:'50'}">
|
||||
<mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
|
||||
<mail-list-item *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
|
||||
[ngClass]="{'current-mail':mail?.id == currentMail?.id}"
|
||||
[@animate]="{value:'*',params:{y:'100%'}}">
|
||||
</mail-list-item>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export class ScrumboardBoardAddListComponent
|
|||
@Output()
|
||||
listAdded: EventEmitter<any>;
|
||||
|
||||
@ViewChild('nameInput', {static: false})
|
||||
@ViewChild('nameInput')
|
||||
nameInputField;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@ export class ScrumboardCardDialogComponent implements OnInit, OnDestroy
|
|||
toggleInArray = FuseUtils.toggleInArray;
|
||||
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
|
||||
|
||||
@ViewChild('checklistMenuTrigger', {static: false})
|
||||
@ViewChild('checklistMenuTrigger')
|
||||
checklistMenu: MatMenuTrigger;
|
||||
|
||||
@ViewChild('newCheckListTitleField', {static: false})
|
||||
@ViewChild('newCheckListTitleField')
|
||||
newCheckListTitleField;
|
||||
|
||||
// Private
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class ScrumboardEditBoardNameComponent
|
|||
@Output()
|
||||
boardNameChanged: EventEmitter<any>;
|
||||
|
||||
@ViewChild('nameInput', {static: false})
|
||||
@ViewChild('nameInput')
|
||||
nameInputField;
|
||||
|
||||
constructor(
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export class ScrumboardBoardAddCardComponent
|
|||
@Output()
|
||||
cardAdded: EventEmitter<any>;
|
||||
|
||||
@ViewChild('nameInput', {static: false})
|
||||
@ViewChild('nameInput')
|
||||
nameInputField;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class ScrumboardBoardEditListNameComponent
|
|||
@Output()
|
||||
listNameChanged: EventEmitter<any>;
|
||||
|
||||
@ViewChild('nameInput', {static: false})
|
||||
@ViewChild('nameInput')
|
||||
nameInputField;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class ScrumboardBoardListComponent implements OnInit, OnDestroy
|
|||
@Input()
|
||||
list;
|
||||
|
||||
@ViewChild(FusePerfectScrollbarDirective, {static: false})
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
listScroll: FusePerfectScrollbarDirective;
|
||||
|
||||
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
|
|||
formType: string;
|
||||
todoForm: FormGroup;
|
||||
|
||||
@ViewChild('titleInput', {static: false})
|
||||
@ViewChild('titleInput')
|
||||
titleInputField;
|
||||
|
||||
// Private
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
[model]="todo"
|
||||
(click)="readTodo(todo.id)"
|
||||
[ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
|
||||
matRipple
|
||||
[@animate]="{value:'*',params:{y:'100%'}}">
|
||||
</todo-list-item>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,31 @@
|
|||
|
||||
<div class="changelog">
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<!-- @ v9.0.0 -->
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<div class="entry">
|
||||
|
||||
<div class="title">
|
||||
<span class="version">v9.0.0</span>
|
||||
<span class="date">2020.02.05</span>
|
||||
</div>
|
||||
|
||||
<div class="groups">
|
||||
|
||||
<div class="new">
|
||||
<span class="title">New</span>
|
||||
<ul>
|
||||
<li>Updated Angular to 9.0.0</li>
|
||||
<li>Updated Angular Material to 9.0.0</li>
|
||||
<li>Updated various other packages to latest versions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<!-- @ v8.1.2 -->
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
|
|
|
|||
|
|
@ -14,27 +14,27 @@ const routes: Routes = [
|
|||
},
|
||||
{
|
||||
path : 'getting-started',
|
||||
loadChildren: './getting-started/getting-started.module#GettingStartedModule'
|
||||
loadChildren: () => import('./getting-started/getting-started.module').then(m => m.GettingStartedModule)
|
||||
},
|
||||
{
|
||||
path : 'working-with-fuse',
|
||||
loadChildren: './working-with-fuse/working-with-fuse.module#WorkingWithFuseModule'
|
||||
loadChildren: () => import('./working-with-fuse/working-with-fuse.module').then(m => m.WorkingWithFuseModule)
|
||||
},
|
||||
{
|
||||
path : 'components',
|
||||
loadChildren: './components/components.module#ComponentsModule'
|
||||
loadChildren: () => import('./components/components.module').then(m => m.ComponentsModule)
|
||||
},
|
||||
{
|
||||
path : 'components-third-party',
|
||||
loadChildren: './components-third-party/components-third-party.module#ComponentsThirdPartyModule'
|
||||
loadChildren: () => import('./components-third-party/components-third-party.module').then(m => m.ComponentsThirdPartyModule)
|
||||
},
|
||||
{
|
||||
path : 'directives',
|
||||
loadChildren: './directives/directives.module#DirectivesModule'
|
||||
loadChildren: () => import('./directives/directives.module').then(m => m.DirectivesModule)
|
||||
},
|
||||
{
|
||||
path : 'services',
|
||||
loadChildren: './services/services.module#ServicesModule'
|
||||
loadChildren: () => import('./services/services.module').then(m => m.ServicesModule)
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
approximately:
|
||||
</div>
|
||||
|
||||
<fuse-countdown eventDate="2019-07-28"></fuse-countdown>
|
||||
<fuse-countdown eventDate="2021-07-28"></fuse-countdown>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<div id="angular-material" class="page-layout simple tabbed" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||
<span class="secondary-text">User Interface</span>
|
||||
</div>
|
||||
<div class="h1 mt-16">Angular Material</div>
|
||||
</div>
|
||||
|
||||
<a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/components/categories"
|
||||
target="_blank">
|
||||
<mat-icon class="mr-8">link</mat-icon>
|
||||
<span>Reference</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24">
|
||||
|
||||
<div class="mat-title">Introduction</div>
|
||||
<p>
|
||||
Fuse uses Angular Material as its primary user interface library. It offers form controls, buttons, tabs, sidebars,
|
||||
icons, modals, tooltips, data tables and many more well tested and widely used components.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Fuse is 100% compatible with all Angular Material components.
|
||||
</p>
|
||||
|
||||
<div class="mat-title mt-32">Official docs</div>
|
||||
<p>
|
||||
Official Angular Material documentation: <a href="https://material.angular.io/components/categories" target="_blank">https://material.angular.io/components/categories</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
:host {
|
||||
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'angular-material',
|
||||
templateUrl: './angular-material.component.html',
|
||||
styleUrls : ['./angular-material.component.scss']
|
||||
})
|
||||
export class AngularMaterialComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
31
src/app/main/ui/angular-material/angular-material.module.ts
Normal file
31
src/app/main/ui/angular-material/angular-material.module.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
import { AngularMaterialComponent } from 'app/main/ui/angular-material/angular-material.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path : 'angular-material',
|
||||
component: AngularMaterialComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AngularMaterialComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(routes),
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule
|
||||
]
|
||||
})
|
||||
export class UIAngularMaterialModule
|
||||
{
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
|
||||
<div id="icons" class="page-layout simple tabbed" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { UIAngularMaterialModule } from 'app/main/ui/angular-material/angular-material.module';
|
||||
import { UICardsModule } from 'app/main/ui/cards/cards.module';
|
||||
import { UIFormsModule } from 'app/main/ui/forms/forms.module';
|
||||
import { UIIconsModule } from 'app/main/ui/icons/icons.module';
|
||||
|
|
@ -10,6 +11,7 @@ import { UIColorsModule } from 'app/main/ui/colors/colors.module';
|
|||
|
||||
@NgModule({
|
||||
imports: [
|
||||
UIAngularMaterialModule,
|
||||
UICardsModule,
|
||||
UIFormsModule,
|
||||
UIIconsModule,
|
||||
|
|
|
|||
|
|
@ -370,6 +370,13 @@ export const navigation: FuseNavigation[] = [
|
|||
type : 'group',
|
||||
icon : 'web',
|
||||
children: [
|
||||
{
|
||||
id : 'angular-material',
|
||||
title: 'Angular Material',
|
||||
type : 'item',
|
||||
icon : 'ballot',
|
||||
url : '/ui/angular-material'
|
||||
},
|
||||
{
|
||||
id : 'cards',
|
||||
title: 'Cards',
|
||||
|
|
@ -584,278 +591,6 @@ export const navigation: FuseNavigation[] = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'angular-material-elements',
|
||||
title : 'Angular Material Elements',
|
||||
type : 'group',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'form-controls',
|
||||
title : 'Form Controls',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'autocomplete',
|
||||
title: 'Autocomplete',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/autocomplete'
|
||||
},
|
||||
{
|
||||
id : 'checkbox',
|
||||
title: 'Checkbox',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/checkbox'
|
||||
},
|
||||
{
|
||||
id : 'datepicker',
|
||||
title: 'Datepicker',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/datepicker'
|
||||
},
|
||||
{
|
||||
id : 'form-field',
|
||||
title: 'Form field',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/form-field'
|
||||
},
|
||||
{
|
||||
id : 'input',
|
||||
title: 'Input',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/input'
|
||||
},
|
||||
{
|
||||
id : 'radio-button',
|
||||
title: 'Radio button',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/radio-button'
|
||||
},
|
||||
{
|
||||
id : 'select',
|
||||
title: 'Select',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/select'
|
||||
},
|
||||
{
|
||||
id : 'slider',
|
||||
title: 'Slider',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/slider'
|
||||
},
|
||||
{
|
||||
id : 'slide-toggle',
|
||||
title: 'Slide toggle',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/slide-toggle'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'navigation',
|
||||
title : 'Navigation',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'menu',
|
||||
title: 'Menu',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/menu'
|
||||
},
|
||||
{
|
||||
id : 'sidenav',
|
||||
title: 'Sidebar',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/sidenav'
|
||||
},
|
||||
{
|
||||
id : 'toolbar',
|
||||
title: 'Toolbar',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/toolbar'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'layout',
|
||||
title : 'Layout',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'badge',
|
||||
title: 'Badge',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/badge'
|
||||
},
|
||||
{
|
||||
id : 'bottom-sheet',
|
||||
title: 'Bottom Sheet',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/bottom-sheet'
|
||||
},
|
||||
{
|
||||
id : 'card',
|
||||
title: 'Card',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/card'
|
||||
},
|
||||
{
|
||||
id : 'divider',
|
||||
title: 'Divider',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/divider'
|
||||
},
|
||||
{
|
||||
id : 'elevation',
|
||||
title: 'Elevation',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/elevation'
|
||||
},
|
||||
{
|
||||
id : 'expansion-panel',
|
||||
title: 'Expansion Panel',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/expansion-panel'
|
||||
},
|
||||
{
|
||||
id : 'grid-list',
|
||||
title: 'Grid list',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/grid-list'
|
||||
},
|
||||
{
|
||||
id : 'list',
|
||||
title: 'List',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/list'
|
||||
},
|
||||
{
|
||||
id : 'stepper',
|
||||
title: 'Stepper',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/stepper'
|
||||
},
|
||||
{
|
||||
id : 'tabs',
|
||||
title: 'Tabs',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/tabs'
|
||||
},
|
||||
{
|
||||
id : 'tree',
|
||||
title: 'Tree',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/tree'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'buttons-indicators',
|
||||
title : 'Buttons & Indicators',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'button',
|
||||
title: 'Button',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/button'
|
||||
},
|
||||
{
|
||||
id : 'button-toggle',
|
||||
title: 'Button toggle',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/button-toggle'
|
||||
},
|
||||
{
|
||||
id : 'chips',
|
||||
title: 'Chips',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/chips'
|
||||
},
|
||||
{
|
||||
id : 'icon',
|
||||
title: 'icon',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/icon'
|
||||
},
|
||||
{
|
||||
id : 'progress-spinner',
|
||||
title: 'Progress spinner',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/progress-spinner'
|
||||
},
|
||||
{
|
||||
id : 'progress-bar',
|
||||
title: 'Progress bar',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/progress-bar'
|
||||
},
|
||||
{
|
||||
id : 'ripples',
|
||||
title: 'Ripples',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/ripples'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'popups-modals',
|
||||
title : 'Popups & Modals',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'dialog',
|
||||
title: 'Dialog',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/dialog'
|
||||
},
|
||||
{
|
||||
id : 'snackbar',
|
||||
title: 'Snackbar',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/snackbar'
|
||||
},
|
||||
{
|
||||
id : 'tooltip',
|
||||
title: 'Tooltip',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/tooltip'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'data-table',
|
||||
title : 'Data table',
|
||||
type : 'collapsable',
|
||||
icon : 'layers',
|
||||
children: [
|
||||
{
|
||||
id : 'paginator',
|
||||
title: 'Paginator',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/paginator'
|
||||
},
|
||||
{
|
||||
id : 'sort-header',
|
||||
title: 'Sort header',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/sort-header'
|
||||
},
|
||||
{
|
||||
id : 'table',
|
||||
title: 'Table',
|
||||
type : 'item',
|
||||
url : '/angular-material-elements/table'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'documentation',
|
||||
title : 'Documentation',
|
||||
|
|
@ -869,7 +604,7 @@ export const navigation: FuseNavigation[] = [
|
|||
icon : 'update',
|
||||
url : '/documentation/changelog',
|
||||
badge: {
|
||||
title: '8.1.2',
|
||||
title: '9.0.0',
|
||||
bg : '#EC0C8E',
|
||||
fg : '#FFFFFF'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ActivatedRouteSnapshot, RouterStateSnapshot, Params } from '@angular/router';
|
||||
import { createFeatureSelector, ActionReducerMap } from '@ngrx/store';
|
||||
import * as fromRouter from '@ngrx/router-store';
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
export interface RouterStateUrl
|
||||
{
|
||||
|
|
@ -20,6 +21,7 @@ export const reducers: ActionReducerMap<State> = {
|
|||
|
||||
export const getRouterState = createFeatureSelector<fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer');
|
||||
|
||||
@Injectable()
|
||||
export class CustomSerializer implements fromRouter.RouterStateSerializer<RouterStateUrl>
|
||||
{
|
||||
serialize(routerState: RouterStateSnapshot): RouterStateUrl
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
||||
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
|
||||
{{option}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
/**
|
||||
* @title Highlight the first autocomplete option
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-auto-active-first-option-example',
|
||||
templateUrl: 'autocomplete-auto-active-first-option-example.html',
|
||||
styleUrls: ['autocomplete-auto-active-first-option-example.css'],
|
||||
})
|
||||
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
|
||||
myControl = new FormControl();
|
||||
options: string[] = ['One', 'Two', 'Three'];
|
||||
filteredOptions: Observable<string[]>;
|
||||
|
||||
ngOnInit() {
|
||||
this.filteredOptions = this.myControl.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map(value => this._filter(value))
|
||||
);
|
||||
}
|
||||
|
||||
private _filter(value: string): string[] {
|
||||
const filterValue = value.toLowerCase();
|
||||
|
||||
return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
|
||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
|
||||
{{option.name}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
export interface User {
|
||||
name: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @title Display value autocomplete
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-display-example',
|
||||
templateUrl: 'autocomplete-display-example.html',
|
||||
styleUrls: ['autocomplete-display-example.css'],
|
||||
})
|
||||
export class AutocompleteDisplayExample implements OnInit {
|
||||
myControl = new FormControl();
|
||||
options: User[] = [
|
||||
{name: 'Mary'},
|
||||
{name: 'Shelley'},
|
||||
{name: 'Igor'}
|
||||
];
|
||||
filteredOptions: Observable<User[]>;
|
||||
|
||||
ngOnInit() {
|
||||
this.filteredOptions = this.myControl.valueChanges
|
||||
.pipe(
|
||||
startWith(''),
|
||||
map(value => typeof value === 'string' ? value : value.name),
|
||||
map(name => name ? this._filter(name) : this.options.slice())
|
||||
);
|
||||
}
|
||||
|
||||
displayFn(user?: User): string | undefined {
|
||||
return user ? user.name : undefined;
|
||||
}
|
||||
|
||||
private _filter(name: string): User[] {
|
||||
const filterValue = name.toLowerCase();
|
||||
|
||||
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
|
||||
{{option}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
/**
|
||||
* @title Filter autocomplete
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-filter-example',
|
||||
templateUrl: 'autocomplete-filter-example.html',
|
||||
styleUrls: ['autocomplete-filter-example.css'],
|
||||
})
|
||||
export class AutocompleteFilterExample implements OnInit {
|
||||
myControl = new FormControl();
|
||||
options: string[] = ['One', 'Two', 'Three'];
|
||||
filteredOptions: Observable<string[]>;
|
||||
|
||||
ngOnInit() {
|
||||
this.filteredOptions = this.myControl.valueChanges
|
||||
.pipe(
|
||||
startWith(''),
|
||||
map(value => this._filter(value))
|
||||
);
|
||||
}
|
||||
|
||||
private _filter(value: string): string[] {
|
||||
const filterValue = value.toLowerCase();
|
||||
|
||||
return this.options.filter(option => option.toLowerCase().includes(filterValue));
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormBuilder, FormGroup} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {startWith, map} from 'rxjs/operators';
|
||||
|
||||
export interface StateGroup {
|
||||
letter: string;
|
||||
names: string[];
|
||||
}
|
||||
|
||||
export const _filter = (opt: string[], value: string): string[] => {
|
||||
const filterValue = value.toLowerCase();
|
||||
|
||||
return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
|
||||
};
|
||||
|
||||
/**
|
||||
* @title Option groups autocomplete
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-optgroup-example',
|
||||
templateUrl: './autocomplete-optgroup-example.html',
|
||||
styleUrls: ['./autocomplete-optgroup-example.css'],
|
||||
})
|
||||
|
||||
export class AutocompleteOptgroupExample implements OnInit {
|
||||
stateForm: FormGroup = this._formBuilder.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 _formBuilder: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
|
||||
.pipe(
|
||||
startWith(''),
|
||||
map(value => this._filterGroup(value))
|
||||
);
|
||||
}
|
||||
|
||||
private _filterGroup(value: string): StateGroup[] {
|
||||
if (value) {
|
||||
return this.stateGroups
|
||||
.map(group => ({letter: group.letter, names: _filter(group.names, value)}))
|
||||
.filter(group => group.names.length > 0);
|
||||
}
|
||||
|
||||
return this.stateGroups;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-option-img {
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .example-option-img {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
|
||||
<img class="example-option-img" aria-hidden [src]="state.flag" height="25">
|
||||
<span>{{state.name}}</span> |
|
||||
<small>Population: {{state.population}}</small>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
|
||||
<br>
|
||||
|
||||
<mat-slide-toggle
|
||||
[checked]="stateCtrl.disabled"
|
||||
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
|
||||
Disable Input?
|
||||
</mat-slide-toggle>
|
||||
</form>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
export interface State {
|
||||
flag: string;
|
||||
name: string;
|
||||
population: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @title Autocomplete overview
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-overview-example',
|
||||
templateUrl: 'autocomplete-overview-example.html',
|
||||
styleUrls: ['autocomplete-overview-example.css'],
|
||||
})
|
||||
export class AutocompleteOverviewExample {
|
||||
stateCtrl = new FormControl();
|
||||
filteredStates: Observable<State[]>;
|
||||
|
||||
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.filteredStates = this.stateCtrl.valueChanges
|
||||
.pipe(
|
||||
startWith(''),
|
||||
map(state => state ? this._filterStates(state) : this.states.slice())
|
||||
);
|
||||
}
|
||||
|
||||
private _filterStates(value: string): State[] {
|
||||
const filterValue = value.toLowerCase();
|
||||
|
||||
return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<form class="example-form">
|
||||
<input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let street of filteredStreets | async" [value]="street">
|
||||
{{street}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</form>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {startWith, map} from 'rxjs/operators';
|
||||
|
||||
/**
|
||||
* @title Plain input autocomplete
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-plain-input-example',
|
||||
templateUrl: 'autocomplete-plain-input-example.html',
|
||||
styleUrls: ['autocomplete-plain-input-example.css'],
|
||||
})
|
||||
export class PlainInputAutocompleteExample implements OnInit {
|
||||
control = new FormControl();
|
||||
streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
|
||||
filteredStreets: Observable<string[]>;
|
||||
|
||||
ngOnInit() {
|
||||
this.filteredStreets = this.control.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map(value => this._filter(value))
|
||||
);
|
||||
}
|
||||
|
||||
private _filter(value: string): string[] {
|
||||
const filterValue = this._normalizeValue(value);
|
||||
return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
|
||||
}
|
||||
|
||||
private _normalizeValue(value: string): string {
|
||||
return value.toLowerCase().replace(/\s/g, '');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let option of options" [value]="option">
|
||||
{{option}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
|
||||
/**
|
||||
* @title Simple autocomplete
|
||||
*/
|
||||
@Component({
|
||||
selector: 'autocomplete-simple-example',
|
||||
templateUrl: 'autocomplete-simple-example.html',
|
||||
styleUrls: ['autocomplete-simple-example.css'],
|
||||
})
|
||||
export class AutocompleteSimpleExample {
|
||||
myControl = new FormControl();
|
||||
options: string[] = ['One', 'Two', 'Three'];
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<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>
|
||||
<!-- Include text description of the icon's meaning for screen-readers -->
|
||||
<span class="cdk-visually-hidden">
|
||||
Example with a home icon with overlaid badge showing the number 15
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
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 {}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<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 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<p>You have received a file called "cat-picture.jpeg".</p>
|
||||
|
||||
<button mat-raised-button (click)="openBottomSheet()">Open file</button>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
|
||||
|
||||
/**
|
||||
* @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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1 +0,0 @@
|
|||
<button mat-button>Click me!</button>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Basic buttons
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button-overview-example',
|
||||
templateUrl: 'button-overview-example.html',
|
||||
styleUrls: ['button-overview-example.css'],
|
||||
})
|
||||
export class ButtonOverviewExample {}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
mat-button-toggle-group {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<p>
|
||||
Default appearance:
|
||||
<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>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Legacy appearance:
|
||||
<mat-button-toggle-group appearance="legacy" 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>
|
||||
</p>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Button toggle appearance
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button-toggle-appearance-example',
|
||||
templateUrl: 'button-toggle-appearance-example.html',
|
||||
styleUrls: ['button-toggle-appearance-example.css'],
|
||||
})
|
||||
export class ButtonToggleAppearanceExample {}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.example-selected-value {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<mat-button-toggle-group #group="matButtonToggleGroup">
|
||||
<mat-button-toggle value="left" aria-label="Text align left">
|
||||
<mat-icon>format_align_left</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="center" aria-label="Text align center">
|
||||
<mat-icon>format_align_center</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="right" aria-label="Text align right">
|
||||
<mat-icon>format_align_right</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="justify" disabled aria-label="Text align justify">
|
||||
<mat-icon>format_align_justify</mat-icon>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
<div class="example-selected-value">Selected value: {{group.value}}</div>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Exclusive selection
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button-toggle-exclusive-example',
|
||||
templateUrl: 'button-toggle-exclusive-example.html',
|
||||
styleUrls: ['button-toggle-exclusive-example.css'],
|
||||
})
|
||||
export class ButtonToggleExclusiveExample {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Basic button-toggles
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button-toggle-overview-example',
|
||||
templateUrl: 'button-toggle-overview-example.html',
|
||||
styleUrls: ['button-toggle-overview-example.css'],
|
||||
})
|
||||
export class ButtonToggleOverviewExample {}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.example-button-row button,
|
||||
.example-button-row a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<h3>Basic Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-button>Basic</button>
|
||||
<button mat-button color="primary">Primary</button>
|
||||
<button mat-button color="accent">Accent</button>
|
||||
<button mat-button color="warn">Warn</button>
|
||||
<button mat-button disabled>Disabled</button>
|
||||
<a mat-button routerLink=".">Link</a>
|
||||
</div>
|
||||
|
||||
<h3>Raised Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-raised-button>Basic</button>
|
||||
<button mat-raised-button color="primary">Primary</button>
|
||||
<button mat-raised-button color="accent">Accent</button>
|
||||
<button mat-raised-button color="warn">Warn</button>
|
||||
<button mat-raised-button disabled>Disabled</button>
|
||||
<a mat-raised-button routerLink=".">Link</a>
|
||||
</div>
|
||||
|
||||
<h3>Stroked Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-stroked-button>Basic</button>
|
||||
<button mat-stroked-button color="primary">Primary</button>
|
||||
<button mat-stroked-button color="accent">Accent</button>
|
||||
<button mat-stroked-button color="warn">Warn</button>
|
||||
<button mat-stroked-button disabled>Disabled</button>
|
||||
<a mat-stroked-button routerLink=".">Link</a>
|
||||
</div>
|
||||
|
||||
<h3>Flat Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-flat-button>Basic</button>
|
||||
<button mat-flat-button color="primary">Primary</button>
|
||||
<button mat-flat-button color="accent">Accent</button>
|
||||
<button mat-flat-button color="warn">Warn</button>
|
||||
<button mat-flat-button disabled>Disabled</button>
|
||||
<a mat-flat-button routerLink=".">Link</a>
|
||||
</div>
|
||||
|
||||
<h3>Icon Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-icon-button aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3>Fab Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-fab>Basic</button>
|
||||
<button mat-fab color="primary">Primary</button>
|
||||
<button mat-fab color="accent">Accent</button>
|
||||
<button mat-fab color="warn">Warn</button>
|
||||
<button mat-fab disabled>Disabled</button>
|
||||
<button mat-fab aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<a mat-fab routerLink=".">Link</a>
|
||||
</div>
|
||||
|
||||
<h3>Mini Fab Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-mini-fab>Basic</button>
|
||||
<button mat-mini-fab color="primary">Primary</button>
|
||||
<button mat-mini-fab color="accent">Accent</button>
|
||||
<button mat-mini-fab color="warn">Warn</button>
|
||||
<button mat-mini-fab disabled>Disabled</button>
|
||||
<button mat-mini-fab aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<a mat-mini-fab routerLink=".">Link</a>
|
||||
</div>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Button varieties
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button-types-example',
|
||||
templateUrl: 'button-types-example.html',
|
||||
styleUrls: ['button-types-example.css'],
|
||||
})
|
||||
export class ButtonTypesExample {}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.example-card {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.example-header-image {
|
||||
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<mat-card class="example-card">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="example-header-image"></div>
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
|
||||
<mat-card-content>
|
||||
<p>
|
||||
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
|
||||
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
|
||||
bred for hunting.
|
||||
</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>LIKE</button>
|
||||
<button mat-button>SHARE</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Card with multiple sections
|
||||
*/
|
||||
@Component({
|
||||
selector: 'card-fancy-example',
|
||||
templateUrl: 'card-fancy-example.html',
|
||||
styleUrls: ['card-fancy-example.css'],
|
||||
})
|
||||
export class CardFancyExample {}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1 +0,0 @@
|
|||
<mat-card>Simple card</mat-card>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Basic cards
|
||||
*/
|
||||
@Component({
|
||||
selector: 'card-overview-example',
|
||||
templateUrl: 'card-overview-example.html',
|
||||
styleUrls: ['card-overview-example.css'],
|
||||
})
|
||||
export class CardOverviewExample {}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.example-h2 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.example-section {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.example-margin {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Checkbox configuration</h2>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
|
||||
</section>
|
||||
|
||||
<section class="example-section">
|
||||
<label class="example-margin">Align:</label>
|
||||
<mat-radio-group [(ngModel)]="labelPosition">
|
||||
<mat-radio-button class="example-margin" value="after">After</mat-radio-button>
|
||||
<mat-radio-button class="example-margin" value="before">Before</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</section>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="result">
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Result</h2>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-checkbox
|
||||
class="example-margin"
|
||||
[(ngModel)]="checked"
|
||||
[(indeterminate)]="indeterminate"
|
||||
[labelPosition]="labelPosition"
|
||||
[disabled]="disabled">
|
||||
I'm a checkbox
|
||||
</mat-checkbox>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Configurable checkbox
|
||||
*/
|
||||
@Component({
|
||||
selector: 'checkbox-configurable-example',
|
||||
templateUrl: 'checkbox-configurable-example.html',
|
||||
styleUrls: ['checkbox-configurable-example.css'],
|
||||
})
|
||||
export class CheckboxConfigurableExample {
|
||||
checked = false;
|
||||
indeterminate = false;
|
||||
labelPosition = 'after';
|
||||
disabled = false;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user