<!DOCTYPE html>
<html>
<head>
<title>Terminus UI Demos</title>
<base href="." />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/ladda/dist/ladda-themeless.min.css" media="screen">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
const NG_VERSION = '@5.1.1';
const MATERIAL_VERSION = '@5.0.1';
const FLEX_VERSION = '@2.0.0-beta.10-4905443';
const UI_VERSION = '@1.0.0';
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/core': `https://unpkg.com/@angular/core${NG_VERSION}/bundles/core.umd.js`,
'@angular/common': `https://unpkg.com/@angular/common${NG_VERSION}/bundles/common.umd.js`,
'@angular/common/http': `https://unpkg.com/@angular/common${NG_VERSION}/bundles/common-http.umd.js`,
'@angular/compiler': `https://unpkg.com/@angular/compiler${NG_VERSION}/bundles/compiler.umd.js`,
'@angular/animations': `https://unpkg.com/@angular/animations${NG_VERSION}/bundles/animations.umd.js`,
'@angular/animations/browser': `https://unpkg.com/@angular/animations${NG_VERSION}/bundles/animations-browser.umd.js`,
'@angular/forms': `https://unpkg.com/@angular/forms${NG_VERSION}/bundles/forms.umd.js`,
'@angular/router': `https://unpkg.com/@angular/router${NG_VERSION}/bundles/router.umd.js`,
'@angular/platform-browser': `https://unpkg.com/@angular/platform-browser${NG_VERSION}/bundles/platform-browser.umd.js`,
'@angular/platform-browser/animations': `https://unpkg.com/@angular/platform-browser${NG_VERSION}/bundles/platform-browser-animations.umd.js`,
'@angular/platform-browser-dynamic': `https://unpkg.com/@angular/platform-browser-dynamic${NG_VERSION}/bundles/platform-browser-dynamic.umd.js`,
'@angular/flex-layout' : `https://unpkg.com/@angular/flex-layout${FLEX_VERSION}/bundles/flex-layout.umd.js`,
// Material/CDK
'@angular/material': `https://unpkg.com/@angular/material${MATERIAL_VERSION}/bundles/material.umd.js`,
'@angular/cdk': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk.umd.js`,
'@angular/cdk/a11y': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-a11y.umd.js`,
'@angular/cdk/bidi': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-bidi.umd.js`,
'@angular/cdk/observers': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-observers.umd.js`,
'@angular/cdk/overlay': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-overlay.umd.js`,
'@angular/cdk/portal': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-portal.umd.js`,
'@angular/cdk/scrolling': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-scrolling.umd.js`,
'@angular/cdk/platform': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-platform.umd.js`,
'@angular/cdk/keycodes': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-keycodes.umd.js`,
'@angular/cdk/coercion': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-coercion.umd.js`,
'@angular/cdk/collections': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-collections.umd.js`,
'@angular/cdk/rxjs': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-rxjs.umd.js`,
'@angular/cdk/table': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-table.umd.js`,
'@angular/cdk/stepper': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-stepper.umd.js`,
'@angular/cdk/accordion': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-accordion.umd.js`,
'@angular/cdk/layout': `https://unpkg.com/@angular/cdk${MATERIAL_VERSION}/bundles/cdk-layout.umd.js`,
// Terminus UI
'@terminus/ui': `https://unpkg.com/@terminus/ui${UI_VERSION}/bundles/ui.umd.min.js`,
// Third party libraries
'tslib': 'https://unpkg.com/tslib@1.7.1',
'rxjs': 'https://unpkg.com/rxjs',
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
},
});
//
// Demo Styles
//
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 {
color: navy;
margin-top: 0;
}
label {
display: block;
margin-bottom: 1rem;
}
.demo {
height: 100%;
}
.side {
border: 1px solid lightblue;
margin: 1rem;
padding: 1rem;
}
//
// Recreate App Theme
//
@import "https://unpkg.com/@terminus/ui/helpers.scss";
@import 'https://unpkg.com/@angular/material@2.0.0-beta.12/_theming.scss';
@include mat-core();
$ts-default-primary: mat-palette($ts-material-primary, 500, 100, 700);
$ts-default-accent: mat-palette($ts-material-accent, 500, 100, 700);
$ts-default-warn: mat-palette($ts-material-warn, 500, 100, 700);
$ts-app-theme: mat-light-theme($ts-default-primary, $ts-default-accent, $ts-default-warn);
@include angular-material-theme($ts-app-theme);
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { RouterModule, RouterConfig } from '@angular/router';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TsLoginFormModule } from '@terminus/ui';
import { AppComponent } from './app.component';
const routes: RouterConfig = [];
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule,
BrowserAnimationsModule,
RouterModule.forRoot(routes),
FormsModule,
TsLoginFormModule,
],
declarations: [
AppComponent,
],
bootstrap: [
AppComponent,
],
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'TsLoginForm Demo';
progress = false;
link = '/reset';
reset = false;
formSubmission(e: TsLoginFormResponse) {
console.warn('Form value: ', e);
this.progress = true;
setTimeout(() => {
this.reset = true;
this.progress = false;
setTimeout(() => {
this.reset = false;
}, 10);
}, 1000);
}
}
<section class="demo" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="center stretch">
<div class="side" fxFlex>
<h1>{{ title }}</h1>
</div>
<div class="side" fxFlex>
<ts-login-form
[inProgress]="progress"
[triggerFormReset]="reset"
(submit)="formSubmission($event)"
></ts-login-form>
</div>
</section>