mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2026-03-07 16:28:42 +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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user