From 9e308a6fa2d263a117e6a147cfab29387797b46c Mon Sep 17 00:00:00 2001 From: Hans Date: Wed, 18 May 2016 15:07:57 -0700 Subject: [PATCH] build: separate demo-app in its own directory. (#451) * build: separate demo-app in its own directory. * chore: replace gulp-inline-resources with a script This also improves upon the relative path problem. All template paths now should be relative. Also, we can now include double-quotes in CSS/HTML. --- .gitignore | 1 + angular-cli-build.js | 60 ++++++++--- config/environment.dev.ts | 3 + config/environment.prod.ts | 3 + gulpfile.js | 19 ---- package.json | 8 +- scripts/release/inline-resources.js | 98 ++++++++++++++++++ src/components/button/button.ts | 10 +- src/components/card/card.ts | 11 +- src/components/checkbox/checkbox.spec.ts | 2 +- src/components/checkbox/checkbox.ts | 5 +- src/components/grid-list/grid-list-errors.ts | 2 +- src/components/grid-list/grid-list.ts | 8 +- src/components/grid-list/grid-tile.ts | 5 +- src/components/grid-list/tile-styler.ts | 2 +- src/components/icon/icon-registry.ts | 2 +- src/components/icon/icon.ts | 5 +- src/components/input/input.ts | 9 +- src/components/list/list.ts | 6 +- src/components/progress-bar/progress-bar.ts | 5 +- .../progress-circle/progress-circle.ts | 10 +- src/components/radio/radio.ts | 5 +- src/components/sidenav/sidenav.ts | 16 +-- src/components/slide-toggle/slide-toggle.scss | 8 +- src/components/slide-toggle/slide-toggle.ts | 7 +- src/components/tab-group/tab-content.ts | 2 +- src/components/tab-group/tab-group.ts | 7 +- src/components/tab-group/tab-label.ts | 2 +- src/components/toolbar/toolbar.ts | 5 +- src/core/annotations/field-value.ts | 4 +- .../position/connected-position-strategy.ts | 2 +- .../position/global-position-strategy.ts | 2 +- src/demo-app/button/button-demo.ts | 13 +-- src/demo-app/card/card-demo.ts | 13 +-- src/demo-app/checkbox/checkbox-demo.ts | 10 +- src/demo-app/{ => demo-app}/demo-app.html | 0 src/demo-app/{ => demo-app}/demo-app.scss | 0 src/demo-app/{ => demo-app}/demo-app.ts | 55 +++++----- src/demo-app/environment.ts | 7 ++ src/{ => demo-app}/favicon.ico | Bin src/demo-app/gestures/gestures-demo.ts | 5 +- src/demo-app/grid-list/grid-list-demo.ts | 11 +- src/demo-app/icon/icon-demo.html | 2 +- src/demo-app/icon/icon-demo.ts | 11 +- src/{ => demo-app}/index.html | 0 src/demo-app/input/input-demo.ts | 17 +-- src/demo-app/list/list-demo.ts | 11 +- .../live-announcer/live-announcer-demo.ts | 5 +- src/{ => demo-app}/main.scss | 0 src/{ => demo-app}/main.ts | 15 +-- src/demo-app/overlay/overlay-demo.ts | 15 +-- src/demo-app/portal/portal-demo.ts | 14 +-- .../progress-bar/progress-bar-demo.ts | 9 +- .../progress-circle/progress-circle-demo.ts | 9 +- src/demo-app/radio/radio-demo.ts | 9 +- src/demo-app/sidenav/sidenav-demo.ts | 9 +- .../slide-toggle/slide-toggle-demo.ts | 7 +- src/{ => demo-app}/system-config.ts | 41 ++++++-- src/demo-app/tab-group/tab-group-demo.ts | 11 +- src/demo-app/toolbar/toolbar-demo.ts | 9 +- src/{ => demo-app}/tsconfig.json | 17 ++- src/demo-app/typings.d.ts | 4 + src/typings.d.ts | 1 - 63 files changed, 434 insertions(+), 230 deletions(-) create mode 100644 config/environment.dev.ts create mode 100644 config/environment.prod.ts delete mode 100644 gulpfile.js create mode 100644 scripts/release/inline-resources.js rename src/demo-app/{ => demo-app}/demo-app.html (100%) rename src/demo-app/{ => demo-app}/demo-app.scss (100%) rename src/demo-app/{ => demo-app}/demo-app.ts (53%) create mode 100644 src/demo-app/environment.ts rename src/{ => demo-app}/favicon.ico (100%) rename src/{ => demo-app}/index.html (100%) rename src/{ => demo-app}/main.scss (100%) rename src/{ => demo-app}/main.ts (59%) rename src/{ => demo-app}/system-config.ts (76%) rename src/{ => demo-app}/tsconfig.json (56%) create mode 100644 src/demo-app/typings.d.ts delete mode 100644 src/typings.d.ts diff --git a/.gitignore b/.gitignore index 1c34f4721183..94eb0c6e1546 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ /.idea # misc +.DS_Store /.sass-cache /connect.lock /coverage/* diff --git a/angular-cli-build.js b/angular-cli-build.js index 362ba6d06168..cd46f6fa6941 100644 --- a/angular-cli-build.js +++ b/angular-cli-build.js @@ -5,7 +5,6 @@ const path = require('path'); // Import the require hook. Enables us to require TS files natively. require('ts-node/register'); - const Angular2App = require('angular-cli/lib/broccoli/angular2-app'); const Funnel = require('broccoli-funnel'); const MergeTree = require('broccoli-merge-trees'); @@ -13,8 +12,49 @@ const autoPrefixerTree = require('broccoli-autoprefixer'); module.exports = function(defaults) { - var angularAppTree = new Angular2App(defaults, { - sourceDir: 'src/', + // The Angular Application tree. + const appTree = _buildAppTree(defaults); + + // The CSS tree that is auto prefixed with browser support. + const cssAutoprefixed = autoPrefixerTree(new Funnel(appTree, { + include: [ '**/*.css' ] + })); + + return new MergeTree([appTree, cssAutoprefixed], { overwrite: true }); +}; + + +/** + * Build the Broccoli Tree containing all the files used as the input to the Angular2App. + */ +function _buildDemoAppInputTree() { + return new MergeTree([ + new Funnel('typings', { + destDir: 'typings' + }), + new Funnel('src', { + include: ['components/**/*', 'core/**/*'], + destDir: 'src/demo-app' + }), + new Funnel('src/demo-app', { + destDir: 'src/demo-app' + }) + ]); +} + +/** + * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo + * app. + * @param defaults The default objects from AngularCLI (deprecated). + * @returns {Angular2App} + */ +function _buildAppTree(defaults) { + let inputNode = _buildDemoAppInputTree(); + + return new Angular2App(defaults, inputNode, { + sourceDir: 'src/demo-app', + tsCompiler: { + }, sassCompiler: { includePaths: [ 'src/core/style' @@ -27,17 +67,7 @@ module.exports = function(defaults) { 'es6-shim/es6-shim.js', 'reflect-metadata/*.js', 'rxjs/**/*.js', - '@angular/**/*.js', + '@angular/**/*.js' ] }); - - const cssAutoprefixed = autoPrefixerTree(new Funnel(angularAppTree, { - include: [ '**/*.css' ] - })); - - return new MergeTree([ - new Funnel('src', { include: ['**/*.scss']}), - angularAppTree, - cssAutoprefixed, - ], { overwrite: true }); -}; +} diff --git a/config/environment.dev.ts b/config/environment.dev.ts new file mode 100644 index 000000000000..ffe8aed76642 --- /dev/null +++ b/config/environment.dev.ts @@ -0,0 +1,3 @@ +export const environment = { + production: false +}; diff --git a/config/environment.prod.ts b/config/environment.prod.ts new file mode 100644 index 000000000000..3612073bc31c --- /dev/null +++ b/config/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index b39248e634d0..000000000000 --- a/gulpfile.js +++ /dev/null @@ -1,19 +0,0 @@ -var gulp = require('gulp'); -var inlineNg2Template = require('gulp-inline-ng2-template'); - - -/** - * DO NOT ADD EXTRA TASKS HERE. - * - * gulp is only used temporarily in order to perform HTML and CSS in-lining for publishing. - * Eventually the CLI should support this. - * - * See https://github.com/angular/angular-cli/issues/296 - * - */ - -gulp.task('inline-resources', function(){ - gulp.src('./dist/components/**/*.js') - .pipe(inlineNg2Template({base: './dist', target: 'es5'})) - .pipe(gulp.dest('./dist/components')); -}); diff --git a/package.json b/package.json index dd31b3daa5d0..8174da620355 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "typings": "typings install --ambient", "postinstall": "npm run typings", "e2e": "protractor test/protractor.conf.js", - "inline-resources": "gulp inline-resources", + "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components", "deploy": "firebase deploy" }, "version": "2.0.0-alpha.4", @@ -41,7 +41,7 @@ }, "devDependencies": { "add-stream": "^1.0.0", - "angular-cli": "0.0.37", + "angular-cli": "^1.0.0-beta.4", "broccoli-autoprefixer": "^4.1.0", "broccoli-funnel": "^1.0.1", "broccoli-merge-trees": "^1.1.1", @@ -51,8 +51,6 @@ "firebase-tools": "^2.2.1", "fs-extra": "^0.26.5", "glob": "^6.0.4", - "gulp": "^3.9.1", - "gulp-inline-ng2-template": "^1.1.2", "jasmine-core": "^2.4.1", "js-yaml": "^3.5.2", "karma": "^0.13.15", @@ -68,7 +66,7 @@ "symlink-or-copy": "^1.0.1", "ts-node": "^0.5.5", "tslint": "^3.5.0", - "typescript": "^1.8.0", + "typescript": "^1.9.0-dev", "typings": "^0.8.1", "which": "^1.2.4" } diff --git a/scripts/release/inline-resources.js b/scripts/release/inline-resources.js new file mode 100644 index 000000000000..133ec2e6627a --- /dev/null +++ b/scripts/release/inline-resources.js @@ -0,0 +1,98 @@ +#!/usr/bin/env node +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const glob = require('glob'); + +/** + * Simple Promiseify function that takes a Node API and return a version that supports promises. + * We use promises instead of synchronized functions to make the process less I/O bound and + * faster. It also simplify the code. + */ +function promiseify(fn) { + return function() { + const args = [].slice.call(arguments, 0); + return new Promise((resolve, reject) => { + fn.apply(this, args.concat([function (err, value) { + if (err) { + reject(err); + } else { + resolve(value); + } + }])); + }); + }; +} + +const readFile = promiseify(fs.readFile); +const writeFile = promiseify(fs.writeFile); + + +/** + * For every argument, inline the templates and styles under it and write the new file. + */ +for (let arg of process.argv.slice(2)) { + if (arg.indexOf('*') < 0) { + // Argument is a directory target, add glob patterns to include every files. + arg = path.join(arg, '**', '*'); + } + + const files = glob.sync(arg, {}) + .filter(name => /\.js$/.test(name)); // Matches only JavaScript files. + + // Generate all files content with inlined templates. + files.forEach(filePath => { + readFile(filePath, 'utf-8') + .then(content => inlineTemplate(filePath, content)) + .then(content => inlineStyle(filePath, content)) + .then(content => writeFile(filePath, content)) + .catch(err => { + console.error('An error occured: ', err); + }); + }); +} + + +/** + * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and + * replace with `template: ...` (with the content of the file included). + * @param filePath {string} The path of the source file. + * @param content {string} The source file's content. + * @return {string} The content with all templates inlined. + */ +function inlineTemplate(filePath, content) { + return content.replace(/templateUrl:\s*'([^']+\.html)'/g, function(m, templateUrl) { + const templateFile = path.join(path.dirname(filePath), templateUrl); + const templateContent = fs.readFileSync(templateFile, 'utf-8'); + const shortenedTemplate = templateContent + .replace(/([\n\r]\s*)+/gm, ' ') + .replace(/"/g, '\\"'); + return `template: "${shortenedTemplate}"`; + }); +} + + +/** + * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and + * replace with `styles: [...]` (with the content of the file included). + * @param filePath {string} The path of the source file. + * @param content {string} The source file's content. + * @return {string} The content with all styles inlined. + */ +function inlineStyle(filePath, content) { + return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) { + const urls = eval(styleUrls); + return 'styles: [' + + urls.map(styleUrl => { + const styleFile = path.join(path.dirname(filePath), styleUrl); + const styleContent = fs.readFileSync(styleFile, 'utf-8'); + const shortenedStyle = styleContent + .replace(/([\n\r]\s*)+/gm, ' ') + .replace(/"/g, '\\"'); + return `"${shortenedStyle}"`; + }) + .join(',\n') + + ']'; + }); +} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 0ac746786e5e..ace5c0da0994 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -14,6 +14,7 @@ import { @Component({ + moduleId: module.id, selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' + 'button[md-fab], button[md-mini-fab]', inputs: ['color'], @@ -23,8 +24,8 @@ import { '(focus)': 'setKeyboardFocus()', '(blur)': 'removeKeyboardFocus()', }, - templateUrl: './components/button/button.html', - styleUrls: ['./components/button/button.css'], + templateUrl: 'button.html', + styleUrls: ['button.css'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -81,6 +82,7 @@ export class MdButton { } @Component({ + moduleId: module.id, selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]', inputs: ['color'], host: { @@ -90,8 +92,8 @@ export class MdButton { '(blur)': 'removeKeyboardFocus()', '(click)': 'haltDisabledEvents($event)', }, - templateUrl: './components/button/button.html', - styleUrls: ['./components/button/button.css'], + templateUrl: 'button.html', + styleUrls: ['button.css'], encapsulation: ViewEncapsulation.None }) export class MdAnchor extends MdButton { diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 69901a276477..2dc60f610b9f 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -21,9 +21,10 @@ it also provides a number of preset styles for common card sections, including: */ @Component({ + moduleId: module.id, selector: 'md-card', - templateUrl: './components/card/card.html', - styleUrls: ['./components/card/card.css'], + templateUrl: 'card.html', + styleUrls: ['card.css'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -45,8 +46,9 @@ TODO(kara): update link to demo site when it exists */ @Component({ + moduleId: module.id, selector: 'md-card-header', - templateUrl: './components/card/card-header.html', + templateUrl: 'card-header.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -64,8 +66,9 @@ TODO(kara): update link to demo site when it exists */ @Component({ + moduleId: module.id, selector: 'md-card-title-group', - templateUrl: './components/card/card-title-group.html', + templateUrl: 'card-title-group.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts index 96d4bc4145c5..7cb9ae712044 100644 --- a/src/components/checkbox/checkbox.spec.ts +++ b/src/components/checkbox/checkbox.spec.ts @@ -4,7 +4,7 @@ import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing' import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdCheckbox} from './checkbox'; -import {PromiseCompleter} from '../../core/async/promise-completer'; +import {PromiseCompleter} from '@angular2-material/core/async/promise-completer'; // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 13bf2395e233..3dd9b3f86f60 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -53,9 +53,10 @@ enum TransitionCheckState { * See: https://www.google.com/design/spec/components/selection-controls.html */ @Component({ + moduleId: module.id, selector: 'md-checkbox', - templateUrl: './components/checkbox/checkbox.html', - styleUrls: ['./components/checkbox/checkbox.css'], + templateUrl: 'checkbox.html', + styleUrls: ['checkbox.css'], host: { '[class.md-checkbox-indeterminate]': 'indeterminate', '[class.md-checkbox-checked]': 'checked', diff --git a/src/components/grid-list/grid-list-errors.ts b/src/components/grid-list/grid-list-errors.ts index cc38681a16ce..6c15aba8b034 100644 --- a/src/components/grid-list/grid-list-errors.ts +++ b/src/components/grid-list/grid-list-errors.ts @@ -1,4 +1,4 @@ -import {MdError} from '../../core/errors/error'; +import {MdError} from '@angular2-material/core/errors/error'; /** * Exception thrown when cols property is missing from grid-list diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts index 474456161c45..29792d5f68c8 100644 --- a/src/components/grid-list/grid-list.ts +++ b/src/components/grid-list/grid-list.ts @@ -18,7 +18,7 @@ import { FixedTileStyler } from './tile-styler'; import {MdGridListColsError} from './grid-list-errors'; -import {Dir} from '../../core/rtl/dir'; +import {Dir} from '@angular2-material/core/rtl/dir'; // TODO(kara): Conditional (responsive) column count / row size. // TODO(kara): Re-layout on window resize / media change (debounced). @@ -27,10 +27,10 @@ import {Dir} from '../../core/rtl/dir'; const MD_FIT_MODE = 'fit'; @Component({ + moduleId: module.id, selector: 'md-grid-list', - host: { 'role': 'list' }, - templateUrl: './components/grid-list/grid-list.html', - styleUrls: ['./components/grid-list/grid-list.css'], + templateUrl: 'grid-list.html', + styleUrls: ['grid-list.css'], encapsulation: ViewEncapsulation.None, }) export class MdGridList implements OnInit, AfterContentChecked { diff --git a/src/components/grid-list/grid-tile.ts b/src/components/grid-list/grid-tile.ts index 419c11ff1c5f..3e3088f8d2c9 100644 --- a/src/components/grid-list/grid-tile.ts +++ b/src/components/grid-list/grid-tile.ts @@ -9,10 +9,11 @@ import { import {coerceToNumber} from './grid-list'; @Component({ + moduleId: module.id, selector: 'md-grid-tile', host: { 'role': 'listitem' }, - templateUrl: './components/grid-list/grid-tile.html', - styleUrls: ['./components/grid-list/grid-list.css'], + templateUrl: 'grid-tile.html', + styleUrls: ['grid-list.css'], encapsulation: ViewEncapsulation.None, }) export class MdGridTile { diff --git a/src/components/grid-list/tile-styler.ts b/src/components/grid-list/tile-styler.ts index 5e342a5e4e6d..3a8353616392 100644 --- a/src/components/grid-list/tile-styler.ts +++ b/src/components/grid-list/tile-styler.ts @@ -1,7 +1,7 @@ import {MdGridTile} from './grid-tile'; import {TileCoordinator} from './tile-coordinator'; import {MdGridListBadRatioError} from './grid-list-errors'; -import {Dir} from '../../core/rtl/dir'; +import {Dir} from '@angular2-material/core/rtl/dir'; /* Sets the style properties for an individual tile, given the position calculated by the * Tile Coordinator. */ diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts index 72f025c1a0ac..be2784168f21 100644 --- a/src/components/icon/icon-registry.ts +++ b/src/components/icon/icon-registry.ts @@ -1,5 +1,6 @@ import {Injectable} from '@angular/core'; import {Http} from '@angular/http'; +import {MdError} from '@angular2-material/core/errors/error'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/forkJoin'; import 'rxjs/add/observable/of'; @@ -9,7 +10,6 @@ import 'rxjs/add/operator/do'; import 'rxjs/add/operator/share'; import 'rxjs/add/operator/finally'; import 'rxjs/add/operator/catch'; -import {MdError} from '../../core/errors/error'; /** Exception thrown when attempting to load an icon with a name that cannot be found. */ diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 046d721dd89c..d4c2fe78031d 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -10,8 +10,8 @@ import { ViewEncapsulation, AfterViewChecked } from '@angular/core'; +import {MdError} from '@angular2-material/core/errors/error'; import {MdIconRegistry} from './icon-registry'; -import {MdError} from '../../core/errors/error'; export {MdIconRegistry} from './icon-registry'; @@ -56,9 +56,10 @@ export class MdIconInvalidNameError extends MdError { * */ @Component({ + moduleId: module.id, template: '', selector: 'md-icon', - styleUrls: ['./components/icon/icon.css'], + styleUrls: ['icon.css'], host: { 'role': 'img', }, diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 0b92e5570bb4..a4507558e38f 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -20,8 +20,8 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/common'; -import {BooleanFieldValue} from '../../core/annotations/field-value'; -import {MdError} from '../../core/errors/error'; +import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value'; +import {MdError} from '@angular2-material/core/errors/error'; import {Observable} from 'rxjs/Observable'; @@ -92,9 +92,10 @@ export class MdHint { * improve on its behaviour, along with styling it according to the Material Design. */ @Component({ + moduleId: module.id, selector: 'md-input', - templateUrl: 'components/input/input.html', - styleUrls: ['components/input/input.css'], + templateUrl: 'input.html', + styleUrls: ['input.css'], providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR], host: {'(click)' : 'focus()'} }) diff --git a/src/components/list/list.ts b/src/components/list/list.ts index 78272b41119a..8846b6ed5666 100644 --- a/src/components/list/list.ts +++ b/src/components/list/list.ts @@ -13,10 +13,11 @@ import { @Component({ + moduleId: module.id, selector: 'md-list, md-nav-list', host: {'role': 'list'}, template: '', - styleUrls: ['./components/list/list.css'], + styleUrls: ['list.css'], encapsulation: ViewEncapsulation.None }) export class MdList {} @@ -30,9 +31,10 @@ export class MdLine {} export class MdListAvatar {} @Component({ + moduleId: module.id, selector: 'md-list-item, a[md-list-item]', host: {'role': 'listitem'}, - templateUrl: './components/list/list-item.html', + templateUrl: 'list-item.html', encapsulation: ViewEncapsulation.None }) export class MdListItem implements AfterContentInit { diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index de3efc36498e..8aca3fcd3dd6 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -14,14 +14,15 @@ import { * component. */ @Component({ + moduleId: module.id, selector: 'md-progress-bar', host: { 'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', }, - templateUrl: './components/progress-bar/progress-bar.html', - styleUrls: ['./components/progress-bar/progress-bar.css'], + templateUrl: 'progress-bar.html', + styleUrls: ['progress-bar.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdProgressBar { diff --git a/src/components/progress-circle/progress-circle.ts b/src/components/progress-circle/progress-circle.ts index 0b258d306990..c3a8ac73e54f 100644 --- a/src/components/progress-circle/progress-circle.ts +++ b/src/components/progress-circle/progress-circle.ts @@ -30,14 +30,15 @@ type EasingFn = (currentTime: number, startValue: number, * component. */ @Component({ + moduleId: module.id, selector: 'md-progress-circle', host: { 'role': 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', }, - templateUrl: './components/progress-circle/progress-circle.html', - styleUrls: ['./components/progress-circle/progress-circle.css'], + templateUrl: 'progress-circle.html', + styleUrls: ['progress-circle.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdProgressCircle { @@ -188,12 +189,13 @@ export class MdProgressCircle { * indeterminate instance. */ @Component({ + moduleId: module.id, selector: 'md-spinner', host: { 'role': 'progressbar', }, - templateUrl: './components/progress-circle/progress-circle.html', - styleUrls: ['./components/progress-circle/progress-circle.css'], + templateUrl: 'progress-circle.html', + styleUrls: ['progress-circle.css'], }) export class MdSpinner extends MdProgressCircle { constructor(changeDetectorRef: ChangeDetectorRef) { diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 2ea34b5e82a9..ec881ebdd938 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -239,9 +239,10 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { @Component({ + moduleId: module.id, selector: 'md-radio-button', - templateUrl: './components/radio/radio.html', - styleUrls: ['./components/radio/radio.css'], + templateUrl: 'radio.html', + styleUrls: ['radio.css'], encapsulation: ViewEncapsulation.None, host: { '(click)': 'onClick($event)' diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts index 11155858274f..8d821c0c24a8 100644 --- a/src/components/sidenav/sidenav.ts +++ b/src/components/sidenav/sidenav.ts @@ -14,10 +14,10 @@ import { EventEmitter, Renderer } from '@angular/core'; -import {Dir} from '../../core/rtl/dir'; -import {PromiseCompleter} from '../../core/async/promise-completer'; -import {MdError} from '../../core/errors/error'; -import { BooleanFieldValue } from '../../core/annotations/field-value'; +import {Dir} from '@angular2-material/core/rtl/dir'; +import {PromiseCompleter} from '@angular2-material/core/async/promise-completer'; +import {MdError} from '@angular2-material/core/errors/error'; +import { BooleanFieldValue } from '@angular2-material/core/annotations/field-value'; /** Exception thrown when two MdSidenav are matching the same side. */ @@ -36,6 +36,7 @@ export class MdDuplicatedSidenavError extends MdError { * Please refer to README.md for examples on how to use it. */ @Component({ + moduleId: module.id, selector: 'md-sidenav', template: '', host: { @@ -231,15 +232,16 @@ export class MdSidenav { * and coordinate the backdrop and content styling. */ @Component({ + moduleId: module.id, selector: 'md-sidenav-layout', // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav // changes its state. directives: [MdSidenav], - templateUrl: './components/sidenav/sidenav.html', + templateUrl: 'sidenav.html', styleUrls: [ - './components/sidenav/sidenav.css', - './components/sidenav/sidenav-transitions.css', + 'sidenav.css', + 'sidenav-transitions.css', ], }) export class MdSidenavLayout implements AfterContentInit { diff --git a/src/components/slide-toggle/slide-toggle.scss b/src/components/slide-toggle/slide-toggle.scss index d0d9bcecfa4a..9e0123ba863b 100644 --- a/src/components/slide-toggle/slide-toggle.scss +++ b/src/components/slide-toggle/slide-toggle.scss @@ -1,9 +1,9 @@ -@import "../../core/style/variables"; -@import "../../core/style/mixins"; -@import "../../core/style/elevation"; +@import "variables"; +@import "mixins"; +@import "elevation"; //TODO(): remove the default theme. -@import "../../core/style/default-theme"; +@import "default-theme"; $md-slide-toggle-width: 36px !default; $md-slide-toggle-height: 24px !default; diff --git a/src/components/slide-toggle/slide-toggle.ts b/src/components/slide-toggle/slide-toggle.ts index d2b5cabdf560..cd0d8bf02210 100644 --- a/src/components/slide-toggle/slide-toggle.ts +++ b/src/components/slide-toggle/slide-toggle.ts @@ -12,7 +12,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/common'; -import { BooleanFieldValue } from '../../core/annotations/field-value'; +import { BooleanFieldValue } from '@angular2-material/core/annotations/field-value'; import { Observable } from 'rxjs/Observable'; export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = { @@ -25,14 +25,15 @@ export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = { let nextId = 0; @Component({ + moduleId: module.id, selector: 'md-slide-toggle', host: { '[class.md-checked]': 'checked', '[class.md-disabled]': 'disabled', '(click)': 'onTouched()' }, - templateUrl: './components/slide-toggle/slide-toggle.html', - styleUrls: ['./components/slide-toggle/slide-toggle.css'], + templateUrl: 'slide-toggle.html', + styleUrls: ['slide-toggle.css'], providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush }) diff --git a/src/components/tab-group/tab-content.ts b/src/components/tab-group/tab-content.ts index a90d5f26535e..20b004bb7954 100644 --- a/src/components/tab-group/tab-content.ts +++ b/src/components/tab-group/tab-content.ts @@ -1,5 +1,5 @@ import {Directive, TemplateRef, ViewContainerRef} from '@angular/core'; -import {TemplatePortalDirective} from '../../core/portal/portal-directives'; +import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives'; /** Used to flag tab contents for use with the portal directive */ @Directive({ diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 0254ac65109d..0eb44aab71cc 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -1,7 +1,7 @@ import {Component, Input, ViewChildren, NgZone} from '@angular/core'; import {QueryList} from '@angular/core'; import {ContentChildren} from '@angular/core'; -import {PortalHostDirective} from '../../core/portal/portal-directives'; +import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives'; import {MdTabLabel} from './tab-label'; import {MdTabContent} from './tab-content'; import {MdTabLabelWrapper} from './tab-label-wrapper'; @@ -16,9 +16,10 @@ let nextId = 0; * See: https://www.google.com/design/spec/components/tabs.html */ @Component({ + moduleId: module.id, selector: 'md-tab-group', - templateUrl: './components/tab-group/tab-group.html', - styleUrls: ['./components/tab-group/tab-group.css'], + templateUrl: 'tab-group.html', + styleUrls: ['tab-group.css'], directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar], }) export class MdTabGroup { diff --git a/src/components/tab-group/tab-label.ts b/src/components/tab-group/tab-label.ts index 3ea219587d1c..8adb67afaf57 100644 --- a/src/components/tab-group/tab-label.ts +++ b/src/components/tab-group/tab-label.ts @@ -1,5 +1,5 @@ import {Directive, TemplateRef, ViewContainerRef} from '@angular/core'; -import {TemplatePortalDirective} from '../../core/portal/portal-directives'; +import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives'; /** Used to flag tab labels for use with the portal directive */ @Directive({ diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index 9f78b786f5cc..54cbc9c58016 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -7,9 +7,10 @@ import {Renderer} from '@angular/core'; import {ElementRef} from '@angular/core'; @Component({ + moduleId: module.id, selector: 'md-toolbar', - templateUrl: './components/toolbar/toolbar.html', - styleUrls: ['./components/toolbar/toolbar.css'], + templateUrl: 'toolbar.html', + styleUrls: ['toolbar.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdToolbar { diff --git a/src/core/annotations/field-value.ts b/src/core/annotations/field-value.ts index 7583e146236a..b821215bd425 100644 --- a/src/core/annotations/field-value.ts +++ b/src/core/annotations/field-value.ts @@ -18,9 +18,9 @@ function booleanFieldValueFactory() { target[localKey] = defaultValue; Object.defineProperty(target, key, { - get() { return this[localKey]; }, + get() { return (this)[localKey]; }, set(value: boolean) { - this[localKey] = value != null && `${value}` !== 'false'; + (this)[localKey] = value != null && `${value}` !== 'false'; } }); }; diff --git a/src/core/overlay/position/connected-position-strategy.ts b/src/core/overlay/position/connected-position-strategy.ts index f1103f8a8644..6ab6496f8c66 100644 --- a/src/core/overlay/position/connected-position-strategy.ts +++ b/src/core/overlay/position/connected-position-strategy.ts @@ -1,7 +1,7 @@ import {PositionStrategy} from './position-strategy'; import {ElementRef} from '@angular/core'; +import {applyCssTransform} from '@angular2-material/core/style/apply-transform'; import {ViewportRuler} from './viewport-ruler'; -import {applyCssTransform} from '../../style/apply-transform'; diff --git a/src/core/overlay/position/global-position-strategy.ts b/src/core/overlay/position/global-position-strategy.ts index 0e2379f4bacc..be97efeb1b9c 100644 --- a/src/core/overlay/position/global-position-strategy.ts +++ b/src/core/overlay/position/global-position-strategy.ts @@ -1,5 +1,5 @@ +import {applyCssTransform} from '@angular2-material/core/style/apply-transform'; import {PositionStrategy} from './position-strategy'; -import {applyCssTransform} from '../../style/apply-transform'; /** diff --git a/src/demo-app/button/button-demo.ts b/src/demo-app/button/button-demo.ts index 9f591b02144b..16746c32dbeb 100644 --- a/src/demo-app/button/button-demo.ts +++ b/src/demo-app/button/button-demo.ts @@ -1,12 +1,13 @@ import {Component} from '@angular/core'; -import {MdButton, MdAnchor} from '../../components/button/button'; -import {MdIcon} from '../../components/icon/icon'; +import {MdButton, MdAnchor} from '@angular2-material/button/button'; +import {MdIcon} from '@angular2-material/icon/icon'; @Component({ - selector: 'button-demo', - templateUrl: 'demo-app/button/button-demo.html', - styleUrls: ['demo-app/button/button-demo.css'], - directives: [MdButton, MdAnchor, MdIcon] + moduleId: module.id, + selector: 'button-demo', + templateUrl: 'button-demo.html', + styleUrls: ['button-demo.css'], + directives: [MdButton, MdAnchor, MdIcon] }) export class ButtonDemo { isDisabled: boolean = false; diff --git a/src/demo-app/card/card-demo.ts b/src/demo-app/card/card-demo.ts index 8eaf7801bfab..299948052fed 100644 --- a/src/demo-app/card/card-demo.ts +++ b/src/demo-app/card/card-demo.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; -import {MdButton} from '../../components/button/button'; -import {MD_CARD_DIRECTIVES} from '../../components/card/card'; +import {MdButton} from '@angular2-material/button/button'; +import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card'; @Component({ - selector: 'card-demo', - templateUrl: 'demo-app/card/card-demo.html', - styleUrls: ['demo-app/card/card-demo.css'], - directives: [MD_CARD_DIRECTIVES, MdButton] + moduleId: module.id, + selector: 'card-demo', + templateUrl: 'card-demo.html', + styleUrls: ['card-demo.css'], + directives: [MD_CARD_DIRECTIVES, MdButton] }) export class CardDemo {} diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts index 7e4584697b9e..cd578f020cec 100644 --- a/src/demo-app/checkbox/checkbox-demo.ts +++ b/src/demo-app/checkbox/checkbox-demo.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {FORM_DIRECTIVES} from '@angular/common'; -import {MdCheckbox} from '../../components/checkbox/checkbox'; +import {MdCheckbox} from '@angular2-material/checkbox/checkbox'; interface Task { name: string; @@ -9,13 +9,14 @@ interface Task { } @Component({ + moduleId: module.id, selector: 'md-checkbox-demo-nested-checklist', styles: [` li { margin-bottom: 4px; } `], - templateUrl: 'demo-app/checkbox/nested-checklist.html', + templateUrl: 'nested-checklist.html', directives: [MdCheckbox] }) class MdCheckboxDemoNestedChecklist { @@ -58,9 +59,10 @@ class MdCheckboxDemoNestedChecklist { } @Component({ + moduleId: module.id, selector: 'md-checkbox-demo', - templateUrl: 'demo-app/checkbox/checkbox-demo.html', - styleUrls: ['demo-app/checkbox/checkbox-demo.css'], + templateUrl: 'checkbox-demo.html', + styleUrls: ['checkbox-demo.css'], directives: [MdCheckbox, MdCheckboxDemoNestedChecklist, FORM_DIRECTIVES] }) export class CheckboxDemo { diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html similarity index 100% rename from src/demo-app/demo-app.html rename to src/demo-app/demo-app/demo-app.html diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss similarity index 100% rename from src/demo-app/demo-app.scss rename to src/demo-app/demo-app/demo-app.scss diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts similarity index 53% rename from src/demo-app/demo-app.ts rename to src/demo-app/demo-app/demo-app.ts index e2c484bf5bd8..6cd15e0a022a 100644 --- a/src/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -1,29 +1,31 @@ import {Component} from '@angular/core'; import {Route, Routes, ROUTER_DIRECTIVES} from '@angular/router'; -import {CardDemo} from './card/card-demo'; -import {ButtonDemo} from './button/button-demo'; -import {IconDemo} from './icon/icon-demo'; -import {RadioDemo} from './radio/radio-demo'; -import {SidenavDemo} from './sidenav/sidenav-demo'; -import {ProgressBarDemo} from './progress-bar/progress-bar-demo'; -import {ProgressCircleDemo} from './progress-circle/progress-circle-demo'; -import {CheckboxDemo} from './checkbox/checkbox-demo'; -import {Dir} from '../core/rtl/dir'; -import {MdButton} from '../components/button/button'; -import {MD_SIDENAV_DIRECTIVES} from '../components/sidenav/sidenav'; -import {MD_LIST_DIRECTIVES} from '../components/list/list'; -import {MdIcon} from '../components/icon/icon'; -import {MdToolbar} from '../components/toolbar/toolbar'; -import {PortalDemo} from './portal/portal-demo'; -import {ToolbarDemo} from './toolbar/toolbar-demo'; -import {OverlayDemo} from './overlay/overlay-demo'; -import {ListDemo} from './list/list-demo'; -import {InputDemo} from './input/input-demo'; -import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo'; -import {GesturesDemo} from './gestures/gestures-demo'; -import {GridListDemo} from './grid-list/grid-list-demo'; -import {TabGroupDemo} from './tab-group/tab-group-demo'; -import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo'; + +import {Dir} from '@angular2-material/core/rtl/dir'; +import {MdButton} from '@angular2-material/button/button'; +import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav'; +import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list'; +import {MdIcon} from '@angular2-material/icon/icon'; +import {MdToolbar} from '@angular2-material/toolbar/toolbar'; + +import {CardDemo} from '../card/card-demo'; +import {ButtonDemo} from '../button/button-demo'; +import {IconDemo} from '../icon/icon-demo'; +import {RadioDemo} from '../radio/radio-demo'; +import {SidenavDemo} from '../sidenav/sidenav-demo'; +import {ProgressBarDemo} from '../progress-bar/progress-bar-demo'; +import {ProgressCircleDemo} from '../progress-circle/progress-circle-demo'; +import {CheckboxDemo} from '../checkbox/checkbox-demo'; +import {PortalDemo} from '../portal/portal-demo'; +import {ToolbarDemo} from '../toolbar/toolbar-demo'; +import {OverlayDemo} from '../overlay/overlay-demo'; +import {ListDemo} from '../list/list-demo'; +import {InputDemo} from '../input/input-demo'; +import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo'; +import {GesturesDemo} from '../gestures/gestures-demo'; +import {GridListDemo} from '../grid-list/grid-list-demo'; +import {TabGroupDemo} from '../tab-group/tab-group-demo'; +import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo'; @Component({ selector: 'home', @@ -35,10 +37,11 @@ import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo'; export class Home {} @Component({ + moduleId: module.id, selector: 'demo-app', providers: [], - templateUrl: 'demo-app/demo-app.html', - styleUrls: ['demo-app/demo-app.css'], + templateUrl: 'demo-app.html', + styleUrls: ['demo-app.css'], directives: [ ROUTER_DIRECTIVES, Dir, diff --git a/src/demo-app/environment.ts b/src/demo-app/environment.ts new file mode 100644 index 000000000000..79ee96fdfdbd --- /dev/null +++ b/src/demo-app/environment.ts @@ -0,0 +1,7 @@ +// The file for the current environment will overwrite this one during build +// Different environments can be found in config/environment.{dev|prod}.ts +// The build system defaults to the dev environment + +export const environment = { + production: false +}; diff --git a/src/favicon.ico b/src/demo-app/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/demo-app/favicon.ico diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts index e828abf4b5fe..08284dab1c95 100644 --- a/src/demo-app/gestures/gestures-demo.ts +++ b/src/demo-app/gestures/gestures-demo.ts @@ -1,9 +1,10 @@ import {Component} from '@angular/core'; @Component({ + moduleId: module.id, selector: 'gestures-demo', - templateUrl: 'demo-app/gestures/gestures-demo.html', - styleUrls: ['demo-app/gestures/gestures-demo.css'], + templateUrl: 'gestures-demo.html', + styleUrls: ['gestures-demo.css'], directives: [] }) export class GesturesDemo { diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/demo-app/grid-list/grid-list-demo.ts index fc947fb5bcb4..095d44c3cc9b 100644 --- a/src/demo-app/grid-list/grid-list-demo.ts +++ b/src/demo-app/grid-list/grid-list-demo.ts @@ -1,12 +1,13 @@ import {Component} from '@angular/core'; -import {MD_GRID_LIST_DIRECTIVES} from '../../components/grid-list/grid-list'; -import {MdButton} from '../../components/button/button'; -import {MD_CARD_DIRECTIVES} from '../../components/card/card'; +import {MD_GRID_LIST_DIRECTIVES} from '@angular2-material/grid-list/grid-list'; +import {MdButton} from '@angular2-material/button/button'; +import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card'; @Component({ + moduleId: module.id, selector: 'grid-list-demo', - templateUrl: 'demo-app/grid-list/grid-list-demo.html', - styleUrls: ['demo-app/grid-list/grid-list-demo.css'], + templateUrl: 'grid-list-demo.html', + styleUrls: ['grid-list-demo.css'], directives: [MD_GRID_LIST_DIRECTIVES, MdButton, MD_CARD_DIRECTIVES] }) export class GridListDemo { diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html index 744a68c44bae..8c766f50a481 100644 --- a/src/demo-app/icon/icon-demo.html +++ b/src/demo-app/icon/icon-demo.html @@ -5,7 +5,7 @@

From URL: - +

diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts index d594a82f1a3b..3298ad143d33 100644 --- a/src/demo-app/icon/icon-demo.ts +++ b/src/demo-app/icon/icon-demo.ts @@ -1,10 +1,11 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {MdIcon, MdIconRegistry} from '../../components/icon/icon'; +import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon'; @Component({ + moduleId: module.id, selector: 'md-icon-demo', - templateUrl: 'demo-app/icon/icon-demo.html', - styleUrls: ['demo-app/icon/icon-demo.css'], + templateUrl: 'icon-demo.html', + styleUrls: ['icon-demo.css'], directives: [MdIcon], viewProviders: [MdIconRegistry], encapsulation: ViewEncapsulation.None, @@ -12,8 +13,8 @@ import {MdIcon, MdIconRegistry} from '../../components/icon/icon'; export class IconDemo { constructor(mdIconRegistry: MdIconRegistry) { mdIconRegistry - .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg') - .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg') + .addSvgIcon('thumb-up', '/icon/assets/thumbup-icon.svg') + .addSvgIconSetInNamespace('core', '/icon/assets/core-icon-set.svg') .registerFontClassAlias('fontawesome', 'fa'); } } diff --git a/src/index.html b/src/demo-app/index.html similarity index 100% rename from src/index.html rename to src/demo-app/index.html diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index 1b46610e9b20..0be50ac36313 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -1,18 +1,19 @@ import {Component} from '@angular/core'; -import {MD_INPUT_DIRECTIVES} from '../../components/input/input'; -import {MdButton} from '../../components/button/button'; -import {MdCard} from '../../components/card/card'; -import {MdCheckbox} from '../../components/checkbox/checkbox'; -import {MdIcon} from '../../components/icon/icon'; -import {MdToolbar} from '../../components/toolbar/toolbar'; +import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input'; +import {MdButton} from '@angular2-material/button/button'; +import {MdCard} from '@angular2-material/card/card'; +import {MdCheckbox} from '@angular2-material/checkbox/checkbox'; +import {MdIcon} from '@angular2-material/icon/icon'; +import {MdToolbar} from '@angular2-material/toolbar/toolbar'; let max = 5; @Component({ + moduleId: module.id, selector: 'input-demo', - templateUrl: 'demo-app/input/input-demo.html', - styleUrls: ['demo-app/input/input-demo.css'], + templateUrl: 'input-demo.html', + styleUrls: ['input-demo.css'], directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES] }) export class InputDemo { diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts index f24d2a63728e..0c4791b3d8a8 100644 --- a/src/demo-app/list/list-demo.ts +++ b/src/demo-app/list/list-demo.ts @@ -1,12 +1,13 @@ import {Component} from '@angular/core'; -import {MdButton} from '../../components/button/button'; -import {MD_LIST_DIRECTIVES} from '../../components/list/list'; -import {MdIcon} from '../../components/icon/icon'; +import {MdButton} from '@angular2-material/button/button'; +import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list'; +import {MdIcon} from '@angular2-material/icon/icon'; @Component({ + moduleId: module.id, selector: 'list-demo', - templateUrl: 'demo-app/list/list-demo.html', - styleUrls: ['demo-app/list/list-demo.css'], + templateUrl: 'list-demo.html', + styleUrls: ['list-demo.css'], directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon] }) export class ListDemo { diff --git a/src/demo-app/live-announcer/live-announcer-demo.ts b/src/demo-app/live-announcer/live-announcer-demo.ts index 377438c6201a..8fda54a3dacc 100644 --- a/src/demo-app/live-announcer/live-announcer-demo.ts +++ b/src/demo-app/live-announcer/live-announcer-demo.ts @@ -1,9 +1,10 @@ import {Component} from '@angular/core'; -import {MdLiveAnnouncer} from '../../core/live-announcer/live-announcer'; +import {MdLiveAnnouncer} from '@angular2-material/core/live-announcer/live-announcer'; @Component({ + moduleId: module.id, selector: 'toolbar-demo', - templateUrl: 'demo-app/live-announcer/live-announcer-demo.html', + templateUrl: 'live-announcer-demo.html', }) export class LiveAnnouncerDemo { diff --git a/src/main.scss b/src/demo-app/main.scss similarity index 100% rename from src/main.scss rename to src/demo-app/main.scss diff --git a/src/main.ts b/src/demo-app/main.ts similarity index 59% rename from src/main.ts rename to src/demo-app/main.ts index babe0c1e1c58..15ef934edd7f 100644 --- a/src/main.ts +++ b/src/demo-app/main.ts @@ -1,16 +1,17 @@ import {bootstrap} from '@angular/platform-browser-dynamic'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {DemoApp} from './demo-app/demo-app'; import {HTTP_PROVIDERS} from '@angular/http'; import {ROUTER_PROVIDERS} from '@angular/router'; -import {MdIconRegistry} from './components/icon/icon-registry'; -import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay'; -import {MdLiveAnnouncer} from './core/live-announcer/live-announcer'; import {provide} from '@angular/core'; -import {createOverlayContainer} from './core/overlay/overlay-container'; import {Renderer} from '@angular/core'; -import {MdGestureConfig} from './core/gestures/MdGestureConfig'; -import 'rxjs/Rx'; + +import {OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay'; +import {MdLiveAnnouncer} from '@angular2-material/core/live-announcer/live-announcer'; +import {createOverlayContainer} from '@angular2-material/core/overlay/overlay-container'; +import {MdGestureConfig} from '@angular2-material/core/gestures/MdGestureConfig'; +import {MdIconRegistry} from '@angular2-material/icon/icon-registry'; + +import {DemoApp} from './demo-app/demo-app'; bootstrap(DemoApp, [ ROUTER_PROVIDERS, diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index 83f4fcf1685c..3419002a4bd3 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/src/demo-app/overlay/overlay-demo.ts @@ -8,10 +8,11 @@ import { ViewChild, ViewContainerRef } from '@angular/core'; -import {Overlay, OverlayState, OVERLAY_PROVIDERS} from '../../core/overlay/overlay'; -import {ComponentPortal, Portal} from '../../core/portal/portal'; -import {TemplatePortalDirective} from '../../core/portal/portal-directives'; -import {RelativePosition} from '../../core/overlay/position/connected-position-strategy'; +import {Overlay, OverlayState, OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay'; +import {ComponentPortal, Portal} from '@angular2-material/core/portal/portal'; +import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives'; +import {RelativePosition} from + '@angular2-material/core/overlay/position/connected-position-strategy'; @@ -22,9 +23,10 @@ class OverlayOrigin { @Component({ + moduleId: module.id, selector: 'overlay-demo', - templateUrl: 'demo-app/overlay/overlay-demo.html', - styleUrls: ['demo-app/overlay/overlay-demo.css'], + templateUrl: 'overlay-demo.html', + styleUrls: ['overlay-demo.css'], directives: [TemplatePortalDirective, OverlayOrigin], providers: [OVERLAY_PROVIDERS], encapsulation: ViewEncapsulation.None, @@ -89,6 +91,7 @@ export class OverlayDemo { /** Simple component to load into an overlay */ @Component({ + moduleId: module.id, selector: 'rotini-panel', template: '

Rotini {{value}}

' }) diff --git a/src/demo-app/portal/portal-demo.ts b/src/demo-app/portal/portal-demo.ts index 65a5e0980769..b2bb0cd3e0b8 100644 --- a/src/demo-app/portal/portal-demo.ts +++ b/src/demo-app/portal/portal-demo.ts @@ -1,15 +1,16 @@ import {Component} from '@angular/core'; -import {PortalHostDirective} from '../../core/portal/portal-directives'; -import {TemplatePortalDirective} from '../../core/portal/portal-directives'; -import {Portal} from '../../core/portal/portal'; +import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives'; +import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives'; +import {Portal} from '@angular2-material/core/portal/portal'; import {ViewChildren} from '@angular/core'; import {QueryList} from '@angular/core'; -import {ComponentPortal} from '../../core/portal/portal'; +import {ComponentPortal} from '@angular2-material/core/portal/portal'; @Component({ + moduleId: module.id, selector: 'portal-demo', - templateUrl: 'demo-app/portal/portal-demo.html', - styleUrls: ['demo-app/portal/portal-demo.css'], + templateUrl: 'portal-demo.html', + styleUrls: ['portal-demo.css'], directives: [TemplatePortalDirective, PortalHostDirective] }) export class PortalDemo { @@ -32,6 +33,7 @@ export class PortalDemo { @Component({ + moduleId: module.id, selector: 'science-joke', template: `

100 kilopascals go into a bar.

` }) diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/demo-app/progress-bar/progress-bar-demo.ts index 04a54c839532..df6244402cc5 100644 --- a/src/demo-app/progress-bar/progress-bar-demo.ts +++ b/src/demo-app/progress-bar/progress-bar-demo.ts @@ -1,13 +1,14 @@ import {Component} from '@angular/core'; -import {MdButton} from '../../components/button/button'; -import {MdProgressBar} from '../../components/progress-bar/progress-bar'; +import {MdButton} from '@angular2-material/button/button'; +import {MdProgressBar} from '@angular2-material/progress-bar/progress-bar'; // TODO(josephperrott): Add an automatically filling example progress bar. @Component({ + moduleId: module.id, selector: 'progress-bar-demo', - templateUrl: 'demo-app/progress-bar/progress-bar-demo.html', - styleUrls: ['demo-app/progress-bar/progress-bar-demo.css'], + templateUrl: 'progress-bar-demo.html', + styleUrls: ['progress-bar-demo.css'], directives: [MdProgressBar, MdButton] }) export class ProgressBarDemo { diff --git a/src/demo-app/progress-circle/progress-circle-demo.ts b/src/demo-app/progress-circle/progress-circle-demo.ts index 4b50fe6e2928..f19bf4cc8ab4 100644 --- a/src/demo-app/progress-circle/progress-circle-demo.ts +++ b/src/demo-app/progress-circle/progress-circle-demo.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; -import {MdButton} from '../../components/button/button'; -import {MdProgressCircle, MdSpinner} from '../../components/progress-circle/progress-circle'; +import {MdButton} from '@angular2-material/button/button'; +import {MdProgressCircle, MdSpinner} from '@angular2-material/progress-circle/progress-circle'; @Component({ + moduleId: module.id, selector: 'progress-circle-demo', - templateUrl: 'demo-app/progress-circle/progress-circle-demo.html', - styleUrls: ['demo-app/progress-circle/progress-circle-demo.css'], + templateUrl: 'progress-circle-demo.html', + styleUrls: ['progress-circle-demo.css'], directives: [MdProgressCircle, MdSpinner, MdButton] }) export class ProgressCircleDemo { diff --git a/src/demo-app/radio/radio-demo.ts b/src/demo-app/radio/radio-demo.ts index f5c13f5fc731..a64548b40e18 100644 --- a/src/demo-app/radio/radio-demo.ts +++ b/src/demo-app/radio/radio-demo.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; -import {MdRadioButton, MdRadioGroup} from '../../components/radio/radio'; -import {MdRadioDispatcher} from '../../components/radio/radio_dispatcher'; +import {MdRadioButton, MdRadioGroup} from '@angular2-material/radio/radio'; +import {MdRadioDispatcher} from '@angular2-material/radio/radio_dispatcher'; @Component({ + moduleId: module.id, selector: 'radio-demo', - templateUrl: 'demo-app/radio/radio-demo.html', - styleUrls: ['demo-app/radio/radio-demo.css'], + templateUrl: 'radio-demo.html', + styleUrls: ['radio-demo.css'], providers: [MdRadioDispatcher], directives: [MdRadioButton, MdRadioGroup] }) diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts index 135ba46b94a1..7eedd41032a6 100644 --- a/src/demo-app/sidenav/sidenav-demo.ts +++ b/src/demo-app/sidenav/sidenav-demo.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; -import {MdButton} from '../../components/button/button'; -import {MD_SIDENAV_DIRECTIVES} from '../../components/sidenav/sidenav'; +import {MdButton} from '@angular2-material/button/button'; +import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav'; @Component({ + moduleId: module.id, selector: 'sidenav-demo', - templateUrl: 'demo-app/sidenav/sidenav-demo.html', - styleUrls: ['demo-app/sidenav/sidenav-demo.css'], + templateUrl: 'sidenav-demo.html', + styleUrls: ['sidenav-demo.css'], directives: [MD_SIDENAV_DIRECTIVES, MdButton] }) export class SidenavDemo { } diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.ts b/src/demo-app/slide-toggle/slide-toggle-demo.ts index 68bf0398c1d1..47e1a27757ad 100644 --- a/src/demo-app/slide-toggle/slide-toggle-demo.ts +++ b/src/demo-app/slide-toggle/slide-toggle-demo.ts @@ -1,10 +1,11 @@ import {Component} from '@angular/core'; -import {MdSlideToggle} from '../../components/slide-toggle/slide-toggle'; +import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle'; @Component({ + moduleId: module.id, selector: 'switch-demo', - templateUrl: 'demo-app/slide-toggle/slide-toggle-demo.html', - styleUrls: ['demo-app/slide-toggle/slide-toggle-demo.css'], + templateUrl: 'slide-toggle-demo.html', + styleUrls: ['slide-toggle-demo.css'], directives: [MdSlideToggle] }) export class SlideToggleDemo {} diff --git a/src/system-config.ts b/src/demo-app/system-config.ts similarity index 76% rename from src/system-config.ts rename to src/demo-app/system-config.ts index 5a7d5f604a97..d310607fd984 100644 --- a/src/system-config.ts +++ b/src/demo-app/system-config.ts @@ -1,25 +1,48 @@ /*********************************************************************************************** * User Configuration. **********************************************************************************************/ + +System.defaultJSExtensions = true; + + +const components = [ + 'button', + 'card', + 'checkbox', + 'grid-list', + 'icon', + 'input', + 'list', + 'progress-bar', + 'progress-circle', + 'radio', + 'sidenav', + 'slide-toggle', + 'tab-group', + 'toolbar' +]; + + /** Map relative paths to URLs. */ const map: any = { + '@angular2-material/core': '/core', }; +components.forEach(name => map[`@angular2-material/${name}`] = `/components/${name}`); + /** User packages configuration. */ const packages: any = { - 'demo-app': { + '@angular2-material/core': { format: 'cjs', defaultExtension: 'js' - }, - 'components': { - format: 'cjs', - defaultExtension: 'js' - }, - 'core': { + } +}; +components.forEach(name => { + packages[`@angular2-material/${name}`] = { format: 'cjs', defaultExtension: 'js' - }, -}; + }; +}); //////////////////////////////////////////////////////////////////////////////////////////////// /*********************************************************************************************** diff --git a/src/demo-app/tab-group/tab-group-demo.ts b/src/demo-app/tab-group/tab-group-demo.ts index 1ca31c1aad92..7e79d2b5fad6 100644 --- a/src/demo-app/tab-group/tab-group-demo.ts +++ b/src/demo-app/tab-group/tab-group-demo.ts @@ -1,12 +1,13 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {MD_TAB_GROUP_DIRECTIVES} from '../../components/tab-group/tab-group'; -import {MdToolbar} from '../../components/toolbar/toolbar'; -import {MdInput} from '../../components/input/input'; +import {MD_TAB_GROUP_DIRECTIVES} from '@angular2-material/tab-group/tab-group'; +import {MdToolbar} from '@angular2-material/toolbar/toolbar'; +import {MdInput} from '@angular2-material/input/input'; @Component({ + moduleId: module.id, selector: 'tab-group-demo', - templateUrl: 'demo-app/tab-group/tab-group-demo.html', - styleUrls: ['demo-app/tab-group/tab-group-demo.css'], + templateUrl: 'tab-group-demo.html', + styleUrls: ['tab-group-demo.css'], directives: [MD_TAB_GROUP_DIRECTIVES, MdToolbar, MdInput], encapsulation: ViewEncapsulation.None, }) diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts index 0aefbb60125c..dd5433f39ae7 100644 --- a/src/demo-app/toolbar/toolbar-demo.ts +++ b/src/demo-app/toolbar/toolbar-demo.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; -import {MdIcon} from '../../components/icon/icon'; -import {MdToolbar} from '../../components/toolbar/toolbar'; +import {MdIcon} from '@angular2-material/icon/icon'; +import {MdToolbar} from '@angular2-material/toolbar/toolbar'; @Component({ + moduleId: module.id, selector: 'toolbar-demo', - templateUrl: 'demo-app/toolbar/toolbar-demo.html', - styleUrls: ['demo-app/toolbar/toolbar-demo.css'], + templateUrl: 'toolbar-demo.html', + styleUrls: ['toolbar-demo.css'], directives: [MdToolbar, MdIcon] }) export class ToolbarDemo { diff --git a/src/tsconfig.json b/src/demo-app/tsconfig.json similarity index 56% rename from src/tsconfig.json rename to src/demo-app/tsconfig.json index 99ee503241db..e5e1c4d8eea7 100644 --- a/src/tsconfig.json +++ b/src/demo-app/tsconfig.json @@ -8,12 +8,23 @@ "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": true, - "outDir": "../dist/", - "rootDir": ".", + "outDir": "../../dist/", + "rootDir": "..", "sourceMap": true, "target": "es5", "inlineSources": true, - "stripInternal": true + "stripInternal": true, + "baseUrl": "", + "paths": { + "@angular2-material/core/*": [ + "./core/*", + "../core/*" + ], + "@angular2-material/*": [ + "./components/*", + "../components/*" + ] + } }, "files": [ "main.ts", diff --git a/src/demo-app/typings.d.ts b/src/demo-app/typings.d.ts new file mode 100644 index 000000000000..3e0714ab420c --- /dev/null +++ b/src/demo-app/typings.d.ts @@ -0,0 +1,4 @@ +/// + +declare var module: { id: string }; + diff --git a/src/typings.d.ts b/src/typings.d.ts deleted file mode 100644 index beb6cefcecec..000000000000 --- a/src/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -///