<!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.12';
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;
& + .side {
background-color: #e4e4e4;
}
}
.content {
border: 1px solid orange;
padding: 1rem;
margin-bottom: 2rem;
min-height: 10rem;
}
//
// 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TsLoadingOverlayModule } from '@terminus/ui';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule,
BrowserAnimationsModule,
FormsModule,
TsLoadingOverlayModule,
],
declarations: [
AppComponent,
],
bootstrap: [
AppComponent,
],
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
import { Component } from '@angular/core';
const CONTENT_1 = "Voluptates voluptas minus voluptas corrupti vel. Corrupti distinctio consequatur omnis recusandae cum voluptatem animi. Non autem qui consectetur atque fugit.";
const CONTENT_2 = "Minus quidem voluptatem eius necessitatibus id et nobis. Error ipsa repellat dolor et. Cupiditate occaecati architecto eveniet assumenda ut ratione. Reiciendis voluptatem sed reiciendis praesentium.";
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'TsLoadingOverlay Demo';
isLoading1 = true;
isLoading2 = true;
content1: string;
content2: string;
ngOnInit() {
setTimeout(() => {
this.content1 = CONTENT_1;
this.isLoading1 = false;
}, 2000);
setTimeout(() => {
this.content2 = CONTENT_2;
this.isLoading2 = false;
}, 4000);
}
}
<section class="demo" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="center stretch">
<div class="side" fxFlex>
<h1>{{ title }}</h1>
</div>
<div class="side" fxFlex>
<div class="content" [tsLoadingOverlay]="isLoading1">
{{ content1 }}
</div>
<div class="content" [tsLoadingOverlay]="isLoading2">
{{ content2 }}
</div>
</div>
</section>