Angular 5 compatibility (wip)

+ Fuse2 version: 1.2.0
This commit is contained in:
Sercan Yemen 2017-11-04 13:41:40 +03:00
parent 9fbcc20623
commit f013b2b667
27 changed files with 69 additions and 68 deletions

18
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "fuse2",
"version": "1.1.2",
"version": "1.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -272,14 +272,6 @@
"resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-10.4.0.tgz",
"integrity": "sha512-wTV/64vEGPFlcpE+ezTN18baOsNXyfLLvdmhEoaDQt2OJtTKtNxJkze24w71utoJxutQRrfHJUVSkAF4CLNckA=="
},
"@swimlane/ngx-dnd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@swimlane/ngx-dnd/-/ngx-dnd-3.0.0.tgz",
"integrity": "sha512-LH/Nc6/2tyX7U9SHa5hNvC2Sk/svj/PMrJu34V/BF/H811fik5AGzTjORdGQo7cl2m951MEkl9yijMKywRw37w==",
"requires": {
"dragula": "3.7.2"
}
},
"@types/jasmine": {
"version": "2.5.54",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz",
@ -313,6 +305,14 @@
"integrity": "sha1-dMt3+2BS7a/yqJhN2v2I1BnyXKw=",
"dev": true
},
"@withinpixels/ngx-dnd": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@withinpixels/ngx-dnd/-/ngx-dnd-3.1.0.tgz",
"integrity": "sha512-xdKp0T/JuETNVRWgRxbcx+pD6THX8OBw50wpsfi7AeK/wmvXEI1U28quh1a30T298QA7i5sofbTByUGm/XIfLg==",
"requires": {
"dragula": "3.7.2"
}
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

View File

