<!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>
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
const NG_VERSION = '@4.4.6';
const MATERIAL_VERSION = '@2.0.0-beta.12';
const FLEX_VERSION = '@2.0.0-beta.9';
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/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/http': `https://unpkg.com/@angular/http${NG_VERSION}/bundles/http.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
'@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`,
// Terminus UI
'@terminus/ui': 'https://unpkg.com/@terminus/ui/bundles/ui.umd.min.js',
// Third party libraries
'tslib': 'https://unpkg.com/tslib@1.7.1',
'rxjs': 'https://unpkg.com/rxjs',
'angular2-ladda': 'https://unpkg.com/angular2-ladda/module',
'ladda': 'https://unpkg.com/ladda/js',
'spin': 'https://unpkg.com/ladda/js/spin.js',
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
'angular2-ladda': {
main: 'module.js',
defaultExtension: 'js',
},
'ladda': {
main: 'ladda.js',
defaultExtension: 'js',
}
}
});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
//
// 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TsDatepickerModule } from '@terminus/ui';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
FormsModule,
TsDatepickerModule,
],
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 = 'TsDatepicker Demo';
disabled = false;
startView = 'month';
myDate = new Date(2017, 4, 1);
myFilter = (d: Date): boolean => {
const day = d.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
}
dateSelected(e: any) {
console.log('Date selected!: ', e);
}
}
<section class="demo" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="center stretch">
<div class="side" fxFlex>
<h1>{{ title }}</h1>
<label>
Disabled:
<input type="checkbox" [(ngModel)]="disabled">
</label>
</div>
<div class="side" fxFlex>
<ts-datepicker
[dateFilter]="myFilter"
[startingView]="startView"
[initialDate]="myDate"
[isDisabled]="disabled"
(selected)="dateSelected($event)"
></ts-datepicker>
</div>
</section>