@ -1,6 +1,6 @@
{
"name": "fuse2",
"version": "1.1.2",
"version": "1.2.0",
"license": "",
"scripts": {
"ng": "ng",
@ -31,7 +31,7 @@
"@ngx-translate/core": "8.0.0",
"@swimlane/ngx-charts": "6.1.0",
"@swimlane/ngx-datatable": "10.4.0",
"@swimlane/ngx-dnd": "3.0.0",
"@withinpixels/ngx-dnd": "3.1.0",
"angular-calendar": "0.21.3",
"angular-in-memory-web-api": "0.5.1",
"angular2-markdown": "1.6.0",

View File

@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDnDModule } from '@withinpixels/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';

View File

@ -566,7 +566,7 @@
<tbody>
<tr *ngFor="let row of widgets.widget10.table.rows">
<td *ngFor="let cell of row">
<span class="p-4" [class]="cell.classes">
<span class="p-4" [ngClass]="cell.classes">
{{cell.value}}
</span>
<mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon>

View File

@ -359,13 +359,13 @@
</div>
</td>
<td class="text-right">
{{product.price | currency:'USD':true}}
{{product.price | currency:'USD':'symbol'}}
</td>
<td class="text-right">
{{product.quantity}}
</td>
<td class="text-right">
{{product.total | currency:'USD':true}}
{{product.total | currency:'USD':'symbol'}}
</td>
</tr>
</tbody>
@ -375,19 +375,19 @@
<tbody>
<tr class="subtotal">
<td>SUBTOTAL</td>
<td>{{order.subtotal | currency:'USD':true}}</td>
<td>{{order.subtotal | currency:'USD':'symbol'}}</td>
</tr>
<tr class="tax">
<td>TAX</td>
<td>{{order.tax | currency:'USD':true}}</td>
<td>{{order.tax | currency:'USD':'symbol'}}</td>
</tr>
<tr class="discount">
<td>DISCOUNT</td>
<td>-{{order.discount | currency:'USD':true}}</td>
<td>-{{order.discount | currency:'USD':'symbol'}}</td>
</tr>
<tr class="total">
<td>TOTAL</td>
<td>{{order.total | currency:'USD':true}}</td>
<td>{{order.total | currency:'USD':'symbol'}}</td>
</tr>
</tbody>
</table>

View File

@ -75,7 +75,7 @@
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
<p class="total-price text-truncate">
{{order.total | currency:'USD':true}}
{{order.total | currency:'USD':'symbol'}}
</p>
</mat-cell>
</ng-container>

View File

@ -92,7 +92,7 @@
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
<p class="price text-truncate">
{{product.priceTaxIncl | currency:'USD':true}}
{{product.priceTaxIncl | currency:'USD':'symbol'}}
</p>
</mat-cell>
</ng-container>

View File

@ -4,7 +4,7 @@
<ng-container cdkColumnDef="icon">
<mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
<mat-cell *cdkCellDef="let row" fxFlex="64px">
<mat-icon class="type-icon" [class]="row.type"></mat-icon>
<mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
</mat-cell>
</ng-container>

View File

@ -33,7 +33,7 @@
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
<mat-icon class="type-icon s-48" [class]="selected.type"></mat-icon>
<mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
</div>
<div class="offline-switch">

View File

@ -1,6 +1,6 @@
<!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>

View File

@ -3,14 +3,14 @@
<div id="board">
<!-- HEADER -->
<div class="header mat-accent-bg p-16 p-mat-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header mat-accent-bg p-16 p-mat-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
<!-- BOARD SELECTION BUTTON -->
<div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
<button mat-raised-button class="mat-accent header-boards-button"
[class]="'mat-'+board.settings.color+'-700-bg'"
[ngClass]="'mat-'+board.settings.color+'-700-bg'"
routerLink="/apps/scrumboard/boards"
aria-label="boards button">
<mat-icon>assessment</mat-icon>
@ -50,7 +50,7 @@
</div>
<!-- / HEADER -->
<div fxFlex class="board-content-wrapper p-16 p-mat-24" [class]="board.settings.color+'-100-bg'">
<div fxFlex class="board-content-wrapper p-16 p-mat-24" [ngClass]="board.settings.color+'-100-bg'">
<!-- BOARD -->
<div class="board-content ngx-dnd-container p-16 p-mat-24" fxLayout="row"

View File

@ -194,7 +194,7 @@
<mat-chip-list class="label-chips">
<mat-chip class="label-chip mb-4"
*ngFor="let labelId of card.idLabels"
[class]="board.labels | getById:labelId:'color'"
[ngClass]="board.labels | getById:labelId:'color'"
fxLayout="row" fxLayoutAlign="start center">
<span>{{board.labels|getById:labelId:'name'}}</span>
<mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>

View File

@ -13,7 +13,7 @@
<div fxFlex fxLayout="column" fusePerfectScrollbar>
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
[class]="label.color">
[ngClass]="label.color">
<mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
(change)="toggleInArray(label.id, card.idLabels);cardLabelsChanged()">

View File

@ -3,7 +3,7 @@
<div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div>Settings</div>
</div>
<!-- / SIDENAV HEADER -->
@ -58,7 +58,7 @@
<div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<div>Background Color</div>
<button mat-icon-button (click)="view ='main'">
<mat-icon class="s-16">arrow_back</mat-icon>

View File

@ -67,13 +67,13 @@
{{service.unit}}
</td>
<td class="text-right">
{{service.unitPrice | currency:'USD':true}}
{{service.unitPrice | currency:'USD':'symbol'}}
</td>
<td class="text-right">
{{service.quantity}}
</td>
<td class="text-right">
{{service.total | currency:'USD':true}}
{{service.total | currency:'USD':'symbol'}}
</td>
</tr>
<!-- Double the invoice data for demo purposes -->
@ -87,13 +87,13 @@
{{service.unit}}
</td>
<td class="text-right">
{{service.unitPrice | currency:'USD':true}}
{{service.unitPrice | currency:'USD':'symbol'}}
</td>
<td class="text-right">
{{service.quantity}}
</td>
<td class="text-right">
{{service.total | currency:'USD':true}}
{{service.total | currency:'USD':'symbol'}}
</td>
</tr>
</tbody>
@ -103,19 +103,19 @@
<tbody>
<tr class="subtotal">
<td>SUBTOTAL</td>
<td>{{invoice.subtotal | currency:'USD':true}}</td>
<td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
</tr>
<tr class="tax">
<td>TAX</td>
<td>{{invoice.tax | currency:'USD':true}}</td>
<td>{{invoice.tax | currency:'USD':'symbol'}}</td>
</tr>
<tr class="discount">
<td>DISCOUNT</td>
<td>-{{invoice.discount | currency:'USD':true}}</td>
<td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
</tr>
<tr class="total">
<td>TOTAL</td>
<td>{{invoice.total | currency:'USD':true}}</td>
<td>{{invoice.total | currency:'USD':'symbol'}}</td>
</tr>
</tbody>
</table>

View File

@ -83,7 +83,7 @@
<tr>
<td class="label">TOTAL DUE</td>
<td class="value">{{invoice.total | currency:'USD':true}}</td>
<td class="value">{{invoice.total | currency:'USD':'symbol'}}</td>
</tr>
</table>
</div>
@ -109,13 +109,13 @@
{{service.unit}}
</td>
<td class="text-right">
{{service.unitPrice | currency:'USD':true}}
{{service.unitPrice | currency:'USD':'symbol'}}
</td>
<td class="text-right">
{{service.quantity}}
</td>
<td class="text-right">
{{service.total | currency:'USD':true}}
{{service.total | currency:'USD':'symbol'}}
</td>
</tr>
</tbody>
@ -125,19 +125,19 @@
<tbody>
<tr class="subtotal">
<td>SUBTOTAL</td>
<td>{{invoice.subtotal | currency:'USD':true}}</td>
<td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
</tr>
<tr class="tax">
<td>TAX</td>
<td>{{invoice.tax | currency:'USD':true}}</td>
<td>{{invoice.tax | currency:'USD':'symbol'}}</td>
</tr>
<tr class="discount">
<td>DISCOUNT</td>
<td>-{{invoice.discount | currency:'USD':true}}</td>
<td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
</tr>
<tr class="total">
<td>TOTAL</td>
<td>{{invoice.total | currency:'USD':true}}</td>
<td>{{invoice.total | currency:'USD':'symbol'}}</td>
</tr>
</tbody>
</table>

View File

@ -26,7 +26,7 @@
<!-- Color Column -->
<ng-container cdkColumnDef="salary">
<mat-header-cell *cdkHeaderCellDef>Salary</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':true}}</mat-cell>
<mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
</ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>

View File

@ -45,15 +45,16 @@
// Fully customizable surroundings for this particular component
this.fuseConfig.setSettings({
layout : {
navigation: 'left', // 'right', 'left', 'top', none
toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
mode : 'fullwidth' // 'boxed', 'fullwidth'
navigation : 'left', // 'right', 'left', 'top', none
navigationFolded: false, // true, false
toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
toolbar: 'mat-white-500-bg',
navbar : 'mat-fuse-dark-500-bg',
footer : 'mat-fuse-dark-700-bg'
navbar : 'mat-fuse-dark-700-bg',
footer : 'mat-fuse-dark-900-bg'
},
customScrollbars: true,
routerAnimation : 'fadeIn'

View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -130,7 +130,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -49,7 +49,7 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -130,7 +130,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -49,7 +49,7 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -4,13 +4,13 @@
<!-- TOOLBAR: Above -->
<ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
<fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
<fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Above -->
<!-- NAVBAR: Top -->
<fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'top'">
</fuse-navbar-horizontal>
<!-- / NAVBAR: Top -->
@ -20,7 +20,7 @@
<!-- NAVBAR: Left -->
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="left-navbar"
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
</fuse-navbar-vertical>
<!-- / NAVBAR: Left -->
@ -29,7 +29,7 @@
<!-- TOOLBAR: Below -->
<ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
<fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
<fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
</ng-container>
<!-- / TOOLBAR: Below -->
@ -37,7 +37,7 @@
<!-- FOOTER: Below -->
<ng-container *ngIf="fuseSettings.layout.footer === 'below'">
<fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
<fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- / FOOTER: Below -->
@ -46,7 +46,7 @@
<!-- NAVBAR: Right -->
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
class="right-navbar"
[class]="fuseSettings.colorClasses.navbar"
[ngClass]="fuseSettings.colorClasses.navbar"
*ngIf="fuseSettings.layout.navigation === 'right'">
</fuse-navbar-vertical>
<!-- / NAVBAR: Right -->
@ -55,7 +55,7 @@
<!-- FOOTER: Above -->
<ng-container *ngIf="fuseSettings.layout.footer === 'above'">
<fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
<fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
</ng-container>
<!-- FOOTER: Above -->